[FEATURE] 공통 탭 UI 수정

sopt-makers · Nov 27, 2024 · f004ef7 · f004ef7
2 parents 0a21736 + 1e643d6
commit f004ef7
Show file tree

Hide file tree

Showing 6 changed files with 2,062 additions and 2,766 deletions.
diff --git a/.pnp.cjs b/.pnp.cjs
diff --git a/src/components/org/OrgAdmin/CommonSection/BrandingSubColor.tsx b/src/components/org/OrgAdmin/CommonSection/BrandingSubColor.tsx
@@ -43,20 +43,17 @@ const BrandingSubColor = ({
 
   return (
     <StInputBox>
-      <StSubColorTitle as={'p'}>
-        <label htmlFor="sub-color">서브 컬러 (강조 그레이 컬러)</label>
+      <StColorWrapper>
         <StInfoButton onClick={handleInfoToggle}>
           <IconInfoCircle />
         </StInfoButton>
-      </StSubColorTitle>
-      <StSubColorDescription>
-        강조하고 싶은 박스의 그레이 컬러를 지정해주세요.
-      </StSubColorDescription>
-      <StColorWrapper>
         <StInput
           {...register('subColor', {
             required: true && VALIDATION_CHECK.required.errorText,
           })}
+          required
+          labelText="서브 컬러 (강조 그레이 컬러)"
+          descriptionText="강조하고 싶은 박스의 그레이 컬러를 지정해주세요."
           id="sub-color"
           type="text"
           maxLength={9}

diff --git a/src/components/org/OrgAdmin/CommonSection/ColorInputField.tsx b/src/components/org/OrgAdmin/CommonSection/ColorInputField.tsx
@@ -2,7 +2,7 @@ import { useFormContext } from 'react-hook-form';
 
 import { VALIDATION_CHECK } from '@/utils/org';
 
-import { StInput, StInputBox, StInputLabel } from '../style';
+import { StInput } from '../style';
 import { StColorPreview, StColorWrapper } from './style';
 import { expandHexColor } from './utils';
 
@@ -11,45 +11,42 @@ interface ColorInputFieldProps {
   id: string;
   colorValue: string;
   onSetColorValue: (value: string) => void;
-  error?: string;
 }
 
 const ColorInputField = ({
   label,
   id,
   colorValue,
   onSetColorValue,
-  error,
 }: ColorInputFieldProps) => {
   const {
     register,
     formState: { errors },
   } = useFormContext();
 
   return (
-    <StInputBox>
-      <StInputLabel htmlFor={id}>{label}</StInputLabel>
-      <StColorWrapper>
-        <StInput
-          {...register(id, {
-            required: true && VALIDATION_CHECK.required.errorText,
-          })}
-          id={id}
-          type="text"
-          maxLength={9}
-          placeholder="ex. #ffffff"
-          value={colorValue}
-          onChange={(e) => onSetColorValue(e.target.value)}
-          isError={errors[id]?.message != undefined}
-          errorMessage={errors[id]?.message as string}
-        />
-        <StColorPreview
-          type="color"
-          value={expandHexColor(colorValue)}
-          onChange={(e) => onSetColorValue(e.target.value)}
-        />
-      </StColorWrapper>
-    </StInputBox>
+    <StColorWrapper>
+      <StInput
+        {...register(id, {
+          required: true && VALIDATION_CHECK.required.errorText,
+        })}
+        required
+        labelText={label}
+        id={id}
+        type="text"
+        maxLength={9}
+        placeholder="ex. #ffffff"
+        value={colorValue}
+        onChange={(e) => onSetColorValue(e.target.value)}
+        isError={errors[id]?.message != undefined}
+        errorMessage={errors[id]?.message as string}
+      />
+      <StColorPreview
+        type="color"
+        value={expandHexColor(colorValue)}
+        onChange={(e) => onSetColorValue(e.target.value)}
+      />
+    </StColorWrapper>
   );
 };
 

diff --git a/src/components/org/OrgAdmin/CommonSection/GenerationInformation.tsx b/src/components/org/OrgAdmin/CommonSection/GenerationInformation.tsx
@@ -42,6 +42,7 @@ const GenerationInformation = () => {
               message: VALIDATION_CHECK.generation.wrongLengthErrorText,
             },
           })}
+          required
           labelText="기수"
           id="generation"
           type="text"
@@ -57,6 +58,7 @@ const GenerationInformation = () => {
               message: VALIDATION_CHECK.soptName.wrongLengthErrorText(),
             },
           })}
