feat: 모임 안내 모집 대상 chip 변경

sopt-makers · Oct 10, 2024 · 5ee551a · 5ee551a
1 parent 249f92c
commit 5ee551a
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 5 deletions.
diff --git a/src/components/page/meetingDetail/Information/InformationPanel.tsx b/src/components/page/meetingDetail/Information/InformationPanel.tsx
@@ -8,6 +8,7 @@ dayjs.locale('ko');
 import { PART_NAME } from '@constants/option';
 import { useCallback, useRef, useState } from 'react';
 import { GetMeetingResponse } from '@api/API_LEGACY/meeting';
+import { Chip } from '@sopt-makers/ui';
 
 interface InformationPanelProps {
   detailData: GetMeetingResponse;
@@ -88,9 +89,12 @@ const InformationPanel = ({ detailData }: InformationPanelProps) => {
               <STitle>{title}</STitle>
               {title === '모집 대상' && (
                 <STarget>
-                  대상 기수 : {generation}
-                  <br />
-                  대상 파트 : {partList?.join(', ')}
+                  {partList?.map(part => (
+                    <Chip key={part} style={{ width: '80px' }}>
+                      {part}
+                    </Chip>
+                  ))}
+                  {generation}
                 </STarget>
               )}
               <SDescription>{handleContent(content)}</SDescription>
@@ -145,6 +149,9 @@ const SDescription = styled('p', {
 });
 
 const STarget = styled(SDescription, {
+  display: 'flex',
+  gap: '$10',
+
   mb: '$24',
 
   '@tablet': {

diff --git a/src/constants/option.ts b/src/constants/option.ts
@@ -2,7 +2,7 @@ export const PART_NAME: Record<string, string> = {
   PM: '기획',
   DESIGN: '디자인',
   IOS: 'iOS',
-  ANDROID: '안드로이드',
+  ANDROID: 'Android',
   SERVER: '서버',
   WEB: '웹',
 };
@@ -22,7 +22,7 @@ export const APPROVAL_STATUS_KOREAN_TO_ENGLISH: StringKeyObject = {
 };
 export const APPLICATION_TYPE = ['신청', '초대'];
 export const CATEGORY_OPTIONS = ['스터디', '행사'];
-export const PART_OPTIONS = ['기획', '디자인', '안드로이드', 'iOS', '웹', '서버'];
+export const PART_OPTIONS = ['기획', '디자인', 'Android', 'iOS', '웹', '서버'];
 export const PART_VALUES = ['PM', 'DESIGN', 'ANDROID', 'IOS', 'WEB', 'SERVER'];
 export const ACTION_STATUS = ['모집 전', '모집 중', '모집 마감', '활동 중', '활동 종료'];