Feat/#41 변경된 ProjectList를 적용합니다. (#67)

* refactor: color 값들을 변경합니다.

* refactor: 변경된 projectList를 적용합니다.

* fix: 가운데 정렬을 통해 글자를 가운데로 맞춥니다.

* refactor: web 환경에서는 프로젝트를 등록할 수 없게 합니다.

app/(app)/project/_layout.tsx

@@ -1,6 +1,6 @@
 import { AntDesign, Feather } from '@expo/vector-icons';
 import { Stack, useRouter } from 'expo-router';
-import { Pressable } from 'react-native';
+import { Platform, Pressable } from 'react-native';
 
 import { PROJECT_NAVIGATIONS } from '@/constants';
 import { color } from '@/styles/theme';
@@ -33,12 +33,14 @@ function Layout() {
                   size={24}
                 />
               </Pressable>
-              <Pressable onPress={() => router.push('/project/create')}>
-                <AntDesign
-                  name='plus'
-                  size={24}
-                />
-              </Pressable>
+              {Platform.OS !== 'web' && (
+                <Pressable onPress={() => router.push('/project/create')}>
+                  <AntDesign
+                    name='plus'
+                    size={24}
+                  />
+                </Pressable>
+              )}
             </S.ButtonGroup>
           ),
         }}

app/(app)/project/create.tsx

@@ -4,8 +4,9 @@ import BottomSheet, { BottomSheetView } from '@gorhom/bottom-sheet';
 import type { DateTimePickerEvent } from '@react-native-community/datetimepicker';
 import DateTimePicker from '@react-native-community/datetimepicker';
 import { launchImageLibraryAsync, MediaTypeOptions } from 'expo-image-picker';
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { Alert, ScrollView } from 'react-native';
+import { useRouter } from 'expo-router';
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { Alert, Platform, ScrollView } from 'react-native';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
 
 import SolidButton from '@/components/common/button/SolidButton';
@@ -23,6 +24,7 @@ import { color } from '@/styles/theme';
 import { getSize } from '@/utils';
 
 function Create() {
+  const router = useRouter();
   useTabBarEffect();
   const [image, setImage] = useState<string | null>(null);
   const [startDate, setStartDate] = useState<Date>(() => new Date());
@@ -83,6 +85,12 @@ function Create() {
     setSelectDate(select);
   }, []);
 
+  useLayoutEffect(() => {
+    if (Platform.OS === 'web') {
+      return router.replace('/project');
+    }
+  }, [router]);
+
   useEffect(() => {
     return () => dataSheetClose();
   }, [dataSheetClose]);

src/__mock__/project/index.ts

@@ -0,0 +1,47 @@
+import type { ProjectItemType } from '@/components/project/ProjectList';
+
+export const MOCK_PROJECT_ITEM: ProjectItemType = {
+  id: 1,
+  name: '위프로',
+  profile: 'https://picsum.photos/200',
+  review_count: 3,
+  member_num: 6,
+};
+
+export const MOCK_PROJECT_LIST: ProjectItemType[] = [
+  {
+    id: 1,
+    name: '위프로',
+    profile: 'https://picsum.photos/200',
+    review_count: 3,
+    member_num: 6,
+  },
+  {
+    id: 2,
+    name: '후피',
+    profile: 'https://picsum.photos/200',
+    review_count: 1,
+    member_num: 3,
+  },
+  {
+    id: 3,
+    name: 'Code Red',
+    profile: 'https://picsum.photos/200',
+    review_count: 2,
+    member_num: 3,
+  },
+  {
+    id: 4,
+    name: 'Veco',
+    profile: 'https://picsum.photos/200',
+    review_count: 3,
+    member_num: 3,
+  },
+  {
+    id: 5,
+    name: 'Zero Waste',
+    profile: 'https://picsum.photos/200',
+    review_count: 0,
+    member_num: 3,
+  },
+] as const;

src/components/project/ProjectImage/ProjectImage.style.ts

@@ -7,14 +7,15 @@ export const ProjectImageBox = styled.View`
   position: relative;
   width: 48px;
   height: 48px;
+  overflow: hidden;
   border-radius: 8px;
 `;
 
 export const ProjectImageOutline = styled.View`
   position: absolute;
   width: 100%;
   height: 100%;
-  border: 1px solid rgb(115 112 114);
+  border: 1px solid ${({ theme }) => theme.color.Line.Normal};
   border-radius: 8px;
 `;
 

src/components/project/ProjectItem/ProjectItem.stories.tsx

@@ -0,0 +1,56 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { View } from 'react-native';
+
+import { MOCK_PROJECT_ITEM } from '@/__mock__/project';
+import { color } from '@/styles/theme';
+
+import ProjectItem from './';
+
+const ProjectItemMeta: Meta<typeof ProjectItem> = {
+  title: 'project/ProjectItem',
+  component: ProjectItem,
+  argTypes: {
+    member_num: {
+      control: {
+        type: 'number',
+      },
+      description: '프로젝트의 총 인원 수를 지정합니다.',
+    },
+    name: {
+      control: {
+        type: 'text',
+      },
+      description: '프로젝트의 이름을 지정합니다.',
+    },
+    profile: {
+      control: {
+        type: 'text',
+      },
+      description: '프로젝트의 이미지를 지정합니다.',
+    },
+    review_count: {
+      control: {
+        type: 'number',
+      },
+      description: '프로젝트의 리뷰 수를 지정합니다.',
+    },
+    id: {
+      control: {
+        type: 'number',
+      },
+      description: '프로젝트의 id를 지정합니다.',
+    },
+  },
+};
+
+export default ProjectItemMeta;
+
+export const Primary: StoryObj<typeof ProjectItem> = {
+  render: () => {
+    return (
+      <View style={{ flex: 1, backgroundColor: color.Background.Alternative, padding: 10 }}>
+        <ProjectItem {...MOCK_PROJECT_ITEM} />
+      </View>
+    );
+  },
+};

