From 878310558a465ca822abca68b7a3aeb0307dccd9 Mon Sep 17 00:00:00 2001
From: JeonDoGyun <wjsehrbs2632@naver.com>
Date: Sun, 5 Nov 2023 23:27:30 +0900
Subject: [PATCH] =?UTF-8?q?rechore:=20VAC=20=ED=8C=A8=ED=84=B4=EC=97=90=20?=
 =?UTF-8?q?=EB=A7=9E=EA=B2=8C=20=EB=A1=9C=EC=A7=81=EA=B3=BC=20=EB=B7=B0=20?=
 =?UTF-8?q?=EB=B6=84=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

EditProfilePage의 로직과 뷰를 분리했습니다.
---
 src/pages/editProfile/EditProfilePage.tsx  | 70 +++-----------------
 src/pages/editProfile/VEditProfilePage.tsx | 77 ++++++++++++++++++++++
 2 files changed, 87 insertions(+), 60 deletions(-)
 create mode 100644 src/pages/editProfile/VEditProfilePage.tsx

diff --git a/src/pages/editProfile/EditProfilePage.tsx b/src/pages/editProfile/EditProfilePage.tsx
index 0d72decc..cf642b35 100644
--- a/src/pages/editProfile/EditProfilePage.tsx
+++ b/src/pages/editProfile/EditProfilePage.tsx
@@ -1,15 +1,10 @@
 import { useQuery } from '@tanstack/react-query';
-import Banner from 'commons/Banner';
-import InputGroup from 'commons/InputGroup';
-import GNB from 'layouts/GNB';
 import { useParams } from 'react-router-dom';
-import { ClipLoader } from 'react-spinners';
 import { useRecoilState } from 'recoil';
 import { shelterSignupState } from 'recoil/shelterState';
 import { useEffect, useState } from 'react';
 import { getCookie } from 'commons/cookie/cookie';
-import EditAddressInputGroup from './EditAddressInputGroup';
-import EditProfilePageSkeleton from './EditProfilePageSkeleton';
+import VEditProfilePage from './VEditProfilePage';
 
 const EditProfilePage = () => {
   const params = useParams();
@@ -69,7 +64,8 @@ const EditProfilePage = () => {
     console.log('response: ', response);
     setIsButtonLoading(false);
 
-    return response.json();
+    const res = await response.json();
+    return res;
   };
 
   const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
@@ -94,62 +90,16 @@ const EditProfilePage = () => {
         ...data?.response.shelter.address,
       },
     });
-    console.log(data);
   }, [data]);
 
-  return (
-    <div className="h-full">
-      <GNB />
-      {isLoading ? (
-        <EditProfilePageSkeleton />
-      ) : (
-        <div
-          className="flex flex-col justify-center items-center gap-10 min-h-[80vh]"
-          style={{
-            backgroundImage: 'url(assets/images/backgroundImage.png)',
-            backgroundRepeat: 'no-repeat',
-            backgroundPosition: 'center',
-          }}
-        >
-          <Banner className="font-semibold text-2xl mb-4">
-            My 보호소 정보 수정
-          </Banner>
+  const EditProfileProps = {
+    isLoading,
+    isButtonLoading,
+    handleSubmit,
+    data,
+  };
 
-          <form
-            className="flex flex-col gap-6 w-full max-w-[400px] px-2"
-            onSubmit={handleSubmit}
-          >
-            <InputGroup
-              id="shelter"
-              name="보호소 이름"
-              type="text"
-              placeholder="보호소 이름을 입력해주세요."
-              onChange={() => {}}
-              autocomplete="off"
-              defaultValue={data?.response.shelter.name}
-            />
-            <InputGroup
-              id="shelter-contact"
-              name="보호소 연락처"
-              type="text"
-              placeholder="보호소에 연락 가능한 연락처를 입력해주세요."
-              onChange={() => {}}
-              autocomplete="off"
-              defaultValue={data?.response.shelter.contact}
-            />
-            <EditAddressInputGroup />
-            <button className="bg-brand-color text-white w-full rounded-md p-2">
-              {isButtonLoading ? (
-                <ClipLoader size={20} color="#fff" loading={isButtonLoading} />
-              ) : (
-                '정보 수정하기'
-              )}
-            </button>
-          </form>
-        </div>
-      )}
-    </div>
-  );
+  return <VEditProfilePage {...EditProfileProps} />;
 };
 
 export default EditProfilePage;
diff --git a/src/pages/editProfile/VEditProfilePage.tsx b/src/pages/editProfile/VEditProfilePage.tsx
new file mode 100644
index 00000000..9fc44f52
--- /dev/null
+++ b/src/pages/editProfile/VEditProfilePage.tsx
@@ -0,0 +1,77 @@
+import GNB from 'layouts/GNB';
+import React from 'react';
+import Banner from 'commons/Banner';
+import InputGroup from 'commons/InputGroup';
+import { ClipLoader } from 'react-spinners';
+import EditProfilePageSkeleton from './EditProfilePageSkeleton';
+import EditAddressInputGroup from './EditAddressInputGroup';
+
+interface VEditProfileProps {
+  isLoading: boolean;
+  isButtonLoading: boolean;
+  handleSubmit: (e: React.FormEvent<HTMLFormElement>) => void;
+  data: any;
+}
+
+const VEditProfilePage = ({
+  isLoading,
+  isButtonLoading,
+  handleSubmit,
+  data,
+}: VEditProfileProps) => {
+  return (
+    <div className="h-full">
+      <GNB />
+      {isLoading ? (
+        <EditProfilePageSkeleton />
+      ) : (
+        <div
+          className="flex flex-col justify-center items-center gap-10 min-h-[80vh]"
+          style={{
+            backgroundImage: 'url(assets/images/backgroundImage.png)',
+            backgroundRepeat: 'no-repeat',
+            backgroundPosition: 'center',
+          }}
+        >
+          <Banner className="font-semibold text-2xl mb-4">
+            My 보호소 정보 수정
+          </Banner>
+
+          <form
+            className="flex flex-col gap-6 w-full max-w-[400px] px-2"
+            onSubmit={handleSubmit}
+          >
+            <InputGroup
+              id="shelter"
+              name="보호소 이름"
+              type="text"
+              placeholder="보호소 이름을 입력해주세요."
+              onChange={() => {}}
+              autocomplete="off"
+              defaultValue={data?.response.shelter.name}
+            />
+            <InputGroup
+              id="shelter-contact"
+              name="보호소 연락처"
+              type="text"
+              placeholder="보호소에 연락 가능한 연락처를 입력해주세요."
+              onChange={() => {}}
+              autocomplete="off"
+              defaultValue={data?.response.shelter.contact}
+            />
+            <EditAddressInputGroup />
+            <button className="bg-brand-color text-white w-full rounded-md p-2">
+              {isButtonLoading ? (
+                <ClipLoader size={20} color="#fff" loading={isButtonLoading} />
+              ) : (
+                '정보 수정하기'
+              )}
+            </button>
+          </form>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default VEditProfilePage;