Feat/dnd-side-project#41 TabBar를 가리는 기능을 추가합니다. (dnd-side-project#45)

* fix: buttonStyle을 변경합니다. * Normalize all line endings to LF * feat: TabBar를 가리는 기능을 추가합니다. * refactor: 커스텀 훅으로 분리합니다.
Zero-1016 · Sep 26, 2024 · 49e2b0e · 49e2b0e
1 parent c5fedbd
commit 49e2b0e
Show file tree

Hide file tree

Showing 19 changed files with 106 additions and 16 deletions.
diff --git a/.gitattributes b/.gitattributes
@@ -0,0 +1 @@
+* text eol=lf
diff --git a/app/(app)/_layout.tsx b/app/(app)/_layout.tsx
@@ -12,6 +12,7 @@ import { MAIN_NAVIGATIONS } from '@/constants';
 import { SITE_URLS } from '@/constants';
 import { useSession } from '@/store';
 import { useOnboarding } from '@/store/useOnboarding';
+import useTabBar from '@/store/useTabBar';
 
 const tabBarOptions = {
   [MAIN_NAVIGATIONS.HOME]: {
@@ -56,6 +57,12 @@ const tabBarOptions = {
 };
 
 const TabBar = ({ state, descriptors, navigation }: BottomTabBarProps) => {
+  const isVisible = useTabBar((state) => state.isVisible);
+
+  if (!isVisible) {
+    return null;
+  }
+
   return (
     <S.TabBar>
       {state.routes.map((route, index) => {

diff --git a/app/(app)/project/_layout.tsx b/app/(app)/project/_layout.tsx
@@ -1,28 +1,63 @@
-import { Stack } from 'expo-router';
+import { AntDesign, Feather } from '@expo/vector-icons';
+import { Stack, useRouter } from 'expo-router';
+import { Pressable } from 'react-native';
 
 import { PROJECT_NAVIGATIONS } from '@/constants';
+import { color } from '@/styles/theme';
+
+import * as S from './layout.style';
 
 function Layout() {
+  const router = useRouter();
   return (
-    <Stack>
+    <Stack
+      screenOptions={() => ({
+        headerStyle: { height: 40, backgroundColor: color.Background.Alternative },
+        headerTitleStyle: {
+          paddingTop: 12,
+          fontFamily: 'Pretendard-Bold',
+        },
+        headerTitleAlign: 'center',
+        headerShadowVisible: false,
+      })}>
       <Stack.Screen
         name={PROJECT_NAVIGATIONS.HOME}
         options={{
           title: '프로젝트',
-          headerTitleStyle: {
-            fontFamily: 'Pretendard',
-            fontWeight: 'bold',
-          },
+          headerLeft: () => null,
+          headerRight: () => (
+            <S.ButtonGroup>
+              <Pressable>
+                <AntDesign
+                  name='search1'
+                  size={24}
+                />
+              </Pressable>
+              <Pressable onPress={() => router.push('/project/create')}>
+                <AntDesign
+                  name='plus'
+                  size={24}
+                />
+              </Pressable>
+            </S.ButtonGroup>
+          ),
         }}
       />
       <Stack.Screen
         name={PROJECT_NAVIGATIONS.CREATE}
         options={{
+          animation: 'flip',
           title: '프로젝트 등록',
-          headerTitleStyle: {
-            fontFamily: 'Pretendard',
-            fontWeight: 'bold',
-          },
+          headerLeft: ({ canGoBack }) => (
+            <S.ButtonGroup>
+              <Pressable onPress={() => (canGoBack ? router.back() : router.push('/project'))}>
+                <Feather
+                  name='chevron-left'
+                  size={24}
+                />
+              </Pressable>
+            </S.ButtonGroup>
+          ),
         }}
       />
     </Stack>

diff --git a/app/(app)/project/create.tsx b/app/(app)/project/create.tsx
@@ -1,12 +1,21 @@
-import { View } from 'react-native';
+import { SafeAreaView } from 'react-native';
 
 import Typography from '@/components/common/typography';
+import { useTabBarEffect } from '@/hooks';
+import { color } from '@/styles/theme';
+import { getSize } from '@/utils';
 
 function Create() {
+  useTabBarEffect();
   return (
-    <View>
-      <Typography>Create</Typography>
-    </View>
+    <SafeAreaView
+      style={{
+        flex: 1,
+        backgroundColor: color.Background.Alternative,
+        height: getSize.screenHeight,
+      }}>
+      <Typography>프로젝트 생성</Typography>
+    </SafeAreaView>
   );
 }
 

diff --git a/app/(app)/project/index.tsx b/app/(app)/project/index.tsx
@@ -3,6 +3,7 @@ import { SafeAreaView } from 'react-native';
 
 import ProjectInviteModal from '@/components/project/ProjectInviteModal';
 import ProjectList from '@/components/project/ProjectList';
+import { color } from '@/styles/theme';
 
 function Project() {
   const [visible, setVisible] = useState(false);
@@ -97,7 +98,7 @@ function Project() {
   ];
 
   return (
-    <SafeAreaView style={{ flex: 1 }}>
+    <SafeAreaView style={{ flex: 1, backgroundColor: color.Background.Alternative }}>
       <ProjectInviteModal
         project_name={data.project_name}
         project_profile={data.project_profile}

diff --git a/app/(app)/project/layout.style.ts b/app/(app)/project/layout.style.ts
@@ -0,0 +1,9 @@
+import styled from '@emotion/native';
+
+import { flexDirectionRow } from '@/styles/common';
+
+export const ButtonGroup = styled.View`
+  ${flexDirectionRow};
+  gap: 10px;
+  padding: 20px 20px 8px;
+`;
diff --git a/assets/images/adaptive-icon.png b/assets/images/adaptive-icon.png
diff --git a/assets/images/favicon.png b/assets/images/favicon.png
diff --git a/assets/images/icon.png b/assets/images/icon.png
diff --git a/assets/images/onboarding-bg.png b/assets/images/onboarding-bg.png
diff --git a/assets/images/partial-react-logo.png b/assets/images/partial-react-logo.png
diff --git a/assets/images/react-logo.png b/assets/images/react-logo.png
diff --git a/assets/images/react-logo@2x.png b/assets/images/react-logo@2x.png
diff --git a/assets/images/react-logo@3x.png b/assets/images/react-logo@3x.png
diff --git a/assets/images/splash.png b/assets/images/splash.png
diff --git a/src/hooks/index.ts b/src/hooks/index.ts
@@ -1,2 +1,3 @@
 export * from './useAppOpen';
 export * from './useStorageState';
+export * from './useTabBarEffect';
diff --git a/src/hooks/useButtonStyle.ts b/src/hooks/useButtonStyle.ts
@@ -10,7 +10,6 @@ export function useButtonStyle(size: ButtonProps['size']) {
     iconSize: number;
   }>(() => {
     switch (size) {
-      case 'full':
       case 'large':
         return { textSize: 'Body1/Normal', iconSize: 16 };
       case 'medium':

diff --git a/src/hooks/useTabBarEffect.ts b/src/hooks/useTabBarEffect.ts
@@ -0,0 +1,13 @@
+import { useLayoutEffect } from 'react';
+
+import useTabBar from '@/store/useTabBar';
+
+export function useTabBarEffect() {
+  const { hideTabBar, showTabBar } = useTabBar();
+
+  useLayoutEffect(() => {
+    hideTabBar();
+
+    return () => showTabBar();
+  }, [hideTabBar, showTabBar]);
+}
diff --git a/src/store/useTabBar.tsx b/src/store/useTabBar.tsx
@@ -0,0 +1,15 @@
+import { create } from 'zustand';
+
+type TabBarStore = {
+  isVisible: boolean;
+  showTabBar: () => void;
+  hideTabBar: () => void;
+};
+
+const useTabBar = create<TabBarStore>((set) => ({
+  isVisible: true,
+  showTabBar: () => set({ isVisible: true }),
+  hideTabBar: () => set({ isVisible: false }),
+}));
+
+export default useTabBar;