feat: setting 페이지 구성합니다. (뷰)

src/apis/Login.ts

@@ -211,6 +211,7 @@ export const getProfile = async () => {
           id: kakaoProfileRes.id,
           name: kakaoProfileRes.nickname,
           image: kakaoProfileRes.profileImageUrl,
+          provider: 'KAKAO',
         };
       }
     } else if (storageRes.OAuthProvider === 'NAVER') {
@@ -226,6 +227,7 @@ export const getProfile = async () => {
           id: naverProfileRes.response.id,
           name: naverProfileRes.response.name,
           image: naverProfileRes.response.profile_image ?? '',
+          provider: 'NAVER',
         };
       }
     }

src/apis/User.ts

@@ -18,12 +18,14 @@ export const getUserProfile = async (): Promise<UserType | null> => {
         id: kakaoRes.id,
         name: kakaoRes.nickname,
         image: kakaoRes.profileImageUrl,
+        provider: 'KAKAO',
       };
     } else if (naverRes) {
       userProfile = {
         id: naverRes.id.toString(),
         name: naverRes.name,
         image: naverRes.profile_image ?? '',
+        provider: 'NAVER',
       };
     }
 

src/components/common/SettingsNavigatorIcon.tsx

@@ -9,8 +9,7 @@ const SettingsIcon = () => {
   const navigation = useNavigation<NavigationProp<RootStackParamList>>();
 
   const handlePress = () => {
-    // TODO: Navigate to the setting screen
-    navigation.navigate('Settings');
+    navigation.navigate('MyPageRoot', {screen: 'Setting'});
   };
 
   return (

src/navigation/MyPageNavigator.tsx

@@ -0,0 +1,32 @@
+import MyPageScreen from '@/screens/MyPageScreen';
+import SettingScreen from '@/screens/SettingScreen';
+import {MyPageStackParamList} from '@/types/StackNavigationType';
+import {createStackNavigator} from '@react-navigation/stack';
+import React from 'react';
+
+const Stack = createStackNavigator<MyPageStackParamList>();
+
+const MyPageNavigator = () => {
+  return (
+    <Stack.Navigator
+      initialRouteName="MyPageRoot"
+      screenOptions={{headerShown: true}}>
+      <Stack.Screen
+        name="MyPage"
+        component={MyPageScreen}
+        options={{
+          title: '마이페이지',
+        }}
+      />
+      <Stack.Screen
+        name="Setting"
+        component={SettingScreen}
+        options={{
+          title: '설정',
+        }}
+      />
+    </Stack.Navigator>
+  );
+};
+
+export default MyPageNavigator;

src/navigation/index.tsx

@@ -5,6 +5,7 @@ import {createStackNavigator} from '@react-navigation/stack';
 import RegisterNavigator from './RegisterNavigator';
 import DetailNavigator from './DetailNavigator';
 import CartNavigator from './CartNavigator';
+import MyPageNavigator from './MyPageNavigator';
 // Create a stack navigator
 const Stack = createStackNavigator<RootStackParamList>();
 
@@ -17,6 +18,7 @@ const AppNavigator = () => {
       <Stack.Screen name="Register" component={RegisterNavigator} />
       <Stack.Screen name="Detail" component={DetailNavigator} />
       <Stack.Screen name="CartRoot" component={CartNavigator} />
+      <Stack.Screen name="MyPageRoot" component={MyPageNavigator} />
     </Stack.Navigator>
   );
 };

src/screens/FeedScreen/SearchBar.style.tsx

@@ -12,7 +12,7 @@ const SearchWrapper = styled.View`
 `;
 
 const MarketWrapper = styled.ScrollView`
-  margin-top: 50px;
+  // margin-top: 50px;
 `;
 
 const S = {

src/screens/FeedScreen/index.tsx

@@ -1,24 +1,32 @@
 import {StackNavigationProp} from '@react-navigation/stack';
 import React, {useCallback, useEffect, useState} from 'react';
-import {Alert, RefreshControl, Text, View} from 'react-native';
+import {
+  Alert,
+  PermissionsAndroid,
+  Platform,
+  RefreshControl,
+  Text,
+  View,
+} from 'react-native';
+import Geolocation from 'react-native-geolocation-service';
+import {PERMISSIONS, request, RESULTS} from 'react-native-permissions';
+
 import {getMarketList} from '@/apis';
-import {Market, SearchTab} from '@/components/feedPage';
+import {BottomButton} from '@/components/common';
+import {Market} from '@/components/feedPage';
 import usePullDownRefresh from '@/hooks/usePullDownRefresh';
 import {MarketType} from '@/types/Market';
 import {RootStackParamList} from '@/types/StackNavigationType';
-import {Platform, PermissionsAndroid} from 'react-native';
-import {request, PERMISSIONS, RESULTS} from 'react-native-permissions';
-import Geolocation from 'react-native-geolocation-service';
-import {BottomButton} from '@/components/common';
-
-import S from './SearchBar.style';
 
 import {
   onForegroundMessageHandler,
-  requestUserPermission,
   requestNotificationPermission,
+  requestUserPermission,
   setBackgroundMessageHandler,
 } from '@/utils/notification';
+
+import S from './SearchBar.style';
+
 type Props = {
   navigation: StackNavigationProp<RootStackParamList, 'Home'>;
 };
@@ -73,6 +81,7 @@ const FeedScreen = ({navigation}: Props) => {
       }
     }
   }, []);