src/components/project/ProjectItem/index.tsx

@@ -0,0 +1,43 @@
+import SlideBar from '@/components/common/slide-bar';
+import Typography from '@/components/common/typography';
+import ProjectImage from '@/components/project/ProjectImage';
+import type { ProjectItemType } from '@/components/project/ProjectList';
+import { color } from '@/styles/theme';
+
+import * as S from './style';
+
+function ProjectItem({ name, member_num, profile, review_count }: ProjectItemType) {
+  return (
+    <S.Container>
+      <ProjectImage uri={profile} />
+      <S.ProjectStatusBox>
+        <Typography
+          variant='Caption1'
+          color={color.Label.Alternative}>
+          프로젝트
+        </Typography>
+        <S.ProgressBox>
+          <S.ProgressInfo>
+            <Typography
+              variant='Body1/Normal'
+              fontWeight='semiBold'
+              color={color.Label.Normal}>
+              {name}
+            </Typography>
+            <Typography
+              variant='Caption1'
+              color={color.Label.Assistive}>
+              {review_count} / {member_num}
+            </Typography>
+          </S.ProgressInfo>
+          <SlideBar
+            max_value={member_num}
+            current_value={review_count}
+          />
+        </S.ProgressBox>
+      </S.ProjectStatusBox>
+    </S.Container>
+  );
+}
+
+export default ProjectItem;

src/components/project/ProjectItem/style.ts

@@ -0,0 +1,26 @@
+import styled from '@emotion/native';
+
+import { flexDirectionColumn, flexDirectionRowItemsCenter } from '@/styles/common';
+
+export const Container = styled.View`
+  ${flexDirectionRowItemsCenter};
+  gap: 10px;
+  padding: 16px;
+  background-color: ${({ theme }) => theme.color.Background.Normal};
+  border-radius: 8px;
+`;
+
+export const ProjectStatusBox = styled.View`
+  ${flexDirectionColumn};
+  flex-grow: 1;
+`;
+
+export const ProgressBox = styled.View`
+  ${flexDirectionColumn};
+  gap: 6px;
+`;
+
+export const ProgressInfo = styled.View`
+  ${flexDirectionRowItemsCenter};
+  justify-content: space-between;
+`;

src/components/project/ProjectList/ProjectList.stories.tsx

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { View } from 'react-native';
 
+import { MOCK_PROJECT_LIST } from '@/__mock__/project';
 import { color } from '@/styles/theme';
 
 import ProjectList from './';
@@ -15,84 +16,9 @@ export default ProjectListMeta;
 
 export const Primary: StoryObj<typeof ProjectList> = {
   render: () => {
-    const mockList = [
-      {
-        id: 1,
-        name: '위프로',
-        profile: 'https://picsum.photos/200',
-        member_num: 6,
-      },
-      {
-        id: 2,
-        name: '후피',
-        profile: 'https://picsum.photos/200',
-        member_num: 3,
-      },
-      {
-        id: 3,
-        name: 'Code Red',
-        profile: 'https://picsum.photos/200',
-        member_num: 3,
-      },
-      {
-        id: 4,
-        name: 'Veco',
-        profile: 'https://picsum.photos/200',
-        member_num: 3,
-      },
-      {
-        id: 5,
-        name: '위프로',
-        profile: 'https://picsum.photos/200',
-        member_num: 6,
-      },
-      {
-        id: 6,
-        name: '후피',
-        profile: 'https://picsum.photos/200',
-        member_num: 3,
-      },
-      {
-        id: 7,
-        name: 'Code Red',
-        profile: 'https://picsum.photos/200',
-        member_num: 3,
-      },
-      {
-        id: 8,
-        name: 'Veco',
-        profile: 'https://picsum.photos/200',
-        member_num: 3,
-      },
-      {
-        id: 9,
-        name: '위프로',
-        profile: 'https://picsum.photos/200',
-        member_num: 6,
-      },
-      {
-        id: 10,
-        name: '후피',
-        profile: 'https://picsum.photos/200',
-        member_num: 3,
-      },
-      {
-        id: 11,
-        name: 'Code Red',
-        profile: 'https://picsum.photos/200',
-        member_num: 3,
-      },
-      {
-        id: 12,
-        name: 'Last Project',
-        profile: 'https://picsum.photos/200',
-        member_num: 3,
-      },
-    ];
-
     return (
       <View style={{ flex: 1, backgroundColor: color.Background.Alternative, padding: 10 }}>
-        <ProjectList data={mockList} />
+        <ProjectList data={MOCK_PROJECT_LIST} />
       </View>
     );
   },