Merge pull request #44 from mooco-renew/feat/#43

[#43] Profile & Setting Page Layout & Function
mooco-renew · Apr 6, 2024 · 0cfc17a · 0cfc17a
2 parents c388041 + cd38917
commit 0cfc17a
Show file tree

Hide file tree

Showing 25 changed files with 1,611 additions and 74 deletions.
diff --git a/App.js b/App.js
@@ -2,10 +2,12 @@ import React, { useEffect } from "react";
 import { NavigationContainer } from "@react-navigation/native";
 import { createNativeStackNavigator } from "@react-navigation/native-stack";
 import { navigationRef } from "./src/services/navigation/NavigationService"; // 전역 네비 관리
+import { BarcodeProvider } from "./src/context/BarcodeContext";
 
 /* 네비게이션 스타일 */
 import { backbtncolorbar } from "./src/components/navigation/bar/BackBtnColorBar";
 import { nonebackbtncolorbar } from "./src/components/navigation/bar/NoneBackButton";
+import { trashBtnBar } from "./src/components/navigation/bar/TrashBtnBar";
 
 /* screens */
 import Daily from "./src/screens/daily/Daily";
@@ -25,6 +27,9 @@ import FindPw from "./src/screens/auth/findPw";
 import FindId from "./src/screens/auth/findId";
 import EventPage from "./src/screens/eventpage/FirstEventpage";
 import GroupCreate from "./src/screens/eventpage/GroupCreate";
+import Profile from "./src/screens/profile/Profile";
+import Setting from "./src/screens/profile/Setting";
+import DailyBarcodeDetail from "./src/screens/profile/DailyBarcodeDetail";
 import { useFonts } from "expo-font";
 // rn navigatior로 stack 생성, rn은 stack으로 사용자의 이동을 확인한다.
 const Stack = createNativeStackNavigator();
@@ -43,77 +48,95 @@ function App() {
   return (
     <NavigationContainer ref={navigationRef}>
       <NativeBaseProvider>
-        <Stack.Navigator>
-          <Stack.Screen
-            name="OnBoarding"
-            component={OnBoarding}
-            options={{ headerShown: false }}
-          />
-           <Stack.Screen
-            name="Account"
-            component={Account}
-            options={{ ...backbtncolorbar, title: "회원가입" }}
-          />
-           <Stack.Screen
-            name="Login"
-            component={Login}
-            options={{ ...backbtncolorbar, title: "로그인" }}
-          />
-          <Stack.Screen
-            name="FindPw"
-            component={FindPw}
-            options={{ ...backbtncolorbar, title: "비밀번호 찾기" }}
-          />
-          <Stack.Screen
-            name="FindId"
-            component={FindId}
-            options={{ ...backbtncolorbar, title: "아이디 찾기" }}
-          />
-          <Stack.Screen
-            name="GetProfile"
-            component={GetProfile}
-            options={{ ...backbtncolorbar, title: "프로필 등록" }}
-          />
-          <Stack.Screen name="KakaoLogin" component={KakaoLoginScreen} />
-          <Stack.Screen
-            name="FriendsList"
-            component={FriendsList}
-            options={{ ...backbtncolorbar, title: "친구 목록" }}
-          />
-          <Stack.Screen
-            name="RequestFriends"
-            component={RequestFriends}
-            options={{ ...backbtncolorbar, title: "친구 요청" }}
-          />
-          <Stack.Screen
-            name="Home"
-            component={HomeTab}
-            options={({ navigation }) => AppBar({ navigation })}
-          />
-          <Stack.Screen name="Daily" component={Daily} />
-          <Stack.Screen
-            name="DailyPost"
-            component={DailyPost}
-            options={{ headerShown: false }}
-          />
-          <Stack.Screen
-            name="DailyUpload"
-            component={DailyUpload}
-            options={{ headerShown: false }}
-          />
+        <BarcodeProvider>
+          <Stack.Navigator>
+            <Stack.Screen
+              name="OnBoarding"
+              component={OnBoarding}
+              options={{ headerShown: false }}
+            />
+            <Stack.Screen
+              name="Account"
+              component={Account}
+              options={{ ...backbtncolorbar, title: "회원가입" }}
+            />
+            <Stack.Screen
+              name="Login"
+              component={Login}
+              options={{ ...backbtncolorbar, title: "로그인" }}
+            />
+            <Stack.Screen
+              name="FindPw"
+              component={FindPw}
+              options={{ ...backbtncolorbar, title: "비밀번호 찾기" }}
+            />
+            <Stack.Screen
+              name="FindId"
+              component={FindId}
+              options={{ ...backbtncolorbar, title: "아이디 찾기" }}
+            />
+            <Stack.Screen
+              name="GetProfile"
+              component={GetProfile}
+              options={{ ...backbtncolorbar, title: "프로필 등록" }}
+            />
+            <Stack.Screen name="KakaoLogin" component={KakaoLoginScreen} />
+            <Stack.Screen
+              name="FriendsList"
+              component={FriendsList}
+              options={{ ...backbtncolorbar, title: "친구 목록" }}
+            />
+            <Stack.Screen
+              name="RequestFriends"
+              component={RequestFriends}
+              options={{ ...backbtncolorbar, title: "친구 요청" }}
+            />
+            <Stack.Screen
+              name="Home"
+              component={HomeTab}
+              options={({ navigation }) => AppBar({ navigation })}
+            />
+            <Stack.Screen name="Daily" component={Daily} />
+            <Stack.Screen
+              name="DailyPost"
+              component={DailyPost}
+              options={{ headerShown: false }}
+            />
+            <Stack.Screen
+              name="DailyUpload"
+              component={DailyUpload}
+              options={{ headerShown: false }}
+            />
 
-          <Stack.Screen
-            name="EventPage"
-            component={EventPage}
-            options={{ ...backbtncolorbar, title: "EventPage" }}
-          />
+            <Stack.Screen
+              name="EventPage"
+              component={EventPage}
+              options={{ ...backbtncolorbar, title: "EventPage" }}
+            />
 
-          <Stack.Screen
-            name="GroupCreatePage"
-            component={GroupCreate}
-            options={{ ...backbtncolorbar, title: "새 그룹 생성" }}
-          />
-        </Stack.Navigator>
+            <Stack.Screen
+              name="GroupCreatePage"
+              component={GroupCreate}
+              options={{ ...backbtncolorbar, title: "새 그룹 생성" }}
+            />
+
+            <Stack.Screen
+              name="Profile"
+              component={Profile}
+              options={{ ...backbtncolorbar, title: "프로필" }}
+            />
+            <Stack.Screen
+              name="Setting"
+              component={Setting}
+              options={{ ...backbtncolorbar, title: "설정" }}
+            />
+            <Stack.Screen
+              name="DailyBarcodeDetail"
+              component={DailyBarcodeDetail}
+              options={{ ...trashBtnBar, title: "바코드 내역" }}
+            />
+          </Stack.Navigator>
+        </BarcodeProvider>
       </NativeBaseProvider>
     </NavigationContainer>
   );

diff --git a/package.json b/package.json
@@ -14,11 +14,11 @@
     "@expo/webpack-config": "~19.0.1",
     "@react-native-async-storage/async-storage": "1.21.0",
     "@react-native-google-signin/google-signin": "^11.0.0",
+    "@react-navigation/material-top-tabs": "^6.6.13",
     "@react-navigation/native": "^6.1.9",
     "@react-navigation/native-stack": "^6.9.17",
     "add": "^2.0.6",
     "axios": "^1.6.7",
-
     "expo": "^50.0.4",
     "expo-auth-session": "~5.4.0",
     "expo-checkbox": "~2.7.0",

diff --git a/src/assets/images/check/check.js b/src/assets/images/check/check.js
@@ -0,0 +1,16 @@
+import React from "react";
+import { SvgXml } from "react-native-svg";
+
+const check = `
+<svg width="400px" height="400px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="#000000">
+<g transform="translate(0, -5)">
+<path d="M11.0057 6C7.68883 6 5 8.68629 5 12C5 15.3137 7.68883 18 11.0057 18C13.0879 18 14.9226 16.9413 16 15.3333" stroke="#ffffff" stroke-width="2" stroke-linecap="round"/> <path d="M18 7.41429L11.9142 13.5001" stroke="#ffffff" stroke-width="2" stroke-linecap="round"/> <path d="M9.5 11.5L11.9142 13.5" stroke="#ffffff" stroke-width="2" stroke-linecap="round"/></g>
+</svg>
+`;
+
+const svg = () => {
+  const CheckSvg = () => <SvgXml xml={check} width="36px" height="36px" />;
+  return <CheckSvg />;
+};
+
+export default svg;
diff --git a/src/assets/images/check/check.svg b/src/assets/images/check/check.svg
diff --git a/src/assets/images/setting/setting.js b/src/assets/images/setting/setting.js
@@ -0,0 +1,15 @@
+import React from "react";
+import { SvgXml } from "react-native-svg";
+
+const setting = `
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20.1 9.2214C18.29 9.2214 17.55 7.9414 18.45 6.3714C18.97 5.4614 18.66 4.3014 17.75 3.7814L16.02 2.7914C15.23 2.3214 14.21 2.6014 13.74 3.3914L13.63 3.5814C12.73 5.1514 11.25 5.1514 10.34 3.5814L10.23 3.3914C9.78 2.6014 8.76 2.3214 7.97 2.7914L6.24 3.7814C5.33 4.3014 5.02 5.4714 5.54 6.3814C6.45 7.9414 5.71 9.2214 3.9 9.2214C2.86 9.2214 2 10.0714 2 11.1214V12.8814C2 13.9214 2.85 14.7814 3.9 14.7814C5.71 14.7814 6.45 16.0614 5.54 17.6314C5.02 18.5414 5.33 19.7014 6.24 20.2214L7.97 21.2114C8.76 21.6814 9.78 21.4014 10.25 20.6114L10.36 20.4214C11.26 18.8514 12.74 18.8514 13.65 20.4214L13.76 20.6114C14.23 21.4014 15.25 21.6814 16.04 21.2114L17.77 20.2214C18.68 19.7014 18.99 18.5314 18.47 17.6314C17.56 16.0614 18.3 14.7814 20.11 14.7814C21.15 14.7814 22.01 13.9314 22.01 12.8814V11.1214C22 10.0814 21.15 9.2214 20.1 9.2214ZM12 15.2514C10.21 15.2514 8.75 13.7914 8.75 12.0014C8.75 10.2114 10.21 8.7514 12 8.7514C13.79 8.7514 15.25 10.2114 15.25 12.0014C15.25 13.7914 13.79 15.2514 12 15.2514Z" fill="#ffffff"/>
+</svg>
+`;
+
+const svg = () => {
+  const SettingSvg = () => <SvgXml xml={setting} width="32px" height="32px" />;
+  return <SettingSvg />;
+};
+
+export default svg;
diff --git a/src/assets/images/setting/setting.svg b/src/assets/images/setting/setting.svg
diff --git a/src/assets/images/trash/trash.js b/src/assets/images/trash/trash.js
@@ -0,0 +1,15 @@
+import React from "react";
+import { SvgXml } from "react-native-svg";
+
+const trash = `
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="#ffffff">
+<path d="M10 12L14 16M14 12L10 16M4 6H20M16 6L15.7294 5.18807C15.4671 4.40125 15.3359 4.00784 15.0927 3.71698C14.8779 3.46013 14.6021 3.26132 14.2905 3.13878C13.9376 3 13.523 3 12.6936 3H11.3064C10.477 3 10.0624 3 9.70951 3.13878C9.39792 3.26132 9.12208 3.46013 8.90729 3.71698C8.66405 4.00784 8.53292 4.40125 8.27064 5.18807L8 6M18 6V16.2C18 17.8802 18 18.7202 17.673 19.362C17.3854 19.9265 16.9265 20.3854 16.362 20.673C15.7202 21 14.8802 21 13.2 21H10.8C9.11984 21 8.27976 21 7.63803 20.673C7.07354 20.3854 6.6146 19.9265 6.32698 19.362C6 18.7202 6 17.8802 6 16.2V6" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+`;
+
+const svg = () => {
+  const TrashSvg = () => <SvgXml xml={trash} width="24px" height="24px" />;
+  return <TrashSvg />;
+};
+
+export default svg;
diff --git a/src/assets/images/trash/trash.svg b/src/assets/images/trash/trash.svg
diff --git a/src/components/navigation/bar/AppBar.js b/src/components/navigation/bar/AppBar.js
@@ -20,9 +20,11 @@ const AppBar = ({ navigation }) => {
   return {
     headerBackVisible: false,
     headerLeft: () => (
-      <TouchableOpacity onPress={() => {
-        navigation.navigate('FriendsList');
-      }}>
+      <TouchableOpacity
+        onPress={() => {
+          navigation.navigate("FriendsList");
+        }}
+      >
         <LeftIcon />
       </TouchableOpacity>
     ),
@@ -32,7 +34,11 @@ const AppBar = ({ navigation }) => {
         <TouchableOpacity onPress={() => {}}>
           <RightIcon1 />
         </TouchableOpacity>
-        <TouchableOpacity onPress={() => {}}>
+        <TouchableOpacity
+          onPress={() => {
+            navigation.navigate("Profile");
+          }}
+        >
           <RightIcon2 />
         </TouchableOpacity>
       </View>