feat: ReviewSkeletonCard를 추가합니다. (#61)

src/components/common/category-chip/index.tsx

@@ -15,7 +15,7 @@ function CategoryChip({ category }: Props) {
     <S.Container $categoryStyle={CategoryStyle[category]}>
       <Typography
         color='#1D212C'
-        variant='Caption1'>
+        variant='Label1/Reading'>
         {category}
       </Typography>
     </S.Container>

src/components/review/ProjectChip/index.tsx

@@ -0,0 +1,21 @@
+import type { PropsWithChildren } from 'react';
+import { memo } from 'react';
+
+import Typography from '@/components/common/typography';
+
+import * as S from './style';
+
+function ProjectChip({ children }: PropsWithChildren) {
+  return (
+    <S.Container>
+      <Typography
+        variant='Caption1'
+        fontWeight='medium'
+        color='#1D212C'>
+        {children}
+      </Typography>
+    </S.Container>
+  );
+}
+
+export default memo(ProjectChip);

src/components/review/ProjectChip/style.ts

@@ -0,0 +1,8 @@
+import styled from '@emotion/native';
+
+export const Container = styled.View`
+  width: fit-content;
+  padding: 6px 12px;
+  background: ${({ theme }) => theme.color.CoolNeutral['98']};
+  border-radius: 4px;
+`;

src/components/review/ReviewCard/index.tsx

@@ -0,0 +1,42 @@
+import type { PropsWithChildren } from 'react';
+
+import Typography from '@/components/common/typography';
+import ProjectChip from '@/components/review/ProjectChip';
+
+import * as S from './style';
+
+type DateBoxProps = {
+  startDate: string;
+  endDate: string;
+};
+
+function DateBox({ startDate, endDate }: DateBoxProps) {
+  return (
+    <Typography
+      style={{ opacity: 0.5 }}
+      variant='Caption1'
+      fontWeight='medium'
+      color='1D212C'>
+      {`${startDate} - ${endDate}`}
+    </Typography>
+  );
+}
+
+type Props = {
+  projectName: string;
+};
+
+function Card({ projectName, children }: PropsWithChildren<Props>) {
+  return (
+    <S.Container>
+      <ProjectChip>{projectName}</ProjectChip>
+      <S.ContentsBox>{children}</S.ContentsBox>
+    </S.Container>
+  );
+}
+
+const ReviewCard = Object.assign(Card, {
+  DateBox,
+});
+
+export default ReviewCard;

src/components/review/ReviewCard/style.ts

@@ -0,0 +1,16 @@
+import styled from '@emotion/native';
+
+import { flexDirectionColumn } from '@/styles/common';
+
+export const Container = styled.View`
+  ${flexDirectionColumn};
+  gap: 16px;
+  padding: 12px;
+  background-color: ${({ theme }) => theme.color.Background.Normal};
+  border-radius: 4px;
+`;
+
+export const ContentsBox = styled.View`
+  ${flexDirectionColumn};
+  gap: 8px;
+`;

src/components/review/ReviewSkeletonCard/ReviewSkeletonCard.stories.tsx

@@ -0,0 +1,60 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { View } from 'react-native';
+
+import { SCREEN_SIZE } from '@/constants';
+import { color } from '@/styles/theme';
+
+import ReviewSkeletonCard from './';
+
+const ReviewSkeletonCardMeta: Meta<typeof ReviewSkeletonCard> = {
+  title: 'review/ReviewSkeletonCard',
+  component: ReviewSkeletonCard,
+  argTypes: {
+    projectName: {
+      control: {
+        type: 'text',
+      },
+      description: '프로젝트 이름을 입력합니다.',
+    },
+    startDate: {
+      control: {
+        type: 'text',
+        description: '프로젝트 시작 날짜를 입력합니다.',
+      },
+    },
+    endDate: {
+      control: {
+        type: 'text',
+        description: '프로젝트 끝난 날짜를 입력합니다.',
+      },
+    },
+  },
+};
+
+export default ReviewSkeletonCardMeta;
+
+export const Primary: StoryObj<typeof ReviewSkeletonCard> = {
+  args: {
+    projectName: '프로젝트',
+    startDate: '2024-07',
+    endDate: '2024-10',
+  },
+  render: (args) => {
+    return (
+      <View
+        style={{
+          flex: 1,
+          padding: 20,
+          backgroundColor: color.Background.Alternative,
+        }}>
+        <View
+          style={{
+            width: SCREEN_SIZE.Web,
+            marginHorizontal: 'auto',
+          }}>
+          <ReviewSkeletonCard {...args} />
+        </View>
+      </View>
+    );
+  },
+};

src/components/review/ReviewSkeletonCard/index.tsx

@@ -0,0 +1,32 @@
+import Skeleton from '@/components/common/skeleton';
+import ReviewCard from '@/components/review/ReviewCard';
+
+import * as S from './style';
+
+type Props = {
+  projectName: string;
+  startDate: string;
+  endDate: string;
+};
+
+function ReviewSkeletonCard({ projectName, startDate, endDate }: Props) {
+  return (
+    <ReviewCard projectName={projectName}>
+      <S.SkeletonBox>
+        <Skeleton variant='rounded' />
+        <Skeleton variant='rounded' />
+        <Skeleton variant='rounded' />
+        <Skeleton
+          variant='rounded'
+          width='90%'
+        />
+      </S.SkeletonBox>
+      <ReviewCard.DateBox
+        startDate={startDate}
+        endDate={endDate}
+      />
+    </ReviewCard>
+  );
+}
+
+export default ReviewSkeletonCard;

src/components/review/ReviewSkeletonCard/style.ts

@@ -0,0 +1,12 @@
+import styled from '@emotion/native';
+
+import { flexDirectionColumn } from '@/styles/common';
+
+export const Container = styled.View`
+  padding: 14px;
+`;
+
+export const SkeletonBox = styled.View`
+  ${flexDirectionColumn};
+  gap: 8px;
+`;