From daedbf8510de61759d3d54b3d592af94865bd685 Mon Sep 17 00:00:00 2001 From: parkyejin Date: Fri, 9 Aug 2024 16:02:19 +0900 Subject: [PATCH 1/9] =?UTF-8?q?feat(#19):=20=ED=86=A0=EB=A1=A0=20=EA=B2=8C?= =?UTF-8?q?=EC=8B=9C=ED=8C=90=20=EA=B4=80=EB=A0=A8=20API=20=EC=97=B0?= =?UTF-8?q?=EB=8F=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/model/Discussion.ts | 18 ++++- src/service/discussion/DiscussionQueries.ts | 59 ++++++++++++++++ src/service/discussion/DiscussionService.ts | 47 +++++++++++++ .../discussion/useDiscussionService.ts | 70 +++++++++++++++++++ 4 files changed, 193 insertions(+), 1 deletion(-) create mode 100644 src/service/discussion/DiscussionQueries.ts create mode 100644 src/service/discussion/DiscussionService.ts create mode 100644 src/service/discussion/useDiscussionService.ts diff --git a/src/model/Discussion.ts b/src/model/Discussion.ts index 60949a0..2a35b07 100644 --- a/src/model/Discussion.ts +++ b/src/model/Discussion.ts @@ -1,5 +1,16 @@ import { User } from './User' +interface DiscussionList { + page: number + totalSize: number + result: DiscussionBoardI[] +} + +interface DiscussionDetail { + discussionSimpleInfo: DiscussionBoardI + isEditAllowed: boolean +} + interface DiscussionBoardI { id: number title: string @@ -20,4 +31,9 @@ interface DiscussionOptionI { disabled: boolean } -export type { DiscussionBoardI, DiscussionOptionI } +export type { + DiscussionList, + DiscussionDetail, + DiscussionBoardI, + DiscussionOptionI, +} diff --git a/src/service/discussion/DiscussionQueries.ts b/src/service/discussion/DiscussionQueries.ts new file mode 100644 index 0000000..05707f7 --- /dev/null +++ b/src/service/discussion/DiscussionQueries.ts @@ -0,0 +1,59 @@ +import DiscussionService, { + DicussionParticipationProps, + DiscussionListProps, +} from './DiscussionService' + +const queryKeys = { + discussion: (discussionId: number) => ['discussion', discussionId] as const, + discussionList: ['discussionList'] as const, +} + +const queryOptions = { + discussionList: { + queryKey: queryKeys.discussionList, + queryFn: async ({ page, size }: DiscussionListProps) => { + const res = await DiscussionService.getDiscussionList({ + page, + size, + }) + return res.data + }, + }, + + discussionDetail: { + queryKey: (id: number) => queryKeys.discussion(id), + queryFn: async (id: number) => { + const res = await DiscussionService.getDiscussionDetail(id) + return res.data + }, + }, + + postDiscussion: { + queryKey: queryKeys.discussionList, + mutationFn: async (discussion: FormData): Promise => { + await DiscussionService.postDiscussion(discussion) + }, + }, + + deleteDiscussion: { + queryKey: queryKeys.discussionList, + mutationFn: async (id: number): Promise => { + await DiscussionService.deleteDiscussion(id) + }, + }, + + postDiscussionPraticipation: { + queryKey: queryKeys.discussionList, + mutationFn: async ({ + discussionId, + discussionOptionId, + }: DicussionParticipationProps): Promise => { + await DiscussionService.postDiscussionPraticipation({ + discussionId, + discussionOptionId, + }) + }, + }, +} + +export { queryKeys, queryOptions } diff --git a/src/service/discussion/DiscussionService.ts b/src/service/discussion/DiscussionService.ts new file mode 100644 index 0000000..de52934 --- /dev/null +++ b/src/service/discussion/DiscussionService.ts @@ -0,0 +1,47 @@ +import Service from '@/apis/AxiosInstance' +import { DiscussionDetail, DiscussionList } from '@/model/Discussion' + +export interface DiscussionListProps { + page: number + size: number +} + +export interface DicussionParticipationProps { + discussionId: number + discussionOptionId: number +} + +class DiscussionService extends Service { + getDiscussionList({ page, size }: DiscussionListProps) { + return this.http.get( + `/discussions?page=${page}&size=${size}`, + ) + } + + getDiscussionDetail(id: number) { + return this.http.get(`/discussion/${id}`) + } + + postDiscussion(discussion: FormData) { + return this.http.post(`/member/discussion`, discussion, { + headers: { + 'Content-Type': 'multipart/form-data', + }, + }) + } + + deleteDiscussion(id: number) { + return this.http.delete(`/member/discussion/${id}`) + } + + postDiscussionPraticipation({ + discussionId, + discussionOptionId, + }: DicussionParticipationProps) { + return this.http.post( + `/member/discussions/${discussionId}/discussion-options/${discussionOptionId}`, + ) + } +} + +export default new DiscussionService() diff --git a/src/service/discussion/useDiscussionService.ts b/src/service/discussion/useDiscussionService.ts new file mode 100644 index 0000000..31bc236 --- /dev/null +++ b/src/service/discussion/useDiscussionService.ts @@ -0,0 +1,70 @@ +import { + useMutation, + useQuery, + UseMutationOptions, +} from '@tanstack/react-query' +import { queryOptions } from './DiscussionQueries' +import { DicussionParticipationProps } from './DiscussionService' + +const useDiscussionList = (page: number, size: number) => + useQuery({ + ...queryOptions.discussionList, + queryKey: ['discussionList', page, size], + queryFn: () => queryOptions.discussionList.queryFn({ page, size }), + }) + +const useDiscussionDetail = (id: number) => + useQuery({ + ...queryOptions.discussionDetail, + queryKey: ['discussionDetail', id], + queryFn: () => queryOptions.discussionDetail.queryFn(id), + }) + +const usePostDiscussion = () => { + const mutationFn = (discussion: FormData): Promise => + queryOptions.postDiscussion.mutationFn(discussion) + + const options: UseMutationOptions = { + mutationFn, + } + return useMutation(options) +} + +const useDeleteDiscussion = () => { + const mutationFn = (id: number): Promise => + queryOptions.deleteDiscussion.mutationFn(id) + + const options: UseMutationOptions = { + mutationFn, + } + return useMutation(options) +} + +const usePostDiscussionPraticipation = () => { + const mutationFn = ({ + discussionId, + discussionOptionId, + }: DicussionParticipationProps): Promise => + queryOptions.postDiscussionPraticipation.mutationFn({ + discussionId, + discussionOptionId, + }) + + const options: UseMutationOptions< + void, + Error, + DicussionParticipationProps, + unknown + > = { + mutationFn, + } + return useMutation(options) +} + +export { + useDiscussionList, + useDiscussionDetail, + usePostDiscussion, + useDeleteDiscussion, + usePostDiscussionPraticipation, +} From 9e38070ec16530d8d081f1dafb6775480a0cc7be Mon Sep 17 00:00:00 2001 From: parkyejin Date: Fri, 9 Aug 2024 16:25:15 +0900 Subject: [PATCH 2/9] =?UTF-8?q?docs(#19):=20category=20path=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .eslintrc.json | 3 ++- src/components/common/Category.tsx | 28 ++++++++++++++++------------ 2 files changed, 18 insertions(+), 13 deletions(-) diff --git a/.eslintrc.json b/.eslintrc.json index 4f17e8a..d07d857 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -35,6 +35,7 @@ "jsx-a11y/no-static-element-interactions": "off", "import/no-named-as-default": "off", "import/no-cycle": "off", - "arrow-body-style": "off" + "arrow-body-style": "off", + "no-else-return": "off" } } diff --git a/src/components/common/Category.tsx b/src/components/common/Category.tsx index 5e8af7f..0157fe8 100644 --- a/src/components/common/Category.tsx +++ b/src/components/common/Category.tsx @@ -7,8 +7,8 @@ import Image from 'next/image' const categories = [ { path: '/', label: 'HOME' }, { path: '/board', label: '게시판' }, - { path: '/match/matching', label: 'M쌤 매칭' }, - { path: '/debate/postlist', label: 'MBTI 과몰입 토론' }, + { path: '/worry', label: 'M쌤 매칭' }, + { path: '/discussion', label: 'MBTI 과몰입 토론' }, ] const extraCategories = [ @@ -33,6 +33,18 @@ const Category = () => { router.push(path) } + const getButtonClass = (categoryPath: string) => { + if (categoryPath === '/') { + return selected === '/' + ? 'text-main1 font-bold after:content-[""] after:absolute after:bottom-[-8px] after:left-0 after:w-full after:h-[3px] after:bg-main1 after:opacity-100' + : '' + } else if (selected?.startsWith(categoryPath)) { + return 'text-main1 font-bold after:content-[""] after:absolute after:bottom-[-8px] after:left-0 after:w-full after:h-[3px] after:bg-main1 after:opacity-100' + } else { + return '' + } + } + return (
    @@ -41,11 +53,7 @@ const Category = () => { @@ -59,11 +67,7 @@ const Category = () => { From 503088420358f73a7082d428d8444829a8c64a44 Mon Sep 17 00:00:00 2001 From: parkyejin Date: Fri, 9 Aug 2024 17:39:45 +0900 Subject: [PATCH 3/9] =?UTF-8?q?design(#19):=20=ED=86=A0=EB=A1=A0=20?= =?UTF-8?q?=EA=B2=8C=EC=8B=9C=ED=8C=90=20=EB=A6=AC=EC=8A=A4=ED=8A=B8=20?= =?UTF-8?q?=EB=B6=88=EB=9F=AC=EC=98=A4=EA=B8=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/discussion/page.tsx | 25 +++++++++++++++++++++++++ tailwind.config.ts | 1 + 2 files changed, 26 insertions(+) create mode 100644 src/app/discussion/page.tsx diff --git a/src/app/discussion/page.tsx b/src/app/discussion/page.tsx new file mode 100644 index 0000000..f23b692 --- /dev/null +++ b/src/app/discussion/page.tsx @@ -0,0 +1,25 @@ +'use client' + +import DiscussionBoard from '@/components/discussion/DiscussionBoard' +import { useDiscussionList } from '@/service/discussion/useDiscussionService' + +const DiscussionPage = () => { + const { data: discussionList } = useDiscussionList(0, 10) + + return ( + <> +
    + MBTI 과몰입 토론 +
    +
    + {discussionList && + discussionList.result.map((discussion) => ( + + ))} +
    +
    + + ) +} + +export default DiscussionPage diff --git a/tailwind.config.ts b/tailwind.config.ts index 841f13c..e52eb12 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -89,6 +89,7 @@ const config: Config = { '8.75': '35px', '12.5': '50px', '15': '60px', + '16.5': '66px', '18': '72px', '22': '88px', '30': '120px', From cd8b5b5525b93822e4e94a95741dcf31078e83ef Mon Sep 17 00:00:00 2001 From: parkyejin Date: Fri, 9 Aug 2024 17:40:12 +0900 Subject: [PATCH 4/9] =?UTF-8?q?feat(#19):=20=ED=86=A0=EB=A1=A0=20=EA=B2=8C?= =?UTF-8?q?=EC=8B=9C=ED=8C=90=20=EB=8C=93=EA=B8=80=20service=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/worry/page.tsx | 4 +- src/components/board/CommentList.stories.tsx | 2 +- src/components/board/CommentList.tsx | 6 +- src/components/discussion/DiscussionBoard.tsx | 9 +- .../discussion/DiscussionOption.tsx | 2 +- src/service/comment/CommentQueries.ts | 86 ++++++++++++++++--- src/service/comment/CommentService.ts | 62 +++++++++---- src/service/comment/useCommentService.ts | 81 ++++++++++++++--- 8 files changed, 202 insertions(+), 50 deletions(-) diff --git a/src/app/worry/page.tsx b/src/app/worry/page.tsx index b3a7946..cc557da 100644 --- a/src/app/worry/page.tsx +++ b/src/app/worry/page.tsx @@ -30,7 +30,7 @@ const WorryPage = () => { return (
    -
    +
    M쌤 매칭을 기다리는 고민
    @@ -50,7 +50,7 @@ const WorryPage = () => { ))} -
    +
    해결 완료된 고민
    diff --git a/src/components/board/CommentList.stories.tsx b/src/components/board/CommentList.stories.tsx index 95db630..1370f1f 100644 --- a/src/components/board/CommentList.stories.tsx +++ b/src/components/board/CommentList.stories.tsx @@ -13,7 +13,7 @@ const Template: StoryFn = (args: CommentListProps) => ( export const Primary = Template.bind({}) Primary.args = { - boardId: 1, + id: 1, page: 0, size: 10, } diff --git a/src/components/board/CommentList.tsx b/src/components/board/CommentList.tsx index b49f577..84568eb 100644 --- a/src/components/board/CommentList.tsx +++ b/src/components/board/CommentList.tsx @@ -4,13 +4,13 @@ import { useCommentList } from '@/service/comment/useCommentService' import Comment from './Comment' interface CommentListProps { - boardId: number + id: number page: number size: number } -const CommentList = ({ boardId, page, size }: CommentListProps) => { - const { data } = useCommentList({ boardId, page, size }) +const CommentList = ({ id, page, size }: CommentListProps) => { + const { data } = useCommentList({ id, page, size }) return (
    diff --git a/src/components/discussion/DiscussionBoard.tsx b/src/components/discussion/DiscussionBoard.tsx index db5004b..094777d 100644 --- a/src/components/discussion/DiscussionBoard.tsx +++ b/src/components/discussion/DiscussionBoard.tsx @@ -30,19 +30,20 @@ const DiscussionBoard = ({ discussionBoard }: DiscussionBoardProps) => {
    -
    {createdAt}
    +
    {createdAt}
    -
    +

    {title}

    {content}

    -
    +
    {options && - options.map((option: DiscussionOptionI) => ( + options.map((option: DiscussionOptionI, index: number) => ( { - const res = await CommentService.getCommentList({ boardId, page, size }) + queryFn: async ({ id, page, size }: CommentListProps) => { + const res = await CommentService.getCommentList({ id, page, size }) return res.data }, }, commentBest: { queryKey: queryKeys.commentBest, - queryFn: async ({ boardId, page, size }: CommentListProps) => { - const res = await CommentService.getCommentBest({ boardId, page, size }) + queryFn: async ({ id, page, size }: CommentListProps) => { + const res = await CommentService.getCommentBest({ id, page, size }) return res.data }, }, postCommentLike: { queryKey: queryKeys.commentList, - mutationFn: async ({ boardId, commentId }: CommentDetailProps): Promise => { - await CommentService.postCommentLike({ boardId, commentId }) + mutationFn: async ({ + id, + commentId, + }: CommentDetailProps): Promise => { + await CommentService.postCommentLike({ id, commentId }) }, }, postComment: { queryKey: queryKeys.commentList, mutationFn: async ({ - boardId, + id, comment, commentId, }: PostCommentProps): Promise => { await CommentService.postComment({ - boardId, + id, comment, commentId, }) @@ -51,10 +57,70 @@ const queryOptions = { deleteComment: { queryKey: queryKeys.commentList, mutationFn: async ({ - boardId, + id, + commentId, + }: CommentDetailProps): Promise => { + await CommentService.deleteComment({ id, commentId }) + }, + }, + + // 토론 게시판 댓글 + discussionCommentList: { + queryKey: queryKeys.discussionCommentList, + queryFn: async ({ id, page, size }: CommentListProps) => { + const res = await CommentService.getDiscussionCommentList({ + id, + page, + size, + }) + return res.data + }, + }, + + discussionCommentBest: { + queryKey: queryKeys.discussionCommentBest, + queryFn: async ({ id, page, size }: CommentListProps) => { + const res = await CommentService.getDiscussionCommentBest({ + id, + page, + size, + }) + return res.data + }, + }, + + postDiscussionCommentLike: { + queryKey: queryKeys.discussionCommentList, + mutationFn: async ({ + id, + commentId, + }: CommentDetailProps): Promise => { + await CommentService.postDiscussionCommentLike({ id, commentId }) + }, + }, + + postDiscussionComment: { + queryKey: queryKeys.discussionCommentList, + mutationFn: async ({ + id, + comment, + commentId, + }: PostCommentProps): Promise => { + await CommentService.postDiscussionComment({ + id, + comment, + commentId, + }) + }, + }, + + deleteDiscussionComment: { + queryKey: queryKeys.discussionCommentList, + mutationFn: async ({ + id, commentId, }: CommentDetailProps): Promise => { - await CommentService.deleteComment({ boardId, commentId }) + await CommentService.deleteDiscussionComment({ id, commentId }) }, }, } diff --git a/src/service/comment/CommentService.ts b/src/service/comment/CommentService.ts index f94bc54..27a87d3 100644 --- a/src/service/comment/CommentService.ts +++ b/src/service/comment/CommentService.ts @@ -2,45 +2,77 @@ import Service from '@/apis/AxiosInstance' import { CommentList } from '@/model/Comment' export interface CommentListProps { - boardId: number + id: number page: number size: number } export interface PostCommentProps { - boardId: number + id: number comment: FormData commentId?: number } export interface CommentDetailProps { - boardId: number + id: number commentId: number } class CommentService extends Service { - getCommentList({ boardId, page, size }: CommentListProps) { + // 게시판 댓글 + getCommentList({ id, page, size }: CommentListProps) { return this.http.get( - `/boards/${boardId}/comments?page=${page}&size=${size}`, + `/boards/${id}/comments?page=${page}&size=${size}`, ) } - getCommentBest({ boardId, page, size }: CommentListProps) { + getCommentBest({ id, page, size }: CommentListProps) { return this.http.get( - `/boards/${boardId}/comments/best?page=${page}&size=${size}`, + `/boards/${id}/comments/best?page=${page}&size=${size}`, ) } - postCommentLike({ boardId, commentId }: CommentDetailProps) { - return this.http.post( - `/member/boards/${boardId}/comments/${commentId}/like`, + postCommentLike({ id, commentId }: CommentDetailProps) { + return this.http.post(`/member/boards/${id}/comments/${commentId}/like`) + } + + postComment({ id, comment, commentId }: PostCommentProps) { + const url = commentId + ? `/member/boards/${id}/comments?commentId=${commentId}` + : `/member/boards/${id}/comments` + + return this.http.post(url, comment, { + headers: { + 'Content-Type': 'multipart/form-data', + }, + }) + } + + deleteComment({ id, commentId }: CommentDetailProps) { + return this.http.delete(`/member/boards/${id}/comments/${commentId}`) + } + + // 토론 게시판 댓글 + getDiscussionCommentList({ id, page, size }: CommentListProps) { + return this.http.get( + `/discussions/${id}/comments?page=${page}&size=${size}`, + ) + } + + getDiscussionCommentBest({ id, page, size }: CommentListProps) { + return this.http.get( + `/discussions/${id}/comments/best?page=${page}&size=${size}`, ) } - postComment({ boardId, comment, commentId }: PostCommentProps) { + postDiscussionCommentLike({ id, commentId }: CommentDetailProps) { + return this.http.post(`/discussions/${id}/comments/${commentId}/like`) + } + + postDiscussionComment({ id, comment, commentId }: PostCommentProps) { const url = commentId - ? `/member/boards/${boardId}/comments?commentId=${commentId}` - : `/member/boards/${boardId}/comments` + ? `/member/discussions/${id}/comments?commentId=${commentId}` + : `/member/discussions/${id}/comments` return this.http.post(url, comment, { headers: { @@ -49,8 +81,8 @@ class CommentService extends Service { }) } - deleteComment({ boardId, commentId }: CommentDetailProps) { - return this.http.delete(`/member/boards/${boardId}/comments/${commentId}`) + deleteDiscussionComment({ id, commentId }: CommentDetailProps) { + return this.http.delete(`/member/boards/${id}/comments/${commentId}`) } } diff --git a/src/service/comment/useCommentService.ts b/src/service/comment/useCommentService.ts index e35472e..a97c9dc 100644 --- a/src/service/comment/useCommentService.ts +++ b/src/service/comment/useCommentService.ts @@ -10,26 +10,24 @@ import { PostCommentProps, } from './CommentService' -const useCommentList = ({ boardId, page, size }: CommentListProps) => +// 게시판 댓글 +const useCommentList = ({ id, page, size }: CommentListProps) => useQuery({ ...queryOptions.commentList, queryKey: ['commentList'], - queryFn: () => queryOptions.commentList.queryFn({ boardId, page, size }), + queryFn: () => queryOptions.commentList.queryFn({ id, page, size }), }) -const useCommentBest = ({ boardId, page, size }: CommentListProps) => +const useCommentBest = ({ id, page, size }: CommentListProps) => useQuery({ ...queryOptions.commentBest, queryKey: ['commentBest'], - queryFn: () => queryOptions.commentBest.queryFn({ boardId, page, size }), + queryFn: () => queryOptions.commentBest.queryFn({ id, page, size }), }) const useCommentLike = () => { - const mutationFn = ({ - boardId, - commentId, - }: CommentDetailProps): Promise => - queryOptions.postCommentLike.mutationFn({ boardId, commentId }) + const mutationFn = ({ id, commentId }: CommentDetailProps): Promise => + queryOptions.postCommentLike.mutationFn({ id, commentId }) const options: UseMutationOptions = { @@ -40,11 +38,11 @@ const useCommentLike = () => { const usePostComment = () => { const mutationFn = ({ - boardId, + id, comment, commentId, }: PostCommentProps): Promise => - queryOptions.postComment.mutationFn({ boardId, comment, commentId }) + queryOptions.postComment.mutationFn({ id, comment, commentId }) const options: UseMutationOptions = { mutationFn, @@ -53,11 +51,61 @@ const usePostComment = () => { } const useDeleteComment = () => { + const mutationFn = ({ id, commentId }: CommentDetailProps): Promise => + queryOptions.deleteComment.mutationFn({ id, commentId }) + + const options: UseMutationOptions = + { + mutationFn, + } + return useMutation(options) +} + +// 토론 게시판 댓글 +const useDiscussionCommentList = ({ id, page, size }: CommentListProps) => + useQuery({ + ...queryOptions.discussionCommentList, + queryKey: ['discussionCommentList'], + queryFn: () => + queryOptions.discussionCommentList.queryFn({ id, page, size }), + }) + +const useDiscussionCommentBest = ({ id, page, size }: CommentListProps) => + useQuery({ + ...queryOptions.discussionCommentBest, + queryKey: ['discussionCommentBest'], + queryFn: () => + queryOptions.discussionCommentBest.queryFn({ id, page, size }), + }) + +const useDiscussionCommentLike = () => { + const mutationFn = ({ id, commentId }: CommentDetailProps): Promise => + queryOptions.postDiscussionCommentLike.mutationFn({ id, commentId }) + + const options: UseMutationOptions = + { + mutationFn, + } + return useMutation(options) +} + +const usePostDiscussionComment = () => { const mutationFn = ({ - boardId, + id, + comment, commentId, - }: CommentDetailProps): Promise => - queryOptions.deleteComment.mutationFn({ boardId, commentId }) + }: PostCommentProps): Promise => + queryOptions.postDiscussionComment.mutationFn({ id, comment, commentId }) + + const options: UseMutationOptions = { + mutationFn, + } + return useMutation(options) +} + +const useDeleteDiscussionComment = () => { + const mutationFn = ({ id, commentId }: CommentDetailProps): Promise => + queryOptions.deleteComment.mutationFn({ id, commentId }) const options: UseMutationOptions = { @@ -72,4 +120,9 @@ export { useCommentLike, usePostComment, useDeleteComment, + useDiscussionCommentList, + useDiscussionCommentBest, + useDiscussionCommentLike, + usePostDiscussionComment, + useDeleteDiscussionComment, } From 6fbf4cf4770efa2a684849f42fc5a1e08c85e39b Mon Sep 17 00:00:00 2001 From: parkyejin Date: Fri, 9 Aug 2024 20:16:05 +0900 Subject: [PATCH 5/9] =?UTF-8?q?design(#19):=20=ED=86=A0=EB=A1=A0=20?= =?UTF-8?q?=EA=B2=8C=EC=8B=9C=ED=8C=90=20=EB=AA=A8=EB=B0=94=EC=9D=BC=20?= =?UTF-8?q?=EB=B2=84=EC=A0=84=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/discussion/page.tsx | 2 +- src/app/worry/[id]/page.tsx | 6 ++++-- src/components/discussion/DiscussionBoard.tsx | 5 ++++- src/components/discussion/DiscussionOption.tsx | 2 +- 4 files changed, 10 insertions(+), 5 deletions(-) diff --git a/src/app/discussion/page.tsx b/src/app/discussion/page.tsx index f23b692..a6a1497 100644 --- a/src/app/discussion/page.tsx +++ b/src/app/discussion/page.tsx @@ -11,7 +11,7 @@ const DiscussionPage = () => {
    MBTI 과몰입 토론
    -
    +
    {discussionList && discussionList.result.map((discussion) => ( diff --git a/src/app/worry/[id]/page.tsx b/src/app/worry/[id]/page.tsx index 8e1e9ba..1ccb946 100644 --- a/src/app/worry/[id]/page.tsx +++ b/src/app/worry/[id]/page.tsx @@ -10,6 +10,8 @@ const WorryDetail = () => { const { id } = useParams() const { data: worryDetail } = useWorryDetail(Number(id)) + const formattedCreatedAt = worryDetail?.createdAt.split(' ')[0] + return ( <>
    @@ -30,9 +32,9 @@ const WorryDetail = () => { strFromMbti={worryDetail.memberSimpleInfo.mbti} strToMbti={worryDetail.targetMbti} /> -
    +

    조회수 {worryDetail.hits}회

    -

    {worryDetail.createdAt}

    +

    {formattedCreatedAt}

    diff --git a/src/components/discussion/DiscussionBoard.tsx b/src/components/discussion/DiscussionBoard.tsx index 094777d..fc5dbad 100644 --- a/src/components/discussion/DiscussionBoard.tsx +++ b/src/components/discussion/DiscussionBoard.tsx @@ -24,13 +24,16 @@ const DiscussionBoard = ({ discussionBoard }: DiscussionBoardProps) => { // TODO: Discussion Button Click API 연동 const handleDiscussionOptionClick = () => {} + // 날짜 부분만 추출 + const formattedCreatedAt = createdAt.split(' ')[0] + return (
    -
    {createdAt}
    +
    {formattedCreatedAt}

    {title}

    diff --git a/src/components/discussion/DiscussionOption.tsx b/src/components/discussion/DiscussionOption.tsx index f0636f7..fbdac93 100644 --- a/src/components/discussion/DiscussionOption.tsx +++ b/src/components/discussion/DiscussionOption.tsx @@ -31,7 +31,7 @@ const DiscussionOption = ({
    +
    + {discussion && ( + <> +
    + +
    +

    {discussion.createdAt}

    +
    +
    + +
    +
    +

    {discussion.title}

    +
    + {discussion.content} +
    +
    + +
    + {discussion.options && + discussion.options.map((option: DiscussionOptionI) => ( + {}} + /> + ))} +
    + +
    +
    + red +

    + {discussion.participantCount}명이 참여 중! +

    +
    +

    + 댓글 {discussion.commentCount} +

    +
    +
    + + )} + + + + ) +} + +export default DiscussionDetail diff --git a/src/app/discussion/page.tsx b/src/app/discussion/page.tsx index a6a1497..9d8ec65 100644 --- a/src/app/discussion/page.tsx +++ b/src/app/discussion/page.tsx @@ -14,9 +14,14 @@ const DiscussionPage = () => {
    {discussionList && discussionList.result.map((discussion) => ( - + <> + +
    + ))} -
    ) diff --git a/src/components/board/CommentList.tsx b/src/components/board/CommentList.tsx index 84568eb..c31f105 100644 --- a/src/components/board/CommentList.tsx +++ b/src/components/board/CommentList.tsx @@ -10,11 +10,12 @@ interface CommentListProps { } const CommentList = ({ id, page, size }: CommentListProps) => { - const { data } = useCommentList({ id, page, size }) + const { data: commentList } = useCommentList({ id, page, size }) return (
    - {data && data.result.map((comment) => )} + {commentList && + commentList.result.map((comment) => )}
    ) } diff --git a/src/service/discussion/DiscussionService.ts b/src/service/discussion/DiscussionService.ts index de52934..32ea860 100644 --- a/src/service/discussion/DiscussionService.ts +++ b/src/service/discussion/DiscussionService.ts @@ -19,7 +19,7 @@ class DiscussionService extends Service { } getDiscussionDetail(id: number) { - return this.http.get(`/discussion/${id}`) + return this.http.get(`/discussions/${id}`) } postDiscussion(discussion: FormData) { From d08c1c25dc036dda573c65063e5571d33fb7670a Mon Sep 17 00:00:00 2001 From: parkyejin Date: Fri, 9 Aug 2024 21:10:37 +0900 Subject: [PATCH 9/9] =?UTF-8?q?fix(#19):=20=ED=86=A0=EB=A1=A0=20=EC=98=B5?= =?UTF-8?q?=EC=85=98=EC=97=90=20=ED=86=A0=EB=A1=A0=20=EA=B2=8C=EC=8B=9C?= =?UTF-8?q?=ED=8C=90=20id=20prop=EC=9C=BC=EB=A1=9C=20=EC=A0=84=EB=8B=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/discussion/[id]/page.tsx | 5 ++-- src/components/discussion/DiscussionBoard.tsx | 17 +------------ .../discussion/DiscussionOption.tsx | 23 +++++++++++++---- src/components/home/HotBoardBox.tsx | 13 +++------- src/components/home/HotDiscussion.tsx | 3 ++- src/components/home/HotDiscussionBox.tsx | 13 +++------- src/components/home/HotThreeBox.tsx | 25 +++++++------------ src/model/Home.ts | 1 + 8 files changed, 40 insertions(+), 60 deletions(-) diff --git a/src/app/discussion/[id]/page.tsx b/src/app/discussion/[id]/page.tsx index 3de91e9..c06dba0 100644 --- a/src/app/discussion/[id]/page.tsx +++ b/src/app/discussion/[id]/page.tsx @@ -15,6 +15,7 @@ const DiscussionDetail = () => { const { data: discussionDetail } = useDiscussionDetail(Number(id)) const discussion = discussionDetail && discussionDetail.discussionSimpleInfo + const formattedCreatedAt = discussion && discussion.createdAt.split(' ')[0] return ( <> @@ -32,7 +33,7 @@ const DiscussionDetail = () => {
    -

    {discussion.createdAt}

    +

    {formattedCreatedAt}

    @@ -50,7 +51,7 @@ const DiscussionDetail = () => { {}} + boardId={Number(id)} /> ))}
    diff --git a/src/components/discussion/DiscussionBoard.tsx b/src/components/discussion/DiscussionBoard.tsx index 91d6ce1..5f1f5ac 100644 --- a/src/components/discussion/DiscussionBoard.tsx +++ b/src/components/discussion/DiscussionBoard.tsx @@ -3,7 +3,6 @@ import { DiscussionBoardI, DiscussionOptionI } from '@/model/Discussion' import Image from 'next/image' import { useRouter } from 'next/navigation' -import { usePostDiscussionPraticipation } from '@/service/discussion/useDiscussionService' import Container from '../common/Container' import Profile from '../common/Profile' import DiscussionOption from './DiscussionOption' @@ -29,20 +28,6 @@ const DiscussionBoard = ({ discussionBoard }: DiscussionBoardProps) => { router.push(`/discussion/${id}`) } - const { mutate } = usePostDiscussionPraticipation() - - const handleDiscussionOptionClick = ( - event: React.MouseEvent, - discussionOptionId: number, - ) => { - event.stopPropagation() - - mutate({ - discussionId: id, - discussionOptionId, - }) - } - const formattedCreatedAt = createdAt.split(' ')[0] return ( @@ -71,7 +56,7 @@ const DiscussionBoard = ({ discussionBoard }: DiscussionBoardProps) => { key={index} discussionOption={option} size="small" - onClick={(e) => handleDiscussionOptionClick(e, option.id)} // 이벤트 객체를 전달 + boardId={id} /> ))}
    diff --git a/src/components/discussion/DiscussionOption.tsx b/src/components/discussion/DiscussionOption.tsx index 56a5d03..12f8411 100644 --- a/src/components/discussion/DiscussionOption.tsx +++ b/src/components/discussion/DiscussionOption.tsx @@ -4,6 +4,7 @@ import { DiscussionOptionI } from '@/model/Discussion' import React from 'react' import Image from 'next/image' import clsx from 'clsx' +import { usePostDiscussionPraticipation } from '@/service/discussion/useDiscussionService' const DiscussionOptionTheme = { size: { @@ -15,30 +16,42 @@ const DiscussionOptionTheme = { export interface DiscussionOptionProps { discussionOption: DiscussionOptionI size: keyof typeof DiscussionOptionTheme.size - onClick: React.MouseEventHandler + boardId: number } -// TODO: 사진 크기 맞추기 const DiscussionOption = ({ discussionOption, size, - onClick, + boardId, }: DiscussionOptionProps) => { const { content, imgUrl, disabled, selectedPercent, selected } = discussionOption + const { mutate } = usePostDiscussionPraticipation() + + const handleClick = ( + event: React.MouseEvent, + ) => { + event.stopPropagation() + + mutate({ + discussionId: boardId, + discussionOptionId: discussionOption.id, + }) + } + return (