-
- ๋ซ๊ธฐ
-
+
+
+
+
+ ๋น๋ฐ๋ฒํธ๊ฐ
+
+
+
+ ์ผ์นํ์ง ์์ต๋๋ค.
+
-
-
+
+
+ ๋ซ๊ธฐ
+
+
+
);
}
diff --git a/client/src/components/history/HistoryBoard.tsx b/client/src/components/history/HistoryBoard.tsx
index 89f0bba0..c6064c8f 100644
--- a/client/src/components/history/HistoryBoard.tsx
+++ b/client/src/components/history/HistoryBoard.tsx
@@ -1,40 +1,26 @@
'use client';
import { useRouter } from 'next/navigation';
-import { useInfiniteQuery } from '@tanstack/react-query';
import InfiniteScroll from 'react-infinite-scroller';
-import { getBoardWrittenByPage } from '@/api/history';
+import useHistoryBoardQuery from '@/hooks/query/useHistoryBoardQuery';
-import useUserStore from '@/stores/userStore';
-
-import EmptyDiary from '../leaf/EmptyDiary';
-import HistoryPostCard from './HistoryPostCard';
-
-import ErrorMessage from '../common/ErrorMessage';
-import LoadingMessage from '../common/LoadingMessage';
+import { HistoryPostCard } from '.';
+import { EmptyDiary } from '../leaf';
+import { ErrorMessage, LoadingMessage } from '../common';
import { HistoryBoradProps } from '@/types/common';
-import useClient from '@/hooks/useClient';
export default function HistoryBoard({ paramsId }: HistoryBoradProps) {
const router = useRouter();
- const isClient = useClient();
- const userId = useUserStore((state) => state.userId);
-
- const { data, fetchNextPage, hasNextPage, isLoading, isError } =
- useInfiniteQuery(
- ['boardWritten'],
- ({ pageParam = 1 }) => getBoardWrittenByPage({ pageParam }, paramsId),
- {
- getNextPageParam: (lastPage) => {
- return lastPage.pageInfo.page !== lastPage.pageInfo.totalPages
- ? lastPage.pageInfo.page + 1
- : undefined;
- },
- },
- );
+ const {
+ data: boards,
+ fetchNextPage,
+ hasNextPage,
+ isLoading,
+ isError,
+ } = useHistoryBoardQuery(paramsId);
const likesAmount = (likes: []) => {
if (likes?.length === 0) return 0;
@@ -44,25 +30,23 @@ export default function HistoryBoard({ paramsId }: HistoryBoradProps) {
return (
<>
- {data?.pages.map((page, index) => (
+ {boards?.map((page, index) => (
{page?.boardWritten?.length === 0 ? (
-
-
+
) : (
fetchNextPage()}>
-
+
{page.boardWritten?.map((board: any) => (
+
)}
diff --git a/client/src/components/history/HistoryBox.tsx b/client/src/components/history/HistoryBox.tsx
index b4c8d17e..a23826cd 100644
--- a/client/src/components/history/HistoryBox.tsx
+++ b/client/src/components/history/HistoryBox.tsx
@@ -5,12 +5,14 @@ import useUserStore from '@/stores/userStore';
import useClient from '@/hooks/useClient';
-import UserButton from './UserButton';
-import UserInfo from './UserInfo';
-import Dropdown from './Dropdown';
-import HistoryBoard from './HistoryBoard';
-import HistoryLikes from './HistoryLikes';
-import HistoryComment from './HistoryComment';
+import {
+ UserButton,
+ UserInfo,
+ Dropdown,
+ HistoryBoard,
+ HistoryLikes,
+ HistoryComment,
+} from '.';
import { ADMIN_USER_ID } from '@/constants/values';
@@ -19,23 +21,22 @@ interface HistoryProps {
}
export default function HistoryBox({ paramsId }: HistoryProps) {
+ const { userId } = useUserStore();
+ const { selectOption } = useHistoryStore();
+
const isClient = useClient();
const id = paramsId;
- const userId = useUserStore((state) => state.userId);
-
- const selectOption = useHistoryStore((state) => state.selectOption);
-
const isOwner = userId === id;
const isBoardWritten = selectOption === 'boardWritten';
- const isBoardLike = selectOption === 'boardLiked';
- const isComment = selectOption === 'commentWritten';
+ const isBoardLikes = selectOption === 'boardLiked';
+ const isBoardComments = selectOption === 'commentWritten';
return (
<>
{isClient && (
-
+
{userId !== ADMIN_USER_ID && (
@@ -56,12 +57,12 @@ export default function HistoryBox({ paramsId }: HistoryProps) {
{(userId || paramsId) && (
{isBoardWritten && }
- {isOwner && isBoardLike && }
- {isOwner && isComment && }
+ {isOwner && isBoardLikes && }
+ {isOwner && isBoardComments && }
)}
-
)}
);
diff --git a/client/src/components/history/HistoryComment.tsx b/client/src/components/history/HistoryComment.tsx
index 815087f0..e991a885 100644
--- a/client/src/components/history/HistoryComment.tsx
+++ b/client/src/components/history/HistoryComment.tsx
@@ -1,58 +1,51 @@
'use client';
import { useRouter } from 'next/navigation';
-import { useInfiniteQuery } from '@tanstack/react-query';
import InfiniteScroll from 'react-infinite-scroller';
-import { getCommentWrittenByPage } from '@/api/history';
+import useHistoryCommentQuery from '@/hooks/query/useHistoryCommentQuery';
-import useUserStore from '@/stores/userStore';
-
-import EmptyDiary from '../leaf/EmptyDiary';
-import HistoryPostCard from './HistoryPostCard';
-
-import LoadingMessage from '../common/LoadingMessage';
-import ErrorMessage from '../common/ErrorMessage';
+import { HistoryPostCard } from '.';
+import { EmptyDiary } from '../leaf';
+import { ErrorMessage, LoadingMessage } from '../common';
import { HistoryBoradProps } from '@/types/common';
export default function HistoryComment({ paramsId }: HistoryBoradProps) {
const router = useRouter();
- const userId = useUserStore((state) => state.userId);
- const { data, fetchNextPage, hasNextPage, isLoading, isError } =
- useInfiniteQuery(
- ['commentWritten'],
- ({ pageParam = 1 }) => getCommentWrittenByPage({ pageParam }, paramsId),
- {
- getNextPageParam: (lastPage) => {
- return lastPage.pageInfo.page !== lastPage.pageInfo.totalPages
- ? lastPage.pageInfo.page + 1
- : undefined;
- },
- },
- );
+ const {
+ data: comments,
+ fetchNextPage,
+ hasNextPage,
+ isLoading,
+ isError,
+ } = useHistoryCommentQuery(paramsId);
+
+ const likesAmount = (likes: []) => {
+ if (likes?.length === 0) return 0;
+
+ return likes.length;
+ };
return (
<>
- {data?.pages.map((page, index) => (
+ {comments?.map((page, index) => (
{page.commentWritten?.length === 0 ? (
-
-
+
) : (
fetchNextPage()}>
-
+
{page.commentWritten?.map((board: any) => (
+
)}
))}
+
{isLoading && (
)}
+
{isError && (
diff --git a/client/src/components/history/HistoryLikes.tsx b/client/src/components/history/HistoryLikes.tsx
index 4add05fc..8ea63f37 100644
--- a/client/src/components/history/HistoryLikes.tsx
+++ b/client/src/components/history/HistoryLikes.tsx
@@ -1,39 +1,26 @@
'use client';
import { useRouter } from 'next/navigation';
-import { useInfiniteQuery } from '@tanstack/react-query';
import InfiniteScroll from 'react-infinite-scroller';
-import { getBoardLikedByPage } from '@/api/history';
+import useHistoryLikesQuery from '@/hooks/query/useHistoryLikesQuery';
-import useUserStore from '@/stores/userStore';
-
-import EmptyDiary from '../leaf/EmptyDiary';
-import HistoryPostCard from './HistoryPostCard';
-
-import LoadingMessage from '../common/LoadingMessage';
-import ErrorMessage from '../common/ErrorMessage';
+import { HistoryPostCard } from '.';
+import { EmptyDiary } from '../leaf';
+import { ErrorMessage, LoadingMessage } from '../common';
import { HistoryBoradProps } from '@/types/common';
export default function HistoryLikes({ paramsId }: HistoryBoradProps) {
const router = useRouter();
- const userId = useUserStore((state) => state.userId);
-
- const { data, fetchNextPage, hasNextPage, isLoading, isError } =
- useInfiniteQuery(
- ['boardLiked'],
- ({ pageParam = 1 }) => getBoardLikedByPage({ pageParam }, paramsId),
- {
- getNextPageParam: (lastPage) => {
- if (lastPage.pageInfo.totalElement === 0) return;
- if (lastPage.pageInfo.page !== lastPage.pageInfo.totalPages) {
- return lastPage.pageInfo.page + 1;
- }
- },
- },
- );
+ const {
+ data: likes,
+ fetchNextPage,
+ hasNextPage,
+ isLoading,
+ isError,
+ } = useHistoryLikesQuery(paramsId);
const likesAmount = (likes: []) => {
if (likes?.length === 0) return 0;
@@ -43,15 +30,13 @@ export default function HistoryLikes({ paramsId }: HistoryBoradProps) {
return (
<>
- {data?.pages.map((page, index) => (
+ {likes?.map((page, index) => (
{page?.boardLiked?.length === 0 ? (
@@ -83,11 +68,13 @@ export default function HistoryLikes({ paramsId }: HistoryBoradProps) {
)}
))}
+
{isLoading && (
)}
+
{isError && (
diff --git a/client/src/components/history/HistoryPostCard.tsx b/client/src/components/history/HistoryPostCard.tsx
index a297b0d9..1c557483 100644
--- a/client/src/components/history/HistoryPostCard.tsx
+++ b/client/src/components/history/HistoryPostCard.tsx
@@ -1,5 +1,5 @@
-import { motion } from 'framer-motion';
import Image from 'next/image';
+import { motion } from 'framer-motion';
interface HistoryPostCardProps {
imageUrl: string;
@@ -20,23 +20,13 @@ export default function HistoryPostCard({
whileTap={{ scale: 0.95 }}
className="flex flex-col items-center justify-center w-[200px] h-[175px] rounded-lg border-2 border-brown-50 bg-brown-10 shadow-outer/down">
- {imageUrl ? (
-
- ) : (
-
- )}
+
@@ -48,11 +38,13 @@ export default function HistoryPostCard({
+
{likes}
+
{comment}
diff --git a/client/src/components/history/ResignModal.tsx b/client/src/components/history/ResignModal.tsx
index d9a836f3..3edbed47 100644
--- a/client/src/components/history/ResignModal.tsx
+++ b/client/src/components/history/ResignModal.tsx
@@ -2,15 +2,10 @@
import { useForm } from 'react-hook-form';
-import { postUserPassword } from '@/api/history';
+import useResignCheckMutation from '@/hooks/mutation/useResignCheckMutation';
-import useSignModalStore from '@/stores/signModalStore';
-import useUserStore from '@/stores/userStore';
-
-import Modal from '../common/Modal';
-import ModalPortal from '../common/ModalPortal';
-import SignModalInput from '../sign/SignModalInput';
-import CommonButton from '../common/CommonButton';
+import { SignModalInput } from '../sign';
+import { CommonButton, Modal } from '../common';
import { SignFormValue } from '@/types/common';
@@ -18,56 +13,46 @@ export default function ResignModal() {
const {
register,
watch,
- formState: { isSubmitting },
+ handleSubmit,
+ formState: { errors, isSubmitting },
} = useForm
();
- const setAccessToken = useUserStore((state) => state.setAccessToken);
- const { close, changeState } = useSignModalStore();
+ const { mutate: onPasswordCheck, close } = useResignCheckMutation();
const userPassword = watch('password');
- const handlePasswordCheck = async () => {
- if (!userPassword) return;
-
- const response = await postUserPassword(userPassword);
-
- if (response) {
- return (
- changeState('ConfirmModal'),
- setAccessToken(response.headers?.authorization)
- );
- }
-
- return changeState('FailureModal');
- };
-
return (
-
-
+
+ 
| 
| 
| 
| 
| 
|
-| [@nalsae](https://github.com/nalsae) | [@shimdokite](https://github.com/shimdokite) | [@hanbinchoi](https://github.com/hanbinchoi) | [@Smile:DK](https://github.com/Dokyung-Hwang) | [@dohyoungK](https://github.com/dohyoungK) | [@NtoZero](https://github.com/NtoZero)
-| **FE** (๋ถํ์ฅ) | **FE** | **FE** | **BE** (ํ์ฅ) | **BE** | **BE** |
+| [@nalsae](https://github.com/nalsae) | [@shimdokite](https://github.com/shimdokite) | [@hanbinchoi](https://github.com/hanbinchoi) | [@Smile:DK](https://github.com/Dokyung-Hwang) | [@dohyoungK](https://github.com/dohyoungK) | [@NtoZero](https://github.com/NtoZero) |
+| **FE** (๋ถํ์ฅ) | **FE** | **FE** | **BE** (ํ์ฅ) | **BE** | **BE** |