diff --git a/weatherfit_refactoring/@types/feed/index.d.ts b/weatherfit_refactoring/@types/feed/index.d.ts
index 7901723..dff8f2d 100644
--- a/weatherfit_refactoring/@types/feed/index.d.ts
+++ b/weatherfit_refactoring/@types/feed/index.d.ts
@@ -1,14 +1,17 @@
 interface LIKE {
-    likeId : number;
-    nickName: string;
-  }
-  
+  likeId: number
+  nickName: string
+}
 
 interface IMAGE {
-    imageId: number;
-    boardId: number;
-    imageUrl: string;
-  }
+  boardId: number
+  imageId: number
+  imageUrl: string
+}
+
+interface BOARDID {
+  boardId: string | string[] | undefined
+}
 
 interface FEEDDATA {
     boardId: number;
@@ -24,3 +27,19 @@ interface FEEDDATA {
     modifiedDate: string;
   }
 
+interface FEEDATA {
+  boardId: number
+  images: string
+  createDate: string
+  likeCount: number
+  likelist: LIKE[]
+  nickName: string
+  temperature: number
+  weather: string
+  weatherIcon: string
+  // 임시 detail용
+  userImage: string | StaticImport
+  content: string
+  hashTag: string[]
+  category: string[]
+}
diff --git a/weatherfit_refactoring/next.config.js b/weatherfit_refactoring/next.config.js
index de418b5..1add844 100644
--- a/weatherfit_refactoring/next.config.js
+++ b/weatherfit_refactoring/next.config.js
@@ -2,13 +2,16 @@
 const nextConfig = {}
 
 module.exports = {
-    images: {
-      domains: [
-        "weatherfit-board-image.s3.amazonaws.com",
-        "heesung-s3.s3.ap-northeast-2.amazonaws.com",
-        "openweathermap.org",
-        "cdn.peacedoorball.blog",
-        "cdnimg.melon.co.kr",
-      ],
-    },
-  };
+  images: {
+    domains: [
+      'weatherfit-board-image.s3.amazonaws.com',
+      'heesung-s3.s3.ap-northeast-2.amazonaws.com',
+      'openweathermap.org',
+      'cdn.peacedoorball.blog',
+      'cdnimg.melon.co.kr',
+      // 외부 url 이미지 로드
+      'postfiles.pstatic.net',
+      'i.pinimg.com',
+    ],
+  },
+}
diff --git a/weatherfit_refactoring/package-lock.json b/weatherfit_refactoring/package-lock.json
index 8ae33ec..e39f1e3 100644
--- a/weatherfit_refactoring/package-lock.json
+++ b/weatherfit_refactoring/package-lock.json
@@ -12,6 +12,8 @@
         "next": "14.0.4",
         "react": "^18",
         "react-dom": "^18",
+        "slick-carousel": "^1.8.1",
+        "sweetalert2": "^11.10.4",
         "zustand": "^4.4.7"
       },
       "devDependencies": {
@@ -2841,6 +2843,12 @@
         "jiti": "bin/jiti.js"
       }
     },
+    "node_modules/jquery": {
+      "version": "3.7.1",
+      "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.7.1.tgz",
+      "integrity": "sha512-m4avr8yL8kmFN8psrbFFFmB/If14iN5o9nw/NgnnM+kybDJpRsAynV2BsfpTYrTRysYUdADVD7CkUUizgkpLfg==",
+      "peer": true
+    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -4107,6 +4115,14 @@
         "node": ">=8"
       }
     },
+    "node_modules/slick-carousel": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/slick-carousel/-/slick-carousel-1.8.1.tgz",
+      "integrity": "sha512-XB9Ftrf2EEKfzoQXt3Nitrt/IPbT+f1fgqBdoxO3W/+JYvtEOW6EgxnWfr9GH6nmULv7Y2tPmEX3koxThVmebA==",
+      "peerDependencies": {
+        "jquery": ">=1.8.0"
+      }
+    },
     "node_modules/source-map-js": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
