Deploy: 배포

src/api/hooks/community.ts

@@ -9,7 +9,6 @@ import { useSearchParams } from 'react-router-dom'
 
 import { useErrorHandledMutation } from '@/api/hooks/useErrorHandledMutation'
 import {
-  CommentReportRequest,
   GetMyCommentsResponse,
   PostByBoardResponse,
   PostCommentLikeRequest,
@@ -20,7 +19,6 @@ import {
   PostPreviewResponse,
   PostReactionRequest,
   PostReactionResponse,
-  PostReportRequest,
   PostScrapResponse,
 } from '@/api/types/community'
 import { CommentProps, PostPreviewByBoardMeta, PostPreviewProps, PostViewProps, ReactionType } from '@/types/community'
@@ -318,24 +316,6 @@ export const useDeletePost = () => {
   return useErrorHandledMutation({ mutationFn: deletePost })
 }
 
-const reportPost = async ({ postId, reason }: PostReportRequest) => {
-  const response = await apiInterface.post(`/post/${postId}/report`, { reason })
-  return response.data
-}
-
-export const useReportPost = () => {
-  return useErrorHandledMutation({ mutationFn: reportPost })
-}
-
-const reportComment = async ({ commentId, reason }: CommentReportRequest) => {
-  const response = await apiInterface.post(`/comment/${commentId}/report`, { reason })
-  return response.data
-}
-
-export const useReportComment = () => {
-  return useErrorHandledMutation({ mutationFn: reportComment })
-}
-
 const getMyPost = async (take: number, cursor?: string) => {
   const response = await apiInterface.get<PostPreviewResponse>('post/my', {
     params: { take, cursor: cursor?.length === 14 ? cursor : undefined },

src/api/hooks/friends.ts

@@ -10,7 +10,7 @@ import {
   PatchFriendshipRequestRequest,
   PostFriendshipRequest,
 } from '@/api/types/friends'
-import { GetFriendTimetableResponse } from '@/api/types/timetable'
+import { GetTimetableByTimetableIdResponse } from '@/api/types/timetable'
 import { apiInterface } from '@/util/axios/custom-axios'
 
 const getFriendList = async ({ keyword }: GetFriendListRequest) => {
@@ -141,7 +141,7 @@ export const useDeleteFriendship = () => {
 }
 
 const getFriendTimetable = async (props: GetFriendTimetableRequest) => {
-  const response = await apiInterface.get<GetFriendTimetableResponse>(`/friendship/friend-timetable`, {
+  const response = await apiInterface.get<GetTimetableByTimetableIdResponse>(`/friendship/friend-timetable`, {
     params: props,
   })
   return response.data

src/api/hooks/schedule.ts

@@ -30,19 +30,21 @@ export const usePostSchedule = () => {
       queryClient.setQueryData<GetTimetableByTimetableIdResponse>(
         ['timetable', String(response.timetableId)],
         prevData => {
-          if (prevData !== undefined) {
+          if (prevData !== undefined && prevData.timetable !== null) {
             return {
-              ...prevData,
-              schedules: prevData.schedules.concat([
-                {
-                  location: response.location,
-                  scheduleDay: response.day,
-                  scheduleEndTime: response.endTime,
-                  scheduleId: response.id,
-                  scheduleStartTime: response.startTime,
-                  scheduleTitle: response.title,
-                },
-              ]),
+              timetable: {
+                ...prevData.timetable,
+                schedules: prevData.timetable.schedules.concat([
+                  {
+                    location: response.location,
+                    scheduleDay: response.day,
+                    scheduleEndTime: response.endTime,
+                    scheduleId: response.id,
+                    scheduleStartTime: response.startTime,
+                    scheduleTitle: response.title,
+                  },
+                ]),
+              },
             }
           }
         },
@@ -100,22 +102,24 @@ export const usePatchSchedule = () => {
       queryClient.setQueryData<GetTimetableByTimetableIdResponse>(
         ['timetable', String(response.timetableId)],
         prevData => {
-          if (prevData !== undefined) {
+          if (prevData !== undefined && prevData.timetable !== null) {
             return {
-              ...prevData,
-              schedules: prevData.schedules.map(schedule => {
-                if (schedule.scheduleId === response.id) {
-                  return {
-                    location: response.location,
-                    scheduleDay: response.day,
-                    scheduleEndTime: response.endTime,
-                    scheduleId: response.id,
-                    scheduleStartTime: response.startTime,
-                    scheduleTitle: response.title,
+              timetable: {
+                ...prevData.timetable,
+                schedules: prevData.timetable.schedules.map(schedule => {
+                  if (schedule.scheduleId === response.id) {
+                    return {
+                      location: response.location,
+                      scheduleDay: response.day,
+                      scheduleEndTime: response.endTime,
+                      scheduleId: response.id,
+                      scheduleStartTime: response.startTime,
+                      scheduleTitle: response.title,
+                    }
                   }
-                }
-                return schedule
-              }),
+                  return schedule
+                }),
+              },
             }
           }
         },

src/api/hooks/timetable.ts

@@ -31,9 +31,12 @@ export const useGetUserTimetableList = () => {
 }
 
 const INITIAL_TIMETABLE: GetTimetableByTimetableIdResponse = {
-  courses: [],
-  schedules: [],
-  color: 'Red',
+  timetable: {
+    timetableName: '',
+    courses: [],
+    schedules: [],
+    color: 'Red',
+  },
 }
 
 const getTimetableByID = async ({ timetableId }: GetTimetableByTimetableIdRequest) => {
@@ -184,12 +187,14 @@ export const useDeleteCourse = () => {
     onSuccess: (response, request) => {
       if (response.deleted) {
         queryClient.setQueryData<GetTimetableByTimetableIdResponse>(['timetable', request.timetableId], prevData => {
-          if (prevData !== undefined) {
+          if (prevData !== undefined && prevData.timetable !== null) {
             return {
-              ...prevData,
-              courses: prevData.courses.filter(course => {
-                return course.courseId !== request.courseId
-              }),
+              timetable: {
+                ...prevData.timetable,
+                courses: prevData.timetable.courses.filter(course => {
+                  return course.courseId !== request.courseId
+                }),
+              },
             }
           }
         })

src/api/types/timetable.ts

@@ -1,17 +1,11 @@
-import { ColorType, CourseType, ScheduleType, SemesterType, TimetableInfo } from '@/types/timetable'
+import { ColorType, SemesterType, TimetableInfo, TimetableInterface } from '@/types/timetable'
 
 export interface GetTimetableByTimetableIdRequest {
   timetableId: number
 }
 
 export interface GetTimetableByTimetableIdResponse {
-  courses: CourseType[]
-  schedules: ScheduleType[]
-  color: ColorType
-}
-
-export interface GetFriendTimetableResponse extends GetTimetableByTimetableIdResponse {
-  timetableName: string
+  timetable: TimetableInterface | null
 }
 
 export type GetTimetableByUserIdResponse = TimetableInfo[]

src/components/community/post/Comment.tsx

@@ -17,8 +17,9 @@ interface CommentProps {
   isOpen: boolean
   currentIndex: number
   handleClick: () => void
+  boardName: string
 }
-const Comment = memo(({ isOpen, currentIndex, handleClick }: CommentProps) => {
+const Comment = memo(({ isOpen, currentIndex, handleClick, boardName }: CommentProps) => {
   const post = useAtomValue(postAtom)
   const isPostAuthorAnonymous = post.user.isAnonymous
   const comment = post.comments[currentIndex]
@@ -34,6 +35,7 @@ const Comment = memo(({ isOpen, currentIndex, handleClick }: CommentProps) => {
     () => getCommentUsername({ comment, isPostAuthorAnonymous }),
     [comment, isPostAuthorAnonymous],
   )
+
   return (
     <div
       className={css({
@@ -49,6 +51,8 @@ const Comment = memo(({ isOpen, currentIndex, handleClick }: CommentProps) => {
         date={comment.createdAt}
         isMyComment={comment.isMyComment}
         commentId={comment.id}
+        postId={post.id}
+        boardName={boardName}
         isAuthorMatchingPostAnonymity={isAuthorMatchingPostAnonymity({
           isAuthor: comment.isAuthor,
           isPostAuthorAnonymous,

src/components/community/post/CommentHeader.tsx

@@ -2,11 +2,11 @@ import { css } from '@styled-system/css'
 import { boardTag } from '@styled-system/recipes'
 import { User, UserPen } from 'lucide-react'
 import { useCallback, useState } from 'react'
-import { useLocation } from 'react-router-dom'
 
-import { useDeleteComment, useReportComment } from '@/api/hooks/community'
+import { useDeleteComment } from '@/api/hooks/community'
 import UtilButton from '@/components/community/post/UtilButton'
 import AlertModal from '@/components/ui/modal/AlertModal'
+import { usePostReport } from '@/domain/Report/hooks/usePostReport'
 import { getFormattedTimeString } from '@/util/getFormattedTimeString'
 import { useModal } from '@/util/hooks/useModal'
 
@@ -17,6 +17,8 @@ interface CommentHeaderProps {
   commentId: number
   isAuthorMatchingPostAnonymity?: boolean
   isDeleted: boolean
+  postId: number
+  boardName: string
 }
 const CommentHeader = ({
   isMyComment,
@@ -25,27 +27,25 @@ const CommentHeader = ({
   commentId,
   isAuthorMatchingPostAnonymity,
   isDeleted,
+  postId,
+  boardName,
 }: CommentHeaderProps) => {
   const [target, setTarget] = useState<'report' | 'delete'>()
   const { modalRef, isOpen, handleOpen, handleLayoutClose, handleButtonClose } = useModal()
-  const { mutate: mutateReportComment } = useReportComment()
+  const { mutate: mutateReportComment } = usePostReport({})
   const { mutate: mutateDeleteComment } = useDeleteComment()
-  const boardName = useLocation().pathname.split('/')[2]
   const handleTargetAndOpen = useCallback(
     (target: 'report' | 'delete') => {
       setTarget(target)
       handleOpen()
     },
     [handleOpen],
   )
+
   const handleReportConfirm = useCallback(() => {
-    mutateReportComment(
-      { commentId, reason: 'Inappropriate' },
-      {
-        onSettled: () => handleButtonClose(),
-      },
-    )
-  }, [commentId, handleButtonClose, mutateReportComment])
+    mutateReportComment({ postId, commentId, reason: 'Inappropriate' }, { onSettled: handleButtonClose })
+  }, [commentId, handleButtonClose, mutateReportComment, postId])
+
   const handleDelete = useCallback(
     () => mutateDeleteComment(commentId, { onSuccess: handleButtonClose }),
     [commentId, handleButtonClose, mutateDeleteComment],

src/components/community/post/CommentReply.tsx

@@ -11,14 +11,15 @@ import { POST_MESSAGES } from '@/lib/messages/community'
 import { postAtom } from '@/lib/store/post'
 import { CommentProps } from '@/types/community'
 import { getCommentUsername } from '@/util/getCommentUsername'
-import { isAuthorMatchingPostAnonymity } from '@/util/isAuthorMatchingPostAnonymity'
 import { useModal } from '@/util/hooks/useModal'
+import { isAuthorMatchingPostAnonymity } from '@/util/isAuthorMatchingPostAnonymity'
 
 interface CommentReplyProps {
   reply: Omit<CommentProps, 'reply'>
   parentId: number
+  boardName: string
 }
-const CommentReply = ({ reply, parentId }: CommentReplyProps) => {
+const CommentReply = ({ reply, parentId, boardName }: CommentReplyProps) => {
   const post = useAtomValue(postAtom)
   const isPostAuthorAnonymous = post.user.isAnonymous
   const { mutate: mutateLike } = usePostCommentLike()
@@ -50,6 +51,8 @@ const CommentReply = ({ reply, parentId }: CommentReplyProps) => {
           date={reply.createdAt}
           isMyComment={reply.isMyComment}
           commentId={reply.id}
+          postId={post.id}
+          boardName={boardName}
           isAuthorMatchingPostAnonymity={isAuthorMatchingPostAnonymity({
             isAuthor: reply.isAuthor,
             isPostAuthorAnonymous,

src/components/community/post/CommentSet.tsx

@@ -1,19 +1,20 @@
 import { css } from '@styled-system/css'
 import { useAtomValue } from 'jotai'
 import { useCallback, useState } from 'react'
+import { useParams } from 'react-router-dom'
 
 import Comment from '@/components/community/post/Comment'
 import CommentInput from '@/components/community/post/CommentInput'
 import CommentReply from '@/components/community/post/CommentReply'
 import { postAtom } from '@/lib/store/post'
-
 interface CommentSetProps {
   index: number
 }
 const CommentSet = ({ index }: CommentSetProps) => {
   const [open, setOpen] = useState(false)
   const handleClick = useCallback(() => setOpen(prev => !prev), [])
   const comment = useAtomValue(postAtom).comments[index]
+  const { boardName = '' } = useParams()
   return (
     <div
       className={css({
@@ -33,9 +34,9 @@ const CommentSet = ({ index }: CommentSetProps) => {
           alignSelf: 'stretch',
         })}
       >
-        <Comment currentIndex={index} isOpen={open} handleClick={handleClick} />
+        <Comment currentIndex={index} isOpen={open} handleClick={handleClick} boardName={boardName} />
         {comment.reply.map(reply => (
-          <CommentReply key={reply.id} reply={reply} parentId={comment.id} />
+          <CommentReply key={reply.id} reply={reply} parentId={comment.id} boardName={boardName} />
         ))}
       </div>
       <CommentInput currentIndex={index} isOpen={open} />

src/components/community/post/Post.tsx

@@ -6,12 +6,13 @@ import { Eye } from 'lucide-react'
 import { memo, useCallback, useMemo } from 'react'
 import { useNavigate, useParams } from 'react-router-dom'
 
-import { useDeletePost, useReportPost } from '@/api/hooks/community'
+import { useDeletePost } from '@/api/hooks/community'
 import BoardTag from '@/components/community/Boards/BoardTag'
 import PostImgCarousel from '@/components/community/post/PostImgCarousel'
 import ReactionSection from '@/components/community/post/ReactionSection'
 import UtilButton from '@/components/community/post/UtilButton'
 import AlertModal from '@/components/ui/modal/AlertModal'
+import { usePostReport } from '@/domain/Report/hooks/usePostReport'
 import { persistedPostData, postAtom } from '@/lib/store/post'
 import { BoardType } from '@/types/community'
 import { useModal } from '@/util/hooks/useModal'
@@ -27,8 +28,9 @@ const Post = memo(() => {
     navigate(`/community/action/edit/post/${boardName}`)
     postEditData(postAtomData)
   }, [navigate, boardName, postEditData, postAtomData])
+
   const { mutate: mutateDeletePost } = useDeletePost()
-  const { mutate: mutateReportPost } = useReportPost()
+  const { mutate: mutateReportPost } = usePostReport({})
   const { modalRef, isOpen, handleOpen, handleLayoutClose, handleButtonClose } = useModal()
 
   const handleConfirm = useCallback(() => {
@@ -41,12 +43,7 @@ const Post = memo(() => {
   }, [handleButtonClose, mutateDeletePost, navigate, postAtomData.id])
 
   const handleReportConfirm = useCallback(() => {
-    mutateReportPost(
-      { postId: postAtomData.id, reason: 'Inappropriate' },
-      {
-        onSettled: () => handleButtonClose(),
-      },
-    )
+    mutateReportPost({ postId: postAtomData.id, reason: 'Inappropriate' }, { onSettled: () => handleButtonClose() })
   }, [handleButtonClose, mutateReportPost, postAtomData.id])
 
   const isPostEditable = useMemo(() => {