From 86b929224f5a0f4870ffaca106474f28c04def0e Mon Sep 17 00:00:00 2001
From: Lee jin <83453646+j-nary@users.noreply.github.com>
Date: Mon, 14 Oct 2024 21:29:00 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20Chip=20=ED=95=9C=EA=B0=9C=20=EC=84=A0?=
 =?UTF-8?q?=ED=83=9D=20=EC=9D=B4=EC=8A=88=20=EB=8C=80=EC=9D=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Presentation/JoinablePartsField/index.tsx | 59 +++++++++++++++++++
 src/components/form/Presentation/index.tsx    | 56 +++++++++---------
 .../Information/InformationPanel.tsx          | 10 +++-
 src/constants/option.ts                       |  4 +-
 src/data/options.ts                           |  3 +-
 5 files changed, 98 insertions(+), 34 deletions(-)
 create mode 100644 src/components/form/Presentation/JoinablePartsField/index.tsx

diff --git a/src/components/form/Presentation/JoinablePartsField/index.tsx b/src/components/form/Presentation/JoinablePartsField/index.tsx
new file mode 100644
index 00000000..24cedf52
--- /dev/null
+++ b/src/components/form/Presentation/JoinablePartsField/index.tsx
@@ -0,0 +1,59 @@
+import { Option } from '@components/form/Select/OptionItem';
+import { parts } from '@data/options';
+import { Chip } from '@sopt-makers/ui';
+
+interface JoinablePartsFieldProps {
+  value: Option[];
+  onChange: (newSelectedParts: Option[]) => void;
+}
+
+const JoinablePartsField = ({ value, onChange }: JoinablePartsFieldProps) => {
+  const handleClick = (selectedOption: Option) => {
+    const isValidValue = Array.isArray(value);
+    let updatedParts = isValidValue ? [...value] : [];
+
+    // 'all' 옵션을 클릭했을 때 처리
+    if (selectedOption.value === 'all') {
+      // 전체 옵션이 이미 선택되어 있으면 해제, 아니면 전체 선택
+      updatedParts = isValidValue && value.some(part => part.value === 'all') ? [] : parts;
+    } else {
+      // 개별 옵션을 선택할 때
+      if (isValidValue && value.some(part => part.value === selectedOption.value)) {
+        // 이미 선택된 항목이면 해제
+        updatedParts = updatedParts.filter(part => part.value !== selectedOption.value);
+      } else {
+        // 선택되지 않은 항목이면 추가
+        updatedParts.push(selectedOption);
+      }
+
+      // 개별 옵션 해제 시 전체 옵션도 해제
+      if (updatedParts.some(part => part.value === 'all') && updatedParts.length < parts.length) {
+        updatedParts = updatedParts.filter(part => part.value !== 'all');
+      }
+
+      // 모든 개별 파트가 선택되었으면 'all' 옵션도 활성화
+      if (updatedParts.length === parts.length - 1) {
+        updatedParts.push(parts[0]); // 'all'을 활성화
+      }
+    }
+
+    onChange(updatedParts);
+  };
+
+  return (
+    <>
+      {parts.map(part => (
+        <Chip
+          active={Array.isArray(value) && value.some(selected => selected.value === part.value)}
+          onClick={() => handleClick(part)}
+          key={part.value}
+          style={{ width: '80px' }}
+        >
+          {part.label}
+        </Chip>
+      ))}
+    </>
+  );
+};
+
+export default JoinablePartsField;
diff --git a/src/components/form/Presentation/index.tsx b/src/components/form/Presentation/index.tsx
index 360582cc..f90eab35 100644
--- a/src/components/form/Presentation/index.tsx
+++ b/src/components/form/Presentation/index.tsx
@@ -13,7 +13,6 @@ import TextInput from '../TextInput';
 import ImagePreview from './ImagePreview';
 import { MAX_FILE_SIZE } from '@type/form';
 import NeedMentor from '../CheckBox/NeedMentor';
-import { parts } from '@data/options';
 import { useRouter } from 'next/router';
 import { getPresignedUrl, uploadImage } from '@api/API_LEGACY/meeting';
 import { imageS3Bucket } from '@constants/url';
@@ -26,6 +25,7 @@ import { IconAlertCircle } from '@sopt-makers/icons';
 import { useDialog } from '@sopt-makers/ui';
 import sopt_schedule_tooltip from 'public/assets/images/sopt_schedule_tooltip.png';
 import BubblePointIcon from 'public/assets/svg/bubble_point.svg';