+
   const getCurrentLocation = useCallback(async () => {
     const hasPermission = await requestLocationPermission();
     if (!hasPermission) {
@@ -186,9 +195,8 @@ const FeedScreen = ({navigation}: Props) => {
 
   return (
     <S.Container>
-      <S.SearchWrapper>
-        <SearchTab />
-      </S.SearchWrapper>
+      {/* TODO: 검색바 */}
+      <S.SearchWrapper>{/* <SearchTab /> */}</S.SearchWrapper>
       <S.MarketWrapper
         refreshControl={
           <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />

src/screens/MyPageScreen/UserMyPage.tsx

@@ -1,14 +1,17 @@
+import {useNavigation} from '@react-navigation/native';
+import {StackNavigationProp} from '@react-navigation/stack';
 import React from 'react';
 import {Alert, RefreshControl} from 'react-native';
-import {UserType} from '@/types/UserType';
-import {Profile} from '@components/myPage';
+
 import {logout} from '@/apis/Login';
-import {useNavigation} from '@react-navigation/native';
-import {StackNavigationProp} from '@react-navigation/stack';
 import ListBox from '@/components/common/ListBox';
-import S from './UserMyPage.style';
-import {RootStackParamList} from '@/types/StackNavigationType';
 import NavigationTextButton from '@/components/common/NavigateTextButton';
+import {RootStackParamList} from '@/types/StackNavigationType';
+import {UserType} from '@/types/UserType';
+import {convertOAuthProviderToKorean} from '@/utils/common';
+import {Profile} from '@components/myPage';
+
+import S from './UserMyPage.style';
 
 type UserMyPageProps = {
   profile: UserType;
@@ -39,11 +42,16 @@ const UserMyPage = ({profile, refreshing, onRefresh}: UserMyPageProps) => {
             label: '이름',
             value: `${profile.name}`,
           },
+          // TODO: 이메일, 전화번호 등록 시 주석 해제
+          // {
+          //   label: '이메일',
+          //   value: profile.email ?? '이메일 미등록',
+          // },
+          // {label: '전화번호', value: profile.phoneNumber ?? '전화번호 미등록'},
           {
-            label: '이메일',
-            value: `[email protected]`,
+            label: '소셜 로그인',
+            value: convertOAuthProviderToKorean(profile.provider),
           },
-          {label: '전화번호', value: `010-1234-5678`},
         ]}
       />
       <S.NoticeSection>

src/screens/MyPageScreen/index.tsx

@@ -1,14 +1,14 @@
-import {StackScreenProps} from '@react-navigation/stack';
-import {useIsFocused} from '@react-navigation/native';
-import React, {useEffect, useState} from 'react';
-import usePullDownRefresh from '@/hooks/usePullDownRefresh';
 import {getProfile} from '@/apis/Login';
-import {RootStackParamList} from '@/types/StackNavigationType';
+import usePullDownRefresh from '@/hooks/usePullDownRefresh';
+import {MyPageStackParamList} from '@/types/StackNavigationType';
 import {UserType} from '@/types/UserType';
+import {useIsFocused} from '@react-navigation/native';
+import {StackScreenProps} from '@react-navigation/stack';
+import React, {useEffect, useState} from 'react';
 import NonMemberMyPage from './NonMemberMyPage';
 import UserMyPage from './UserMyPage';
 
-type Props = StackScreenProps<RootStackParamList, 'MyPage'>;
+type Props = StackScreenProps<MyPageStackParamList, 'MyPage'>;
 
 const MyPageScreen = ({navigation}: Props) => {
   const [profile, setProfile] = useState<UserType | null>(null);

src/screens/SettingScreen/SettingScreen.style.tsx

@@ -0,0 +1,60 @@
+import styled from '@emotion/native';
+import {Switch, Text} from 'react-native-paper';
+
+const Container = styled.View`
+  flex: 1;
+`;
+
+const SettingItemList = styled.View`
+  display: flex;
+  flex-direction: column;
+`;
+
+const SettingItemTitle = styled(Text)`
+  ${({theme}) => theme.fonts.subtitle1};
+  padding: 8px 16px;
+`;
+
+const SettingItem = styled.View`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+
+  background-color: #ffffff;
+
+  padding: 8px 16px;
+
+  border-bottom-width: 1px;
+  border-bottom-color: #eaeaea;
+`;
+
+const SettingItemDescriptionContainer = styled.View`
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+
+  flex: 1;
+`;
+
+const SettingItemDescriptionTitle = styled(Text)`
+  ${({theme}) => theme.fonts.default};
+`;
+const SettingItemDescription = styled(Text)`
+  ${({theme}) => theme.fonts.subtitle2};
+`;
+
+const SwitchButton = styled(Switch)``;
+
+const S = {
+  Container,
+  SwitchButton,
+  SettingItemList,
+  SettingItemTitle,
+  SettingItem,
+  SettingItemDescriptionContainer,
+  SettingItemDescriptionTitle,
+  SettingItemDescription,
+};
+
+export default S;

src/screens/SettingScreen/index.tsx

@@ -0,0 +1,57 @@
+import React, {useState} from 'react';
+
+import S from './SettingScreen.style';
+
+const SettingScreen = () => {
+  const [isNotificationOn, setIsNotificationOn] = useState(false);
+  const [isLocationOn, setIsLocationOn] = useState(false);
+
+  // TODO: Implement handleNotificationSwitch function
+  const handleNotificationSwitch = async () => {
+    setIsNotificationOn(prev => !prev);
+  };
+
+  // TODO: Implement handleLocationSwitch function
+  const handleLocationSwitch = async () => {
+    setIsLocationOn(prev => !prev);
+  };
+
+  return (
+    <S.Container>
+      <S.SettingItemList>
+        <S.SettingItemTitle>알림</S.SettingItemTitle>
+        <S.SettingItem>
+          <S.SettingItemDescriptionContainer>
+            <S.SettingItemDescriptionTitle>
+              찜한 가게 알림
+            </S.SettingItemDescriptionTitle>
+            <S.SettingItemDescription>
+              찜한 가게에 새로운 상품이 등록되면 알림을 보내드려요
+            </S.SettingItemDescription>
+          </S.SettingItemDescriptionContainer>
+          <S.SwitchButton
+            value={isNotificationOn}
+            onChange={handleNotificationSwitch}
+          />
+        </S.SettingItem>
+        <S.SettingItemTitle>위치</S.SettingItemTitle>
+        <S.SettingItem>
+          <S.SettingItemDescriptionContainer>
+            <S.SettingItemDescriptionTitle>
+              현재 위치
+            </S.SettingItemDescriptionTitle>
+            <S.SettingItemDescription>
+              현재 위치를 사용하여 가까운 가게를 추천해드려요
+            </S.SettingItemDescription>
+          </S.SettingItemDescriptionContainer>
+          <S.SwitchButton
+            value={isLocationOn}
+            onChange={handleLocationSwitch}
+          />
+        </S.SettingItem>
+      </S.SettingItemList>
+    </S.Container>
+  );
+};
+
+export default SettingScreen;

src/types/StackNavigationType.ts

@@ -41,8 +41,14 @@ export interface CartStackParamList extends ParamListBase {
   Cart: undefined;
 }
 
+export interface MyPageStackParamList extends ParamListBase {
+  MyPageRoot: undefined;
+  Setting: undefined;
+}
+
 export interface RootStackParamList extends ParamListBase {
   Home: StackParamType<HomeStackParamList>;
   Register: StackParamType<RegisterStackParamList>;
   Detail: StackParamType<DetailStackParamList>;
+  MyPage: StackParamType<MyPageStackParamList>;
 }

src/types/UserType.ts

@@ -1,6 +1,11 @@
+import {SessionType} from './Session';
+
 // TODO: Define UserType
 export type UserType = {
   id: number | string;
   name: string;
   image: string;
+  provider: SessionType['OAuthProvider'];
+  phoneNumber?: string;
+  email?: string;
 };

src/utils/common.ts

@@ -0,0 +1,14 @@
+import {SessionType} from '@/types/Session';
+
+export function convertOAuthProviderToKorean(
+  provider: SessionType['OAuthProvider'],
+) {
+  switch (provider) {
+    case 'KAKAO':
+      return '카카오';
+    case 'NAVER':
+      return '네이버';
+    default:
+      return '';
+  }
+}