Merge pull request #1089 from peer-42seoul/fix-showcase-comment-edit

[1.0.7 / S-SC] 쇼케이스 내 댓글 수정 기능 추가
peer-42seoul · Mar 6, 2024 · e8787e4 · e8787e4
2 parents b6c6c4a + e430d22
commit e8787e4
Show file tree

Hide file tree

Showing 3 changed files with 133 additions and 77 deletions.
diff --git a/src/app/showcase/detail/[id]/panel/CommentContainer.style.ts b/src/app/showcase/detail/[id]/panel/CommentContainer.style.ts
@@ -20,6 +20,9 @@ export const commentListContainer = {
   alignItems: 'center',
 }
 
+export const isEditContainer = {
+  width: '100%',
+}
 export const commenterInfo = {
   display: 'flex',
   marginBottom: '0.25rem',
@@ -29,7 +32,7 @@ export const commenterInfo = {
 
 export const iconContainer = {
   display: 'flex',
-  flexDirection: 'column',
+  flexDirection: 'row',
   alignItems: 'center',
   gap: '0.5rem',
 }

diff --git a/src/app/showcase/detail/[id]/panel/CommentContainer.tsx b/src/app/showcase/detail/[id]/panel/CommentContainer.tsx
@@ -3,30 +3,61 @@ import CuAvatar from '@/components/CuAvatar'
 import CuCircularProgress from '@/components/CuCircularProgress'
 import CuTextModal from '@/components/CuTextModal'
 import useModal from '@/hook/useModal'
-import { TrashIcon } from '@/icons'
 import { CommentProps, IComment, IPostId } from '@/types/IComment'
-import {
-  Box,
-  Container,
-  IconButton,
-  Stack,
-  Typography,
-  useTheme,
-  alpha,
-} from '@mui/material'
-import React from 'react'
+import { Box, Container, Stack, Typography, TextField } from '@mui/material'
+import React, { ChangeEvent, useState } from 'react'
 import useSWR, { mutate } from 'swr'
 import { CommentWriter } from './CommentWriter'
 import useToast from '@/states/useToast'
 import * as style from './CommentContainer.style'
 import OthersProfile from '@/app/panel/OthersProfile'
-// import OthersProfile from '@/app/panel/OthersProfile'
+import { CommentMoreDropdownMenu } from '@/components/board/CommentPanel'
+import CuButton from '@/components/CuButton'
 
 const Comment = ({ data, postId }: CommentProps) => {
-  const theme = useTheme()
   const axiosWithAuth = useAxiosWithAuth()
-  const { isOpen: alertOpen, closeModal, openModal } = useModal()
+  const { closeModal, openModal, isOpen } = useModal()
+  const [isEdit, setIsEdit] = useState(false)
   const { openToast, closeToast } = useToast()
+  const [newContent, setNewContent] = useState(data.content)
+
+  const onChangeContent = (
+    event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
+  ) => {
+    setNewContent(event.target.value)
+  }
+
+  const handleError = (error: any, openToast: any) => {
+    switch (error.response.status) {
+      case 401: {
+        openToast({
+          severity: 'error',
+          message: '잘못된 접근입니다.',
+        })
+        break
+      }
+      case 403: {
+        openToast({
+          severity: 'error',
+          message: '접근이 거부되었습니다.',
+        })
+        break
+      }
+      case 404: {
+        openToast({
+          severity: 'error',
+          message: '존재하지 않는 댓글입니다.',
+        })
+        break
+      }
+      default:
+        openToast({
+          severity: 'error',
+          message: '알 수 없는 에러가 발생했습니다.',
+        })
+        break
+    }
+  }
 
   const onDeleteComment = async () => {
     try {
@@ -38,44 +69,39 @@ const Comment = ({ data, postId }: CommentProps) => {
         `${process.env.NEXT_PUBLIC_CSR_API}/api/v1/showcase/comment/${postId}?page=1&pageSize=3`,
       )
     } catch (error: any) {
-      switch (error.response.status) {
-        case 401: {
-          openToast({
-            severity: 'error',
-            message: '접근이 거부되었습니다.',
-          })
-          break
-        }
-        case 403: {
-          openToast({
-            severity: 'error',
-            message: '접근이 거부되었습니다.',
-          })
-          break
-        }
-        case 404: {
-          openToast({
-            severity: 'error',
-            message: '존재하지 않는 댓글입니다.',
-          })
-          break
-        }
-        default:
-          openToast({
-            severity: 'error',
-            message: '알 수 없는 에러가 발생했습니다.',
-          })
-          break
-      }
+      handleError(error, openToast)
+    }
+  }
+  const onEditComment = async (commentId: number) => {
+    if (!newContent) {
+      openToast({
+        severity: 'error',
+        message: '댓글을 작성해주세요.',
+      })
+      return
+    }
+    try {
+      await axiosWithAuth.put(
+        `${process.env.NEXT_PUBLIC_CSR_API}/api/v1/showcase/comment/${commentId}`,
+        { content: newContent },
+      )
+      setIsEdit(false)
+      openToast({
+        severity: 'success',
+        message: '댓글을 수정했습니다.',
+      })
+      mutate(
+        `${process.env.NEXT_PUBLIC_CSR_API}/api/v1/showcase/comment/${postId}?page=1&pageSize=3`,
+      )
+    } catch (error: any) {
+      handleError(error, openToast)
     }
   }
-
   return (
     <>
       <Stack sx={style.commentListContainer}>
-        <Box>
+        <Box sx={style.isEditContainer}>
           <Box sx={style.commenterInfo}>
-            {/* TODO : OthersProfile 컴포넌트로 감싸기 */}
             <OthersProfile
               userId={data.authorId.toString()}
               name={data.authorNickname}
@@ -90,42 +116,62 @@ const Comment = ({ data, postId }: CommentProps) => {
               {data.authorNickname}
             </Typography>
           </Box>
-          <Typography variant="Body2" color={'text.normal'}>
-            {data.content}
-          </Typography>
-          <Typography variant="Tag" color={'text.assistive'}>
-            {data.createAt
-              .split('T')[0]
-              .replace(/-/g, '월 ')
-              .replace('월 ', '년 ') + '일'}
-          </Typography>
-        </Box>
-        <Box sx={style.iconContainer}>
-          {data.isAuthor && (
-            <IconButton onClick={openModal}>
-              <TrashIcon
-                sx={{
-                  ...style.iconStyle,
-                  color: alpha(theme.palette.text.assistive, 0.5),
+          {isEdit ? (
+            <Stack alignItems={'flex-end'}>
+              <TextField
+                type="text"
+                id="content"
+                defaultValue={newContent}
+                fullWidth
+                onChange={(event) => onChangeContent(event)}
+                placeholder="댓글을 작성해주세요."
+                style={{
+                  color: 'text.alternative',
+                  width: '100%',
                 }}
+                inputProps={{ maxLength: 150, style: { padding: '1rem' } }}
               />
-            </IconButton>
+              <Stack direction={'row'} spacing={1} style={{ marginTop: '8px' }}>
+                <CuButton
+                  message={'취소'}
+                  action={() => setIsEdit(false)}
+                  variant={'outlined'}
+                />
+                <CuButton
+                  action={() => onEditComment(data.commentId)}
+                  message={'수정'}
+                  type={'submit'}
+                  variant={'contained'}
+                />
+              </Stack>
+            </Stack>
+          ) : (
+            <>
+              <Typography variant="Body2" color={'text.normal'}>
+                {data.content}
+              </Typography>
+              <Typography variant="Tag" color={'text.assistive'}>
+                {data.createAt
+                  .split('T')[0]
+                  .replace(/-/g, '월 ')
+                  .replace('월 ', '년 ') + '일'}
+              </Typography>
+            </>
           )}
-          {/* <IconButton onClick={openModal}>
-            <EditIcon
-              sx={{
-                width: '1.2rem',
-                height: '1.25rem',
-                color: alpha(theme.palette.text.assistive, 0.5),
-              }}
-            />
-          </IconButton> */}
         </Box>
+        {!isEdit && data.isAuthor && (
+          <Box sx={style.iconContainer}>
+            <CommentMoreDropdownMenu
+              handleDelete={() => openModal()}
+              setEditMode={() => setIsEdit(true)}
+            />
+          </Box>
+        )}
         <CuTextModal
-          open={alertOpen}
+          open={isOpen}
           onClose={closeModal}
-          title={'경고'}
-          content={'정말로 삭제하시겠어요?'}
+          title={'댓글을 삭제할까요?'}
+          content={'댓글을 삭제하면 복구할 수 없어요.'}
           containedButton={{
             text: '삭제',
             onClick: onDeleteComment,

diff --git a/src/app/showcase/detail/[id]/panel/CommentWriter.tsx b/src/app/showcase/detail/[id]/panel/CommentWriter.tsx
@@ -24,6 +24,13 @@ export const CommentWriter = ({
     event.preventDefault()
 
     try {
+      if (!content) {
+        openToast({
+          severity: 'error',
+          message: '댓글을 작성해주세요.',
+        })
+        return
+      }
       await axiosWithAuth.post(
         `${process.env.NEXT_PUBLIC_CSR_API}/api/v1/showcase/comment`,
         {