[Refactor][로그인] 로그인 화면 수정 및 로그인 기능 개선

- 로그인 화면 수정 및 로그인 기능 개선
CCC-org · Mar 9, 2023 · a598229 · a598229
1 parent 7f1637e
commit a598229
Show file tree

Hide file tree

Showing 10 changed files with 154 additions and 31 deletions.
diff --git a/App.tsx b/App.tsx
@@ -152,7 +152,9 @@ export default function App() {
                       <Stack.Screen
                         name="SignUp"
                         component={SignUpScreen}
-                        options={headerOptions}
+                        options={{
+                          headerLeft: () => <View></View>,
+                        }}
                       />
                       <Stack.Screen name="Login" component={LoginScreen} options={headerOptions} />
                       <Stack.Screen

diff --git a/src/components/buttons/ConditionalButton.tsx b/src/components/buttons/ConditionalButton.tsx
@@ -13,7 +13,7 @@ import React, { useState } from 'react';
 import { useTheme } from 'react-native-paper';
 
 interface ConditionalButtonProps {
-  isActive: boolean;
+  isActive?: boolean;
   text: string;
   color?: string;
   textColor?: string;
@@ -26,7 +26,7 @@ interface ConditionalButtonProps {
 const fullHeightOfScreen = Dimensions.get('window').height;
 
 const ConditionalButton = ({
-  isActive,
+  isActive = true,
   onPress,
   text,
   width,

diff --git a/src/components/buttons/SocialLoginButton.tsx b/src/components/buttons/SocialLoginButton.tsx
@@ -1,19 +1,41 @@
-import { Text } from 'react-native';
+import { Text, Pressable } from 'react-native';
 import React from 'react';
-import { Button } from 'react-native-paper';
+import { SvgXml } from 'react-native-svg';
 
 interface SocialLoginButtonProps {
   text: string;
-  icon?: string;
+  textColor: string;
+  xml?: string;
   color: string;
   onPress: () => void;
 }
 
-const SocialLoginButton = ({ onPress, color, icon, text }: SocialLoginButtonProps) => {
+const SocialLoginButton = ({ onPress, textColor, color, xml, text }: SocialLoginButtonProps) => {
   return (
-    <Button onPress={onPress} mode="contained" color={color} icon={icon}>
-      <Text>{text}</Text>
-    </Button>
+    <Pressable
+      onPress={onPress}
+      style={{
+        width: 343,
+        flexDirection: 'row',
+        justifyContent: 'center',
+        alignItems: 'center',
+        borderRadius: 100,
+        backgroundColor: color,
+      }}
+    >
+      {xml && <SvgXml xml={xml} style={{ marginRight: 8 }} />}
+      <Text
+        style={{
+          fontFamily: 'pretendardSemiBold',
+          fontSize: 16,
+          marginVertical: 16,
+          lineHeight: 24,
+          color: textColor,
+        }}
+      >
+        {text}
+      </Text>
+    </Pressable>
   );
 };
 

diff --git a/src/constants/Icons/Signin/apple.ts b/src/constants/Icons/Signin/apple.ts
@@ -0,0 +1,12 @@
+export default `<svg width="19" height="18" viewBox="0 0 19 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_8371_16141)">
+<path d="M14.7315 9.67186C14.7403 8.98193 14.9236 8.30545 15.2642 7.70538C15.6048 7.10531 16.0916 6.60113 16.6794 6.23977C16.306 5.70648 15.8134 5.2676 15.2407 4.958C14.668 4.64839 14.031 4.47659 13.3803 4.45623C11.9922 4.31053 10.6466 5.28682 9.93924 5.28682C9.21822 5.28682 8.12917 4.4707 6.95645 4.49482C6.1979 4.51933 5.45864 4.73991 4.81069 5.13508C4.16273 5.53024 3.62819 6.08651 3.25914 6.74968C1.6605 9.51748 2.85294 13.5852 4.38431 15.8225C5.15048 16.918 6.04592 18.1418 7.21758 18.0984C8.36413 18.0508 8.79234 17.3673 10.1763 17.3673C11.5474 17.3673 11.9492 18.0984 13.1446 18.0708C14.3749 18.0508 15.1501 16.9704 15.8894 15.8645C16.4399 15.0839 16.8635 14.2211 17.1445 13.3082C16.4297 13.0059 15.8198 12.4999 15.3907 11.8532C14.9615 11.2066 14.7323 10.4479 14.7315 9.67186Z" fill="white"/>
+<path d="M12.4727 2.98495C13.1435 2.17967 13.474 1.14462 13.3939 0.0996094C12.3691 0.20725 11.4224 0.697058 10.7425 1.47144C10.4101 1.84975 10.1555 2.28986 9.99333 2.76662C9.83111 3.24337 9.76445 3.74743 9.79715 4.24996C10.3098 4.25524 10.8169 4.14414 11.2803 3.92502C11.7438 3.70589 12.1514 3.38447 12.4727 2.98495Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_8371_16141">
+<rect width="18" height="18" fill="white" transform="translate(0.5)"/>
+</clipPath>
+</defs>
+</svg>
+`;
diff --git a/src/constants/Icons/Signin/google.ts b/src/constants/Icons/Signin/google.ts
@@ -0,0 +1,14 @@
+export default `<svg width="19" height="18" viewBox="0 0 19 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_8371_2843)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M17.9764 7.36328H9.5V10.8446H14.3436C14.135 11.9696 13.5009 12.9228 12.5477 13.561V15.8192H15.4564C17.1582 14.2524 18.14 11.9451 18.14 9.20419C18.14 8.56601 18.0827 7.95237 17.9764 7.36328Z" fill="#4285F4"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.4561 15.8205L12.5475 13.5623C11.7416 14.1023 10.7107 14.4214 9.49976 14.4214C7.15567 14.4214 5.17158 12.8382 4.46385 10.7109H1.45703V13.0428C2.93794 15.9841 5.98158 18.0009 9.49976 18.0009C11.9298 18.0009 13.967 17.195 15.4561 15.8205Z" fill="#34A853"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.18182 9.0008C4.18182 8.40762 4.28409 7.8308 4.46409 7.2908V4.95898H1.45727C0.847727 6.17398 0.5 7.54853 0.5 9.0008C0.5 10.4531 0.847727 11.8276 1.45727 13.0426L4.46409 10.7108C4.28409 10.1708 4.18182 9.59398 4.18182 9.0008Z" fill="#FBBC05"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.9402 4.92545L15.5216 2.34409C13.9629 0.891818 11.9257 0 9.49976 0C5.98158 0 2.93794 2.01682 1.45703 4.95818L4.46385 7.29C5.17158 5.16273 7.15567 3.57955 9.49976 3.57955C10.8211 3.57955 12.0075 4.03364 12.9402 4.92545Z" fill="#EA4335"/>
+</g>
+<defs>
+<clipPath id="clip0_8371_2843">
+<rect width="18" height="18" fill="white" transform="translate(0.5)"/>
+</clipPath>
+</defs>
+</svg>
+`;
diff --git a/src/constants/Icons/Signin/kakao.ts b/src/constants/Icons/Signin/kakao.ts
@@ -0,0 +1,15 @@
+export default `<svg width="19" height="18" viewBox="0 0 19 18" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<g clip-path="url(#clip0_8371_16175)">
+<rect x="0.5" y="0.5" width="18" height="17" fill="url(#pattern0)"/>
+</g>
+<defs>
+<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
+<use xlink:href="#image0_8371_16175" transform="scale(0.0277778 0.0294118)"/>
+</pattern>
+<clipPath id="clip0_8371_16175">
+<rect width="18" height="18" fill="white" transform="translate(0.5)"/>
+</clipPath>
+<image id="image0_8371_16175" width="36" height="34" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAiCAYAAAA3WXuFAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAADBBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDcuMi1jMDAwIDc5LjU2NmViYzViNCwgMjAyMi8wNS8wOS0wODoyNTo1NSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdEV2dD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlRXZlbnQjIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1sbnM6cGhvdG9zaG9wPSJodHRwOi8vbnMuYWRvYmUuY29tL3Bob3Rvc2hvcC8xLjAvIiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDQyAyMDE5IChNYWNpbnRvc2gpIiB4bXA6Q3JlYXRlRGF0ZT0iMjAyMC0wMi0yOFQxMDo1MzoxNyswOTowMCIgeG1wOk1ldGFkYXRhRGF0ZT0iMjAyMi0wNi0yMlQxNToyNjowMisxNTowMCIgeG1wOk1vZGlmeURhdGU9IjIwMjItMDYtMjJUMTU6MjY6MDIrMTU6MDAiIGRjOmZvcm1hdD0iaW1hZ2UvcG5nIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjlCNEZDMTdERUE2MzExRUNCQUM4QUJERTgzOTc4MzVGIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjlCNEZDMTdFRUE2MzExRUNCQUM4QUJERTgzOTc4MzVGIiB4bXBNTTpPcmlnaW5hbERvY3VtZW50SUQ9InhtcC5kaWQ6Y2E0NmJlNjgtOTgwOC00NDU0LWIxNGItYzhmNGM2NjNkYWM3Ij4gPHhtcE1NOkhpc3Rvcnk+IDxyZGY6U2VxPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0iY3JlYXRlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDpjYTQ2YmU2OC05ODA4LTQ0NTQtYjE0Yi1jOGY0YzY2M2RhYzciIHN0RXZ0OndoZW49IjIwMjAtMDItMjhUMTA6NTM6MTcrMDk6MDAiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCBDQyAyMDE5IChNYWNpbnRvc2gpIi8+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJzYXZlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDo1MDViNjhkOC1kYWIxLTQ0ZmMtODQxYS1jMmZhOWQ4MjU5YzYiIHN0RXZ0OndoZW49IjIwMjAtMDItMjhUMTQ6NTY6NTMrMDk6MDAiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCBDQyAyMDE5IChNYWNpbnRvc2gpIiBzdEV2dDpjaGFuZ2VkPSIvIi8+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJzYXZlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDo4YTVjYmVlOS1hNjU3LTQ0MGMtYTI2MC0yNWQ5MDk5NTY2ZjkiIHN0RXZ0OndoZW49IjIwMjAtMDQtMTBUMTM6MTA6MDcrMDk6MDAiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCBDQyAyMDE5IChNYWNpbnRvc2gpIiBzdEV2dDpjaGFuZ2VkPSIvIi8+IDwvcmRmOlNlcT4gPC94bXBNTTpIaXN0b3J5PiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo4YTVjYmVlOS1hNjU3LTQ0MGMtYTI2MC0yNWQ5MDk5NTY2ZjkiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6Y2E0NmJlNjgtOTgwOC00NDU0LWIxNGItYzhmNGM2NjNkYWM3Ii8+IDxwaG90b3Nob3A6VGV4dExheWVycz4gPHJkZjpCYWc+IDxyZGY6bGkgcGhvdG9zaG9wOkxheWVyTmFtZT0i7Lm07Lm07JikIOuhnOq3uOyduCIgcGhvdG9zaG9wOkxheWVyVGV4dD0i7Lm07Lm07JikIOuhnOq3uOyduCIvPiA8cmRmOmxpIHBob3Rvc2hvcDpMYXllck5hbWU9Iuy5tOy5tOyYpCDroZzqt7jsnbgiIHBob3Rvc2hvcDpMYXllclRleHQ9Iuy5tOy5tOyYpCDroZzqt7jsnbgiLz4gPHJkZjpsaSBwaG90b3Nob3A6TGF5ZXJOYW1lPSLsubTsubTsmKQg66Gc6re47J24IiBwaG90b3Nob3A6TGF5ZXJUZXh0PSLsubTsubTsmKQg66Gc6re47J24Ii8+IDxyZGY6bGkgcGhvdG9zaG9wOkxheWVyTmFtZT0i7Lm07Lm07JikIOuhnOq3uOyduCIgcGhvdG9zaG9wOkxheWVyVGV4dD0i7Lm07Lm07JikIOuhnOq3uOyduCIvPiA8cmRmOmxpIHBob3Rvc2hvcDpMYXllck5hbWU9IkxvZ2luIHdpdGggS2FrYW8iIHBob3Rvc2hvcDpMYXllclRleHQ9IkxvZ2luIHdpdGggS2FrYW8iLz4gPHJkZjpsaSBwaG90b3Nob3A6TGF5ZXJOYW1lPSJMb2dpbiB3aXRoIEtha2FvIiBwaG90b3Nob3A6TGF5ZXJUZXh0PSJMb2dpbiB3aXRoIEtha2FvIi8+IDxyZGY6bGkgcGhvdG9zaG9wOkxheWVyTmFtZT0iTG9naW4gd2l0aCBLYWthbyIgcGhvdG9zaG9wOkxheWVyVGV4dD0iTG9naW4gd2l0aCBLYWthbyIvPiA8cmRmOmxpIHBob3Rvc2hvcDpMYXllck5hbWU9IkxvZ2luIHdpdGggS2FrYW8iIHBob3Rvc2hvcDpMYXllclRleHQ9IkxvZ2luIHdpdGggS2FrYW8iLz4gPHJkZjpsaSBwaG90b3Nob3A6TGF5ZXJOYW1lPSLroZzqt7jsnbgiIHBob3Rvc2hvcDpMYXllclRleHQ9IuuhnOq3uOyduCIvPiA8cmRmOmxpIHBob3Rvc2hvcDpMYXllck5hbWU9IuuhnOq3uOyduCIgcGhvdG9zaG9wOkxheWVyVGV4dD0i66Gc6re47J24Ii8+IDxyZGY6bGkgcGhvdG9zaG9wOkxheWVyTmFtZT0i66Gc6re47J24IiBwaG90b3Nob3A6TGF5ZXJUZXh0PSLroZzqt7jsnbgiLz4gPHJkZjpsaSBwaG90b3Nob3A6TGF5ZXJOYW1lPSJMb2dpbiIgcGhvdG9zaG9wOkxheWVyVGV4dD0iTG9naW4iLz4gPHJkZjpsaSBwaG90b3Nob3A6TGF5ZXJOYW1lPSJMb2dpbiIgcGhvdG9zaG9wOkxheWVyVGV4dD0iTG9naW4iLz4gPHJkZjpsaSBwaG90b3Nob3A6TGF5ZXJOYW1lPSJMb2dpbiIgcGhvdG9zaG9wOkxheWVyVGV4dD0iTG9naW4iLz4gPC9yZGY6QmFnPiA8L3Bob3Rvc2hvcDpUZXh0TGF5ZXJzPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pu85RkMAAAH+SURBVHjazJjNK0RRGMbPveOz0SywkCJlQbEhLCzGkKWaFWWBjWRhycbCH6BZWCgW/AGDjSwspkHIgighkiQfk4+hTL6KJs+rV13TzJ07uh/nqd/mzmnmmfc855z3XEVkpiLgBQ2gGpSBYpDHn3+AKLgEx2APrINHoz+gGBiTDfygCzQDNcM/EQdbYA4sgs//GlLZxDAoFeYoAgJsLp6JoQowCeqFNaKpHAIXRgy1gWlQIKzVCxgEK9qHroRBHWBGE1IrlcPZPAOnySrUBOY5xHaKQt4JtrWGPGANlAhndAdaQOx3ykb5gVOivOZSURTe7HZsyo2eaFNtVDlYTpsR7MFPhnxCHvnIUI1EhmpVzpAsKlQNHrB2KU6G7iUyFCVDuxIZOiBDGxIZClF+3Fwlj8NmYnSeUoVewawE1aEuI6ZodskQqHTIzDlop+ND1ZwjA1w2u0Uz1M8e/jTsdEvo407OLr2BXnCSqmO84VXnsyHk1AN1J247riQDb8ECKAdVFplZBj1Gm3yt6Bo0YaKRfTAOVlMNyErzBfkm7S+0goNgM93gdIbStbVPjJsXyDt4ANfgiPNBfJlxlSazhzrhphvKGHg2M1x6FapLYYZCPwLCVqRd78WBN8mzIG8JYeGAlvjlQIRz0OrkQUdTdcUbZUCCTuBn1Uw5cSP5FmAA/WlgA3utsOYAAAAASUVORK5CYII="/>
+</defs>
+</svg>
+`;
diff --git a/src/constants/Icons/Signin/naver.ts b/src/constants/Icons/Signin/naver.ts
@@ -0,0 +1,11 @@
+export default `<svg width="19" height="18" viewBox="0 0 19 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_8371_16168)">
+<path d="M12.1777 9.51922L6.61157 1.56055H2V16.4366H6.83471V8.4779L12.3884 16.4366H17V1.56055H12.1777V9.51922Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_8371_16168">
+<rect width="15" height="14.876" fill="white" transform="translate(2 1.56055)"/>
+</clipPath>
+</defs>
+</svg>
+`;
diff --git a/src/screens/login/LoginScreen.tsx b/src/screens/login/LoginScreen.tsx
@@ -19,6 +19,7 @@ function Login({ navigation, route }) {
     onSuccess: (response) => {
       setAccessToken(response.data.accessToken);
       setUserId(response.data.userId);
+      if (response.data.alreadySignedUp) navigation.navigate('Tabs');
       navigation.navigate('CategorySelect');
     },
     onError: (e) => {

diff --git a/src/screens/onboarding/SignUpScreen.tsx b/src/screens/onboarding/SignUpScreen.tsx
@@ -1,17 +1,29 @@
 import { StyleSheet, View, Text } from 'react-native';
-import React from 'react';
+import React, { useCallback, useRef } from 'react';
 import SocialLoginButton from '../../components/buttons/SocialLoginButton';
 import { useTheme } from 'react-native-paper';
 import OnboardingLottie from '../../components/lotties/OnboardingLottie';
+import kakao from '../../constants/Icons/Signin/kakao';
+import { BottomSheetBackdrop, BottomSheetModal } from '@gorhom/bottom-sheet';
+import apple from '../../constants/Icons/Signin/apple';
+import google from '../../constants/Icons/Signin/google';
+import naver from '../../constants/Icons/Signin/naver';
 
 const SignUpScreen = ({ navigation }) => {
+  const modalRef = useRef<BottomSheetModal>(null);
   const theme = useTheme();
   const handleLoginPress = (oauth: string) => {
     navigation.navigate('Login', { oauth });
+    modalRef.current?.close();
   };
 
+  const renderBackdrop = useCallback(
+    (props) => <BottomSheetBackdrop {...props} disappearsOnIndex={-1} appearsOnIndex={0} />,
+    [],
+  );
+
   const handleOtherPress = () => {
-    alert('started by other ways.');
+    modalRef.current?.present();
   };
 
   return (
@@ -28,35 +40,68 @@ const SignUpScreen = ({ navigation }) => {
         <View style={styles.kakao}>
           <SocialLoginButton
             text="카카오로 시작하기"
-            icon="facebook-messenger"
+            textColor={theme.colors.graphic.black}
+            xml={kakao}
             color={theme.colors.graphic.yellow}
             onPress={() => handleLoginPress('kakao')}
-          ></SocialLoginButton>
-        </View>
-        <View style={styles.kakao}>
-          <SocialLoginButton
-            text="네이버로 시작하기"
-            icon="facebook-messenger"
-            color={theme.colors.graphic.green}
-            onPress={() => handleLoginPress('naver')}
-          ></SocialLoginButton>
-        </View>
-        <View style={styles.kakao}>
-          <SocialLoginButton
-            text="구글로 시작하기"
-            icon="facebook-messenger"
-            color={theme.colors.graphic.violet}
-            onPress={() => handleLoginPress('google')}
-          ></SocialLoginButton>
+          />
         </View>
         <View style={styles.other}>
           <SocialLoginButton
             text="다른 방법으로 시작하기"
+            textColor={theme.colors.graphic.black}
             color="#E1E1D0"
             onPress={handleOtherPress}
-          ></SocialLoginButton>
+          />
         </View>
       </View>
+      <BottomSheetModal ref={modalRef} snapPoints={['40%']} backdropComponent={renderBackdrop}>
+        <Text
+          style={{
+            fontFamily: 'pretendardSemiBold',
+            fontSize: 22,
+            marginHorizontal: 16,
+            marginVertical: 24,
+          }}
+        >
+          다른 방법으로 시작하기
+        </Text>
+        <View
+          style={{
+            width: '100%',
+            alignItems: 'center',
+            justifyContent: 'center',
+          }}
+        >
+          <View style={styles.kakao}>
+            <SocialLoginButton
+              text="Apple로 로그인"
+              textColor={theme.colors.graphic.white}
+              xml={apple}
+              color={theme.colors.graphic.black}
+              onPress={() => handleLoginPress('apple')}
+            />
+          </View>
+          <View style={styles.other}>
+            <SocialLoginButton
+              text="Google 계정으로 시작하기"
+              textColor={`${theme.colors.graphic.black}54`}
+              xml={google}
+              color="#EEEEEE"
+              onPress={() => handleLoginPress('google')}
+            />
+          </View>
+          <View style={styles.other}>
+            <SocialLoginButton
+              text="네이버로 시작하기"
+              textColor={theme.colors.graphic.white}
+              xml={naver}
+              color={'#03C75A'}
+              onPress={() => handleLoginPress('naver')}
+            />
+          </View>
+        </View>
+      </BottomSheetModal>
     </View>
   );
 };

diff --git a/src/types/login.d.ts b/src/types/login.d.ts
@@ -10,5 +10,6 @@ interface LoginResponse {
   data: {
     userId: number;
     accessToken: string;
+    alreadySignedUp: boolean;
   };
 }