From d185a0857ef8a7c42e87399e9303c806dafc9069 Mon Sep 17 00:00:00 2001
From: Lee jin <83453646+j-nary@users.noreply.github.com>
Date: Wed, 9 Oct 2024 20:49:54 +0900
Subject: [PATCH] =?UTF-8?q?=EB=AA=A8=EC=9E=84=20=EA=B0=9C=EC=84=A4=20?=
 =?UTF-8?q?=EB=8C=80=EC=83=81=20=ED=8C=8C=ED=8A=B8=20Chip=20=EC=9C=BC?=
 =?UTF-8?q?=EB=A1=9C=20=EB=B3=80=EA=B2=BD=20(#914)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* test: 임시로 Chip 구현 (MDS 문의 필요)

* feat: chip 구현 및 반응형 작업

* feat: 전체파트 클릭 로직 + MDS Chip 연결

* docs: 불필요한 파일 삭제

* docs: 불필요한 코드 삭제

* fix: 개별 옵션 해제 시 전체파트 해제 로직 추가

* refactor: 코드리뷰 반영
---
 pages/post/index.tsx                          |  2 -
 .../Presentation/JoinablePartsField/index.tsx | 59 +++++++++++++++++++
 src/components/form/Presentation/index.tsx    | 45 +++++++-------
 src/components/form/TableOfContents/index.tsx |  3 -
 src/components/form/TextInput/index.tsx       |  2 +-
 src/data/options.ts                           |  9 ++-
 6 files changed, 86 insertions(+), 34 deletions(-)
 create mode 100644 src/components/form/Presentation/JoinablePartsField/index.tsx

diff --git a/pages/post/index.tsx b/pages/post/index.tsx
index b01aeb08..3f5d6b18 100644
--- a/pages/post/index.tsx
+++ b/pages/post/index.tsx
@@ -135,8 +135,6 @@ export default function PostPage() {
       !!comment
   );
 
-  console.log({ comments });
-
   const handleClickComment = () => {
     const refCurrent = commentRef.current;
     if (refCurrent) {
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 4ad2a2cc..22a66f68 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';
@@ -22,6 +21,7 @@ import { fontsObject } from '@sopt-makers/fonts';
 import { colors } from '@sopt-makers/colors';
 import CheckSelectedIcon from '@assets/svg/checkBox/form_selected.svg';
 import CheckUnselectedIcon from '@assets/svg/checkBox/form_unselected.svg';
+import JoinablePartsField from '@components/form/Presentation/JoinablePartsField';
 import { IconAlertCircle } from '@sopt-makers/icons';
 import { useDialog } from '@sopt-makers/ui';
 import sopt_schedule_tooltip from 'public/assets/images/sopt_schedule_tooltip.png';
@@ -424,23 +424,23 @@ 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' }}>
+                        <div style={{ display: 'flex', alignItems: 'center' }}>
                           <SMemberCountWrapper>
                             <FormController
                               name="capacity"
                               render={({ field, fieldState: { error } }) => (
                                 <TextInput
                                   type="number"
-                                  placeholder="인원"
+                                  placeholder="총 인원 수"
                                   right={<span style={{ marginLeft: '10px', color: '#a9a9a9' }}>명</span>}
                                   required
                                   {...field}
@@ -592,19 +592,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',
   },
 });
 
@@ -675,8 +674,8 @@ const SSectionCountBox = styled('div', {
 });
 
 const SMemberCountWrapper = styled('div', {
-  width: '94px',
-  height: '52px',
+  width: '119px',
+  height: '48px',
 });
 
 const SFormCheckBox = styled('div', {
diff --git a/src/components/form/TableOfContents/index.tsx b/src/components/form/TableOfContents/index.tsx
index 9113c510..b16f1249 100644
--- a/src/components/form/TableOfContents/index.tsx
+++ b/src/components/form/TableOfContents/index.tsx
@@ -16,11 +16,8 @@ function TableOfContents({ label }: TableOfContentsProps) {
   const isTitleValid = form.title && !errors.title;
 
   const isCategoryValid = form.category?.value && !errors.category;
-  // console.log('카테고리', '' + form.category?.value, isCategoryValid);
   const isImageValid = form.files && form.files.length > 0;
-  console.log('이미지', isImageValid);
   const isDescriptionValid = form.detail && form.detail.desc && !errors.detail;
-  console.log('모임소개', isImageValid);
   const isApplicationDateValid = form.startDate && form.endDate && !errors.startDate && !errors.endDate;
   const isTargetValid =
     form.detail &&
diff --git a/src/components/form/TextInput/index.tsx b/src/components/form/TextInput/index.tsx
index e0b4cb29..09198d5d 100644
--- a/src/components/form/TextInput/index.tsx
+++ b/src/components/form/TextInput/index.tsx
@@ -49,7 +49,7 @@ const SInputWrapper = styled('div', {
 });
 const SInput = styled('input', {
   width: '100%',
-  padding: '18px 20px',
+  padding: '11px 16px',
   display: 'flex',
   alignItems: 'center',
   fontAg: '16_medium_100',
diff --git a/src/data/options.ts b/src/data/options.ts
index 552110b3..11939e43 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: 'all', order: 1 },
   { label: '기획', value: 'PM', order: 2 },
   { label: '디자인', value: 'DESIGN', order: 3 },
-  { label: '웹', value: 'WEB', order: 4 },
-  { label: '안드로이드', value: 'ANDROID', order: 5 },
-  { label: 'iOS', value: 'IOS', order: 6 },
   { label: '서버', value: 'SERVER', order: 7 },
+  { label: 'iOS', value: 'IOS', order: 6 },
+  { label: 'Android', value: 'ANDROID', order: 5 },
+  { label: '웹', value: 'WEB', order: 4 },
 ];