Feat/write#19

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/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, accessToken?: string | null) {
   const [comments, setComments] = useState<CommentType[] | null>(null);
   const [isEnd, setIsEnd] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
@@ -23,7 +23,7 @@ export function useComments(postId: ParamValue, user: User | null, accessToken:
 
   useEffect(() => {
     fetchData();
-  }, [fetchData]);
+  }, [postId]);
 
   const handleUpdateComment = async (commentId: number, content: string) => {
     if (!user) {
@@ -39,6 +39,8 @@ export function useComments(postId: ParamValue, user: User | null, accessToken:
             )
           : prev
       );
+      const updatedComments = await fetchComment(postId);
+      setComments(updatedComments);
     } catch (err) {
       console.error(err);
       alert('댓글 수정 중 오류가 발생했습니다.');
@@ -61,6 +63,8 @@ export function useComments(postId: ParamValue, user: User | null, accessToken:
       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) {

src/domains/community/write/CompleteBtn.tsx

@@ -1,9 +1,22 @@
 import Button from '@/shared/components/button/Button';
 
-function CompleteBtn({ mode }: { mode: 'edit' | 'create' }) {
+type Props = {
+  mode: 'edit' | 'create';
+  setEditDone: (value: boolean) => void;
+  handleEditLogic: () => Promise<boolean>;
+};
+
+function CompleteBtn({ mode, setEditDone, handleEditLogic }: Props) {
   return (
     <div className="w-full flex items-center justify-end mt-10">
-      <Button type="submit" size="default" color="default">
+      <Button
+        type={mode === 'create' ? 'submit' : 'button'}
+        size="default"
+        color="default"
+        onClick={async () => {
+          setEditDone(true);
+        }}
+      >
         {mode === 'create' ? '올리기' : '수정하기'}
       </Button>
     </div>

src/domains/community/write/WriteForm.tsx

@@ -16,6 +16,7 @@ function WriteForm({ formData, setFormData }: Props) {
       </label>
       <textarea
         id="content"
+        placeholder="내용을 입력해주세요."
         role="textbox"
         aria-multiline="true"
         tabIndex={0}

src/domains/community/write/WriteSection.tsx

@@ -14,6 +14,8 @@ import TagModal from './cocktail-tag/TagModal';
 import { FormType, TagType, UploadedItem } from '@/domains/recipe/types/types';
 import { fetchPostById } from '../api/fetchPost';
 import { debounce } from '@/shared/utills/debounce';
+import ConfirmModal from '@/shared/components/modal-pop/ConfirmModal';
+import DetailSkeleton from '../detail/DetailSkeleton';
 
 type Props = {
   mode: 'create' | 'edit';
@@ -31,6 +33,8 @@ function WriteSection({ mode, postId }: Props) {
 
   const [uploadedFile, setUploadedFile] = useState<UploadedItem[]>([]);
   const [isOpen, setIsOpen] = useState(false);
+  const [editDone, setEditDone] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
 
   const [tags, setTags] = useState<TagType[] | null>(null);
   const [selectedTags, setSelectedTags] = useState<string[]>([]);
@@ -169,27 +173,27 @@ function WriteSection({ mode, postId }: Props) {
 
   const debouncedFetch = useMemo(() => debounce(fetchTags, 300), [fetchTags]);
 
-  const handleEdit = async (e: React.FormEvent) => {
-    e.preventDefault();
-
+  // 실제 수정 처리만 담당 (이벤트 비의존)
+  const handleEditLogic = async (): Promise<boolean> => {
     if (!postId) {
       toastError('게시글 ID가 없습니다.');
-      return;
+      return false; // 실패 시 false 반환
     }
 
     if (!formData.title.trim()) {
       toastError('제목을 작성해주세요.');
-      return;
+      return false;
     }
+
     if (!formData.content.trim()) {
       toastError('내용을 작성해주세요.');
-      return;
+      return false;
     }
 
     const categoryId = tabItem.findIndex((tab) => tab.label === formData.categoryName);
     if (categoryId === -1) {
       toastError('카테고리를 선택해주세요.');
-      return;
+      return false;
     }
 
     const postJson = {
@@ -205,6 +209,7 @@ function WriteSection({ mode, postId }: Props) {
     payload.append('post', postBlob);
 
     try {
+      setIsLoading(true);
       const res = await fetch(`${getApi}/posts/${postId}`, {
         method: 'PATCH',
         credentials: 'include',
@@ -213,20 +218,30 @@ function WriteSection({ mode, postId }: Props) {
 
       if (!res.ok) {
         toastError('글 수정에 실패했습니다.');
-        return;
+        return false;
       }
 
-      router.push(`/community/${postId}`);
+      setIsLoading(false);
+
+      return true;
     } catch (err) {
       console.error('글수정 폼 작성 에러', err);
       toastError('서버 요청 중 오류가 발생했습니다.');
+      return false;
     }
   };
 
+  // 폼 제출용 핸들러 (이벤트 객체 받아서 preventDefault 처리)
+  const handleEditSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+  };
+
+  if (isLoading) <DetailSkeleton />;
+
   return (
     <>
-      <form onSubmit={mode === 'create' ? handleSubmit : handleEdit}>
-        <CompleteBtn mode={mode} />
+      <form onSubmit={mode === 'create' ? handleSubmit : handleEditSubmit}>
+        <CompleteBtn mode={mode} setEditDone={setEditDone} handleEditLogic={handleEditLogic} />
         <section>
           <FormTitle formData={formData} setFormData={setFormData} />
           <Category formData={formData} setFormData={setFormData} />
@@ -258,6 +273,19 @@ function WriteSection({ mode, postId }: Props) {
           debouncedFetch={debouncedFetch}
         />
       )}
+      {mode === 'edit' && editDone && (
+        <ConfirmModal
+          open={editDone}
+          onClose={() => setEditDone(false)}
+          onCancel={() => setEditDone(false)}
+          onConfirm={async () => {
+            setEditDone(false);
+            await handleEditLogic();
+            router.push(`/community/${postId}`);
+          }}
+          title="수정 완료"
+        />
+      )}
     </>
   );
 }