diff --git a/src/app/community/edit/[postId]/page.tsx b/src/app/community/edit/[postId]/page.tsx
index 81edd8f..e091ba3 100644
--- a/src/app/community/edit/[postId]/page.tsx
+++ b/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">
diff --git a/src/domains/community/detail/DetailContent.tsx b/src/domains/community/detail/DetailContent.tsx
index bfec34f..5a5af01 100644
--- a/src/domains/community/detail/DetailContent.tsx
+++ b/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}
diff --git a/src/domains/community/detail/DetailPage.tsx b/src/domains/community/detail/DetailPage.tsx
index 791c0f0..d950eea 100644
--- a/src/domains/community/detail/DetailPage.tsx
+++ b/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>
         )}
diff --git a/src/domains/community/detail/tab/DetailTabDesktop.tsx b/src/domains/community/detail/tab/DetailTabDesktop.tsx
index 8b2987b..2106232 100644
--- a/src/domains/community/detail/tab/DetailTabDesktop.tsx
+++ b/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} />
diff --git a/src/domains/community/detail/tab/DetailTabMobile.tsx b/src/domains/community/detail/tab/DetailTabMobile.tsx
index fffca53..1d6f85a 100644
--- a/src/domains/community/detail/tab/DetailTabMobile.tsx
+++ b/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용)
diff --git a/src/domains/community/hook/useComment.ts b/src/domains/community/hook/useComment.ts
index ad77a19..d94e0f9 100644
--- a/src/domains/community/hook/useComment.ts
+++ b/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('댓글 삭제 중 오류가 발생했습니다.');
diff --git a/src/domains/community/main/CommunityFilter.tsx b/src/domains/community/main/CommunityFilter.tsx
index 25dfd90..6887752 100644
--- a/src/domains/community/main/CommunityFilter.tsx
+++ b/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;
 
diff --git a/src/domains/community/main/PostCard.tsx b/src/domains/community/main/PostCard.tsx
index 755cf0d..eb79f10 100644
--- a/src/domains/community/main/PostCard.tsx
+++ b/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) {
diff --git a/src/domains/community/write/CompleteBtn.tsx b/src/domains/community/write/CompleteBtn.tsx
index da86926..a809735 100644
--- a/src/domains/community/write/CompleteBtn.tsx
+++ b/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>
diff --git a/src/domains/community/write/WriteForm.tsx b/src/domains/community/write/WriteForm.tsx
index 3d653e6..a61ff82 100644
--- a/src/domains/community/write/WriteForm.tsx
+++ b/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}
diff --git a/src/domains/community/write/WriteSection.tsx b/src/domains/community/write/WriteSection.tsx
index 7a291d6..6b085a1 100644
--- a/src/domains/community/write/WriteSection.tsx
+++ b/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="수정 완료"
+        />
+      )}
     </>
   );
 }
diff --git a/src/domains/community/write/image-upload/ImageInput.tsx b/src/domains/community/write/image-upload/ImageInput.tsx
index c4003cb..b67fe25 100644
--- a/src/domains/community/write/image-upload/ImageInput.tsx
+++ b/src/domains/community/write/image-upload/ImageInput.tsx
@@ -5,10 +5,12 @@ import { useToast } from '@/shared/hook/useToast';
 import { Dispatch, SetStateAction } from 'react';
 
 type Props = {
+  uploadedFile: UploadedItem[];
   setUploadedFile: Dispatch<SetStateAction<UploadedItem[]>>;
+  onAddImage: (newFiles: UploadedItem[]) => void;
 };
 
