Style/community#18 (#71)

EunbinJung · mtm-git1018 · ahk0413 · web-flow · commit 4c7c32e70869 · 2025-09-26T15:10:01.000+09:00
* [chore] 메타데이터 추가 * [fix] 수정 * [fix] 스크롤 수정 * [fix] 레이아웃 수정 * [style] 커뮤니티 상세 ui * [style]레시피페이지 * [style]recipe페이지 * [style]칵테일페이지 * [style]페이지 수정사항 수정 * [style]레시피페이지 * [style]recipe페이지 * [feat]selectBox컴포넌트 다양화 * [style] select박스 정렬 * [style] 수정사항 반영 * [style] 수정 * [style]recipe페이지 * [feat]selectBox컴포넌트 다양화 * [feat] StarBg컴포넌트 * [feat] 라벨 컴포넌트 분리 * [feat]selectBox컴포넌트 다양화 * [design] 채팅 폼 ui * [feat] 레이아웃 footer 로직 추가 * [style] 취향 추천페이지 작업 * [style] layout 양옆 padding 값 수정 * [style] 라디오, input, 쑤리 챗, 나의 챗 컴포넌트 작업 * [feat] keep 버튼 이벤트 전파 막기 추가 * [feat] scrollTopbtn 취향추천 페이지에서 none 처리 * [style] 카드 컴포넌트 구현 완료 * [feat] 스크롤 탑 버튼 throttle 추가 * [design] 헤더 아이콘 hover / 페이지 이동시 추가 * [fix] 헤더아이콘 경고 이슈 해결 * [design] toast 줄바꿈 예시 추가 * [feat] auth 관련 store 생성 * [feat] 로그인 상태에 따라 로직 추가 * [feat] 로그인 시 전페이지로 이동하도록 로직 추가 / 모달 store 추가 * [feat] 소셜로그인 로직 수정 (api 대기중) * [text] 로그인 기능구현중 테스트 * [style] 불필요한 코드 제거 * [style] 커뮤니티 상세페이지 UI * [fix] 수정 * [fix] 수정 * [style] 별배경 추가 * [refactor] 닫힐때 애니메이션 나오게 수정 * [refactor] createPortal 추가 * [feat] 로그인 기능 구현 (#63) - 로그아웃 이슈는 추후 논의 필요 * [refactor] modal store 삭제 * [feat] 쿠키 저장 구현중... * [feat] 로그인 쿠키저장하여 이전페이지 이동 완료 * [docs] 의미없는 폴더 삭제 * [chore] next.config.ts파일 * [fix] 클라이언트 페이지 선언 * [fix] 빌드에러 * [fix] z-index 주기 * Squashed commit of the following: commit 643a5f2 Author: mtm-git1018 <mtm1018@naver.com> Date: Fri Sep 26 09:41:04 2025 +0900 Feat/칵테일 상세페이지#17 (#59) * [style]레시피 상세페이지 * [style]레시피 상세페이지 헤더 * [style]추천리스트 * [style]레시피 상세페이지 * [style]칵테일 상세페이지 * [style] 상세페이지 컴포넌트 정리 * [fix] 경로수정 * [refactor] PageHeader 수정 commit 38cde08 Author: ahk0413 <117137719+ahk0413@users.noreply.github.com> Date: Fri Sep 26 00:04:49 2025 +0900 [feat] 로그인 기능 구현 (#63) - 로그아웃 이슈는 추후 논의 필요 * [refactor] modal store 삭제 * [feat] 쿠키 저장 구현중... * [feat] 로그인 쿠키저장하여 이전페이지 이동 완료 * [docs] 의미없는 폴더 삭제 * 수정 * 수정 * 오류 해결 * [style] 간단 css 수정 * [docs] 폴더정리 * [fix] 경로수정 * [fix]경로수정 * [fix]경로수정 * [fix]경로수정 * [chore] format * [fix] 경로 수정 * [chore] 폴더구조 변경 * [refactor] react-use 사용으로 스크롤 이벤트 최적화 * [fix] 의존성 추가 * Style/community#18 (#62) * [chore] 메타데이터 추가 * [fix] 수정 * [fix] 스크롤 수정 * [fix] 레이아웃 수정 * [style] 커뮤니티 상세 ui * [style]레시피페이지 * [style]recipe페이지 * [style]칵테일페이지 * [style]페이지 수정사항 수정 * [style]레시피페이지 * [style]recipe페이지 * [feat]selectBox컴포넌트 다양화 * [style] select박스 정렬 * [style] 수정사항 반영 * [style] 수정 * [style]recipe페이지 * [feat]selectBox컴포넌트 다양화 * [feat] StarBg컴포넌트 * [feat] 라벨 컴포넌트 분리 * [feat]selectBox컴포넌트 다양화 * [design] 채팅 폼 ui * [feat] 레이아웃 footer 로직 추가 * [style] 취향 추천페이지 작업 * [style] layout 양옆 padding 값 수정 * [style] 라디오, input, 쑤리 챗, 나의 챗 컴포넌트 작업 * [feat] keep 버튼 이벤트 전파 막기 추가 * [feat] scrollTopbtn 취향추천 페이지에서 none 처리 * [style] 카드 컴포넌트 구현 완료 * [feat] 스크롤 탑 버튼 throttle 추가 * [design] 헤더 아이콘 hover / 페이지 이동시 추가 * [fix] 헤더아이콘 경고 이슈 해결 * [design] toast 줄바꿈 예시 추가 * [feat] auth 관련 store 생성 * [feat] 로그인 상태에 따라 로직 추가 * [feat] 로그인 시 전페이지로 이동하도록 로직 추가 / 모달 store 추가 * [feat] 소셜로그인 로직 수정 (api 대기중) * [text] 로그인 기능구현중 테스트 * [style] 불필요한 코드 제거 * [style] 커뮤니티 상세페이지 UI * [fix] 수정 * [fix] 수정 * [style] 별배경 추가 * [refactor] 닫힐때 애니메이션 나오게 수정 * [refactor] createPortal 추가 * [feat] 로그인 기능 구현 (#63) - 로그아웃 이슈는 추후 논의 필요 * [refactor] modal store 삭제 * [feat] 쿠키 저장 구현중... * [feat] 로그인 쿠키저장하여 이전페이지 이동 완료 * [docs] 의미없는 폴더 삭제 * [chore] next.config.ts파일 * [fix] 클라이언트 페이지 선언 * [fix] 빌드에러 * [fix] z-index 주기 * Squashed commit of the following: commit 643a5f2 Author: mtm-git1018 <mtm1018@naver.com> Date: Fri Sep 26 09:41:04 2025 +0900 Feat/칵테일 상세페이지#17 (#59) * [style]레시피 상세페이지 * [style]레시피 상세페이지 헤더 * [style]추천리스트 * [style]레시피 상세페이지 * [style]칵테일 상세페이지 * [style] 상세페이지 컴포넌트 정리 * [fix] 경로수정 * [refactor] PageHeader 수정 commit 38cde08 Author: ahk0413 <117137719+ahk0413@users.noreply.github.com> Date: Fri Sep 26 00:04:49 2025 +0900 [feat] 로그인 기능 구현 (#63) - 로그아웃 이슈는 추후 논의 필요 * [refactor] modal store 삭제 * [feat] 쿠키 저장 구현중... * [feat] 로그인 쿠키저장하여 이전페이지 이동 완료 * [docs] 의미없는 폴더 삭제 * 수정 * 수정 * 오류 해결 --------- Co-authored-by: mtm1018 <mtm1018@naver.com> Co-authored-by: ahk0413 <rladkgusgd@gmail.com> Co-authored-by: ahk0413 <117137719+ahk0413@users.noreply.github.com> * [docs] 폴더정리 * [fix]경로수정 * [fix]경로수정 * 경로수정 * 폴더오류 * 오류수정 * [fix] 메타태그 * [style] 커뮤니티 탭 최소사이즈 지정 * 포맷 수정 * [chore] 파일 합칠 때 잘못 저장된 파일 삭제 * [style] 글쓰기 * [chore]폴더구조 변경 comment 공유 컴포넌트화 * Squashed commit of the following: commit f98f5c4 Author: ahk0413 <117137719+ahk0413@users.noreply.github.com> Date: Fri Sep 26 14:42:22 2025 +0900 [docs] 폴더명 카멜케이스 -> 케밥케이스로 변경 (#69) * [docs] 폴더 카멜케이스 -> 케밥케이스 * [fix] 경로 오류 commit b2fea1f Author: ahk0413 <117137719+ahk0413@users.noreply.github.com> Date: Fri Sep 26 14:01:45 2025 +0900 [fix] 로그인 관련 수정 (#67) * [fix, docs] 로그인 리다이렉트 경로 페이지 수정 및 로그인 관련 폴더 구조 수정 * [feat] 로그아웃 팝업 추가 * [fix] confirm 창 버튼 props 받을 수 있게 수정 * [fix] loginRedirect 경로 수정 * [feat] 로그아웃 confirm 창 연동 , 새로고침시에도 로그인 유지, 로그인, 비로그인 시 메뉴 show/hide 처리 * [fix] 에러 해결 * [fix] husky 오류 해결 commit 9b2f69d Author: EunbinJ <ainatube39@gmail.com> Date: Fri Sep 26 12:43:42 2025 +0900 Style/community#18 (#66) * [chore] 메타데이터 추가 * [fix] 수정 * [fix] 스크롤 수정 * [fix] 레이아웃 수정 * [style] 커뮤니티 상세 ui * [style]레시피페이지 * [style]recipe페이지 * [style]칵테일페이지 * [style]페이지 수정사항 수정 * [style]레시피페이지 * [style]recipe페이지 * [feat]selectBox컴포넌트 다양화 * [style] select박스 정렬 * [style] 수정사항 반영 * [style] 수정 * [style]recipe페이지 * [feat]selectBox컴포넌트 다양화 * [feat] StarBg컴포넌트 * [feat] 라벨 컴포넌트 분리 * [feat]selectBox컴포넌트 다양화 * [design] 채팅 폼 ui * [feat] 레이아웃 footer 로직 추가 * [style] 취향 추천페이지 작업 * [style] layout 양옆 padding 값 수정 * [style] 라디오, input, 쑤리 챗, 나의 챗 컴포넌트 작업 * [feat] keep 버튼 이벤트 전파 막기 추가 * [feat] scrollTopbtn 취향추천 페이지에서 none 처리 * [style] 카드 컴포넌트 구현 완료 * [feat] 스크롤 탑 버튼 throttle 추가 * [design] 헤더 아이콘 hover / 페이지 이동시 추가 * [fix] 헤더아이콘 경고 이슈 해결 * [design] toast 줄바꿈 예시 추가 * [feat] auth 관련 store 생성 * [feat] 로그인 상태에 따라 로직 추가 * [feat] 로그인 시 전페이지로 이동하도록 로직 추가 / 모달 store 추가 * [feat] 소셜로그인 로직 수정 (api 대기중) * [text] 로그인 기능구현중 테스트 * [style] 불필요한 코드 제거 * [style] 커뮤니티 상세페이지 UI * [fix] 수정 * [fix] 수정 * [style] 별배경 추가 * [refactor] 닫힐때 애니메이션 나오게 수정 * [refactor] createPortal 추가 * [feat] 로그인 기능 구현 (#63) - 로그아웃 이슈는 추후 논의 필요 * [refactor] modal store 삭제 * [feat] 쿠키 저장 구현중... * [feat] 로그인 쿠키저장하여 이전페이지 이동 완료 * [docs] 의미없는 폴더 삭제 * [chore] next.config.ts파일 * [fix] 클라이언트 페이지 선언 * [fix] 빌드에러 * [fix] z-index 주기 * Squashed commit of the following: commit 643a5f2 Author: mtm-git1018 <mtm1018@naver.com> Date: Fri Sep 26 09:41:04 2025 +0900 Feat/칵테일 상세페이지#17 (#59) * [style]레시피 상세페이지 * [style]레시피 상세페이지 헤더 * [style]추천리스트 * [style]레시피 상세페이지 * [style]칵테일 상세페이지 * [style] 상세페이지 컴포넌트 정리 * [fix] 경로수정 * [refactor] PageHeader 수정 commit 38cde08 Author: ahk0413 <117137719+ahk0413@users.noreply.github.com> Date: Fri Sep 26 00:04:49 2025 +0900 [feat] 로그인 기능 구현 (#63) - 로그아웃 이슈는 추후 논의 필요 * [refactor] modal store 삭제 * [feat] 쿠키 저장 구현중... * [feat] 로그인 쿠키저장하여 이전페이지 이동 완료 * [docs] 의미없는 폴더 삭제 * 수정 * 수정 * 오류 해결 * [style] 간단 css 수정 * [docs] 폴더정리 * [fix] 경로수정 * [fix]경로수정 * [fix]경로수정 * [fix]경로수정 * [chore] format * [fix] 경로 수정 * [chore] 폴더구조 변경 * [refactor] react-use 사용으로 스크롤 이벤트 최적화 * [fix] 의존성 추가 * Style/community#18 (#62) * [chore] 메타데이터 추가 * [fix] 수정 * [fix] 스크롤 수정 * [fix] 레이아웃 수정 * [style] 커뮤니티 상세 ui * [style]레시피페이지 * [style]recipe페이지 * [style]칵테일페이지 * [style]페이지 수정사항 수정 * [style]레시피페이지 * [style]recipe페이지 * [feat]selectBox컴포넌트 다양화 * [style] select박스 정렬 * [style] 수정사항 반영 * [style] 수정 * [style]recipe페이지 * [feat]selectBox컴포넌트 다양화 * [feat] StarBg컴포넌트 * [feat] 라벨 컴포넌트 분리 * [feat]selectBox컴포넌트 다양화 * [design] 채팅 폼 ui * [feat] 레이아웃 footer 로직 추가 * [style] 취향 추천페이지 작업 * [style] layout 양옆 padding 값 수정 * [style] 라디오, input, 쑤리 챗, 나의 챗 컴포넌트 작업 * [feat] keep 버튼 이벤트 전파 막기 추가 * [feat] scrollTopbtn 취향추천 페이지에서 none 처리 * [style] 카드 컴포넌트 구현 완료 * [feat] 스크롤 탑 버튼 throttle 추가 * [design] 헤더 아이콘 hover / 페이지 이동시 추가 * [fix] 헤더아이콘 경고 이슈 해결 * [design] toast 줄바꿈 예시 추가 * [feat] auth 관련 store 생성 * [feat] 로그인 상태에 따라 로직 추가 * [feat] 로그인 시 전페이지로 이동하도록 로직 추가 / 모달 store 추가 * [feat] 소셜로그인 로직 수정 (api 대기중) * [text] 로그인 기능구현중 테스트 * [style] 불필요한 코드 제거 * [style] 커뮤니티 상세페이지 UI * [fix] 수정 * [fix] 수정 * [style] 별배경 추가 * [refactor] 닫힐때 애니메이션 나오게 수정 * [refactor] createPortal 추가 * [feat] 로그인 기능 구현 (#63) - 로그아웃 이슈는 추후 논의 필요 * [refactor] modal store 삭제 * [feat] 쿠키 저장 구현중... * [feat] 로그인 쿠키저장하여 이전페이지 이동 완료 * [docs] 의미없는 폴더 삭제 * [chore] next.config.ts파일 * [fix] 클라이언트 페이지 선언 * [fix] 빌드에러 * [fix] z-index 주기 * Squashed commit of the following: commit 643a5f2 Author: mtm-git1018 <mtm1018@naver.com> Date: Fri Sep 26 09:41:04 2025 +0900 Feat/칵테일 상세페이지#17 (#59) * [style]레시피 상세페이지 * [style]레시피 상세페이지 헤더 * [style]추천리스트 * [style]레시피 상세페이지 * [style]칵테일 상세페이지 * [style] 상세페이지 컴포넌트 정리 * [fix] 경로수정 * [refactor] PageHeader 수정 commit 38cde08 Author: ahk0413 <117137719+ahk0413@users.noreply.github.com> Date: Fri Sep 26 00:04:49 2025 +0900 [feat] 로그인 기능 구현 (#63) - 로그아웃 이슈는 추후 논의 필요 * [refactor] modal store 삭제 * [feat] 쿠키 저장 구현중... * [feat] 로그인 쿠키저장하여 이전페이지 이동 완료 * [docs] 의미없는 폴더 삭제 * 수정 * 수정 * 오류 해결 --------- Co-authored-by: mtm1018 <mtm1018@naver.com> Co-authored-by: ahk0413 <rladkgusgd@gmail.com> Co-authored-by: ahk0413 <117137719+ahk0413@users.noreply.github.com> * [docs] 폴더정리 * [fix]경로수정 * [fix]경로수정 * 경로수정 * 폴더오류 * 오류수정 --------- Co-authored-by: mtm1018 <mtm1018@naver.com> Co-authored-by: ahk0413 <rladkgusgd@gmail.com> Co-authored-by: ahk0413 <117137719+ahk0413@users.noreply.github.com> * 수정 * comment 컴포넌트화 * 수정 * '경로 수정' --------- Co-authored-by: mtm1018 <mtm1018@naver.com> Co-authored-by: ahk0413 <rladkgusgd@gmail.com> Co-authored-by: ahk0413 <117137719+ahk0413@users.noreply.github.com>
diff --git a/src/app/community/[id]/page.tsx b/src/app/community/[id]/page.tsx
@@ -1,10 +1,9 @@
-import CommentList from '@/domains/community/detail/comment/CommentList';
-import DetailComment from '@/domains/community/detail/comment/DetailComment';
 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/components/star-bg/StarBg';
+import Comment from '@/domains/shared/components/comment/Comment';
 
 function Page() {
   return (
@@ -14,10 +13,7 @@ function Page() {
         <DetailHeader />
         <DetailTitle />
         <DetailContent />
-        <section className="mb-10">
-          <DetailComment />
-          <CommentList />
-        </section>
+        <Comment />
       </article>
       <div className="hidden md:block">
         <DetailTabDesktop />
diff --git a/src/app/community/page.tsx b/src/app/community/page.tsx
@@ -7,7 +7,7 @@ import PageHeader from '@/domains/shared/components/page-header/PageHeader';
 import { Metadata } from 'next';
 
 export const metadata: Metadata = {
-  title: '커뮤니티',
+  title: 'SSOUL | 커뮤니티',
   description: '칵테일에 관한 모든 이야기',
 };
 
diff --git a/src/app/community/write/page.tsx b/src/app/community/write/page.tsx
@@ -1,5 +1,23 @@
+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';
+import StarBg from '@/domains/shared/components/star-bg/StarBg';
+
 function Page() {
-  return <div className="page-layout max-w-824"></div>;
+  return (
+    <div className="w-full relative">
+      <StarBg className="w-full h-32 absolute"></StarBg>
+      <div className="page-layout max-w-824 z-5">
+        <CompleteBtn />
+        <section>
+          <FormTitle />
+          <Category />
+          <WriteForm />
+        </section>
+      </div>
+    </div>
+  );
 }
 
 export default Page;
diff --git a/src/domains/community/CommunityFilter.tsx b/src/domains/community/CommunityFilter.tsx
diff --git a/src/domains/community/CommunityHeader.tsx b/src/domains/community/CommunityHeader.tsx
diff --git a/src/domains/community/CommunityTab.tsx b/src/domains/community/CommunityTab.tsx
diff --git a/src/domains/community/PostCard.tsx b/src/domains/community/PostCard.tsx
diff --git a/src/domains/community/PostInfo.tsx b/src/domains/community/PostInfo.tsx
diff --git a/src/domains/community/WriteBtn.tsx b/src/domains/community/WriteBtn.tsx
diff --git a/src/domains/community/detail/DetailContent.tsx b/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>
diff --git a/src/domains/community/main/CommunityFilter.tsx b/src/domains/community/main/CommunityFilter.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import SelectBox from '../../shared/components/select-box/SelectBox';
+import SelectBox from '@/domains/shared/components/select-box/SelectBox';
 
 function CommunityFilter() {
   return (
diff --git a/src/domains/community/main/CommunityHeader.tsx b/src/domains/community/main/CommunityHeader.tsx
@@ -1,4 +1,4 @@
-import PageHeader from '../../shared/components/page-header/PageHeader';
+import PageHeader from '@/domains/shared/components/page-header/PageHeader';
 
 function CommunityHeader() {
   return (
diff --git a/src/domains/community/main/CommunityTab.tsx b/src/domains/community/main/CommunityTab.tsx
@@ -26,7 +26,7 @@ function CommunityTab() {
               tabIndex={selectedIdx === idx ? 0 : -1}
               onClick={() => setSelectedIdx(idx)}
               className={tw(
-                `border-1 py-1 px-3 rounded-2xl transition-colors ease-in`,
+                `border-1 py-1 px-3 rounded-2xl transition-colors ease-in min-w-18`,
                 selectedIdx === idx ? 'bg-secondary text-primary' : 'hover:bg-secondary/20'
               )}
             >
diff --git a/src/domains/community/main/PostCard.tsx b/src/domains/community/main/PostCard.tsx
@@ -2,7 +2,7 @@ import Image from 'next/image';
 import prePost from '@/shared/assets/images/prepost_img.webp';
 
 import PostInfo from './PostInfo';
-import Label from '../../shared/components/label/Label';
+import Label from '@/domains/shared/components/label/Label';
 
 function PostCard({ label }: { label: string }) {
   return (
diff --git a/src/domains/community/write/Category.tsx b/src/domains/community/write/Category.tsx
@@ -0,0 +1,11 @@
+import SelectBox from '@/domains/shared/components/select-box/SelectBox';
+
+function Category() {
+  return (
+    <div>
+      <SelectBox option={['레시피', '팁', '질문', '자유']} title="카테고리" />
+    </div>
+  );
+}
+
+export default Category;
diff --git a/src/domains/community/write/CompleteBtn.tsx b/src/domains/community/write/CompleteBtn.tsx
@@ -0,0 +1,13 @@
+import Button from '@/shared/components/button/Button';
+
+function CompleteBtn() {
+  return (
+    <div>
+      <Button type="submit" size="auto" className="">
+        올리기
+      </Button>
+    </div>
+  );
+}
+
+export default CompleteBtn;
diff --git a/src/domains/community/write/FormTitle.tsx b/src/domains/community/write/FormTitle.tsx
@@ -0,0 +1,11 @@
+function FormTitle() {
+  return (
+    <div>
+      <label htmlFor="writingTitle"></label>
+      <input placeholder="제목을 입력해주세요." name="글쓰기제목" id="writingTitle" />
+      <span>0/20</span>
+    </div>
+  );
+}
+
+export default FormTitle;
diff --git a/src/domains/community/write/WriteForm.tsx b/src/domains/community/write/WriteForm.tsx
@@ -0,0 +1,9 @@
+function WriteForm() {
+  return (
+    <form>
+      <div contentEditable className="w-full min-h-100 bg-white rounded-3xl"></div>
+    </form>
+  );
+}
+
+export default WriteForm;
diff --git a/src/domains/shared/components/comment/Comment.tsx b/src/domains/shared/components/comment/Comment.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import CommentHeader from './CommentHeader';
+import CommentList from './CommentList';
+
+function Comment() {
+  return (
+    <section className="mb-10 border-t-1 border-gray ">
+      <CommentHeader />
+      <CommentList />
+    </section>
+  );
+}
+
+export default Comment;
diff --git a/src/domains/shared/components/comment/CommentHeader.tsx b/src/domains/shared/components/comment/CommentHeader.tsx
@@ -1,9 +1,10 @@
 import Button from '@/shared/components/button/Button';
 import Input from '@/shared/components/Input-box/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;
diff --git a/src/domains/shared/components/comment/CommentList.tsx b/src/domains/shared/components/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>
diff --git a/src/domains/shared/components/comment/CommentTitle.tsx b/src/domains/shared/components/comment/CommentTitle.tsx
@@ -1,7 +1,7 @@
-import EditDelete from '../EditDelete';
-import Profile from '../Profile';
+import EditDelete from '@/domains/community/detail/EditDelete';
+import Profile from '@/domains/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;
