feat: intro part org root에서 관리

sopt-makers · Dec 12, 2024 · e934127 · e934127
1 parent 60ff010
commit e934127
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 19 deletions.
diff --git a/src/components/org/OrgAdmin/HomeSection/HomeSection.tsx b/src/components/org/OrgAdmin/HomeSection/HomeSection.tsx
@@ -7,15 +7,27 @@ import {
   StContainer,
   StWrapper,
 } from '@/components/org/OrgAdmin/HomeSection/style';
+import { PART_KO } from '@/utils/org';
 
-const HomeSection = () => {
+type HomeSectionProps = {
+  selectedIntroPart: PART_KO;
+  onChangeIntroPart: (part: PART_KO) => void;
+};
+
+const HomeSection = ({
+  selectedIntroPart,
+  onChangeIntroPart,
+}: HomeSectionProps) => {
   const { data } = useAdminInfoQuery();
 
   return (
     <StContainer>
       <ToastProvider>
         <StWrapper>
-          <PartIntroSection />
+          <PartIntroSection
+            selectedPart={selectedIntroPart}
+            onChangePart={onChangeIntroPart}
+          />
         </StWrapper>
         <NewsSection latestNews={data?.latestNews} />
       </ToastProvider>

diff --git a/src/components/org/OrgAdmin/HomeSection/PartIntroSection.tsx b/src/components/org/OrgAdmin/HomeSection/PartIntroSection.tsx
@@ -2,7 +2,6 @@
 
 import { IconInfoCircle } from '@sopt-makers/icons';
 import { Chip, TextArea } from '@sopt-makers/ui';
-import { useState } from 'react';
 import { useFormContext } from 'react-hook-form';
 
 import { PARTS } from '@/components/org/OrgAdmin/HomeSection/constant';
@@ -14,15 +13,21 @@ import {
   StTextAreaContainer,
   StTitleWithIcon,
 } from '@/components/org/OrgAdmin/HomeSection/style';
+import { PART_KO } from '@/utils/org';
 
 import RequiredIcon from '../assets/RequiredIcon';
 import Modal from '../common/Modal';
 import useModal from '../common/Modal/useModal';
 
-type Part = '기획' | '디자인' | '안드로이드' | 'IOS' | '웹' | '서버';
+type PartIntroSectionProps = {
+  selectedPart: PART_KO;
+  onChangePart: (id: PART_KO) => void;
+};
 
-const PartIntroSection = () => {
-  const [selectedChip, setSelectedChip] = useState<Part>('기획');
+const PartIntroSection = ({
+  selectedPart,
+  onChangePart,
+}: PartIntroSectionProps) => {
   const { isInfoVisible, onInfoToggle } = useModal();
 
   const {
@@ -33,10 +38,10 @@ const PartIntroSection = () => {
     formState: { errors },
   } = useFormContext();
 
-  const getActiveStatus = (id: Part) => id === selectedChip;
+  const getActiveStatus = (id: PART_KO) => id === selectedPart;
 
-  const handleSelectChip = (id: Part) => {
-    setSelectedChip(id);
+  const handleSelectChip = (id: PART_KO) => {
+    onChangePart(id);
   };
 
   const handleValidation = (field: string, value: string) => {
@@ -75,19 +80,19 @@ const PartIntroSection = () => {
         </StChipsContainer>
 
         <TextArea
-          key={selectedChip}
-          {...register(`partIntroduction${selectedChip}`, {
+          key={selectedPart}
+          {...register(`partIntroduction${selectedPart}`, {
             required: '필수 항목이에요.',
           })}
           onChange={(e) =>
             handleValidation(
-              `partIntroduction${selectedChip}`,
+              `partIntroduction${selectedPart}`,
               e.currentTarget.value,
             )
           }
-          isError={!!errors[`partIntroduction${selectedChip}`]}
+          isError={!!errors[`partIntroduction${selectedPart}`]}
           errorMessage={
-            errors[`partIntroduction${selectedChip}`]?.message as string
+            errors[`partIntroduction${selectedPart}`]?.message as string
           }
           required
           fixedHeight={230}

diff --git a/src/components/org/OrgAdmin/HomeSection/constant.ts b/src/components/org/OrgAdmin/HomeSection/constant.ts
@@ -10,7 +10,7 @@ export const PARTS = [
   '기획',
   '디자인',
   '안드로이드',
-  'IOS',
+  'iOS',
   '웹',
   '서버',
 ] as const;

diff --git a/src/components/org/OrgAdmin/index.tsx b/src/components/org/OrgAdmin/index.tsx
@@ -32,6 +32,7 @@ function OrgAdmin() {
   const [group, setGroup] = useState<Group>('OB');
   const [curriculumPart, setCurriculumPart] = useState<PART_KO>('기획');
   const [fnaPart, setFnaPart] = useState<PART_KO>('기획');
+  const [introPart, setIntroPart] = useState<PART_KO>('기획');
 
   const methods = useForm({ mode: 'onBlur' });
   const { handleSubmit, getValues } = methods;
@@ -61,6 +62,10 @@ function OrgAdmin() {
     setSelectedPart(part);
   };
 
+  const onChangeIntroPart = (part: PART_KO) => {
+    setIntroPart(part);
+  };
+
   const validateSchedule = () => {
     const validateGroup = (groupKey: Group) => {
       const groupFields = SCHEDULE_FIELDS[groupKey];
@@ -123,9 +128,12 @@ function OrgAdmin() {
   };
 
   const validatePartIntro = () => {
-    if (PARTS.some((part) => getValues(`partIntroduction${part}`) === '')) {
-      setSelectedPart('홈');
-      return false;
+    for (const part of PARTS) {
+      if (getValues(`partIntroduction${part}`) === '') {
+        setIntroPart(part);
+        setSelectedPart('홈');
+        return false;
+      }
     }
 
     return true;
@@ -494,7 +502,10 @@ function OrgAdmin() {
           ) : selectedPart === '소개' ? (
             <AboutSection />
           ) : selectedPart === '홈' ? (
-            <HomeSection />
+            <HomeSection
+              selectedIntroPart={introPart}
+              onChangeIntroPart={onChangeIntroPart}
+            />
           ) : (
             <RecruitSection
               curriculumPart={curriculumPart}