Feat/write#19 (#127)

* [feat] 글쓰기 기능

* [feat] 포스트 작성 기능

* Feat/communityscroll#23 (#114)

* [feat] 스크롤링구현

* [feat] 주소, api설정

* [feat] 커뮤니티 탭, 필터 패치로직

* [feat] lastLikeCount, lastCommentCount, 추가

* [fix] 코멘트 삭제수정 마이페이지에선 뗄수있게 myPage props 추가

* 옵셔널로 수정

* 오류 수정

* [feat] 글쓰기 기능

* 카테고리필수

* [feat] 포스트 무한스크롤 + 글쓰기기능 이미지추가

* [feat] 이미지 스와이퍼

* [feat] 프로필 쑤리 이미지

* [feat] 댓글 누르면 댓글 섹션으로 가기

* [feat] 좋아요기능(아직 좋아요받아오는건 못함 api필요)

* [feat] 게시물 수정

* [feat] 글 수정

* [refactor] 코드 조금정리

* [feat] 작성자본인만 글수정삭제

* [feat]글 삭제기능

* [feat] 칵테일태그

* [fix]칵테일, 쉐어 기능

* 수 라우터, 비로그인처리

* 타입 수정

* 타입 수정

* 타입수정

* 타입수정

* 타입수정

* 오류수정

* 오류수정

* 오류수정

* 오류수정

* 오류수정

* 충돌해결

* 오류 수정

* 오류 수정

* 오류 수정

* [fix] 이미지 카운트, 10개 제한

* [fix] 글쓰기 placeholder

* [fix] 공유 url 수정

* [fix] 프로필배경 지우기

* [fix] 플로팅탭 미디어쿼리 수정

* [fix] 수정 모달

* 댓글실시간반영 시도

* 수정

* [fix] 수정모달 로직 수정

* 수정로직 수정

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/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}