@@ -4413,6 +4429,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/sweetalert2": {
+      "version": "11.10.4",
+      "resolved": "https://registry.npmjs.org/sweetalert2/-/sweetalert2-11.10.4.tgz",
+      "integrity": "sha512-MOVRuEW/yQsyzgkaiHqAJcYKxW3vhtE5o3Skp6vZdyJejCOWo4FOicbjRfvqHAXTyTMuwDHA+0lYbO6BiHl1Gw==",
+      "funding": {
+        "type": "individual",
+        "url": "https://github.com/sponsors/limonte"
+      }
+    },
     "node_modules/tailwindcss": {
       "version": "3.4.0",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.0.tgz",
diff --git a/weatherfit_refactoring/package.json b/weatherfit_refactoring/package.json
index b006c92..85ecab5 100644
--- a/weatherfit_refactoring/package.json
+++ b/weatherfit_refactoring/package.json
@@ -14,6 +14,8 @@
     "next": "14.0.4",
     "react": "^18",
     "react-dom": "^18",
+    "slick-carousel": "^1.8.1",
+    "sweetalert2": "^11.10.4",
     "zustand": "^4.4.7"
   },
   "devDependencies": {
diff --git a/weatherfit_refactoring/public/dummy_data/feed.json b/weatherfit_refactoring/public/dummy_data/feed.json
index 83b8f7f..987d914 100644
--- a/weatherfit_refactoring/public/dummy_data/feed.json
+++ b/weatherfit_refactoring/public/dummy_data/feed.json
@@ -1,37 +1,63 @@
 {
-    "feed_data" : [
-      {
-        "boardId": 1,
-        "images" : "https://cdn.peacedoorball.blog/wp-content/uploads/2024/01/iu-sends-uaenas-into-whiplash-with-her-new-bleached-hair-ahead-of-2024-comeback-something-big-is-coming.webp",
-        "createDate": "2023-08-31 04:29:55",
-        "likeCount": 2,
-        "likelist": [{"likeId":1 , "nickName":"user1"}, {"likeId":2 , "nickName":"user2"}],
-        "nickName": "user1",
-        "temperature": -6,
-        "weather": "clear sky",
-        "weatherIcon": "01d"
-      },
-      {
-        "boardId": 2,
-        "images" : "https://cdn.peacedoorball.blog/wp-content/uploads/2024/01/iu-sends-uaenas-into-whiplash-with-her-new-bleached-hair-ahead-of-2024-comeback-something-big-is-coming.webp",
-        "createDate": "2023-08-30 04:29:53",
-        "likeCount": 1,
-        "likelist": [{"likeId":1 , "nickName":"user1"}],
-        "nickName": "user1",
-        "temperature": 2,
-        "weather": "rain",
-        "weatherIcon": "10d"
-      },
-      {
-        "boardId": 3,
-        "images" : "https://cdn.peacedoorball.blog/wp-content/uploads/2024/01/iu-sends-uaenas-into-whiplash-with-her-new-bleached-hair-ahead-of-2024-comeback-something-big-is-coming.webp",
-        "createDate": "2023-09-01 11:30:30",
-        "likeCount": 2,
-        "likelist": [{"likeId":1 , "nickName":"user1"}, {"likeId":2 , "nickName":"user2"}],
-        "nickName": "user2",
-        "temperature": -4,
-        "weather": "cloud",
-        "weatherIcon": "03d"
-      }      
-    ]
-  }
\ No newline at end of file
+  "feed_data": [
+    {
+      "boardId": 1,
+      "images": [
+        "https://cdn.peacedoorball.blog/wp-content/uploads/2024/01/iu-sends-uaenas-into-whiplash-with-her-new-bleached-hair-ahead-of-2024-comeback-something-big-is-coming.webp",
+        "https://postfiles.pstatic.net/MjAyMDA1MjJfMTUy/MDAxNTkwMDg5Njk3NjEy.WzzdxiwQV_iHROSHjdQ9v1amtfFRmSUwjRoB1iqbpNEg.ruMcbiRKcGhohFv_z91YDvVyjhlCQ2W_9Q28SrhVDCAg.JPEG.knh941010/C820D450-083E-41CC-A00D-0A2F60DC804B-4331-0000014161917C89.jpg?type=w966",
+        "https://i.pinimg.com/564x/18/c0/a6/18c0a61d88e3d75e77039f2de8813f55.jpg"
+      ],
+      "createDate": "2023-08-31 04:29:55",
+      "likeCount": 2,
+      "likelist": [
+        { "likeId": 1, "nickName": "user1" },
+        { "likeId": 2, "nickName": "user2" }
+      ],
+      "nickName": "user1",
+      "temperature": -6,
+      "weather": "clear sky",
+      "weatherIcon": "01d",
+      "content": "안녕 안녕#hi 헬로 #하이 가나다라마바사아자#안녕 차카타파하 안녕안녕안녕 안녕안녕안녕안녕안녕 가나다라마바사아자차 카타파하 가나다라 마바사아자차카타파하 안녕안녕 안녕안녕안녕 안녕안녕안녕 가나다라마바사아자차카타파하",
+      "hashTag": ["hi", "하이", "안녕"],
+      "category": ["후드 집업", "가죽자켓", "컨버스", "운동화", "베레모"],
+      "userImage": "https://cdnimg.melon.co.kr/cm2/artistcrop/images/002/61/143/261143_20210325180240_500.jpg?61e575e8653e5920470a38d1482d7312/melon/optimize/90"
+    },
+    {
+      "boardId": 2,
+      "images": [
+        "https://cdn.peacedoorball.blog/wp-content/uploads/2024/01/iu-sends-uaenas-into-whiplash-with-her-new-bleached-hair-ahead-of-2024-comeback-something-big-is-coming.webp"
+      ],
+      "createDate": "2023-08-30 04:29:53",
+      "likeCount": 1,
+      "likelist": [{ "likeId": 1, "nickName": "user1" }],
+      "nickName": "user1",
+      "temperature": 2,
+      "weather": "rain",
+      "weatherIcon": "10d",
+      "content": "안녕 안녕 #hi 헬로",
+      "hashTag": "hi",
+      "category": ["후드 집업", "가죽자켓", "컨버스", "운동화", "베레모"],
+      "userImage": "https://cdnimg.melon.co.kr/cm2/artistcrop/images/002/61/143/261143_20210325180240_500.jpg?61e575e8653e5920470a38d1482d7312/melon/optimize/90"
+    },
+    {
+      "boardId": 3,
+      "images": [
+        "https://cdn.peacedoorball.blog/wp-content/uploads/2024/01/iu-sends-uaenas-into-whiplash-with-her-new-bleached-hair-ahead-of-2024-comeback-something-big-is-coming.webp"
+      ],
+      "createDate": "2023-09-01 11:30:30",
+      "likeCount": 2,
+      "likelist": [
+        { "likeId": 1, "nickName": "user1" },
+        { "likeId": 2, "nickName": "user2" }
+      ],
+      "nickName": "user2",
+      "temperature": -4,
+      "weather": "cloud",
+      "weatherIcon": "03d",
+      "content": "안녕 안녕 #hi 헬로",
+      "hashTag": "hi",
+      "category": ["후드 집업", "가죽자켓", "컨버스", "운동화", "베레모"],
+      "userImage": "https://cdnimg.melon.co.kr/cm2/artistcrop/images/002/61/143/261143_20210325180240_500.jpg?61e575e8653e5920470a38d1482d7312/melon/optimize/90"
+    }
+  ]
+}
diff --git a/weatherfit_refactoring/src/Components/Atoms/Box/BoxStore.tsx b/weatherfit_refactoring/src/Components/Atoms/Box/BoxStore.tsx
index c019b93..6ac88a9 100644
--- a/weatherfit_refactoring/src/Components/Atoms/Box/BoxStore.tsx
+++ b/weatherfit_refactoring/src/Components/Atoms/Box/BoxStore.tsx
@@ -15,9 +15,8 @@ interface Props {
   onClickFunction?: MouseEventHandler<HTMLButtonElement> | undefined
   children?: React.ReactNode
 }
-//높이 조정도 필요하면 가져다 쓰세요
 
