Merge pull request #147 from daisythepotato/feat/144/MyPage-SplitUI-b…

…yRole

#144 feat : mypage split UI by role

package.json

@@ -37,7 +37,7 @@
     "react-dom": "^18.2.0",
     "react-native": "0.73.2",
     "react-native-bouncy-checkbox": "^3.0.7",
-    "react-native-collapsible-tab-view": "^6.2.1",
+    "react-native-collapsible-tab-view": "^6.2.2",
     "react-native-date-picker": "^5.0.0",
     "react-native-document-picker": "^9.3.0",
     "react-native-dotenv": "^3.4.9",

src/common/Context.tsx

@@ -82,17 +82,27 @@ export const LoginContext = createContext({
 
 export const LoginProvider = ({ children }: { children: ReactNode }) => {
   const [isLogin, setIsLogin] = useState<boolean>(false);
+  const { setUser, setRole } = useUser();
+
+  const logout = () => {
+      setUser(null);
+      setRole('');
+      setIsLogin(false);
+  };
+
   const setLogin = (value: boolean) => {
     setIsLogin(value);
+    if (!value) logout();
   };
+
   const checkLogin = async () => {
     // const token = await getAccessToken();
     // if (token) {
     //   setIsLogin(true);
     // } else {
     //   setIsLogin(false)
-    // } 
-    setIsLogin(false) // 위의 코드가 실제 코드입니다. 지금 이건 디버깅용입니다. 
+    // }
+    setIsLogin(false) // 위의 코드가 실제 코드입니다. 지금 이건 디버깅용입니다.
     // (위의 코드는 앱을 리빌드 해도 액세스토큰이 남아있어서 회원가입 플로우 수정이 불가함)
   };
   useEffect(() => {
@@ -104,4 +114,4 @@ export const LoginProvider = ({ children }: { children: ReactNode }) => {
       {children}
     </LoginContext.Provider>
   );
-};
+};

src/components/Auth/Reformer/Reformer.tsx

@@ -1,45 +1,11 @@
-import { Dispatch, SetStateAction, createContext, useEffect, useState } from 'react';
-import { Text, View } from 'react-native';
-import { FormProps } from '../SignIn';
-import ReformFormHeader from './ReformFormHeader';
-import ReformFormProfile from './ReformFormProfile';
-import {
-  FieldType,
-  EducType,
-  MaterialType,
-  RegionType,
-  StyleType,
-  CareerType,
-  AwardsType,
-  CertifiType,
-  FreeType
-} from '../../../types/UserTypes';
-import ReformFormStyle from './ReformFormStyle';
-import ReformCareer from './ReformFormCareer';
+import { Dispatch, SetStateAction, useState } from 'react';
+import { Text, View, TouchableOpacity, StyleSheet } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
 import { BottomSheetModalProvider } from '@gorhom/bottom-sheet';
+import ReformFormProfile from './ReformFormProfile';
+import BackArrow from '../../../assets/common/Arrow.svg'; // Import the back arrow icon
 import { PhotoType } from '../../../hooks/useImagePicker';
-import DetailScreenHeader from '../../Home/components/DetailScreenHeader';
-import { SafeAreaView } from 'react-native-safe-area-context';
-
-// type page = 'profile' | 'style' | 'field';
-
-export interface ReformProps {
-  form: ReformProfileType;
-  setForm: Dispatch<SetStateAction<ReformProfileType>>;
-}
-
-export interface ModalProps extends ReformProps {
-  open: boolean;
-  setOpen: Dispatch<SetStateAction<boolean>>;
-}
-
-interface BasicFormProp {
-  email: string;
-  mailDomain: string;
-  password: string;
-  region: string;
-  marketing: boolean;
-}
+import { RegionType, EducType, CareerType, AwardsType, CertifiType, FreeType, FieldType } from '../../../types/UserTypes';
 
 export type ReformProfileType = {
   picture?: undefined | PhotoType;
@@ -55,14 +21,7 @@ export type ReformProfileType = {
   field: FieldType;
 };
 
-export type RpContextType = {
-  value: ReformProfileType;
-  steps: number;
-  setValue: Dispatch<SetStateAction<ReformProfileType>>;
-  setSteps: Dispatch<SetStateAction<number>>;
-};
-
-export default function Reformer(navigation: any, route: any) {
+export default function Reformer({ navigation }) {
   const defaultProfile: ReformProfileType = {
     picture: undefined,
     nickname: '',
@@ -76,29 +35,53 @@ export default function Reformer(navigation: any, route: any) {
     freelancer: [],
     field: [],
   };
-  const [profileForm, setProfileForm] = useState(defaultProfile);
 
-  const handleSubmit = () => {
-    navigation.navigate('ReformSubmit');
-  };
+  const [profileForm, setProfileForm] = useState(defaultProfile);
 
   return (
     <SafeAreaView style={{ flex: 1, flexDirection: "column" }}>
       <BottomSheetModalProvider>
-        <DetailScreenHeader
-          title=''
-          leftButton='LeftArrow'
-          rightButton='None'
-          onPressLeft={() => { navigation.getParent()?.navigate('Home') }}
-          onPressRight={() => { }} />
+        {/* Custom Header */}
+        <View style={styles.header}>
+          <TouchableOpacity onPress={() => navigation.goBack()} style={styles.backButton}>
+            <BackArrow width={24} height={24} color="#222" />
+          </TouchableOpacity>
+          <Text style={styles.headerTitle}>프로필 등록</Text>
+        </View>
+
         <View style={{ flex: 1 }}>
           <ReformFormProfile
             form={profileForm}
             setForm={setProfileForm}
           />
-
         </View>
       </BottomSheetModalProvider>
     </SafeAreaView>
   );
 }
+
+const styles = StyleSheet.create({
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    height: 56,
+    paddingHorizontal: 16,
+    justifyContent: 'center',
+  },
+  backButton: {
+    position: 'absolute',
+    left: 5, // Position the back arrow 16px from the left
+    justifyContent: 'center',
+    alignItems: 'center',
+    margin: 16,
+  },
+  headerTitle: {
+    fontSize: 20,
+    fontStyle: 'normal',
+    fontFamily: "Pretendard Variable",
+    fontWeight: '700', // Make the title bold
+    color: '#222',
+    textAlign: 'center',
+    lineHeight: 24,
+  },
+});