Skip to content

Commit

Permalink
Merge pull request #162 from Step3-kakao-tech-campus/feat/#147
Browse files Browse the repository at this point in the history
VAC 패턴에 따라 로직과 뷰 분리
  • Loading branch information
JeonDoGyun authored Nov 5, 2023
2 parents 6b325b9 + d2149e7 commit 1a03bb0
Show file tree
Hide file tree
Showing 2 changed files with 87 additions and 60 deletions.
70 changes: 10 additions & 60 deletions src/pages/editProfile/EditProfilePage.tsx
Original file line number Diff line number Diff line change
@@ -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();
Expand Down Expand Up @@ -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>) => {
Expand All @@ -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;
77 changes: 77 additions & 0 deletions src/pages/editProfile/VEditProfilePage.tsx
Original file line number Diff line number Diff line change
@@ -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;

0 comments on commit 1a03bb0

Please sign in to comment.