-function ImageInput({ setUploadedFile }: Props) {
+function ImageInput({ uploadedFile, setUploadedFile, onAddImage }: Props) {
   const { toastError } = useToast();
 
   const handleInputChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -16,36 +18,39 @@ function ImageInput({ setUploadedFile }: Props) {
     if (!newFileList) return;
 
     const newFiles = Array.from(newFileList);
-    console.log(newFiles);
 
     try {
-      // 서버 업로드
       const urls: string[] = await uploadFiles(newFiles);
-      console.log(urls);
-
-      setUploadedFile((prev) => {
-        const existingUrls = new Set(prev.map((item) => item.url)); // ✅ 중복 검사 기준
-        const newItems = urls.map((url: string, i: number) => ({
-          file: newFiles[i],
-          url,
-        }));
-        const filteredItems = newItems.filter((item) => !existingUrls.has(item.url)); // ✅ 필터링
-
-        if (prev.length + urls.length > 10) {
-          toastError('최대 10개 파일까지 업로드할 수 있어요.');
-          return prev;
-        }
-
-        return [...prev, ...filteredItems];
-      });
+
+      const newItems: UploadedItem[] = urls.map((url, i) => ({
+        file: newFiles[i],
+        url,
+      }));
+
+      const totalLength = uploadedFile.length + newItems.length;
+
+      if (totalLength > 10) {
+        toastError('최대 10개 파일까지 업로드할 수 있어요.');
+        return;
+      }
+
+      // 중복 제거
+      const existingUrls = new Set(uploadedFile.map((item) => item.url));
+      const filteredItems = newItems.filter((item) => !existingUrls.has(item.url));
+
+      if (filteredItems.length === 0) {
+        toastError('이미 업로드된 파일입니다.');
+        return;
+      }
+
+      onAddImage(filteredItems); // ✅ 상위에서 상태 업데이트
     } catch (error) {
       toastError('파일 업로드 실패');
     }
   };
 
   const uploadFiles = async (files: File[]): Promise<string[]> => {
-    console.log('들어온파일', files);
-    if (files.length === 0) return []; // 선택된 파일이 없으면 빈 배열 반환
+    if (files.length === 0) return [];
 
     const formData = new FormData();
     files.forEach((file) => formData.append('file', file));
@@ -57,17 +62,13 @@ function ImageInput({ setUploadedFile }: Props) {
 
     if (!res.ok) throw new Error('파일 업로드 실패');
 
-    const data = await res.json(); // ✅ JSON으로 받기
-    console.log('서버 응답:', data);
-
-    // URL 추출 정규식 (http/https로 시작해서 공백까지)
+    const data = await res.json();
     const urlRegex = /(https?:\/\/[^\s]+)/g;
     const matched = data.data.match(urlRegex);
-    console.log(matched);
 
     if (!matched) throw new Error('URL 파싱 실패');
 
-    return matched; // 배열로 반환
+    return matched;
   };
 
   return (
@@ -78,7 +79,7 @@ function ImageInput({ setUploadedFile }: Props) {
       >
         <ImageBox />
         <div className="flex items-center md:text-md text-sm">
-          <span>0</span>
+          <span>{uploadedFile.length}</span>
           <span>/</span>
           <span>10</span>
         </div>
@@ -87,7 +88,7 @@ function ImageInput({ setUploadedFile }: Props) {
         type="file"
         id="fileInput"
         hidden
-        accept="image/*, video/*"
+        accept="image/*"
         multiple
         onChange={handleInputChange}
       />
diff --git a/src/domains/community/write/image-upload/ImageSection.tsx b/src/domains/community/write/image-upload/ImageSection.tsx
index 13e67d9..df8d9fe 100644
--- a/src/domains/community/write/image-upload/ImageSection.tsx
+++ b/src/domains/community/write/image-upload/ImageSection.tsx
@@ -20,9 +20,22 @@ function ImageSection({ formData, setFormData, uploadedFile, setUploadedFile }:
     console.log(formData.imageUrls);
   }, [uploadedFile]);
 
+  const handleAddImage = (newFiles: UploadedItem[]) => {
+    const MAX_IMAGES = 10;
+    if (uploadedFile.length + newFiles.length > MAX_IMAGES) {
+      alert(`이미지는 최대 ${MAX_IMAGES}개까지 업로드할 수 있어요.`);
+      return;
+    }
+    setUploadedFile((prev) => [...prev, ...newFiles]);
+  };
+
   return (
     <section className="mt-5 sm:grid md:grid-cols-7 sm:grid-cols-5 sm:place-items-center  flex overflow-y-scroll no-scrollbar gap-5 whitespace-nowrap py-5 w-full max-w-full">
-      <ImageInput setUploadedFile={setUploadedFile} />
+      <ImageInput
+        uploadedFile={uploadedFile}
+        setUploadedFile={setUploadedFile}
+        onAddImage={handleAddImage}
+      />
       {uploadedFile && (
         <UploadedImage uploadedFile={uploadedFile} setUploadedFile={setUploadedFile} />
       )}
diff --git a/src/domains/recipe/details/DetailsHeader.tsx b/src/domains/recipe/details/DetailsHeader.tsx
index 1e11bd9..acd9e5d 100644
--- a/src/domains/recipe/details/DetailsHeader.tsx
+++ b/src/domains/recipe/details/DetailsHeader.tsx
@@ -19,6 +19,7 @@ function DetailsHeader({ id, favor }: { id: number; favor: boolean | null }) {
   const url = async () => {
     const res = await fetch(`${getApi}/cocktails/${id}/share`);
     const json = await res.json();
+    console.log(json.data);
     setMeta(json.data);
   };
 
diff --git a/src/domains/shared/components/comment/CommentList.tsx b/src/domains/shared/components/comment/CommentList.tsx
index 3d02df6..4efe9cc 100644
--- a/src/domains/shared/components/comment/CommentList.tsx
+++ b/src/domains/shared/components/comment/CommentList.tsx
@@ -7,7 +7,6 @@ import { useItemVirtualizer } from '@/domains/community/hook/useItemVirtualizer'
 import { useCommentEnterAnimation } from '@/domains/community/hook/useCommentAnimation';
 import { usePrevious } from 'react-use';
 import Link from 'next/link';
-import { getApi } from '@/app/api/config/appConfig';
 
 type Props = {
   comments: CommentType[] | null;
diff --git a/src/domains/shared/components/profile/Profile.tsx b/src/domains/shared/components/profile/Profile.tsx
index 1b92735..31a2e48 100644
--- a/src/domains/shared/components/profile/Profile.tsx
+++ b/src/domains/shared/components/profile/Profile.tsx
@@ -17,10 +17,7 @@ function Profile({ userNickname }: Props) {
 
   return (
     <div className="flex gap-2 items-center justify-start">
-      <div
-        className="w-9 h-9 rounded-full bg-secondary flex items-center justify-center"
-        aria-label="작성자 아이콘"
-      >
+      <div className="w-8 h-8 flex items-center justify-center" aria-label="작성자 아이콘">
         <div className="w-8 flex items-center justify-center">
           <SsuryImage abvLevel={abvLevel} />
         </div>
diff --git a/src/shared/styles/global.css b/src/shared/styles/global.css
index 936c9ee..2d23427 100644
--- a/src/shared/styles/global.css
+++ b/src/shared/styles/global.css
@@ -17,4 +17,13 @@
 
 html {
   scroll-behavior: auto; /* smooth가 아닌 auto로 */
-}
\ No newline at end of file
+}
+
+/* 전역 CSS 또는 글로벌 스타일에서 */
+.swiper,
+.swiper-slide,
+.swiper-button-prev,
+.swiper-button-next,
+.swiper-pagination {
+  font-family: inherit !important;
+}