feat: implement the process of managing sing up data at store

#65
dm-plz · Oct 9, 2024 · 9976ed6 · 9976ed6
1 parent 486491a
commit 9976ed6
Show file tree

Hide file tree

Showing 6 changed files with 118 additions and 25 deletions.
diff --git a/src/screen/SignInScreen.tsx b/src/screen/SignInScreen.tsx
@@ -14,6 +14,7 @@ import { authRouteNames, colors } from '@/constants';
 import { TextMedium, TextSemiBold } from '@/entities/fonts';
 import { AuthStackParams } from '@/navigations/stack/AuthStackNavigator';
 import useNavigationStore from '@/store/stores/navigationStore';
+import useSignupStore from '@/store/stores/signupStore';
 import { AuthAgent } from '@/types';
 import { isIOS } from '@/utils/platform';
 
@@ -24,11 +25,13 @@ type SignInScreenProps = NativeStackScreenProps<
 
 function SignInScreen({ navigation }: SignInScreenProps) {
   const { navigate } = useNavigationStore();
+  const { setOAuthProvider } = useSignupStore();
 
   function handleSignIn(agent: AuthAgent) {
-    authorizeWithAgent(agent).then(() =>
-      navigate(navigation, authRouteNames.JOIN1),
-    );
+    authorizeWithAgent(agent).then(() => {
+      setOAuthProvider(agent);
+      navigate(navigation, authRouteNames.JOIN1);
+    });
   }
 
   return (

diff --git a/src/screen/sign-up/Join1Screen.tsx b/src/screen/sign-up/Join1Screen.tsx
@@ -1,5 +1,5 @@
 import { NativeStackScreenProps } from '@react-navigation/native-stack';
-import React from 'react';
+import React, { useState } from 'react';
 import { Image, Pressable, StyleSheet, View } from 'react-native';
 
 import { authRouteNames, colors } from '@/constants';
@@ -8,6 +8,7 @@ import { TextBold, TextRegular } from '@/entities/fonts';
 import SafeScreenWithHeader from '@/entities/safeScreen/SafeScreenWithHeader';
 import { AuthStackParams } from '@/navigations/stack/AuthStackNavigator';
 import useNavigationStore from '@/store/stores/navigationStore';
+import useSignupStore from '@/store/stores/signupStore';
 
 type Join1ScreenProps = NativeStackScreenProps<
   AuthStackParams,
@@ -16,6 +17,16 @@ type Join1ScreenProps = NativeStackScreenProps<
 
 function Join1Screen({ navigation }: Join1ScreenProps) {
   const { navigate, goBack } = useNavigationStore();
+  const { setInviteCode, inviteCode } = useSignupStore();
+
+  //TODO: inviteCode가 null이 아닌 경우 코드가 존재하는지 확인해야 함
+  function handleJoin1(inputCode: string | null) {
+    setInviteCode(inputCode);
+    navigate(navigation, authRouteNames.JOIN2);
+  }
+
+  const [code, setCode] = useState(inviteCode ?? '');
+  const isCompleteCode = code.length === 8;
 
   return (
     <SafeScreenWithHeader
@@ -51,16 +62,22 @@ function Join1Screen({ navigation }: Join1ScreenProps) {
             error={false}
             placeholder="초대 코드 8자리를 입력해 주세요"
             errorMessage="코드가 조회되지 않습니다. 다시 확인해 주세요."
+            value={code}
+            onChangeText={setCode}
+            maxLength={8}
           />
-          <Pressable className="mt-5 rounded-xl bg-gray-300 px-9 py-3">
+          <Pressable
+            className={`mt-5 rounded-xl px-9 py-3 ${isCompleteCode ? 'bg-primary-100' : 'bg-gray-300'}`}
+            disabled={!isCompleteCode}
+            onPress={() => handleJoin1(code)}>
             <TextBold className="text-center text-h4 text-white">
               입력 완료
             </TextBold>
           </Pressable>
         </View>
         <Pressable
           className="my-2 mb-2 mt-auto flex-row items-center justify-center rounded-xl bg-primary-100 px-9 py-[14]"
-          onPress={() => navigate(navigation, authRouteNames.JOIN2)}>
+          onPress={() => handleJoin1(null)}>
           <Image
             source={require('@/assets/img/icon-check-circle.png')}
             resizeMode="contain"

diff --git a/src/screen/sign-up/Join2Screen.tsx b/src/screen/sign-up/Join2Screen.tsx
@@ -1,5 +1,5 @@
 import { NativeStackScreenProps } from '@react-navigation/native-stack';
-import React from 'react';
+import React, { useState } from 'react';
 import { Image, Pressable, StyleSheet, View } from 'react-native';
 
 import { authRouteNames, colors } from '@/constants';
@@ -8,6 +8,7 @@ import { TextBold, TextRegular } from '@/entities/fonts';
 import SafeScreenWithHeader from '@/entities/safeScreen/SafeScreenWithHeader';
 import { AuthStackParams } from '@/navigations/stack/AuthStackNavigator';
 import useNavigationStore from '@/store/stores/navigationStore';
+import useSignupStore from '@/store/stores/signupStore';
 
 type Join2ScreenProps = NativeStackScreenProps<
   AuthStackParams,
@@ -16,6 +17,16 @@ type Join2ScreenProps = NativeStackScreenProps<
 
 function Join2Screen({ navigation }: Join2ScreenProps) {
   const { navigate, goBack } = useNavigationStore();
+  const { setNickName, nickName } = useSignupStore();
+
+  //TODO: 닉네임 중복 여부 확인 로직 들어가야 함
+  function handleJoin2(inputName: string) {
+    setNickName(inputName);
+    navigate(navigation, authRouteNames.JOIN3);
+  }
+
+  const [name, setName] = useState(nickName ?? '');
+
   return (
     <SafeScreenWithHeader
       safeAreaStyle={[styles.safeArea]}
@@ -50,11 +61,13 @@ function Join2Screen({ navigation }: Join2ScreenProps) {
             errorMessage="중복된 이름 또는 닉네임 입니다."
             success={false}
             successMessage="사용 가능한 이름 또는 닉네임 입니다."
+            value={name}
+            onChangeText={setName}
           />
         </View>
         <Pressable
           className="my-2 mt-auto flex-row items-center justify-center rounded-xl bg-primary-100 px-9 py-3"
-          onPress={() => navigate(navigation, authRouteNames.JOIN3)}>
+          onPress={() => handleJoin2(name)}>
           <TextBold className="text-h4 text-white">입력 완료</TextBold>
         </Pressable>
       </View>

diff --git a/src/screen/sign-up/Join3Screen.tsx b/src/screen/sign-up/Join3Screen.tsx
@@ -8,16 +8,26 @@ import RoleSelector from '@/entities/RoleSelector';
 import SafeScreenWithHeader from '@/entities/safeScreen/SafeScreenWithHeader';
 import { AuthStackParams } from '@/navigations/stack/AuthStackNavigator';
 import useNavigationStore from '@/store/stores/navigationStore';
+import useSignupStore from '@/store/stores/signupStore';
+import { FamilyRole } from '@/types';
 
 type Join3ScreenProps = NativeStackScreenProps<
   AuthStackParams,
   typeof authRouteNames.JOIN3
 >;
 
 function Join3Screen({ navigation }: Join3ScreenProps) {
-  const [selectedRole, setSelectedRole] = useState<string>('아빠');
-
   const { navigate, goBack } = useNavigationStore();
+  const { setFamilyRole, familyRole } = useSignupStore();
+
+  const [selectedRole, setSelectedRole] = useState<FamilyRole | undefined>(
+    familyRole,
+  );
+
+  function handleJoin3(inputRole: FamilyRole) {
+    setFamilyRole(inputRole);
+    navigate(navigation, authRouteNames.JOIN4);
+  }
 
   return (
     <SafeScreenWithHeader
@@ -49,8 +59,9 @@ function Join3Screen({ navigation }: Join3ScreenProps) {
           setSelectedRole={setSelectedRole}
         />
         <Pressable
-          className="mb-2 mt-auto flex-row items-center justify-center rounded-xl bg-primary-100 px-9 py-3"
-          onPress={() => navigate(navigation, authRouteNames.JOIN4)}>
+          className={`mb-2 mt-auto flex-row items-center justify-center rounded-xl px-9 py-3 ${selectedRole ? 'bg-primary-100' : 'bg-gray-300'}`}
+          disabled={!selectedRole}
+          onPress={() => selectedRole && handleJoin3(selectedRole)}>
           <TextBold className="text-h4 text-white">입력 완료</TextBold>
         </Pressable>
       </View>

diff --git a/src/screen/sign-up/Join4Screen.tsx b/src/screen/sign-up/Join4Screen.tsx
@@ -3,22 +3,30 @@ import React, { useState } from 'react';
 import { Image, Pressable, StyleSheet, View } from 'react-native';
 
 import { colors, authRouteNames } from '@/constants';
-import SelectableText from '@/entities/common/SelectableText';
-import CustomInput from '@/entities/CustomInput';
+import { DatePicker, SelectableText } from '@/entities/common';
 import { TextBold, TextRegular, TextSemiBold } from '@/entities/fonts';
 import SafeScreenWithHeader from '@/entities/safeScreen/SafeScreenWithHeader';
 import { AuthStackParams } from '@/navigations/stack/AuthStackNavigator';
 import useNavigationStore from '@/store/stores/navigationStore';
+import useSignupStore from '@/store/stores/signupStore';
 
 type Join2ScreenProps = NativeStackScreenProps<
   AuthStackParams,
   typeof authRouteNames.JOIN4
 >;
 
 function Join4Screen({ navigation }: Join2ScreenProps) {
+  const { navigate, goBack } = useNavigationStore();
+  const { setBirthday, birthday } = useSignupStore();
+
   const [isLuna, setIsLuna] = useState(false);
+  const [date, setDate] = useState<Date | undefined>(birthday);
 
-  const { navigate, goBack } = useNavigationStore();
+  //TODO: 알림을 위한 token 등록을 위한 과정이 누락 됨
+  function handleJoin4(inputDay: Date, inputBirthType: boolean) {
+    setBirthday(inputDay, inputBirthType ? 'SOLAR' : 'LUNA');
+    navigate(navigation, authRouteNames.JOIN5);
+  }
 
   return (
     <SafeScreenWithHeader
@@ -40,20 +48,15 @@ function Join4Screen({ navigation }: Join2ScreenProps) {
           <TextBold className="text-h1 leading-9">나의 정보를</TextBold>
           <TextBold className="text-h1 leading-9">입력해 주세요.</TextBold>
           <TextRegular className="mt-2 leading-4 text-gray-400">
-            생년월일 6자리를 입력해 주세요
+            생년월일을 입력해 주세요
           </TextRegular>
         </View>
         <View className="mt-10">
           <TextSemiBold className="text-body2 leading-4 text-gray-300">
-            생년월일 (6자리)
+            생년월일
           </TextSemiBold>
           <View className="flex-row items-start pt-3">
-            <CustomInput
-              className="flex-1"
-              error={false}
-              errorMessage="YYMMDD 형식에 맞춰 작성해주세요."
-              placeholder="YYMMDD"
-            />
+            <DatePicker date={date} onChange={setDate} />
             <SelectableText
               className="ml-3 pt-4"
               text="음력"
@@ -63,8 +66,8 @@ function Join4Screen({ navigation }: Join2ScreenProps) {
           </View>
         </View>
         <Pressable
-          className="my-2 mt-auto flex-row items-center justify-center rounded-xl bg-primary-100 px-9 py-3"
-          onPress={() => navigate(navigation, authRouteNames.JOIN5)}>
+          className={`my-2 mt-auto flex-row items-center justify-center rounded-xl px-9 py-3 ${date ? 'bg-primary-100' : 'bg-gray-300'}`}
+          onPress={() => date && handleJoin4(date, !isLuna)}>
           <TextBold className="text-h4 text-white">입력 완료</TextBold>
         </Pressable>
       </View>

diff --git a/src/store/stores/signupStore.ts b/src/store/stores/signupStore.ts
@@ -0,0 +1,46 @@
+import { create } from 'zustand';
+
+import { AlertToken, BirthType, FamilyRole, AuthAgent } from '@/types';
+
+type SignupState = Partial<{
+  oAuthProvider: AuthAgent;
+  nickName: string;
+  inviteCode: string | null;
+  birthday: Date;
+  birthType: BirthType;
+  familyRole: FamilyRole;
+  registerAlertToken: AlertToken;
+}>;
+type SignupActions = {
+  removeAllState: () => void;
+  setNickName: (nickName: string) => void;
+  setInviteCode: (inviteCode: string | null) => void;
+  setOAuthProvider: (oAuthProvider: AuthAgent) => void;
+  setBirthday: (birthday: Date, birthType: BirthType) => void;
+  setFamilyRole: (familyRole: FamilyRole) => void;
+  setRegisterAlertToken: (registerAlertToken: AlertToken) => void;
+};
+type Signup = SignupState & SignupActions;
+
+const initSignupState = {
+  oAuthProvider: undefined,
+  nickName: undefined,
+  inviteCode: undefined,
+  birthday: undefined,
+  birthType: undefined,
+  familyRole: undefined,
+  registerAlertToken: undefined,
+};
+
+const useSignupStore = create<Signup>(set => ({
+  ...initSignupState,
+  removeAllState: () => set(initSignupState),
+  setOAuthProvider: oAuthProvider => set({ oAuthProvider }),
+  setInviteCode: inviteCode => set({ inviteCode }),
+  setNickName: nickName => set({ nickName }),
+  setFamilyRole: familyRole => set({ familyRole }),
+  setBirthday: (birthday, birthType) => set({ birthday, birthType }),
+  setRegisterAlertToken: registerAlertToken => set({ registerAlertToken }),
+}));
+
+export default useSignupStore;