+import JoinablePartsField from '@components/form/Presentation/JoinablePartsField';
 
 interface PresentationProps {
   submitButtonLabel: React.ReactNode;
@@ -431,23 +431,24 @@ function Presentation({
                     };
                     return (
                       <STargetFieldWrapper>
-                        <FormController
-                          name="detail.joinableParts"
-                          defaultValue={[parts[0]]}
-                          render={({ field: { value, onChange, onBlur } }) => (
-                            <Select options={parts} value={value} onChange={onChange} onBlur={onBlur} multiple />
-                          )}
-                        ></FormController>
-
+                        <STargetChipContainer>
+                          <FormController
+                            name="detail.joinableParts"
+                            render={({ field: { value, onChange } }) => (
+                              <JoinablePartsField value={value} onChange={onChange} />
+                            )}
+                          ></FormController>
+                        </STargetChipContainer>
                         {/* 모집 인원 */}
-                        <div style={{ display: 'flex' }}>
-                          <SMemberCountWrapper>
+                        <SMemberCountWrapper>
+                          <div style={{ width: '119px' }}>
                             <FormController
                               name="capacity"
                               render={({ field, fieldState: { error } }) => (
                                 <TextInput
                                   type="number"
-                                  placeholder="인원"
+                                  placeholder="총 인원 수"
+                                  style={{ width: '95px', height: '48px', padding: '11px 16px' }}
                                   right={<span style={{ marginLeft: '10px', color: '#a9a9a9' }}>명</span>}
                                   required
                                   {...field}
@@ -457,7 +458,7 @@ function Presentation({
                                 />
                               )}
                             ></FormController>
-                          </SMemberCountWrapper>
+                          </div>
 
                           <FormController
                             name="detail.canJoinOnlyActiveGeneration"
@@ -473,7 +474,7 @@ function Presentation({
                               </SFormCheckBox>
                             )}
                           ></FormController>
-                        </div>
+                        </SMemberCountWrapper>
                       </STargetFieldWrapper>
                     );
                   }}
@@ -599,19 +600,18 @@ const SNeedMentorFieldWrapper = styled('div', {
 });
 const STargetFieldWrapper = styled('div', {
   display: 'flex',
-  alignItems: 'center',
-  gap: '10px',
+  flexDirection: 'column',
+  gap: '$16',
   marginBottom: '16px',
-  height: '52px',
-  '@tablet': {
-    height: '48px',
-  },
+});
 
-  '@media(max-width: 525px)': {
-    flexDirection: 'column',
-    alignItems: 'flex-start',
+const STargetChipContainer = styled('div', {
+  display: 'flex',
+  gap: '$10',
+  flexWrap: 'wrap',
 
-    marginBottom: '52px',
+  '@media(max-width: 430px)': {
+    maxWidth: '320px',
   },
 });
 
@@ -682,15 +682,17 @@ const SSectionCountBox = styled('div', {
 });
 
 const SMemberCountWrapper = styled('div', {
-  width: '94px',
-  height: '52px',
+  display: 'flex',
+  alignItems: 'center',
+  gap: '16px',
+  width: '227px',
+  height: '48px',
 });
 
 const SFormCheckBox = styled('div', {
   ...fontsObject.BODY_3_14_R,
   display: 'flex',
   alignItems: 'center',
-  marginLeft: '$16',
   color: '$gray300',
   variants: {
     active: {
diff --git a/src/components/page/meetingDetail/Information/InformationPanel.tsx b/src/components/page/meetingDetail/Information/InformationPanel.tsx
index 82565eab..cc2f5aec 100644
--- 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', boxShadow: 'none' }} active>
+                      {part}
+                    </Chip>
+                  ))}
+                  {generation}
                 </STarget>
               )}
               <SDescription>{handleContent(content)}</SDescription>
diff --git a/src/constants/option.ts b/src/constants/option.ts
index 9ff3b33b..d8b80408 100644
--- 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 = ['모집 전', '모집 중', '모집 마감', '활동 중', '활동 종료'];
 
diff --git a/src/data/options.ts b/src/data/options.ts
index 552110b3..791a381f 100644
--- a/src/data/options.ts
+++ b/src/data/options.ts
@@ -18,12 +18,11 @@ export const generationOptions = [
 ];
 
 export const parts = [
-  { label: '대상 파트', value: null },
   { label: '전체', value: 'all', order: 1 },
   { label: '기획', value: 'PM', order: 2 },
   { label: '디자인', value: 'DESIGN', order: 3 },
   { label: '웹', value: 'WEB', order: 4 },
-  { label: '안드로이드', value: 'ANDROID', order: 5 },
+  { label: 'Android', value: 'ANDROID', order: 5 },
   { label: 'iOS', value: 'IOS', order: 6 },
   { label: '서버', value: 'SERVER', order: 7 },
 ];