refactor: 웹 커뮤니티 하위 css tailwind로 전환 (#178)

* refactor: CommentWrite tailwind conversion

* refactor: Comments tailwind conversion

* remove: 미사용 코드 삭제

* feat: 댓글 작성 완료시 초기화

Author: wibaek

src/app/community/[boardCode]/[postId]/CommentWrite.tsx

@@ -1,12 +1,9 @@
 "use client";
 
-import { useRouter } from "next/navigation";
-import { useRef } from "react";
+import { useRef, useState } from "react";
 
 import { createCommentApi } from "@/services/community";
 
-import styles from "./comment-write.module.css";
-
 import { IconCloseFilled, IconFlight } from "@/public/svgs";
 
 type CommentWriteProps = {
@@ -17,17 +14,16 @@ type CommentWriteProps = {
 };
 
 const CommentWrite = ({ postId, curSelectedComment, setCurSelectedComment, onSuccess }: CommentWriteProps) => {
-  const router = useRouter();
-  const contentRef = useRef<HTMLInputElement>(null);
+  const [content, setContent] = useState<string>("");
 
   const submitComment = async () => {
     try {
       await createCommentApi({
         postId: postId,
-        content: contentRef.current?.value || "",
+        content: content,
         parentId: curSelectedComment,
       });
-      // router.refresh();
+      setContent("");
       onSuccess();
     } catch (err) {
       if (err.response) {
@@ -50,13 +46,13 @@ const CommentWrite = ({ postId, curSelectedComment, setCurSelectedComment, onSuc
   };
 
   return (
-    <div className={styles["comment-form"]}>
-      <div className={styles["comment-input"]}>
+    <div className="fixed bottom-14 flex w-full min-w-[360px] max-w-[600px] items-center gap-3 border-t border-[#ececec] bg-k-0 p-2">
+      <div className="w-full">
         {curSelectedComment && (
-          <div className={styles["comment-input-reply"]}>
-            <div>답글을 입력중입니다..</div>
+          <div className="flex h-10 w-full items-center justify-between rounded-t-lg bg-[#e2e2e2] px-2.5 pb-2.5 pt-3">
+            <span className="text-xs font-normal leading-normal text-[#808080]">답글을 입력중입니다..</span>
             <button
-              className={styles["comment-input-close"]}
+              className="cursor-pointer border-none bg-transparent"
               onClick={handleCloseComment}
               type="button"
               aria-label="답글 작성 취소"
@@ -65,9 +61,20 @@ const CommentWrite = ({ postId, curSelectedComment, setCurSelectedComment, onSuc
             </button>
           </div>
         )}
-        <input ref={contentRef} type="text" placeholder="댓글을 입력해 주세요" />
+        <input
+          className="h-10 w-full overflow-hidden text-ellipsis rounded-lg border-none bg-[#ececec] p-2.5 text-sm font-normal leading-normal outline-none placeholder:text-[#808080]"
+          value={content}
+          onChange={(e) => setContent(e.target.value)}
+          type="text"
+          placeholder="댓글을 입력해 주세요"
+        />
       </div>
-      <button className={styles["comment-submit"]} onClick={submitComment} type="button" aria-label="댓글 작성">
+      <button
+        className="mb-2 mr-1 mt-auto cursor-pointer border-none bg-transparent"
+        onClick={submitComment}
+        type="button"
+        aria-label="댓글 작성"
+      >
         <IconFlight />
       </button>
     </div>

src/app/community/[boardCode]/[postId]/Comments.tsx

@@ -1,12 +1,12 @@
 import Image from "next/image";
 import { useState } from "react";
 
+import clsx from "clsx";
+
 import { deleteCommentApi } from "@/services/community";
 import { convertISODateToDateTime } from "@/utils/datetimeUtils";
 
-import Dropdown from "@/components/ui/Dropdown";
-
-import styles from "./comments.module.css";
+import Dropdown from "@/components/ui/dropdown";
 
 import { Comment } from "@/types/community";
 
@@ -15,12 +15,11 @@ import { IconMoreVertFilled, IconSubComment } from "@/public/svgs";
 type CommentsProps = {
   comments: Comment[];
   postId: number;
-  refresh: () => void;
   setCurSelectedComment: React.Dispatch<React.SetStateAction<number | null>>;
   onSuccess: () => void;
 };
 
-const Comments = ({ comments, postId, refresh, setCurSelectedComment, onSuccess }: CommentsProps) => {
+const Comments = ({ comments, postId, setCurSelectedComment, onSuccess }: CommentsProps) => {
   const [activeDropdown, setActiveDropdown] = useState<number | null>(null);
 
   const toggleDeleteComment = (commentId: number) => {
@@ -50,12 +49,13 @@ const Comments = ({ comments, postId, refresh, setCurSelectedComment, onSuccess
   };
 
   return (
-    <div className={styles["comment-container"]}>
+    <div className="h-[50vh] pb-[49px]">
       {comments?.map((comment) => (
         <div
-          className={`${styles["comment-wrapper"]} ${
-            comment.parentId !== null && styles["comment-wrapper--sub-comment"]
-          }`}
+          className={clsx(
+            "flex border-b border-[#ececec] px-5 py-[18px]",
+            comment.parentId !== null ? "bg-[#f2f2f2]" : "bg-[#fafafa]",
+          )}
           key={comment.id}
           role="button"
           tabIndex={0}
@@ -76,15 +76,16 @@ const Comments = ({ comments, postId, refresh, setCurSelectedComment, onSuccess
           }}
         >
           {comment.parentId !== null && (
-            <div className={styles["comment__sub-comment-icon"]}>
+            <div className="mr-1.5">
               <IconSubComment />
             </div>
           )}
-          <div className={styles.comment}>
-            <div className={styles["comment__first-row"]}>
-              <div className={styles.comment__author}>
-                <div className={styles["comment__author-profile-image"]}>
+          <div className="flex w-full flex-col">
+            <div className="flex justify-between">
+              <div className="flex items-center gap-2">
+                <div className="h-[25px] w-[25px] rounded-full bg-[#d9d9d9]">
                   <Image
+                    className="h-full w-full rounded-full"
                     src={
                       comment.postFindSiteUserResponse.profileImageUrl
                         ? `${process.env.NEXT_PUBLIC_UPLOADED_IMAGE_URL}/${comment.postFindSiteUserResponse.profileImageUrl}`
@@ -95,12 +96,14 @@ const Comments = ({ comments, postId, refresh, setCurSelectedComment, onSuccess
                     alt="alt"
                   />
                 </div>
-                <div className={styles["comment__author-name"]}>{comment.postFindSiteUserResponse.nickname}</div>
+                <div className="overflow-hidden text-sm font-medium leading-normal text-black">
+                  {comment.postFindSiteUserResponse.nickname}
+                </div>
               </div>
               {comment.isOwner && (
-                <div className={styles["comment__kebab-menu-wrapper"]}>
+                <div className="relative">
                   <button
-                    className={styles["comment__kebab-menu"]}
+                    className="cursor-pointer"
                     onClick={() => toggleDropdown(comment.id)}
                     type="button"
                     aria-label="더보기"
@@ -122,9 +125,9 @@ const Comments = ({ comments, postId, refresh, setCurSelectedComment, onSuccess
                 </div>
               )}
             </div>
-            <div className={styles.comment__content}>{comment.content}</div>
-            <div className={styles["comment__created-at"]}>
-              {convertISODateToDateTime(comment.createdAt) || "1970. 1. 1. 00:00"}
+            <div className="mt-3 text-sm font-normal leading-normal text-black">{comment.content}</div>
+            <div className="mt-2 overflow-hidden text-xs font-normal leading-normal text-[#7c7c7c]">
+              {convertISODateToDateTime(comment.createdAt) || "1970. 01. 01. 00:00"}
             </div>
           </div>
         </div>

src/app/community/[boardCode]/[postId]/PostPageContent.tsx

@@ -69,9 +69,6 @@ const PostPageContent = ({ boardCode, postId }: PostPageContentProps) => {
       <Comments
         comments={post.postFindCommentResponses}
         postId={postId}
-        refresh={() => {
-          router.refresh();
-        }}
         setCurSelectedComment={setCurSelectedComment}
         onSuccess={fetchPosts}
       />