+          required
           value={'AND SOPT'}
           labelText="기수명"
           id="sopt-name"

diff --git a/src/components/org/OrgAdmin/CommonSection/RecruitSchedule.tsx b/src/components/org/OrgAdmin/CommonSection/RecruitSchedule.tsx
@@ -1,169 +1,97 @@
-import { Radio } from '@sopt-makers/ui';
+import { Chip } from '@sopt-makers/ui';
+import { useState } from 'react';
 import { useFormContext } from 'react-hook-form';
 
-import { VALIDATION_CHECK } from '@/utils/org';
-
 import {
-  StErrorMessage,
+  StDescription,
   StInput,
-  StInputBox,
-  StInputLabel,
-  StInputWrapper,
   StTitle,
   StTitleWrapper,
   StWrapper,
 } from '../style';
-import {
-  StDateWrapper,
-  StRadioBox,
-  StRadioLabel,
-  StRadioWrapper,
-} from './style';
+import { StDateWrapper, StRadioWrapper } from './style';
 
-const RecruitSchedule = () => {
+interface ScheduleInputProps {
+  id: string;
+  label: string;
+  value: string;
+}
+
+const ScheduleInput = ({ id, label, value }: ScheduleInputProps) => {
   const {
     register,
     formState: { errors },
   } = useFormContext();
 
+  return (
+    <StInput
+      {...register(id)}
+      required
+      labelText={label}
+      id={id}
+      type="datetime-local"
+      value={value}
+      hasValue={!!value}
+      isError={!!errors[id]?.message}
+      errorMessage={errors[id]?.message as string}
+    />
+  );
+};
+
+const RecruitSchedule = () => {
+  const [group, setGroup] = useState<'OB' | 'YB'>('OB');
+
   return (
     <StWrapper>
       <StTitleWrapper>
         <StTitle>모집 일정</StTitle>
+        <StDescription>
+          입력된 모집 일정에 맞춰 ‘지원하기’ 버튼이 활성화돼요.
+        </StDescription>
       </StTitleWrapper>
-      <StInputWrapper>
-        <StInputLabel>모집유형</StInputLabel>
-        <StRadioWrapper>
-          <StRadioBox>
-            <Radio
-              {...register('group', {
-                required: true && VALIDATION_CHECK.required.errorText,
-              })}
-              type="radio"
-              name="group"
-              id="ob"
-              checked
-            />
-            <StRadioLabel htmlFor="ob">OB</StRadioLabel>
-          </StRadioBox>
-          <StRadioBox>
-            <Radio
-              {...register('group', {
-                required: true && VALIDATION_CHECK.required.errorText,
-              })}
-              type="radio"
-              name="group"
-              id="yb"
-            />
-            <StRadioLabel htmlFor="yb">YB</StRadioLabel>
-          </StRadioBox>
-          <StErrorMessage>
-            <>{errors.group?.message}</>
-          </StErrorMessage>
-        </StRadioWrapper>
-      </StInputWrapper>
+      <StRadioWrapper>
+        <Chip active={group === 'OB'} onClick={() => setGroup('OB')}>
+          OB
+        </Chip>
+        <Chip active={group === 'YB'} onClick={() => setGroup('YB')}>
+          YB
+        </Chip>
+      </StRadioWrapper>
       <StDateWrapper>
-        <StInputWrapper>
-          <StInputBox>
-            <StInputLabel htmlFor="application-start">
-              서류 접수 시작
-            </StInputLabel>
-            <StInput
-              {...register('applicationStart', {
-                required: true && VALIDATION_CHECK.required.errorText,
-              })}
-              id="application-start"
-              type="datetime-local"
-              value={''}
-              // value={'2022-10-12T12:00'}
-              hasValue={false}
-              isError={errors.applicationStart?.message != undefined}
-              errorMessage={errors.applicationStart?.message as string}
-            />
-          </StInputBox>
-          <StInputBox>
-            <StInputLabel htmlFor="application-end">
-              서류 접수 마감
-            </StInputLabel>
-            <StInput
-              {...register('applicationEnd', {
-                required: true && VALIDATION_CHECK.required.errorText,
-              })}
-              value={'2022-10-12T12:00'}
-              id="application-end"
-              type="datetime-local"
-              hasValue={true}
-              isError={errors.applicationEnd?.message != undefined}
-              errorMessage={errors.applicationEnd?.message as string}
-            />
-          </StInputBox>
-          <StInputBox>
-            <StInputLabel htmlFor="application-result">
-              서류 결과 발표
-            </StInputLabel>
-            <StInput
-              {...register('applicationResult', {
-                required: true && VALIDATION_CHECK.required.errorText,
-              })}
-              value={'2022-10-12T12:00'}
-              id="application-result"
-              type="datetime-local"
-              hasValue={false}
-              isError={errors.applicationResult?.message != undefined}
-              errorMessage={errors.applicationResult?.message as string}
-            />
-          </StInputBox>
-        </StInputWrapper>
+        <ScheduleInput
+          id="application-start"
+          label={`${group} 서류 접수 시작`}
+          value={''}
+        />
+        <ScheduleInput
+          id="application-end"
+          label={`${group} 서류 접수 마감`}
+          value={''}
+        />
+        <ScheduleInput
+          id="application-result"
+          label={`${group} 서류 결과 발표`}
+          value={''}
+        />
       </StDateWrapper>
       <StDateWrapper>
-        <StInputWrapper>
-          <StInputBox>
-            <StInputLabel htmlFor="interview-start">면접 시작</StInputLabel>
-            <StInput
-              {...register('interviewStart', {
-                required: true && VALIDATION_CHECK.required.errorText,
-              })}
-              value={'2022-10-12T12:00'}
-              id="interview-start"
-              type="datetime-local"
-              hasValue={false}
-              isError={errors.interviewStart?.message != undefined}
-              errorMessage={errors.interviewStart?.message as string}
-            />
-          </StInputBox>
-          <StInputBox>
-            <StInputLabel htmlFor="interview-end">면접 마감</StInputLabel>
-            <StInput
-              {...register('interviewEnd', {
-                required: true && VALIDATION_CHECK.required.errorText,
-              })}
-              value={'2022-10-12T12:00'}
-              id="interview-end"
-              type="datetime-local"
-              hasValue={false}
-              isError={errors.interviewEnd?.message != undefined}
-              errorMessage={errors.interviewEnd?.message as string}
-            />
-          </StInputBox>
-        </StInputWrapper>
+        <ScheduleInput
+          id="interview-start"
+          label={`${group} 면접 시작`}
+          value={''}
+        />
+        <ScheduleInput
+          id="interview-end"
+          label={`${group} 면접 마감`}
+          value={''}
+        />
       </StDateWrapper>
       <StDateWrapper>
-        <StInputWrapper>
-          <StInputBox>
-            <StInputLabel htmlFor="final-result">최종 결과 발표</StInputLabel>
-            <StInput
-              {...register('finalResult', {
-                required: true && VALIDATION_CHECK.required.errorText,
-              })}
-              value={'2022-10-12T12:00'}
-              id="final-result"
-              type="datetime-local"
-              hasValue={false}
-              isError={errors.finalResult?.message != undefined}
-              errorMessage={errors.finalResult?.message as string}
-            />
-          </StInputBox>
-        </StInputWrapper>
+        <ScheduleInput
+          id="final-result"
+          label={`${group} 최종 결과 발표`}
+          value={''}
+        />
       </StDateWrapper>
     </StWrapper>
   );

diff --git a/src/components/org/OrgAdmin/CommonSection/style.ts b/src/components/org/OrgAdmin/CommonSection/style.ts
@@ -4,12 +4,12 @@ import { fontsObject } from '@sopt-makers/fonts';
 
 import zIndex from '@/utils/zIndex';
 
-import { StInputLabel } from '../style';
+import { StInputLabel, StInputWrapper } from '../style';
 
 export const StRadioWrapper = styled.div`
   display: flex;
   align-items: center;
-  gap: 20px;
+  gap: 6px;
   margin-bottom: 40px;
 
   input[type='radio'] {
@@ -31,12 +31,14 @@ export const StRadioLabel = styled.label`
   cursor: pointer;
 `;
 
-export const StDateWrapper = styled.div`
+export const StDateWrapper = styled(StInputWrapper)`
   margin-bottom: 40px;
 `;
 
 export const StColorWrapper = styled.div`
+  position: relative;
   display: flex;
+  align-items: flex-end;
   gap: 10px;
 `;
 
@@ -61,6 +63,10 @@ export const StColorPreview = styled.input`
 
 export const StInfoButton = styled.button`
   ${fontsObject.LABEL_3_14_SB};
+
+  position: absolute;
+  top: 0px;
+  left: 175px;
   vertical-align: middle;
   width: 16px;
   height: 16px;