Feature/#229 qa 게시판 목록게시판 상세

components/DarkmodeToggle.tsx

@@ -28,7 +28,7 @@ export default function DarkModeToggle() {
       onClick={() => setIsDarkMode((prev) => !prev)}
     >
       <Image
-        src={isDarkMode ? 'icon/icon-light.svg' : 'icon/icon-dark.svg'}
+        src={isDarkMode ? '/icon/icon-light.svg' : '/icon/icon-dark.svg'}
         width={24}
         height={24}
         alt="다크 모드 전환"

components/boards.page/BoardDetailCard.tsx

@@ -134,19 +134,21 @@ export default function BoardDetailCard({
               </>
             ))}
         </div>
-        <div className="flex items-center gap-[10px] text-14 text-gray-400 mo:text-12">
-          <span>{name}</span>
-          <span>등록일 : {dateConversion(createdAt)}</span>
-          <span>|</span>
-          <span className="flex-1">
-            최근 수정일 : {dateConversion(updatedAt)}
-          </span>
+        <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}
-          />
+            <Heart
+              initialCount={likeCountState}
+              isLiked={isLiked}
+              onClick={handleHeartClick}
+            />
+          </div>
         </div>
       </header>
 
@@ -157,7 +159,8 @@ export default function BoardDetailCard({
           width={500}
           height={300}
           priority
-          className="mb-5 h-[300px] w-[500px] mo:mb-[15px] mo:h-auto mo:w-[295px]"
+          className="h-[300px]] mb-5 w-auto mo:mb-[15px] mo:h-[177px]"
+          sizes="(max-width: 743px) 295px, 500px"
         />
         <EditorViewer content={content} />
       </div>

components/boards.page/BoardList.tsx

@@ -9,7 +9,7 @@ import BoardItem from './BoardItem';
  */
 export default function BoardList({ data = [] }: BoardListResponse) {
   const tableStyles =
-    'grid grid-cols-[50px_2fr_120px_120px_130px] ta:grid-cols-[50px 2fr 70px 100px 110px] py-[11px] mo:py-[14px] border-b items-center text-16 pc:px-[30px] ta:px-[10px]';
+    'grid grid-cols-[50px_2fr_120px_120px_130px] ta:grid-cols-[50px_2fr_70px_100px_110px] py-[11px] mo:py-[14px] border-b items-center text-16 pc:px-[30px] ta:px-[10px]';
 
   return (
     <div className="w-full text-center mo:text-left">

components/boards.page/Comment.tsx

@@ -59,11 +59,11 @@ export default function Comment({
       <Image
         src={profile ? profile : '/icon/icon-profile.svg'}
         alt="user profile"
-        className="overflow-hidden rounded-full mo:size-10"
+        className="size-10 overflow-hidden rounded-full object-cover mo:size-10"
         width={50}
         height={50}
       />
-      <div className="w-full">
+      <div className="flex-1">
         <div className="mb-2 flex items-center justify-between mo:mb-[6px]">
           <span className="text-18sb">{name}</span>
 

pages/boards/[articleId].tsx

@@ -27,6 +27,7 @@ import {
 } from '@/services/api/commentAPI';
 import { CommentsData, CommentType } from 'types/board';
 import SnackBar, { SnackBarProps } from '@/components/SnackBar';
+import ModalDefault from '@/components/Modal/ModalDefault';
 
 export default function BoardsDetails() {
   const [boardData, setBoardData] = useState<ArticleData | null>(null);
@@ -38,6 +39,8 @@ export default function BoardsDetails() {
   const [snackStyled, setSnackStyled] =
     useState<SnackBarProps['severity']>(undefined);
 
+  const [isModal, setIsModal] = useState(false);
+  const [commentToDelete, setCommentToDelete] = useState<number | null>(null);
   const router = useRouter();
   const { articleId } = router.query;
   const { isAuthenticated } = useProfileContext();
@@ -172,14 +175,28 @@ export default function BoardsDetails() {
   };
 
   // 댓글 삭제 핸들러
-  const handleDelete = async (id: number) => {
-    try {
-      await deleteCommentMutation.mutateAsync(id);
-    } catch (error) {
-      console.error('댓글을 삭제하지 못했습니다.', error);
+  const handleDelete = async () => {
+    if (commentToDelete !== null) {
+      try {
+        await deleteCommentMutation.mutateAsync(commentToDelete);
+        setIsModal(false);
+        setCommentToDelete(null);
+      } catch (error) {
+        console.error('댓글을 삭제하지 못했습니다.', error);
+      }
     }
   };
 
+  const handleDeleteClick = (id: number) => {
+    setCommentToDelete(id);
+    setIsModal(true);
+  };
+
+  const handleModalClose = () => {
+    setIsModal(false);
+    setCommentToDelete(null);
+  };
+
   // 게시글 데이터 로딩 상태
   if (!boardData) {
     return <div>게시글을 불러오는 중입니다...</div>;
@@ -247,7 +264,7 @@ export default function BoardsDetails() {
                       onclick={{
                         update: (newContent: string) =>
                           handleUpdate(item.id, newContent),
-                        delete: () => handleDelete(item.id),
+                        delete: () => handleDeleteClick(item.id),
                       }}
                       isOwner={item.writer.id === userId}
                     />
@@ -275,6 +292,18 @@ export default function BoardsDetails() {
         >
           {snackBarMessage}
         </SnackBar>
+        <ModalDefault
+          title="알림"
+          text="댓글을 삭제하시겠습니까?"
+          onClose={handleModalClose}
+          isOpen={isModal}
+          closeOnBackgroundClick={true}
+        >
+          <Button onClick={handleModalClose}>취소</Button>
+          <Button onClick={handleDelete} variant="danger">
+            삭제
+          </Button>
+        </ModalDefault>
       </main>
     </>
   );

pages/boards/index.tsx

@@ -74,7 +74,8 @@ export default function Boards({
   const [likeBoards] = useState<Board[]>(initialLikeBoards);
   const [currentPage, setCurrentPage] = useState(1);
   const [value, setValue] = useState('');
-  const [selectedOption, setSelectedOption] = useState('최신순'); // 옵션 상태 추가
+  const [searchValue, setSearchValue] = useState('');
+  const [selectedOption, setSelectedOption] = useState('최신순');
   const [snackBarOpen, setSnackBarOpen] = useState(false);
   const [snackBarMessage, setSnackBarMessage] = useState('');
   const [snackStyled, setSnackStyled] =
@@ -93,6 +94,7 @@ export default function Boards({
         orderBy,
         pageSize: PAGE_SIZE,
         page: currentPage,
+        keyword: searchValue,
       });
       if (Array.isArray(res.list) && res.list.length > 0) {
         setBoards(res.list);
@@ -104,19 +106,10 @@ export default function Boards({
     fetchBoards().catch((error) =>
       console.error('게시글 데이터를 불러오지 못했습니다 :', error)
     );
-  }, [selectedOption, currentPage]);
+  }, [selectedOption, currentPage, searchValue]);
 
   const handleSearchSubmit = async () => {
-    const res = await getBoards({
-      keyword: value,
-      pageSize: PAGE_SIZE,
-      page: currentPage,
-    });
-    if (Array.isArray(res.list) && res.list.length > 0) {
-      setBoards(res.list);
-    } else {
-      setBoards([]);
-    }
+    setSearchValue(value);
   };
 
   const handleOptionSelect = (option: string) => {
@@ -136,9 +129,9 @@ export default function Boards({
   };
 
   const emptyListText =
-    value === ''
+    searchValue === ''
       ? '게시글이 존재하지 않습니다.'
-      : `${value}와(과) 일치하는 검색 결과가 없습니다.`;
+      : `${searchValue}와(과) 일치하는 검색 결과가 없습니다.`;
 
   const pxTablet = 'ta:px-[60px]';
 

pages/updateboard/[articleId].tsx

@@ -75,8 +75,7 @@ export default function UpdateBoard() {
   // 작성 폼 서브밋 함수
   const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
     e.preventDefault();
-    // 썸네일 이미지 주소
-    let imageUrl = '';
+    let imageUrl = getImage;
 
     if (imageFile) {
       formData.append('image', imageFile);
@@ -102,11 +101,20 @@ export default function UpdateBoard() {
     }
 
     try {
-      await patchBoard(articleId as number | string, {
+      const updateData: {
+        title: string;
+        content: string;
+        image?: string | null;
+      } = {
         title,
         content,
-        image: imageUrl,
-      });
+      };
+
+      if (imageFile) {
+        updateData.image = imageUrl;
+      }
+
+      await patchBoard(articleId as number | string, updateData);
       if (typeof articleId === 'string') {
         setSnackStyled('success');
         setSnackBarMessage(

types/board.ts

@@ -20,7 +20,7 @@ export interface BoardBase extends BaseEntity {
 export interface BoardCreateData {
   title: string;
   content: string;
-  image: string;
+  image?: string | null;
 }
 
 export interface Board extends BoardBase {

utils/dateConversion.ts

@@ -8,8 +8,14 @@ export default function dateConversion(isoString: string): string {
   const createdDate = new Date(isoString); // 생성일
   const currentDate = new Date(); // 현재 날짜
   const timeDifference = currentDate.getTime() - createdDate.getTime(); // 오차 계산
-  const hoursDifference = Math.floor(timeDifference / (1000 * 60 * 60)); // 시간 환산
-  const minutesDifference = Math.floor(timeDifference / (1000 * 60)); // 분 환산
+  const hoursDifference = Math.max(
+    Math.floor(timeDifference / (1000 * 60 * 60)),
+    0
+  );
+  const minutesDifference = Math.max(
+    Math.floor(timeDifference / (1000 * 60)),
+    0
+  );
 
   if (hoursDifference < 1) {
     return `${minutesDifference}분 전`; // 생성한지 1시간이 안되었을 때