From 847d77e38f52f3897168c46ca1c47454931932cd Mon Sep 17 00:00:00 2001 From: chaaerim Date: Thu, 18 Jan 2024 01:15:28 +0900 Subject: [PATCH 1/8] =?UTF-8?q?=20:sparkles:=20feat:=20toast=20component?= =?UTF-8?q?=20parallel=20route=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/(AppBarHeader)/layout.tsx | 3 +- src/app/(BackHeader)/my-page/@toast/page.tsx | 36 ++++++++++++++++++++ src/app/(BackHeader)/my-page/layout.tsx | 17 +++++++++ src/app/(BackHeader)/my-page/page.tsx | 19 ----------- 4 files changed, 55 insertions(+), 20 deletions(-) create mode 100644 src/app/(BackHeader)/my-page/@toast/page.tsx create mode 100644 src/app/(BackHeader)/my-page/layout.tsx diff --git a/src/app/(AppBarHeader)/layout.tsx b/src/app/(AppBarHeader)/layout.tsx index ce63ca6e..bcb28d26 100644 --- a/src/app/(AppBarHeader)/layout.tsx +++ b/src/app/(AppBarHeader)/layout.tsx @@ -6,7 +6,8 @@ export default function AppBarLayout({ children }: StrictPropsWithChildren) { <> {children} - + {/* TODO: 에러 고치기 .. */} + {/* */} ); } diff --git a/src/app/(BackHeader)/my-page/@toast/page.tsx b/src/app/(BackHeader)/my-page/@toast/page.tsx new file mode 100644 index 00000000..d364b476 --- /dev/null +++ b/src/app/(BackHeader)/my-page/@toast/page.tsx @@ -0,0 +1,36 @@ +'use client'; + +import React, { useEffect, useState } from 'react'; + +import { useToast } from '@/common'; +import { Toast as ToastComponent, ToastProps } from '@/common/components/Toast'; + +const Toast = () => { + const { getSavedToastInfo, clearSavedToast } = useToast(); + const [toastData, setToastData] = useState(null); + + useEffect(() => { + console.log('hi'); + setToastData(getSavedToastInfo()); + console.log(getSavedToastInfo()); + console.log(toastData); + + clearSavedToast(); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, []); + + if (toastData === null) { + return null; + } + + return ( + + ); +}; + +export default Toast; diff --git a/src/app/(BackHeader)/my-page/layout.tsx b/src/app/(BackHeader)/my-page/layout.tsx new file mode 100644 index 00000000..680d70a5 --- /dev/null +++ b/src/app/(BackHeader)/my-page/layout.tsx @@ -0,0 +1,17 @@ +import React, { PropsWithChildren } from 'react'; + +type Props = { + toast: React.ReactNode; +}; + +export default function MyPageLayout({ + children, + toast, +}: PropsWithChildren) { + return ( + <> + {children} + {toast} + + ); +} diff --git a/src/app/(BackHeader)/my-page/page.tsx b/src/app/(BackHeader)/my-page/page.tsx index 1198ee5a..9d564fb5 100644 --- a/src/app/(BackHeader)/my-page/page.tsx +++ b/src/app/(BackHeader)/my-page/page.tsx @@ -1,38 +1,19 @@ 'use client'; import Image from 'next/image'; import { useRouter } from 'next/navigation'; -import { useEffect, useState } from 'react'; import { GOOGLE_FORM_URL, ICON_URL } from '@/common'; import { Button } from '@/common/components/Button'; import { Text } from '@/common/components/Text'; -import { Toast, ToastProps } from '@/common/components/Toast'; -import { useToast } from '@/common/hooks/useToast'; import { LogoutBar } from './_components/LogoutBar'; import { UserInfo } from './_components/UserInfo'; const MyPage = () => { - const [toastData, setToastData] = useState(null); const router = useRouter(); - const { getSavedToastInfo, clearSavedToast } = useToast(); - useEffect(() => { - setToastData(getSavedToastInfo()); - clearSavedToast(); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, []); - return (
- {toastData && ( - - )}
From 60c24f786105e4ca432eba0648ac98e44698b1d5 Mon Sep 17 00:00:00 2001 From: chaaerim Date: Thu, 18 Jan 2024 01:25:48 +0900 Subject: [PATCH 2/8] =?UTF-8?q?=20:sparkles:=20feat:=20userInfo=20componen?= =?UTF-8?q?t=20parallel=20route=EB=A1=9C=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../{_components/UserInfo/index.tsx => @userInfo/page.tsx} | 4 +++- src/app/(BackHeader)/my-page/layout.tsx | 3 +++ src/app/(BackHeader)/my-page/page.tsx | 2 -- 3 files changed, 6 insertions(+), 3 deletions(-) rename src/app/(BackHeader)/my-page/{_components/UserInfo/index.tsx => @userInfo/page.tsx} (96%) diff --git a/src/app/(BackHeader)/my-page/_components/UserInfo/index.tsx b/src/app/(BackHeader)/my-page/@userInfo/page.tsx similarity index 96% rename from src/app/(BackHeader)/my-page/_components/UserInfo/index.tsx rename to src/app/(BackHeader)/my-page/@userInfo/page.tsx index 455dd237..22639698 100644 --- a/src/app/(BackHeader)/my-page/_components/UserInfo/index.tsx +++ b/src/app/(BackHeader)/my-page/@userInfo/page.tsx @@ -8,7 +8,7 @@ import { ICON_URL, IMAGE_URL } from '@/common'; import { Text } from '@/common/components/Text'; import { useAuth } from '@/common/hooks'; -export const UserInfo = () => { +const UserInfo = () => { const { user } = useAuth(); const [profileImage, setProfileImage] = useState(ICON_URL.EMOJI_BASE_GRAY); const router = useRouter(); @@ -43,3 +43,5 @@ export const UserInfo = () => {
); }; + +export default UserInfo; diff --git a/src/app/(BackHeader)/my-page/layout.tsx b/src/app/(BackHeader)/my-page/layout.tsx index 680d70a5..08d2b79c 100644 --- a/src/app/(BackHeader)/my-page/layout.tsx +++ b/src/app/(BackHeader)/my-page/layout.tsx @@ -2,14 +2,17 @@ import React, { PropsWithChildren } from 'react'; type Props = { toast: React.ReactNode; + userInfo: React.ReactNode; }; export default function MyPageLayout({ children, toast, + userInfo, }: PropsWithChildren) { return ( <> + {userInfo} {children} {toast} diff --git a/src/app/(BackHeader)/my-page/page.tsx b/src/app/(BackHeader)/my-page/page.tsx index 9d564fb5..3e5b5cac 100644 --- a/src/app/(BackHeader)/my-page/page.tsx +++ b/src/app/(BackHeader)/my-page/page.tsx @@ -7,14 +7,12 @@ import { Button } from '@/common/components/Button'; import { Text } from '@/common/components/Text'; import { LogoutBar } from './_components/LogoutBar'; -import { UserInfo } from './_components/UserInfo'; const MyPage = () => { const router = useRouter(); return (
-
From 10f419ecc0047b82e0f0db30df6351a341ec6fd5 Mon Sep 17 00:00:00 2001 From: chaaerim Date: Thu, 18 Jan 2024 01:36:48 +0900 Subject: [PATCH 3/8] =?UTF-8?q?=20:sparkles:=20feat:=20layout=20shifting?= =?UTF-8?q?=20=EB=B0=A9=EC=A7=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/(BackHeader)/my-page/@userInfo/page.tsx | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/src/app/(BackHeader)/my-page/@userInfo/page.tsx b/src/app/(BackHeader)/my-page/@userInfo/page.tsx index 22639698..217d9a78 100644 --- a/src/app/(BackHeader)/my-page/@userInfo/page.tsx +++ b/src/app/(BackHeader)/my-page/@userInfo/page.tsx @@ -24,7 +24,7 @@ const UserInfo = () => {
프로필 이미지
-
+
{user?.nickname} @@ -37,9 +37,11 @@ const UserInfo = () => { onClick={() => router.push('/nickname/update')} />
- - {user?.email} - +
+ + {user?.email} + +
); }; From 9678cd3ea53b93c63ea643b608cab747875dd945 Mon Sep 17 00:00:00 2001 From: chaaerim Date: Fri, 19 Jan 2024 14:37:51 +0900 Subject: [PATCH 4/8] =?UTF-8?q?=20:sparkles:=20feat:=20suspense=20?= =?UTF-8?q?=EC=9D=B4=EC=9A=A9=ED=95=98=EC=97=AC=20userInfo=20skeleton=20?= =?UTF-8?q?=EC=B2=98=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../(BackHeader)/my-page/@userInfo/page.tsx | 28 +++++++++++-------- .../SkeletonUserInfo.tsx/index.tsx | 23 +++++++++++++++ .../_lib/hooks/useSuspenseUserInfoQuery.ts | 10 +++++++ src/app/(BackHeader)/my-page/layout.tsx | 6 ++-- 4 files changed, 53 insertions(+), 14 deletions(-) create mode 100644 src/app/(BackHeader)/my-page/_components/SkeletonUserInfo.tsx/index.tsx create mode 100644 src/app/(BackHeader)/my-page/_lib/hooks/useSuspenseUserInfoQuery.ts diff --git a/src/app/(BackHeader)/my-page/@userInfo/page.tsx b/src/app/(BackHeader)/my-page/@userInfo/page.tsx index 217d9a78..65768dbe 100644 --- a/src/app/(BackHeader)/my-page/@userInfo/page.tsx +++ b/src/app/(BackHeader)/my-page/@userInfo/page.tsx @@ -1,28 +1,32 @@ 'use client'; +import { getCookie } from 'cookies-next'; import Image from 'next/image'; import { useRouter } from 'next/navigation'; -import { useEffect, useState } from 'react'; -import { ICON_URL, IMAGE_URL } from '@/common'; +import { ICON_URL } from '@/common'; import { Text } from '@/common/components/Text'; -import { useAuth } from '@/common/hooks'; + +import { useSuspenseUserInfoQuery } from '../_lib/hooks/useSuspenseUserInfoQuery'; const UserInfo = () => { - const { user } = useAuth(); - const [profileImage, setProfileImage] = useState(ICON_URL.EMOJI_BASE_GRAY); const router = useRouter(); - - useEffect(() => { - if (user && user.profileImageUrl !== IMAGE_URL.BASE_KAKAO) { - setProfileImage(user.profileImageUrl); - } - }, [user]); + const accessToken = getCookie('accessToken'); + const { data: user } = useSuspenseUserInfoQuery(accessToken as string); return (
- 프로필 이미지 + 프로필 이미지
diff --git a/src/app/(BackHeader)/my-page/_components/SkeletonUserInfo.tsx/index.tsx b/src/app/(BackHeader)/my-page/_components/SkeletonUserInfo.tsx/index.tsx new file mode 100644 index 00000000..dc7c1655 --- /dev/null +++ b/src/app/(BackHeader)/my-page/_components/SkeletonUserInfo.tsx/index.tsx @@ -0,0 +1,23 @@ +import Image from 'next/image'; + +import { ICON_URL } from '@/common'; +import { Skeleton } from '@/common/components/Skeleton'; + +export const SkeletonUserInfo = () => { + return ( +
+
+ 프로필 이미지 +
+
+ + +
+
+ ); +}; diff --git a/src/app/(BackHeader)/my-page/_lib/hooks/useSuspenseUserInfoQuery.ts b/src/app/(BackHeader)/my-page/_lib/hooks/useSuspenseUserInfoQuery.ts new file mode 100644 index 00000000..d0b8df1e --- /dev/null +++ b/src/app/(BackHeader)/my-page/_lib/hooks/useSuspenseUserInfoQuery.ts @@ -0,0 +1,10 @@ +import { useSuspenseQuery } from '@tanstack/react-query'; + +import { getUserInfo } from '@/common'; + +export const useSuspenseUserInfoQuery = (accessToken?: string) => { + return useSuspenseQuery({ + queryKey: ['userInfo', accessToken], + queryFn: getUserInfo, + }); +}; diff --git a/src/app/(BackHeader)/my-page/layout.tsx b/src/app/(BackHeader)/my-page/layout.tsx index 08d2b79c..1fd55e87 100644 --- a/src/app/(BackHeader)/my-page/layout.tsx +++ b/src/app/(BackHeader)/my-page/layout.tsx @@ -1,4 +1,6 @@ -import React, { PropsWithChildren } from 'react'; +import React, { PropsWithChildren, Suspense } from 'react'; + +import { SkeletonUserInfo } from './_components/SkeletonUserInfo.tsx'; type Props = { toast: React.ReactNode; @@ -12,7 +14,7 @@ export default function MyPageLayout({ }: PropsWithChildren) { return ( <> - {userInfo} + }>{userInfo} {children} {toast} From 7003a0544bdc862ac5faf614228e668d5b07cc27 Mon Sep 17 00:00:00 2001 From: chaaerim Date: Fri, 19 Jan 2024 16:26:02 +0900 Subject: [PATCH 5/8] =?UTF-8?q?=20:sparkles:=20feat:=20ssr=20=EA=B3=A0?= =?UTF-8?q?=EB=A0=A4=ED=95=98=EC=97=AC=20window=20undefined=20=EB=B6=84?= =?UTF-8?q?=EA=B8=B0=20=EC=B2=98=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/(BackHeader)/my-page/@toast/page.tsx | 1 - src/app/(BackHeader)/my-page/@userInfo/page.tsx | 6 +----- src/common/utils/http.ts | 3 +++ 3 files changed, 4 insertions(+), 6 deletions(-) diff --git a/src/app/(BackHeader)/my-page/@toast/page.tsx b/src/app/(BackHeader)/my-page/@toast/page.tsx index d364b476..1fbb8a81 100644 --- a/src/app/(BackHeader)/my-page/@toast/page.tsx +++ b/src/app/(BackHeader)/my-page/@toast/page.tsx @@ -10,7 +10,6 @@ const Toast = () => { const [toastData, setToastData] = useState(null); useEffect(() => { - console.log('hi'); setToastData(getSavedToastInfo()); console.log(getSavedToastInfo()); console.log(toastData); diff --git a/src/app/(BackHeader)/my-page/@userInfo/page.tsx b/src/app/(BackHeader)/my-page/@userInfo/page.tsx index 65768dbe..35de8485 100644 --- a/src/app/(BackHeader)/my-page/@userInfo/page.tsx +++ b/src/app/(BackHeader)/my-page/@userInfo/page.tsx @@ -18,11 +18,7 @@ const UserInfo = () => {
프로필 이미지 { const isDev = process.env.NODE_ENV === 'development'; + if (typeof window === 'undefined') { + return; + } window.location.href = isDev ? 'http://localhost:3000/toks-main' From 8dc310485290db2915b847f1c7534f131f4cf118 Mon Sep 17 00:00:00 2001 From: chaaerim Date: Fri, 19 Jan 2024 17:06:36 +0900 Subject: [PATCH 6/8] =?UTF-8?q?=20:sparkles:=20feat:=20server=20render?= =?UTF-8?q?=EC=8B=9C=20userInfo=20null=EC=9D=B8=20=EA=B2=BD=EC=9A=B0=20?= =?UTF-8?q?=EC=B2=98=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/(BackHeader)/my-page/@toast/page.tsx | 2 -- src/app/(BackHeader)/my-page/@userInfo/page.tsx | 12 ++++++++---- 2 files changed, 8 insertions(+), 6 deletions(-) diff --git a/src/app/(BackHeader)/my-page/@toast/page.tsx b/src/app/(BackHeader)/my-page/@toast/page.tsx index 1fbb8a81..7b76c587 100644 --- a/src/app/(BackHeader)/my-page/@toast/page.tsx +++ b/src/app/(BackHeader)/my-page/@toast/page.tsx @@ -11,8 +11,6 @@ const Toast = () => { useEffect(() => { setToastData(getSavedToastInfo()); - console.log(getSavedToastInfo()); - console.log(toastData); clearSavedToast(); // eslint-disable-next-line react-hooks/exhaustive-deps diff --git a/src/app/(BackHeader)/my-page/@userInfo/page.tsx b/src/app/(BackHeader)/my-page/@userInfo/page.tsx index 35de8485..4c29c4fd 100644 --- a/src/app/(BackHeader)/my-page/@userInfo/page.tsx +++ b/src/app/(BackHeader)/my-page/@userInfo/page.tsx @@ -7,18 +7,22 @@ import { useRouter } from 'next/navigation'; import { ICON_URL } from '@/common'; import { Text } from '@/common/components/Text'; +import { SkeletonUserInfo } from '../_components/SkeletonUserInfo.tsx'; import { useSuspenseUserInfoQuery } from '../_lib/hooks/useSuspenseUserInfoQuery'; const UserInfo = () => { const router = useRouter(); const accessToken = getCookie('accessToken'); - const { data: user } = useSuspenseUserInfoQuery(accessToken as string); + const { data: userInfo } = useSuspenseUserInfoQuery(accessToken as string); + if (!userInfo) { + return ; + } return (
프로필 이미지 {
- {user?.nickname} + {userInfo?.nickname} {
- {user?.email} + {userInfo?.email}
From 51c84e84df86e900b082a8ca0448776b1d9b278b Mon Sep 17 00:00:00 2001 From: chaaerim Date: Fri, 19 Jan 2024 17:16:41 +0900 Subject: [PATCH 7/8] =?UTF-8?q?=20:sparkles:=20feat:=20GoogleFormButton=20?= =?UTF-8?q?=EB=B6=84=EB=A6=AC=20=EB=B0=8F=20mypage=20=EC=84=9C=EB=B2=84?= =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=EB=A1=9C=20=EB=B3=80?= =?UTF-8?q?=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../_components/GoogleFormButton/index.tsx | 23 +++++++++++++++++++ src/app/(BackHeader)/my-page/page.tsx | 19 +++------------ 2 files changed, 26 insertions(+), 16 deletions(-) create mode 100644 src/app/(BackHeader)/my-page/_components/GoogleFormButton/index.tsx diff --git a/src/app/(BackHeader)/my-page/_components/GoogleFormButton/index.tsx b/src/app/(BackHeader)/my-page/_components/GoogleFormButton/index.tsx new file mode 100644 index 00000000..11ef2703 --- /dev/null +++ b/src/app/(BackHeader)/my-page/_components/GoogleFormButton/index.tsx @@ -0,0 +1,23 @@ +'use client'; +import { useRouter } from 'next/navigation'; + +import { GOOGLE_FORM_URL } from '@/common'; +import { Button } from '@/common/components/Button'; + +export const GoogleFormButton = () => { + const router = useRouter(); + + return ( + + ); +}; diff --git a/src/app/(BackHeader)/my-page/page.tsx b/src/app/(BackHeader)/my-page/page.tsx index 3e5b5cac..82ffbcca 100644 --- a/src/app/(BackHeader)/my-page/page.tsx +++ b/src/app/(BackHeader)/my-page/page.tsx @@ -1,15 +1,12 @@ -'use client'; import Image from 'next/image'; -import { useRouter } from 'next/navigation'; -import { GOOGLE_FORM_URL, ICON_URL } from '@/common'; -import { Button } from '@/common/components/Button'; +import { ICON_URL } from '@/common'; import { Text } from '@/common/components/Text'; +import { GoogleFormButton } from './_components/GoogleFormButton'; import { LogoutBar } from './_components/LogoutBar'; const MyPage = () => { - const router = useRouter(); return (
@@ -26,17 +23,7 @@ const MyPage = () => { height={160} alt="로켓 이미지" /> - +
); From a6e239b0ec6fa77dbb68eab9134caaa7bfcb11f3 Mon Sep 17 00:00:00 2001 From: chaaerim Date: Sat, 20 Jan 2024 18:48:42 +0900 Subject: [PATCH 8/8] =?UTF-8?q?=20:bug:=20fix:=20import=20=EC=97=90?= =?UTF-8?q?=EB=9F=AC=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/(AppBarHeader)/layout.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/app/(AppBarHeader)/layout.tsx b/src/app/(AppBarHeader)/layout.tsx index bcb28d26..7c340d27 100644 --- a/src/app/(AppBarHeader)/layout.tsx +++ b/src/app/(AppBarHeader)/layout.tsx @@ -1,5 +1,4 @@ import { Appbar } from './_components/Appbar'; -import { CategoryBottomSheet } from './toks-main/_components/CategoryBottomSheet'; export default function AppBarLayout({ children }: StrictPropsWithChildren) { return (