Feature/#250 피드백 수정 텍스트 넘어감프로필 안보임 등

components/EditorViewer.tsx

@@ -7,7 +7,7 @@ export default function EditorViewer({ content }: { content: string }) {
   return (
     <div
       dangerouslySetInnerHTML={{ __html: content }}
-      className="contentStyle"
+      className="contentStyle break-all"
     />
   );
 }

components/boards.page/BoardDetailCard.tsx

@@ -1,6 +1,6 @@
 import Image from 'next/image';
 import { useRouter } from 'next/router';
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { BoardBase, Writer } from 'types/board';
 
 import Button from '@/components/Button';
@@ -51,12 +51,19 @@ export default function BoardDetailCard({
   const [snackStyled, setSnackStyled] =
     useState<SnackBarProps['severity']>(undefined);
   const [isModal, setIsModal] = useState(false);
+  const [isUpdate, setIsUpdate] = useState(false);
   const isMobile = useCheckMobile();
   const router = useRouter();
   const { articleId } = router.query;
   const id = articleId as string;
   const { isAuthenticated } = useProfileContext();
 
+  useEffect(() => {
+    if (createdAt !== updatedAt) {
+      setIsUpdate(true);
+    }
+  }, [createdAt, updatedAt]);
+
   const handleModalClose = () => {
     setIsModal(false);
   };
@@ -115,40 +122,40 @@ export default function BoardDetailCard({
   return (
     <div className="rounded-custom bg-background px-[30px] py-10 shadow-custom dark:shadow-custom-dark mo:p-5">
       <header className="mb-[38px] mo:mb-[15px] mo:pb-[11px] ta:mb-[30px] ta:pb-2 tamo:border-b">
-        <div className="mb-[30px] flex items-center justify-between gap-[14px] mo:mb-[14px] tamo:gap-3">
-          <h1 className="flex-1 text-32sb mo:text-24sb">
+        <div className="mb-[30px] flex items-center justify-between mo:mb-[14px]">
+          <h1 className="w-full break-all text-32sb mo:text-24sb">
             {title ? title : '제목 없음'}
           </h1>
-          {isOwner &&
-            (!isMobile ? (
-              <>
-                <Button onClick={handleUpdateClick}>수정하기</Button>
-                <Button onClick={handleDeleteClick} variant="danger">
-                  삭제하기
-                </Button>
-              </>
-            ) : (
-              <>
-                <ButtonIcon onClick={handleUpdateClick} type="write" />
-                <ButtonIcon onClick={handleDeleteClick} type="delete" />
-              </>
-            ))}
+          {isOwner && (
+            <div className="flex items-center gap-[14px] tamo:gap-3">
+              {!isMobile ? (
+                <>
+                  <Button onClick={handleUpdateClick}>수정하기</Button>
+                  <Button onClick={handleDeleteClick} variant="danger">
+                    삭제하기
+                  </Button>
+                </>
+              ) : (
+                <>
+                  <ButtonIcon onClick={handleUpdateClick} type="write" />
+                  <ButtonIcon onClick={handleDeleteClick} type="delete" />
+                </>
+              )}
+            </div>
+          )}
         </div>
         <div className="flex items-center gap-[10px] text-14 text-gray-400 mo:flex-wrap mo:text-12">
-          <span className="whitespace-nowrap mo:w-full mo:flex-1">{name}</span>
-          <div className="flex w-full justify-between">
-            <div className="flex items-center gap-[10px]">
-              <span>등록일 : {dateConversion(createdAt)}</span>
-              <span>|</span>
-              <span>최근 수정일 : {dateConversion(updatedAt)}</span>
-            </div>
-
-            <Heart
-              initialCount={likeCountState}
-              isLiked={isLiked}
-              onClick={handleHeartClick}
-            />
+          <span>{name}</span>
+          <div className="flex flex-1 items-center gap-[10px]">
+            <span>{dateConversion(createdAt)}</span>
+            {isUpdate && <span>(수정된 게시글)</span>}
           </div>
+
+          <Heart
+            initialCount={likeCountState}
+            isLiked={isLiked}
+            onClick={handleHeartClick}
+          />
         </div>
       </header>
 

components/boards.page/Comment.tsx

@@ -1,5 +1,5 @@
 import Image from 'next/image';
-import React from 'react';
+import React, { useEffect } from 'react';
 import { useState } from 'react';
 import { CommentType, Writer } from 'types/board';
 
@@ -34,6 +34,7 @@ export default function Comment({
 }: CommentProps) {
   const [value, setValue] = useState(content);
   const [isEditing, setIsEditing] = useState(false);
+  const [isUpdate, setIsUpdate] = useState(false);
 
   const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
     setValue(e.target.value);
@@ -54,15 +55,23 @@ export default function Comment({
     setIsEditing(true);
   };
 
+  useEffect(() => {
+    if (createdAt !== updatedAt) {
+      setIsUpdate(true);
+    }
+  }, [createdAt, updatedAt]);
+
   return (
     <div className="flex items-start gap-5 rounded-custom px-[30px] py-[22px] shadow-custom dark:shadow-custom-dark mo:gap-[15px] mo:px-5 mo:py-4">
-      <Image
-        src={profile ? profile : '/icon/icon-profile.svg'}
-        alt="user profile"
-        className="size-10 overflow-hidden rounded-full object-cover mo:size-10"
-        width={50}
-        height={50}
-      />
+      <div className="size-[50px] overflow-hidden rounded-full mo:size-10">
+        <Image
+          src={profile ? profile : '/icon/icon-profile.svg'}
+          alt="user profile"
+          width={50}
+          height={50}
+          className="object-cover"
+        />
+      </div>
       <div className="flex-1">
         <div className="mb-2 flex items-center justify-between mo:mb-[6px]">
           <span className="text-18sb">{name}</span>
@@ -92,16 +101,19 @@ export default function Comment({
         </div>
 
         {!isEditing ? (
-          <>
-            <p className="mb-[10px] text-16 mo:mb-1 mo:text-14">{content}</p>
+          <div>
+            <p className="mb-[10px] w-full break-all text-16 mo:mb-1 mo:text-14">
+              {content}
+            </p>
             <span className="mr-2 text-14 text-gray-400 mo:text-12">
-              등록일 : {dateConversion(createdAt)}
-            </span>
-
-            <span className="text-14 text-gray-400 mo:text-12">
-              수정일 : {dateConversion(updatedAt)}
+              {dateConversion(createdAt)}
             </span>
-          </>
+            {isUpdate && (
+              <span className="text-14 text-gray-400 mo:text-12">
+                (수정된 댓글)
+              </span>
+            )}
+          </div>
         ) : (
           <CommentForm
             value={value}