feat: #65 Modify trainer edit page

- Modify state position - Modify props - edit.tsx - trainer.d.ts - edit.tsx
bodyBudy · Jul 6, 2022 · eb34194 · eb34194
1 parent c40e0f5
commit eb34194
Show file tree

Hide file tree

Showing 3 changed files with 92 additions and 60 deletions.
diff --git a/components/layout/trainer/edit.tsx b/components/layout/trainer/edit.tsx
@@ -1,20 +1,13 @@
-import { FixedBottomLinkButton } from '@components/common/button';
 import { KakaoMap } from '@components/common/map';
 import { ProfileUploader } from '@components/common/profile';
 import { Select } from '@components/common/select';
 import { ImageUploader } from '@components/common/uploader';
 import { healthEvents, healthPurpose } from '@data';
 import styled from '@emotion/styled';
-import { useState } from 'react';
 
-export const Edit = ({ field, purpose, images, gymImage }: EditProps) => {
-  const [newField, setNewFieled] = useState(field);
-  const [newPurpose, setNewPurpose] = useState(purpose);
-  const [profileUrl, setProfileUrl] = useState<string>(images[0] || '');
-  const [imageUrl, setImageUrl] = useState<string[]>(['', '', '']);
-  const [gymUrl, setGymUrl] = useState<string[]>([gymImage || '']);
-
-  const id = 1;
+export const Edit = ({ trainerState, trainerSetState }: EditProps) => {
+  const { field, purpose, profileUrl, imagesUrl, gymUrl } = trainerState;
+  const { setField, setPurpose, setProfileUrl, setImagesUrl, setGymUrl } = trainerSetState;
 
   const TrainerEdit = styled.main`
     margin: 10px 20px;
@@ -48,57 +41,54 @@ export const Edit = ({ field, purpose, images, gymImage }: EditProps) => {
   `;
 
   return (
-    <>
-      <TrainerEdit>
+    <TrainerEdit>
+      <section>
+        <h2 className="srOnly">썸네일</h2>
+        <ProfileUploader profile={profileUrl} setProfile={setProfileUrl} />
+      </section>
+      <section>
+        <h2>상세 정보</h2>
         <section>
-          <h2 className="srOnly">썸네일</h2>
-          <ProfileUploader profile={profileUrl} setProfile={setProfileUrl} />
+          <h3>종목 및 분야</h3>
+          <SelectBoxes>
+            <Select
+              currentSelectedData={field}
+              selectData={healthEvents}
+              selectWidth={140}
+              onSetCurrentSelected={setField}
+            />
+            <Select
+              currentSelectedData={purpose}
+              selectData={healthPurpose}
+              selectWidth={140}
+              onSetCurrentSelected={setPurpose}
+            />
+          </SelectBoxes>
         </section>
         <section>
-          <h2>상세 정보</h2>
-          <section>
-            <h3>종목 및 분야</h3>
-            <SelectBoxes>
-              <Select
-                currentSelectedData={newField}
-                selectData={healthEvents}
-                selectWidth={140}
-                onSetCurrentSelected={setNewFieled}
-              />
-              <Select
-                currentSelectedData={newPurpose}
-                selectData={healthPurpose}
-                selectWidth={140}
-                onSetCurrentSelected={setNewPurpose}
-              />
-            </SelectBoxes>
-          </section>
-          <section>
-            <h3>프로필 사진</h3>
-            <p>트레이너 님을 대표할 수 있는 사진을 업로드 해주세요 :)</p>
-            <ImageUploader url={imageUrl} setImageUrl={setImageUrl} />
-          </section>
+          <h3>프로필 사진</h3>
+          <p>트레이너 님을 대표할 수 있는 사진을 업로드 해주세요 :)</p>
+          <ImageUploader url={imagesUrl} setImageUrl={setImagesUrl} />
         </section>
+      </section>
+      <section>
+        <h2>트레이닝장 정보</h2>
         <section>
-          <h2>트레이닝장 정보</h2>
-          <section>
-            <h3>트레이닝장 사진</h3>
-            <ImageUploader url={gymUrl} setImageUrl={setGymUrl} />
-          </section>
-          <section>
-            <h3>트레이닝장 위치</h3>
-            <div>
-              <div>검색엔진</div>
-              <div>트레이닝장 위치</div>
-              {/* <KakaoMap /> */}
-            </div>
-          </section>
+          <h3>트레이닝장 사진</h3>
+          <ImageUploader url={gymUrl} setImageUrl={setGymUrl} />
         </section>
         <section>
-          <h2>경력 정보</h2>
+          <h3>트레이닝장 위치</h3>
+          <div>
+            <div>검색엔진</div>
+            <div>트레이닝장 위치</div>
+            {/* <KakaoMap /> */}
+          </div>
         </section>
-      </TrainerEdit>
-      <FixedBottomLinkButton isValid link={`/trainer/${id}`} buttonTitle={'변경 사항 저장'} />
-    </>
+      </section>
+      <section>
+        <h2>경력 정보</h2>
+      </section>
+    </TrainerEdit>
   );
 };
