Skip to content

Commit

Permalink
Revert "[#456] [프로필] 프로필 페이지 (#461)"
Browse files Browse the repository at this point in the history
This reverts commit 150592c.
  • Loading branch information
gxxrxn authored Aug 20, 2024
1 parent d3f452b commit c287dcc
Show file tree
Hide file tree
Showing 35 changed files with 415 additions and 421 deletions.
2 changes: 1 addition & 1 deletion src/app/bookarchive/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 text="BookArchvie" />
<TopHeader pathname="/bookarchive" />
{/* TODO: 스켈레톤 컴포넌트로 교체 */}
<Suspense fallback={null}>
<Contents />
Expand Down
34 changes: 28 additions & 6 deletions src/app/bookshelf/[bookshelfId]/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,20 +2,24 @@

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 { IconKakao } from '@public/icons';

import { IconArrowLeft, IconShare, 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}`;

Expand All @@ -30,9 +34,23 @@ 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' });
Expand All @@ -46,10 +64,14 @@ export default function UserBookShelfPage({
<div className="flex w-full flex-col">
<TopNavigation>
<TopNavigation.LeftItem>
<BackButton />
<button onClick={() => router.back()}>
<IconArrowLeft />
</button>
</TopNavigation.LeftItem>
<TopNavigation.RightItem>
<ShareButton />
<button onClick={handleClickShareButton}>
<IconShare />
</button>
</TopNavigation.RightItem>
</TopNavigation>
<div className="mt-[0.8rem] flex flex-col gap-[0.8rem] pb-[2rem] pt-[1rem] font-bold">
Expand Down
4 changes: 2 additions & 2 deletions src/app/group/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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/useMyGroupQuery';
import useMyGroupsQuery from '@/queries/group/useMyGroupsQuery';
import { Skeleton, VStack } from '@chakra-ui/react';
import { useEffect } from 'react';
import { useInView } from 'react-intersection-observer';
Expand Down Expand Up @@ -44,7 +44,7 @@ const GroupPage = () => {

return (
<>
<TopHeader text="Group" />
<TopHeader pathname={'/group'} />
<div className="mt-[2rem] flex w-full flex-col gap-[1.5rem]">
<SearchGroup
onClick={() => {
Expand Down
26 changes: 9 additions & 17 deletions src/app/profile/[userId]/page.tsx
Original file line number Diff line number Diff line change
@@ -1,32 +1,24 @@
'use client';

import { APIUser } from '@/types/user';
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';
import TopNavigation from '@/ui/common/TopNavigation';
import ProfileBookShelf from '@/ui/Profile/ProfileBookshelf';
import ProfileInfo from '@/ui/Profile/ProfileInfo';
import { VStack } from '@chakra-ui/react';

const UserProfilePage = ({
params: { userId },
}: {
params: { userId: APIUser['userId'] };
}) => {
return (
<>
<TopNavigation>
<TopNavigation.LeftItem>
<BackButton />
</TopNavigation.LeftItem>
<TopNavigation.RightItem>
<ShareButton />
</TopNavigation.RightItem>
</TopNavigation>
<div className="mt-[1.5rem] flex flex-col gap-[2rem]">
<VStack justify="center" align="flex-start" w="100%">
<TopNavigation pageTitle="" />
<VStack justify="flex-start" gap="2rem" w="100%">
<ProfileInfo userId={userId} />
<ProfileBookShelf userId={userId} />
</div>
</>
</VStack>
</VStack>
);
};

Expand Down
5 changes: 0 additions & 5 deletions src/app/profile/me/group/page.tsx

This file was deleted.

121 changes: 38 additions & 83 deletions src/app/profile/me/page.tsx
Original file line number Diff line number Diff line change
@@ -1,99 +1,54 @@
'use client';

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 { Box, VStack } from '@chakra-ui/react';
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}`;
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 userAPI from '@/apis/user';

const MyProfilePage = () => {
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 { push } = useRouter();
const pathname = usePathname();

const handleLogoutButtonClick = async () => {
await userAPI.logout();
removeAuth();
router.refresh();
push('/');
};

return (
<>
<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">
<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"
>
프로필 수정
</span>
</Button>
</Link>
<ProfileBookShelf userId={USER_ID} />
<ProfileGroup userId={USER_ID} />
</div>
</>
</Button>
</ProfileInfo>
<ProfileBookShelf userId="me" />
<ProfileGroup />
</VStack>
</VStack>
</AuthRequired>
);
};

Expand Down
1 change: 0 additions & 1 deletion src/queries/bookshelf/key.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@ 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;
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,10 @@ 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(
bookShelfKeys.summary('me'),
['summaryBookshlef', 'me'],
() => bookshelfAPI.getMySummaryBookshelf().then(({ data }) => data),
options
);
Expand Down
Original file line number Diff line number Diff line change
@@ -1,16 +1,15 @@
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>
) =>
useQueryWithSuspense(
bookShelfKeys.summary(String(userId)),
useQuery(
['summaryBookshlef', String(userId)],
() =>
bookshelfAPI.getUserSummaryBookshelf({ userId }).then(({ data }) => data),
options
Expand Down
1 change: 0 additions & 1 deletion src/queries/group/key.ts
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@ const bookGroupKeys = {
[...bookGroupKeys.details(), id] as const,
comments: (id: APIGroupDetail['bookGroupId']) =>
[...bookGroupKeys.details(), id, 'comments'] as const,
me: () => [...bookGroupKeys.all, 'me'],
};

export default bookGroupKeys;
File renamed without changes.
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,10 @@ 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(
bookGroupKeys.me(),
['groups', 'me'],
() => GroupAPI.getMyGroups().then(({ data }) => data),
options
);
Expand Down
4 changes: 2 additions & 2 deletions src/stories/base/TopHeader.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -13,12 +13,12 @@ export default meta;
type Story = StoryObj<typeof TopHeader>;

export const Default: Story = {
args: { text: 'BookArchive' },
args: { pathname: '/bookarchive' },
render: args => <TopHeader {...args} />,
};

export const WithMenu: Story = {
args: { text: 'Profile' },
args: { pathname: '/profile/me' },
render: args => (
<TopHeader {...args}>
<button
Expand Down
Original file line number Diff line number Diff line change
@@ -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({
Expand Down
Loading

0 comments on commit c287dcc

Please sign in to comment.