[FEAUTRE] 공홈 어드민 소개 탭 hook form 연결 (#139)

* install: mds ui 버전업 * feat: curriculum hook form 연결 * feat: ExecInfo 컴포넌트 분리 및 hook form 연결 * feat: HeaderBanner 및 CoreValue hook form 연결 * fix: mds 변경으로 인한 빌드에러 픽스 * fix: 코드리뷰 반영 * fix: ExecType 선언 * install: mds ui 업데이트 * install: mds textarea patch update * feat: 지원하기 탭 hook form 연결 * delete: conflict
sopt-makers · Nov 27, 2024 · 0a21736 · 0a21736
1 parent 95f6f98
commit 0a21736
Show file tree

Hide file tree

Showing 13 changed files with 215 additions and 869 deletions.
diff --git a/package.json b/package.json
@@ -20,7 +20,7 @@
     "@sopt-makers/colors": "^3.0.1",
     "@sopt-makers/fonts": "^2.0.1",
     "@sopt-makers/icons": "^1.0.4",
-    "@sopt-makers/ui": "^2.4.4",
+    "@sopt-makers/ui": "^2.7.13",
     "axios": "^1.3.4",
     "dayjs": "^1.11.9",
     "eslint-config-next": "^14.1.4",

diff --git a/src/components/org/OrgAdmin/AboutSection/CoreValue/index.tsx b/src/components/org/OrgAdmin/AboutSection/CoreValue/index.tsx
@@ -12,6 +12,7 @@ import { StInputBox, StInputWrapper, StValueWrapper } from './style';
 
 const CoreValue = () => {
   const method = useFormContext();
+  const { register } = method;
   return (
     <StWrapper>
       <StTitle>핵심 가치</StTitle>
@@ -21,14 +22,18 @@ const CoreValue = () => {
         <StInputWrapper>
           <MyDropzone
             method={method}
-            label="aboutCoreValue1"
+            label={'coreValue.0.imageFileName'}
             width="224px"
             height="190px"
           />
           <StInputBox>
-            <StInput value={'용기'} labelText="가치" placeholder="ex. 용기" />
             <StInput
-              value={'어쩌구저쩌구'}
+              {...register('coreValue.0.value')}
+              labelText="가치"
+              placeholder="ex. 용기"
+            />
+            <StInput
+              {...register('coreValue.0.description')}
               labelText="가치 설명"
               descriptionText="호버 시, 보이는 문구예요."
               placeholder="ex. 새로운 도전을 위해 과감히 용기내는 사람"
@@ -42,14 +47,18 @@ const CoreValue = () => {
         <StInputWrapper>
           <MyDropzone
             method={method}
-            label="aboutCoreValue2"
+            label={'coreValue.1.imageFileName'}
             width="224px"
             height="190px"
           />
           <StInputBox>
-            <StInput value={'모립'} labelText="가치" placeholder="ex. 몰입" />
             <StInput
-              value={'어쩌구저쩌구'}
+              {...register('coreValue.1.value')}
+              labelText="가치"
+              placeholder="ex. 몰입"
+            />
+            <StInput
+              {...register('coreValue.1.description')}
               labelText="가치 설명"
               descriptionText="호버 시, 보이는 문구예요."
               placeholder="ex. 포기하지 않고 깊이 몰입하는 사람"
@@ -63,14 +72,18 @@ const CoreValue = () => {
         <StInputWrapper>
           <MyDropzone
             method={method}
-            label="aboutCoreValue1"
+            label={'coreValue.2.imageFileName'}
             width="224px"
             height="190px"
           />
           <StInputBox>
-            <StInput value={'화합'} labelText="가치" placeholder="ex. 화합" />
             <StInput
-              value={'어쩌구저쩌구'}
+              {...register('coreValue.2.value')}
+              labelText="가치"
+              placeholder="ex. 화합"
+            />
+            <StInput
+              {...register('coreValue.2.description')}
               labelText="가치 설명"
               descriptionText="호버 시, 보이는 문구예요."
               placeholder="ex. 서로를 배려하며 함께 화합하는 사람"

diff --git a/src/components/org/OrgAdmin/AboutSection/Curriculum/index.tsx b/src/components/org/OrgAdmin/AboutSection/Curriculum/index.tsx
@@ -1,34 +1,29 @@
 import { useState } from 'react';
+import { useFormContext } from 'react-hook-form';
 
 import { PART_LIST } from '@/utils/org';
 
 import PartCategory from '../../PartCategory';
 import { StInput, StTitle, StWrapper } from '../style';
 import { StContentWrapper, StItem, StList, StWeek } from './style';
 
+const CURRICULUM = PART_LIST.reduce(
+  (acc, part) => {
+    acc[part] = Array.from({ length: 8 });
+    return acc;
+  },
+  {} as Record<string, string[]>,
+);
+
 const Curriculum = () => {
-  const initialCurriculum = PART_LIST.reduce(
-    (acc, part) => {
-      acc[part] = Array.from({ length: 8 }, () => '');
-      return acc;
-    },
-    {} as Record<string, string[]>,
-  );
+  const { register } = useFormContext();
 
   const [selectedPart, setSelectedPart] = useState('기획');
-  const [curriculum, setCurriculum] = useState(initialCurriculum);
 
   const handleSetSelectedPart = (value: string) => {
     setSelectedPart(value);
   };
 
-  const handleChangeInput = (idx: number, value: string) => {
-    setCurriculum((prev) => ({
-      ...prev,
-      [selectedPart]: prev[selectedPart].map((v, i) => (i === idx ? value : v)),
-    }));
-  };
-
   return (
     <StWrapper>
       <StTitle>파트별 커리큘럼</StTitle>
@@ -38,15 +33,14 @@ const Curriculum = () => {
           onSetSelectedPart={handleSetSelectedPart}
         />
         <StList>
-          {curriculum[selectedPart].map((curr, idx) => (
+          {CURRICULUM[selectedPart].map((_, idx) => (
             <StItem key={`${selectedPart} week${idx + 1}`}>
               <StWeek htmlFor={`${selectedPart} week${idx + 1}`}>
                 0{idx + 1}
               </StWeek>
               <StInput
+                {...register(`partCurriculum.${selectedPart}.${idx}`)}
                 id={`${selectedPart} week${idx}`}
-                value={curr}
-                onChange={(e) => handleChangeInput(idx, e.currentTarget.value)}
                 style={{ width: '553px' }}
                 placeholder={`${selectedPart} 파트 ${idx + 1}주차 커리큘럼을 작성해주세요.`}
               />

diff --git a/src/components/org/OrgAdmin/AboutSection/Executives/ExecInfo.tsx b/src/components/org/OrgAdmin/AboutSection/Executives/ExecInfo.tsx
@@ -0,0 +1,75 @@
+import { useFormContext } from 'react-hook-form';
+
+import MyDropzone from '../../MyDropzone';
+import IcBehanceLogo from '../assets/IcBehanceLogo';
+import IcGithubLogo from '../assets/IcGithubLogo';
+import IcLinkedinLogo from '../assets/IcLinkedinLogo';
+import IcMailLogo from '../assets/IcMailLogo';
+import { StDescription, StInput, StInputLabel } from '../style';
+import SNSInput from './SNSInput';
+import { StPhotoWrapper, StSNSWrapper } from './style';
+
+interface ExecInfoProps {
+  selectedExec: string;
+}
+
+const ExecInfo = ({ selectedExec }: ExecInfoProps) => {
+  const method = useFormContext();
+  const { register } = method;
+
+  return (
+    <>
+      <StPhotoWrapper>
+        <StInputLabel>프로필 사진</StInputLabel>
+        <StDescription>사진은 1:1 비율로 올려주세요.</StDescription>
+        <MyDropzone
+          method={method}
+          label={`${selectedExec}.profileImageFileName`}
+          width="168px"
+          height="168px"
+          shape="circle"
+        />
+      </StPhotoWrapper>
+      <StInput
+        {...register(`${selectedExec}.name`)}
+        labelText="이름"
+        placeholder="ex. 김솝트"
+      />
+      <StInput
+        {...register(`${selectedExec}.affiliation`)}
+        labelText="소속"
+        placeholder="ex. 솝트대학교 / 솝트컴퍼니 / 앱잼 프로덕트명"
+      />
+      <StInput
+        {...register(`${selectedExec}.introduction`)}
+        labelText="한 줄 소개"
+        placeholder="ex. 새로운 도전을 위해 과감히 용기내는 사람"
+      />
+      <StSNSWrapper>
+        <span>SNS</span>
+        <SNSInput
+          label={`${selectedExec}.sns.email`}
+          icon={IcMailLogo}
+          placeholder="ex. 000@sopt.org"
+        />
+        <SNSInput
+          label={`${selectedExec}.sns.linkedin`}
+          icon={IcLinkedinLogo}
+          placeholder="ex. https://www.linkedin.com/..."
+        />
+        <SNSInput
+          label={`${selectedExec}.sns.github`}
+          icon={IcGithubLogo}
+          placeholder="ex. https://github.com/..."
+        />
+        <SNSInput
+          label={`${selectedExec}.sns.behance`}
+          icon={IcBehanceLogo}
+          placeholder="ex. https://www.behance.net/..."
+        />
+      </StSNSWrapper>
+    </>
+  );
+};
+
+export default ExecInfo;
diff --git a/src/components/org/OrgAdmin/AboutSection/Executives/SNSInput.tsx b/src/components/org/OrgAdmin/AboutSection/Executives/SNSInput.tsx
@@ -1,4 +1,5 @@
-import React, { ChangeEventHandler } from 'react';
+import React from 'react';
+import { useFormContext } from 'react-hook-form';
 
 import { StInput } from '../style';
 import { StSNSBox } from './style';
@@ -7,27 +8,15 @@ interface SNSInputProps {
   label: string;
   icon: React.FC;
   placeholder: string;
-  value: string;
-  onChange: ChangeEventHandler<HTMLInputElement>;
 }
-const SNSInput = ({
-  label,
-  icon: Icon,
-  placeholder,
-  value,
-  onChange,
-}: SNSInputProps) => {
+const SNSInput = ({ label, icon: Icon, placeholder }: SNSInputProps) => {
+  const { register } = useFormContext();
   return (
     <StSNSBox>
       <label htmlFor={label}>
         <Icon />
       </label>
-      <StInput
-        placeholder={placeholder}
-        id={label}
-        value={value}
-        onChange={onChange}
-      />
+      <StInput {...register(label)} placeholder={placeholder} id={label} />
     </StSNSBox>
   );
 };