Chip 부분만 revert하고 변경사항들은 반영 (#929)

* Revert "모임 개설 대상 파트 Chip 으로 변경 (#914)" This reverts commit d185a08. * Revert "Input 높이 및 모집 대상 chip 변경 (#924)" This reverts commit 02ee18e.
sopt-makers · Oct 13, 2024 · b0f67c4 · b0f67c4
1 parent 4ee2500
commit b0f67c4
Show file tree

Hide file tree

Showing 8 changed files with 44 additions and 99 deletions.
diff --git 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
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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 },
 ];