diff --git a/src/app/bookarchive/page.tsx b/src/app/bookarchive/page.tsx index 3e884636..5234880d 100644 --- a/src/app/bookarchive/page.tsx +++ b/src/app/bookarchive/page.tsx @@ -11,7 +11,7 @@ import TopHeader from '@/v1/base/TopHeader'; export default function BookArchivePage() { return (
- + {/* TODO: 스켈레톤 컴포넌트로 교체 */} diff --git a/src/app/bookshelf/[bookshelfId]/page.tsx b/src/app/bookshelf/[bookshelfId]/page.tsx index aa2d808d..a9c103d2 100644 --- a/src/app/bookshelf/[bookshelfId]/page.tsx +++ b/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({
- + - +
diff --git a/src/app/group/page.tsx b/src/app/group/page.tsx index a2c4d79c..727eaec5 100644 --- a/src/app/group/page.tsx +++ b/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 ( <> - +
{ diff --git a/src/app/profile/[userId]/page.tsx b/src/app/profile/[userId]/page.tsx index 4ee797d9..5ba75f9e 100644 --- a/src/app/profile/[userId]/page.tsx +++ b/src/app/profile/[userId]/page.tsx @@ -1,10 +1,11 @@ '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 }, @@ -12,13 +13,20 @@ const UserProfilePage = ({ params: { userId: APIUser['userId'] }; }) => { return ( - - - + <> + + + + + + + + +
- - +
+ ); }; diff --git a/src/app/profile/me/group/page.tsx b/src/app/profile/me/group/page.tsx new file mode 100644 index 00000000..d8fb99f9 --- /dev/null +++ b/src/app/profile/me/group/page.tsx @@ -0,0 +1,5 @@ +const UserGroupPage = () => { + return '준비중입니다.'; +}; + +export default UserGroupPage; diff --git a/src/app/profile/me/page.tsx b/src/app/profile/me/page.tsx index 775cb20b..7ad0e955 100644 --- a/src/app/profile/me/page.tsx +++ b/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 ( + }> + {isAuthed() ? : } + + ); +}; + +const MyProfileForUnAuth = () => { + return ( + <> + +
+
+ +
+

로그인 / 회원가입

+

+ 카카오로 3초만에 가입할 수 있어요. +

+
+ + + +
+
+
+

책장

+
+ +
+ +
+

책장이 비었어요.

+
+
+ +
+
+

참여한 모임

+
+

참여 중인 모임이 없어요.

+
+
+
+ + ); +}; + +const MyProfileForAuth = () => { + const router = useRouter(); const handleLogoutButtonClick = async () => { await userAPI.logout(); removeAuth(); - push('/'); + router.refresh(); }; return ( - - - - - - - - - - + +
+ + + - - - - - - + + + + + +
+ ); }; diff --git a/src/queries/bookshelf/key.ts b/src/queries/bookshelf/key.ts index ff7a145e..3264767b 100644 --- a/src/queries/bookshelf/key.ts +++ b/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; diff --git a/src/queries/bookshelf/useMySummaryBookshelfQuery/index.ts b/src/queries/bookshelf/useMySummaryBookShelfQuery.ts similarity index 86% rename from src/queries/bookshelf/useMySummaryBookshelfQuery/index.ts rename to src/queries/bookshelf/useMySummaryBookShelfQuery.ts index a359cd56..03f03527 100644 --- a/src/queries/bookshelf/useMySummaryBookshelfQuery/index.ts +++ b/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) => useQuery( - ['summaryBookshlef', 'me'], + bookShelfKeys.summary('me'), () => bookshelfAPI.getMySummaryBookshelf().then(({ data }) => data), options ); diff --git a/src/queries/bookshelf/useUserSummaryBookshelfQuery/index.ts b/src/queries/bookshelf/useUserSummaryBookShelfQuery.ts similarity index 73% rename from src/queries/bookshelf/useUserSummaryBookshelfQuery/index.ts rename to src/queries/bookshelf/useUserSummaryBookShelfQuery.ts index 33f3da4d..d6795eac 100644 --- a/src/queries/bookshelf/useUserSummaryBookshelfQuery/index.ts +++ b/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 ) => - useQuery( - ['summaryBookshlef', String(userId)], + useQueryWithSuspense( + bookShelfKeys.summary(String(userId)), () => bookshelfAPI.getUserSummaryBookshelf({ userId }).then(({ data }) => data), options diff --git a/src/queries/group/key.ts b/src/queries/group/key.ts index 1fba2efb..f3e4171b 100644 --- a/src/queries/group/key.ts +++ b/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; diff --git a/src/queries/group/useGroupInfoQuery/index.tsx b/src/queries/group/useGroupInfoQuery.ts similarity index 100% rename from src/queries/group/useGroupInfoQuery/index.tsx rename to src/queries/group/useGroupInfoQuery.ts diff --git a/src/queries/group/useMyGroupsQuery/index.ts b/src/queries/group/useMyGroupQuery.ts similarity index 86% rename from src/queries/group/useMyGroupsQuery/index.ts rename to src/queries/group/useMyGroupQuery.ts index 0359c691..6d77c7ad 100644 --- a/src/queries/group/useMyGroupsQuery/index.ts +++ b/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) => useQuery( - ['groups', 'me'], + bookGroupKeys.me(), () => GroupAPI.getMyGroups().then(({ data }) => data), options ); diff --git a/src/stories/base/TopHeader.stories.tsx b/src/stories/base/TopHeader.stories.tsx index 930ba8dc..a2a00cc5 100644 --- a/src/stories/base/TopHeader.stories.tsx +++ b/src/stories/base/TopHeader.stories.tsx @@ -13,12 +13,12 @@ export default meta; type Story = StoryObj; export const Default: Story = { - args: { pathname: '/bookarchive' }, + args: { text: 'BookArchive' }, render: args => , }; export const WithMenu: Story = { - args: { pathname: '/profile/me' }, + args: { text: 'Profile' }, render: args => ( - - ); -}; - -export default QueryErrorBounaryFallback; diff --git a/src/v1/base/BackButton.tsx b/src/v1/base/BackButton.tsx new file mode 100644 index 00000000..be06f709 --- /dev/null +++ b/src/v1/base/BackButton.tsx @@ -0,0 +1,13 @@ +import { IconArrowLeft } from '@public/icons'; +import { useRouter } from 'next/navigation'; + +const BackButton = () => { + const router = useRouter(); + return ( + + ); +}; + +export default BackButton; diff --git a/src/v1/base/QueryErrorBoundaryFallback.tsx b/src/v1/base/QueryErrorBoundaryFallback.tsx new file mode 100644 index 00000000..3a727f49 --- /dev/null +++ b/src/v1/base/QueryErrorBoundaryFallback.tsx @@ -0,0 +1,20 @@ +import Button from '@/v1/base/Button'; + +const QueryErrorBoundaryFallback = ({ + resetErrorBoundary, +}: { + resetErrorBoundary: (...args: unknown[]) => void; +}) => { + return ( +
+

+ 데이터를 불러오는 중 문제가 발생했어요. +

+ +
+ ); +}; + +export default QueryErrorBoundaryFallback; diff --git a/src/v1/base/ShareButton.tsx b/src/v1/base/ShareButton.tsx new file mode 100644 index 00000000..c685e353 --- /dev/null +++ b/src/v1/base/ShareButton.tsx @@ -0,0 +1,27 @@ +import { IconShare } from '@public/icons'; +import useToast from './Toast/useToast'; + +const ShareButton = () => { + const { show: showToast } = useToast(); + + const handleClickShareButton = () => { + const url = window.location.href; + + navigator.clipboard + .writeText(url) + .then(() => { + showToast({ message: '링크를 복사했어요.', type: 'success' }); + }) + .catch(() => { + showToast({ message: '잠시 후 다시 시도해주세요', type: 'error' }); + }); + }; + + return ( + + ); +}; + +export default ShareButton; diff --git a/src/v1/base/TopHeader.tsx b/src/v1/base/TopHeader.tsx index fea734fd..c7a7938d 100644 --- a/src/v1/base/TopHeader.tsx +++ b/src/v1/base/TopHeader.tsx @@ -1,32 +1,13 @@ import { PropsWithChildren } from 'react'; type TopHeaderProps = PropsWithChildren<{ - pathname: string; + text: string; }>; -const getHeaderLabel = (pathname: string) => { - switch (pathname) { - case '/bookarchive': { - return 'BookArchive'; - } - case '/book/search': { - return 'Search'; - } - case '/group': { - return 'Group'; - } - case '/profile/me': { - return 'Profile'; - } - } -}; - -const TopHeader = ({ pathname, children }: TopHeaderProps) => { +const TopHeader = ({ text, children }: TopHeaderProps) => { return ( -
-

- {getHeaderLabel(pathname)} -

+
+

{text}

{children}
); diff --git a/src/ui/Profile/ProfileBookshelf/MyProfileBookshelfContainer.tsx b/src/v1/profile/bookShelf/MyProfileBookshelfContainer.tsx similarity index 94% rename from src/ui/Profile/ProfileBookshelf/MyProfileBookshelfContainer.tsx rename to src/v1/profile/bookShelf/MyProfileBookshelfContainer.tsx index 5a0a9ab7..6a374400 100644 --- a/src/ui/Profile/ProfileBookshelf/MyProfileBookshelfContainer.tsx +++ b/src/v1/profile/bookShelf/MyProfileBookshelfContainer.tsx @@ -1,5 +1,5 @@ import ProfileBookshelfPresenter from './ProfileBookshelfPresenter'; -import useMySummaryBookshlefQuery from '@/queries/bookshelf/useMySummaryBookshelfQuery'; +import useMySummaryBookshlefQuery from '@/queries/bookshelf/useMySummaryBookShelfQuery'; const MyProfileBookshelfContainer = () => { const { isSuccess, data } = useMySummaryBookshlefQuery({ diff --git a/src/ui/Profile/ProfileBookshelf/index.tsx b/src/v1/profile/bookShelf/ProfileBookShelf.tsx similarity index 68% rename from src/ui/Profile/ProfileBookshelf/index.tsx rename to src/v1/profile/bookShelf/ProfileBookShelf.tsx index 1aedcccb..9082f9c8 100644 --- a/src/ui/Profile/ProfileBookshelf/index.tsx +++ b/src/v1/profile/bookShelf/ProfileBookShelf.tsx @@ -1,5 +1,4 @@ -import QueryErrorBounaryFallback from '@/ui/common/QueryErrorBoundaryFallback'; -import { Skeleton } from '@chakra-ui/react'; +import QueryErrorBoundaryFallback from '@/v1/base/QueryErrorBoundaryFallback'; import { QueryErrorResetBoundary } from '@tanstack/react-query'; import { Suspense } from 'react'; import { ErrorBoundary } from 'react-error-boundary'; @@ -7,6 +6,7 @@ import type { APIUser } from '@/types/user'; import MyProfileBookshelfContainer from './MyProfileBookshelfContainer'; import UserProfileBookshelfContainer from './UserProfileBookshelfContainer'; import useMounted from '@/hooks/useMounted'; +import Loading from '@/v1/base/Loading'; const ProfileBookShelf = ({ userId }: { userId: 'me' | APIUser['userId'] }) => { const mounted = useMounted(); @@ -19,13 +19,12 @@ const ProfileBookShelf = ({ userId }: { userId: 'me' | APIUser['userId'] }) => { ( - )} > - }> + }> {userId === 'me' ? ( ) : ( @@ -40,6 +39,14 @@ const ProfileBookShelf = ({ userId }: { userId: 'me' | APIUser['userId'] }) => { export default ProfileBookShelf; -const ProfileBookShelfSkelenton = () => { - return ; +const ProfileBookShelfSkeleton = () => { + return ( +
+
+ +
+ +
+
+ ); }; diff --git a/src/v1/profile/bookShelf/ProfileBookshelfPresenter.tsx b/src/v1/profile/bookShelf/ProfileBookshelfPresenter.tsx new file mode 100644 index 00000000..5dae0856 --- /dev/null +++ b/src/v1/profile/bookShelf/ProfileBookshelfPresenter.tsx @@ -0,0 +1,45 @@ +import { APIBookshelf } from '@/types/bookshelf'; + +import Badge from '@/v1/base/Badge'; +import BookShelf from '@/v1/bookShelf/BookShelf'; + +import { IconArrowRight, IconHeart } from '@public/icons'; +import Link from 'next/link'; + +const ProfileBookshelfPresenter = ({ + bookshelfId, + books, + likeCount, +}: APIBookshelf) => { + return ( +
+
+

책장

+
+ +
+ +
{likeCount}
+
+ + + + +
+
+ +
+ + +
+ +
+ ); +}; + +export default ProfileBookshelfPresenter; diff --git a/src/ui/Profile/ProfileBookshelf/UserProfileBookshelfContainer.tsx b/src/v1/profile/bookShelf/UserProfileBookshelfContainer.tsx similarity index 94% rename from src/ui/Profile/ProfileBookshelf/UserProfileBookshelfContainer.tsx rename to src/v1/profile/bookShelf/UserProfileBookshelfContainer.tsx index 61484091..7b801756 100644 --- a/src/ui/Profile/ProfileBookshelf/UserProfileBookshelfContainer.tsx +++ b/src/v1/profile/bookShelf/UserProfileBookshelfContainer.tsx @@ -1,5 +1,5 @@ import ProfileBookshelfPresenter from './ProfileBookshelfPresenter'; -import useUserSummaryBookshlefQuery from '@/queries/bookshelf/useUserSummaryBookshelfQuery'; +import useUserSummaryBookshlefQuery from '@/queries/bookshelf/useUserSummaryBookShelfQuery'; import type { APIUser } from '@/types/user'; const UserProfileBookshelfContainer = ({ diff --git a/src/v1/profile/group/ProfileGroup.tsx b/src/v1/profile/group/ProfileGroup.tsx new file mode 100644 index 00000000..131b9167 --- /dev/null +++ b/src/v1/profile/group/ProfileGroup.tsx @@ -0,0 +1,56 @@ +import useMounted from '@/hooks/useMounted'; +import { APIUser } from '@/types/user'; +import QueryErrorBoundaryFallback from '@/v1/base/QueryErrorBoundaryFallback'; +import { QueryErrorResetBoundary } from '@tanstack/react-query'; +import { Suspense } from 'react'; +import { ErrorBoundary } from 'react-error-boundary'; +import ProfileGroupContainer from './ProfileGroupContainer'; + +const ProfileGroup = ({ userId }: { userId: 'me' | APIUser['userId'] }) => { + const mounted = useMounted(); + + if (!mounted) return null; + + return ( + + {({ reset }) => ( + ( + + )} + > + }> + + + + )} + + ); +}; + +export default ProfileGroup; + +const ProfileGroupSkeleton = () => { + return ( +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ); +}; diff --git a/src/v1/profile/group/ProfileGroupContainer.tsx b/src/v1/profile/group/ProfileGroupContainer.tsx new file mode 100644 index 00000000..77baa13b --- /dev/null +++ b/src/v1/profile/group/ProfileGroupContainer.tsx @@ -0,0 +1,17 @@ +import useMyGroupsQuery from '@/queries/group/useMyGroupQuery'; +import { APIUser } from '@/types/user'; +import ProfileGroupPresenter from './ProfileGroupPresenter'; + +const ProfileGroupContainer = ({ + userId, +}: { + userId: 'me' | APIUser['userId']; +}) => { + const { isSuccess, data } = useMyGroupsQuery({ suspense: true }); + + if (!isSuccess) return null; + + return ; +}; + +export default ProfileGroupContainer; diff --git a/src/v1/profile/group/ProfileGroupPresenter.tsx b/src/v1/profile/group/ProfileGroupPresenter.tsx new file mode 100644 index 00000000..38c99fae --- /dev/null +++ b/src/v1/profile/group/ProfileGroupPresenter.tsx @@ -0,0 +1,41 @@ +import { APIGroup } from '@/types/group'; +import { APIUser } from '@/types/user'; +import SimpleBookGroupCard from '@/v1/bookGroup/SimpleBookGroupCard'; +import { IconArrowRight } from '@public/icons'; +import Link from 'next/link'; + +interface ProfileGroupPresenterProps { + userId: 'me' | APIUser['userId']; + bookGroups: APIGroup[]; +} + +const ProfileGroupPresenter = ({ + userId, + bookGroups, +}: ProfileGroupPresenterProps) => { + return ( +
+
+

참여한 모임

+ + + +
+ +
    + {bookGroups.map(({ bookGroupId, title, book: { imageUrl } }) => ( +
  • + +
    • + ))} +
+
+ ); +}; + +export default ProfileGroupPresenter; diff --git a/src/ui/Profile/ProfileInfo/MyProfileInfoContainer.tsx b/src/v1/profile/info/MyProfileInfoContainer.tsx similarity index 100% rename from src/ui/Profile/ProfileInfo/MyProfileInfoContainer.tsx rename to src/v1/profile/info/MyProfileInfoContainer.tsx diff --git a/src/ui/Profile/ProfileInfo/index.tsx b/src/v1/profile/info/ProfileInfo.tsx similarity index 62% rename from src/ui/Profile/ProfileInfo/index.tsx rename to src/v1/profile/info/ProfileInfo.tsx index 294ca743..d23b2120 100644 --- a/src/ui/Profile/ProfileInfo/index.tsx +++ b/src/v1/profile/info/ProfileInfo.tsx @@ -1,11 +1,10 @@ import { ReactNode, Suspense } from 'react'; import MyProfileContainer from './MyProfileInfoContainer'; import UserProfileInfoContainer from './UserProfileInfoContainer'; -import { Skeleton, SkeletonCircle, VStack } from '@chakra-ui/react'; import { QueryErrorResetBoundary } from '@tanstack/react-query'; import { ErrorBoundary } from 'react-error-boundary'; import type { APIUser } from '@/types/user'; -import QueryErrorBounaryFallback from '@/ui/common/QueryErrorBoundaryFallback'; +import QueryErrorBoundaryFallback from '@/v1/base/QueryErrorBoundaryFallback'; import useMounted from '@/hooks/useMounted'; type ProfileInfoProps = { @@ -24,13 +23,12 @@ const ProfileInfo = ({ userId, children }: ProfileInfoProps) => { ( - )} > - }> + }> {userId === 'me' ? ( ) : ( @@ -46,11 +44,17 @@ const ProfileInfo = ({ userId, children }: ProfileInfoProps) => { export default ProfileInfo; -const ProfileInfoSkelenton = () => { +const ProfileInfoSkeleton = () => { return ( - - - - +
+
+
+
+
+
+
+
+
+
); }; diff --git a/src/v1/profile/info/ProfileInfoPresenter.tsx b/src/v1/profile/info/ProfileInfoPresenter.tsx new file mode 100644 index 00000000..5d0c6ee1 --- /dev/null +++ b/src/v1/profile/info/ProfileInfoPresenter.tsx @@ -0,0 +1,42 @@ +import type { APIUser } from '@/types/user'; +import Avatar from '@/v1/base/Avatar'; +import Badge from '@/v1/base/Badge'; + +type ProfileInfoProps = Pick; + +const ProfileInfoPresenter = ({ + nickname, + profileImage, + job: { jobGroupKoreanName, jobNameKoreanName }, +}: ProfileInfoProps) => { + return ( +
+
+ + {jobGroupKoreanName} + + + {jobNameKoreanName} + +
+
+ +

+ {nickname}님의 공간 +

+
+
+ ); +}; + +export default ProfileInfoPresenter; diff --git a/src/ui/Profile/ProfileInfo/UserProfileInfoContainer.tsx b/src/v1/profile/info/UserProfileInfoContainer.tsx similarity index 100% rename from src/ui/Profile/ProfileInfo/UserProfileInfoContainer.tsx rename to src/v1/profile/info/UserProfileInfoContainer.tsx