[#456] [프로필] 프로필 페이지

src/app/bookarchive/page.tsx

@@ -11,7 +11,7 @@ import TopHeader from '@/v1/base/TopHeader';
 export default function BookArchivePage() {
   return (
     <div className="flex w-full flex-col gap-[1rem]">
-      <TopHeader pathname="/bookarchive" />
+      <TopHeader text="BookArchvie" />
       {/* TODO: 스켈레톤 컴포넌트로 교체 */}
       <Suspense fallback={null}>
         <Contents />

src/app/bookshelf/[bookshelfId]/page.tsx

@@ -2,24 +2,20 @@
 
 import { useEffect } from 'react';
 import { useInView } from 'react-intersection-observer';
-import { useRouter } from 'next/navigation';
 import Link from 'next/link';
-
-import type { APIBookshelf, APIBookshelfInfo } from '@/types/bookshelf';
-
 import useBookShelfBooksQuery from '@/queries/bookshelf/useBookShelfBookListQuery';
 import useBookShelfInfoQuery from '@/queries/bookshelf/useBookShelfInfoQuery';
 import useMutateBookshelfLikeQuery from '@/queries/bookshelf/useMutateBookshelfLikeQuery';
-
 import useToast from '@/v1/base/Toast/useToast';
 import { isAuthed } from '@/utils/helpers';
-
-import { IconArrowLeft, IconShare, IconKakao } from '@public/icons';
-
+import { IconKakao } from '@public/icons';
 import TopNavigation from '@/v1/base/TopNavigation';
 import BookShelfRow from '@/v1/bookShelf/BookShelfRow';
 import Button from '@/v1/base/Button';
 import LikeButton from '@/v1/base/LikeButton';
+import BackButton from '@/v1/base/BackButton';
+import ShareButton from '@/v1/base/ShareButton';
+import type { APIBookshelf, APIBookshelfInfo } from '@/types/bookshelf';
 
 const KAKAO_OAUTH_LOGIN_URL = `${process.env.NEXT_PUBLIC_API_URL}/oauth2/authorize/kakao?redirect_uri=${process.env.NEXT_PUBLIC_CLIENT_REDIRECT_URI}`;
 
@@ -34,23 +30,9 @@ export default function UserBookShelfPage({
   const { mutate: mutateBookshelfLike } =
     useMutateBookshelfLikeQuery(bookshelfId);
   const { show: showToast } = useToast();
-  const router = useRouter();
 
   if (!isSuccess) return null;
 
-  const handleClickShareButton = () => {
-    const url = window.location.href;
-
-    navigator.clipboard
-      .writeText(url)
-      .then(() => {
-        showToast({ message: '링크를 복사했어요.', type: 'success' });
-      })
-      .catch(() => {
-        showToast({ message: '잠시 후 다시 시도해주세요', type: 'error' });
-      });
-  };
-
   const handleClickLikeButton = () => {
     if (!isAuthed()) {
       showToast({ message: '로그인 후 이용해주세요.', type: 'normal' });
@@ -64,14 +46,10 @@ export default function UserBookShelfPage({
     <div className="flex w-full flex-col">
       <TopNavigation>
         <TopNavigation.LeftItem>
-          <button onClick={() => router.back()}>
-            <IconArrowLeft />
-          </button>
+          <BackButton />
         </TopNavigation.LeftItem>
         <TopNavigation.RightItem>
-          <button onClick={handleClickShareButton}>
-            <IconShare />
-          </button>
+          <ShareButton />
         </TopNavigation.RightItem>
       </TopNavigation>
       <div className="mt-[0.8rem] flex flex-col gap-[0.8rem] pb-[2rem] pt-[1rem] font-bold">

src/app/group/page.tsx

@@ -6,7 +6,7 @@ import SimpleBookGroupCard from '@/v1/bookGroup/SimpleBookGroupCard';
 import DetailBookGroupCard from '@/v1/bookGroup/DetailBookGroupCard';
 
 import useEntireGroupsQuery from '@/queries/group/useEntireGroupsQuery';
-import useMyGroupsQuery from '@/queries/group/useMyGroupsQuery';
+import useMyGroupsQuery from '@/queries/group/useMyGroupQuery';
 import { Skeleton, VStack } from '@chakra-ui/react';
 import { useEffect } from 'react';
 import { useInView } from 'react-intersection-observer';
@@ -44,7 +44,7 @@ const GroupPage = () => {
 
   return (
     <>
-      <TopHeader pathname={'/group'} />
+      <TopHeader text="Group" />
       <div className="mt-[2rem] flex w-full flex-col gap-[1.5rem]">
         <SearchGroup
           onClick={() => {

src/app/profile/[userId]/page.tsx

@@ -1,24 +1,32 @@
 'use client';
 
 import { APIUser } from '@/types/user';
-import TopNavigation from '@/ui/common/TopNavigation';
-import ProfileBookShelf from '@/ui/Profile/ProfileBookshelf';
-import ProfileInfo from '@/ui/Profile/ProfileInfo';
-import { VStack } from '@chakra-ui/react';
+import BackButton from '@/v1/base/BackButton';
+import ShareButton from '@/v1/base/ShareButton';
+import TopNavigation from '@/v1/base/TopNavigation';
+import ProfileBookShelf from '@/v1/profile/bookShelf/ProfileBookShelf';
+import ProfileInfo from '@/v1/profile/info/ProfileInfo';
 
 const UserProfilePage = ({
   params: { userId },
 }: {
   params: { userId: APIUser['userId'] };
 }) => {
   return (
-    <VStack justify="center" align="flex-start" w="100%">
-      <TopNavigation pageTitle="" />
-      <VStack justify="flex-start" gap="2rem" w="100%">
+    <>
+      <TopNavigation>
+        <TopNavigation.LeftItem>
+          <BackButton />
+        </TopNavigation.LeftItem>
+        <TopNavigation.RightItem>
+          <ShareButton />
+        </TopNavigation.RightItem>
+      </TopNavigation>
+      <div className="mt-[1.5rem] flex flex-col gap-[2rem]">
         <ProfileInfo userId={userId} />
         <ProfileBookShelf userId={userId} />
-      </VStack>
-    </VStack>
+      </div>
+    </>
   );
 };
 

src/app/profile/me/group/page.tsx

@@ -0,0 +1,5 @@
+const UserGroupPage = () => {
+  return '준비중입니다.';
+};
+
+export default UserGroupPage;

src/app/profile/me/page.tsx

@@ -1,54 +1,99 @@
 'use client';
 
-import { Box, VStack } from '@chakra-ui/react';
-import Link from 'next/link';
-import { usePathname, useRouter } from 'next/navigation';
-
-import AuthRequired from '@/ui/AuthRequired';
-import ProfileInfo from '@/ui/Profile/ProfileInfo';
-import ProfileBookShelf from '@/ui/Profile/ProfileBookshelf';
-import ProfileGroup from '@/ui/Profile/ProfileGroup';
-import Button from '@/ui/common/Button';
-import { Menu, MenuItem } from '@/ui/common/Menu';
-import { removeAuth } from '@/utils/helpers';
+import { useRouter } from 'next/navigation';
+import { isAuthed, removeAuth } from '@/utils/helpers';
 import userAPI from '@/apis/user';
+import TopHeader from '@/v1/base/TopHeader';
+import ProfileInfo from '@/v1/profile/info/ProfileInfo';
+import ProfileBookShelf from '@/v1/profile/bookShelf/ProfileBookShelf';
+import ProfileGroup from '@/v1/profile/group/ProfileGroup';
+import Avatar from '@/v1/base/Avatar';
+import Link from 'next/link';
+import { IconArrowRight } from '@public/icons';
+import BookShelf from '@/v1/bookShelf/BookShelf';
+import SSRSafeSuspense from '@/components/SSRSafeSuspense';
+import Loading from '@/v1/base/Loading';
+import Button from '@/v1/base/Button';
+
+const USER_ID = 'me';
+const KAKAO_LOGIN_URL = `${process.env.NEXT_PUBLIC_API_URL}/oauth2/authorize/kakao?redirect_uri=${process.env.NEXT_PUBLIC_CLIENT_REDIRECT_URI}`;
 
 const MyProfilePage = () => {
-  const { push } = useRouter();
-  const pathname = usePathname();
+  return (
+    <SSRSafeSuspense fallback={<Loading fullpage />}>
+      {isAuthed() ? <MyProfileForAuth /> : <MyProfileForUnAuth />}
+    </SSRSafeSuspense>
+  );
+};
+
+const MyProfileForUnAuth = () => {
+  return (
+    <>
+      <TopHeader text="Profile" />
+      <div className="flex flex-col gap-[2rem]">
+        <div className="mb-[2rem] flex items-center gap-[1rem]">
+          <Avatar size="large" />
+          <div className="flex-grow">
+            <h2 className="text-lg font-bold">로그인 / 회원가입</h2>
+            <p className="text-sm text-placeholder">
+              카카오로 3초만에 가입할 수 있어요.
+            </p>
+          </div>
+          <Link href={KAKAO_LOGIN_URL}>
+            <IconArrowRight width="20px" />
+          </Link>
+        </div>
+        <div className="flex flex-col gap-[0.6rem]">
+          <div className="flex items-center justify-between">
+            <h3 className="text-lg font-bold">책장</h3>
+          </div>
+          <BookShelf>
+            <div className="w-app pb-[2.5rem] pt-[2rem] shadow-[0px_20px_20px_-16px_#D1D1D1]">
+              <BookShelf.Background />
+              <div className="pb-[5.5rem] pt-[3rem] text-center">
+                <p className="text-sm text-placeholder">책장이 비었어요.</p>
+              </div>
+            </div>
+          </BookShelf>
+        </div>
+        <div className="flex flex-col gap-[0.6rem]">
+          <h3 className="text-lg font-bold">참여한 모임</h3>
+          <div className="pb-[5.5rem] pt-[5.5rem] text-center">
+            <p className="text-sm text-placeholder">참여 중인 모임이 없어요.</p>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
+
+const MyProfileForAuth = () => {
+  const router = useRouter();
 
   const handleLogoutButtonClick = async () => {
     await userAPI.logout();
     removeAuth();
-    push('/');
+    router.refresh();
   };
 
   return (
-    <AuthRequired>
-      <VStack justify="center" align="flex-start">
-        <Box alignSelf="flex-end">
-          <Menu>
-            <MenuItem text="로그아웃" onClick={handleLogoutButtonClick} />
-          </Menu>
-        </Box>
-        <VStack w="100%" align="flex-start" gap="2rem">
-          <ProfileInfo userId="me">
-            <Button
-              as={Link}
-              href={`${pathname}/edit`}
-              scheme="orange"
-              fullWidth
-              bgColor="main"
-              color="white.900"
-            >
+    <>
+      <TopHeader text="Profile">
+        <button onClick={handleLogoutButtonClick}>로그아웃</button>
+      </TopHeader>
+      <div className="flex flex-col gap-[2rem]">
+        <ProfileInfo userId={USER_ID} />
+        <Link href="/profile/me/edit" className="w-full">
+          <Button colorScheme="main-light" size="full">
+            <span className="mr-[0.5rem] text-sm font-bold text-black-700">
               프로필 수정
-            </Button>
-          </ProfileInfo>
-          <ProfileBookShelf userId="me" />
-          <ProfileGroup />
-        </VStack>
-      </VStack>
-    </AuthRequired>
+            </span>
+          </Button>
+        </Link>
+        <ProfileBookShelf userId={USER_ID} />
+        <ProfileGroup userId={USER_ID} />
+      </div>
+    </>
   );
 };
 

src/queries/bookshelf/key.ts

@@ -6,6 +6,7 @@ const bookShelfKeys = {
     [...bookShelfKeys.all, bookshelfId] as const,
   books: (bookshelfId: APIBookshelf['bookshelfId']) =>
     [...bookShelfKeys.all, bookshelfId, 'books'] as const,
+  summary: (userId: string) => [...bookShelfKeys.all, 'summary', userId],
 };
 
 export default bookShelfKeys;

src/queries/bookshelf/useMySummaryBookshelfQuery/index.ts → src/queries/bookshelf/useMySummaryBookShelfQuery.ts

@@ -2,10 +2,11 @@ import bookshelfAPI from '@/apis/bookshelf';
 import { useQuery } from '@tanstack/react-query';
 import type { QueryOptions } from '@/types/query';
 import type { APIBookshelf } from '@/types/bookshelf';
+import bookShelfKeys from './key';
 
 const useMySummaryBookshlefQuery = (options?: QueryOptions<APIBookshelf>) =>
   useQuery(
-    ['summaryBookshlef', 'me'],
+    bookShelfKeys.summary('me'),
     () => bookshelfAPI.getMySummaryBookshelf().then(({ data }) => data),
     options
   );

src/queries/bookshelf/useUserSummaryBookshelfQuery/index.ts → src/queries/bookshelf/useUserSummaryBookShelfQuery.ts

@@ -1,15 +1,16 @@
 import bookshelfAPI from '@/apis/bookshelf';
-import { useQuery } from '@tanstack/react-query';
 import type { QueryOptions } from '@/types/query';
 import type { APIUser } from '@/types/user';
 import type { APIBookshelf } from '@/types/bookshelf';
+import bookShelfKeys from './key';
+import useQueryWithSuspense from '@/hooks/useQueryWithSuspense';
 
 const useUserSummaryBookshlefQuery = (
   userId: APIUser['userId'],
   options?: QueryOptions<APIBookshelf>
 ) =>
-  useQuery(
-    ['summaryBookshlef', String(userId)],
+  useQueryWithSuspense(
+    bookShelfKeys.summary(String(userId)),
     () =>
       bookshelfAPI.getUserSummaryBookshelf({ userId }).then(({ data }) => data),
     options

src/queries/group/key.ts

@@ -7,6 +7,7 @@ const bookGroupKeys = {
     [...bookGroupKeys.details(), id] as const,
   comments: (id: APIGroupDetail['bookGroupId']) =>
     [...bookGroupKeys.details(), id, 'comments'] as const,
+  me: () => [...bookGroupKeys.all, 'me'],
 };
 
 export default bookGroupKeys;

src/queries/group/useMyGroupsQuery/index.ts → src/queries/group/useMyGroupQuery.ts

@@ -2,10 +2,11 @@ import GroupAPI from '@/apis/group';
 import { useQuery } from '@tanstack/react-query';
 import type { QueryOptions } from '@/types/query';
 import type { APIGroupPagination } from '@/types/group';
+import bookGroupKeys from './key';
 
 const useMyGroupsQuery = (options?: QueryOptions<APIGroupPagination>) =>
   useQuery(
-    ['groups', 'me'],
+    bookGroupKeys.me(),
     () => GroupAPI.getMyGroups().then(({ data }) => data),
     options
   );

src/stories/base/TopHeader.stories.tsx

@@ -13,12 +13,12 @@ export default meta;
 type Story = StoryObj<typeof TopHeader>;
 
 export const Default: Story = {
-  args: { pathname: '/bookarchive' },
+  args: { text: 'BookArchive' },
   render: args => <TopHeader {...args} />,
 };
 
 export const WithMenu: Story = {
-  args: { pathname: '/profile/me' },
+  args: { text: 'Profile' },
   render: args => (
     <TopHeader {...args}>
       <button