[Feature] 모집 게시글 상세보기 페이지 마크업

frontend/src/components/ArticleTag/ArticleTag.stories.tsx

@@ -10,6 +10,6 @@ const Template: ComponentStory<typeof ArticleTag> = (args) => <ArticleTag {...ar
 
 export const _ArticleTag = Template.bind({});
 _ArticleTag.args = {
-  id: 2,
+  color: 'lime',
   content: '제주',
 };

frontend/src/components/ArticleTag/index.tsx

@@ -1,29 +1,22 @@
 import { Badge } from '@mantine/core';
 import styled from '@emotion/styled';
-import { BADGE_COLORS } from '@constants/color';
 
 interface Props {
   /**
-   * 카테고리 id, 지역 id 등 뱃지 옵션의 id를 입력합니다.
-   * id를 통해 색상이 결정됩니다.
+   * 뱃지의 색상을 결정합니다. 존재하지 않는 색상을 입력할 경우, indigo로 설정됩니다.
    */
-  id: number;
+  color: string;
   /**
    * 뱃지에 들어갈 내용이 입력됩니다.
    */
   content: string;
+  size?: 'sm' | 'lg';
 }
 
-const ArticleTag = ({ id, content }: Props) => {
-  // TODO 이 함수를 util로 분리하는게 좋을지 고민
-  const getBadgeColor = (id: number) => {
-    const colorCount = BADGE_COLORS.length;
-    return BADGE_COLORS[id % colorCount];
-  };
-
+const ArticleTag = ({ color, content, size = 'sm' }: Props) => {
   return (
     <BadgeWrapper>
-      <Badge color={getBadgeColor(id)} size="sm">
+      <Badge color={color} size={size} radius="sm">
         {content}
       </Badge>
     </BadgeWrapper>

frontend/src/components/GroupArticleCard/GroupArticleCard.stories.tsx

@@ -1,6 +1,6 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import GroupArticleCard from '.';
-import { dummyArticle } from '@constants/dummy';
+import { dummyArticlePreview } from '@constants/dummy';
 import { ArticleStatus } from '@constants/article';
 
 export default {
@@ -11,14 +11,14 @@ export default {
 const Template: ComponentStory<typeof GroupArticleCard> = (args) => <GroupArticleCard {...args} />;
 
 export const NormalCard = Template.bind({});
-NormalCard.args = { article: dummyArticle };
+NormalCard.args = { article: dummyArticlePreview };
 
 export const LongTitleCard = Template.bind({});
 LongTitleCard.args = {
-  article: { ...dummyArticle, title: '길어지는 제목입니다. 제목이 길어서 잘려요.' },
+  article: { ...dummyArticlePreview, title: '길어지는 제목입니다. 제목이 길어서 잘려요.' },
 };
 
 export const ClosedCard = Template.bind({});
 ClosedCard.args = {
-  article: { ...dummyArticle, status: ArticleStatus.SUCCEED },
+  article: { ...dummyArticlePreview, status: ArticleStatus.SUCCEED },
 };

frontend/src/components/GroupArticleCard/index.tsx

@@ -1,8 +1,8 @@
 import { Image } from '@mantine/core';
-import { ArticleType } from '@typings/types';
+import { ArticlePreviewType } from '@typings/types';
 import ArticleTag from '@components/ArticleTag';
 import StatCounter from '@components/StatCounter';
-import { ArticleStatus } from '@constants/article';
+import { ArticleStatus, ArticleStatusKr } from '@constants/article';
 import {
   CapacityText,
   CardWrapper,
@@ -12,9 +12,10 @@ import {
   TitleText,
   ClosedText,
 } from '@components/GroupArticleCard/styles';
+import { getCommonBadgeColor, getStatusBadgeColor } from '../../utils/colors';
 
 interface Props {
-  article: ArticleType;
+  article: ArticlePreviewType;
 }
 
 const GroupArticleCard = ({ article }: Props) => {
@@ -28,8 +29,18 @@ const GroupArticleCard = ({ article }: Props) => {
       <Image src={article.thumbnail} alt={'thumbnail-image'} height={200} />
       <InfoWrapper>
         <TagWrapper>
-          <ArticleTag id={article.category.id} content={article.category.name} />
-          <ArticleTag id={article.location.id} content={article.location.name} />
+          <ArticleTag
+            color={getStatusBadgeColor(article.status)}
+            content={ArticleStatusKr[article.status]}
+          />
+          <ArticleTag
+            color={getCommonBadgeColor(article.category.id)}
+            content={article.category.name}
+          />
+          <ArticleTag
+            color={getCommonBadgeColor(article.location.id)}
+            content={article.location.name}
+          />
         </TagWrapper>
         <TitleText>{article.title}</TitleText>
         <CapacityText>

frontend/src/constants/article.ts

@@ -1,7 +1,13 @@
 enum ArticleStatus {
+  PROGRESS = 'PROGRESS',
+  SUCCEED = 'SUCCEED',
+  FAIL = 'FAIL',
+}
+
+enum ArticleStatusKr {
   PROGRESS = '모집중',
-  SUCCEED = '모집성공',
-  FAIL = '모집중단',
+  SUCCEED = '모집완료',
+  FAIL = '모집증단',
 }
 
-export { ArticleStatus };
+export { ArticleStatus, ArticleStatusKr };

frontend/src/constants/category.ts

@@ -0,0 +1,17 @@
+enum Category {
+  STUDY = 'STUDY',
+  PROJECT = 'PROJECT',
+  COMPETITION = 'COMPETITION',
+  MEAL = 'MEAL',
+  ETC = 'ETC',
+}
+
+enum CategoryKr {
+  STUDY = '스터디',
+  PROJECT = '프로젝트',
+  COMPETITION = '공모전',
+  MEAL = '식사',
+  ETC = '기타',
+}
+
+export { Category, CategoryKr };

frontend/src/constants/color.ts

@@ -1,14 +1,11 @@
-const BADGE_COLORS = [
-  'cyan',
-  'green',
-  'yellow',
-  'orange',
-  'grape',
-  'red',
-  'indigo',
-  'violet',
-  'lime',
-  'teal',
-];
+import { ArticleStatus } from '@constants/article';
 
-export { BADGE_COLORS };
+const BADGE_COLORS = ['cyan', 'green', 'yellow', 'orange', 'grape', 'violet', 'teal', 'pink'];
+
+const STATUS_COLOR = {
+  [ArticleStatus.PROGRESS]: 'lime',
+  [ArticleStatus.SUCCEED]: 'indigo',
+  [ArticleStatus.FAIL]: 'red',
+};
+
+export { BADGE_COLORS, STATUS_COLOR };

frontend/src/constants/dummy.ts

@@ -1,8 +1,29 @@
-import { ArticleType } from '@typings/types';
+import { ArticlePreviewType, ArticleType } from '@typings/types';
 import { Location } from '@constants/location';
 import { ArticleStatus } from '@constants/article';
+import { Category } from '@constants/category';
 
 // TODO 개발용 dummy data, 추후 삭제
+const dummyArticlePreview: ArticlePreviewType = {
+  id: 1,
+  title: '모집 테스트1',
+  location: {
+    id: 2,
+    name: Location.BUSAN,
+  },
+  category: {
+    id: 1,
+    name: Category.STUDY,
+  },
+  commentCount: 31,
+  scrapCount: 12,
+  thumbnail: 'https://avatars.githubusercontent.com/u/90585081?v=4',
+  maxCapacity: 5,
+  currentCapacity: 3,
+  status: ArticleStatus.PROGRESS,
+  createdAt: '2021-04-03T18:45:19Z',
+};
+
 const dummyArticle: ArticleType = {
   id: 1,
   title: '모집 테스트1',
@@ -12,8 +33,12 @@ const dummyArticle: ArticleType = {
   },
   category: {
     id: 1,
-    name: '스터디',
+    name: Category.STUDY,
   },
+  contents: '<div>test</div>',
+  authorId: 1,
+  authorName: 'JHPark_GOD',
+  authorThumbnail: 'https://avatars.githubusercontent.com/u/90585081?v=4',
   commentCount: 31,
   scrapCount: 12,
   thumbnail: 'https://avatars.githubusercontent.com/u/90585081?v=4',
@@ -23,4 +48,4 @@ const dummyArticle: ArticleType = {
   createdAt: '2021-04-03T18:45:19Z',
 };
 
-export { dummyArticle };
+export { dummyArticlePreview, dummyArticle };

frontend/src/constants/location.ts

@@ -1,4 +1,24 @@
 enum Location {
+  SEOUL = 'SEOUL',
+  INCHEON = 'INCHEON',
+  BUSAN = 'BUSAN',
+  DAEGU = 'DAEGU',
+  GWANGJU = 'GWANGJU',
+  DAEJEON = 'DAEJEON',
+  ULSAN = 'ULSAN',
+  SEJONG = 'SEJONG',
+  GYEONGGI = 'GYEONGGI',
+  GANGWON = 'GANGWON',
+  CHUNGBUK = 'CHUNGBUK',
+  CHUNGNAM = 'CHUNGNAM',
+  JEONBUK = 'JEONBUK',
+  JEONNAM = 'JEONNAM',
+  GYEONGBUK = 'GYEONGBUK',
+  GYEONGNAM = 'GYEONGNAM',
+  JEJU = 'JEJU',
+}
+
+enum LocationKr {
   SEOUL = '서울',
   INCHEON = '인천',
   BUSAN = '부산',
@@ -18,4 +38,4 @@ enum Location {
   JEJU = '제주',
 }
 
-export { Location };
+export { Location, LocationKr };