[chore]폴더구조 변경 comment 공유 컴포넌트화

Author: EunbinJung

src/app/community/[id]/page.tsx

@@ -1,10 +1,10 @@
-import CommentList from '@/domains/community/detail/comment/CommentList';
-import DetailComment from '@/domains/community/detail/comment/DetailComment';
+import CommentList from '@/domains/shared/comment/CommentList';
 import DetailContent from '@/domains/community/detail/DetailContent';
 import DetailHeader from '@/domains/community/detail/DetailHeader';
 import DetailTitle from '@/domains/community/detail/DetailTitle';
 import DetailTabDesktop from '@/domains/community/detail/tab/DetailTabDesktop';
 import StarBg from '@/domains/shared/starBg/StarBg';
+import CommentHeader from '@/domains/shared/comment/CommentHeader';
 
 function Page() {
   return (
@@ -14,8 +14,8 @@ function Page() {
         <DetailHeader />
         <DetailTitle />
         <DetailContent />
-        <section className="mb-10">
-          <DetailComment />
+        <section className="mb-10 border-t-1 border-gray ">
+          <CommentHeader />
           <CommentList />
         </section>
       </article>

src/app/community/write/page.tsx

@@ -1,3 +1,4 @@
+import Category from '@/domains/community/write/Category';
 import CompleteBtn from '@/domains/community/write/CompleteBtn';
 import FormTitle from '@/domains/community/write/FormTitle';
 import WriteForm from '@/domains/community/write/WriteForm';
@@ -11,6 +12,7 @@ function Page() {
         <CompleteBtn />
         <section>
           <FormTitle />
+          <Category />
           <WriteForm />
         </section>
       </div>

src/domains/community/detail/DetailContent.tsx

@@ -8,7 +8,7 @@ import DetailTabMobile from './tab/DetailTabMobile';
 
 function DetailContent() {
   return (
-    <section className="mt-5 flex flex-col items-start w-full gap-3 border-b-1 border-gray pb-10 relative">
+    <section className="mt-5 flex flex-col items-start w-full gap-3 pb-10 relative">
       <figure className="flex items-center justify-center sm:justify-start mb-5 max-h-120">
         <Image src={prePost} alt="더미 이미지" height={600} className="sm:w-auto w-full" />
       </figure>

src/domains/community/write/Category.tsx

@@ -1,7 +1,11 @@
 import SelectBox from '@/domains/shared/select-box/SelectBox';
 
 function Category() {
-  return <div></div>;
+  return (
+    <div>
+      <SelectBox option={['레시피', '팁', '질문', '자유']} title="카테고리" />
+    </div>
+  );
 }
 
 export default Category;

src/domains/community/detail/comment/DetailComment.tsx renamed to src/domains/shared/comment/CommentHeader.tsx

@@ -1,9 +1,10 @@
 import Button from '@/shared/components/button/Button';
 import Input from '@/shared/components/InputBox/Input';
 
-function DetailComment() {
+function CommentHeader({ totalComment = false }: { totalComment?: boolean }) {
   return (
     <section aria-label="댓글" className="mt-6 w-full">
+      {totalComment && <span>댓글 2</span>}
       <div className="w-full relative mt-5">
         <Input placeholder="댓글로 의견을 남겨주세요" id="community-comment" className="w-full" />
         <Button
@@ -18,4 +19,4 @@ function DetailComment() {
   );
 }
 
-export default DetailComment;
+export default CommentHeader;

src/domains/community/detail/comment/CommentList.tsx renamed to src/domains/shared/comment/CommentList.tsx

@@ -1,19 +1,19 @@
-import CommentHeader from './CommentHeader';
+import CommentTitle from './CommentTitle';
 
 function CommentList() {
   return (
     <ul aria-label="댓글 목록" className="flex flex-col mt-6">
       <li className="border-b-1 border-gray py-3">
         <article>
-          <CommentHeader />
+          <CommentTitle />
           <div className="mt-4">
             <p>정말 대단하시네요</p>
           </div>
         </article>
       </li>
       <li className="border-b-1 border-gray py-3">
         <article>
-          <CommentHeader />
+          <CommentTitle />
           <div className="mt-4">
             <p>정말 대단하시네요</p>
           </div>

src/domains/community/detail/comment/CommentHeader.tsx renamed to src/domains/shared/comment/CommentTitle.tsx

@@ -1,7 +1,7 @@
-import EditDelete from '../EditDelete';
-import Profile from '../Profile';
+import EditDelete from '../../community/detail/EditDelete';
+import Profile from '../../community/detail/Profile';
 
-function CommentHeader() {
+function CommentTitle() {
   return (
     <div className="flex items-center justify-between">
       <div className="flex items-center gap-3">
@@ -14,4 +14,4 @@ function CommentHeader() {
   );
 }
 
-export default CommentHeader;
+export default CommentTitle;