merge: mypage mock api연결 (#32)

HBSPS · web-flow · commit 4536ff57c8c2 · 2024-09-07T13:54:06.000+09:00
diff --git a/packages/react-native/src/apis/mutations/useRecordRepresentativeMutation.ts b/packages/react-native/src/apis/mutations/useRecordRepresentativeMutation.ts
@@ -13,9 +13,11 @@ export default function useRecordRepresentativeMutation() {
   const queryClient = useQueryClient();
   return useMutation({
     mutationFn: async ({ region, imageUri }: MutationRequestParams) => {
+      const prevImages = await AppStorage.getData('representImage');
       await AppStorage.saveData({
         key: 'representImage',
         value: {
+          ...prevImages,
           [region]: imageUri,
         },
       });
diff --git a/packages/react-native/src/apis/queries/quiz/useQuizzesQuery.ts b/packages/react-native/src/apis/queries/quiz/useQuizzesQuery.ts
@@ -40,7 +40,7 @@ export default function useQuizzesQuery({ location }: UseQuizzesQueryParams) {
   return useSuspenseQuery({
     queryKey: ['Quizzes', location],
     queryFn: async () => {
-      if (!location) {
+      if (!location?.latitude || !location.longitude) {
         return null;
       }
 
diff --git a/packages/react-native/src/apis/queries/useDetailQuery.ts b/packages/react-native/src/apis/queries/useDetailQuery.ts
@@ -8,8 +8,7 @@ const mockData: SpotAroundData = {
   title: '관광지 정보',
   content:
     'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
-  backgroundImage:
-    'https://i.namu.wiki/i/rPbIK73UvaZkqrOVZ2XUs2bqFr8krBAeJRDZIu9dy_2lNEVv2A8ukPsMT2WCQg0mcAIKmVqw7YhdXMek2BUPLUu7pBrT9RRwvnfMRzwLxUL3k7Amfo44GQWagFtAIRfbVPWuGDAHTBDOWN5asD7o7A.webp',
+  backgroundImage: 'https://cdn.hankyung.com/photo/202208/03.30909476.1.jpg',
   address: '강원 강릉시 주문진읍 해안로 1609',
 };
 
diff --git a/packages/react-native/src/apis/queries/useNicknameQuery.ts b/packages/react-native/src/apis/queries/useNicknameQuery.ts
@@ -3,7 +3,13 @@ import { useQuery } from '@tanstack/react-query';
 import { AppStorage } from '@/utils/storage';
 
 interface UseNicknameQueryReturn {
-  nickname: string;
+  nickname?: {
+    value: string;
+    colorSet?: {
+      color: string;
+      bgColor: string;
+    };
+  };
   isLoading: boolean;
   isError: boolean;
   refetch: () => void;
@@ -21,7 +27,9 @@ export default function useNicknameQuery() {
       }
 
       // TODO: 서버데이터 패칭 로직 추가 필요
-      return '';
+      return {
+        value: '',
+      };
     },
   });
 
diff --git a/packages/react-native/src/pages/Detail/DetailSpot.tsx b/packages/react-native/src/pages/Detail/DetailSpot.tsx
@@ -6,26 +6,22 @@ const mockData = [
   {
     id: 1,
     title: '관광지 정보1',
-    backgroundImage:
-      'https://i.namu.wiki/i/rPbIK73UvaZkqrOVZ2XUs2bqFr8krBAeJRDZIu9dy_2lNEVv2A8ukPsMT2WCQg0mcAIKmVqw7YhdXMek2BUPLUu7pBrT9RRwvnfMRzwLxUL3k7Amfo44GQWagFtAIRfbVPWuGDAHTBDOWN5asD7o7A.webp',
+    backgroundImage: 'https://cdn.hankyung.com/photo/202208/03.30909476.1.jpg',
   },
   {
     id: 2,
     title: '관광지 정보2',
-    backgroundImage:
-      'https://i.namu.wiki/i/rPbIK73UvaZkqrOVZ2XUs2bqFr8krBAeJRDZIu9dy_2lNEVv2A8ukPsMT2WCQg0mcAIKmVqw7YhdXMek2BUPLUu7pBrT9RRwvnfMRzwLxUL3k7Amfo44GQWagFtAIRfbVPWuGDAHTBDOWN5asD7o7A.webp',
+    backgroundImage: 'https://cdn.hankyung.com/photo/202208/03.30909476.1.jpg',
   },
   {
     id: 3,
     title: '관광지 정보3',
-    backgroundImage:
-      'https://i.namu.wiki/i/rPbIK73UvaZkqrOVZ2XUs2bqFr8krBAeJRDZIu9dy_2lNEVv2A8ukPsMT2WCQg0mcAIKmVqw7YhdXMek2BUPLUu7pBrT9RRwvnfMRzwLxUL3k7Amfo44GQWagFtAIRfbVPWuGDAHTBDOWN5asD7o7A.webp',
+    backgroundImage: 'https://cdn.hankyung.com/photo/202208/03.30909476.1.jpg',
   },
   {
     id: 4,
     title: '관광지 정보4',
-    backgroundImage:
-      'https://i.namu.wiki/i/rPbIK73UvaZkqrOVZ2XUs2bqFr8krBAeJRDZIu9dy_2lNEVv2A8ukPsMT2WCQg0mcAIKmVqw7YhdXMek2BUPLUu7pBrT9RRwvnfMRzwLxUL3k7Amfo44GQWagFtAIRfbVPWuGDAHTBDOWN5asD7o7A.webp',
+    backgroundImage: 'https://cdn.hankyung.com/photo/202208/03.30909476.1.jpg',
   },
 ];
 
diff --git a/packages/react-native/src/pages/Gamification/Gamification.tsx b/packages/react-native/src/pages/Gamification/Gamification.tsx
@@ -18,7 +18,7 @@ export default withSuspense(
           longitude: res?.coords.longitude,
         });
       });
-    });
+    }, []);
 
     if (!data) {
       return <QuizLoading />;
diff --git a/packages/react-native/src/pages/Gamification/Quiz.tsx b/packages/react-native/src/pages/Gamification/Quiz.tsx
@@ -32,9 +32,8 @@ export default withSuspense(function Quiz() {
         </View>
         <View className="flex flex-col justify-start gap-2.5 ">
           {data.choices.map((content) => (
-            <View>
+            <View key={content}>
               <QuizSelection
-                key={content}
                 onPress={() => setSelectedContent(content)}
                 isSelected={selectedContent === content}
                 content={content}
diff --git a/packages/react-native/src/pages/Home.tsx b/packages/react-native/src/pages/Home.tsx
@@ -26,8 +26,7 @@ const mockData: SpotData[] = [
     ],
     isLiked: false,
     likeCount: 20,
-    backgroundImage:
-      'https://i.namu.wiki/i/rPbIK73UvaZkqrOVZ2XUs2bqFr8krBAeJRDZIu9dy_2lNEVv2A8ukPsMT2WCQg0mcAIKmVqw7YhdXMek2BUPLUu7pBrT9RRwvnfMRzwLxUL3k7Amfo44GQWagFtAIRfbVPWuGDAHTBDOWN5asD7o7A.webp',
+    backgroundImage: 'https://cdn.hankyung.com/photo/202208/03.30909476.1.jpg',
   },
   {
     spotId: 2,
@@ -36,8 +35,7 @@ const mockData: SpotData[] = [
     tags: ['바다', '도깨비'],
     isLiked: false,
     likeCount: 20,
-    backgroundImage:
-      'https://i.namu.wiki/i/rPbIK73UvaZkqrOVZ2XUs2bqFr8krBAeJRDZIu9dy_2lNEVv2A8ukPsMT2WCQg0mcAIKmVqw7YhdXMek2BUPLUu7pBrT9RRwvnfMRzwLxUL3k7Amfo44GQWagFtAIRfbVPWuGDAHTBDOWN5asD7o7A.webp',
+    backgroundImage: 'https://cdn.hankyung.com/photo/202208/03.30909476.1.jpg',
   },
   {
     spotId: 3,
@@ -46,8 +44,7 @@ const mockData: SpotData[] = [
     tags: ['바다', '도깨비'],
     isLiked: false,
     likeCount: 20,
-    backgroundImage:
-      'https://i.namu.wiki/i/rPbIK73UvaZkqrOVZ2XUs2bqFr8krBAeJRDZIu9dy_2lNEVv2A8ukPsMT2WCQg0mcAIKmVqw7YhdXMek2BUPLUu7pBrT9RRwvnfMRzwLxUL3k7Amfo44GQWagFtAIRfbVPWuGDAHTBDOWN5asD7o7A.webp',
+    backgroundImage: 'https://cdn.hankyung.com/photo/202208/03.30909476.1.jpg',
   },
   {
     spotId: 4,
@@ -56,8 +53,7 @@ const mockData: SpotData[] = [
     tags: ['바다', '도깨비'],
     isLiked: false,
     likeCount: 20,
-    backgroundImage:
-      'https://i.namu.wiki/i/rPbIK73UvaZkqrOVZ2XUs2bqFr8krBAeJRDZIu9dy_2lNEVv2A8ukPsMT2WCQg0mcAIKmVqw7YhdXMek2BUPLUu7pBrT9RRwvnfMRzwLxUL3k7Amfo44GQWagFtAIRfbVPWuGDAHTBDOWN5asD7o7A.webp',
+    backgroundImage: 'https://cdn.hankyung.com/photo/202208/03.30909476.1.jpg',
   },
 ];
 
@@ -74,7 +70,7 @@ export default function Home({ navigation }: HomeScreenProps) {
       <View className="flex flex-col gap-10 p-4">
         <View>
           <Font type="title1" color="white">
-            안녕하세요, {nickname}님{'\n'}오늘은 어디로 가 볼까요?
+            안녕하세요, {nickname?.value}님{'\n'}오늘은 어디로 가 볼까요?
           </Font>
           {/* FIXME: 추후 삭제 */}
           <Button onPress={() => navigation.navigate('Camera')}>
diff --git a/packages/react-native/src/pages/MyPage.tsx b/packages/react-native/src/pages/MyPage.tsx
@@ -1,4 +1,4 @@
-import { TouchableOpacity, View } from 'react-native';
+import { Text, TouchableOpacity, View } from 'react-native';
 import { Font } from 'design-system';
 import BackGroundGradient from '@/layouts/BackGroundGradient';
 import SelectProfile from '@/assets/SelectProfile';
@@ -22,7 +22,25 @@ export default function MyPage({ navigation }: MyPageProps) {
         <View className="flex items-center gap-7">
           {/* FIXME: 실제 이미지 받아와서 설정 */}
           <View className="relative">
-            <SelectProfile />
+            {nickname?.colorSet ? (
+              <View
+                className="w-[140px] h-[140px] rounded-full justify-center items-center"
+                style={{
+                  backgroundColor: nickname.colorSet.bgColor,
+                }}
+              >
+                <Text
+                  className="font-Pretendard-Medium text-[40px]"
+                  style={{
+                    color: nickname.colorSet.color,
+                  }}
+                >
+                  {nickname.value}
+                </Text>
+              </View>
+            ) : (
+              <SelectProfile />
+            )}
             <View className="absolute right-0 bottom-0">
               <EditButton
                 onPress={() => navigation.navigate('MyPage/EditProfile')}
@@ -36,7 +54,7 @@ export default function MyPage({ navigation }: MyPageProps) {
             <View className="mt-2">
               {/* FIXME: 실제 닉네임 받아와서 설정 */}
               <Font type="mainTitle" color="white">
-                {nickname}
+                {nickname?.value}
               </Font>
             </View>
           </View>
diff --git a/packages/react-native/src/pages/MyPage/MySpot.tsx b/packages/react-native/src/pages/MyPage/MySpot.tsx
@@ -6,48 +6,42 @@ const mockData = [
   {
     id: 1,
     title: '여행',
-    backgroundImage:
-      'https://i.namu.wiki/i/rPbIK73UvaZkqrOVZ2XUs2bqFr8krBAeJRDZIu9dy_2lNEVv2A8ukPsMT2WCQg0mcAIKmVqw7YhdXMek2BUPLUu7pBrT9RRwvnfMRzwLxUL3k7Amfo44GQWagFtAIRfbVPWuGDAHTBDOWN5asD7o7A.webp',
+    backgroundImage: 'https://cdn.hankyung.com/photo/202208/03.30909476.1.jpg',
     location: '주문진 방파제',
     date: '2024.01.01',
   },
   {
     id: 2,
     title: '여행',
-    backgroundImage:
-      'https://i.namu.wiki/i/rPbIK73UvaZkqrOVZ2XUs2bqFr8krBAeJRDZIu9dy_2lNEVv2A8ukPsMT2WCQg0mcAIKmVqw7YhdXMek2BUPLUu7pBrT9RRwvnfMRzwLxUL3k7Amfo44GQWagFtAIRfbVPWuGDAHTBDOWN5asD7o7A.webp',
+    backgroundImage: 'https://cdn.hankyung.com/photo/202208/03.30909476.1.jpg',
     location: '주문진 방파제',
     date: '2024.01.02',
   },
   {
     id: 3,
     title: '여행',
-    backgroundImage:
-      'https://i.namu.wiki/i/rPbIK73UvaZkqrOVZ2XUs2bqFr8krBAeJRDZIu9dy_2lNEVv2A8ukPsMT2WCQg0mcAIKmVqw7YhdXMek2BUPLUu7pBrT9RRwvnfMRzwLxUL3k7Amfo44GQWagFtAIRfbVPWuGDAHTBDOWN5asD7o7A.webp',
+    backgroundImage: 'https://cdn.hankyung.com/photo/202208/03.30909476.1.jpg',
     location: '주문진 방파제',
     date: '2024.01.03',
   },
   {
     id: 4,
     title: '여행',
-    backgroundImage:
-      'https://i.namu.wiki/i/rPbIK73UvaZkqrOVZ2XUs2bqFr8krBAeJRDZIu9dy_2lNEVv2A8ukPsMT2WCQg0mcAIKmVqw7YhdXMek2BUPLUu7pBrT9RRwvnfMRzwLxUL3k7Amfo44GQWagFtAIRfbVPWuGDAHTBDOWN5asD7o7A.webp',
+    backgroundImage: 'https://cdn.hankyung.com/photo/202208/03.30909476.1.jpg',
     location: '주문진 방파제',
     date: '2024.01.04',
   },
   {
     id: 5,
     title: '여행',
-    backgroundImage:
-      'https://i.namu.wiki/i/rPbIK73UvaZkqrOVZ2XUs2bqFr8krBAeJRDZIu9dy_2lNEVv2A8ukPsMT2WCQg0mcAIKmVqw7YhdXMek2BUPLUu7pBrT9RRwvnfMRzwLxUL3k7Amfo44GQWagFtAIRfbVPWuGDAHTBDOWN5asD7o7A.webp',
+    backgroundImage: 'https://cdn.hankyung.com/photo/202208/03.30909476.1.jpg',
     location: '주문진 방파제',
     date: '2024.01.05',
   },
   {
     id: 6,
     title: '여행',
-    backgroundImage:
-      'https://i.namu.wiki/i/rPbIK73UvaZkqrOVZ2XUs2bqFr8krBAeJRDZIu9dy_2lNEVv2A8ukPsMT2WCQg0mcAIKmVqw7YhdXMek2BUPLUu7pBrT9RRwvnfMRzwLxUL3k7Amfo44GQWagFtAIRfbVPWuGDAHTBDOWN5asD7o7A.webp',
+    backgroundImage: 'https://cdn.hankyung.com/photo/202208/03.30909476.1.jpg',
     location: '주문진 방파제',
     date: '2024.01.06',
   },
diff --git a/packages/react-native/src/pages/Signup/NicknameProfile.tsx b/packages/react-native/src/pages/Signup/NicknameProfile.tsx
@@ -25,7 +25,16 @@ export default function NicknameProfile({ navigation }: NicknameProfileProps) {
   } = useColorPalette();
 
   const handleNext = async () => {
-    await AppStorage.saveData({ key: 'nickname', value: nickname });
+    await AppStorage.saveData({
+      key: 'nickname',
+      value: {
+        value: nickname,
+        colorSet: {
+          color: textColor,
+          bgColor: selectedColor,
+        },
+      },
+    });
 
     navigation.reset({ routes: [{ name: 'Main' }] });
   };
diff --git a/packages/react-native/src/pages/Signup/Profile.tsx b/packages/react-native/src/pages/Signup/Profile.tsx
@@ -20,7 +20,12 @@ export default function Profile({ navigation }: ProfileProps) {
   const handleNext = async () => {
     if (!photoUri) return;
 
-    await AppStorage.saveData({ key: 'nickname', value: nickname });
+    await AppStorage.saveData({
+      key: 'nickname',
+      value: {
+        value: nickname,
+      },
+    });
     navigation.reset({ routes: [{ name: 'Main' }] });
   };
 
diff --git a/packages/react-native/src/utils/storage.ts b/packages/react-native/src/utils/storage.ts
@@ -1,32 +1,40 @@
 import AsyncStorage from '@react-native-async-storage/async-storage';
 import { RegionRepresentImage } from '@/apis/queries/records/useRecordRepresentativeQuery';
 
-// Storage에 안전하게 데이터를 저장하기 위한 타입입니다.
-// key에는 리터럴타입, value는 저장할 데이터 타입을 지정해주세요.
-interface NicknameStorage {
-  key: 'nickname';
+// Stoarge에 저장할 value 타입, 인터페이스를 작성해주세요.
+export interface NicknameStorageValue {
   value: string;
+  colorSet?: {
+    color: string;
+    bgColor: string;
+  };
 }
 
-interface RegionRepresentImageStorage {
-  key: 'representImage';
-  value: RegionRepresentImage;
-}
+type RegionRepresentImageStorageValue = RegionRepresentImage;
+
+// Storage에 안전하게 데이터를 저장하기 위한 타입입니다.
+// 위에서 작성한 타입을 key(고유한 key), value를 형태로 작성해주세요.
+type StorageData = {
+  nickname: NicknameStorageValue;
+  representImage: RegionRepresentImageStorageValue;
+};
 
-// 위에서 작성한 타입을 유니온 타입형태로 여기에 추가해주세요. key, value를 갖는 인터페이스여야합니다.
-type StorageData = NicknameStorage | RegionRepresentImageStorage;
+interface SaveDataParams {
+  key: keyof StorageData;
+  value: StorageData[keyof StorageData];
+}
 
-const getData = async (key: StorageData['key']) => {
+const getData = async <K extends keyof StorageData>(key: K) => {
   const stringData = await AsyncStorage.getItem(key);
 
   if (stringData) {
-    return JSON.parse(stringData);
+    return JSON.parse(stringData) as StorageData[K];
   }
 
   return null;
 };
 
-const saveData = async ({ key, value }: StorageData) => {
+const saveData = async ({ key, value }: SaveDataParams) => {
   const stringifiedObject = JSON.stringify(value);
   await AsyncStorage.setItem(key, stringifiedObject);
 };

Original file line number	Diff line number	Diff line change
`@@ -40,7 +40,7 @@ export default function useQuizzesQuery({ location }: UseQuizzesQueryParams) {`
`40`	`40`	`return useSuspenseQuery({`
`41`	`41`	`queryKey: ['Quizzes', location],`
`42`	`42`	`queryFn: async () => {`
`43`		`- if (!location) {`
	`43`	`+ if (!location?.latitude \|\| !location.longitude) {`
`44`	`44`	`return null;`
`45`	`45`	`}`
`46`	`46`