From b0f67c43e808df578eea1a472d8a803928d44a95 Mon Sep 17 00:00:00 2001
From: Kong <155794105+ocahs9@users.noreply.github.com>
Date: Sun, 13 Oct 2024 18:50:48 +0900
Subject: [PATCH] =?UTF-8?q?Chip=20=EB=B6=80=EB=B6=84=EB=A7=8C=20revert?=
 =?UTF-8?q?=ED=95=98=EA=B3=A0=20=EB=B3=80=EA=B2=BD=EC=82=AC=ED=95=AD?=
 =?UTF-8?q?=EB=93=A4=EC=9D=80=20=EB=B0=98=EC=98=81=20(#929)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Revert "모임 개설 대상 파트 Chip 으로 변경 (#914)"

This reverts commit d185a0857ef8a7c42e87399e9303c806dafc9069.

* Revert "Input 높이 및 모집 대상 chip 변경 (#924)"

This reverts commit 02ee18edef16957a0976e79005bf68c89bfe7487.
---
 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       | 11 ++--
 .../Information/InformationPanel.tsx          | 10 +---
 src/constants/option.ts                       |  4 +-
 src/data/options.ts                           |  9 +--
 8 files changed, 44 insertions(+), 99 deletions(-)
 delete mode 100644 src/components/form/Presentation/JoinablePartsField/index.tsx

diff --git a/pages/post/index.tsx b/pages/post/index.tsx
index 3f5d6b18..b01aeb08 100644
--- a/pages/post/index.tsx
+++ b/pages/post/index.tsx
@@ -135,6 +135,8 @@ 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
deleted file mode 100644
index 24cedf52..00000000
--- a/src/components/form/Presentation/JoinablePartsField/index.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-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 91609c67..360582cc 100644
--- a/src/components/form/Presentation/index.tsx
+++ b/src/components/form/Presentation/index.tsx
@@ -13,6 +13,7 @@ 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';
@@ -21,7 +22,6 @@ 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';
@@ -431,23 +431,23 @@ function Presentation({
                     };
                     return (
                       <STargetFieldWrapper>
-                        <STargetChipContainer>
-                          <FormController
-                            name="detail.joinableParts"
-                            render={({ field: { value, onChange } }) => (
-                              <JoinablePartsField value={value} onChange={onChange} />
-                            )}
-                          ></FormController>
-                        </STargetChipContainer>
+                        <FormController
+                          name="detail.joinableParts"
+                          defaultValue={[parts[0]]}
+                          render={({ field: { value, onChange, onBlur } }) => (
+                            <Select options={parts} value={value} onChange={onChange} onBlur={onBlur} multiple />
+                          )}
+                        ></FormController>
+
                         {/* 모집 인원 */}
-                        <div style={{ display: 'flex', alignItems: 'center' }}>
+                        <div style={{ display: 'flex' }}>
                           <SMemberCountWrapper>
                             <FormController
                               name="capacity"
                               render={({ field, fieldState: { error } }) => (
                                 <TextInput
                                   type="number"
-                                  placeholder="총 인원 수"
+                                  placeholder="인원"
                                   right={<span style={{ marginLeft: '10px', color: '#a9a9a9' }}>명</span>}
                                   required
                                   {...field}
@@ -599,18 +599,19 @@ const SNeedMentorFieldWrapper = styled('div', {
 });
 const STargetFieldWrapper = styled('div', {
   display: 'flex',
-  flexDirection: 'column',
-  gap: '$16',
+  alignItems: 'center',
+  gap: '10px',
   marginBottom: '16px',
-});
+  height: '52px',
+  '@tablet': {
+    height: '48px',
+  },
 
-const STargetChipContainer = styled('div', {
-  display: 'flex',
-  gap: '$10',
-  flexWrap: 'wrap',
+  '@media(max-width: 525px)': {
+    flexDirection: 'column',
+    alignItems: 'flex-start',
 
-  '@media(max-width: 430px)': {
-    maxWidth: '320px',
+    marginBottom: '52px',
   },
 });
 
@@ -681,8 +682,8 @@ const SSectionCountBox = styled('div', {
 });
 
 const SMemberCountWrapper = styled('div', {
-  width: '119px',
-  height: '48px',
+  width: '94px',
+  height: '52px',
 });
 
 const SFormCheckBox = styled('div', {
diff --git a/src/components/form/TableOfContents/index.tsx b/src/components/form/TableOfContents/index.tsx
index b16f1249..9113c510 100644
--- a/src/components/form/TableOfContents/index.tsx
+++ b/src/components/form/TableOfContents/index.tsx
@@ -16,8 +16,11 @@ 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 960611e0..e0b4cb29 100644
--- a/src/components/form/TextInput/index.tsx
+++ b/src/components/form/TextInput/index.tsx
@@ -46,22 +46,23 @@ const SContainer = styled('div', {
 const SInputWrapper = styled('div', {
   display: 'flex',
   alignItems: 'center',
-
-  // height: '$48',
 });
 const SInput = styled('input', {
   width: '100%',
-  padding: '11px 16px',
+  padding: '18px 20px',
   display: 'flex',
   alignItems: 'center',
-  fontAg: '16_medium_150',
-  lineHeight: '26px',
+  fontAg: '16_medium_100',
   color: '$gray10',
   background: '$gray800',
   borderRadius: 10,
   '&::placeholder': {
     color: '$gray300',
   },
+
+  '@tablet': {
+    padding: '16px',
+  },
 });
 const STextCount = styled('span', {
   width: '100%',
diff --git a/src/components/page/meetingDetail/Information/InformationPanel.tsx b/src/components/page/meetingDetail/Information/InformationPanel.tsx
index cc2f5aec..82565eab 100644
--- a/src/components/page/meetingDetail/Information/InformationPanel.tsx
+++ b/src/components/page/meetingDetail/Information/InformationPanel.tsx
@@ -8,7 +8,6 @@ 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;
@@ -89,12 +88,9 @@ const InformationPanel = ({ detailData }: InformationPanelProps) => {
               <STitle>{title}</STitle>
               {title === '모집 대상' && (
                 <STarget>
-                  {partList?.map(part => (
-                    <Chip key={part} style={{ width: '80px', boxShadow: 'none' }} active>
-                      {part}
-                    </Chip>
-                  ))}
-                  {generation}
+                  대상 기수 : {generation}
+                  <br />
+                  대상 파트 : {partList?.join(', ')}
                 </STarget>
               )}
               <SDescription>{handleContent(content)}</SDescription>
diff --git a/src/constants/option.ts b/src/constants/option.ts
index d8b80408..9ff3b33b 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 = ['기획', '디자인', 'Android', 'iOS', '웹', '서버'];
+export const PART_OPTIONS = ['기획', '디자인', '안드로이드', '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 11939e43..552110b3 100644
--- a/src/data/options.ts
+++ b/src/data/options.ts
@@ -18,11 +18,12 @@ export const generationOptions = [
 ];
 
 export const parts = [
-  { label: '전체파트', value: 'all', order: 1 },
+  { label: '대상 파트', value: null },
+  { label: '전체', value: 'all', order: 1 },
   { label: '기획', value: 'PM', order: 2 },
   { label: '디자인', value: 'DESIGN', order: 3 },
-  { label: '서버', value: 'SERVER', order: 7 },
-  { label: 'iOS', value: 'IOS', order: 6 },
-  { label: 'Android', value: 'ANDROID', order: 5 },
   { label: '웹', value: 'WEB', order: 4 },
+  { label: '안드로이드', value: 'ANDROID', order: 5 },
+  { label: 'iOS', value: 'IOS', order: 6 },
+  { label: '서버', value: 'SERVER', order: 7 },
 ];