diff --git a/components/layout/trainer/trainer.d.ts b/components/layout/trainer/trainer.d.ts
@@ -23,11 +23,25 @@ interface BodyProps {
   images: string[];
 }
 
-interface EditProps {
+interface TrainerProps {
   field: string;
   purpose: string;
-  images: string[];
-  gymImage: string;
+  profileUrl: string;
+  imagesUrl: string[];
+  gymUrl: string[];
+}
+
+interface TrainerSetProps {
+  setField: Dispatch<SetStateAction<string>>;
+  setPurpose: Dispatch<SetStateAction<string>>;
+  setProfileUrl: Dispatch<SetStateAction<string>>;
+  setImagesUrl: Dispatch<SetStateAction<string[]>>;
+  setGymUrl: Dispatch<SetStateAction<string[]>>;
+}
+
+interface EditProps {
+  trainerState: TrainerProps;
+  trainerSetState: TrainerSetProps;
 }
 
 interface TrainerModalProps {

diff --git a/pages/trainer/[id]/edit.tsx b/pages/trainer/[id]/edit.tsx
@@ -1,13 +1,40 @@
+import { FixedBottomLinkButton } from '@components/common/button';
 import { TitleBar } from '@components/common/title';
 import { Edit } from '@components/layout/trainer/edit';
 import styled from '@emotion/styled';
 import Link from 'next/link';
+import { useState } from 'react';
 
 const TrainerEdit = () => {
+  // trainer 정보 받아와서 초기값 저장
   const id = 1;
-
-  const gymImage = '/assets/common/profile.svg';
+  const field = 'PT';
+  const purpose = '다이어트';
   const images = ['/assets/common/profile.svg', '/assets/common/profile.svg'];
+  if (images.length < 3) for (let i = 0; i < 3 - images.length; i++) images.push('');
+  const gymImage = '/assets/common/profile.svg';
+
+  const [newField, setNewField] = useState(field || '');
+  const [newPurpose, setNewPurpose] = useState(purpose || '');
+  const [profileUrl, setProfileUrl] = useState<string>(images[0]);
+  const [imagesUrl, setImagesUrl] = useState<string[]>(images);
+  const [gymUrl, setGymUrl] = useState<string[]>([gymImage || '']);
+
+  const trainerState = {
+    field: newField,
+    purpose: newPurpose,
+    profileUrl: profileUrl,
+    imagesUrl: imagesUrl,
+    gymUrl: gymUrl,
+  };
+
+  const trainerSetState = {
+    setField: setNewField,
+    setPurpose: setNewPurpose,
+    setProfileUrl: setProfileUrl,
+    setImagesUrl: setImagesUrl,
+    setGymUrl: setGymUrl,
+  };
 
   const left = {
     link: `/trainer/${id}`,
@@ -44,7 +71,8 @@ const TrainerEdit = () => {
       <Link href={`/profile/${id}/withdraw`}>
         <Withdraw>회원탈퇴</Withdraw>
       </Link>
-      <Edit field={'필라테스'} purpose={'체력 증진'} images={images} gymImage={gymImage} />
+      <Edit trainerState={trainerState} trainerSetState={trainerSetState} />
+      <FixedBottomLinkButton isValid link={`/trainer/${id}`} buttonTitle={'변경 사항 저장'} />
     </>
   );
 };