merge: 닉네임 Storage저장 로직 추가 (#17)

merge: 닉네임 Storage저장 로직 추가 (#17)

Author: d0422

packages/react-native/ios/Podfile.lock

@@ -1233,6 +1233,8 @@ PODS:
     - React-logger (= 0.74.3)
     - React-perflogger (= 0.74.3)
     - React-utils (= 0.74.3)
+  - RNCAsyncStorage (1.24.0):
+    - React-Core
   - RNGestureHandler (2.17.1):
     - DoubleConversion
     - glog
@@ -1372,6 +1374,7 @@ DEPENDENCIES:
   - React-runtimescheduler (from `../../../node_modules/react-native/ReactCommon/react/renderer/runtimescheduler`)
   - React-utils (from `../../../node_modules/react-native/ReactCommon/react/utils`)
   - ReactCommon/turbomodule/core (from `../../../node_modules/react-native/ReactCommon`)
+  - "RNCAsyncStorage (from `../../../node_modules/@react-native-async-storage/async-storage`)"
   - RNGestureHandler (from `../../../node_modules/react-native-gesture-handler`)
   - RNPermissions (from `../../../node_modules/react-native-permissions`)
   - RNReanimated (from `../../../node_modules/react-native-reanimated`)
@@ -1504,6 +1507,8 @@ EXTERNAL SOURCES:
     :path: "../../../node_modules/react-native/ReactCommon/react/utils"
   ReactCommon:
     :path: "../../../node_modules/react-native/ReactCommon"
+  RNCAsyncStorage:
+    :path: "../../../node_modules/@react-native-async-storage/async-storage"
   RNGestureHandler:
     :path: "../../../node_modules/react-native-gesture-handler"
   RNPermissions:
@@ -1579,6 +1584,7 @@ SPEC CHECKSUMS:
   React-runtimescheduler: 0c80752bceb80924cb8a4babc2a8e3ed70d41e87
   React-utils: a06061b3887c702235d2dac92dacbd93e1ea079e
   ReactCommon: f00e436b3925a7ae44dfa294b43ef360fbd8ccc4
+  RNCAsyncStorage: ec53e44dc3e75b44aa2a9f37618a49c3bc080a7a
   RNGestureHandler: 8dbcccada4a7e702e7dec9338c251b1cf393c960
   RNPermissions: 4da8c626e4ac9d71c1a199d500d52dd54da62e38
   RNReanimated: 7e6fc1e80f412285a16ac3879b9e4672ffa91cef

packages/react-native/ios/SPOTClient/PrivacyInfo.xcprivacy

@@ -9,8 +9,8 @@
 			<string>NSPrivacyAccessedAPICategoryFileTimestamp</string>
 			<key>NSPrivacyAccessedAPITypeReasons</key>
 			<array>
-				<string>3B52.1</string>
 				<string>C617.1</string>
+				<string>3B52.1</string>
 			</array>
 		</dict>
 		<dict>

packages/react-native/package.json

@@ -17,6 +17,7 @@
   },
   "dependencies": {
     "@gorhom/bottom-sheet": "^4.6.4",
+    "@react-native-async-storage/async-storage": "^1.24.0",
     "@react-native-camera-roll/camera-roll": "^7.8.1",
     "@react-navigation/bottom-tabs": "^6.6.0",
     "@react-navigation/material-top-tabs": "^6.6.14",

packages/react-native/src/apis/queries/useNicknameQuery.ts

@@ -0,0 +1,34 @@
+import { useRef } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import { AppStorage } from '@/utils/storage';
+
+interface UseNicknameQueryReturn {
+  nickname: string;
+  isLoading: boolean;
+  isError: boolean;
+  refetch: () => void;
+}
+
+export default function useNicknameQuery() {
+  const ref = useRef({} as UseNicknameQueryReturn);
+
+  const { data, refetch, isLoading, isError } = useQuery({
+    queryKey: ['nickname'],
+    queryFn: async () => {
+      const savedNickname = await AppStorage.getData('nickname');
+      if (savedNickname) {
+        return savedNickname;
+      }
+
+      // TODO: 서버데이터 패칭 로직 추가 필요
+      return '';
+    },
+  });
+
+  ref.current.nickname = data;
+  ref.current.isError = isError;
+  ref.current.isLoading = isLoading;
+  ref.current.refetch = refetch;
+
+  return ref.current;
+}

packages/react-native/src/pages/Home.tsx

@@ -5,6 +5,7 @@ import SearchBar from '@components/common/SearchBar';
 import { SpotData } from '@/types/spot';
 import { HomeStackNavigation } from '@/types/navigation';
 import BackGroundGradient from '@/layouts/BackGroundGradient';
+import useNicknameQuery from '@/apis/queries/useNicknameQuery';
 
 const mockData: SpotData[] = [
   {
@@ -63,12 +64,14 @@ interface HomeScreenProps {
 }
 
 export default function Home({ navigation }: HomeScreenProps) {
+  const { nickname } = useNicknameQuery();
+
   return (
     <BackGroundGradient>
       <View className="flex flex-col gap-10 p-4">
         <View>
           <Font type="title1" color="white">
-            안녕하세요, 아무개님.{'\n'}오늘은 어디로 가 볼까요?
+            안녕하세요, {nickname}님{'\n'}오늘은 어디로 가 볼까요?
           </Font>
           {/* FIXME: 추후 삭제 */}
           <Button onPress={() => navigation.navigate('Camera')}>

packages/react-native/src/pages/Login/Login.tsx

@@ -3,12 +3,24 @@ import LinearGradient from 'react-native-linear-gradient';
 import SPOTLogo from '@assets/SPOTLogo';
 import { SocialLogin } from 'design-system';
 import { ScreenNavigationProp } from '@/types/navigation';
+import { AppStorage } from '@/utils/storage';
 
 interface LoginPageProps {
   navigation: ScreenNavigationProp<'Login'>;
 }
 
 export default function Login({ navigation }: LoginPageProps) {
+  const handleLogin = async () => {
+    // TODO: 토큰 검사로 변경되어야함
+    const nickname = await AppStorage.getData('nickname');
+
+    if (!nickname) {
+      return navigation.navigate('Signup');
+    }
+
+    return navigation.navigate('Main');
+  };
+
   return (
     <LinearGradient
       colors={['#FF1919', '#000000']}
@@ -19,10 +31,10 @@ export default function Login({ navigation }: LoginPageProps) {
         <SPOTLogo />
         <View className="flex flex-col w-full px-4 gap-4">
           <View>
-            <SocialLogin.Apple onPress={() => navigation.navigate('Signup')} />
+            <SocialLogin.Apple onPress={handleLogin} />
           </View>
           <View>
-            <SocialLogin.Kakao onPress={() => navigation.navigate('Signup')} />
+            <SocialLogin.Kakao onPress={handleLogin} />
           </View>
         </View>
       </SafeAreaView>

packages/react-native/src/pages/MyPage.tsx

@@ -6,12 +6,14 @@ import Badge from '@/components/mypage/Badge';
 import EditButton from '@/components/common/EditButton';
 import MyPageTabNavigator from '@/routes/MyPageTabNavigator';
 import { MyPageStackNavigation } from '@/types/navigation';
+import useNicknameQuery from '@/apis/queries/useNicknameQuery';
 
 interface MyPageProps {
   navigation: MyPageStackNavigation<'myPage/profile'>;
 }
 
 export default function MyPage({ navigation }: MyPageProps) {
+  const { nickname } = useNicknameQuery();
   return (
     <BackGroundGradient marginTop={40}>
       <View className="flex">
@@ -32,7 +34,7 @@ export default function MyPage({ navigation }: MyPageProps) {
             <View className="mt-2">
               {/* FIXME: 실제 닉네임 받아와서 설정 */}
               <Font type="mainTitle" color="white">
-                닉네임네임
+                {nickname}
               </Font>
             </View>
           </View>

packages/react-native/src/pages/Signup/Profile.tsx

@@ -6,6 +6,7 @@ import Overlay from '@/components/signup/common/Overlay';
 import { SignupRouteProps, SignupStackNavigation } from '@/types/navigation';
 import useProfileImage from '@/hooks/useProfileImage';
 import SignupHeader from '@/components/signup/common/Header';
+import { AppStorage } from '@/utils/storage';
 
 interface ProfileProps {
   navigation: SignupStackNavigation<'Signup/Profile'>;
@@ -16,9 +17,10 @@ export default function Profile({ navigation }: ProfileProps) {
   const route = useRoute<SignupRouteProps<'Signup/Profile'>>();
   const { nickname } = route.params;
 
-  const handleNext = () => {
+  const handleNext = async () => {
     if (!photoUri) return;
 
+    await AppStorage.saveData({ key: 'nickname', value: nickname });
     navigation.navigate('Main');
   };
 

packages/react-native/src/utils/storage.ts

@@ -0,0 +1,31 @@
+import AsyncStorage from '@react-native-async-storage/async-storage';
+
+// Storage에 안전하게 데이터를 저장하기 위한 타입입니다.
+// key에는 리터럴타입, value는 저장할 데이터 타입을 지정해주세요.
+interface NicknameStorage {
+  key: 'nickname';
+  value: string;
+}
+
+// 위에서 작성한 타입을 유니온 타입형태로 여기에 추가해주세요. key, value를 갖는 인터페이스여야합니다.
+type StorageData = NicknameStorage;
+
+const getData = async (key: StorageData['key']) => {
+  const stringData = await AsyncStorage.getItem(key);
+
+  if (stringData) {
+    return JSON.parse(stringData);
+  }
+
+  return null;
+};
+
+const saveData = async ({ key, value }: StorageData) => {
+  const stringifiedObject = JSON.stringify(value);
+  await AsyncStorage.setItem(key, stringifiedObject);
+};
+
+export const AppStorage = {
+  getData,
+  saveData,
+};

yarn.lock

@@ -2956,6 +2956,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@react-native-async-storage/async-storage@npm:^1.24.0":
+  version: 1.24.0
+  resolution: "@react-native-async-storage/async-storage@npm:1.24.0"
+  dependencies:
+    merge-options: ^3.0.4
+  peerDependencies:
+    react-native: ^0.0.0-0 || >=0.60 <1.0
+  checksum: 7e56a2e97f48332f57c56ebf473b763c7ca2b1ef82f4b5f8e1c73350231ec91b8eafc4e4d1f972c4c1005da0d304816fa725dc6f07a8a7543e90f8bd16c22ab4
+  languageName: node
+  linkType: hard
+
 "@react-native-camera-roll/camera-roll@npm:^7.8.1":
   version: 7.8.1
   resolution: "@react-native-camera-roll/camera-roll@npm:7.8.1"
@@ -11039,6 +11050,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"is-plain-obj@npm:^2.1.0":
+  version: 2.1.0
+  resolution: "is-plain-obj@npm:2.1.0"
+  checksum: cec9100678b0a9fe0248a81743041ed990c2d4c99f893d935545cfbc42876cbe86d207f3b895700c690ad2fa520e568c44afc1605044b535a7820c1d40e38daa
+  languageName: node
+  linkType: hard
+
 "is-plain-object@npm:5.0.0":
   version: 5.0.0
   resolution: "is-plain-object@npm:5.0.0"
@@ -12453,6 +12471,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"merge-options@npm:^3.0.4":
+  version: 3.0.4
+  resolution: "merge-options@npm:3.0.4"
+  dependencies:
+    is-plain-obj: ^2.1.0
+  checksum: d86ddb3dd6e85d558dbf25dc944f3527b6bacb944db3fdda6e84a3f59c4e4b85231095f58b835758b9a57708342dee0f8de0dffa352974a48221487fe9f4584f
+  languageName: node
+  linkType: hard
+
 "merge-stream@npm:^2.0.0":
   version: 2.0.0
   resolution: "merge-stream@npm:2.0.0"
@@ -14833,6 +14860,7 @@ __metadata:
     "@babel/runtime": ^7.20.0
     "@gorhom/bottom-sheet": ^4.6.4
     "@jest/globals": ^29.7.0
+    "@react-native-async-storage/async-storage": ^1.24.0
     "@react-native-camera-roll/camera-roll": ^7.8.1
     "@react-native-community/eslint-config": ^3.2.0
     "@react-native/babel-preset": 0.74.84