From 3d7a947cdc1624c29f287ed111a8756de8f3a14b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EC=A0=95=EC=9A=B0?= <jwo0o0358@gmail.com>
Date: Sun, 15 Dec 2024 23:22:08 +0900
Subject: [PATCH 1/4] Update README.md

---
 README.md | 22 +++++++++-------------
 1 file changed, 9 insertions(+), 13 deletions(-)

diff --git a/README.md b/README.md
index 3682c1d..16adcbb 100644
--- a/README.md
+++ b/README.md
@@ -26,14 +26,6 @@
 3. **유용한 정보를 제공하는 효과적인 방식 제공**<br/>
     SNS가 비즈니스와 지식 전달의 역할까지 하고 있습니다. 선택형 질문으로 자연스러운 참여를 유도하고, 기억에 더 남게 할 수 있습니다.
 
-## 🔍 핵심 기능
-#### 카카오 소셜 로그인
-#### 피드 작성
-#### 피드 조회
-#### 팔로잉/팔로우
-#### 실시간 채팅
-
-
 ## 🛠️ 기술 스택
 ### Client
 ![Next JS](https://img.shields.io/badge/Next.js-black?style=flat&logo=next.js&logoColor=white) ![TypeScript](https://img.shields.io/badge/typescript-%23007ACC.svg?style=flat&logo=typescript&logoColor=white) ![TailwindCSS](https://img.shields.io/badge/tailwindcss-%2338B2AC.svg?style=flat&logo=tailwind-css&logoColor=white) 	![Tanstack Query](https://img.shields.io/badge/-Tanstack%20Query-FF4154?style=flat&logo=react%20query&logoColor=white) ![Zustand](https://img.shields.io/badge/Zustand-black?style=flat) ![PNPM](https://img.shields.io/badge/pnpm-%234a4a4a.svg?style=flat&logo=pnpm&logoColor=f69220) ![Zod](https://img.shields.io/badge/zod-%233068b7.svg?style=flat&logo=zod&logoColor=white)
@@ -45,12 +37,16 @@
 ![Amazon EC2](https://img.shields.io/badge/EC2-FF9900?style=flat&logo=amazonec2&logoColor=white) ![Amazon S3](https://img.shields.io/badge/S3-569A31?style=flat&logo=amazons3&logoColor=white) ![Amazon CodeDeploy](https://img.shields.io/badge/CodeDeploy-569A31?style=flat&logo=CodeDeploy&logoColor=white) ![Amazon Route 53](https://img.shields.io/badge/Route%2053-8C4FFF?style=flat&logo=amazonroute53&logoColor=white) ![Nginx](https://img.shields.io/badge/nginx-%23009639.svg?style=flat&logo=nginx&logoColor=white) ![GitHub Actions](https://img.shields.io/badge/github%20actions-%232671E5.svg?style=flat&logo=githubactions&logoColor=white)
 
 
-## 🌐 서비스 아키텍처
-<img src="https://github.com/user-attachments/assets/c8fd626a-7942-4f97-a5b6-25387f174b76" width="800" />
+## 🔍 핵심 기능
+
+![핵심기능1](https://github.com/user-attachments/assets/43f1398d-7c6f-46c0-bf82-2a5dfb2535da)
+
+![핵심기능2](https://github.com/user-attachments/assets/9e466754-45dd-4a79-a9c5-26d29482000b)
 
-## 📝 관련 기록
-> - 블로그
+![핵심기능3](https://github.com/user-attachments/assets/406ae775-db2c-4fcc-b714-a35eebaf81a2)
 
+![핵심기능4](https://github.com/user-attachments/assets/ed19f2dd-0a9d-4146-a231-a2f9fd42af96)
 
-### 🙋 만든 사람
+## 🌐 서비스 아키텍처
+<img src="https://github.com/user-attachments/assets/c8fd626a-7942-4f97-a5b6-25387f174b76" width="800" />
 

From 3e2a359e5953cbffd7283aa7a8f12c3d5fb7addc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EC=A0=95=EC=9A=B0?= <jwo0o0358@gmail.com>
Date: Mon, 16 Dec 2024 02:10:15 +0900
Subject: [PATCH 2/4] Update README.md

---
 README.md | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index 16adcbb..d65d1b9 100644
--- a/README.md
+++ b/README.md
@@ -1,10 +1,9 @@
 <div align=center>
   <img src="https://github.com/jwo0o0/SNS_Project/blob/develop/public/images/og_image.png?raw=true" width="800" /><br/><br/>
   <h1> 🗳️ PickIt </h2>
-  https://pickitsns.site/
-  <br><br>
+  <br>
 
-  [![Application](http://img.shields.io/badge/Application-000000?style=flat&logo=github&logoColor=white&link=https://pickitsns.site/)](https://sns.jwoo.site/)
+  [![Application](http://img.shields.io/badge/Application-000000?style=flat&logo=github&logoColor=white&link=https://pickitsns.site/)](https://pickitsns.site/)
   <!--
 [![Storybook](http://img.shields.io/badge/Storybook-FF4785?style=flat&logo=Storybook&logoColor=white&link=https://pickitsns.site)](https://sns.jwoo.site)
 [![API Docs](http://img.shields.io/badge/Swagger-85EA2D?style=flat&logo=swagger&logoColor=white&link=https://pickitsns.site)](https://sns.jwoo.site)

From 302a8045da2f82949c0debc87ed5c50cc5ddb400 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EC=A0=95=EC=9A=B0?= <jwo0o0358@gmail.com>
Date: Mon, 16 Dec 2024 02:12:30 +0900
Subject: [PATCH 3/4] Update README.md

---
 README.md | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index d65d1b9..d5eb9d3 100644
--- a/README.md
+++ b/README.md
@@ -44,7 +44,8 @@
 
 ![핵심기능3](https://github.com/user-attachments/assets/406ae775-db2c-4fcc-b714-a35eebaf81a2)
 
-![핵심기능4](https://github.com/user-attachments/assets/ed19f2dd-0a9d-4146-a231-a2f9fd42af96)
+![핵심기능4](https://github.com/user-attachments/assets/26ad7109-9e4c-484b-9b51-39b000bdc4fb)
+
 
 ## 🌐 서비스 아키텍처
 <img src="https://github.com/user-attachments/assets/c8fd626a-7942-4f97-a5b6-25387f174b76" width="800" />

From 3832d8cac303acf37c32dbce3201375d1b6b2b51 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EC=A0=95=EC=9A=B0?= <jwo0o0358@gmail.com>
Date: Wed, 18 Dec 2024 23:56:04 +0900
Subject: [PATCH 4/4] =?UTF-8?q?[Feat]=20=ED=94=BC=EB=93=9C=20=EC=9D=B4?=
 =?UTF-8?q?=EB=AF=B8=EC=A7=80=20=EB=A6=AC=EB=A0=8C=EB=8D=94=EB=A7=81=20?=
 =?UTF-8?q?=EC=97=90=EB=9F=AC=20=ED=95=B4=EA=B2=B0,=20=ED=94=BC=EB=93=9C?=
 =?UTF-8?q?=20=EC=88=98=EC=A0=95=20=EA=B8=B0=EB=8A=A5=20=EC=B6=94=EA=B0=80?=
 =?UTF-8?q?=20(#90)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat: 유저가 작성한 피드인 경우 피드 상세페이지에서 Dropdown UI 추가

* feat: 피드 상세 페이지에서 삭제 API 연결

* fix: URL.createObjectURL이 반복되어 불필요하게 리렌더링되는 문제 해결

* fix: 피드의 투표 후 볼 수 있는 콘텐츠를 isVoted 여부에 따라 렌더링

* fix: 피드 이미지가 File 객체 or 이미지 url일 수 있게 수정

* feat: 피드 수정 Form 컴포넌트

* feat: 피드 수정 시 하단 Drawer 컴포넌트

* fix: 내가 작성한 피드에서 수정하기 클릭시 피드 수정 Drawer open

* style: 피드 수정 Form에서 스크롤바 숨김

* feat: 피드 업데이트 API URL 추가

* feat: 피드 업데이트 API 정의

* feat: 피드 이미지 업데이트 API 정의

* feat: Feed 컴포넌트 data가 undefined일 때 예외 처리

* fix: 피드 수정 Drawer 매개변수명 변경 setOpen -> setIsOpen

* fix: 피드 목록에서 수정, 삭제 버튼 클릭시 이벤트 버블링으로 라우터 이동하는 버그 수정

* feat: 피드 수정 API 연결

* feat: 유저 피드 목록에서 피드 수정 UI 추가

* fix: 피드 수정,삭제 드롭다운 중복 선언 제거

* fix: 피드 수정 Drawer 컴포넌트 선언 위치 이동
---
 src/apis/path.ts                       |   2 +
 src/components/common/Dropdown.tsx     |  14 +-
 src/components/feed/Feed.tsx           |  49 +++++-
 src/components/feed/FeedContent.tsx    |  11 +-
 src/components/feed/FeedEditDrawer.tsx |  32 ++++
 src/components/feed/FeedEditForm.tsx   | 202 +++++++++++++++++++++++++
 src/components/feed/FeedFormImages.tsx |  69 +++++++++
 src/components/feed/FeedWriteForm.tsx  |  44 +-----
 src/components/user/UserFeeds.tsx      |  29 ----
 src/lib/feed/feedTypes.ts              |   5 +
 src/lib/feed/hooks/usePatchFeed.ts     |  24 +++
 src/lib/image/imageApis.ts             |  30 +++-
 src/utils/schema/feedSchema.ts         |  12 +-
 13 files changed, 443 insertions(+), 80 deletions(-)
 create mode 100644 src/components/feed/FeedEditDrawer.tsx
 create mode 100644 src/components/feed/FeedEditForm.tsx
 create mode 100644 src/components/feed/FeedFormImages.tsx
 create mode 100644 src/lib/feed/hooks/usePatchFeed.ts

diff --git a/src/apis/path.ts b/src/apis/path.ts
index 6fee997..b618caa 100644
--- a/src/apis/path.ts
+++ b/src/apis/path.ts
@@ -10,6 +10,7 @@ const AUTH_API = {
 const IMAGE_API = {
   PROFILE_UPLOAD: (userId: number) => `/image/profile?userId=${userId}`,
   FEED_UPLOAD: (feedId: number) => `/image/feeds?feedId=${feedId}`,
+  FEED_UPDATE: (feedId: number) => `/image/feeds/${feedId}`,
 };
 
 const USER_API = {
@@ -23,6 +24,7 @@ const FEED_API = {
   VOTE_FEED: (feedId: number) => `/feeds/${feedId}/vote`,
   LIKE_FEED: (feedId: number) => `/feeds/${feedId}/like`,
   DELETE_FEED: (feedId: number) => `/feeds/${feedId}`,
+  PATCH_FEED: (feedId: number) => `/feeds/${feedId}`,
   GET_ALL_FEED: (page: number, limit: number) =>
     `/feeds?page=${page}&limit=${limit}`,
   GET_LIKED_FEED: (page: number, limit: number) =>
diff --git a/src/components/common/Dropdown.tsx b/src/components/common/Dropdown.tsx
index 85fd9b1..c586132 100644
--- a/src/components/common/Dropdown.tsx
+++ b/src/components/common/Dropdown.tsx
@@ -30,7 +30,12 @@ const Dropdown = ({ handleClickDelete, hadleClickEdit }: DropdownProps) => {
           </svg>
         </DropdownMenuTrigger>
         <DropdownMenuContent className="mr-4 md:mr-32 text-slate-900">
-          <DropdownMenuItem onClick={handleClickDelete}>
+          <DropdownMenuItem
+            onClick={(e) => {
+              e.stopPropagation();
+              handleClickDelete();
+            }}
+          >
             <svg
               xmlns="http://www.w3.org/2000/svg"
               fill="none"
@@ -47,7 +52,12 @@ const Dropdown = ({ handleClickDelete, hadleClickEdit }: DropdownProps) => {
             </svg>
             삭제하기
           </DropdownMenuItem>
-          <DropdownMenuItem onClick={hadleClickEdit}>
+          <DropdownMenuItem
+            onClick={(e) => {
+              e.stopPropagation();
+              hadleClickEdit();
+            }}
+          >
             <svg
               xmlns="http://www.w3.org/2000/svg"
               fill="none"
diff --git a/src/components/feed/Feed.tsx b/src/components/feed/Feed.tsx
index 0fa0f4a..3012d2e 100644
--- a/src/components/feed/Feed.tsx
+++ b/src/components/feed/Feed.tsx
@@ -1,24 +1,29 @@
 "use client";
-import { FC } from "react";
+import { FC, useState } from "react";
 import Image from "next/image";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { ProfileImage } from "@/components/common/ProfileImage";
 import { Modal, LoginModalContent } from "../common/modal";
+import Dropdown from "@/components/common/Dropdown";
+import { FeedEditDrawer } from "@/components/feed/FeedEditDrawer";
 
 import { FeedType } from "@/lib/feed/feedTypes";
 import { useQueryClient } from "@tanstack/react-query";
 import feedKeys from "@/lib/feed/feedQueries";
 import { useVoteFeed } from "@/lib/feed/hooks/useVoteFeed";
 import { useLikeFeed } from "@/lib/feed/hooks/useLikeFeed";
+import { useDeleteFeed } from "@/lib/feed/hooks/useDeleteFeed";
 import { useLoginStatus } from "@/lib/auth/hooks/useLoginStatus";
 import { useModalStore } from "@/store/modal/useModalStore";
+import { useAuthStore } from "@/store/auth/useAuthStore";
+import { useStore } from "@/store/useStore";
 import timeAgo from "@/utils/format/timeAgo";
 import getImageName from "@/utils/format/getImageName";
 
 export interface FeedProps {
   feedId: number;
-  data: FeedType | undefined;
+  data: FeedType;
   handleVoteSuccess?: () => Promise<void>;
   handleLikeSuccess?: () => Promise<void>;
 }
@@ -29,9 +34,13 @@ export const Feed: FC<FeedProps> = ({
   handleLikeSuccess,
 }: FeedProps) => {
   const router = useRouter();
+
+  const user = useStore(useAuthStore, (state) => state.user);
   const { isLogin, isLoading } = useLoginStatus();
   const openModal = useModalStore((state) => state.open);
 
+  const [isOpenDrawer, setIsOpenDrawer] = useState<boolean>(false);
+
   const queryClient = useQueryClient();
 
   const sum = data?.result.reduce((acc, cur) => acc + cur, 0) ?? 0;
@@ -85,6 +94,21 @@ export const Feed: FC<FeedProps> = ({
     }
   };
 
+  const { mutate: deleteFeedMutation } = useDeleteFeed();
+
+  const handleClickDelete = () => {
+    deleteFeedMutation(
+      {
+        feedId,
+      },
+      {
+        onSuccess: () => {
+          router.replace("/");
+        },
+      }
+    );
+  };
+
   return (
     <>
       <div
@@ -188,9 +212,11 @@ export const Feed: FC<FeedProps> = ({
               })}
             </div>
           )}
-          <div className="my-2 md:my-4 text-body2Normal">
-            {data?.pollContent}
-          </div>
+          {data?.isVoted && (
+            <div className="my-2 md:my-4 text-body2Normal">
+              {data?.pollContent}
+            </div>
+          )}
           <div className="flex items-center text-slate-600">
             <button
               onClick={(e) => {
@@ -243,7 +269,20 @@ export const Feed: FC<FeedProps> = ({
             <div className="text-sm">{data?.commentCount}</div>
           </div>
         </div>
+        {user?.id === data?.user.userId && (
+          <Dropdown
+            handleClickDelete={handleClickDelete}
+            hadleClickEdit={() => {
+              setIsOpenDrawer(true);
+            }}
+          />
+        )}
       </div>
+      <FeedEditDrawer
+        isOpen={isOpenDrawer}
+        setIsOpen={setIsOpenDrawer}
+        data={data}
+      />
       <Modal>
         <LoginModalContent />
       </Modal>
diff --git a/src/components/feed/FeedContent.tsx b/src/components/feed/FeedContent.tsx
index 9d71497..6dabe7b 100644
--- a/src/components/feed/FeedContent.tsx
+++ b/src/components/feed/FeedContent.tsx
@@ -3,7 +3,14 @@ import { useGetFeed } from "@/lib/feed/hooks/useGetFeed";
 import { Feed } from "./Feed";
 
 export const FeedContent = ({ feedId }: { feedId: number }) => {
-  const { data } = useGetFeed(feedId);
+  const { data, isError } = useGetFeed(feedId);
 
-  return <Feed feedId={feedId} data={data} />;
+  if (isError || !data) {
+    return <div>Failed to load feed.</div>;
+  }
+  return (
+    <>
+      <Feed feedId={feedId} data={data} />
+    </>
+  );
 };
diff --git a/src/components/feed/FeedEditDrawer.tsx b/src/components/feed/FeedEditDrawer.tsx
new file mode 100644
index 0000000..924f9d1
--- /dev/null
+++ b/src/components/feed/FeedEditDrawer.tsx
@@ -0,0 +1,32 @@
+"use client";
+import { Drawer, DrawerContent, DrawerTitle } from "@/components/ui/drawer";
+import { FeedEditForm } from "@/components/feed/FeedEditForm";
+import { FeedType } from "@/lib/feed/feedTypes";
+
+interface FeedEditDrawerProps {
+  isOpen: boolean;
+  setIsOpen: (open: boolean) => void;
+  data: FeedType;
+}
+export const FeedEditDrawer = ({
+  isOpen,
+  setIsOpen,
+  data,
+}: FeedEditDrawerProps) => {
+  return (
+    <>
+      <Drawer open={isOpen} onOpenChange={setIsOpen}>
+        <DrawerContent
+          aria-describedby={undefined}
+          className="mx-auto w-full md:w-[600px] lg:w-[680px] h-[80vh] bg-white z-50
+          px-4 py-2"
+        >
+          <DrawerTitle className="hidden"></DrawerTitle>
+          <div className="h-full overflow-y-scroll">
+            <FeedEditForm data={data} setIsOpen={setIsOpen} />
+          </div>
+        </DrawerContent>
+      </Drawer>
+    </>
+  );
+};
diff --git a/src/components/feed/FeedEditForm.tsx b/src/components/feed/FeedEditForm.tsx
new file mode 100644
index 0000000..ff178fa
--- /dev/null
+++ b/src/components/feed/FeedEditForm.tsx
@@ -0,0 +1,202 @@
+"use client";
+import { useRef } from "react";
+import { useRouter } from "next/navigation";
+import { FeedType } from "@/lib/feed/feedTypes";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { FeedEditPayload, feedEditSchema } from "@/utils/schema/feedSchema";
+import { useForm } from "react-hook-form";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormMessage,
+} from "@/components/ui/form";
+import { Textarea } from "../ui/textarea";
+import { FeedFormImages } from "./FeedFormImages";
+import { usePatchFeed } from "@/lib/feed/hooks/usePatchFeed";
+
+interface FeedEditFormProps {
+  data: FeedType;
+  setIsOpen: (open: boolean) => void;
+}
+export const FeedEditForm = ({ data, setIsOpen }: FeedEditFormProps) => {
+  const router = useRouter();
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const form = useForm<FeedEditPayload>({
+    resolver: zodResolver(feedEditSchema),
+    defaultValues: {
+      content: data.content || "",
+      pollContent: data.pollContent || "",
+      images: data.images || [],
+    },
+  });
+
+  const {
+    getValues,
+    setValue,
+    watch,
+    formState: { isValid },
+  } = form;
+  const content = watch("content");
+  const pollContent = watch("pollContent");
+
+  const { mutate: patchFeedMutation } = usePatchFeed();
+
+  const onSubmit = (values: FeedEditPayload) => {
+    patchFeedMutation(
+      { feedId: data.feedId, ...values },
+      {
+        onSuccess: () => {
+          setIsOpen(false);
+          router.refresh();
+        },
+        onError: () => {
+          setIsOpen(false);
+          router.refresh();
+          alert("피드 수정에 실패했습니다.");
+        },
+      }
+    );
+  };
+
+  const handleClickImageButton = () => {
+    fileInputRef.current?.click();
+  };
+
+  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const newFiles = Array.from(event.target.files || []);
+    const updatedImages = [...getValues("images"), ...newFiles].slice(0, 5); // 최대 5개 제한
+    setValue("images", updatedImages, { shouldValidate: true });
+  };
+
+  const handleClickDeleteButton = (idx: number) => {
+    const updatedImages = getValues("images").filter((_, i) => i !== idx);
+    setValue("images", updatedImages, { shouldValidate: true });
+  };
+
+  return (
+    <div className="h-full flex flex-col">
+      <div className="w-full h-full overflow-y-scroll scrollbar-hide">
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)}>
+            <div className="w-full h-36">
+              <div className="text-body1Normal font-medium text-slate-900 flex items-center mb-4">
+                이미지 업로드
+              </div>
+              <div
+                id="images"
+                className="flex overflow-x-scroll scrollbar-hide"
+              >
+                <FormField
+                  control={form.control}
+                  name="images"
+                  render={() => (
+                    <FormItem>
+                      <FormControl>
+                        <button
+                          type="button"
+                          onClick={handleClickImageButton}
+                          className="w-20 h-20 border border-slate-300
+              flex flex-col items-center justify-center"
+                        >
+                          <svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            viewBox="0 0 24 24"
+                            fill="currentColor"
+                            className="size-6 fill-slate-400"
+                          >
+                            <path d="M12 9a3.75 3.75 0 1 0 0 7.5A3.75 3.75 0 0 0 12 9Z" />
+                            <path
+                              fillRule="evenodd"
+                              d="M9.344 3.071a49.52 49.52 0 0 1 5.312 0c.967.052 1.83.585 2.332 1.39l.821 1.317c.24.383.645.643 1.11.71.386.054.77.113 1.152.177 1.432.239 2.429 1.493 2.429 2.909V18a3 3 0 0 1-3 3h-15a3 3 0 0 1-3-3V9.574c0-1.416.997-2.67 2.429-2.909.382-.064.766-.123 1.151-.178a1.56 1.56 0 0 0 1.11-.71l.822-1.315a2.942 2.942 0 0 1 2.332-1.39ZM6.75 12.75a5.25 5.25 0 1 1 10.5 0 5.25 5.25 0 0 1-10.5 0Zm12-1.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Z"
+                              clipRule="evenodd"
+                            />
+                          </svg>
+                          <Input
+                            type="file"
+                            ref={fileInputRef}
+                            accept="image/*"
+                            className="hidden"
+                            onChange={handleFileChange}
+                          />
+                          <div className="text-sm text-slate-400">
+                            <span className="text-indigo-500">
+                              {getValues("images").length}
+                            </span>
+                            /5
+                          </div>
+                        </button>
+                      </FormControl>
+                    </FormItem>
+                  )}
+                />
+                <FeedFormImages
+                  images={getValues("images")}
+                  onDelete={handleClickDeleteButton}
+                />
+              </div>
+            </div>
+            <FormField
+              control={form.control}
+              name="content"
+              render={({ field }) => (
+                <FormItem>
+                  <FormControl>
+                    <Textarea
+                      {...field}
+                      placeholder=""
+                      className="resize-none scrollbar-hide h-36 text-[15px] text-body2Normal
+                        rounded-none border-white text-slate-900"
+                      maxLength={200}
+                    />
+                  </FormControl>
+                  <div
+                    className="w-full text-sm text-end text-slate-500
+                 border border-white border-b-slate-400 h-8
+                "
+                  >
+                    {content.length}/200자
+                  </div>
+                  <FormMessage className="text-red-400" />
+                </FormItem>
+              )}
+            ></FormField>
+            <FormField
+              control={form.control}
+              name="pollContent"
+              render={({ field }) => (
+                <FormItem>
+                  <FormControl>
+                    <Textarea
+                      {...field}
+                      placeholder="선택 후 볼 수 있는 내용을 작성해주세요."
+                      className="resize-none scrollbar-hide h-36 mt-2 first-letter:mb-6 text-[15px] text-body2Normal
+                        rounded-none border-white text-slate-900"
+                      maxLength={200}
+                    />
+                  </FormControl>
+                  <div className="w-full text-sm text-end text-slate-500 h-8">
+                    {pollContent.length}/200자
+                  </div>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          </form>
+        </Form>
+      </div>
+      <Button
+        type="button"
+        onClick={() => form.handleSubmit(onSubmit)()}
+        disabled={!isValid}
+        className="w-full bg-indigo-500 hover:bg-indigo-600"
+      >
+        수정 완료
+      </Button>
+    </div>
+  );
+};
diff --git a/src/components/feed/FeedFormImages.tsx b/src/components/feed/FeedFormImages.tsx
new file mode 100644
index 0000000..1fcad53
--- /dev/null
+++ b/src/components/feed/FeedFormImages.tsx
@@ -0,0 +1,69 @@
+import { useEffect, useState } from "react";
+import Image from "next/image";
+
+interface FeedFormImagesProps {
+  images: (File | string)[];
+  onDelete: (idx: number) => void;
+}
+export const FeedFormImages = ({ images, onDelete }: FeedFormImagesProps) => {
+  const [blobUrls, setBlobUrls] = useState<string[]>([]);
+
+  useEffect(() => {
+    const urls = images.map((image) =>
+      typeof image === "string" ? image : URL.createObjectURL(image)
+    );
+    setBlobUrls(urls);
+
+    return () => {
+      urls.forEach((url, idx) => {
+        if (typeof images[idx] !== "string") {
+          URL.revokeObjectURL(url);
+        }
+      });
+    };
+  }, [images]);
+
+  return (
+    <>
+      {blobUrls.map((url, idx) => {
+        return (
+          <div
+            key={idx}
+            className="w-20 h-20 border border-slate-300 ml-2 relative shrink-0"
+          >
+            <Image
+              src={url}
+              fill={true}
+              sizes="100%"
+              alt={`image-${idx}`}
+              className="object-cover"
+            />
+            <button
+              type="button"
+              onClick={() => {
+                if (typeof images[idx] !== "string") {
+                  URL.revokeObjectURL(url);
+                }
+                onDelete(idx);
+              }}
+              className="absolute top-1 right-1"
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24"
+                fill="currentColor"
+                className="size-4 fill-slate-950"
+              >
+                <path
+                  fillRule="evenodd"
+                  d="M5.47 5.47a.75.75 0 0 1 1.06 0L12 10.94l5.47-5.47a.75.75 0 1 1 1.06 1.06L13.06 12l5.47 5.47a.75.75 0 1 1-1.06 1.06L12 13.06l-5.47 5.47a.75.75 0 0 1-1.06-1.06L10.94 12 5.47 6.53a.75.75 0 0 1 0-1.06Z"
+                  clipRule="evenodd"
+                />
+              </svg>
+            </button>
+          </div>
+        );
+      })}
+    </>
+  );
+};
diff --git a/src/components/feed/FeedWriteForm.tsx b/src/components/feed/FeedWriteForm.tsx
index c5eae2d..170afda 100644
--- a/src/components/feed/FeedWriteForm.tsx
+++ b/src/components/feed/FeedWriteForm.tsx
@@ -1,5 +1,4 @@
 "use client";
-import Image from "next/image";
 import { useRouter } from "next/navigation";
 import { useRef } from "react";
 import { zodResolver } from "@hookform/resolvers/zod";
@@ -17,6 +16,7 @@ import {
 import { Textarea } from "@/components/ui/textarea";
 import { usePostFeed } from "@/lib/feed/hooks/usePostFeed";
 import { PostFeedResponse } from "@/lib/feed/feedTypes";
+import { FeedFormImages } from "./FeedFormImages";
 
 export const FeedWriteForm = () => {
   const router = useRouter();
@@ -74,10 +74,9 @@ export const FeedWriteForm = () => {
     setValue("images", updatedImages, { shouldValidate: true });
   };
 
-  const handleClickDeleteButton = (image: File, idx: number) => {
+  const handleClickDeleteButton = (idx: number) => {
     const updatedImages = getValues("images").filter((_, i) => i !== idx);
     setValue("images", updatedImages, { shouldValidate: true });
-    URL.revokeObjectURL(URL.createObjectURL(image));
   };
 
   const handleChangePollContent = (
@@ -257,41 +256,10 @@ export const FeedWriteForm = () => {
                   </FormItem>
                 )}
               />
-              {getValues("images").map((image, idx) => {
-                return (
-                  <div
-                    key={idx}
-                    className="w-20 h-20 border border-slate-300 ml-2 relative shrink-0"
-                  >
-                    <Image
-                      src={URL.createObjectURL(image)}
-                      fill={true}
-                      alt={image.name}
-                      className="object-cover"
-                    />
-                    <button
-                      type="button"
-                      onClick={() => {
-                        handleClickDeleteButton(image, idx);
-                      }}
-                      className="absolute top-1 right-1"
-                    >
-                      <svg
-                        xmlns="http://www.w3.org/2000/svg"
-                        viewBox="0 0 24 24"
-                        fill="currentColor"
-                        className="size-4 fill-slate-950"
-                      >
-                        <path
-                          fillRule="evenodd"
-                          d="M5.47 5.47a.75.75 0 0 1 1.06 0L12 10.94l5.47-5.47a.75.75 0 1 1 1.06 1.06L13.06 12l5.47 5.47a.75.75 0 1 1-1.06 1.06L12 13.06l-5.47 5.47a.75.75 0 0 1-1.06-1.06L10.94 12 5.47 6.53a.75.75 0 0 1 0-1.06Z"
-                          clipRule="evenodd"
-                        />
-                      </svg>
-                    </button>
-                  </div>
-                );
-              })}
+              <FeedFormImages
+                images={getValues("images")}
+                onDelete={handleClickDeleteButton}
+              />
             </div>
           </div>
         </form>
diff --git a/src/components/user/UserFeeds.tsx b/src/components/user/UserFeeds.tsx
index ca83b21..9e5a543 100644
--- a/src/components/user/UserFeeds.tsx
+++ b/src/components/user/UserFeeds.tsx
@@ -1,37 +1,16 @@
 "use client";
 import { Feed } from "../feed/Feed";
-import Dropdown from "@/components/common/Dropdown";
-
-import { useAuthStore } from "@/store/auth/useAuthStore";
-import { useStore } from "@/store/useStore";
-
 import { useQueryClient } from "@tanstack/react-query";
 import { useGetUserFeeds } from "@/lib/user/hooks/useGetUserFeeds";
-import { useDeleteFeed } from "@/lib/feed/hooks/useDeleteFeed";
 import userKeys from "@/lib/user/userQueries";
 
 interface UserFeedsProps {
   userIdParam: string;
 }
 export const UserFeeds = ({ userIdParam }: UserFeedsProps) => {
-  const user = useStore(useAuthStore, (state) => state.user);
   const { data } = useGetUserFeeds(Number(userIdParam));
 
-  const { mutate: deleteFeedMutation } = useDeleteFeed();
-
   const queryClient = useQueryClient();
-  const handleClickDelete = (feedId: number) => {
-    deleteFeedMutation(
-      { feedId },
-      {
-        onSuccess: async () => {
-          await queryClient.invalidateQueries({
-            queryKey: userKeys.feeds(Number(userIdParam)),
-          });
-        },
-      }
-    );
-  };
 
   const handleVoteLikeSuccess = async () => {
     await queryClient.invalidateQueries({
@@ -46,14 +25,6 @@ export const UserFeeds = ({ userIdParam }: UserFeedsProps) => {
           key={feed.feedId}
           className="my-4 pb-6 border-b border-b-slate-300 relative"
         >
-          {String(user?.id) === userIdParam && (
-            <Dropdown
-              handleClickDelete={() => {
-                handleClickDelete(feed.feedId);
-              }}
-              hadleClickEdit={() => {}}
-            />
-          )}
           <Feed
             feedId={feed.feedId}
             data={feed}
diff --git a/src/lib/feed/feedTypes.ts b/src/lib/feed/feedTypes.ts
index 15ae846..703a304 100644
--- a/src/lib/feed/feedTypes.ts
+++ b/src/lib/feed/feedTypes.ts
@@ -28,3 +28,8 @@ export interface FeedListType {
   hasNextPage: boolean;
   feeds: FeedType[];
 }
+
+export interface PatchFeedResponse {
+  feedId: number;
+  message: string;
+}
diff --git a/src/lib/feed/hooks/usePatchFeed.ts b/src/lib/feed/hooks/usePatchFeed.ts
new file mode 100644
index 0000000..7cc2e9b
--- /dev/null
+++ b/src/lib/feed/hooks/usePatchFeed.ts
@@ -0,0 +1,24 @@
+import { useMutation } from "@tanstack/react-query";
+import { customFetch, FEED_API } from "@/apis";
+import { PatchFeedResponse } from "../feedTypes";
+import { FeedEditPayload } from "@/utils/schema/feedSchema";
+import { updateFeedImages } from "@/lib/image/imageApis";
+
+export const usePatchFeed = () => {
+  return useMutation<
+    PatchFeedResponse,
+    Error,
+    { feedId: number } & FeedEditPayload
+  >({
+    mutationFn: async ({ feedId, content, pollContent, images }) => {
+      const patchResponse = await customFetch(FEED_API.PATCH_FEED(feedId), {
+        method: "PATCH",
+        body: JSON.stringify({ content, pollContent }),
+      });
+      if (images.length > 0) {
+        await updateFeedImages(images, feedId);
+      }
+      return patchResponse;
+    },
+  });
+};
diff --git a/src/lib/image/imageApis.ts b/src/lib/image/imageApis.ts
index b14c2d3..6056954 100644
--- a/src/lib/image/imageApis.ts
+++ b/src/lib/image/imageApis.ts
@@ -29,14 +29,38 @@ export const uploadProfileImage = async (
   });
 };
 
-export const uploadFeedImages = async (images: File[], feedId: number) => {
+export const uploadFeedImages = async (
+  images: (File | string)[],
+  feedId: number
+) => {
   const formData = new FormData();
   for (const image of images) {
-    const compressedImage = await compressImage(image);
-    formData.append("images", compressedImage);
+    if (typeof image !== "string") {
+      const compressedImage = await compressImage(image);
+      formData.append("images", compressedImage);
+    }
   }
   return customFormFetch(IMAGE_API.FEED_UPLOAD(feedId), {
     method: "POST",
     body: formData,
   });
 };
+
+export const updateFeedImages = async (
+  images: (File | string)[],
+  feedId: number
+) => {
+  const formData = new FormData();
+  for (const image of images) {
+    if (typeof image === "string") {
+      formData.append("imageUrls", image);
+    } else {
+      const compressedImage = await compressImage(image);
+      formData.append("images", compressedImage);
+    }
+  }
+  return customFormFetch(IMAGE_API.FEED_UPDATE(feedId), {
+    method: "PATCH",
+    body: formData,
+  });
+};
diff --git a/src/utils/schema/feedSchema.ts b/src/utils/schema/feedSchema.ts
index ce94d86..b396126 100644
--- a/src/utils/schema/feedSchema.ts
+++ b/src/utils/schema/feedSchema.ts
@@ -12,7 +12,9 @@ const pollsSchema = z.string().min(1).array().min(2).max(5, {
   message: "선택 항목은 5개까지 추가할 수 있습니다.",
 });
 
-const imagesSchema = z.instanceof(File).array().max(5);
+const imagesSchema = z
+  .array(z.union([z.instanceof(File), z.string().url()]))
+  .max(5);
 
 export const feedSchema = z.object({
   content: contentSchema,
@@ -22,3 +24,11 @@ export const feedSchema = z.object({
 });
 
 export type FeedPayload = z.infer<typeof feedSchema>;
+
+export const feedEditSchema = z.object({
+  content: contentSchema,
+  pollContent: pollContentSchema,
+  images: imagesSchema,
+});
+
+export type FeedEditPayload = z.infer<typeof feedEditSchema>;