From e4b9956bff793bbe02e785f15b55135a8ed2cf5b Mon Sep 17 00:00:00 2001 From: NaveOWO <87578512+NaveOWO@users.noreply.github.com> Date: Mon, 7 Aug 2023 13:48:19 +0900 Subject: [PATCH 1/6] =?UTF-8?q?fix:=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=EC=9D=B4?= =?UTF-8?q?=20=EC=9C=A0=EC=A7=80=EB=90=98=EC=A7=80=20=EC=95=8A=EB=8A=94=20?= =?UTF-8?q?=EC=98=A4=EB=A5=98=20=ED=95=B4=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/src/App.tsx | 73 ++++++++++--------- .../src/components/_common/navBar/NavBar.tsx | 2 - .../_providers/UserInfoProvider.tsx | 5 +- client/src/hooks/_common/useIdentifyUser.ts | 30 ++++++++ client/src/hooks/queries/user.ts | 4 +- client/src/hooks/user/useValidationCheck.ts | 4 +- 6 files changed, 76 insertions(+), 42 deletions(-) create mode 100644 client/src/hooks/_common/useIdentifyUser.ts diff --git a/client/src/App.tsx b/client/src/App.tsx index 4929c0254..603a1bfaa 100644 --- a/client/src/App.tsx +++ b/client/src/App.tsx @@ -16,45 +16,50 @@ import ToastProvider from '@components/_common/toastProvider/ToastProvider'; import GoalRoomListPage from './pages/goalRoomListPage/GoalRoomListPage'; import GoalRoomCreatePage from './pages/goalRoomCreatePage/GoalRoomCreatePage'; import MyPage from '@pages/myPage/MyPage'; +import UserInfoProvider from './components/_providers/UserInfoProvider'; const App = () => { return ( - - - - - - - } /> - } /> - } /> - } /> - }> - - - } - /> - } /> - } /> - } - /> - } - /> - } /> - - - - - + + + + + + + } /> + } /> + } /> + } /> + }> + + + } + /> + } + /> + } /> + } + /> + } + /> + } /> + + + + + + ); }; diff --git a/client/src/components/_common/navBar/NavBar.tsx b/client/src/components/_common/navBar/NavBar.tsx index 9ed27c1e8..3346f3461 100644 --- a/client/src/components/_common/navBar/NavBar.tsx +++ b/client/src/components/_common/navBar/NavBar.tsx @@ -1,7 +1,6 @@ import SVGIcon from '@components/icons/SVGIcon'; import * as S from './NavBar.styles'; import { useUserInfoContext } from '@components/_providers/UserInfoProvider'; -import useValidationCheck from '@hooks/user/useValidationCheck'; import isValidUserInfo from '@utils/user/isValidUserInfo'; import { BASE_URL } from '@apis/axios/client'; @@ -10,7 +9,6 @@ type NavBarProps = { }; const NavBar = ({ isSwitchOn }: NavBarProps) => { - useValidationCheck(); const { userInfo } = useUserInfoContext(); return ( diff --git a/client/src/components/_providers/UserInfoProvider.tsx b/client/src/components/_providers/UserInfoProvider.tsx index c63d787af..96282706d 100644 --- a/client/src/components/_providers/UserInfoProvider.tsx +++ b/client/src/components/_providers/UserInfoProvider.tsx @@ -1,6 +1,7 @@ -import { createContext, PropsWithChildren, useContext, useState } from 'react'; +import { createContext, PropsWithChildren, useContext } from 'react'; import { UserInfoResponse } from '@myTypes/user/remote'; import { UserInfoContextType } from '@myTypes/_common/user'; +import { useIdentifyUser } from '@/hooks/_common/useIdentifyUser'; export const defaultUserInfo: UserInfoResponse = { id: null, @@ -18,7 +19,7 @@ export const userInfoContext = createContext({ }); const UserInfoProvider = ({ children }: PropsWithChildren) => { - const [userInfo, setUserInfo] = useState(defaultUserInfo); + const { userInfo, setUserInfo } = useIdentifyUser(); return ( diff --git a/client/src/hooks/_common/useIdentifyUser.ts b/client/src/hooks/_common/useIdentifyUser.ts new file mode 100644 index 000000000..e3fefa9c9 --- /dev/null +++ b/client/src/hooks/_common/useIdentifyUser.ts @@ -0,0 +1,30 @@ +import { getUserInfo } from '@/apis/user'; +import { UserInfoResponse } from '@/myTypes/user/remote'; +import { getCookie } from '@/utils/_common/cookies'; +import { useEffect, useState } from 'react'; + +export const defaultUserInfo: UserInfoResponse = { + id: null, + nickname: '', + profileImageUrl: '', + gender: null, + identifier: '', + phoneNumber: '', + birthday: '', +}; + +export const useIdentifyUser = () => { + const [userInfo, setUserInfo] = useState(defaultUserInfo); + + useEffect(() => { + const accessToken = getCookie('access_token'); + if (!accessToken) return; + + getUserInfo().then((response) => setUserInfo(response.data)); + }, []); + + return { + userInfo, + setUserInfo, + }; +}; diff --git a/client/src/hooks/queries/user.ts b/client/src/hooks/queries/user.ts index 3d87c9c42..96548d9ac 100644 --- a/client/src/hooks/queries/user.ts +++ b/client/src/hooks/queries/user.ts @@ -5,10 +5,10 @@ import { UserLoginRequest, } from '@myTypes/user/remote'; import { getUserInfo, login, signUp } from '@apis/user'; -import { setCookie } from '@utils/_common/cookies'; import useToast from '@hooks/_common/useToast'; -import { useUserInfoContext } from '@components/_providers/UserInfoProvider'; +import { useUserInfoContext } from '@/components/_providers/UserInfoProvider'; import { AxiosResponse } from 'axios'; +import { setCookie } from '@/utils/_common/cookies'; export const useSignUp = () => { const { mutate } = useMutation( diff --git a/client/src/hooks/user/useValidationCheck.ts b/client/src/hooks/user/useValidationCheck.ts index 889d0ce64..c9c74bf5f 100644 --- a/client/src/hooks/user/useValidationCheck.ts +++ b/client/src/hooks/user/useValidationCheck.ts @@ -1,14 +1,14 @@ import { useUserInfoContext } from '@components/_providers/UserInfoProvider'; import { useEffect } from 'react'; import isValidUserInfo from '@utils/user/isValidUserInfo'; -import logout from '@utils/user/logout'; +// import logout from '@utils/user/logout'; export const useValidationCheck = () => { const { userInfo } = useUserInfoContext(); useEffect(() => { if (!isValidUserInfo(userInfo)) { - logout(); + // logout(); } }, [userInfo]); }; From 373394b3141493cea86ad508600c72ced6c1603b Mon Sep 17 00:00:00 2001 From: NaveOWO <87578512+NaveOWO@users.noreply.github.com> Date: Mon, 7 Aug 2023 13:48:56 +0900 Subject: [PATCH 2/6] =?UTF-8?q?fix:=20=EB=A1=9C=EB=93=9C=EB=A7=B5=20?= =?UTF-8?q?=EB=A6=AC=EC=8A=A4=ED=8A=B8=EC=9D=98=20=EC=95=84=EC=9D=B4?= =?UTF-8?q?=ED=85=9C=EC=9D=98=20=ED=81=AC=EA=B8=B0=EA=B0=80=20=EB=8B=A4?= =?UTF-8?q?=EB=A5=B8=20=EC=98=A4=EB=A5=98=20=ED=95=B4=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/_common/roadmapItem/RoadmapItem.styles.ts | 3 +++ 1 file changed, 3 insertions(+) diff --git a/client/src/components/_common/roadmapItem/RoadmapItem.styles.ts b/client/src/components/_common/roadmapItem/RoadmapItem.styles.ts index 96839c411..d550a8641 100644 --- a/client/src/components/_common/roadmapItem/RoadmapItem.styles.ts +++ b/client/src/components/_common/roadmapItem/RoadmapItem.styles.ts @@ -36,6 +36,9 @@ export const RoadmapTitle = styled.div` export const Description = styled.div` ${({ theme }) => theme.fonts.description5} margin: 1.6rem 0 3rem 0; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; `; export const ItemExtraInfos = styled.div` From c7712b15bbb7cc70c048ee68e72f17c82e16b5b9 Mon Sep 17 00:00:00 2001 From: NaveOWO <87578512+NaveOWO@users.noreply.github.com> Date: Mon, 7 Aug 2023 13:51:56 +0900 Subject: [PATCH 3/6] =?UTF-8?q?fix:=20=EB=AA=A9=EB=A1=9D=EC=A1=B0=ED=9A=8C?= =?UTF-8?q?=20=ED=8E=98=EC=9D=B4=EC=A7=80=EC=9D=98=20=EB=86=92=EC=9D=B4=20?= =?UTF-8?q?=EB=AC=B8=EC=A0=9C=20=ED=95=B4=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../goalRoomList/goalRoomList.styles.ts | 1 + .../roadmapList/RoadmapList.styles.ts | 15 +++++++++++---- 2 files changed, 12 insertions(+), 4 deletions(-) diff --git a/client/src/components/goalRoomListPage/goalRoomList/goalRoomList.styles.ts b/client/src/components/goalRoomListPage/goalRoomList/goalRoomList.styles.ts index ff4cc82fe..075482ef5 100644 --- a/client/src/components/goalRoomListPage/goalRoomList/goalRoomList.styles.ts +++ b/client/src/components/goalRoomListPage/goalRoomList/goalRoomList.styles.ts @@ -32,6 +32,7 @@ export const ListWrapper = styled.div` display: grid; grid-row-gap: 6rem; grid-template-columns: repeat(2, 1fr); + min-height: 100vh; ${media.mobile` grid-template-columns: repeat(1, 1fr); diff --git a/client/src/components/roadmapListPage/roadmapList/RoadmapList.styles.ts b/client/src/components/roadmapListPage/roadmapList/RoadmapList.styles.ts index fe78e8809..0943c7a17 100644 --- a/client/src/components/roadmapListPage/roadmapList/RoadmapList.styles.ts +++ b/client/src/components/roadmapListPage/roadmapList/RoadmapList.styles.ts @@ -1,12 +1,19 @@ +import media from '@/styles/media'; import styled from 'styled-components'; export const RoadmapList = styled.div` - display: flex; - flex-wrap: wrap; - row-gap: 3rem; - justify-content: space-around; + display: grid; + grid-gap: 3rem; + grid-template-columns: 1fr 1fr; + justify-items: center; margin-bottom: 8rem; + min-height: 100vh; + + ${media.mobile` + grid-template-columns: 1fr; + + `} `; export const CreateRoadmapButton = styled.button` From ce9efe47bfb4fb3caf838b42d65af9edf2e7812e Mon Sep 17 00:00:00 2001 From: NaveOWO <87578512+NaveOWO@users.noreply.github.com> Date: Mon, 7 Aug 2023 13:52:18 +0900 Subject: [PATCH 4/6] =?UTF-8?q?style:=20=EC=BD=94=EB=93=9C=20=EC=8A=A4?= =?UTF-8?q?=ED=83=80=EC=9D=BC=20=EC=A0=95=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/src/components/_common/roadmapItem/RoadmapItem.tsx | 1 - .../src/components/roadmapListPage/roadmapList/RoadmapList.tsx | 2 +- 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/client/src/components/_common/roadmapItem/RoadmapItem.tsx b/client/src/components/_common/roadmapItem/RoadmapItem.tsx index 7fdce7610..499802def 100644 --- a/client/src/components/_common/roadmapItem/RoadmapItem.tsx +++ b/client/src/components/_common/roadmapItem/RoadmapItem.tsx @@ -57,7 +57,6 @@ const RoadmapItem = ({ item, hasBorder = true, roadmapId }: RoadmapItemProps) => {item.tags.map((tag) => { return # {tag.name}; })} - diff --git a/client/src/components/roadmapListPage/roadmapList/RoadmapList.tsx b/client/src/components/roadmapListPage/roadmapList/RoadmapList.tsx index 271f051fa..1c8546a1c 100644 --- a/client/src/components/roadmapListPage/roadmapList/RoadmapList.tsx +++ b/client/src/components/roadmapListPage/roadmapList/RoadmapList.tsx @@ -18,7 +18,7 @@ const RoadmapList = ({ selectedCategoryId }: RoadmapListProps) => { return ( - {roadmapList?.map((item) => ( + {roadmapList.map((item) => ( ))} From f1104073c3bc101f47a8a7bea1582463a9cd4d1b Mon Sep 17 00:00:00 2001 From: NaveOWO <87578512+NaveOWO@users.noreply.github.com> Date: Wed, 9 Aug 2023 14:02:25 +0900 Subject: [PATCH 5/6] =?UTF-8?q?refactor:=20unmount=EB=90=98=EC=97=88?= =?UTF-8?q?=EC=9D=84=20=EB=95=8C=20=EB=B9=84=EB=8F=99=EA=B8=B0=20=EC=9E=91?= =?UTF-8?q?=EC=97=85=20=EC=B7=A8=EC=86=8C=20=EB=A1=9C=EC=A7=81=20=EA=B5=AC?= =?UTF-8?q?=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/src/apis/user.ts | 6 ++++-- client/src/hooks/_common/useIdentifyUser.ts | 22 ++++++++++++++++++--- 2 files changed, 23 insertions(+), 5 deletions(-) diff --git a/client/src/apis/user.ts b/client/src/apis/user.ts index c679a85f7..3d101a02d 100644 --- a/client/src/apis/user.ts +++ b/client/src/apis/user.ts @@ -14,6 +14,8 @@ export const login = (body: UserLoginRequest) => { return client.post('/auth/login', body); }; -export const getUserInfo = () => { - return client.get('/members/me'); +export const getUserInfo = (signal?: AbortSignal) => { + return client.get('/members/me', { + signal, + }); }; diff --git a/client/src/hooks/_common/useIdentifyUser.ts b/client/src/hooks/_common/useIdentifyUser.ts index e3fefa9c9..60bfe824c 100644 --- a/client/src/hooks/_common/useIdentifyUser.ts +++ b/client/src/hooks/_common/useIdentifyUser.ts @@ -17,10 +17,26 @@ export const useIdentifyUser = () => { const [userInfo, setUserInfo] = useState(defaultUserInfo); useEffect(() => { - const accessToken = getCookie('access_token'); - if (!accessToken) return; + const fetchController = new AbortController(); + const { signal } = fetchController; - getUserInfo().then((response) => setUserInfo(response.data)); + const fetchUserInfo = async () => { + try { + const accessToken = getCookie('access_token'); + + if (!accessToken) return; + + const userInfo = (await getUserInfo(signal)).data; + + setUserInfo(userInfo); + } catch (e) { + // 실패시 로직 + } + }; + + fetchUserInfo(); + + return () => fetchController.abort(); }, []); return { From 581dcebb5a6ed9bff314e25d27b769412e1e8331 Mon Sep 17 00:00:00 2001 From: NaveOWO <87578512+NaveOWO@users.noreply.github.com> Date: Wed, 9 Aug 2023 14:02:42 +0900 Subject: [PATCH 6/6] =?UTF-8?q?feat:=20=EC=82=AC=EC=9A=A9=ED=95=98?= =?UTF-8?q?=EC=A7=80=20=EC=95=8A=EB=8A=94=20=ED=9B=85=20=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/src/hooks/user/useValidationCheck.ts | 16 ---------------- 1 file changed, 16 deletions(-) delete mode 100644 client/src/hooks/user/useValidationCheck.ts diff --git a/client/src/hooks/user/useValidationCheck.ts b/client/src/hooks/user/useValidationCheck.ts deleted file mode 100644 index c9c74bf5f..000000000 --- a/client/src/hooks/user/useValidationCheck.ts +++ /dev/null @@ -1,16 +0,0 @@ -import { useUserInfoContext } from '@components/_providers/UserInfoProvider'; -import { useEffect } from 'react'; -import isValidUserInfo from '@utils/user/isValidUserInfo'; -// import logout from '@utils/user/logout'; - -export const useValidationCheck = () => { - const { userInfo } = useUserInfoContext(); - - useEffect(() => { - if (!isValidUserInfo(userInfo)) { - // logout(); - } - }, [userInfo]); -}; - -export default useValidationCheck;