Redesign blog as desktop OS

src/components/comment/CommentList.tsx

@@ -1,24 +1,22 @@
 'use client';
 
 import { useQuery } from '@tanstack/react-query';
+import { Loader2, MessageCircle } from 'lucide-react';
 import { getComments } from '@/api/comments';
+import { Comment } from '@/types';
 import CommentForm from './CommentForm';
 import CommentItem from './CommentItem';
-import { Loader2, MessageCircle } from 'lucide-react';
-import { Comment } from '@/types';
 
 interface CommentListProps {
   postSlug: string;
 }
 
 export default function CommentList({ postSlug }: CommentListProps) {
-  // 댓글 목록 조회
   const { data: comments, isLoading, error } = useQuery({
     queryKey: ['comments', postSlug],
     queryFn: () => getComments(postSlug),
   });
 
-  // 총 댓글 수 계산 (재귀)
   const countComments = (list: Comment[]): number => {
     if (!list) return 0;
     return list.reduce((acc, curr) => acc + 1 + countComments(curr.children), 0);
@@ -27,28 +25,30 @@ export default function CommentList({ postSlug }: CommentListProps) {
   const totalCount = comments ? countComments(comments) : 0;
 
   if (isLoading) {
-    return <div className="flex justify-center py-10"><Loader2 className="animate-spin text-[var(--color-accent)]" /></div>;
+    return (
+      <div className="flex justify-center py-10">
+        <Loader2 className="animate-spin text-[var(--color-accent)]" />
+      </div>
+    );
   }
 
   if (error) {
-    return <div className="py-10 text-center text-red-500">댓글을 불러오는데 실패했습니다.</div>;
+    return <div className="py-10 text-center text-red-500">댓글을 불러오는 데 실패했습니다.</div>;
   }
 
   return (
-    <div className="mt-16 border-t border-[var(--color-line)] pt-10">
-      <div className="flex items-center gap-2 mb-6">
+    <div>
+      <div className="mb-6 flex items-center gap-2">
         <MessageCircle className="text-[var(--color-accent)]" size={24} />
         <h3 className="text-xl font-bold text-[var(--color-text)]">
           댓글 <span className="text-[var(--color-accent)]">{totalCount}</span>
         </h3>
       </div>
 
-      {/* 최상위 댓글 작성 폼 */}
       <div className="mb-10">
         <CommentForm postSlug={postSlug} />
       </div>
 
-      {/* 댓글 목록 */}
       <div className="space-y-6">
         {comments && comments.length > 0 ? (
           comments.map((comment) => (
@@ -56,7 +56,7 @@ export default function CommentList({ postSlug }: CommentListProps) {
           ))
         ) : (
           <div className="rounded-lg border border-dashed border-[var(--color-line)] bg-[var(--color-surface)] py-10 text-center text-sm text-[var(--color-text-muted)]">
-            아직 댓글이 없습니다. 첫 번째 댓글을 남겨보세요!
+            아직 댓글이 없습니다. 첫 번째 댓글을 남겨보세요.
           </div>
         )}
       </div>