-export default function ButtonStore({
+export default function BoxStore({
   boxStyle,
   children,
   onClickFunction,
diff --git a/weatherfit_refactoring/src/Components/Atoms/Button/ButtonStore.tsx b/weatherfit_refactoring/src/Components/Atoms/Button/ButtonStore.tsx
index aa3ab71..be88b8b 100644
--- a/weatherfit_refactoring/src/Components/Atoms/Button/ButtonStore.tsx
+++ b/weatherfit_refactoring/src/Components/Atoms/Button/ButtonStore.tsx
@@ -11,7 +11,7 @@ export enum ButtonStyle {
   CATEGORY_BTN_CHECKED = 'CATEGORY_BTN_CHECKED',
   TEXT_BTN = 'TEXT_BTN',
   CONFIRM_BTN = 'CONFIRM_BTN',
-  CANCLE_BTN = "CANCLE_BTN",
+  CANCEL_BTN = 'CANCEL_BTN',
   CATEGORY_BTN_TOP = "CATEGORY_BTN_TOP",
 }
 
@@ -46,7 +46,8 @@ export default function ButtonStore({
       case ButtonStyle.DEFAULT_BTN_BLUE:
         return (
           <button
-            className={`${style} border bg-A8C6EC border-black rounded-2xl z-10`}              style={{ boxShadow: '7px 7px 1px' }}
+            className={`${style} border bg-A8C6EC border-black rounded-2xl z-10`}
+            style={{ boxShadow: '7px 7px 1px' }}
             onClick={onClickFunction}>
             {children}
           </button>
@@ -71,7 +72,7 @@ export default function ButtonStore({
       case ButtonStyle.CATEGORY_BTN_Y:
         return (
           <button
-            className={`${style} bg-yellow-200 border border-black rounded-2xl pb-[5px] px-1.5 py-0.5`}
+            className={`${style} bg-yellow-200 border border-black rounded-2xl px-2 py-0.5`}
             onClick={onClickFunction}>
             {children}
           </button>
@@ -79,7 +80,7 @@ export default function ButtonStore({
       case ButtonStyle.CATEGORY_BTN_CHECKED:
         return (
           <button
-            className={`${style} bg-blue-300 border border-blue-300 text-white rounded-2xl px-1.5 py-0.5`}
+            className={`${style} bg-blue-300 border border-blue-300 text-white rounded-2xl px-2 py-0.5`}
             onClick={onClickFunction}>
             {children}
           </button>
@@ -100,14 +101,14 @@ export default function ButtonStore({
             {children}
           </button>
         )
-        case ButtonStyle.CANCLE_BTN:
-          return (
-            <button
-              className={`${style} bg-yellow-200 border border-gray-500 rounded-[9px]`}
-              onClick={onClickFunction}>
-              {children}
-            </button>
-          )
+      case ButtonStyle.CANCEL_BTN:
+        return (
+          <button
+            className={`${style} bg-yellow-200 border border-gray-500 rounded-[9px]`}
+            onClick={onClickFunction}>
+            {children}
+          </button>
+        )
       case ButtonStyle.GOOGLE_BTN:
         return (
           <button
diff --git a/weatherfit_refactoring/src/Components/Atoms/Icon/IconStore.tsx b/weatherfit_refactoring/src/Components/Atoms/Icon/IconStore.tsx
index 4e845f1..f4226d8 100644
--- a/weatherfit_refactoring/src/Components/Atoms/Icon/IconStore.tsx
+++ b/weatherfit_refactoring/src/Components/Atoms/Icon/IconStore.tsx
@@ -1,5 +1,4 @@
 import Image from 'next/image'
-import { MouseEventHandler } from 'react'
 
 export enum IconStyle {
   MY_PROFILE = 'MY_PROFILE',
@@ -106,6 +105,7 @@ export default function IconStore({
             width={size}
             height={size}
             className={`${style}`}
+            onClick={onClickFunction}
           />
         )
       case IconStyle.UNLIKE:
@@ -116,6 +116,7 @@ export default function IconStore({
             width={size}
             height={size}
             className={`${style}`}
+            onClick={onClickFunction}
           />
         )
       case IconStyle.LIKE:
@@ -126,6 +127,7 @@ export default function IconStore({
             width={size}
             height={size}
             className={`${style}`}
+            onClick={onClickFunction}
           />
         )
       case IconStyle.TOGGLE:
@@ -156,6 +158,7 @@ export default function IconStore({
             width={size}
             height={size}
             className={`${style}`}
+            onClick={onClickFunction}
           />
         )
       case IconStyle.PREV2:
@@ -177,6 +180,7 @@ export default function IconStore({
             width={size}
             height={size}
             className={`${style}`}
+            onClick={onClickFunction}
           />
         )
       case IconStyle.SETTING:
@@ -198,6 +202,7 @@ export default function IconStore({
             width={size}
             height={size}
             className={`${style}`}
+            onClick={onClickFunction}
           />
         )
       case IconStyle.HIGHEST:
diff --git a/weatherfit_refactoring/src/Components/Molecules/DetailCategory.tsx b/weatherfit_refactoring/src/Components/Molecules/DetailCategory.tsx
new file mode 100644
index 0000000..225664f
--- /dev/null
+++ b/weatherfit_refactoring/src/Components/Molecules/DetailCategory.tsx
@@ -0,0 +1,62 @@
+'use client'
+
+import feedDummy from '../../../public/dummy_data/feed.json'
+import ButtonStore, { ButtonStyle } from '../Atoms/Button/ButtonStore'
+import { categories } from '../data/CategoryList'
+
+export default function DetailCategory(boardId: BOARDID) {
+  const id = boardId.boardId
+  const post = feedDummy.feed_data.find(post => post.boardId === Number(id))
+
+  if (!post) {
+    return <div>게시물이 삭제되었습니다.</div>
+  }
+
+  const findParentCategory = (subCategory: string): string | null => {
+    for (const [parentCategory, subCategories] of Object.entries(categories)) {
+      if (subCategories.includes(subCategory)) {
+        return parentCategory
+      }
+    }
+    return null
+  }
+
+  const categoryGroups: Record<string, string[]> = post.category.reduce(
+    (groups: Record<string, string[]>, subCategory) => {
+      const parentCategory = findParentCategory(subCategory)
+      if (parentCategory && !groups[parentCategory]) {
+        groups[parentCategory] = []
+      }
+      if (parentCategory) {
+        groups[parentCategory].push(subCategory)
+      }
+      return groups
+    },
+    {},
+  )
+
+  const handleSelectCategory = () => {
+    // 카테고리 선택한 거 누르면 검색된 페이지로 이동하게
+  }
+
+  return (
+    <div className="font-NanumSquareRound flex flex-col bg-stone-200 p-3 justify-center w-full">
+      {Object.entries(categoryGroups).map(
+        ([parentCategory, subCategories], index) => (
+          <div key={index} className="m-2 flex items-center">
+            <span className="font-bold text-[17px] mr-3">{parentCategory}</span>
+            {subCategories.map((subCategory, index) => (
+              <ButtonStore
+                key={index}
+                onClickFunction={handleSelectCategory}
+                buttonStyle={ButtonStyle.CATEGORY_BTN_Y}
+                style="mr-2 text-sm flex ">
+                {subCategory}
+              </ButtonStore>
+            ))}
+          </div>
+        ),
+      )}
+    </div>
+  )
+}
diff --git a/weatherfit_refactoring/src/Components/Molecules/DetailContent.tsx b/weatherfit_refactoring/src/Components/Molecules/DetailContent.tsx
new file mode 100644
index 0000000..a5b744c
--- /dev/null
+++ b/weatherfit_refactoring/src/Components/Molecules/DetailContent.tsx
@@ -0,0 +1,63 @@
+'use client'
+
+import feedDummy from '../../../public/dummy_data/feed.json'
+
+export default function DetailContent(boardId: BOARDID) {
+  const id = boardId.boardId
+  const post = feedDummy.feed_data.find(post => post.boardId === Number(id))
+
+  if (!post) {
+    return <div>게시물이 삭제되었습니다.</div>
+  }
+
+  const handleHashTagClick = (hashTag: string) => {
+    console.log('Clicked hashtag:', hashTag)
+  }
+
+  const extractAndStyleHashtags = (content: string) => {
+    const hashTagRegex = /#[^\s#]+/g
+    const splitContent = content.split(hashTagRegex)
+    const matchedHashTags = content.match(hashTagRegex) || []
+
+    const result: (string | JSX.Element)[] = []
+
+    splitContent.forEach((current, index) => {
+      const replacedContent = current
+        .replace(/\n/g, '<br />')
+        .replace(/ /g, '&nbsp;')
+
+      result.push(
+        <span
+          key={`content-${index}`}
+          dangerouslySetInnerHTML={{ __html: replacedContent }} // HTML 문자열을 설정하여 줄바꿈 인식
+        />,
+      )
+
+      if (index !== splitContent.length - 1) {
+        const currentHashTag = matchedHashTags[index]
+        const tagIndex = post.hashTag.indexOf(currentHashTag.slice(1))
+
+        result.push(
+          <span
+            key={`hashtag-${index}`}
+            className={tagIndex !== -1 ? 'text-blue-400 cursor-pointer' : ''}
+            onClick={() => handleHashTagClick(currentHashTag)}>
+            {currentHashTag}
+          </span>,
+        )
+      }
+    })
+
+    return result
+  }
+
+  return (
+    <div className="font-NanumSquareRound flex space-x-3">
+      <div className="font-semibold">{post.nickName}</div>
+      {/* 추후에 더보기 접기 버튼 넣어야 할 듯 */}
+      <div className="break-all text-justify w-full">
+        {extractAndStyleHashtags(post.content)}
+      </div>
+    </div>
+  )
+}
diff --git a/weatherfit_refactoring/src/Components/Molecules/DetailEtc.tsx b/weatherfit_refactoring/src/Components/Molecules/DetailEtc.tsx
new file mode 100644
index 0000000..0d3bcd3
--- /dev/null
+++ b/weatherfit_refactoring/src/Components/Molecules/DetailEtc.tsx
@@ -0,0 +1,44 @@
+'use client'
+
+import { useState } from 'react'
+import IconStore, { IconStyle } from '../Atoms/Icon/IconStore'
+import ButtonStore, { ButtonStyle } from '../Atoms/Button/ButtonStore'
+
+interface DetailEtcProps {
+  handleEdit: () => void
+  handleDelete: () => void
+}
+
+export default function DetailEtc({
+  handleEdit,
+  handleDelete,
+}: DetailEtcProps) {
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false)
+
+  return (
+    <>
+      <IconStore
+        iconStyle={IconStyle.ETC}
+        style="cursor-pointer"
+        size={25}
+        onClickFunction={() => setIsDropdownOpen(!isDropdownOpen)}
+      />
+      {isDropdownOpen && (
+        <div className="absolute top-[160px] right-[12px] bg-white flex flex-col space-y-1 font-NanumSquareRound text-sm">
+          <ButtonStore
+            buttonStyle={ButtonStyle.TEXT_BTN}
+            onClickFunction={handleEdit}
+            style="hover:bg-gray-100 px-2 py-1"
+            btnText="수정"
+          />
+          <ButtonStore
+            buttonStyle={ButtonStyle.TEXT_BTN}
+            onClickFunction={handleDelete}
+            style="hover:bg-gray-100 px-2 py-1"
+            btnText="삭제"
+          />
+        </div>
+      )}
+    </>
+  )
+}
diff --git a/weatherfit_refactoring/src/Components/Molecules/DetailImge.tsx b/weatherfit_refactoring/src/Components/Molecules/DetailImge.tsx
new file mode 100644
index 0000000..368159a
--- /dev/null
+++ b/weatherfit_refactoring/src/Components/Molecules/DetailImge.tsx
@@ -0,0 +1,51 @@
+'use client'
+
+import Image from 'next/image'
+import feedDummy from '../../../public/dummy_data/feed.json'
+import IconStore, { IconStyle } from '../Atoms/Icon/IconStore'
+import { useState } from 'react'
+import { handlePrevious, handleNext } from '@/utils/function/utilFunction'
+
+export default function DetailImage(boardId: BOARDID) {
+  const id = boardId.boardId
+  const post = feedDummy.feed_data.find(post => post.boardId === Number(id))
+  const [index, setIndex] = useState(0)
+
+  if (!post) {
+    return <div>게시물이 삭제되었습니다.</div>
+  }
+
+  const onPreviousClick = () => handlePrevious(setIndex, post.images.length)
+  const onNextClick = () => handleNext(setIndex, post.images.length)
+
+  return (
+    <div className="flex justify-center items-center">
+      <div className="relative w-[250px] h-[350px]">
+        <Image
+          key={post.images[index]}
+          src={post.images[index]}
+          layout="fill"
+          objectFit="cover"
+          // width={100}
+          // height={100}
+          alt={`image-${index}`}
+          className="rounded-xl m-2"
+        />
+      </div>
+      {post.images.length > 1 && (
+        <div className="absolute flex w-full cursor-pointer px-10 flex justify-between items-center">
+          <IconStore
+            iconStyle={IconStyle.PREV}
+            size={15}
+            onClickFunction={onPreviousClick}
+          />
+          <IconStore
+            iconStyle={IconStyle.NEXT}
+            size={15}
+            onClickFunction={onNextClick}
+          />
+        </div>
+      )}
+    </div>
+  )
+}
diff --git a/weatherfit_refactoring/src/Components/Molecules/DetailProfile.tsx b/weatherfit_refactoring/src/Components/Molecules/DetailProfile.tsx
new file mode 100644
index 0000000..16d924f
--- /dev/null
+++ b/weatherfit_refactoring/src/Components/Molecules/DetailProfile.tsx
@@ -0,0 +1,30 @@
+'use client'
+
+import Image from 'next/image'
+import feedDummy from '../../../public/dummy_data/feed.json'
+
+export default function DetailProfile(boardId: BOARDID) {
+  const id = boardId.boardId
+  const post = feedDummy.feed_data.find(post => post.boardId === Number(id))
+
+  if (!post) {
+    return <div>게시물이 삭제되었습니다.</div>
+  }
+
+  return (
+    <div className="flex items-center font-NanumSquareRound mt-5">
+      <Image
+        src={post.userImage}
+        width={50}
+        height={50}
+        alt="profile"
+        className="rounded-full"
+      />
+      <div className="flex-col ml-3 pb-1">
+        <p className="text-lg">{post.nickName}</p>
+        <p className="text-xs text-gray-400">@user_one</p>
+        {/* <p className="text-xs text-gray-400">여기 아이디 들어가면 되려나</p> */}
+      </div>
+    </div>
+  )
+}
diff --git a/weatherfit_refactoring/src/Components/Molecules/FeedContent.tsx b/weatherfit_refactoring/src/Components/Molecules/FeedContent.tsx
index 02d886c..4914350 100644
--- a/weatherfit_refactoring/src/Components/Molecules/FeedContent.tsx
+++ b/weatherfit_refactoring/src/Components/Molecules/FeedContent.tsx
@@ -2,6 +2,7 @@
 import Image from "next/image"
 import IconStore, { IconStyle } from "../Atoms/Icon/IconStore"
 import { useState } from "react";
+import Link from 'next/link'
 
 interface Props {
     feedData : FEEDDATA
@@ -34,14 +35,16 @@ export default function FeedContent( {feedData} : Props ) {
                         <IconStore iconStyle={IconStyle.ETC} size={30}/>
                     </div>
                 </div>
-                <div className=" relative m-auto w-[90%] h-[218px]">
+                <Link href={`/detail/${boardId}`}>
+                  <div className=" relative m-auto w-[90%] h-[218px]">
                     <Image 
                     src={feedData.images.imageUrl}
                     alt="코디 사진"
                     fill
                     className="border border-black rounded-xl"
                     />
-                </div>
+                  </div>
+                </Link>
                 <div className="flex justify-between m-auto w-[90%] py-2">
                     <div className="flex">
                         <div className="relative">
@@ -67,4 +70,4 @@ export default function FeedContent( {feedData} : Props ) {
             </div>
         }
     </>)
-}
\ No newline at end of file
+}
diff --git a/weatherfit_refactoring/src/Components/Molecules/Header.tsx b/weatherfit_refactoring/src/Components/Molecules/Header.tsx
index 4fe92b7..271c2ff 100644
--- a/weatherfit_refactoring/src/Components/Molecules/Header.tsx
+++ b/weatherfit_refactoring/src/Components/Molecules/Header.tsx
@@ -23,33 +23,35 @@ export default function Header({
   onClickFunction2,
 }: Props) {
   return (
-    <div className="flex items-center justify-between h-[50px] my-[10px]">
+    <div className="relative flex items-center justify-between h-[50px] my-1 pb-1">
       <IconStore
         iconStyle={IconStyle.PREV2}
         size={20}
-        style={'ml-[10px] cursor-pointer'}
+        style="ml-[10px] cursor-pointer"
         onClickFunction={() => window.history.back()}
       />
       <BoxStore
         boxStyle={BoxStyle.BOX_BLUE}
-        children={title}
-        style="px-2 h-[30px] font-neurimboGothic text-[22px] pb-[5px] shadow-[7px_7px_1px] flex items-center"
-      />
+        style="absolute left-1/2 transform -translate-x-1/2 px-2 h-[30px] font-neurimboGothic text-[22px] pb-[7px] shadow-[7px_7px_1px] flex items-center">
+        {title}
+      </BoxStore>
       {iconStyleCase ? (
         <IconStore
           iconStyle={iconStyleCase}
           size={17}
-          style={'mr-[10px] cursor-pointer'}
+          style="mr-[10px] cursor-pointer"
           onClickFunction={onClickFunction2}
         />
       ) : buttonStyleCase ? (
         <ButtonStore
           buttonStyle={buttonStyleCase}
-          style={'mr-[10px] font-NanumSquareRound text-xs'}
+          style="mr-[10px] font-NanumSquareRound text-xs"
           btnText={btnText}
           onClickFunction={onClickFunction}
         />
-      ) : null}
+      ) : (
+        <div className="hidden"></div>
+      )}
     </div>
   )
 }
diff --git a/weatherfit_refactoring/src/Components/Molecules/LikeAndComment.tsx b/weatherfit_refactoring/src/Components/Molecules/LikeAndComment.tsx
new file mode 100644
index 0000000..4c56a57
--- /dev/null
+++ b/weatherfit_refactoring/src/Components/Molecules/LikeAndComment.tsx
@@ -0,0 +1,10 @@
+import IconStore, { IconStyle } from '../Atoms/Icon/IconStore'
+
+export default function LikeAndComment() {
+  return (
+    <div className="flex space-x-3">
+      <IconStore iconStyle={IconStyle.UNLIKE} size={25} />
+      <IconStore iconStyle={IconStyle.COMMENTS} size={25} />
+    </div>
+  )
+}
diff --git a/weatherfit_refactoring/src/Components/Molecules/Select.tsx b/weatherfit_refactoring/src/Components/Molecules/Select.tsx
index 5be898c..5255c62 100644
--- a/weatherfit_refactoring/src/Components/Molecules/Select.tsx
+++ b/weatherfit_refactoring/src/Components/Molecules/Select.tsx
@@ -4,7 +4,7 @@
 import IconStore, { IconStyle } from '../Atoms/Icon/IconStore'
 import ButtonStore, { ButtonStyle } from '../Atoms/Button/ButtonStore'
 import { useState } from 'react'
-import { useStore } from '../Atoms/Store'
+import { useStore } from '../../Store/Store'
 
 interface Props {
   category: string
@@ -63,9 +63,9 @@ export default function Select({ category, subCategories, onSelect }: Props) {
               }
               key={index}
               style="mr-2 my-1.5"
-              children={subCategory}
-              onClickFunction={() => selectSubCategory(subCategory)}
-            />
+              onClickFunction={() => selectSubCategory(subCategory)}>
+              {subCategory}
+            </ButtonStore>
           ))}
         </div>
       )}
diff --git a/weatherfit_refactoring/src/Components/Molecules/TextAreaMolecule.tsx b/weatherfit_refactoring/src/Components/Molecules/TextAreaMolecule.tsx
index 979b7c8..68f149b 100644
--- a/weatherfit_refactoring/src/Components/Molecules/TextAreaMolecule.tsx
+++ b/weatherfit_refactoring/src/Components/Molecules/TextAreaMolecule.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useRef } from 'react'
 import TextArea from '../Atoms/TextArea'
-import { useStore } from '../Atoms/Store'
+import { useStore } from '../../Store/Store'
 import extractHashtags from '@/utils/function/utilFunction'
 
 export default function TextAreaMolecule() {
diff --git a/weatherfit_refactoring/src/Components/Molecules/UploadWeather.tsx b/weatherfit_refactoring/src/Components/Molecules/UploadWeather.tsx
index 76e1cb2..32c19a2 100644
--- a/weatherfit_refactoring/src/Components/Molecules/UploadWeather.tsx
+++ b/weatherfit_refactoring/src/Components/Molecules/UploadWeather.tsx
@@ -1,8 +1,19 @@
+import { WeatherIcon } from '@/Store/WeatherIcon'
+import Image from 'next/image'
+
 export default function UploadWeather() {
+  const { weatherIcon } = WeatherIcon()
+
   return (
     <div className="flex mb-3 items-center w-fit">
       <p className="font-gmarketsans pt-[5px] mr-3 text-sm">업로드 날씨</p>
-      {/* Weather API에서 날씨 아이콘 가져와서 보여주기 */}
+      <Image
+        src={`https://openweathermap.org/img/wn/${weatherIcon}.png`}
+        alt="날씨"
+        width={20}
+        height={20}
+        loading="lazy"
+      />
     </div>
   )
 }
diff --git a/weatherfit_refactoring/src/Components/Molecules/WeatherNavbar.tsx b/weatherfit_refactoring/src/Components/Molecules/WeatherNavbar.tsx
index 3428913..6092868 100644
--- a/weatherfit_refactoring/src/Components/Molecules/WeatherNavbar.tsx
+++ b/weatherfit_refactoring/src/Components/Molecules/WeatherNavbar.tsx
@@ -1,24 +1,52 @@
 "use client"
-import { useEffect, useState } from "react";
-import Image from "next/image";
+import { useEffect, useState } from 'react'
+import Image from 'next/image'
 //Zustand
-import { WeatherIcon } from "@/Store/WeatherIcon";
-import { WeatherTemp } from "@/Store/WeatherTemp";
-import { WeatherTempMax } from "@/Store/WeatherMaxTemp";
-import { WeatherTempMin } from "@/Store/WeatherMinTemp";
-
+import { WeatherIcon } from '@/Store/WeatherIcon'
+import { WeatherTemp } from '@/Store/WeatherTemp'
+import { WeatherTempMax } from '@/Store/WeatherMaxTemp'
+import { WeatherTempMin } from '@/Store/WeatherMinTemp'
 
 export default function WeatherNavbar() {
-    const API_KEY = "fa3eba61f243af3e8e69086462763172";
-    const KAKAO_API_KEY = "3a6c3035c801405eaa71ebb9dc7f474b";
+  const API_KEY = 'fa3eba61f243af3e8e69086462763172'
+  const KAKAO_API_KEY = '3a6c3035c801405eaa71ebb9dc7f474b'
+
+  const { temperature, setTemp } = WeatherTemp()
+  const { temperatureMin, setTempMin } = WeatherTempMin()
+  const { temperatureMax, setTempMax } = WeatherTempMax()
+  const { weatherIcon, setIcon } = WeatherIcon()
+
+  const [weat, setWeat] = useState<string | undefined>()
+  const [address, setAddress] = useState<string | undefined>()
+
+  useEffect(() => {
+    const getLocation = async () => {
+      try {
+        const position = await new Promise<GeolocationPosition>(
+          (resolve, reject) => {
+            navigator.geolocation.getCurrentPosition(resolve, reject)
+          },
+        )
+
+        const latitude = position.coords.latitude
+        // console.log("위도", latitude);
+        const longitude = position.coords.longitude
+        // console.log("경도", longitude);
 
-    const { temperature, setTemp } = WeatherTemp();
-    const { temperatureMin, setTempMin } = WeatherTempMin();
-    const { temperatureMax, setTempMax } = WeatherTempMax();
-    const { weatherIcon, setIcon } = WeatherIcon();
+        const weatherResponse = await fetch(
+          `https://api.openweathermap.org/data/2.5/weather?lat=${latitude}&lon=${longitude}&appid=${API_KEY}&units=metric`,
+        )
+        const weatherData = await weatherResponse.json()
+        setTemp(weatherData.main.temp.toFixed(1))
+        // max = weatherData.main.temp_max.toFixed(1);
+        setTempMax(weatherData.main.temp_max.toFixed(1))
+        setTempMin(weatherData.main.temp_min.toFixed(1))
+        setWeat(weatherData.weather[0].main)
+        setIcon(weatherData.weather[0].icon)
 
-    const [weat, setWeat] = useState<string | undefined>();
-    const [address, setAddress] = useState<string | undefined>();
+
+        console.log('데이터', weatherData)
+        // console.log(`온도 : ${temp} ,최고온도 ${max},최저온도 ${min}, 날씨 : ${weat}`);
 
     useEffect(()=>{
         const getLocation = async () => {
@@ -72,26 +100,26 @@ export default function WeatherNavbar() {
           getLocation();
     }, []);
 
-
-    return (
-        <div className="flex justify-between text-[11px]">
-            <div className="flex">
-                  <Image  
-                  src={`https://openweathermap.org/img/wn/${weatherIcon}.png`}
-                  alt="weatherIcon"
-                  width={40}
-                  height={40}
-                  loading="lazy"
-                  />
-                <span className=" font-gmarketsans font-thin px-0 pt-[12px]">{temperature}℃</span>
-            </div>
-            <div className="px-1 pt-[10px]">
-                <span className=" font-gmarketsans font-thin px-1">최고 {temperatureMax}℃</span>
-                <span className=" font-gmarketsans font-thin px-1">최저 {temperatureMin}℃</span>
-            </div>
-        </div>
-    )
-
-    
-
-}
\ No newline at end of file
+  return (
+    <div className="flex justify-between items-center text-[12px] border-t border-b border-slate-100 px-2">
+      <div className="flex items-center">
+        <Image
+          src={`https://openweathermap.org/img/wn/${weatherIcon}.png`}
+          alt="weatherIcon"
+          width={50}
+          height={50}
+          loading="lazy"
+        />
+        <span className="font-gmarketsans font-thin pt-1">{temperature}℃</span>
+      </div>
+      <div className="px-1">
+        <span className="font-gmarketsans font-thin px-1">
+          최고 {temperatureMax}℃
+        </span>
+        <span className="font-gmarketsans font-thin px-1">
+          최저 {temperatureMin}℃
+        </span>
+      </div>
+    </div>
+  )
+}
diff --git a/weatherfit_refactoring/src/Components/Organisms/DetailOrganism.tsx b/weatherfit_refactoring/src/Components/Organisms/DetailOrganism.tsx
new file mode 100644
index 0000000..4547a31
--- /dev/null
+++ b/weatherfit_refactoring/src/Components/Organisms/DetailOrganism.tsx
@@ -0,0 +1,17 @@
+import DetailContent from '@/Components/Molecules/DetailContent'
+import DetailImage from '@/Components/Molecules/DetailImge'
+import DetailCategory from '../Molecules/DetailCategory'
+import LikeAndComment from '../Molecules/LikeAndComment'
+
+export default function DetailOrganism({ boardId }: BOARDID) {
+  return (
+    <div className="space-y-5">
+      <div className="mx-5 space-y-3">
+        <DetailImage boardId={boardId} />
+        <LikeAndComment />
+        <DetailContent boardId={boardId} />
+      </div>
+      <DetailCategory boardId={boardId} />
+    </div>
+  )
+}
diff --git a/weatherfit_refactoring/src/Components/Organisms/DetailProfileOrganism.tsx b/weatherfit_refactoring/src/Components/Organisms/DetailProfileOrganism.tsx
new file mode 100644
index 0000000..91ac019
--- /dev/null
+++ b/weatherfit_refactoring/src/Components/Organisms/DetailProfileOrganism.tsx
@@ -0,0 +1,78 @@
+'use client'
+
+import { usePathname, useRouter } from 'next/navigation'
+import DetailEtc from '../Molecules/DetailEtc'
+import DetailProfile from '../Molecules/DetailProfile'
+import Swal from 'sweetalert2'
+
+export default function DetailProfileOrganism({ boardId }: BOARDID) {
+  const router = useRouter()
+  const currentUrl = usePathname()
+
+  const handleEdit = () => {
+    router.push(`${currentUrl}/edit`)
+  }
+
+  const handleDelete = () => {
+    Swal.fire({
+      title: '게시물 삭제',
+      text: '게시물을 삭제하시겠습니까?',
+      icon: 'warning',
+      showCancelButton: true,
+      confirmButtonColor: '#3085d6',
+      cancelButtonColor: '#d33',
+      confirmButtonText: '삭제',
+      cancelButtonText: '취소',
+      customClass: {
+        popup: 'w-[275px] font-NanumSquareRound',
+        icon: 'size-13',
+        title: 'text-xl',
+      },
+    }).then(async result => {
+      if (result.isConfirmed) {
+        try {
+          const response = await fetch(
+            `https://www.jerneithe.site/board/delete/${boardId}`,
+            {
+              method: 'DELETE',
+              headers: {
+                // Authorization: 'Bearer ' + logintoken,
+                Authorization:
+                  'Bearer eyJhbGciOiJIUzI1NiJ9.eyJpYXQiOjE3MDY3OTA5MDEsImV4cCI6MTcwNjgwMTcwMSwic3ViIjoi7YWM7Iqk7YSwNTUifQ.sdm2nHun06cOIeWzXFv8xSbuuhY_yCsiRT7Upu1vtIs',
+              },
+            },
+          )
+          const data = await response.json()
+          console.log(data.result)
+          if (response.ok) {
+            Swal.fire({
+              title: '삭제 완료',
+              text: '게시물이 성공적으로 삭제되었습니다.',
+              icon: 'success',
+              confirmButtonColor: '#3085d6',
+              confirmButtonText: '확인',
+              customClass: {
+                // popup: 'w-[275px] font-NanumSquareRound',
+                // icon: 'size-13',
+                // title: 'text-xl',
+                // 커스텀 하기
+              },
+            }).then(() => {
+              router.push('/feed')
+            })
+          }
+        } catch (error) {
+          console.error('Error: ', error)
+        }
+      }
+    })
+  }
+
+  return (
+    <div className="flex justify-between items-center mx-5 ">
+      <DetailProfile boardId={boardId} />
+      {/* 게시글 작성자와 로그인 유저 같을 때만 보여주기 */}
+      <DetailEtc handleEdit={handleEdit} handleDelete={handleDelete} />
+    </div>
+  )
+}
diff --git a/weatherfit_refactoring/src/Components/Organisms/EditHeader.tsx b/weatherfit_refactoring/src/Components/Organisms/EditHeader.tsx
new file mode 100644
index 0000000..e0fd01e
--- /dev/null
+++ b/weatherfit_refactoring/src/Components/Organisms/EditHeader.tsx
@@ -0,0 +1,65 @@
+'use client'
+
+import { ButtonStyle } from '../Atoms/Button/ButtonStore'
+import Header from '../Molecules/Header'
+import { useStore } from '../../Store/Store'
+
+export default function UploadHeader() {
+  const {
+    content,
+    hashTags,
+    selectedImages,
+    selectedSubCategories,
+    deletedImages,
+  } = useStore()
+  const subCategoriesOnly = Object.values(selectedSubCategories).flat() // 하위 카테고리들만 저장
+
+  const handleOnClick = async () => {
+    try {
+      const formData = new FormData()
+      const boardData = {
+        hashTag: hashTags,
+        category: subCategoriesOnly,
+        content,
+        deletedImages,
+      }
+
+      formData.append('board', JSON.stringify(boardData))
+      selectedImages.forEach(image => {
+        formData.append('images', image)
+      })
+
+      const response = await fetch(`https://www.jerneithe.site/board/edit/1`, {
+        method: 'PATCH',
+        body: formData,
+        headers: {
+          'Content-Type': 'multipart/form-data',
+          // Authorization: 'Bearer ' + logintoken,
+          Authorization:
+            'Bearer eyJhbGciOiJIUzI1NiJ9.eyJpYXQiOjE3MDU2NjMwNDMsImV4cCI6MTcwNTY3Mzg0Mywic3ViIjoi7YWM7Iqk7YSwNTUifQ.3I1pZDJYZO2a7lOypu6DegBZ5DuzKYQttbP49U9g1Oo',
+        },
+      })
+
+      console.log(response)
+      console.log('수정 버튼 클릭')
+      console.log('content: ', content) //ok
+      console.log('hashTag: ', hashTags) //ok
+      const images = formData.getAll('images')
+      console.log('images: ', images)
+      console.log('selected categories', subCategoriesOnly)
+    } catch (error) {
+      console.error(error)
+    }
+  }
+
+  return (
+    <>
+      <Header
+        title="수정하기"
+        buttonStyleCase={ButtonStyle.TEXT_BTN}
+        btnText="완료"
+        onClickFunction={handleOnClick}
+      />
+    </>
+  )
+}
diff --git a/weatherfit_refactoring/src/Components/Organisms/ExistingImages.tsx b/weatherfit_refactoring/src/Components/Organisms/ExistingImages.tsx
new file mode 100644
index 0000000..2d49b85
--- /dev/null
+++ b/weatherfit_refactoring/src/Components/Organisms/ExistingImages.tsx
@@ -0,0 +1,39 @@
+// import InputStore, { InputStyle } from '../Atoms/Input/InputStore'
+// import { ChangeEvent, useCallback, useState } from 'react'
+// import { useStore } from '../Atoms/Store'
+// import ArrayImage from '../Molecules/ArrayImage'
+
+// export default function ExistingImages() {
+//       const [existingImages, setExistingImages] =
+//         useState<Image[]>(initialImages)
+
+//   const removeImage = (index: number, id: number) => {
+//     // if (selectedImages) {
+//     //   const newImages = [...selectedImages]
+//     //   newImages.splice(index, 1)
+//     //   setSelectedImages(newImages)
+//     //   handleImagesSelected(newImages)
+//       // }
+//       if (existingImages) {
+//         onDeleteImage(id) // 상위 컴포넌트에 삭제된 이미지의 URL 전달
+//         const newImages = [...existingImages]
+//         newImages.splice(index, 1)
+//         setExistingImages(newImages)
+//         onExistingImagesSelected?.(newImages)
+//       }
+//   }
+
+//   return (
+//     <>
+//       {existingImages &&
+//         Array.from(existingImages).map((image, index) => (
+//           <ArrayImage
+//             key={index}
+//             index={index}
+//             imageUrl={image.imageUrl}
+//             removeImage={removeImage}
+//           />
+//         ))}
+//     </>
+//   )
+// }
diff --git a/weatherfit_refactoring/src/Components/Organisms/FeedContents.tsx b/weatherfit_refactoring/src/Components/Organisms/FeedContents.tsx
index 421e3ed..f8363c3 100644
--- a/weatherfit_refactoring/src/Components/Organisms/FeedContents.tsx
+++ b/weatherfit_refactoring/src/Components/Organisms/FeedContents.tsx
@@ -32,4 +32,4 @@ export default async function FeedContents (){
 
         })}
     </div>)
-}
\ No newline at end of file
+}
diff --git a/weatherfit_refactoring/src/Components/Organisms/ImageUpload.tsx b/weatherfit_refactoring/src/Components/Organisms/ImageUpload.tsx
index c9dd7cb..35d9724 100644
--- a/weatherfit_refactoring/src/Components/Organisms/ImageUpload.tsx
+++ b/weatherfit_refactoring/src/Components/Organisms/ImageUpload.tsx
@@ -1,10 +1,10 @@
 import InputStore, { InputStyle } from '../Atoms/Input/InputStore'
-import { ChangeEvent, useCallback } from 'react'
-import { useStore } from '../Atoms/Store'
+import { ChangeEvent, useCallback, useState } from 'react'
+import { useStore } from '../../Store/Store'
 import ArrayImage from '../Molecules/ArrayImage'
 
 export default function ImageUpload() {
-  const { selectedImages, setSelectedImages } = useStore()
+  const { selectedImages, setSelectedImages, setDeletedImages } = useStore()
 
   const handleImagesSelected = useCallback((files: File[] | null) => {
     setSelectedImages(files ? Array.from(files) : [])
@@ -28,18 +28,36 @@ export default function ImageUpload() {
     }
   }
 
-  const removeImage = (index: number) => {
+  const removeImage = (index: number, id?: number) => {
     if (selectedImages) {
       const newImages = [...selectedImages]
       newImages.splice(index, 1)
       setSelectedImages(newImages)
       handleImagesSelected(newImages)
     }
+    // else if (existingImages) {
+    //   if (id != undefined) {
+    //     setDeletedImages(id) // 상위 컴포넌트에 삭제된 이미지의 URL 전달
+    //   }
+    //   const newImages = [...existingImages]
+    //   newImages.splice(index, 1)
+    //   setExistingImages(newImages)
+    //   onExistingImagesSelected?.(newImages)
+    // }
   }
 
   return (
     <div>
       <div className="flex items-center w-full overflow-x-auto overflow-y-hidden whitespace-nowrap">
+        {/* {existingImages &&
+          Array.from(existingImages).map((image, index) => (
+            <ArrayImage
+              key={index}
+              index={index}
+              imageUrl={image.imageUrl}
+              removeImage={removeImage}
+            />
+          ))} */}
         {selectedImages &&
           Array.from(selectedImages).map((image, index) => (
             <ArrayImage
diff --git a/weatherfit_refactoring/src/Components/Organisms/SelectCategory.tsx b/weatherfit_refactoring/src/Components/Organisms/SelectCategory.tsx
index 91884af..947a68b 100644
--- a/weatherfit_refactoring/src/Components/Organisms/SelectCategory.tsx
+++ b/weatherfit_refactoring/src/Components/Organisms/SelectCategory.tsx
@@ -1,7 +1,7 @@
 import Select from '../Molecules/Select'
-import { categories } from '@/Components/Atoms/CategoryList'
+import { categories } from '@/Components/data/CategoryList'
 import { useCallback } from 'react'
-import { useStore } from '../Atoms/Store'
+import { useStore } from '../../Store/Store'
 
 export default function SelectCategory() {
   const { initialSubCategories, setSelectedSubCategories } = useStore()
diff --git a/weatherfit_refactoring/src/Components/Organisms/UploadHeader.tsx b/weatherfit_refactoring/src/Components/Organisms/UploadHeader.tsx
index 177f0e8..5eff5e0 100644
--- a/weatherfit_refactoring/src/Components/Organisms/UploadHeader.tsx
+++ b/weatherfit_refactoring/src/Components/Organisms/UploadHeader.tsx
@@ -1,11 +1,15 @@
 import { ButtonStyle } from '../Atoms/Button/ButtonStore'
 import Header from '../Molecules/Header'
-import { useStore } from '../Atoms/Store'
+import { useStore } from '../../Store/Store'
+import { WeatherIcon } from '@/Store/WeatherIcon'
+import { WeatherTemp } from '@/Store/WeatherTemp'
 
 export default function UploadHeader() {
   const { content, hashTags, selectedImages, selectedSubCategories } =
     useStore()
   const subCategoriesOnly = Object.values(selectedSubCategories).flat() // 하위 카테고리들만 저장
+  const { weatherIcon } = WeatherIcon()
+  const { temperature } = WeatherTemp()
 
   const handleOnClick = async () => {
     try {
@@ -14,10 +18,8 @@ export default function UploadHeader() {
         hashTag: hashTags,
         category: subCategoriesOnly,
         content,
-        // temperature: usetemp,
-        // weatherIcon: `https://openweathermap.org/img/wn/${icon}.png`,
-        temperature: 2,
-        weatherIcon: 'test.jpeg',
+        temperature,
+        weatherIcon: `https://openweathermap.org/img/wn/${weatherIcon}.png`,
       }
 
       formData.append('board', JSON.stringify(boardData))
@@ -32,7 +34,7 @@ export default function UploadHeader() {
           'Content-Type': 'multipart/form-data',
           // Authorization: 'Bearer ' + logintoken,
           Authorization:
-            'Bearer eyJhbGciOiJIUzI1NiJ9.eyJpYXQiOjE3MDU2NjMwNDMsImV4cCI6MTcwNTY3Mzg0Mywic3ViIjoi7YWM7Iqk7YSwNTUifQ.3I1pZDJYZO2a7lOypu6DegBZ5DuzKYQttbP49U9g1Oo',
+            'Bearer eyJhbGciOiJIUzI1NiJ9.eyJpYXQiOjE3MDY3OTA5MDEsImV4cCI6MTcwNjgwMTcwMSwic3ViIjoi7YWM7Iqk7YSwNTUifQ.sdm2nHun06cOIeWzXFv8xSbuuhY_yCsiRT7Upu1vtIs',
         },
       })
 
diff --git a/weatherfit_refactoring/src/Components/Atoms/CategoryList.ts b/weatherfit_refactoring/src/Components/data/CategoryList.ts
similarity index 100%
rename from weatherfit_refactoring/src/Components/Atoms/CategoryList.ts
rename to weatherfit_refactoring/src/Components/data/CategoryList.ts
diff --git a/weatherfit_refactoring/src/Components/Atoms/Store.ts b/weatherfit_refactoring/src/Store/Store.ts
similarity index 72%
rename from weatherfit_refactoring/src/Components/Atoms/Store.ts
rename to weatherfit_refactoring/src/Store/Store.ts
index f826ff0..be58921 100644
--- a/weatherfit_refactoring/src/Components/Atoms/Store.ts
+++ b/weatherfit_refactoring/src/Store/Store.ts
@@ -1,5 +1,5 @@
 import { create } from 'zustand'
-import { categories } from './CategoryList'
+import { categories } from '../Components/data/CategoryList'
 
 interface State {
   content: string
@@ -12,6 +12,10 @@ interface State {
   setSelectedSubCategories: (category: string, subCategories: string[]) => void
   initialSubCategories: string[][]
   setInitialSubCategories: () => void
+  deletedImages: number[]
+  setDeletedImages: (imageId: number) => void
+  // existingImages: Image[]
+  // setExistingImages: (images: Image[]) => void
 }
 
 export const useStore = create<State>(set => ({
@@ -38,4 +42,13 @@ export const useStore = create<State>(set => ({
       ...state,
       initialSubCategories: Array(Object.entries(categories).length).fill([]),
     })),
+  deletedImages: [],
+  setDeletedImages(imageId: number) {
+    set(state => ({
+      deletedImages: [...state.deletedImages, imageId],
+    }))
+  },
+  // existingImages: [],
+  // setExistingImages: (existingImages: Image[]) =>
+  //   set(state => ({ ...state, existingImages })),
 }))
diff --git a/weatherfit_refactoring/src/app/detail/[id]/edit/page.tsx b/weatherfit_refactoring/src/app/detail/[id]/edit/page.tsx
new file mode 100644
index 0000000..7f0135c
--- /dev/null
+++ b/weatherfit_refactoring/src/app/detail/[id]/edit/page.tsx
@@ -0,0 +1,20 @@
+import EditHeader from '@/Components/Organisms/EditHeader'
+
+export default function Edit() {
+  return (
+    <div className="h-screen">
+      {/* 헤더 들어가야 함*/}
+      <EditHeader />
+      {/* 디자인에 있는 날씨 바 없어도 될 듯..?*/}
+      <div className="mx-5 h-full">
+        <div className="flex-col items-center justify-center mb-7">
+          {/* <UploadWeather /> */}
+          {/* <ImageUpload /> */}
+        </div>
+        {/* <TextAreaMolecule /> */}
+        <hr />
+        {/* <SelectCategory /> */}
+      </div>
+    </div>
+  )
+}
diff --git a/weatherfit_refactoring/src/app/detail/[id]/page.tsx b/weatherfit_refactoring/src/app/detail/[id]/page.tsx
new file mode 100644
index 0000000..c3c099f
--- /dev/null
+++ b/weatherfit_refactoring/src/app/detail/[id]/page.tsx
@@ -0,0 +1,19 @@
+import Header from '@/Components/Molecules/Header'
+import WeatherNavbar from '@/Components/Molecules/WeatherNavbar'
+import DetailOrganism from '@/Components/Organisms/DetailOrganism'
+import DetailProfileOrganism from '@/Components/Organisms/DetailProfileOrganism'
+
+export default function Detail({ params }: { params: { id: string } }) {
+  const { id: boardId } = params
+
+  return (
+    <div className="mb-7">
+      <Header title="옷늘날씨" />
+      <WeatherNavbar />
+      <div className="space-y-3">
+        <DetailProfileOrganism boardId={boardId} />
+        <DetailOrganism boardId={boardId} />
+      </div>
+    </div>
+  )
+}
diff --git a/weatherfit_refactoring/src/app/upload/page.tsx b/weatherfit_refactoring/src/app/upload/page.tsx
index 8ad760a..ed13e63 100644
--- a/weatherfit_refactoring/src/app/upload/page.tsx
+++ b/weatherfit_refactoring/src/app/upload/page.tsx
@@ -5,7 +5,6 @@ import TextAreaMolecule from '@/Components/Molecules/TextAreaMolecule'
 import SelectCategory from '@/Components/Organisms/SelectCategory'
 import UploadHeader from '@/Components/Organisms/UploadHeader'
 import UploadWeather from '@/Components/Molecules/UploadWeather'
-import ArrayImageOrganism from '@/Components/Organisms/ImageUpload'
 
 export default function Upload() {
   return (
diff --git a/weatherfit_refactoring/src/utils/function/utilFunction.ts b/weatherfit_refactoring/src/utils/function/utilFunction.ts
index c39ab3b..cee213d 100644
--- a/weatherfit_refactoring/src/utils/function/utilFunction.ts
+++ b/weatherfit_refactoring/src/utils/function/utilFunction.ts
@@ -1,4 +1,4 @@
-const extractHashtags = (content: string): string[] => {
+export const extractHashtags = (content: string): string[] => {
   const regex = /#(\S+)/g // # 다음에 공백이 아닌 모든 문자를 해시태그로 간주하는 정규식
   const matches = content.match(regex)
   if (matches) {
@@ -8,4 +8,22 @@ const extractHashtags = (content: string): string[] => {
   return []
 }
 
-export default extractHashtags
+export const handlePrevious = (
+  setIndex: (value: number | ((prevIndex: number) => number)) => void,
+  imagesLength: number,
+): void => {
+  setIndex((prevIndex: number) => {
+    if (prevIndex === 0) return imagesLength - 1
+    else return prevIndex - 1
+  })
+}
+
+export const handleNext = (
+  setIndex: (value: number | ((prevIndex: number) => number)) => void,
+  imagesLength: number,
+): void => {
+  setIndex((prevIndex: number) => {
+    if (prevIndex === imagesLength - 1) return 0
+    else return prevIndex + 1
+  })
+}