From ef641dc148c4313c31985b8f0c9ab6276e41efca Mon Sep 17 00:00:00 2001 From: choiyoorim Date: Tue, 4 Jul 2023 22:45:31 +0900 Subject: [PATCH 1/2] =?UTF-8?q?@choiyoorim=20feat:=20=E2=9C=A8=20MyPage=20?= =?UTF-8?q?API=20=EC=97=B0=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/MyPage/AccountSection.tsx | 5 ++-- src/components/MyPage/ConnectSection.tsx | 5 ++-- src/components/MyPage/MyInfoSection.tsx | 30 +++++++++++++++++------- src/hooks/query/useGetMyPageData.tsx | 15 ++++++++++++ src/hooks/query/usePatchMyPageData.tsx | 9 +++++++ src/lib/api/mypageApi.ts | 14 +++++++++++ src/pages/mypage.tsx | 10 +++++--- src/types/myPage.ts | 10 ++++++++ 8 files changed, 82 insertions(+), 16 deletions(-) create mode 100644 src/hooks/query/useGetMyPageData.tsx create mode 100644 src/hooks/query/usePatchMyPageData.tsx create mode 100644 src/lib/api/mypageApi.ts create mode 100644 src/types/myPage.ts diff --git a/src/components/MyPage/AccountSection.tsx b/src/components/MyPage/AccountSection.tsx index 438d3a4..6e8b849 100644 --- a/src/components/MyPage/AccountSection.tsx +++ b/src/components/MyPage/AccountSection.tsx @@ -2,12 +2,13 @@ import { MYPAGE_LETTER } from 'src/constants/mypage'; import { mypageInfo } from 'src/mock-data/mypage'; import { theme } from 'src/styles/theme'; import styled from 'styled-components'; +import { myInfo } from 'src/types/myPage'; -function AccountSection() { +function AccountSection(myInfo: myInfo) { return ( {MYPAGE_LETTER.ACCOUNT} - {mypageInfo.email} + {myInfo.email} {MYPAGE_LETTER.ACCOUNT_DESCRIBE} ); diff --git a/src/components/MyPage/ConnectSection.tsx b/src/components/MyPage/ConnectSection.tsx index d495b90..13f2823 100644 --- a/src/components/MyPage/ConnectSection.tsx +++ b/src/components/MyPage/ConnectSection.tsx @@ -2,12 +2,13 @@ import { MYPAGE_LETTER } from 'src/constants/mypage'; import { mypageInfo } from 'src/mock-data/mypage'; import { theme } from 'src/styles/theme'; import styled from 'styled-components'; +import { myInfo } from 'src/types/myPage'; -function ConnectSection() { +function ConnectSection(myInfo: myInfo) { return ( {MYPAGE_LETTER.CONNECTION} - {mypageInfo.email} + {myInfo.email} ); } diff --git a/src/components/MyPage/MyInfoSection.tsx b/src/components/MyPage/MyInfoSection.tsx index 94a1ed1..c5ea07f 100644 --- a/src/components/MyPage/MyInfoSection.tsx +++ b/src/components/MyPage/MyInfoSection.tsx @@ -3,28 +3,38 @@ import PencilIcon from 'public/assets/ic_pencil.svg'; import TestImage from 'public/assets/Logo.png'; import { useEffect, useRef, useState } from 'react'; import { GOAL_PLACEHOLDER } from 'src/constants/mypage'; +import usePatchMyPageData from 'src/hooks/query/usePatchMyPageData'; import { mypageInfo } from 'src/mock-data/mypage'; import { theme } from 'src/styles/theme'; +import { editInfo, myInfo } from 'src/types/myPage'; import styled from 'styled-components'; -function MyInfoSection() { +function MyInfoSection(myInfo: myInfo) { const [isDisabled, setIsDisabled] = useState(true); const toggle = () => setIsDisabled(!isDisabled); const nameRef = useRef(null); const goalRef = useRef(null); + const { mutate: patchMyInfo } = usePatchMyPageData(); const handleCheckClick = () => { toggle(); - //서버 전송 - // console.log(nameRef.current?.innerText); - // console.log(goalRef.current?.value); + if (goalRef.current !== null && nameRef.current !== null) { + const editInfo: editInfo = { + name: nameRef.current?.innerText, + goal: goalRef.current?.value, + }; + patchMyInfo(editInfo); + } }; useEffect(() => { if (goalRef.current !== null) { - goalRef.current.value = mypageInfo.goal; + goalRef.current.value = myInfo.goal || ''; + } + if (nameRef.current !== null) { + nameRef.current.innerText = myInfo.name || ''; } - }, []); + }, [myInfo]); useEffect(() => { if (goalRef.current !== null) { @@ -39,9 +49,11 @@ function MyInfoSection() { - - {mypageInfo.name} - + {isDisabled ? ( ) : ( diff --git a/src/hooks/query/useGetMyPageData.tsx b/src/hooks/query/useGetMyPageData.tsx new file mode 100644 index 0000000..18b684d --- /dev/null +++ b/src/hooks/query/useGetMyPageData.tsx @@ -0,0 +1,15 @@ +import { useQuery } from 'react-query'; +import { getMypage } from 'src/lib/api/mypageApi'; +import { DateQueryType } from 'src/types/day'; +import { getFlagedData } from 'src/utils/getFlagedData'; + +const useGetMyPageData = () => + useQuery(['myInfo'], async () => getMypage(), { + select: (data) => data.data, + keepPreviousData: true, + useErrorBoundary: true, + retry: 3, + suspense: false, + }); + +export default useGetMyPageData; diff --git a/src/hooks/query/usePatchMyPageData.tsx b/src/hooks/query/usePatchMyPageData.tsx new file mode 100644 index 0000000..8a9d204 --- /dev/null +++ b/src/hooks/query/usePatchMyPageData.tsx @@ -0,0 +1,9 @@ +import { useMutation } from 'react-query'; +import { patchMypage } from 'src/lib/api/mypageApi'; +import { editInfo } from 'src/types/myPage'; + +const usePatchMyPageData = () => { + return useMutation(async (data: editInfo) => patchMypage(data)); +}; + +export default usePatchMyPageData; diff --git a/src/lib/api/mypageApi.ts b/src/lib/api/mypageApi.ts new file mode 100644 index 0000000..bc0a15d --- /dev/null +++ b/src/lib/api/mypageApi.ts @@ -0,0 +1,14 @@ +import { editInfo } from 'src/types/myPage'; +import { client } from './api'; + +export const getMypage = async () => { + const { data } = await client.get(`/user/profile`); + console.log('data', data); + return { data }; +}; + +export const patchMypage = async (data: editInfo) => { + const post = await client.patch(`/user/profile`, data); + + return post; +}; diff --git a/src/pages/mypage.tsx b/src/pages/mypage.tsx index eacfd5d..6cbff1b 100644 --- a/src/pages/mypage.tsx +++ b/src/pages/mypage.tsx @@ -2,15 +2,19 @@ import AccountSection from 'src/components/MyPage/AccountSection'; import ConnectSection from 'src/components/MyPage/ConnectSection'; import InfoSection from 'src/components/MyPage/InfoSection'; import MyInfoSection from 'src/components/MyPage/MyInfoSection'; +import useGetMyPageData from 'src/hooks/query/useGetMyPageData'; +import { myInfo } from 'src/types/myPage'; import styled from 'styled-components'; function MyPage() { + const { data } = useGetMyPageData(); + const myInfo = data?.data; return ( - - - + + + diff --git a/src/types/myPage.ts b/src/types/myPage.ts new file mode 100644 index 0000000..95888fa --- /dev/null +++ b/src/types/myPage.ts @@ -0,0 +1,10 @@ +export interface myInfo { + name: string; + email: string; + goal: string; +} + +export interface editInfo { + name: string; + goal: string; +} From 39a64b211c238eec5fc5369a2feb2377c81f7c30 Mon Sep 17 00:00:00 2001 From: choiyoorim Date: Tue, 4 Jul 2023 23:27:47 +0900 Subject: [PATCH 2/2] =?UTF-8?q?feat:=20=E2=9C=A8=20MyPage=20API=20?= =?UTF-8?q?=EC=97=B0=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/MyPage/AccountSection.tsx | 5 ++-- src/components/MyPage/ConnectSection.tsx | 5 ++-- src/components/MyPage/MyInfoSection.tsx | 30 +++++++----------------- src/hooks/query/useGetMyPageData.tsx | 15 ------------ src/hooks/query/usePatchMyPageData.tsx | 9 ------- src/lib/api/mypageApi.ts | 14 ----------- src/pages/mypage.tsx | 10 +++----- src/types/myPage.ts | 10 -------- 8 files changed, 16 insertions(+), 82 deletions(-) delete mode 100644 src/hooks/query/useGetMyPageData.tsx delete mode 100644 src/hooks/query/usePatchMyPageData.tsx delete mode 100644 src/lib/api/mypageApi.ts delete mode 100644 src/types/myPage.ts diff --git a/src/components/MyPage/AccountSection.tsx b/src/components/MyPage/AccountSection.tsx index 6e8b849..438d3a4 100644 --- a/src/components/MyPage/AccountSection.tsx +++ b/src/components/MyPage/AccountSection.tsx @@ -2,13 +2,12 @@ import { MYPAGE_LETTER } from 'src/constants/mypage'; import { mypageInfo } from 'src/mock-data/mypage'; import { theme } from 'src/styles/theme'; import styled from 'styled-components'; -import { myInfo } from 'src/types/myPage'; -function AccountSection(myInfo: myInfo) { +function AccountSection() { return ( {MYPAGE_LETTER.ACCOUNT} - {myInfo.email} + {mypageInfo.email} {MYPAGE_LETTER.ACCOUNT_DESCRIBE} ); diff --git a/src/components/MyPage/ConnectSection.tsx b/src/components/MyPage/ConnectSection.tsx index 13f2823..d495b90 100644 --- a/src/components/MyPage/ConnectSection.tsx +++ b/src/components/MyPage/ConnectSection.tsx @@ -2,13 +2,12 @@ import { MYPAGE_LETTER } from 'src/constants/mypage'; import { mypageInfo } from 'src/mock-data/mypage'; import { theme } from 'src/styles/theme'; import styled from 'styled-components'; -import { myInfo } from 'src/types/myPage'; -function ConnectSection(myInfo: myInfo) { +function ConnectSection() { return ( {MYPAGE_LETTER.CONNECTION} - {myInfo.email} + {mypageInfo.email} ); } diff --git a/src/components/MyPage/MyInfoSection.tsx b/src/components/MyPage/MyInfoSection.tsx index c5ea07f..94a1ed1 100644 --- a/src/components/MyPage/MyInfoSection.tsx +++ b/src/components/MyPage/MyInfoSection.tsx @@ -3,38 +3,28 @@ import PencilIcon from 'public/assets/ic_pencil.svg'; import TestImage from 'public/assets/Logo.png'; import { useEffect, useRef, useState } from 'react'; import { GOAL_PLACEHOLDER } from 'src/constants/mypage'; -import usePatchMyPageData from 'src/hooks/query/usePatchMyPageData'; import { mypageInfo } from 'src/mock-data/mypage'; import { theme } from 'src/styles/theme'; -import { editInfo, myInfo } from 'src/types/myPage'; import styled from 'styled-components'; -function MyInfoSection(myInfo: myInfo) { +function MyInfoSection() { const [isDisabled, setIsDisabled] = useState(true); const toggle = () => setIsDisabled(!isDisabled); const nameRef = useRef(null); const goalRef = useRef(null); - const { mutate: patchMyInfo } = usePatchMyPageData(); const handleCheckClick = () => { toggle(); - if (goalRef.current !== null && nameRef.current !== null) { - const editInfo: editInfo = { - name: nameRef.current?.innerText, - goal: goalRef.current?.value, - }; - patchMyInfo(editInfo); - } + //서버 전송 + // console.log(nameRef.current?.innerText); + // console.log(goalRef.current?.value); }; useEffect(() => { if (goalRef.current !== null) { - goalRef.current.value = myInfo.goal || ''; - } - if (nameRef.current !== null) { - nameRef.current.innerText = myInfo.name || ''; + goalRef.current.value = mypageInfo.goal; } - }, [myInfo]); + }, []); useEffect(() => { if (goalRef.current !== null) { @@ -49,11 +39,9 @@ function MyInfoSection(myInfo: myInfo) { - + + {mypageInfo.name} + {isDisabled ? ( ) : ( diff --git a/src/hooks/query/useGetMyPageData.tsx b/src/hooks/query/useGetMyPageData.tsx deleted file mode 100644 index 18b684d..0000000 --- a/src/hooks/query/useGetMyPageData.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import { useQuery } from 'react-query'; -import { getMypage } from 'src/lib/api/mypageApi'; -import { DateQueryType } from 'src/types/day'; -import { getFlagedData } from 'src/utils/getFlagedData'; - -const useGetMyPageData = () => - useQuery(['myInfo'], async () => getMypage(), { - select: (data) => data.data, - keepPreviousData: true, - useErrorBoundary: true, - retry: 3, - suspense: false, - }); - -export default useGetMyPageData; diff --git a/src/hooks/query/usePatchMyPageData.tsx b/src/hooks/query/usePatchMyPageData.tsx deleted file mode 100644 index 8a9d204..0000000 --- a/src/hooks/query/usePatchMyPageData.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import { useMutation } from 'react-query'; -import { patchMypage } from 'src/lib/api/mypageApi'; -import { editInfo } from 'src/types/myPage'; - -const usePatchMyPageData = () => { - return useMutation(async (data: editInfo) => patchMypage(data)); -}; - -export default usePatchMyPageData; diff --git a/src/lib/api/mypageApi.ts b/src/lib/api/mypageApi.ts deleted file mode 100644 index bc0a15d..0000000 --- a/src/lib/api/mypageApi.ts +++ /dev/null @@ -1,14 +0,0 @@ -import { editInfo } from 'src/types/myPage'; -import { client } from './api'; - -export const getMypage = async () => { - const { data } = await client.get(`/user/profile`); - console.log('data', data); - return { data }; -}; - -export const patchMypage = async (data: editInfo) => { - const post = await client.patch(`/user/profile`, data); - - return post; -}; diff --git a/src/pages/mypage.tsx b/src/pages/mypage.tsx index 6cbff1b..eacfd5d 100644 --- a/src/pages/mypage.tsx +++ b/src/pages/mypage.tsx @@ -2,19 +2,15 @@ import AccountSection from 'src/components/MyPage/AccountSection'; import ConnectSection from 'src/components/MyPage/ConnectSection'; import InfoSection from 'src/components/MyPage/InfoSection'; import MyInfoSection from 'src/components/MyPage/MyInfoSection'; -import useGetMyPageData from 'src/hooks/query/useGetMyPageData'; -import { myInfo } from 'src/types/myPage'; import styled from 'styled-components'; function MyPage() { - const { data } = useGetMyPageData(); - const myInfo = data?.data; return ( - - - + + + diff --git a/src/types/myPage.ts b/src/types/myPage.ts deleted file mode 100644 index 95888fa..0000000 --- a/src/types/myPage.ts +++ /dev/null @@ -1,10 +0,0 @@ -export interface myInfo { - name: string; - email: string; - goal: string; -} - -export interface editInfo { - name: string; - goal: string; -}