Merge branch 'dev' into design/main#11

Author: EunbinJung

src/app/community/edit/[postId]/page.tsx

@@ -6,6 +6,7 @@ import { useParams } from 'next/navigation';
 
 function Page() {
   const params = useParams();
+  console.log(params);
 
   return (
     <div className="w-full mb-20 flex relative">

src/domains/community/api/fetchComment.ts

@@ -48,7 +48,6 @@ export const postComments = async (postId: number | ParamValue, content: string)
 };
 
 export async function updateComment(
-  accessToken: string | null,
   postId: number | ParamValue,
   commentId: number,
   content: string
@@ -57,8 +56,8 @@ export async function updateComment(
     method: 'PATCH',
     headers: {
       'Content-Type': 'application/json',
-      Authorization: `Bearer ${accessToken}`,
     },
+    credentials: 'include',
     body: JSON.stringify({ content }),
   });
 
@@ -69,16 +68,10 @@ export async function updateComment(
   }
 }
 
-export async function deleteComment(
-  accessToken: string | null,
-  postId: number | ParamValue,
-  commentId: number
-): Promise<void> {
+export async function deleteComment(postId: number | ParamValue, commentId: number): Promise<void> {
   const response = await fetch(`${getApi}/posts/${postId}/comments/${commentId}`, {
     method: 'DELETE',
-    headers: {
-      Authorization: `Bearer ${accessToken}`,
-    },
+    credentials: 'include',
   });
 
   if (!response.ok) {

src/domains/community/detail/Comment.tsx

@@ -12,10 +12,9 @@ type Props = {
 };
 
 function Comment({ postId }: Props) {
-  const { user, accessToken } = useAuthStore(
+  const { user } = useAuthStore(
     useShallow((state) => ({
       user: state.user,
-      accessToken: state.accessToken,
     }))
   );
   const {
@@ -29,7 +28,7 @@ function Comment({ postId }: Props) {
     handleAskDeleteComment,
     handleConfirmDelete,
     loadMoreComments,
-  } = useComments(postId, user, accessToken);
+  } = useComments(postId, user);
 
   return (
     <>

src/domains/community/detail/DetailContent.tsx

@@ -39,7 +39,7 @@ function DetailContent({
       <CocktailTag use="detail" selectedTags={tags} />
       <PostInfo createdAt={createdAt} viewCount={viewCount} commentCount={commentCount} />
 
-      <div className="block md:hidden mt-2">
+      <div className="block lg:hidden mt-2">
         <DetailTabMobile
           likeCount={prevLikeCount ?? 0}
           like={like}

src/domains/community/detail/DetailPage.tsx

@@ -14,11 +14,14 @@ import { useParams } from 'next/navigation';
 import { useAuthStore } from '@/domains/shared/store/auth';
 import Button from '@/shared/components/button/Button';
 import { useRouter } from 'next/navigation';
+import { useComments } from '../hook/useComment';
 
 function DetailPage() {
   const params = useParams();
   const postId = params.id;
 
+  const user = useAuthStore((state) => state.user);
+
   const [postDetail, setPostDetail] = useState<Post | null>(null);
   const [isLoading, setIsLoading] = useState(false);
   const [like, setLike] = useState(false);
@@ -27,6 +30,8 @@ function DetailPage() {
   const isLoggedIn = useAuthStore((state) => state.isLoggedIn);
   const router = useRouter();
 
+  const { comments } = useComments(postId, user);
+
   const commentRef = useRef<HTMLElement | null>(null);
 
   useEffect(() => {
@@ -119,7 +124,7 @@ function DetailPage() {
           </section>
         </article>
         {isLoggedIn && (
-          <div className="hidden md:block">
+          <div className="hidden lg:block">
             <DetailTabDesktop
               likeCount={prevLikeCount ?? 0}
               commentCount={commentCount}
@@ -128,6 +133,7 @@ function DetailPage() {
               onLikeToggle={handleLike}
               title={title}
               imageUrls={imageUrls}
+              comments={comments}
             />
           </div>
         )}

src/domains/community/detail/tab/DetailTabDesktop.tsx

@@ -5,6 +5,8 @@ import CommentBtn from '../../components/comment/CommentBtn';
 import LikeBtn from '../../components/like/LikeBtn';
 import ShareModal from '@/domains/shared/components/share/ShareModal';
 import { RefObject, useState } from 'react';
+import { useParams } from 'next/navigation';
+import { CommentType } from '../../types/post';
 
 type Props = {
   likeCount: number;
@@ -14,6 +16,7 @@ type Props = {
   onLikeToggle: () => void;
   title: string;
   imageUrls: string[];
+  comments: CommentType[] | null;
 };
 
 interface Meta {
@@ -30,10 +33,14 @@ function DetailTabDesktop({
   onLikeToggle,
   title,
   imageUrls,
+  comments,
 }: Props) {
   const [isShare, setIsShare] = useState(false);
   const [meta, setMeta] = useState<Meta | null>(null);
 
+  const params = useParams();
+  const postId = params?.id;
+
   const handleClick = () => {
     if (commentRef.current) {
       const top = commentRef.current.getBoundingClientRect().top + window.scrollY - 100; // 100px 위로 offset
@@ -43,15 +50,13 @@ function DetailTabDesktop({
 
   // ✅ 공유 버튼 클릭 시 meta 생성
   const handleShareClick = () => {
-    if (typeof window !== 'undefined') {
-      const currentUrl = window.location.href;
-      setMeta({
-        title,
-        url: currentUrl,
-        imageUrl: imageUrls[0] || getOgImage(),
-      });
-      setIsShare(true);
-    }
+    const currentUrl = `http://www.ssoul.life/community/${postId}`;
+    setMeta({
+      title,
+      url: currentUrl,
+      imageUrl: imageUrls[0] || getOgImage(),
+    });
+    setIsShare(true);
   };
 
   // ✅ og:image 메타태그에서 이미지 가져오기 (fallback용)
@@ -64,7 +69,7 @@ function DetailTabDesktop({
     <>
       <section
         aria-label="게시글 인터랙션 버튼"
-        className="absolute top-[50px] 2xl:right-80 xl:right-50 lg:right-10 md:right-10 z-10 h-full transition-transform duration-300 ease-in-out"
+        className="absolute top-[50px] 2xl:right-60 xl:right-50 lg:right-10 md:right-10 z-10 h-full transition-transform duration-300 ease-in-out"
       >
         <div className="sticky top-[183px]">
           <div className="flex md:flex-col md:gap-10 w-full h-full">
@@ -74,7 +79,7 @@ function DetailTabDesktop({
             </div>
             <div className="flex md:flex-col justify-center items-center gap-2 text-sm text-gray">
               <CommentBtn size="md" onClick={handleClick} />
-              <span>{commentCount}</span>
+              <span>{comments?.length}</span>
             </div>
             <div>
               <Share variants="community" size="md" onClick={handleShareClick} />

src/domains/community/detail/tab/DetailTabMobile.tsx

@@ -4,6 +4,7 @@ import Share from '@/domains/shared/components/share/Share';
 import LikeBtn from '../../components/like/LikeBtn';
 import { useState } from 'react';
 import ShareModal from '@/domains/shared/components/share/ShareModal';
+import { useParams } from 'next/navigation';
 
 type Props = {
   likeCount: number;
@@ -23,16 +24,17 @@ function DetailTabMobile({ likeCount, onLikeToggle, like, title, imageUrls }: Pr
   const [isShare, setIsShare] = useState(false);
   const [meta, setMeta] = useState<Meta | null>(null);
 
+  const params = useParams();
+  const postId = params?.id;
+
   const handleShareClick = () => {
-    if (typeof window !== 'undefined') {
-      const currentUrl = window.location.href;
-      setMeta({
-        title,
-        url: currentUrl,
-        imageUrl: imageUrls[0] || getOgImage(),
-      });
-      setIsShare(true);
-    }
+    const currentUrl = `http://www.ssoul.life/community/${postId}`;
+    setMeta({
+      title,
+      url: currentUrl,
+      imageUrl: imageUrls[0] || getOgImage(),
+    });
+    setIsShare(true);
   };
 
   // ✅ og:image 메타태그에서 이미지 가져오기 (fallback용)

src/domains/community/hook/useComment.ts

@@ -5,7 +5,7 @@ import { CommentType } from '../types/post';
 import { User } from '@/domains/shared/store/auth';
 import { ParamValue } from 'next/dist/server/request/params';
 
-export function useComments(postId: ParamValue, user: User | null, accessToken: string | null) {
+export function useComments(postId: ParamValue, user: User | null) {
   const [comments, setComments] = useState<CommentType[] | null>(null);
   const [isEnd, setIsEnd] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
@@ -23,22 +23,24 @@ export function useComments(postId: ParamValue, user: User | null, accessToken:
 
   useEffect(() => {
     fetchData();
-  }, [fetchData]);
+  }, [postId]);
 
   const handleUpdateComment = async (commentId: number, content: string) => {
     if (!user) {
       alert('로그인이 필요합니다');
       return;
     }
     try {
-      await updateComment(accessToken!, postId, commentId, content);
+      await updateComment(postId, commentId, content);
       setComments((prev) =>
         prev
           ? prev.map((comment) =>
               comment.commentId === commentId ? { ...comment, content } : comment
             )
           : prev
       );
+      const updatedComments = await fetchComment(postId);
+      setComments(updatedComments);
     } catch (err) {
       console.error(err);
       alert('댓글 수정 중 오류가 발생했습니다.');
@@ -57,10 +59,12 @@ export function useComments(postId: ParamValue, user: User | null, accessToken:
     if (!deleteTarget) return;
 
     try {
-      await deleteComment(accessToken!, deleteTarget.postId, deleteTarget.commentId);
+      await deleteComment(deleteTarget.postId, deleteTarget.commentId);
       setComments((prev) =>
         prev ? prev.filter((c) => c.commentId !== deleteTarget.commentId) : prev
       );
+      const updatedComments = await fetchComment(postId);
+      setComments(updatedComments);
     } catch (err) {
       console.error(err);
       alert('댓글 삭제 중 오류가 발생했습니다.');

src/domains/community/main/CommunityFilter.tsx

@@ -22,10 +22,6 @@ function CommunityFilter({ posts, setPosts }: Props) {
   const query = searchParams.get('category');
   const router = useRouter();
 
-  useEffect(() => {
-    console.log(query);
-  }, [query]);
-
   const handleChange = async (selectTitle: string) => {
     if (!query) return;
 

src/domains/community/main/PostCard.tsx

@@ -61,7 +61,7 @@ function PostCard({ posts, isLoading, isEnd, onLoadMore }: Props) {
             return (
               <article
                 className="py-4 sm:py-5 border-b-1 border-gray-light"
-                key={postId}
+                key={postId + createdAt}
                 ref={(el) => {
                   if (index === 0) firstItemRef.current = el;
                   if (isLast) {