Merge branch 'dev' into feat/#40-mypage

.gitattributes

@@ -1 +1,9 @@
-* text eol=lf
+*.ts   text eol=lf
+*.tsx  text eol=lf
+*.js   text eol=lf
+*.jsx  text eol=lf
+*.json text eol=lf
+
+*.png  -text
+*.jpg  -text
+*.gif  -text

.github/workflows/vercel-web-build.yml

@@ -0,0 +1,24 @@
+name: Vercel Production Deployment
+env:
+  VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
+  VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
+  EXPO_PUBLIC_SERVER_URL: ${{ secrets.EXPO_PUBLIC_SERVER_URL }}
+on:
+  pull_request:
+    branches:
+      - main
+jobs:
+  Deploy-Production:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - name: Install Vercel CLI
+        run: npm install --global vercel@latest
+      - name: Pull Vercel Environment Information
+        run: vercel pull --yes --environment=production --token=${{ secrets.VERCEL_TOKEN }}
+      - name: Install Project Dependencies
+        run: yarn install
+      - name: Build Project Artifacts
+        run: vercel build --prod --token=${{ secrets.VERCEL_TOKEN }}
+      - name: Deploy Project Artifacts to Vercel
+        run: vercel deploy --prebuilt --prod --token=${{ secrets.VERCEL_TOKEN }}

.storybook/preview.tsx

@@ -1,5 +1,6 @@
 import type { Preview } from '@storybook/react';
 import Provider from '../src/components/common/provider';
