-
Notifications
You must be signed in to change notification settings - Fork 4
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Browse files
Browse the repository at this point in the history
멘토링 내용 적용 - 에러캐칭, GNB 컨텐츠 노출 수정, meta og 속성 수정
- Loading branch information
Showing
17 changed files
with
477 additions
and
266 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,27 @@ | ||
| interface TextGuideModalProps { | ||
| open: boolean; | ||
| text: string; | ||
| onClose: () => void; | ||
| } | ||
|
|
||
| const TextGuideModal = ({ text, open, onClose }: TextGuideModalProps) => { | ||
| if (!open) { | ||
| return null; | ||
| } | ||
|
|
||
| return ( | ||
| <dialog open={open} className="border-2 rounded-xl w-[300px] h-[250px]"> | ||
| <div className="flex flex-col w-full h-full py-6 justify-around items-center"> | ||
| <div className="font-bold text-xl">{text}</div> | ||
| <button | ||
| onClick={onClose} | ||
| className="text-white w-[100px] bg-brand-color px-4 py-1 rounded-lg" | ||
| > | ||
| 확인 | ||
| </button> | ||
| </div> | ||
| </dialog> | ||
| ); | ||
| }; | ||
|
|
||
| export default TextGuideModal; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,70 +1,13 @@ | ||
| import { useMutation } from '@tanstack/react-query'; | ||
| import { useParams } from 'react-router-dom'; | ||
| import { useRecoilState } from 'recoil'; | ||
| import { shelterSignupState } from 'recoil/shelterState'; | ||
| import { getCookie } from 'commons/cookie/cookie'; | ||
| import usePostFetch from 'commons/apis/usePostFetch'; | ||
| import useGetFetch from 'commons/apis/useGetFetch'; | ||
| import { useEffect } from 'react'; | ||
| import VEditProfilePage from './VEditProfilePage'; | ||
| import React from 'react'; | ||
| import ErrorBoundary from 'layouts/ErrorBoundary'; | ||
| import EditProfileTemplate from './components/EditProfileTemplate'; | ||
|
|
||
| const EditProfilePage = () => { | ||
| const params = useParams(); | ||
| const shelterId = params.id; | ||
| const token = getCookie('loginToken'); | ||
| const [shelterInfo, setShelterInfo] = useRecoilState(shelterSignupState); | ||
|
|
||
| const { getStatusCode, getLoading, getData } = useGetFetch( | ||
| `${process.env.REACT_APP_URI}/shelter/${shelterId}?page=1`, | ||
| return ( | ||
| <ErrorBoundary fallback={'Error...'}> | ||
| <EditProfileTemplate /> | ||
| </ErrorBoundary> | ||
| ); | ||
|
|
||
| const { postStatusCode, postloading, postData } = usePostFetch( | ||
| `${process.env.REACT_APP_URI}/shelter/${shelterId}`, | ||
| { | ||
| method: 'PUT', | ||
| headers: { | ||
| 'Authorization': `Bearer ${token}`, | ||
| 'Content-Type': 'application/json', | ||
| }, | ||
|
|
||
| body: JSON.stringify({ | ||
| name: shelterInfo.name, | ||
| contact: shelterInfo.contact, | ||
| shelterAddressUpdateDto: shelterInfo.address, | ||
| }), | ||
| }, | ||
| ); | ||
|
|
||
| const mutation = useMutation(getData, { | ||
| onSuccess: (info) => { | ||
| setShelterInfo({ | ||
| ...shelterInfo, | ||
| name: info.response.shelter.name, | ||
| contact: info.response.shelter.contact, | ||
| address: { | ||
| ...info.response.shelter.address, | ||
| }, | ||
| }); | ||
| }, | ||
| }); | ||
|
|
||
| const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => { | ||
| e.preventDefault(); | ||
| postData(); | ||
| }; | ||
|
|
||
| useEffect(() => { | ||
| mutation.mutate(); | ||
| }, []); | ||
|
|
||
| const EditProfileProps = { | ||
| getLoading, | ||
| postloading, | ||
| handleSubmit, | ||
| shelterInfo, | ||
| }; | ||
|
|
||
| return <VEditProfilePage {...EditProfileProps} />; | ||
| }; | ||
|
|
||
| export default EditProfilePage; |
115 changes: 115 additions & 0 deletions
115
src/pages/editProfile/components/EditProfileTemplate.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,115 @@ | ||
| import { useMutation } from '@tanstack/react-query'; | ||
| import { useParams } from 'react-router-dom'; | ||
| import { useRecoilState } from 'recoil'; | ||
| import { shelterSignupState } from 'recoil/shelterState'; | ||
| import { getCookie } from 'commons/cookie/cookie'; | ||
| import usePostFetch from 'commons/apis/usePostFetch'; | ||
| import useGetFetch from 'commons/apis/useGetFetch'; | ||
| import { useEffect, useState } from 'react'; | ||
| import VEditProfilePage from './VEditProfileTemplate'; | ||
|
|
||
| const EditProfileTemplate = () => { | ||
| const params = useParams(); | ||
| const shelterId = params.id; | ||
| const token = getCookie('loginToken'); | ||
| const [shelterInfo, setShelterInfo] = useRecoilState(shelterSignupState); | ||
| const [modalOpen, setModalOpen] = useState<boolean>(false); | ||
| const [modalText, setModalText] = useState<string>(''); | ||
|
|
||
| const { getStatusCode, getLoading, getData } = useGetFetch( | ||
| `${process.env.REACT_APP_URI}/shelter/${shelterId}?page=1`, | ||
| ); | ||
|
|
||
| const { postStatusCode, postloading, postData } = usePostFetch( | ||
| `${process.env.REACT_APP_URI}/shelter/${shelterId}`, | ||
| { | ||
| method: 'PUT', | ||
| headers: { | ||
| 'Authorization': `Bearer ${token}`, | ||
| 'Content-Type': 'application/json', | ||
| }, | ||
|
|
||
| body: JSON.stringify({ | ||
| name: shelterInfo.name, | ||
| contact: shelterInfo.contact, | ||
| shelterAddressUpdateDto: shelterInfo.address, | ||
| }), | ||
| }, | ||
| ); | ||
|
|
||
| const mutation = useMutation(getData, { | ||
| onSuccess: (info) => { | ||
| setShelterInfo({ | ||
| ...shelterInfo, | ||
| name: info.response.shelter.name, | ||
| contact: info.response.shelter.contact, | ||
| address: { | ||
| ...info.response.shelter.address, | ||
| }, | ||
| }); | ||
| }, | ||
| onError: () => { | ||
| if (getStatusCode === 404) { | ||
| setModalText('해당 보호소는 없는 보호소입니다.'); | ||
| setModalOpen(true); | ||
| } | ||
| if (getStatusCode === 500) { | ||
| setModalText('서버에 오류가 발생했습니다.'); | ||
| setModalOpen(true); | ||
| } | ||
| }, | ||
| }); | ||
|
|
||
| const getInputValue = (target: HTMLInputElement) => { | ||
| const inputKey = target.dataset.inputType as string; | ||
| setShelterInfo((prev) => ({ ...prev, [inputKey]: target.value })); | ||
| }; | ||
|
|
||
| const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => { | ||
| const target = event.target as HTMLInputElement; | ||
| getInputValue(target); | ||
| }; | ||
|
|
||
| const handleModalClose = () => { | ||
| setModalOpen(false); | ||
| }; | ||
|
|
||
| const handlePutStatusCode = (status: number) => { | ||
| if (status === 403) { | ||
| setModalText('타 보호소 정보 수정에 대한 접근 권한이 없습니다.'); | ||
| setModalOpen(true); | ||
| } | ||
| if (status === 404) { | ||
| setModalText('존재하지 않는 보호소 계정입니다.'); | ||
| setModalOpen(true); | ||
| } | ||
| if (status === 500) { | ||
| setModalText('서버에 오류가 발생했습니다.'); | ||
| setModalOpen(true); | ||
| } | ||
| }; | ||
|
|
||
| const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => { | ||
| e.preventDefault(); | ||
| postData(); | ||
| handlePutStatusCode(postStatusCode); | ||
| }; | ||
|
|
||
| useEffect(() => { | ||
| mutation.mutate(); | ||
| }, []); | ||
|
|
||
| const EditProfileProps = { | ||
| getLoading, | ||
| postloading, | ||
| modalOpen, | ||
| modalText, | ||
| handleSubmit, | ||
| handleChange, | ||
| handleModalClose, | ||
| }; | ||
|
|
||
| return <VEditProfilePage {...EditProfileProps} />; | ||
| }; | ||
|
|
||
| export default EditProfileTemplate; |
Oops, something went wrong.