+import { useAppOpen } from '../src/hooks';
 
 const preview: Preview = {
   parameters: {
@@ -13,6 +14,7 @@ const preview: Preview = {
   },
   decorators: [
     (Story) => {
+      useAppOpen();
       return (
         <Provider>
           <Story />

app.json

@@ -39,6 +39,12 @@
             "assets/fonts/Pretendard-Reqular.otf"
           ]
         }
+      ],
+      [
+        "expo-image-picker",
+        {
+          "photosPermission": "$(PRODUCT_NAME) 에서 사진 접근 권한을 승인합니다."
+        }
       ]
     ],
     "experiments": {

app/(app)/_layout.tsx

@@ -5,14 +5,15 @@ import { Redirect, Tabs } from 'expo-router';
 import React from 'react';
 import { Text } from 'react-native';
 
-import FireSvg from '@/components/common/icon/fire-svg';
 import Typography from '@/components/common/typography';
 import type { MainNavigations } from '@/constants';
 import { MAIN_NAVIGATIONS } from '@/constants';
 import { SITE_URLS } from '@/constants';
 import { useSession } from '@/store';
 import { useOnboarding } from '@/store/useOnboarding';
 import useTabBar from '@/store/useTabBar';
+import { flexDirectionRow, flexItemCenter } from '@/styles/common';
+import { color } from '@/styles/theme';
 
 const tabBarOptions = {
   [MAIN_NAVIGATIONS.HOME]: {
@@ -35,15 +36,6 @@ const tabBarOptions = {
       />
     ),
   },
-  [MAIN_NAVIGATIONS.REVIEW]: {
-    label: '리뷰',
-    icon: (color: string) => (
-      <FireSvg
-        size={28}
-        color={color}
-      />
-    ),
-  },
   [MAIN_NAVIGATIONS.MY]: {
     label: '마이',
     icon: (color: string) => (
@@ -71,7 +63,7 @@ const TabBar = ({ state, descriptors, navigation }: BottomTabBarProps) => {
 
         const isFocused = state.index === index;
 
-        if (route.name === 'alarm' || typeof label === 'function') {
+        if (route.name === 'alarm' || typeof label === 'function' || !tabBarOptions[label]) {
           return null;
         }
 
@@ -102,14 +94,13 @@ const TabBar = ({ state, descriptors, navigation }: BottomTabBarProps) => {
             accessibilityLabel={options.tabBarAccessibilityLabel}
             testID={options.tabBarTestID}
             onPress={onPress}
-            onLongPress={onLongPress}
-            style={{ flex: 1 }}>
-            {tabBarOptions[label].icon(isFocused ? '#000000' : '#cccccc')}
-            <Typography
-              variant='Caption2'
-              style={{ color: isFocused ? '#000000' : '#cccccc' }}>
+            onLongPress={onLongPress}>
+            {tabBarOptions[label].icon(isFocused ? color.Common['0'] : '#cccccc')}
+            <S.TabBarText
+              $isFocused={isFocused}
+              variant='Caption2'>
               {tabBarOptions[label].label}
-            </Typography>
+            </S.TabBarText>
           </S.TabBarItem>
         );
       })}
@@ -135,31 +126,37 @@ export default function Layout() {
   return (
     <Tabs
       screenOptions={{
+        headerShadowVisible: false,
         headerShown: false,
+        headerStyle: {
+          backgroundColor: color.Background.Alternative,
+        },
       }}
       tabBar={(tabBar) => <TabBar {...tabBar} />}>
       <Tabs.Screen name={MAIN_NAVIGATIONS.PROJECT} />
       <Tabs.Screen name={MAIN_NAVIGATIONS.HOME} />
-      <Tabs.Screen name={MAIN_NAVIGATIONS.REVIEW} />
       <Tabs.Screen name={MAIN_NAVIGATIONS.MY} />
     </Tabs>
   );
 }
 
 const S = {
   TabBar: styled.View`
+    ${flexDirectionRow};
     position: absolute;
     bottom: 0;
-    flex-direction: row;
     align-items: center;
     justify-content: space-between;
     width: 100%;
     padding: 12px 0 24px;
     background-color: white;
   `,
   TabBarItem: styled.TouchableOpacity`
+    ${flexItemCenter};
+    flex: 1;
     gap: 4px;
-    align-items: center;
-    justify-content: center;
+  `,
+  TabBarText: styled(Typography)<{ $isFocused: boolean }>`
+    color: ${({ $isFocused }) => ($isFocused ? '#000000' : '#cccccc')};
   `,
 };

app/(app)/project/[id]/detail/index.tsx

@@ -0,0 +1,65 @@
+import { Feather } from '@expo/vector-icons';
+import { useLocalSearchParams, useNavigation, useRouter } from 'expo-router';
+import { useLayoutEffect } from 'react';
+import { Platform, Pressable } from 'react-native';
+
+import { MOCK_PROJECT_DETAIL } from '@/__mock__/project';
+import Typography from '@/components/common/typography';
+import ProjectDetail from '@/components/project/ProjectDetail';
+import { PROJECT_URLS } from '@/constants';
+import { color } from '@/styles/theme';
+
+function Page() {
+  const router = useRouter();
+  const { id } = useLocalSearchParams<{ id: string }>();
+  const navigation = useNavigation();
+  const data = MOCK_PROJECT_DETAIL;
+
+  useLayoutEffect(() => {
+    navigation.setOptions({
+      headerStyle: {
+        paddingTop: 12,
+      },
+      headerTitle: data.name,
+      headerTintColor: color.Label.Normal,
+      headerTitleStyle: {
+        fontWeight: 600,
+        fontFamily: 'Pretendard-SemiBold',
+        fontSize: 18,
+        lineHeight: 26,
+      },
+      headerLeft: () => (
+        <Pressable onPress={router.back}>
+          <Feather
+            name='chevron-left'
+            size={24}
+          />
+        </Pressable>
+      ),
+      headerRight: () =>
+        Platform.OS !== 'web' ? (
+          <Pressable onPress={() => router.push(PROJECT_URLS.PROJECT_CREATE)}>
+            <Typography
+              variant='Body1/Normal'
+              fontWeight='medium'
+              color={color.Label.Alternative}>
+              편집
+            </Typography>
+          </Pressable>
+        ) : null,
+    });
+  }, [data.name, navigation, router]);
+
+  if (!id) {
+    return null;
+  }
+
+  return (
+    <ProjectDetail
+      id={id}
+      data={data}
+    />
+  );
+}
+
+export default Page;

app/(app)/project/[id]/detail/style.ts

@@ -0,0 +1,5 @@
+import styled from '@emotion/native';
+
+export const Container = styled.SafeAreaView`
+  padding: 32px 20px 52px;
+`;

app/(app)/project/[id]/review/_layout.tsx

@@ -0,0 +1,40 @@
+import { Feather } from '@expo/vector-icons';
+import { Stack, useRouter } from 'expo-router';
+import { Pressable } from 'react-native';
+
+import { PROJECT_URLS, REVIEW_NAVIGATIONS } from '@/constants';
+import { color } from '@/styles/theme';
+
+function Layout() {
+  const router = useRouter();
+  return (
+    <Stack
+      screenOptions={() => ({
+        headerStyle: { height: 40, backgroundColor: color.Background.Normal },
+        headerTitleStyle: {
+          paddingTop: 12,
+          fontFamily: 'Pretendard-Bold',
+        },
+        headerTitleAlign: 'center',
+        headerShadowVisible: false,
+      })}>
+      <Stack.Screen
+        name={REVIEW_NAVIGATIONS.CREATE}
+        options={{
+          title: '나의 설문지',
+          headerLeft: ({ canGoBack }) => (
+            <Pressable
+              onPress={() => (canGoBack ? router.back() : router.push(PROJECT_URLS.PROJECT_HOME))}>
+              <Feather
+                name='chevron-left'
+                size={24}
+              />
+            </Pressable>
+          ),
+        }}
+      />
+    </Stack>
+  );
+}
+
+export default Layout;

app/(app)/project/[id]/review/create.tsx

@@ -0,0 +1,93 @@
+import styled from '@emotion/native';
+import { useCallback, useState } from 'react';
+
+import SolidButton from '@/components/common/button/SolidButton';
+import Typography from '@/components/common/typography';
+import SelectCategoryChipList from '@/components/questionnaire/SelectCategoryChipList';
+import { useTabBarEffect } from '@/hooks';
+import { flexDirectionColumn } from '@/styles/common';
+
+const MINIMUM_CATEGORY_COUNT = 5;
+
+function Review() {
+  useTabBarEffect();
+  // const { id } = useLocalSearchParams<{ id: string }>();
+
+  const [error, setError] = useState<string | null>(null);
+  const [selectedCategoryList, setSelectedCategoryList] = useState<string[]>([]);
+
+  const addCategory = (category: string) => {
+    if (error) {
+      setError(null);
+    }
+    setSelectedCategoryList([...selectedCategoryList, category]);
+  };
+  const removeCategory = (category: string) =>
+    setSelectedCategoryList(selectedCategoryList.filter((item) => item !== category));
+
+  const selectCategory = useCallback(() => {
+    if (selectedCategoryList.length < MINIMUM_CATEGORY_COUNT) {
+      setError('5개를 선택해주세요');
+      return;
+    }
+    setError(null);
+  }, [selectedCategoryList]);
+
+  return (
+    <S.Container>
+      <S.WrapperBox>
+        <S.ReviewTitle>
+          <S.TitleText
+            variant='Title3'
+            fontWeight='bold'>
+            받고 싶은 리뷰의{`\n`}카테고리 5개를 골라주세요
+          </S.TitleText>
+          <S.SubTitleText
+            variant='Label1/Normal'
+            fontWeight='medium'>
+            카테고리 별로 설문이 구성돼요
+          </S.SubTitleText>
+        </S.ReviewTitle>
+
+        <SelectCategoryChipList
+          item={selectedCategoryList}
+          addItem={addCategory}
+          removeItem={removeCategory}
+          error={error}
+        />
+      </S.WrapperBox>
+
+      <SolidButton
+        onPress={selectCategory}
+        full>
+        다음
+      </SolidButton>
+    </S.Container>
+  );
+}
+
+const S = {
+  Container: styled.SafeAreaView`
+    flex: 1;
+    gap: 32px;
+    justify-content: space-between;
+    padding: 33px 20px 52px;
+    background: ${({ theme }) => theme.color.Background.Normal};
+  `,
+  WrapperBox: styled.View`
+    ${flexDirectionColumn};
+    gap: 32px;
+  `,
+  ReviewTitle: styled.View`
+    ${flexDirectionColumn};
+    gap: 8px;
+  `,
+  TitleText: styled(Typography)`
+    color: ${({ theme }) => theme.color.Label.Normal};
+  `,
+  SubTitleText: styled(Typography)`
+    color: ${({ theme }) => theme.color.Label.Alternative};
+  `,
+};
+
+export default Review;

app/(app)/review/index.tsx → app/(app)/project/[id]/review/index.tsx

@@ -2,12 +2,12 @@ import { View } from 'react-native';
 
 import Typography from '@/components/common/typography';
 
-function Review() {
+function Page() {
   return (
     <View>
-      <Typography>Review</Typography>
+      <Typography variant='Body1/Normal'>Page</Typography>
     </View>
   );
 }
 
-export default Review;
+export default Page;