diff --git a/README.md b/README.md
index 488fbc69..d725604f 100644
--- a/README.md
+++ b/README.md
@@ -1,12 +1,89 @@
-# InvestMetic
-
-<p align="center">
-  <a href="https://6729e72ee61d8f57ca4790fb-aepxabjrdg.chromatic.com/">
-    <picture>
-      <source media="(prefers-color-scheme: dark)" srcset="https://user-images.githubusercontent.com/263385/199832481-bbbf5961-6a26-481d-8224-51258cce9b33.png">
-      <img src="https://user-images.githubusercontent.com/321738/63501763-88dbf600-c4cc-11e9-96cd-94adadc2fd72.png" alt="Storybook" width="400" />
-    </picture>
-    
-  </a>
-  
-</p>
+## investmetic
+
+![investmetic](https://github.com/user-attachments/assets/04760f5b-1c52-48ee-9bd4-763b947e1899)
+
+<div align="center">
+
+🔗 [investmetic](https://www.investmetic.co.kr/)
+
+**investmetic**은 **투자 매매 전략 공유 및
+중개소셜 플랫폼 서비스** 입니다.
+
+## 테스트 계정
+
+| **역할**     | **이메일**           | **비밀번호** |
+| ------------ | -------------------- | ------------ |
+| **투자자**   | investor@example.com | investor123  |
+| **트레이더** | trader@example.com   | trader123    |
+
+<br/>
+
+## 역할분담
+
+<div align="center">
+
+|                                                                       [<img src="https://github.com/user-attachments/assets/22fabdef-8b38-4cdb-b0d3-02a4234d6ff5" width="95" height="95"/>](https://github.com/devdeun)                                                                       | [<img src="https://github.com/user-attachments/assets/3483e2b6-2eac-419b-a7ed-e7e2306c0863" width="100" height="100"/>](https://github.com/nanafromjeju) |                                     [<img src="https://github.com/user-attachments/assets/3250fe8b-e818-4473-9a9e-9af70adaa017" width="100" height="100"/>](https://github.com/ssumanlife)                                     |    [<img src="https://github.com/user-attachments/assets/ce565244-e952-48d3-8429-f25b5781ece2" width="95" height="95"/>](https://github.com/kimpra2989)    |                           [<img src="https://github.com/user-attachments/assets/f57c7dc6-f8d4-43bc-be28-63d6d9c131a0" width="95" height="95"/>](https://github.com/HSjjs98)                            |
+| :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :------------------------------------------------------------------------------------------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :--------------------------------------------------------------------------------------------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: |
+|                                                                                                                            [👑 @Deun](https://github.com/devdeun)                                                                                                                             |                                                         [@Nana](https://github.com/nanafromjeju)                                                         |                                                                                            [@SuMin](https://github.com/ssumanlife)                                                                                             |                                                          [@Kimpra](https://github.com/kimpra2989)                                                          |                                                                                  [@James](https://github.com/HSjjs98)                                                                                  |
+| 프로젝트 초기 세팅 <br>(NextJS, 린트 및 Prettier, <br>기본 스타일 및 SCSS, lefthook) <br><br> 공통 컴포넌트 <br>(사이드바, 탭메뉴, 아바타,<br> 푸터, 로딩스피너, 랜딩 메인 차트) <br><br> 랜딩 페이지,<br> 회원가입 페이지,<br> 구독한 전략 페이지,<br> 문의내역 페이지,<br> 약관 페이지 <br> |                     공통 컴포넌트 <br> (인풋, 모달) <br><br> 프로필 페이지 <br> 공지사항 페이지 <br> 트레이더 페이지 <br>404 페이지                      | 공통 컴포넌트<br>(전략 리스트 아이템, 종목&매매 아이콘,<br> 테이블, 스켈레톤, 회원가입 스텝,<br> 전략 정보, 별점, 검색바, 사이드 정보,<br> 랭킹 차트, 분석 차트, 목록 헤더) <br><br> 전략 랭킹 모음 페이지<br>전략 상세 페이지 | 프로젝트 초기 세팅(NextJS, 배포, MSW) <br><br> 공통 컴포넌트<br> (셀렉트, 헤더)<br><br> 관리자 공지 페이지<br> 관리자 질문 페이지<br> 관리자 사용자 페이지 | 프로젝트 초기 세팅<br>(Tanstack Query, MSW)<br><br> 공통 컴포넌트<br>(페이지네이션, 버튼, 체크 박스, 랜딩 선 차트)<br><br>로그인 페이지<br> 나의 전략 페이지<br> 전략 관리 페이지<br> 전략 등록 페이지 |
+
+</div>
+
+## 페이지 소개
+
+![2024-12-148 40 55-ezgif com-video-to-gif-converter](https://github.com/user-attachments/assets/3fa3ecc3-90da-405a-984e-bd92f5c6d878)
+
+회원가입 버튼을 상단에 배치하여 즉각적인 가입을 유도하며, 사이트 이용자 수, 인기 전략, 통합 지표(SM Score) 등 주요 정보를 한눈에 확인할 수 있습니다.
+
+![2024-12-148 41 20-ezgif com-video-to-gif-converter](https://github.com/user-attachments/assets/2b07bbb5-8bac-42b8-855a-954ede75d697)
+
+전략을 랭킹 순으로 확인할 수 있으며 로그인하지 않은 사용자도 전략 목록을 자유롭게 둘러볼 수 있습니다. 검색바를 통해 매매 유형, SM Score 등 다양한 조건으로 전략을 쉽게 찾아볼 수 있습니다.
+
+![2024-12-148 41 42-ezgif com-video-to-gif-converter](https://github.com/user-attachments/assets/9355e74c-adcf-42a1-94d5-2a429758c7c1)
+
+트레이더 상세보기 페이지에서 트레이더의 전략을 확인할 수 있습니다.
+
+![2024-12-148 42 05-ezgif com-video-to-gif-converter](https://github.com/user-attachments/assets/76f83497-ad3d-419b-8d9f-9789b1edacf5)
+
+나의 전략을 확인할 수 있으며, 무한 스크롤로 데이터를 끊김 없이 탐색할 수 있습니다.
+
+![2024-12-148 42 28-ezgif com-video-to-gif-converter](https://github.com/user-attachments/assets/488d2806-37df-4902-9f03-77a332935911)
+
+내가 구독한 전략들을 한눈에 확인할 수 있습니다.
+
+![2024-12-148 42 48-ezgif com-video-to-gif-converter](https://github.com/user-attachments/assets/625ac057-0bae-4c65-b294-2b117d6364a4)
+
+문의 내역을 확인할 수 있으며, 모든 답변, 답변 대기, 답변 완료 상태로 구분됩니다. 정렬과 검색 기능을 통해 원하는 데이터를 쉽게 찾을 수 있습니다.
+
+![2024-12-148 43 13-ezgif com-video-to-gif-converter](https://github.com/user-attachments/assets/68aad565-dc14-4028-ba78-b08686159ed2)
+
+관리자 계정으로 로그인하면 회원 관리, 공지사항 등록, 종목 및 매매 유형 관리, 전략 승인 관리, 문의 내역 확인 등의 기능을 제공하며, 효율적인 사이트 운영을 지원합니다.
+
+## 🛠 기술 스택
+
+| 기술 스택                                                                                                                  | 도입 이유                                                                                                                |
+| -------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------ |
+| <img src="https://img.shields.io/badge/Next.js-000000?style=for-the-badge&logo=Next.js&logoColor=white">                   | (14.2.16) SSR로 SEO와 초기 로딩 속도 개선, 폴더 기반 라우팅으로 경로 자동 생성                                           |
+| <img src="https://img.shields.io/badge/Storybook-FF4785?style=for-the-badge&logo=Storybook&logoColor=white">               | (8.4.0) 문서화로 사용 방법 및 디자인 시스템 확인, UI 변경사항을 즉각 확인하며 테스트 코드 생략 가능                      |
+| <img src="https://img.shields.io/badge/Sass-CC6699?style=for-the-badge&logo=Sass&logoColor=white">                         | (1.80.5) Mixin으로 반복 스타일 재사용 효율성 증대, 변수 지원으로 색상·폰트 등 공통 값 관리 용이                          |
+| ![TypeScript](https://img.shields.io/badge/typescript-%23007ACC.svg?style=for-the-badge&logo=typescript&logoColor=white)   | (5.0) 정적 타입 검사로 안정성 확보 및 런타임 에러 감소, 코드 자동완성과 명확한 타입 정의로 가독성과 유지보수성 향상 관리 |
+| ![React](https://img.shields.io/badge/react-%2320232a.svg?style=for-the-badge&logo=react&logoColor=%2361DAFB)              | (18) 컴포넌트 기반 아키텍처로 재사용성 극대화, 선언형 UI로 직관적이고 효율적인 개발 경험 제공                            |
+| ![TanStack Query](https://img.shields.io/badge/tanstack--query-FF4154?style=for-the-badge&logo=reactquery&logoColor=white) | (5.59.19) 비동기 상태 관리와 캐싱으로 데이터 요청 최적화 및 서버 상태 관리 간소화                                        |
+| ![Zustand](https://img.shields.io/badge/zustand-2759C6.svg?style=for-the-badge&logo=zustand&logoColor=white)               | (5.0.1) 가벼운 상태 관리 라이브러리로 직관적인 API와 불변성 없이도 효율적인 상태 관리 제공                               |
+
+<br>
+
+## 폴더 구조
+
+![fsd폴더구조](https://github.com/user-attachments/assets/4afd073c-b1e2-469f-9c49-cab5cffd74a4)
+
+#### FSD(Feature Sliced Design)의 장점
+
+**1. 모듈화와 독립성:** 기능별로 파일을 관리해 수정, 삭제, 추가가 용이<br>
+**2. 명확한 구조:** 기능 단위로 폴더가 구성되어 파일을 쉽게 찾을 수 있음<br>
+**3. 협업 효율성:** 작업 영역이 분리되어 충돌 없이 동시 작업 가능<br>
+**4. 유지보수 용이성:** 관련 코드가 한 폴더에 모여 있어 수정 및 확장이 쉬움
+
+## 타임라인
+
+![타임라인](https://github.com/user-attachments/assets/ff6909a0-f2b5-45f6-8247-05309e1f3ab2)
diff --git a/app/(dashboard)/_ui/analysis-container/account-content.tsx b/app/(dashboard)/_ui/analysis-container/account-content.tsx
index 5b157a51..639641b1 100644
--- a/app/(dashboard)/_ui/analysis-container/account-content.tsx
+++ b/app/(dashboard)/_ui/analysis-container/account-content.tsx
@@ -8,6 +8,7 @@ import classNames from 'classnames/bind'
 
 import { ACCOUNT_PAGE_COUNT } from '@/shared/constants/count-per-page'
 import useModal from '@/shared/hooks/custom/use-modal'
+import { ImageDataModel } from '@/shared/types/strategy-data'
 import { Button } from '@/shared/ui/button'
 import Checkbox from '@/shared/ui/check-box'
 import AccountImageModal from '@/shared/ui/modal/account-image-modal'
@@ -22,12 +23,6 @@ import styles from './styles.module.scss'
 
 const cx = classNames.bind(styles)
 
-export interface ImageDataModel {
-  id: number
-  imageUrl: string
-  title: string
-}
-
 interface Props {
   strategyId: number
   currentPage: number
@@ -80,12 +75,12 @@ const AccountContent = ({ strategyId, currentPage, onPageChange, isEditable = fa
         imageIds: selectedImages,
       })
       setSelectedImages([])
-    } catch (error) {
-      console.error('Failed to delete images:', error)
+    } catch (err) {
+      console.error('Failed to delete images:', err)
     }
   }
 
-  if (!data || !Array.isArray(data.content) || isLoading) return null
+  if (!Array.isArray(data?.content) || isLoading) return null
 
   const imagesData = data.content
   const croppedImagesData: ImageDataModel[] = sliceArray(
@@ -95,6 +90,7 @@ const AccountContent = ({ strategyId, currentPage, onPageChange, isEditable = fa
   )
 
   const isTwoLines = (croppedImagesData?.length || 0) > 4
+
   return (
     <div className={cx('table-wrapper')}>
       {isEditable && (
@@ -118,7 +114,7 @@ const AccountContent = ({ strategyId, currentPage, onPageChange, isEditable = fa
           </Button>
         </div>
       )}
-      {croppedImagesData && croppedImagesData.length !== 0 ? (
+      {croppedImagesData?.length > 0 ? (
         <>
           <div className={cx('account-images-container', isTwoLines && 'line')}>
             {croppedImagesData?.map((imageData: ImageDataModel) => (
diff --git a/app/(dashboard)/_ui/analysis-container/analysis-chart.tsx b/app/(dashboard)/_ui/analysis-container/analysis-chart.tsx
index 8eff7139..dd8785b5 100644
--- a/app/(dashboard)/_ui/analysis-container/analysis-chart.tsx
+++ b/app/(dashboard)/_ui/analysis-container/analysis-chart.tsx
@@ -5,8 +5,8 @@ import dynamic from 'next/dynamic'
 import classNames from 'classnames/bind'
 import Highcharts, { SeriesOptionsType } from 'highcharts'
 
+import { CHART_SELECT_OPTIONS } from './constants'
 import styles from './styles.module.scss'
-import { YAXIS_OPTIONS } from './yaxis-options'
 
 const HighchartsReact = dynamic(() => import('highcharts-react-official'), {
   ssr: false,
@@ -14,7 +14,7 @@ const HighchartsReact = dynamic(() => import('highcharts-react-official'), {
 
 const cx = classNames.bind(styles)
 
-type YAxisType = keyof typeof YAXIS_OPTIONS
+type YAxisType = keyof typeof CHART_SELECT_OPTIONS
 
 interface AnalysisChartDataModel {
   dates: string[]
@@ -30,23 +30,23 @@ interface Props {
 const AnalysisChart = ({ analysisChartData: data }: Props) => {
   const getOptionName = (sequence: number) => {
     const key = Object.keys(data.data)[sequence] as YAxisType | undefined
-    return key ? YAXIS_OPTIONS[key] : ''
+    return key ? CHART_SELECT_OPTIONS[key] : ''
   }
+
   if (!data) return <div></div>
+
   const chartOptions: Highcharts.Options = {
     chart: {
       type: 'areaspline',
       height: 367,
       backgroundColor: 'transparent',
-      margin: [10, 60, 10, 60],
+      margin: [10, 75, 10, 75],
       zoomType: 'x',
     } as Highcharts.ChartOptions,
     title: { text: undefined },
     xAxis: {
       visible: false,
       categories: data.dates,
-      min: data.dates.length > 30 ? data.dates.length - 30 : 0,
-      max: data.dates.length - 1,
     },
     yAxis: [
       {
@@ -86,7 +86,7 @@ const AnalysisChart = ({ analysisChartData: data }: Props) => {
       align: 'left',
       verticalAlign: 'top',
       layout: 'vertical',
-      x: 40,
+      x: 70,
       y: -10,
       itemStyle: {
         color: '#4D4D4D',
diff --git a/app/(dashboard)/_ui/analysis-container/analysis-content.tsx b/app/(dashboard)/_ui/analysis-container/analysis-content.tsx
index 43b53475..c7a19a5e 100644
--- a/app/(dashboard)/_ui/analysis-container/analysis-content.tsx
+++ b/app/(dashboard)/_ui/analysis-container/analysis-content.tsx
@@ -3,40 +3,27 @@ import { useState } from 'react'
 import classNames from 'classnames/bind'
 
 import { ANALYSIS_PAGE_COUNT } from '@/shared/constants/count-per-page'
+import useDelayedLoading from '@/shared/hooks/custom/use-delayed-loading'
 import useModal from '@/shared/hooks/custom/use-modal'
+import { MyDailyAnalysisModel } from '@/shared/types/strategy-data'
 import { Button } from '@/shared/ui/button'
 import AnalysisUploadModal from '@/shared/ui/modal/analysis-upload-modal'
+import DailyAnalysisDeleteAllModal from '@/shared/ui/modal/daily-analysis-delete-all-modal'
+import EditAnalysisModal from '@/shared/ui/modal/edit-daily-analysis-modal.ts'
 import Pagination from '@/shared/ui/pagination'
-import VerticalTable from '@/shared/ui/table/vertical'
+import VerticalTable, { TableBodyDataType } from '@/shared/ui/table/vertical'
 
 import { useAnalysisUploadMutation } from '../../my/_hooks/query/use-analysis-mutation'
 import useGetMyDailyAnalysis from '../../my/_hooks/query/use-get-my-daily-analysis'
+import { useMyAnalysisMutation } from '../../my/_hooks/query/use-manage-daily-analysis'
 import useGetAnalysis from '../../strategies/[strategyId]/_hooks/query/use-get-analysis'
 import useGetAnalysisDownload from '../../strategies/[strategyId]/_hooks/query/use-get-analysis-download'
+import { generateFormattedStrategyData } from '../../strategies/[strategyId]/util'
+import { DAILY_TABLE_HEADER, MONTHLY_TABLE_HEADER } from './constants'
 import styles from './styles.module.scss'
 
 const cx = classNames.bind(styles)
 
-const DAILY_TABLE_HEADER = [
-  '날짜',
-  '원금',
-  '입출금',
-  '일 손익',
-  '일 손익률',
-  '누적 손익',
-  '누적 수익률',
-]
-
-const MONTHLY_TABLE_HEADER = [
-  '날짜',
-  '원금',
-  '입출금',
-  '월 손익',
-  '월 손익률',
-  '누적 손익',
-  '누적 수익률',
-]
-
 interface Props {
   type: 'daily' | 'monthly'
   strategyId: number
@@ -45,6 +32,18 @@ interface Props {
   isEditable?: boolean
 }
 
+const isMyAnalysisData = (data: TableBodyDataType): data is MyDailyAnalysisModel => {
+  if (!data || typeof data !== 'object' || Array.isArray(data)) return false
+
+  return (
+    'dailyAnalysisId' in data &&
+    'dailyDate' in data &&
+    'transaction' in data &&
+    'dailyProfitLoss' in data &&
+    'principal' in data
+  )
+}
+
 const AnalysisContent = ({
   type,
   strategyId,
@@ -52,18 +51,29 @@ const AnalysisContent = ({
   onPageChange,
   isEditable = false,
 }: Props) => {
+  const COLWIDTH = [1.7, 1.7, 1.3, 1.5, 1, 1.5, 1]
   const { mutate } = useGetAnalysisDownload()
-
   const [uploadType, setUploadType] = useState<'excel' | 'direct' | null>(null)
+  const [selectedAnalysis, setSelectedAnalysis] = useState<MyDailyAnalysisModel | null>(null)
+
   const { isModalOpen, openModal, closeModal } = useModal()
+  const {
+    isModalOpen: isDeleteModalOpen,
+    openModal: openDeleteModal,
+    closeModal: closeDeleteModal,
+  } = useModal()
+  const {
+    isModalOpen: isEditModalOpen,
+    openModal: openEditModal,
+    closeModal: closeEditModal,
+  } = useModal()
 
-  //TODO 현재 나의 전략 일간분석 조회 권한이 없어서 안보임
-  const { data: myAnalysisData } = useGetMyDailyAnalysis(
+  const { data: myAnalysisData, isLoading: isMyAnalysisLoading } = useGetMyDailyAnalysis(
     strategyId,
     currentPage,
     ANALYSIS_PAGE_COUNT
   )
-  const { data: publicAnalysisData } = useGetAnalysis(
+  const { data: publicAnalysisData, isLoading: isPublicAnalysisLoading } = useGetAnalysis(
     strategyId,
     type,
     currentPage,
@@ -71,19 +81,22 @@ const AnalysisContent = ({
   )
 
   const analysisData = isEditable ? myAnalysisData : publicAnalysisData
+  const isLoading = isEditable ? isMyAnalysisLoading : isPublicAnalysisLoading
+  const isDelayedLoading = useDelayedLoading(isLoading, 500)
 
-  const { deleteAllAnalysis, isLoading } = useAnalysisUploadMutation(
+  const analysisContent = generateFormattedStrategyData(analysisData?.content)
+
+  const { deleteAllAnalysis, isLoading: isDeleteAllLoading } = useAnalysisUploadMutation(
     strategyId,
     currentPage,
     ANALYSIS_PAGE_COUNT
   )
+  const { deleteAnalysisData } = useMyAnalysisMutation(strategyId, currentPage, ANALYSIS_PAGE_COUNT)
 
   const handleDownload = () => {
     mutate({ strategyId, type })
   }
 
-  const tableHeader = type === 'daily' ? DAILY_TABLE_HEADER : MONTHLY_TABLE_HEADER
-
   const handleExcelUpload = () => {
     setUploadType('excel')
     openModal()
@@ -99,20 +112,61 @@ const AnalysisContent = ({
     setUploadType(null)
   }
 
+  const handleCloseEditModal = () => {
+    closeEditModal()
+    setSelectedAnalysis(null)
+  }
+
   const handleDeleteAll = async () => {
-    if (window.confirm('모든 데이터를 삭제하시겠습니까?')) {
-      try {
-        await deleteAllAnalysis()
-      } catch (error) {
-        console.error('Delete error:', error)
-        alert('데이터 삭제 중 오류가 발생했습니다.')
-      }
+    try {
+      await deleteAllAnalysis()
+      closeDeleteModal()
+    } catch (err) {
+      console.error('Delete error:', err)
     }
   }
 
+  const handleDeleteAnalysis = async (dailyAnalysisId: number) => {
+    try {
+      await deleteAnalysisData(dailyAnalysisId)
+    } catch (err) {
+      console.error('Delete failed:', err)
+    }
+  }
+
+  const renderActions = (row: TableBodyDataType) => {
+    if (!isMyAnalysisData(row)) return null
+
+    return (
+      <div className={cx('button-container')}>
+        <Button
+          size="small"
+          variant="outline"
+          className={cx('edit-button')}
+          onClick={() => {
+            setSelectedAnalysis(row)
+            openEditModal()
+          }}
+        >
+          수정
+        </Button>
+        <Button
+          size="small"
+          variant="filled"
+          className={cx('delete-button')}
+          onClick={() => handleDeleteAnalysis(row.dailyAnalysisId)}
+        >
+          삭제
+        </Button>
+      </div>
+    )
+  }
+
+  const tableHeader = type === 'daily' ? DAILY_TABLE_HEADER : MONTHLY_TABLE_HEADER
+
   return (
-    <div className={cx('table-wrapper', 'analysis')}>
-      {!isEditable && analysisData && (
+    <div className={cx('table-wrapper', isEditable ? 'my-analysis' : 'analysis')}>
+      {!isEditable && analysisData?.content.length > 0 && (
         <Button
           onClick={handleDownload}
           size="small"
@@ -136,25 +190,40 @@ const AnalysisContent = ({
             <Button
               size="small"
               className={cx('upload-button')}
-              variant="filled"
+              variant="outline"
               onClick={handleDirectInput}
             >
               직접 입력
             </Button>
           </div>
-          <Button size="small" variant="filled" onClick={handleDeleteAll} disabled={isLoading}>
+          <Button
+            size="small"
+            variant="filled"
+            onClick={openDeleteModal}
+            disabled={isDeleteAllLoading}
+            className={cx('delete-all-button')}
+          >
             전체 삭제
           </Button>
         </div>
       )}
-      {analysisData ? (
+      {isDelayedLoading ? (
+        <VerticalTable.Skeleton
+          tableHead={tableHeader}
+          countPerPage={ANALYSIS_PAGE_COUNT}
+          renderActions={isEditable ? renderActions : undefined}
+          colWidths={COLWIDTH}
+        />
+      ) : analysisData?.content.length > 0 ? (
         <>
           <VerticalTable
             tableHead={tableHeader}
-            tableBody={analysisData.content}
+            tableBody={analysisContent}
             currentPage={1}
             countPerPage={ANALYSIS_PAGE_COUNT}
-            isEditable={isEditable}
+            renderActions={isEditable ? renderActions : undefined}
+            hideFirstColumn={isEditable}
+            colWidths={COLWIDTH}
           />
           <Pagination
             currentPage={currentPage}
@@ -177,6 +246,29 @@ const AnalysisContent = ({
           message={uploadType === 'excel' ? '엑셀 업로드' : '일간분석 데이터 입력'}
         />
       )}
+
+      {selectedAnalysis && (
+        <EditAnalysisModal
+          isOpen={isEditModalOpen}
+          onClose={handleCloseEditModal}
+          strategyId={strategyId}
+          analysisId={selectedAnalysis.dailyAnalysisId}
+          initialData={{
+            date: selectedAnalysis.dailyDate,
+            transaction: selectedAnalysis.transaction,
+            dailyProfitLoss: selectedAnalysis.dailyProfitLoss,
+          }}
+          page={currentPage}
+          size={ANALYSIS_PAGE_COUNT}
+        />
+      )}
+
+      <DailyAnalysisDeleteAllModal
+        isModalOpen={isDeleteModalOpen}
+        onCloseModal={closeDeleteModal}
+        onDelete={handleDeleteAll}
+        isPending={isDeleteAllLoading}
+      />
     </div>
   )
 }
diff --git a/app/(dashboard)/_ui/analysis-container/yaxis-options.ts b/app/(dashboard)/_ui/analysis-container/constants.ts
similarity index 65%
rename from app/(dashboard)/_ui/analysis-container/yaxis-options.ts
rename to app/(dashboard)/_ui/analysis-container/constants.ts
index a9be1ddf..38b37f2c 100644
--- a/app/(dashboard)/_ui/analysis-container/yaxis-options.ts
+++ b/app/(dashboard)/_ui/analysis-container/constants.ts
@@ -1,4 +1,4 @@
-export const YAXIS_OPTIONS = {
+export const CHART_SELECT_OPTIONS = {
   BALANCE: '잔고',
   PRINCIPAL: '원금',
   CUMULATIVE_TRANSACTION_AMOUNT: '누적 입출 금액',
@@ -17,3 +17,23 @@ export const YAXIS_OPTIONS = {
   TOTAL_PROFIT: '총 이익',
   TOTAL_LOSS: '총 손실',
 } as const
+
+export const DAILY_TABLE_HEADER = [
+  '날짜',
+  '원금',
+  '입출금',
+  '일 손익',
+  '일 손익률',
+  '누적 손익',
+  '누적 수익률',
+]
+
+export const MONTHLY_TABLE_HEADER = [
+  '날짜',
+  '원금',
+  '입출금',
+  '월 손익',
+  '월 손익률',
+  '누적 손익',
+  '누적 수익률',
+]
diff --git a/app/(dashboard)/_ui/analysis-container/example.ts b/app/(dashboard)/_ui/analysis-container/example.ts
deleted file mode 100644
index c1b1289d..00000000
--- a/app/(dashboard)/_ui/analysis-container/example.ts
+++ /dev/null
@@ -1,123 +0,0 @@
-export const analysisChartData = {
-  dates: ['2023-01-01', '2023-01-02', '2023-01-03', '2023-01-04', '2023-01-05', '2023-01-06'],
-  data: {
-    CURRENT_DRAWDOWN: [2000, 5660, 4000, 9000, 7000, 10000],
-    PRINCIPAL: [50000, 60000, 80000, 70000, 80000, 90000],
-  },
-}
-
-export const statisticsData = {
-  assetManagement: {
-    balance: 896217437, // 잔고
-    cumulativeTransactionAmount: 896217437, // 누적 거래 금액
-    principal: 238704360, // 원금
-    operationPeriod: '2년 4월', // 운용 기간
-    startDate: '2012-10-11', // 시작 일자
-    endDate: '2015-03-11', // 종료 일자 (endDate)
-    daysSincePeakUpdate: 513, // 고점 갱신 후 경과일
-  },
-  profitLoss: {
-    cumulativeProfitAmount: 247525031, // 누적 수익 금액
-    cumulativeProfitRate: 49.24, // 누적 수익률
-    maxCumulativeProfitAmount: 247525031, // 최대 누적 수익 금액
-    maxCumulativeProfitRate: 49.24, // 최대 누적 수익률
-    averageProfitLossAmount: 336311, // 평균 손익 금액
-    averageProfitLossRate: 6, // 평균 손익률
-    maxDailyProfitAmount: 25257250, // 최대 일 수익 금액
-    maxDailyProfitRate: 3.985, // 최대 일 수익률
-    maxDailyLossAmount: -17465050, // 최대 일 손실 금액
-    maxDailyLossRate: -3.95, // 최대 일 손실률
-    roa: 453, // 자산 수익률 (Return on Assets)
-    profitFactor: 1.48, // Profit Factor
-  },
-  ddMddInfo: {
-    currentDrawdown: 0, // 현재 자본 인하 금액
-    currentDrawdownRate: 0, // 현재 자본 인하율
-    maxDrawdown: -54832778, // 최대 자본 인하 금액
-    maxDrawdownRate: -13.98, // 최대 자본 인하율
-  },
-  tradingInfo: {
-    totalTradeDays: 736, // 총 거래 일수
-    totalProfitableDays: 508, // 총 이익 일수
-    totalLossDays: 228, // 총 손실 일수
-    currentConsecutiveLossDays: 6, // 현재 연속 손실 일수
-    maxConsecutiveProfitDays: 22, // 최대 연속 이익 일수
-    maxConsecutiveLossDays: 8, // 최대 연속 손실 일수
-    winRate: 69, // 승률
-  },
-}
-
-export const tableBody = [
-  {
-    date: '2015-03-12', // 날짜
-    principal: 100000000, // 원금
-    transaction: 0, // 입출금
-    dailyProfitLoss: 332410, // 일 손익
-    dailyProfitLossRate: 0.33, // 일 수익률
-    cumulativeProfitLoss: 302280, // 누적 손익
-    cumulativeProfitLossRate: 0.3, // 누적 수익률
-  },
-  {
-    date: '2015-03-13',
-    principal: 100000000,
-    transaction: 0,
-    dailyProfitLoss: 332410,
-    dailyProfitLossRate: 0.33,
-    cumulativeProfitLoss: 302280,
-    cumulativeProfitLossRate: 0.3,
-  },
-  {
-    date: '2015-03-14',
-    principal: 100000000,
-    transaction: 0,
-    dailyProfitLoss: 332410,
-    dailyProfitLossRate: 0.33,
-    cumulativeProfitLoss: 302280,
-    cumulativeProfitLossRate: 0.3,
-  },
-  {
-    date: '2015-03-15',
-    principal: 100000000,
-    transaction: 0,
-    dailyProfitLoss: 332410,
-    dailyProfitLossRate: 0.33,
-    cumulativeProfitLoss: 302280,
-    cumulativeProfitLossRate: 0.3,
-  },
-  {
-    date: '2015-03-16',
-    principal: 100000000,
-    transaction: 0,
-    dailyProfitLoss: 332410,
-    dailyProfitLossRate: 0.33,
-    cumulativeProfitLoss: 302280,
-    cumulativeProfitLossRate: 0.3,
-  },
-  {
-    date: '2015-03-17',
-    principal: 100000000,
-    transaction: 0,
-    dailyProfitLoss: 332410,
-    dailyProfitLossRate: 0.33,
-    cumulativeProfitLoss: 302280,
-    cumulativeProfitLossRate: 0.3,
-  },
-  {
-    date: '2015-03-18',
-    principal: 100000000,
-    transaction: 0,
-    dailyProfitLoss: 332410,
-    dailyProfitLossRate: 0.33,
-    cumulativeProfitLoss: 302280,
-    cumulativeProfitLossRate: 0.3,
-  },
-  {
-    date: '2015-03-19',
-    principal: 100000000,
-    transaction: 0,
-    dailyProfitLoss: 332410,
-    dailyProfitLossRate: 0.33,
-    cumulativeProfitLoss: 302280,
-    cumulativeProfitLossRate: 0.3,
-  },
-]
diff --git a/app/(dashboard)/_ui/analysis-container/index.tsx b/app/(dashboard)/_ui/analysis-container/index.tsx
index c6422eff..e3b74cfc 100644
--- a/app/(dashboard)/_ui/analysis-container/index.tsx
+++ b/app/(dashboard)/_ui/analysis-container/index.tsx
@@ -8,13 +8,13 @@ import Select from '@/shared/ui/select'
 
 import useGetAnalysisChart from '../../strategies/[strategyId]/_hooks/query/use-get-analysis-chart'
 import AnalysisChart from './analysis-chart'
+import { CHART_SELECT_OPTIONS } from './constants'
 import styles from './styles.module.scss'
 import TabsWithTable from './tabs-width-table'
-import { YAXIS_OPTIONS } from './yaxis-options'
 
 const cx = classNames.bind(styles)
 
-export type AnalysisChartOptionsType = keyof typeof YAXIS_OPTIONS
+export type AnalysisChartOptionsType = keyof typeof CHART_SELECT_OPTIONS
 
 interface Props {
   strategyId: number
@@ -27,12 +27,9 @@ const AnalysisContainer = ({ strategyId, type = 'default' }: Props) => {
     useState<AnalysisChartOptionsType>('CUMULATIVE_PROFIT_LOSS')
   const { data: chartData } = useGetAnalysisChart({ strategyId, firstOption, secondOption })
 
-  const optionsToArray = Object.entries(YAXIS_OPTIONS)
-  const options: { value: string; label: string }[] = []
-
-  for (const [key, value] of optionsToArray) {
-    options.push({ value: key, label: value })
-  }
+  const options = Object.entries(CHART_SELECT_OPTIONS).map((option) => {
+    return { value: option[0], label: option[1] }
+  })
 
   return (
     <div className={cx('container')}>
diff --git a/app/(dashboard)/_ui/analysis-container/statistics-content.tsx b/app/(dashboard)/_ui/analysis-container/statistics-content.tsx
index b70db4fb..85d3befe 100644
--- a/app/(dashboard)/_ui/analysis-container/statistics-content.tsx
+++ b/app/(dashboard)/_ui/analysis-container/statistics-content.tsx
@@ -14,7 +14,7 @@ interface StatisticsDataModel {
 }
 
 interface Props {
-  statisticsData: StatisticsDataModel
+  statisticsData?: StatisticsDataModel
 }
 
 const StatisticsContent = ({ statisticsData }: Props) => {
diff --git a/app/(dashboard)/_ui/analysis-container/styles.module.scss b/app/(dashboard)/_ui/analysis-container/styles.module.scss
index e139a8e9..a5d5f9df 100644
--- a/app/(dashboard)/_ui/analysis-container/styles.module.scss
+++ b/app/(dashboard)/_ui/analysis-container/styles.module.scss
@@ -2,6 +2,7 @@
   padding: 20px;
   border-radius: 5px;
   background-color: $color-white;
+
   .analysis-header {
     display: flex;
     justify-content: space-between;
@@ -29,21 +30,29 @@
 .table-wrapper {
   margin-top: 20px;
   position: relative;
+
   .edit-button-container {
     display: flex;
     justify-content: space-between;
     margin-bottom: 30px;
+
     .edit-button,
     .delete-button {
       padding: 7px 18px;
     }
+
     .delete-button:disabled {
       background-color: transparent;
     }
   }
+
   &.analysis {
     margin-top: 40px;
   }
+  &.my-analysis {
+    margin-top: 20px;
+  }
+
   .excel-button {
     height: 30px;
     position: absolute;
@@ -57,15 +66,18 @@
   grid-template-columns: repeat(5, 1fr);
   grid-template-rows: repeat(1, 1fr);
   column-gap: 20px;
+
   &.line {
     grid-template-rows: repeat(2, 1fr);
     row-gap: 10px;
   }
+
   .image-data {
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
+
     .image {
       position: relative;
       width: 100%;
@@ -74,11 +86,13 @@
       cursor: pointer;
       overflow: hidden;
     }
+
     span {
       text-align: center;
       @include typo-c1;
     }
   }
+
   .title-wrapper {
     display: flex;
     justify-content: center;
@@ -100,13 +114,23 @@
 .button-container {
   display: flex;
   justify-content: space-between;
+  align-items: center;
   height: 30px;
-  margin-top: -20px;
-  margin-bottom: 10px;
+  gap: 8px;
+  padding: 0 10px;
 
-  button.upload-button {
-    height: 100%;
+  button.upload-button,
+  button.delete-all-button {
     padding: 7px 18px;
     margin-right: 10px;
   }
+
+  button.delete-button,
+  button.edit-button {
+    min-width: 60px;
+    height: 24px;
+    padding: 7px 16px;
+    border-radius: 16px;
+    border: 1px solid $color-gray-300;
+  }
 }
diff --git a/app/(dashboard)/_ui/details-information/index.tsx b/app/(dashboard)/_ui/details-information/index.tsx
index 3aae89cd..5a08238e 100644
--- a/app/(dashboard)/_ui/details-information/index.tsx
+++ b/app/(dashboard)/_ui/details-information/index.tsx
@@ -14,9 +14,17 @@ interface Props {
   strategyId: number
   information: StrategyDetailsInformationModel
   type?: 'default' | 'my'
+  isEditable?: boolean
+  error?: Error
 }
 
-const DetailsInformation = ({ strategyId, information, type = 'default' }: Props) => {
+const DetailsInformation = ({
+  strategyId,
+  information,
+  type = 'default',
+  error,
+  isEditable = false,
+}: Props) => {
   const percentageToArray = [
     { percent: information.cumulativeProfitRate, label: '누적 수익률' },
     { percent: information.maxDrawdownRate, label: '최대 자본 인하율' },
@@ -29,6 +37,7 @@ const DetailsInformation = ({ strategyId, information, type = 'default' }: Props
     <>
       <div className={cx('information-top')}>
         <StrategyNameBox
+          error={error}
           iconUrls={[
             information.tradeTypeIconUrl,
             ...(information.stockTypeInfo?.stockTypeIconUrls ?? []),
@@ -39,14 +48,17 @@ const DetailsInformation = ({ strategyId, information, type = 'default' }: Props
           ]}
           name={information.strategyName}
           strategyId={strategyId}
+          isEditable={isEditable}
+          hasProposal={information.hasProposal}
         />
         <InvestInformation
           stock={information.stockTypeInfo?.stockTypeNames || []}
           trade={information.tradeTypeName}
           cycle={information.operationCycle}
+          isEditable={isEditable}
         />
       </div>
-      <StrategyIntroduction content={information.strategyDescription} />
+      <StrategyIntroduction content={information.strategyDescription} isEditable={isEditable} />
       {type === 'default' && (
         <div className={cx('percentage-container')}>
           {percentageToArray.map((data) => (
diff --git a/app/(dashboard)/_ui/details-information/invest-information.tsx b/app/(dashboard)/_ui/details-information/invest-information.tsx
index 9a9a78a8..5a51b8cf 100644
--- a/app/(dashboard)/_ui/details-information/invest-information.tsx
+++ b/app/(dashboard)/_ui/details-information/invest-information.tsx
@@ -8,16 +8,17 @@ interface Props {
   stock: string[]
   trade: string
   cycle: string
+  isEditable?: boolean
 }
 
-const InvestInformation = ({ stock, trade, cycle }: Props) => {
+const InvestInformation = ({ stock, trade, cycle, isEditable = false }: Props) => {
   const investData = [
     { title: '투자 종목', data: stock.join(',') },
     { title: '매매 유형', data: trade },
     { title: '투자 주기', data: cycle },
   ]
   return (
-    <div className={cx('invest-container')}>
+    <div className={cx('invest-container', { edit: isEditable })}>
       {investData.map((data, idx) => (
         <div key={`${data}${idx}`} className={cx('info-item')}>
           <p className={cx('invest-title')}>{data.title}</p>
diff --git a/app/(dashboard)/_ui/details-information/strategy-name-box.tsx b/app/(dashboard)/_ui/details-information/strategy-name-box.tsx
index ff29ebe5..08b509c4 100644
--- a/app/(dashboard)/_ui/details-information/strategy-name-box.tsx
+++ b/app/(dashboard)/_ui/details-information/strategy-name-box.tsx
@@ -1,8 +1,17 @@
-import React from 'react'
+'use client'
+
+import { useEffect, useRef, useState } from 'react'
 
 import StrategiesIcon from '@/app/(dashboard)/_ui/strategies-item/strategies-icon'
+import { FileIcon } from '@/public/icons'
+import { TrashcanIcon } from '@/public/icons'
 import classNames from 'classnames/bind'
 
+import { SUPPORTED_FILE_TYPES } from '@/shared/constants/supported-file-types'
+import Input from '@/shared/ui/input'
+
+import useGetProposalFileName from '../../my/_hooks/query/use-get-proposal-file-name'
+import useEditInformationStore from '../../my/strategies/manage/[strategyId]/_store/use-edit-information-store'
 import useGetProposalDownload from '../../strategies/[strategyId]/_hooks/query/use-get-proposal-download'
 import styles from './styles.module.scss'
 
@@ -10,23 +19,132 @@ const cx = classNames.bind(styles)
 
 interface Props {
   strategyId: number
+  name: string
+  hasProposal: boolean
   iconUrls?: string[]
   iconNames?: string[]
-  name: string
+  isEditable?: boolean
+  error?: Error
 }
 
-const StrategyNameBox = ({ strategyId, iconUrls, iconNames, name }: Props) => {
+const StrategyNameBox = ({
+  strategyId,
+  name,
+  hasProposal: initialHasProposal,
+  iconUrls,
+  iconNames,
+  isEditable = false,
+  error,
+}: Props) => {
+  const information = useEditInformationStore((state) => state.information)
+  const proposal = useEditInformationStore((state) => state.proposal)
+  const setStrategyName = useEditInformationStore((state) => state.actions.setStrategyName)
+  const setProposalFile = useEditInformationStore((state) => state.actions.setProposalFile)
+  const initializeProposal = useEditInformationStore((state) => state.actions.initializeProposal)
+  const setProposalModified = useEditInformationStore((state) => state.actions.setProposalModified)
+
+  const { refetch } = useGetProposalFileName(strategyId)
   const { mutate } = useGetProposalDownload()
+  const fileInputRef = useRef<HTMLInputElement>(null)
+  const [selectedFile, setSelectedFile] = useState<File | null>(null)
+  const [fileError, setFileError] = useState<string>('')
 
   const handleDownload = () => {
     mutate({ strategyId, name })
   }
 
+  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0]
+    const supportedTypes = SUPPORTED_FILE_TYPES
+
+    if (file && supportedTypes.includes(file.type)) {
+      setSelectedFile(file)
+      setProposalFile(file)
+      setFileError('')
+    } else {
+      setSelectedFile(null)
+      setProposalFile(null)
+      setFileError('지원되는 파일 형식이 아닙니다.')
+    }
+  }
+
+  const handleProposalClick = () => {
+    if (fileInputRef.current) {
+      fileInputRef.current.click()
+    }
+  }
+
+  const handleProposalDelete = () => {
+    if (selectedFile || proposal.proposalFileName) {
+      setSelectedFile(null)
+      setProposalFile(null)
+      initializeProposal('')
+      setProposalModified(true)
+      setFileError('')
+    }
+  }
+
+  useEffect(() => {
+    setStrategyName(name)
+  }, [name, setStrategyName])
+
+  useEffect(() => {
+    if (isEditable) {
+      refetch().then((response) => {
+        const fileName = response.data?.result?.proposalFileName
+        if (fileName) {
+          initializeProposal(fileName)
+        }
+      })
+    }
+  }, [isEditable, refetch, initializeProposal])
+
+  const displayFileName =
+    selectedFile?.name || proposal.proposalFileName || '등록된 제안서가 없습니다'
+
   return (
     <div className={cx('name-container')}>
-      <StrategiesIcon iconUrls={iconUrls} iconNames={iconNames} isDetailsPage={true} />
-      <p className={cx('name')}>{name}</p>
-      <button onClick={handleDownload}>제안서 다운로드</button>
+      <div className={cx('name-section')}>
+        <StrategiesIcon iconUrls={iconUrls} iconNames={iconNames} isDetailsPage={true} />
+        {isEditable ? (
+          <Input
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) => setStrategyName(e.target.value)}
+            inputSize="small"
+            className={cx('name-input')}
+            maxLength={16}
+            value={information.strategyName as string}
+          />
+        ) : (
+          <p className={cx('name')}>{name}</p>
+        )}
+        {initialHasProposal && !isEditable && (
+          <button onClick={handleDownload} className={cx('download-button')}>
+            제안서 다운로드
+          </button>
+        )}
+      </div>
+      {isEditable && (
+        <div className={cx('proposal-section')}>
+          <input
+            type="file"
+            ref={fileInputRef}
+            onChange={handleFileChange}
+            accept=".xlsx,.xls,.pdf,.doc,.docx,.txt,.ppt,.pptx"
+            className={cx('file-input')}
+          />
+          <div className={cx('proposal-input-wrapper')}>
+            <Input readOnly value={displayFileName} className={cx('file-name-input')} />
+            <button onClick={handleProposalClick} className={cx('proposal-button', 'modify')}>
+              <FileIcon />
+            </button>
+            <button onClick={handleProposalDelete} className={cx('proposal-button', 'delete')}>
+              <TrashcanIcon />
+            </button>
+          </div>
+          {error && <p className={cx('error-message')}>{error.message}</p>}
+          {fileError && <p className={cx('error-message')}>{fileError}</p>}
+        </div>
+      )}
     </div>
   )
 }
diff --git a/app/(dashboard)/_ui/details-information/styles.module.scss b/app/(dashboard)/_ui/details-information/styles.module.scss
index 46224894..4e0ebbbd 100644
--- a/app/(dashboard)/_ui/details-information/styles.module.scss
+++ b/app/(dashboard)/_ui/details-information/styles.module.scss
@@ -5,22 +5,100 @@
 }
 
 .name-container {
-  width: 30%;
+  width: 35%;
   height: 144px;
-  padding: 20px;
+  padding: 18px 10px;
   display: flex;
+  justify-content: center;
   flex-direction: column;
-  gap: 10px;
+  gap: 4px;
   border-radius: 5px;
   background-color: $color-white;
-  .name {
-    @include typo-h4;
+
+  .name-section {
+    .name-input {
+      padding: 10px;
+      height: 30px;
+      width: 45%;
+      margin: 6px 0;
+      color: $color-gray-700;
+    }
+    .name {
+      @include typo-b1;
+      margin: 10px 0;
+    }
+    button {
+      height: 30px;
+      width: 100%;
+      border-radius: 8px;
+      background-color: $color-gray-200;
+      color: $color-gray-700;
+    }
+  }
+
+  .proposal-section {
+    width: 100%;
+
+    .file-input {
+      display: none;
+    }
+
+    .proposal-input-wrapper {
+      position: relative;
+      width: 100%;
+
+      .file-name-input {
+        width: 100%;
+        height: 30px;
+        background-color: $color-gray-200;
+        border: 0;
+        border-radius: 8px;
+        cursor: default;
+        color: $color-gray-700;
+        padding-right: 70px;
+        text-overflow: ellipsis;
+        padding-left: 16px;
+      }
+
+      .proposal-button {
+        position: absolute;
+        right: 16px;
+        top: 50%;
+        transform: translateY(-50%);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: $color-gray-700;
+        background: none;
+        @include typo-b3;
+
+        svg {
+          width: 20px;
+          height: 20px;
+        }
+
+        &.modify {
+          right: 40px;
+        }
+
+        &.delete {
+          right: 12px;
+        }
+      }
+    }
+
+    .error-message {
+      @include typo-c1;
+      color: $color-orange-700;
+      margin-top: 8px;
+    }
   }
-  button {
-    height: 36px;
-    border-radius: 8px;
-    background-color: $color-gray-100;
-    color: $color-gray-700;
+
+  @include tablet-md {
+    gap: 2px;
+    button {
+      font-size: $text-b3;
+    }
   }
 }
 
@@ -29,14 +107,20 @@
   height: 144px;
   display: flex;
   gap: 20px;
-  padding: 30px;
+  padding: 20px;
   border-radius: 5px;
   background-color: $color-white;
+
+  &.edit {
+    background-color: $color-gray-200;
+  }
+
   .info-item {
     width: 100%;
     height: 100%;
     border-right: 1px solid $color-gray-200;
     padding-right: 4px;
+    overflow-y: auto;
     &:last-child {
       border-right: 0;
     }
@@ -48,6 +132,16 @@
       @include typo-b3;
       color: $color-gray-700;
       margin-top: 16px;
+      @include tablet-md {
+        font-size: $text-c1;
+      }
+    }
+    &::-webkit-scrollbar {
+      width: 6px;
+    }
+    &::-webkit-scrollbar-thumb {
+      background-color: $color-gray-200;
+      border-radius: 10px;
     }
   }
 }
@@ -62,6 +156,7 @@
   width: 20%;
   height: 108px;
   border-radius: 5px;
+  gap: 8px;
   background-color: $color-white;
   display: flex;
   flex-direction: column;
@@ -71,12 +166,24 @@
   .label {
     @include typo-b2;
     color: $color-gray-800;
+    @include tablet-md {
+      font-size: $text-b3;
+    }
+    @include tablet-sm {
+      font-size: $text-c1;
+    }
   }
   .percent {
-    @include typo-h3;
+    @include typo-h4;
     color: #f53500;
     &.minus {
       color: #6877ff;
     }
+    @include tablet-md {
+      font-size: $text-b1;
+    }
+    @include tablet-sm {
+      font-size: $text-b2;
+    }
   }
 }
diff --git a/app/(dashboard)/_ui/details-side-item/index.tsx b/app/(dashboard)/_ui/details-side-item/index.tsx
index c550f81a..75d520ac 100644
--- a/app/(dashboard)/_ui/details-side-item/index.tsx
+++ b/app/(dashboard)/_ui/details-side-item/index.tsx
@@ -25,12 +25,14 @@ interface Props {
   profileImage?: string
   isMyStrategy?: boolean
   strategyName?: string
+  isEditable?: boolean
 }
 
 const DetailsSideItem = ({
   strategyId,
   information,
   profileImage,
+  isEditable = false,
   isMyStrategy = true,
   strategyName,
 }: Props) => {
@@ -38,12 +40,12 @@ const DetailsSideItem = ({
   return (
     <>
       {isArray ? (
-        <div className={cx('side-items')}>
+        <div className={cx('side-items', { edit: isEditable })}>
           {information.map((item) => (
             <div key={item.title}>
               <div className={cx('title')}>{item.title}</div>
               <div className={cx('data')}>
-                <p>{item.data}</p>
+                <p>{typeof item.data === 'number' ? item.data.toFixed(2) : item.data}</p>
               </div>
             </div>
           ))}
@@ -56,6 +58,7 @@ const DetailsSideItem = ({
           profileImage={profileImage}
           isMyStrategy={isMyStrategy}
           strategyName={strategyName}
+          isEditable={isEditable}
         />
       )}
     </>
diff --git a/app/(dashboard)/_ui/details-side-item/side-item.tsx b/app/(dashboard)/_ui/details-side-item/side-item.tsx
index 265bac8e..e132a209 100644
--- a/app/(dashboard)/_ui/details-side-item/side-item.tsx
+++ b/app/(dashboard)/_ui/details-side-item/side-item.tsx
@@ -1,10 +1,7 @@
 'use client'
 
-import { usePathname, useRouter } from 'next/navigation'
-
 import classNames from 'classnames/bind'
 
-import { PATH } from '@/shared/constants/path'
 import useModal from '@/shared/hooks/custom/use-modal'
 import { useAuthStore } from '@/shared/stores/use-auth-store'
 import Avatar from '@/shared/ui/avatar'
@@ -25,6 +22,7 @@ interface Props {
   profileImage?: string
   isMyStrategy?: boolean
   strategyName?: string
+  isEditable?: boolean
 }
 
 const SideItem = ({
@@ -34,6 +32,7 @@ const SideItem = ({
   profileImage,
   isMyStrategy = false,
   strategyName,
+  isEditable = false,
 }: Props) => {
   const {
     isModalOpen: isAddQuestionModalOpen,
@@ -46,17 +45,11 @@ const SideItem = ({
     closeModal: guideCloseModal,
   } = useModal()
   const user = useAuthStore((state) => state.user)
-  const router = useRouter()
-  const path = usePathname()
-
-  const handleRouter = () => {
-    router.push(`${PATH.MY_STRATEGIES}/manage/${strategyId}`)
-  }
 
   const isTrader = user?.role.includes('TRADER')
 
   return (
-    <div className={cx('side-item')}>
+    <div className={cx('side-item', { edit: isEditable })}>
       <div className={cx('title')}>{title}</div>
       <div className={cx('data')}>
         {title === '트레이더' ? (
@@ -66,15 +59,10 @@ const SideItem = ({
               <p>{data}</p>
             </div>
             {!isMyStrategy && !isTrader && (
-              <Button onClick={questionOpenModal} size="small" style={{ height: '30px' }}>
+              <Button onClick={questionOpenModal} size="small" style={{ padding: '5px 10px' }}>
                 문의하기
               </Button>
             )}
-            {isMyStrategy && !path.includes('my') && (
-              <Button onClick={handleRouter} size="small" style={{ height: '30px' }}>
-                내 전략 관리하기
-              </Button>
-            )}
           </>
         ) : (
           <p>{formatNumber(data)}</p>
diff --git a/app/(dashboard)/_ui/details-side-item/styles.module.scss b/app/(dashboard)/_ui/details-side-item/styles.module.scss
index b4393c12..530e01ab 100644
--- a/app/(dashboard)/_ui/details-side-item/styles.module.scss
+++ b/app/(dashboard)/_ui/details-side-item/styles.module.scss
@@ -15,10 +15,15 @@
 
 .side-item,
 .side-items {
-  width: 276px;
+  width: 100%;
   background-color: $color-white;
   border-radius: 5px;
   margin-bottom: 20px;
+
+  &.edit {
+    background-color: $color-gray-200;
+  }
+
   .title {
     font-weight: $text-bold;
     font-size: $text-b2;
@@ -42,5 +47,13 @@
   align-items: center;
   p {
     margin: 0 4px 0 11px;
+    @include tablet-md {
+      margin: 0 2px 0 4px;
+    }
   }
 }
+
+.trader-button {
+  height: 30px;
+  padding: 0;
+}
diff --git a/app/(dashboard)/_ui/introduction/index.tsx b/app/(dashboard)/_ui/introduction/index.tsx
index b9ee51cd..6e578a34 100644
--- a/app/(dashboard)/_ui/introduction/index.tsx
+++ b/app/(dashboard)/_ui/introduction/index.tsx
@@ -1,27 +1,41 @@
 'use client'
 
+/* eslint-disable react-hooks/exhaustive-deps */
 import { useEffect, useRef, useState } from 'react'
 
 import { CloseIcon, OpenIcon } from '@/public/icons'
 import classNames from 'classnames/bind'
 
+import Textarea from '@/shared/ui/textarea'
+
+import useEditInformationStore from '../../my/strategies/manage/[strategyId]/_store/use-edit-information-store'
 import styles from './styles.module.scss'
 
 const cx = classNames.bind(styles)
 
 interface Props {
   content: string
+  isEditable?: boolean
 }
 
-const StrategyIntroduction = ({ content }: Props) => {
+const StrategyIntroduction = ({ content, isEditable = false }: Props) => {
   const [shouldShowMore, setShouldShowMore] = useState(false)
+  const [editContent, setEditContent] = useState<HTMLTextAreaElement | string | null>(null)
   const [isOverflow, setIsOverflow] = useState(false)
-  const contentRef = useRef<HTMLParagraphElement>(null)
+  const contentRef = useRef<HTMLPreElement>(null)
+  const setDescription = useEditInformationStore((state) => state.actions.setDescription)
 
   useEffect(() => {
     checkOverflow()
+    setEditContent(content)
   }, [content])
 
+  useEffect(() => {
+    if (editContent) {
+      setDescription(editContent as string)
+    }
+  }, [editContent])
+
   const checkOverflow = () => {
     if (contentRef.current) {
       setIsOverflow(contentRef.current.scrollHeight > contentRef.current.offsetHeight)
@@ -32,7 +46,15 @@ const StrategyIntroduction = ({ content }: Props) => {
     <div className={cx('container')}>
       <p className={cx('title')}>전략 상세 소개</p>
       <div className={cx('content', { expand: shouldShowMore })}>
-        <p ref={contentRef}>{content}</p>
+        {isEditable ? (
+          <Textarea
+            className={cx('textarea')}
+            value={editContent as string}
+            onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => setEditContent(e.target.value)}
+          />
+        ) : (
+          <pre ref={contentRef}>{content}</pre>
+        )}
       </div>
       {isOverflow && (
         <div className={cx('button-wrapper')}>
diff --git a/app/(dashboard)/_ui/introduction/styles.module.scss b/app/(dashboard)/_ui/introduction/styles.module.scss
index 773a3369..4a541c06 100644
--- a/app/(dashboard)/_ui/introduction/styles.module.scss
+++ b/app/(dashboard)/_ui/introduction/styles.module.scss
@@ -15,10 +15,13 @@
     &.expand {
       display: contents;
     }
-    p {
-      @include typo-c1;
+    pre {
+      @include typo-b3;
       line-height: 18px;
       color: $color-gray-600;
+      word-wrap: break-word;
+      word-break: break-word;
+      white-space: pre-wrap;
     }
   }
 
@@ -34,7 +37,8 @@
       color: $color-gray-500;
       background-color: transparent;
       svg {
-        margin: -3px 0 0 7px;
+        margin-top: -3px;
+        width: 28px;
       }
     }
   }
diff --git a/app/(dashboard)/_ui/list-header/index.tsx b/app/(dashboard)/_ui/list-header/index.tsx
index b8ace106..962fb45d 100644
--- a/app/(dashboard)/_ui/list-header/index.tsx
+++ b/app/(dashboard)/_ui/list-header/index.tsx
@@ -18,7 +18,13 @@ const ListHeader = ({ type = 'default' }: Props) => {
     <div className={cx('container', type)}>
       {LIST_HEADER[type].map((category) => (
         <div key={category} className={cx('category')}>
-          {category}
+          {category === 'SM SCORE' ? (
+            <>
+              <span>SM</span> <span>SCORE</span>
+            </>
+          ) : (
+            category
+          )}
         </div>
       ))}
     </div>
diff --git a/app/(dashboard)/_ui/list-header/styles.module.scss b/app/(dashboard)/_ui/list-header/styles.module.scss
index 5efb4b05..27dbb8df 100644
--- a/app/(dashboard)/_ui/list-header/styles.module.scss
+++ b/app/(dashboard)/_ui/list-header/styles.module.scss
@@ -16,10 +16,19 @@
     background-color: $color-white;
     border: 1px solid $color-gray-200;
     border-radius: 4px;
+    padding: 0 2px;
     @include typo-b2;
-
+    @include tablet-md {
+      font-size: $text-b3;
+    }
     &:not(:first-child) {
       margin-left: 5px;
     }
+    & span:nth-child(2) {
+      margin-left: 2px;
+      @include tablet-md {
+        display: none;
+      }
+    }
   }
 }
diff --git a/app/(dashboard)/_ui/navigation.tsx b/app/(dashboard)/_ui/navigation.tsx
index 951168a3..d5917965 100644
--- a/app/(dashboard)/_ui/navigation.tsx
+++ b/app/(dashboard)/_ui/navigation.tsx
@@ -10,7 +10,7 @@ import {
 
 import { PATH } from '@/shared/constants/path'
 import { useAuthStore } from '@/shared/stores/use-auth-store'
-import { isTrader } from '@/shared/types/auth'
+import { isSuperAdmin, isTrader } from '@/shared/types/auth'
 import SideNavigation from '@/shared/ui/side-navigation'
 import NavLinkItem from '@/shared/ui/side-navigation/nav-link-item'
 
@@ -25,7 +25,7 @@ const DashboardNavigation = () => {
       <NavLinkItem href={PATH.TRADERS} icon={TradersIcon}>
         트레이더 목록
       </NavLinkItem>
-      {isTrader(user) && (
+      {(isTrader(user) || isSuperAdmin(user)) && (
         <NavLinkItem href={PATH.MY_STRATEGIES} icon={StrategyIcon}>
           나의 전략
         </NavLinkItem>
diff --git a/app/(dashboard)/_ui/strategies-item/area-chart.tsx b/app/(dashboard)/_ui/strategies-item/area-chart.tsx
index e03e012e..e3e1bfea 100644
--- a/app/(dashboard)/_ui/strategies-item/area-chart.tsx
+++ b/app/(dashboard)/_ui/strategies-item/area-chart.tsx
@@ -20,7 +20,9 @@ interface Props {
 }
 
 const AreaChart = ({ profitRateChartData: data }: Props) => {
-  if (!data) return <div></div>
+  if (!data?.dates || !data?.profitRates || data?.dates.length < 3 || data?.profitRates.length < 3)
+    return <span className={cx('no-data')}>준비중..</span>
+
   const chartOptions: Highcharts.Options = {
     chart: {
       type: 'areaspline',
diff --git a/app/(dashboard)/_ui/strategies-item/index.tsx b/app/(dashboard)/_ui/strategies-item/index.tsx
index 63a99ae4..2f4ee765 100644
--- a/app/(dashboard)/_ui/strategies-item/index.tsx
+++ b/app/(dashboard)/_ui/strategies-item/index.tsx
@@ -4,11 +4,10 @@ import classNames from 'classnames/bind'
 
 import { PATH } from '@/shared/constants/path'
 import useModal from '@/shared/hooks/custom/use-modal'
-import { useAuthStore } from '@/shared/stores/use-auth-store'
 import { StrategiesModel } from '@/shared/types/strategy-data'
 import { Button } from '@/shared/ui/button'
 import { LinkButton } from '@/shared/ui/link-button'
-import SigninCheckModal from '@/shared/ui/modal/signin-check-modal'
+import StrategyDeleteModal from '@/shared/ui/modal/strategy-delete-modal'
 import { formatNumber } from '@/shared/utils/format'
 
 import AreaChart from './area-chart'
@@ -25,15 +24,14 @@ interface Props {
 
 const StrategiesItem = ({ strategiesData: data, type = 'default' }: Props) => {
   const router = useRouter()
-  const user = useAuthStore((state) => state.user)
-  const { isModalOpen, openModal, closeModal } = useModal()
+  const {
+    isModalOpen: isDeleteModalOpen,
+    openModal: openDeleteModal,
+    closeModal: closeDeleteModal,
+  } = useModal()
 
   const handleRouter = () => {
-    if (!user) {
-      openModal()
-    } else {
-      router.push(`${PATH.STRATEGIES}/${data.strategyId}`)
-    }
+    router.push(`${PATH.STRATEGIES}/${data.strategyId}`)
   }
 
   return (
@@ -56,7 +54,7 @@ const StrategiesItem = ({ strategiesData: data, type = 'default' }: Props) => {
           <p>{formatNumber(data.mdd)}</p>
         </div>
         <div className={cx('sm-score')}>
-          <p>{data.smScore}</p>
+          <p>{data.smScore.toFixed(1)}</p>
         </div>
         <div className={cx('profit')}>
           <span>누적 수익률</span>
@@ -86,17 +84,30 @@ const StrategiesItem = ({ strategiesData: data, type = 'default' }: Props) => {
                 variant="filled"
                 href={`/my/strategies/manage/${data.strategyId}`}
                 className={cx('manage-button')}
+                onClick={(e) => e.stopPropagation()}
               >
                 관리
               </LinkButton>
-              <Button size="small" variant="outline" className={cx('manage-button')}>
+              <Button
+                size="small"
+                variant="outline"
+                className={cx('manage-button')}
+                onClick={(e) => {
+                  e.stopPropagation()
+                  openDeleteModal()
+                }}
+              >
                 삭제
               </Button>
             </div>
           </>
         )}
       </button>
-      <SigninCheckModal isModalOpen={isModalOpen} onCloseModal={closeModal} />
+      <StrategyDeleteModal
+        isModalOpen={isDeleteModalOpen}
+        onCloseModal={closeDeleteModal}
+        strategyId={data.strategyId}
+      />
     </>
   )
 }
diff --git a/app/(dashboard)/_ui/strategies-item/strategies-summary.tsx b/app/(dashboard)/_ui/strategies-item/strategies-summary.tsx
index 78455cbb..d4c65e08 100644
--- a/app/(dashboard)/_ui/strategies-item/strategies-summary.tsx
+++ b/app/(dashboard)/_ui/strategies-item/strategies-summary.tsx
@@ -42,7 +42,7 @@ const StrategiesSummary = ({
       </div>
       <div className={cx('total-subscribe-star')}>
         <p>구독 {subscriptionCount}개</p>
-        <p>|</p>
+        <span>|</span>
         <TotalStar averageRating={averageRating} totalElements={totalReview} textColor="black" />
       </div>
     </div>
diff --git a/app/(dashboard)/_ui/strategies-item/styles.module.scss b/app/(dashboard)/_ui/strategies-item/styles.module.scss
index 6f871b2d..06cd2296 100644
--- a/app/(dashboard)/_ui/strategies-item/styles.module.scss
+++ b/app/(dashboard)/_ui/strategies-item/styles.module.scss
@@ -31,6 +31,9 @@
   .mdd,
   .sm-score {
     @include typo-b2;
+    @include tablet-md {
+      font-size: $text-b3;
+    }
   }
   .profit {
     & span {
@@ -39,6 +42,9 @@
     p {
       @include typo-b2;
       color: $color-orange-500;
+      @include tablet-md {
+        font-size: $text-b3;
+      }
     }
   }
 }
@@ -61,6 +67,10 @@
     & p {
       margin-left: 10px;
       @include typo-b2;
+      @include tablet-md {
+        font-size: $text-b3;
+        margin-left: 4px;
+      }
     }
   }
   .total-subscribe-star {
@@ -69,9 +79,15 @@
     height: 20px;
     gap: 6px;
     padding-top: 10px;
-    & p {
+    & p,
+    span {
       @include typo-c1;
     }
+    @include tablet-md {
+      & span {
+        display: none;
+      }
+    }
   }
 }
 
@@ -80,6 +96,9 @@
     background: transparent;
     svg {
       width: 36px;
+      @include tablet-md {
+        width: 30px;
+      }
     }
   }
 }
@@ -93,6 +112,9 @@
   display: flex;
   align-items: center;
   column-gap: 4px;
+  overflow: hidden;
+  min-height: 24px;
+  max-height: 44px;
   .icon-wrapper {
     .icon {
       position: relative;
@@ -112,7 +134,11 @@
   }
   &.details {
     flex-wrap: wrap;
-    max-height: 50px;
     row-gap: 1px;
   }
 }
+
+.no-data {
+  @include typo-b3;
+  color: $color-gray-600;
+}
diff --git a/app/(dashboard)/_ui/strategies-item/subscribe.tsx b/app/(dashboard)/_ui/strategies-item/subscribe.tsx
index 8e9d7a78..68a31bac 100644
--- a/app/(dashboard)/_ui/strategies-item/subscribe.tsx
+++ b/app/(dashboard)/_ui/strategies-item/subscribe.tsx
@@ -27,9 +27,7 @@ const Subscribe = ({ strategyId, subscriptionStatus, traderName }: Props) => {
   const { mutate } = useGetSubscribe()
 
   useEffect(() => {
-    if (subscriptionStatus) {
-      setIsSubscribed(true)
-    }
+    setIsSubscribed(subscriptionStatus)
   }, [subscriptionStatus])
 
   const handleSubscribe = (e: React.MouseEvent) => {
diff --git a/app/(dashboard)/_ui/subscriber-item/index.tsx b/app/(dashboard)/_ui/subscriber-item/index.tsx
index 68c73bd0..ac2c319d 100644
--- a/app/(dashboard)/_ui/subscriber-item/index.tsx
+++ b/app/(dashboard)/_ui/subscriber-item/index.tsx
@@ -1,8 +1,12 @@
 'use client'
 
+import { usePathname } from 'next/navigation'
+
 import classNames from 'classnames/bind'
 
+import { PATH } from '@/shared/constants/path'
 import { Button } from '@/shared/ui/button'
+import { LinkButton } from '@/shared/ui/link-button'
 
 import styles from './styles.module.scss'
 
@@ -10,23 +14,45 @@ const cx = classNames.bind(styles)
 
 interface Props {
   isMyStrategy?: boolean
+  isEditable?: boolean
   isSubscribed?: boolean
+  strategyId?: number
   subscribers: number
   onClick?: () => void
 }
 
-const SubscriberItem = ({ isSubscribed, isMyStrategy = false, subscribers, onClick }: Props) => {
+const SubscriberItem = ({
+  isSubscribed,
+  isEditable = false,
+  isMyStrategy = false,
+  strategyId,
+  subscribers,
+  onClick,
+}: Props) => {
+  const currentPath = usePathname()
+
   return (
-    <div className={cx('container')}>
+    <div className={cx('container', { edit: isEditable })}>
       <div>
         <span>구독 </span>
         <span>| </span>
         <span>{subscribers}</span>
       </div>
-      {!isMyStrategy && (
+      {!isMyStrategy ? (
         <Button size="small" variant="filled" onClick={onClick}>
           {isSubscribed ? '구독취소' : '구독하기'}
         </Button>
+      ) : (
+        !currentPath.includes(PATH.STRATEGIES_MANAGE) && (
+          <LinkButton
+            href={`${PATH.MY_STRATEGIES}/manage/${strategyId}`}
+            size="small"
+            variant="filled"
+            className={cx('trader-button')}
+          >
+            관리하기
+          </LinkButton>
+        )
       )}
     </div>
   )
diff --git a/app/(dashboard)/_ui/subscriber-item/styles.module.scss b/app/(dashboard)/_ui/subscriber-item/styles.module.scss
index 4d49f1e8..2ec9d8de 100644
--- a/app/(dashboard)/_ui/subscriber-item/styles.module.scss
+++ b/app/(dashboard)/_ui/subscriber-item/styles.module.scss
@@ -7,10 +7,24 @@
   border-radius: 5px;
   background-color: $color-white;
   margin-bottom: 18px;
+
+  &.edit {
+    background-color: $color-gray-200;
+  }
+
   span {
     font-size: 18px;
     font-weight: $text-semibold;
     color: $color-gray-800;
     margin-left: 4px;
   }
+  .trader-button {
+    padding: 10px 20px;
+  }
+  @include tablet-md {
+    padding: 0 20px;
+    span {
+      font-size: $text-b2;
+    }
+  }
 }
diff --git a/app/(dashboard)/my/_api/add-strategy.ts b/app/(dashboard)/my/_api/add-strategy.ts
index d78a692d..fa33b7a4 100644
--- a/app/(dashboard)/my/_api/add-strategy.ts
+++ b/app/(dashboard)/my/_api/add-strategy.ts
@@ -49,14 +49,15 @@ export interface StrategyModel {
   stockTypeIds: number[]
   minimumInvestmentAmount: MinimumInvestmentAmountType
   description: string
-  proposalFile?: ProposalFileInfoModel
+  proposalFile: ProposalFileInfoModel | null
 }
 
 export interface StrategyResponseModel {
   isSuccess: boolean
   message: string
   result: {
-    presignedUrl: string
+    strategyId: number
+    presignedUrl?: string
   }
   code: number
 }
diff --git a/app/(dashboard)/my/_api/delete-my-strategy.ts b/app/(dashboard)/my/_api/delete-my-strategy.ts
new file mode 100644
index 00000000..4bf3d10e
--- /dev/null
+++ b/app/(dashboard)/my/_api/delete-my-strategy.ts
@@ -0,0 +1,15 @@
+import axiosInstance from '@/shared/api/axios'
+import { APIResponseBaseModel } from '@/shared/types/response'
+
+export interface DeleteStrategyResponseModel extends APIResponseBaseModel<boolean> {
+  result: Record<string, never>
+}
+
+export const deleteMyStrategy = async (
+  strategyId: number
+): Promise<DeleteStrategyResponseModel> => {
+  const { data } = await axiosInstance.delete<DeleteStrategyResponseModel>(
+    `/api/my-strategies/${strategyId}`
+  )
+  return data
+}
diff --git a/app/(dashboard)/my/_api/delete-user-withdrawal.ts b/app/(dashboard)/my/_api/delete-user-withdrawal.ts
new file mode 100644
index 00000000..31236cbb
--- /dev/null
+++ b/app/(dashboard)/my/_api/delete-user-withdrawal.ts
@@ -0,0 +1,13 @@
+import axiosInstance from '@/shared/api/axios'
+
+interface WithDrawUserResponseModel<T> {
+  isSuccess: boolean
+  message: string
+  result: T
+  code: number
+}
+
+export const deleteUser = async () => {
+  const response = await axiosInstance.delete<WithDrawUserResponseModel<void>>('/api/users')
+  return response.data
+}
diff --git a/app/(dashboard)/my/_api/get-my-account-iamges.ts b/app/(dashboard)/my/_api/get-my-account-iamges.ts
index 297958f9..f9d3d88b 100644
--- a/app/(dashboard)/my/_api/get-my-account-iamges.ts
+++ b/app/(dashboard)/my/_api/get-my-account-iamges.ts
@@ -1,20 +1,9 @@
-import { ImageDataModel } from '@/app/(dashboard)/_ui/analysis-container/account-content'
-
 import axiosInstance from '@/shared/api/axios'
-
-interface ResponseModel {
-  content: ImageDataModel
-  first: boolean
-  last: boolean
-  page: number
-  size: number
-  totalElements: number
-  totalPages: number
-}
+import { AccountImageDataModel } from '@/shared/types/strategy-data'
 
 const getMyAccountImages = async (
   strategyId: number
-): Promise<ResponseModel | null | undefined> => {
+): Promise<AccountImageDataModel | null | undefined> => {
   try {
     const response = await axiosInstance.get(`/api/my-strategies/${strategyId}/account-images`)
     return response.data.result
diff --git a/app/(dashboard)/my/_api/get-profile.ts b/app/(dashboard)/my/_api/get-profile.ts
index 2112cd32..761eb4ed 100644
--- a/app/(dashboard)/my/_api/get-profile.ts
+++ b/app/(dashboard)/my/_api/get-profile.ts
@@ -10,6 +10,7 @@ export interface ProfileModel {
   infoAgreement: boolean
   role: string
   birthDate: string
+  joinDate: string
 }
 
 interface ProfileResponseModel {
diff --git a/app/(dashboard)/my/_api/get-proposal-file-name.ts b/app/(dashboard)/my/_api/get-proposal-file-name.ts
new file mode 100644
index 00000000..32fd32bd
--- /dev/null
+++ b/app/(dashboard)/my/_api/get-proposal-file-name.ts
@@ -0,0 +1,34 @@
+import axiosInstance from '@/shared/api/axios'
+
+interface StrategyDetailsResponseModel {
+  isSuccess: boolean
+  message: string
+  result: {
+    strategyName: string
+    tradeType: {
+      tradeTypeId: number
+      tradeTypeName: string
+      tradeTypeIconUrl: string
+    }
+    stockTypes: Array<{
+      stockTypeId: number
+      stockTypeName: string
+      stockIconUrl: string
+    }>
+    minimumInvestmentAmount: string
+    operationCycle: string
+    proposalFileName: string
+    proposalFileUrl: string
+    isPublic: boolean
+    description: string
+  }
+}
+
+const getProposalFileName = async (strategyId: number) => {
+  const response = await axiosInstance.get<StrategyDetailsResponseModel>(
+    `/api/my-strategies/modify/${strategyId}`
+  )
+  return response.data
+}
+
+export default getProposalFileName
diff --git a/app/(dashboard)/my/_api/manage-daily-analysis.ts b/app/(dashboard)/my/_api/manage-daily-analysis.ts
new file mode 100644
index 00000000..3c8206dc
--- /dev/null
+++ b/app/(dashboard)/my/_api/manage-daily-analysis.ts
@@ -0,0 +1,27 @@
+import axiosInstance from '@/shared/api/axios'
+
+export interface EditAnalysisPayloadModel {
+  date: string
+  transaction: number
+  dailyProfitLoss: number
+}
+
+export const editAnalysis = async (strategyId: number, payload: EditAnalysisPayloadModel) => {
+  const response = await axiosInstance.patch(
+    `/api/my-strategies/${strategyId}/daily-analysis`,
+    payload
+  )
+  return response.data
+}
+
+export const deleteAnalysis = async (strategyId: number, analysisId: number) => {
+  const response = await axiosInstance.delete(
+    `/api/my-strategies/${strategyId}/daily-analysis?analysisId=${analysisId}`
+  )
+  return response.data
+}
+
+export const deleteAllAnalysis = async (strategyId: number) => {
+  const response = await axiosInstance.delete(`/api/my-strategies/${strategyId}/daily-analysis/all`)
+  return response.data
+}
diff --git a/app/(dashboard)/my/_api/patch-profile.ts b/app/(dashboard)/my/_api/patch-user-profile.ts
similarity index 87%
rename from app/(dashboard)/my/_api/patch-profile.ts
rename to app/(dashboard)/my/_api/patch-user-profile.ts
index e613effb..953bfe7d 100644
--- a/app/(dashboard)/my/_api/patch-profile.ts
+++ b/app/(dashboard)/my/_api/patch-user-profile.ts
@@ -1,6 +1,6 @@
 import axiosInstance from '@/shared/api/axios'
 
-import { UserProfileModel } from '../_hooks/query/use-patch-profile'
+import { UserProfileModel } from '../_hooks/query/use-patch-user-profile'
 
 interface PatchUserProfileModel {
   isSuccess: boolean
diff --git a/app/(dashboard)/my/_api/post-account-image.ts b/app/(dashboard)/my/_api/post-account-image.ts
index 7e433c37..a4a5d15c 100644
--- a/app/(dashboard)/my/_api/post-account-image.ts
+++ b/app/(dashboard)/my/_api/post-account-image.ts
@@ -44,6 +44,5 @@ export const deleteAccountImages = async ({
     `/api/my-strategies/${strategyId}/delete-account-images`,
     imageIds
   )
-  console.log(response.data)
   return response.data
 }
diff --git a/app/(dashboard)/my/_api/post-edit-strategy.ts b/app/(dashboard)/my/_api/post-edit-strategy.ts
new file mode 100644
index 00000000..e385ac18
--- /dev/null
+++ b/app/(dashboard)/my/_api/post-edit-strategy.ts
@@ -0,0 +1,39 @@
+import { AxiosError } from 'axios'
+
+import axiosInstance from '@/shared/api/axios'
+
+export interface ContentModel {
+  strategyName: string
+  description: string
+  proposalFile?: {
+    proposalFileName: string
+    proposalFileSize: number
+  }
+  proposalModified: boolean
+}
+
+export interface EditStrategyResponseModel {
+  isSuccess: boolean
+  message: string
+  result: {
+    presignedUrl?: string
+  }
+  code: number
+}
+
+const postEditStrategy = async (
+  strategyId: number,
+  information: ContentModel
+): Promise<EditStrategyResponseModel> => {
+  try {
+    const response = await axiosInstance.post(
+      `/api/my-strategies/modify/${strategyId}`,
+      information
+    )
+    return response.data
+  } catch (err) {
+    throw new Error('서버 오류로 제안서 수정에 실패했습니다.', err as AxiosError)
+  }
+}
+
+export default postEditStrategy
diff --git a/app/(dashboard)/my/_hooks/query/use-add-strategy.ts b/app/(dashboard)/my/_hooks/query/use-add-strategy.ts
index 73f69c94..70320649 100644
--- a/app/(dashboard)/my/_hooks/query/use-add-strategy.ts
+++ b/app/(dashboard)/my/_hooks/query/use-add-strategy.ts
@@ -5,6 +5,9 @@ import { useRouter } from 'next/navigation'
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
 import { AxiosError } from 'axios'
 
+import uploadFileWithPresignedUrl from '@/shared/api/upload-file-with-presigned-url'
+import { QUERY_KEY } from '@/shared/constants/query-key'
+
 import {
   StrategyModel,
   StrategyResponseModel,
@@ -20,26 +23,43 @@ export const useAddStrategy = () => {
   const router = useRouter()
   const queryClient = useQueryClient()
   const [error, setError] = useState<string | null>(null)
+  const [isUploading, setIsUploading] = useState(false)
 
   const { data: strategyTypes, isLoading: isTypesLoading } = useQuery<
     StrategyTypeResponseModel,
     AxiosError<ErrorResponseModel>
   >({
-    queryKey: ['strategyTypes'],
+    queryKey: [QUERY_KEY.STRATEGY_TYPES],
     queryFn: () => strategyApi.getStrategyTypes().then((response) => response.data),
     retry: false,
     refetchOnWindowFocus: false,
   })
 
-  const mutation = useMutation<
+  const registerStrategyMutation = useMutation<
     StrategyResponseModel,
     AxiosError<ErrorResponseModel>,
-    StrategyModel
+    { data: StrategyModel; file?: File }
   >({
-    mutationFn: (data) => strategyApi.registerStrategy(data).then((response) => response.data),
+    mutationFn: async ({ data, file }) => {
+      const response = await strategyApi.registerStrategy(data)
+
+      if (file && response.data.result?.presignedUrl) {
+        setIsUploading(true)
+        try {
+          await uploadFileWithPresignedUrl(response.data.result.presignedUrl, file)
+        } catch (err) {
+          console.error('File upload failed:', err)
+          throw new Error('파일 업로드 중 오류가 발생했습니다.')
+        } finally {
+          setIsUploading(false)
+        }
+      }
+
+      return response.data
+    },
     onSuccess: () => {
       queryClient.invalidateQueries({
-        queryKey: ['addStrategies'],
+        queryKey: [QUERY_KEY.MY_STRATEGIES],
       })
       router.back()
     },
@@ -49,11 +69,15 @@ export const useAddStrategy = () => {
     },
   })
 
+  const registerStrategy = async (data: StrategyModel, file?: File) => {
+    await registerStrategyMutation.mutateAsync({ data, file })
+  }
+
   return {
     strategyTypes: strategyTypes?.result,
     isTypesLoading,
-    registerStrategy: mutation.mutate,
-    isRegistering: mutation.isPending,
+    registerStrategy,
+    isRegistering: registerStrategyMutation.isPending || isUploading,
     error,
   }
 }
diff --git a/app/(dashboard)/my/_hooks/query/use-analysis-mutation.ts b/app/(dashboard)/my/_hooks/query/use-analysis-mutation.ts
index fae29d08..79713780 100644
--- a/app/(dashboard)/my/_hooks/query/use-analysis-mutation.ts
+++ b/app/(dashboard)/my/_hooks/query/use-analysis-mutation.ts
@@ -5,6 +5,7 @@ import {
 } from '@/app/(dashboard)/my/_api/post-daily-analysis'
 import { useMutation, useQueryClient } from '@tanstack/react-query'
 
+import { QUERY_KEY } from '@/shared/constants/query-key'
 import { AnalysisDataModel } from '@/shared/types/strategy-data'
 
 interface UploadMutationParamsModel {
@@ -22,14 +23,14 @@ export const useAnalysisUploadMutation = (
     mutationFn: ({ data }) => uploadDailyAnalysis(strategyId, data),
     onSuccess: async () => {
       queryClient.invalidateQueries({
-        queryKey: ['myDailyAnalysis', strategyId],
+        queryKey: [QUERY_KEY.MY_DAILY_ANALYSIS, strategyId],
       })
 
       try {
         const newData = await getMyDailyAnalysis(strategyId, page, size)
-        queryClient.setQueryData(['myDailyAnalysis', strategyId], newData)
-      } catch (error) {
-        console.error('Failed to fetch updated my daily analysis data:', error)
+        queryClient.setQueryData([QUERY_KEY.MY_DAILY_ANALYSIS, strategyId], newData)
+      } catch (err) {
+        console.error('Failed to fetch updated my daily analysis data:', err)
       }
     },
   })
@@ -38,14 +39,14 @@ export const useAnalysisUploadMutation = (
     mutationFn: () => deleteAllAnalysis(strategyId),
     onSuccess: async () => {
       queryClient.invalidateQueries({
-        queryKey: ['myDailyAnalysis', strategyId],
+        queryKey: [QUERY_KEY.MY_DAILY_ANALYSIS, strategyId],
       })
 
       try {
         const newData = await getMyDailyAnalysis(strategyId, page, size)
-        queryClient.setQueryData(['myDailyAnalysis', strategyId], newData)
-      } catch (error) {
-        console.error('Failed to fetch updated my daily analysis data:', error)
+        queryClient.setQueryData([QUERY_KEY.MY_DAILY_ANALYSIS, strategyId], newData)
+      } catch (err) {
+        console.error('Failed to fetch updated my daily analysis data:', err)
       }
     },
   })
diff --git a/app/(dashboard)/my/_hooks/query/use-delete-account-images.ts b/app/(dashboard)/my/_hooks/query/use-delete-account-images.ts
index bb376905..4400262b 100644
--- a/app/(dashboard)/my/_hooks/query/use-delete-account-images.ts
+++ b/app/(dashboard)/my/_hooks/query/use-delete-account-images.ts
@@ -1,5 +1,7 @@
 import { useMutation, useQueryClient } from '@tanstack/react-query'
 
+import { QUERY_KEY } from '@/shared/constants/query-key'
+
 import { deleteAccountImages } from '../../_api/post-account-image'
 
 interface DeleteAccountImagesRequestModel {
@@ -14,7 +16,7 @@ export const useDeleteAccountImages = () => {
     mutationFn: (request: DeleteAccountImagesRequestModel) => deleteAccountImages(request),
     onSuccess: (_, request) => {
       queryClient.invalidateQueries({
-        queryKey: ['myAccountImages', request.strategyId],
+        queryKey: [QUERY_KEY.MY_ACCOUNT_IMAGES, request.strategyId],
       })
     },
   })
diff --git a/app/(dashboard)/my/_hooks/query/use-delete-my-strategy.ts b/app/(dashboard)/my/_hooks/query/use-delete-my-strategy.ts
new file mode 100644
index 00000000..38975959
--- /dev/null
+++ b/app/(dashboard)/my/_hooks/query/use-delete-my-strategy.ts
@@ -0,0 +1,20 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query'
+
+import { QUERY_KEY } from '@/shared/constants/query-key'
+
+import { deleteMyStrategy } from '../../_api/delete-my-strategy'
+
+export const useDeleteMyStrategy = () => {
+  const queryClient = useQueryClient()
+
+  const { mutate, isPending } = useMutation({
+    mutationFn: (strategyId: number) => deleteMyStrategy(strategyId),
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: [QUERY_KEY.MY_STRATEGIES],
+      })
+    },
+  })
+
+  return { mutate, isPending }
+}
diff --git a/app/(dashboard)/my/_hooks/query/use-get-favorite-strategy-list.ts b/app/(dashboard)/my/_hooks/query/use-get-favorite-strategy-list.ts
index 7138a936..85069e01 100644
--- a/app/(dashboard)/my/_hooks/query/use-get-favorite-strategy-list.ts
+++ b/app/(dashboard)/my/_hooks/query/use-get-favorite-strategy-list.ts
@@ -1,5 +1,7 @@
 import { useQuery } from '@tanstack/react-query'
 
+import { QUERY_KEY } from '@/shared/constants/query-key'
+
 import getFavoriteStrategyList from '../../_api/get-favorite-strategy-list'
 
 interface Props {
@@ -9,7 +11,7 @@ interface Props {
 
 const useGetFavoriteStrategyList = ({ page, size }: Props) => {
   return useQuery({
-    queryKey: ['favoriteStrategies', page, size],
+    queryKey: [QUERY_KEY.MY_FAVORITE_STRATEGIES, page, size],
     queryFn: () => getFavoriteStrategyList({ page, size }),
   })
 }
diff --git a/app/(dashboard)/my/_hooks/query/use-get-my-account-image.ts b/app/(dashboard)/my/_hooks/query/use-get-my-account-image.ts
index 7b9d32bc..3ff17411 100644
--- a/app/(dashboard)/my/_hooks/query/use-get-my-account-image.ts
+++ b/app/(dashboard)/my/_hooks/query/use-get-my-account-image.ts
@@ -1,10 +1,12 @@
 import { useQuery } from '@tanstack/react-query'
 
+import { QUERY_KEY } from '@/shared/constants/query-key'
+
 import getMyAccountImages from '../../_api/get-my-account-iamges'
 
 const useGetMyAccountImages = (strategyId: number) => {
   return useQuery({
-    queryKey: ['myAccountImages', strategyId],
+    queryKey: [QUERY_KEY.MY_ACCOUNT_IMAGES, strategyId],
     queryFn: () => getMyAccountImages(strategyId),
   })
 }
diff --git a/app/(dashboard)/my/_hooks/query/use-get-my-daily-analysis.ts b/app/(dashboard)/my/_hooks/query/use-get-my-daily-analysis.ts
index 3df8e5c8..7908e152 100644
--- a/app/(dashboard)/my/_hooks/query/use-get-my-daily-analysis.ts
+++ b/app/(dashboard)/my/_hooks/query/use-get-my-daily-analysis.ts
@@ -1,12 +1,14 @@
 import { useQuery } from '@tanstack/react-query'
 
+import { QUERY_KEY } from '@/shared/constants/query-key'
+
 import getMyDailyAnalysis from '../../_api/get-my-daily-analysis'
 
-const useGetAnalysis = (strategyId: number, page: number, size: number) => {
+const useGetMyDailyAnalysis = (strategyId: number, page: number, size: number) => {
   return useQuery({
-    queryKey: ['myDailyAnalysis', strategyId, page],
+    queryKey: [QUERY_KEY.MY_DAILY_ANALYSIS, strategyId, page, size],
     queryFn: () => getMyDailyAnalysis(strategyId, page, size),
   })
 }
 
-export default useGetAnalysis
+export default useGetMyDailyAnalysis
diff --git a/app/(dashboard)/my/_hooks/query/use-get-my-strategy-list.ts b/app/(dashboard)/my/_hooks/query/use-get-my-strategy-list.ts
index f0f096e2..e26c3e4d 100644
--- a/app/(dashboard)/my/_hooks/query/use-get-my-strategy-list.ts
+++ b/app/(dashboard)/my/_hooks/query/use-get-my-strategy-list.ts
@@ -1,6 +1,7 @@
 import { getMyStrategyList } from '@/app/(dashboard)/my/_api/get-my-strategy-list'
 import { useInfiniteQuery } from '@tanstack/react-query'
 
+import { QUERY_KEY } from '@/shared/constants/query-key'
 import { StrategiesModel } from '@/shared/types/strategy-data'
 
 interface StrategiesPageModel {
@@ -10,7 +11,7 @@ interface StrategiesPageModel {
 
 export const useGetMyStrategyList = () => {
   return useInfiniteQuery<StrategiesPageModel, Error>({
-    queryKey: ['myStrategies'],
+    queryKey: [QUERY_KEY.MY_STRATEGIES],
     queryFn: async ({ pageParam = 1 }) => {
       const page = typeof pageParam === 'number' ? pageParam : 1
       return getMyStrategyList({ page, size: 4 })
diff --git a/app/(dashboard)/my/_hooks/query/use-get-profile.ts b/app/(dashboard)/my/_hooks/query/use-get-profile.ts
index 67ee9ebc..63ea4333 100644
--- a/app/(dashboard)/my/_hooks/query/use-get-profile.ts
+++ b/app/(dashboard)/my/_hooks/query/use-get-profile.ts
@@ -1,10 +1,12 @@
 import { useQuery } from '@tanstack/react-query'
 
+import { QUERY_KEY } from '@/shared/constants/query-key'
+
 import { getProfile } from './../../_api/get-profile'
 
 const useGetProfile = () => {
   return useQuery({
-    queryKey: ['userProfile'],
+    queryKey: [QUERY_KEY.MY_PROFILE],
     queryFn: getProfile,
   })
 }
diff --git a/app/(dashboard)/my/_hooks/query/use-get-proposal-file-name.ts b/app/(dashboard)/my/_hooks/query/use-get-proposal-file-name.ts
new file mode 100644
index 00000000..2764fb87
--- /dev/null
+++ b/app/(dashboard)/my/_hooks/query/use-get-proposal-file-name.ts
@@ -0,0 +1,15 @@
+import { useQuery } from '@tanstack/react-query'
+
+import { QUERY_KEY } from '@/shared/constants/query-key'
+
+import getProposalFileName from '../../_api/get-proposal-file-name'
+
+const useGetProposalFileName = (strategyId: number) => {
+  return useQuery({
+    queryKey: [QUERY_KEY.STRATEGY_PROPOSAL_FILE_NAME, strategyId],
+    queryFn: () => getProposalFileName(strategyId),
+    enabled: !!strategyId,
+  })
+}
+
+export default useGetProposalFileName
diff --git a/app/(dashboard)/my/_hooks/query/use-manage-daily-analysis.ts b/app/(dashboard)/my/_hooks/query/use-manage-daily-analysis.ts
new file mode 100644
index 00000000..126e9372
--- /dev/null
+++ b/app/(dashboard)/my/_hooks/query/use-manage-daily-analysis.ts
@@ -0,0 +1,69 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query'
+
+import { QUERY_KEY } from '@/shared/constants/query-key'
+
+import {
+  EditAnalysisPayloadModel,
+  deleteAllAnalysis,
+  deleteAnalysis,
+  editAnalysis,
+} from '../../_api/manage-daily-analysis'
+
+export const useMyAnalysisMutation = (strategyId: number, page: number, size: number) => {
+  const queryClient = useQueryClient()
+  const queryKey = [QUERY_KEY.MY_DAILY_ANALYSIS, strategyId, page, size]
+
+  const { mutate: editAnalysisData } = useMutation({
+    mutationFn: ({ payload }: { payload: EditAnalysisPayloadModel }) => {
+      if (!strategyId) {
+        throw new Error('Strategy ID is required')
+      }
+      return editAnalysis(strategyId, payload)
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey })
+    },
+    onError: (err: Error) => {
+      console.error('Edit error:', err)
+      throw err
+    },
+  })
+
+  const { mutate: deleteAnalysisData } = useMutation({
+    mutationFn: (analysisId: number) => {
+      if (!strategyId) {
+        throw new Error('Strategy ID is required')
+      }
+      return deleteAnalysis(strategyId, analysisId)
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey })
+    },
+    onError: (err: Error) => {
+      console.error('Delete error:', err)
+      throw err
+    },
+  })
+
+  const { mutate: deleteAllAnalysisData } = useMutation({
+    mutationFn: () => {
+      if (!strategyId) {
+        throw new Error('Strategy ID is required')
+      }
+      return deleteAllAnalysis(strategyId)
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey })
+    },
+    onError: (err: Error) => {
+      console.error('Delete all error:', err)
+      throw err
+    },
+  })
+
+  return {
+    editAnalysisData,
+    deleteAnalysisData,
+    deleteAllAnalysisData,
+  }
+}
diff --git a/app/(dashboard)/my/_hooks/query/use-patch-profile.ts b/app/(dashboard)/my/_hooks/query/use-patch-profile.ts
deleted file mode 100644
index 6d122247..00000000
--- a/app/(dashboard)/my/_hooks/query/use-patch-profile.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import { useMutation, useQueryClient } from '@tanstack/react-query'
-
-import patchProfile from '../../_api/patch-profile'
-
-export interface UserProfileModel {
-  nickname?: string
-  password?: string
-  imageDto?: {
-    imageName: string
-    size: number
-  }
-  phone?: string
-  email?: string
-  imageChange: boolean
-}
-
-const usePatchUserProfile = () => {
-  const queryClient = useQueryClient()
-
-  return useMutation({
-    mutationFn: (data: UserProfileModel) => patchProfile(data),
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['userProfile'] })
-    },
-    onError: (error) => {
-      console.error('Error updating user profile:', error)
-    },
-  })
-}
-
-export default usePatchUserProfile
diff --git a/app/(dashboard)/my/_hooks/query/use-patch-user-profile.ts b/app/(dashboard)/my/_hooks/query/use-patch-user-profile.ts
new file mode 100644
index 00000000..ab68328c
--- /dev/null
+++ b/app/(dashboard)/my/_hooks/query/use-patch-user-profile.ts
@@ -0,0 +1,93 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query'
+
+import { QUERY_KEY } from '@/shared/constants/query-key'
+
+import patchProfile from '../../_api/patch-user-profile'
+
+export interface UserProfileModel {
+  nickname?: string | null
+  password?: string | null
+  imageDto?: {
+    imageName: string
+    size: number
+  } | null
+  phone?: string | null
+  email?: string | null
+  imageChange: boolean
+}
+
+interface UpdateProfileModel {
+  profileData: UserProfileModel
+  imageFile?: File | null
+}
+
+interface PatchProfileResponseModel {
+  isSuccess: boolean
+  message: string
+  result: string
+  code: number
+}
+interface UserProfileDataModel {
+  nickname: string
+  imageUrl: string | null
+  phone: string | null
+  email: string
+}
+
+const usePatchUserProfile = () => {
+  const queryClient = useQueryClient()
+
+  return useMutation<PatchProfileResponseModel, Error, UpdateProfileModel>({
+    mutationFn: async ({ profileData, imageFile }: UpdateProfileModel) => {
+      try {
+        const updateData = {
+          ...profileData,
+          ...(imageFile && {
+            imageDto: {
+              imageName: imageFile.name,
+              size: imageFile.size,
+            },
+          }),
+        }
+
+        const profileResponse = await patchProfile(updateData)
+
+        if (imageFile && profileResponse.result) {
+          await fetch(profileResponse.result, {
+            method: 'PUT',
+            body: imageFile,
+            headers: {
+              'Content-Type': imageFile.type,
+            },
+          })
+        }
+
+        return profileResponse
+      } catch (err) {
+        if (err instanceof Error) {
+          throw new Error(`프로필 업데이트 실패: ${err.message}`)
+        }
+        throw err
+      }
+    },
+    onSuccess: (data) => {
+      queryClient.invalidateQueries({ queryKey: [QUERY_KEY.MY_PROFILE] })
+
+      if (data.result) {
+        const imageUrl = data.result.split('?')[0]
+        queryClient.setQueryData<UserProfileDataModel>([QUERY_KEY.MY_PROFILE], (oldData) => {
+          if (!oldData) return oldData
+          return {
+            ...oldData,
+            imageUrl,
+          }
+        })
+      }
+    },
+    onError: (err: Error) => {
+      console.error('프로필 업데이트 실패:', err.message)
+    },
+  })
+}
+
+export default usePatchUserProfile
diff --git a/app/(dashboard)/my/_hooks/query/use-post-edit-strategy.ts b/app/(dashboard)/my/_hooks/query/use-post-edit-strategy.ts
new file mode 100644
index 00000000..5b26782e
--- /dev/null
+++ b/app/(dashboard)/my/_hooks/query/use-post-edit-strategy.ts
@@ -0,0 +1,33 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query'
+
+import uploadFileWithPresignedUrl from '@/shared/api/upload-file-with-presigned-url'
+import { QUERY_KEY } from '@/shared/constants/query-key'
+
+import postEditStrategy, {
+  ContentModel,
+  EditStrategyResponseModel,
+} from '../../_api/post-edit-strategy'
+
+const usePostEditStrategy = () => {
+  const queryClient = useQueryClient()
+
+  return useMutation<
+    EditStrategyResponseModel,
+    unknown,
+    { strategyId: number; information: ContentModel; file?: File }
+  >({
+    mutationFn: async ({ strategyId, information, file }) => {
+      const response = await postEditStrategy(strategyId, information)
+
+      if (file && information.proposalModified && response.result.presignedUrl) {
+        await uploadFileWithPresignedUrl(response.result.presignedUrl, file)
+      }
+      return response
+    },
+    onSuccess: (_, { strategyId }) => {
+      queryClient.invalidateQueries({ queryKey: [QUERY_KEY.STRATEGY_DETAILS, strategyId] })
+    },
+  })
+}
+
+export default usePostEditStrategy
diff --git a/app/(dashboard)/my/_hooks/query/use-upload-account-images.ts b/app/(dashboard)/my/_hooks/query/use-upload-account-images.ts
index aa7d3a76..c190fe0a 100644
--- a/app/(dashboard)/my/_hooks/query/use-upload-account-images.ts
+++ b/app/(dashboard)/my/_hooks/query/use-upload-account-images.ts
@@ -1,5 +1,7 @@
 import { useMutation, useQueryClient } from '@tanstack/react-query'
 
+import { QUERY_KEY } from '@/shared/constants/query-key'
+
 import { uploadAccountImages } from '../../_api/post-account-image'
 
 interface UseUploadAccountImagesProps {
@@ -40,7 +42,7 @@ export const useUploadAccountImages = ({
     },
     onSuccess: () => {
       queryClient.invalidateQueries({
-        queryKey: ['myAccountImages', strategyId],
+        queryKey: [QUERY_KEY.MY_ACCOUNT_IMAGES, strategyId],
         exact: true,
       })
 
diff --git a/app/(dashboard)/my/_hooks/query/use-user-withdrawal.ts b/app/(dashboard)/my/_hooks/query/use-user-withdrawal.ts
new file mode 100644
index 00000000..94670ab6
--- /dev/null
+++ b/app/(dashboard)/my/_hooks/query/use-user-withdrawal.ts
@@ -0,0 +1,23 @@
+import { useRouter } from 'next/navigation'
+
+import { useMutation } from '@tanstack/react-query'
+
+import { PATH } from '@/shared/constants/path'
+import { useAuth } from '@/shared/hooks/custom/use-auth'
+
+import { deleteUser } from '../../_api/delete-user-withdrawal'
+
+export const useWithdraw = () => {
+  const router = useRouter()
+  const { logout } = useAuth()
+
+  return useMutation({
+    mutationFn: deleteUser,
+    onSuccess: (data) => {
+      if (data.isSuccess) {
+        logout()
+        router.replace(PATH.HOME)
+      }
+    },
+  })
+}
diff --git a/app/(dashboard)/my/profile/_hooks/custom/use-profile-form.ts b/app/(dashboard)/my/profile/_hooks/custom/use-profile-form.ts
new file mode 100644
index 00000000..2ef13bc1
--- /dev/null
+++ b/app/(dashboard)/my/profile/_hooks/custom/use-profile-form.ts
@@ -0,0 +1,247 @@
+import { ChangeEvent, useState } from 'react'
+
+import { SIGNUP_ERROR_MESSAGES } from '@/app/(landing)/signup/_constants/signup'
+
+import { checkNicknameDuplicate, checkPhoneDuplicate } from '@/shared/api/check-duplicate'
+import { isValidNickname, isValidPassword, isValidPhone } from '@/shared/utils/validation'
+
+import { ProfileModel } from '../../../_api/get-profile'
+import {
+  ProfileFormErrorsModel,
+  ProfileFormModel,
+  ProfileFormStateModel,
+} from '../../_ui/user-info/types'
+
+const initialFormState = {
+  isNicknameVerified: false,
+  isPhoneVerified: false,
+  isPasswordVerified: false,
+}
+
+export const useProfileForm = (profile: ProfileModel) => {
+  const initialForm: ProfileFormModel = {
+    name: profile?.userName || '',
+    nickname: profile?.nickname || '',
+    email: profile?.email || '',
+    password: '',
+    passwordConfirm: '',
+    phone: profile?.phone || '',
+    birthDate: profile?.birthDate || '',
+    joinDate: profile?.joinDate || '',
+  }
+
+  const [form, setForm] = useState<ProfileFormModel>(initialForm)
+  const [formState, setFormState] = useState<ProfileFormStateModel>(initialFormState)
+  const [errors, setErrors] = useState<ProfileFormErrorsModel>({})
+  const [hasNicknameChanged, setHasNicknameChanged] = useState(false)
+  const [hasPhoneChanged, setHasPhoneChanged] = useState(false)
+  const [successMessages, setSuccessMessages] = useState<{ [key: string]: string | null }>({
+    nickname: null,
+    phone: null,
+    password: null,
+  })
+
+  const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
+    const { name, value } = e.target
+    setForm((prev) => ({ ...prev, [name]: value }))
+
+    if (name === 'nickname') {
+      const isChanged = value !== profile?.nickname
+      setHasNicknameChanged(isChanged)
+      if (isChanged) {
+        setFormState((prev) => ({ ...prev, isNicknameVerified: false }))
+        setSuccessMessages((prev) => ({ ...prev, nickname: null }))
+        if (value && !isValidNickname(value)) {
+          setErrors((prev) => ({ ...prev, nickname: SIGNUP_ERROR_MESSAGES.NICKNAME_LENGTH }))
+        } else {
+          setErrors((prev) => ({ ...prev, nickname: null }))
+        }
+      } else {
+        setFormState((prev) => ({ ...prev, isNicknameVerified: true }))
+        setErrors((prev) => ({ ...prev, nickname: null }))
+      }
+    }
+
+    if (name === 'phone') {
+      const isChanged = value !== profile?.phone
+      setHasPhoneChanged(isChanged)
+      if (isChanged) {
+        setFormState((prev) => ({ ...prev, isPhoneVerified: false }))
+        setSuccessMessages((prev) => ({ ...prev, phone: null }))
+        if (value && !isValidPhone(value)) {
+          setErrors((prev) => ({ ...prev, phone: SIGNUP_ERROR_MESSAGES.PHONE_INVALID }))
+        } else {
+          setErrors((prev) => ({ ...prev, phone: null }))
+        }
+      } else {
+        setFormState((prev) => ({ ...prev, isPhoneVerified: true }))
+        setErrors((prev) => ({ ...prev, phone: null }))
+      }
+    }
+
+    if (name === 'password' || name === 'passwordConfirm') {
+      setFormState((prev) => ({ ...prev, isPasswordVerified: false }))
+      setSuccessMessages((prev) => ({ ...prev, password: null }))
+      setErrors((prev) => ({ ...prev, password: null }))
+    }
+  }
+
+  const handleNicknameCheck = async () => {
+    if (!isValidNickname(form.nickname)) {
+      setErrors((prev) => ({ ...prev, nickname: SIGNUP_ERROR_MESSAGES.NICKNAME_LENGTH }))
+      return
+    }
+
+    try {
+      const response = await checkNicknameDuplicate(form.nickname)
+      if (response.result.isAvailable) {
+        setFormState((prev) => ({ ...prev, isNicknameVerified: true }))
+        setErrors((prev) => ({ ...prev, nickname: null }))
+        setSuccessMessages((prev) => ({ ...prev, nickname: '사용할 수 있는 닉네임입니다.' }))
+      } else {
+        setFormState((prev) => ({ ...prev, isNicknameVerified: false }))
+        setErrors((prev) => ({ ...prev, nickname: SIGNUP_ERROR_MESSAGES.NICKNAME_DUPLICATED }))
+        setSuccessMessages((prev) => ({ ...prev, nickname: null }))
+      }
+    } catch (err) {
+      console.error('닉네임 중복 확인 실패:', err)
+      setFormState((prev) => ({ ...prev, isNicknameVerified: false }))
+      setErrors((prev) => ({ ...prev, nickname: SIGNUP_ERROR_MESSAGES.NICKNAME_NOT_ALLOWED }))
+      setSuccessMessages((prev) => ({ ...prev, nickname: null }))
+    }
+  }
+
+  const handlePhoneCheck = async () => {
+    if (!isValidPhone(form.phone)) {
+      setErrors((prev) => ({ ...prev, phone: SIGNUP_ERROR_MESSAGES.PHONE_INVALID }))
+      return
+    }
+
+    try {
+      const response = await checkPhoneDuplicate(form.phone)
+      if (response.result.isAvailable) {
+        setFormState((prev) => ({ ...prev, isPhoneVerified: true }))
+        setErrors((prev) => ({ ...prev, phone: null }))
+        setSuccessMessages((prev) => ({ ...prev, phone: '사용할 수 있는 휴대폰 번호입니다.' }))
+      } else {
+        setFormState((prev) => ({ ...prev, isPhoneVerified: false }))
+        setErrors((prev) => ({ ...prev, phone: SIGNUP_ERROR_MESSAGES.PHONE_DUPLICATED }))
+        setSuccessMessages((prev) => ({ ...prev, phone: null }))
+      }
+    } catch (err) {
+      console.error('휴대폰 번호 중복 확인 실패:', err)
+      setFormState((prev) => ({ ...prev, isPhoneVerified: false }))
+      setErrors((prev) => ({ ...prev, phone: SIGNUP_ERROR_MESSAGES.PHONE_CHECK_FAILED }))
+      setSuccessMessages((prev) => ({ ...prev, phone: null }))
+    }
+  }
+
+  const handlePasswordCheck = () => {
+    if (!form.password && !form.passwordConfirm) {
+      setFormState((prev) => ({ ...prev, isPasswordVerified: true }))
+      setErrors((prev) => ({ ...prev, password: null }))
+      return
+    }
+
+    if (!form.password || !form.passwordConfirm) {
+      setErrors((prev) => ({
+        ...prev,
+        password: SIGNUP_ERROR_MESSAGES.PASSWORD_REQUIRED,
+      }))
+      setSuccessMessages((prev) => ({ ...prev, password: null }))
+      return
+    }
+
+    if (!isValidPassword(form.password)) {
+      setErrors((prev) => ({
+        ...prev,
+        password: SIGNUP_ERROR_MESSAGES.PASSWORD_INVALID,
+      }))
+      setSuccessMessages((prev) => ({ ...prev, password: null }))
+      return
+    }
+
+    if (form.password !== form.passwordConfirm) {
+      setErrors((prev) => ({
+        ...prev,
+        password: SIGNUP_ERROR_MESSAGES.PASSWORD_MISMATCH,
+      }))
+      setSuccessMessages((prev) => ({ ...prev, password: null }))
+      return
+    }
+
+    setFormState((prev) => ({ ...prev, isPasswordVerified: true }))
+    setErrors((prev) => ({ ...prev, password: null }))
+    setSuccessMessages((prev) => ({ ...prev, password: '비밀번호가 확인되었습니다.' }))
+  }
+
+  const validateChangedFields = () => {
+    const errors: ProfileFormErrorsModel = {}
+
+    if (hasNicknameChanged) {
+      if (!formState.isNicknameVerified) {
+        errors.nickname = SIGNUP_ERROR_MESSAGES.NICKNAME_CHECK_REQUIRED
+      }
+    }
+
+    if (hasPhoneChanged) {
+      if (!formState.isPhoneVerified) {
+        errors.phone = SIGNUP_ERROR_MESSAGES.PHONE_CHECK_REQUIRED
+      }
+    }
+
+    if (form.password || form.passwordConfirm) {
+      if (!formState.isPasswordVerified) {
+        errors.password = SIGNUP_ERROR_MESSAGES.PASSWORD_REQUIRED
+      }
+    }
+
+    setErrors(errors)
+    return Object.keys(errors).length === 0
+  }
+
+  const isFormValid = (isImageVerified: boolean) => {
+    if (!hasNicknameChanged && !hasPhoneChanged && !form.password && !form.passwordConfirm) {
+      return isImageVerified
+    }
+
+    if (hasNicknameChanged && !formState.isNicknameVerified) {
+      return false
+    }
+
+    if (hasPhoneChanged && !formState.isPhoneVerified) {
+      return false
+    }
+
+    if ((form.password || form.passwordConfirm) && !formState.isPasswordVerified) {
+      return false
+    }
+
+    return true
+  }
+
+  const getUpdatedFields = () => {
+    return {
+      nickname: hasNicknameChanged ? form.nickname : null,
+      phone: hasPhoneChanged ? form.phone : null,
+      password: form.password || null,
+      email: form.email,
+    }
+  }
+
+  return {
+    form,
+    formState,
+    errors,
+    successMessages,
+    hasNicknameChanged,
+    hasPhoneChanged,
+    handleInputChange,
+    handleNicknameCheck,
+    handlePhoneCheck,
+    handlePasswordCheck,
+    validateChangedFields,
+    isFormValid,
+    getUpdatedFields,
+  }
+}
diff --git a/app/(dashboard)/my/profile/_hooks/custom/use-profile-image.ts b/app/(dashboard)/my/profile/_hooks/custom/use-profile-image.ts
new file mode 100644
index 00000000..22fa90ef
--- /dev/null
+++ b/app/(dashboard)/my/profile/_hooks/custom/use-profile-image.ts
@@ -0,0 +1,74 @@
+import { ChangeEvent, useEffect, useState } from 'react'
+
+const MAX_IMAGE_SIZE = 2 * 1024 * 1024
+
+export const useProfileImage = () => {
+  const [selectedImage, setSelectedImage] = useState<File | null>(null)
+  const [previewUrl, setPreviewUrl] = useState<string | null>(null)
+  const [imageError, setImageError] = useState<string | null>(null)
+  const [isImageVerified, setIsImageVerified] = useState(false)
+
+  useEffect(() => {
+    return () => {
+      if (previewUrl) {
+        URL.revokeObjectURL(previewUrl)
+      }
+    }
+  }, [previewUrl])
+
+  const validateImage = (file: File): boolean => {
+    setImageError(null)
+    setIsImageVerified(false)
+
+    if (!file.type.startsWith('image/')) {
+      setImageError('이미지 파일만 업로드 가능합니다.')
+      return false
+    }
+
+    if (file.size > MAX_IMAGE_SIZE) {
+      setImageError('이미지 크기는 2MB 이하여야 합니다.')
+      return false
+    }
+
+    setIsImageVerified(true)
+    return true
+  }
+
+  const handleImageChange = (e: ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0]
+    if (!file) return
+
+    if (validateImage(file)) {
+      const objectUrl = URL.createObjectURL(file)
+      setPreviewUrl(objectUrl)
+      setSelectedImage(file)
+    } else {
+      setSelectedImage(null)
+      setPreviewUrl(null)
+    }
+  }
+
+  const handleImageDelete = () => {
+    if (previewUrl) {
+      URL.revokeObjectURL(previewUrl)
+    }
+    setSelectedImage(null)
+    setPreviewUrl(null)
+    setImageError(null)
+    setIsImageVerified(false)
+
+    const fileInput = document.getElementById('profile-image') as HTMLInputElement
+    if (fileInput) {
+      fileInput.value = ''
+    }
+  }
+
+  return {
+    selectedImage,
+    previewUrl,
+    imageError,
+    isImageVerified,
+    handleImageChange,
+    handleImageDelete,
+  }
+}
diff --git a/app/(dashboard)/my/profile/_ui/user-info/index.tsx b/app/(dashboard)/my/profile/_ui/user-info/index.tsx
index 0d3aa53d..86d9ad3b 100644
--- a/app/(dashboard)/my/profile/_ui/user-info/index.tsx
+++ b/app/(dashboard)/my/profile/_ui/user-info/index.tsx
@@ -1,262 +1,137 @@
 'use client'
 
-import { ChangeEvent, useState } from 'react'
-
+import Image from 'next/image'
 import { useRouter } from 'next/navigation'
 
-import { SIGNUP_ERROR_MESSAGES } from '@/app/(landing)/signup/_constants/signup'
 import { CameraIcon } from '@/public/icons'
-import axios from 'axios'
 import classNames from 'classnames/bind'
 
-import axiosInstance from '@/shared/api/axios'
-import { checkNicknameDuplicate, checkPhoneDuplicate } from '@/shared/api/check-duplicate'
 import { PATH } from '@/shared/constants/path'
 import Avatar from '@/shared/ui/avatar'
 import { Button } from '@/shared/ui/button'
-import { Input } from '@/shared/ui/input'
+import Input from '@/shared/ui/input'
 import { LinkButton } from '@/shared/ui/link-button'
 
 import { ProfileModel } from '../../../_api/get-profile'
+import usePatchUserProfile from '../../../_hooks/query/use-patch-user-profile'
+import { useProfileForm } from '../../_hooks/custom/use-profile-form'
+import { useProfileImage } from '../../_hooks/custom/use-profile-image'
 import styles from './styles.module.scss'
-import { ProfileFormErrorsModel, ProfileFormModel, ProfileFormStateModel } from './types'
-import { validateProfileForm } from './utils'
 
 const cx = classNames.bind(styles)
 
-const initialFormState = {
-  isNicknameVerified: false,
-  isPhoneVerified: false,
-}
-
 interface Props {
   isEditable?: boolean
   profile: ProfileModel
 }
 
-const uploadImageToS3 = async (presignedUrl: string, file: File): Promise<void> => {
-  try {
-    await axiosInstance.put(presignedUrl, file, {
-      headers: {
-        'Content-Type': file.type,
-      },
-    })
-  } catch (error) {
-    console.error('이미지 업로드 실패:', error)
-    throw new Error('이미지 업로드에 실패했습니다')
-  }
-}
 const UserInfo = ({ profile, isEditable = false }: Props) => {
   const router = useRouter()
-
-  const initialForm: ProfileFormModel = {
-    name: profile?.userName || '',
-    nickname: profile?.nickname || '',
-    email: profile?.email || '',
-    password: '',
-    passwordConfirm: '',
-    phone: profile?.phone || '',
-    birthDate: profile?.birthDate || '',
-  }
-
-  const [form, setForm] = useState<ProfileFormModel>(initialForm)
-  const [formState, setFormState] = useState<ProfileFormStateModel>(initialFormState)
-  const [errors, setErrors] = useState<ProfileFormErrorsModel>({})
-  const [isValidated, setIsValidated] = useState(false)
-  const [isNicknameModified, setIsNicknameModified] = useState(false)
-  const [isPhoneModified, setIsPhoneModified] = useState(false)
-  const [selectedImage, setSelectedImage] = useState<File | null>(null)
-  const [previewUrl, setPreviewUrl] = useState<string | null>(null)
-  const [isUploading, setIsUploading] = useState(false)
-
-  const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
-    const { name, value } = e.target
-    setForm((prev) => ({ ...prev, [name]: value }))
-
-    if (isValidated) {
-      setErrors((prev) => ({
-        ...prev,
-        [name]: null,
-      }))
-    }
-
-    if (name === 'nickname') {
-      setIsNicknameModified(true)
-      setErrors((prev) => ({ ...prev, nickname: null }))
-    }
-    if (name === 'phone') {
-      setIsPhoneModified(true)
-      setErrors((prev) => ({ ...prev, phone: null }))
-    }
-  }
-
-  const handleImageChange = (e: ChangeEvent<HTMLInputElement>) => {
-    const file = e.target.files?.[0]
-    if (!file) return
-
-    if (!file.type.startsWith('image/')) {
-      alert('이미지 파일만 업로드가 가능합니다.')
-      return
-    }
-
-    const maxSize = 5 * 1024 * 1024
-    if (file.size > maxSize) {
-      alert('파일 크기는 5MB 이하여야 합니다.')
-      return
-    }
-
-    const reader = new FileReader()
-    reader.onload = (e) => {
-      setPreviewUrl(e.target?.result as string)
-    }
-    reader.readAsDataURL(file)
-
-    setSelectedImage(file)
-  }
-
-  const handleNicknameCheck = async () => {
-    try {
-      const response = await checkNicknameDuplicate(form.nickname)
-      if (response.result.isAvailable) {
-        setFormState((prev) => ({ ...prev, isNicknameVerified: true }))
-        setIsNicknameModified(false)
-        if (errors.nickname) {
-          setErrors((prev) => ({ ...prev, nickname: null }))
-        }
-      } else {
-        setErrors((prev) => ({ ...prev, nickname: SIGNUP_ERROR_MESSAGES.NICKNAME_DUPLICATED }))
-        setFormState((prev) => ({ ...prev, isNicknameVerified: false }))
-      }
-    } catch (err) {
-      console.error('닉네임 중복 확인 실패:', err)
-      setErrors((prev) => ({ ...prev, nickname: SIGNUP_ERROR_MESSAGES.NICKNAME_CHECK_FAILED }))
-      setFormState((prev) => ({ ...prev, isNicknameVerified: false }))
-    }
-  }
-
-  const handlePhoneCheck = async () => {
-    try {
-      const response = await checkPhoneDuplicate(form.phone)
-      if (response.result.isAvailable) {
-        setFormState((prev) => ({ ...prev, isPhoneVerified: true }))
-        setIsPhoneModified(false)
-        if (errors.phone) {
-          setErrors((prev) => ({ ...prev, phone: null }))
-        }
-      } else {
-        setErrors((prev) => ({ ...prev, phone: SIGNUP_ERROR_MESSAGES.PHONE_DUPLICATED }))
-        setFormState((prev) => ({ ...prev, isPhoneVerified: false }))
-      }
-    } catch (err) {
-      console.error('휴대폰 번호 중복 확인 실패:', err)
-      setErrors((prev) => ({ ...prev, phone: SIGNUP_ERROR_MESSAGES.PHONE_CHECK_FAILED }))
-      setFormState((prev) => ({ ...prev, isPhoneVerified: false }))
-    }
-  }
-
-  const handleImageDelete = () => {
-    setSelectedImage(null)
-    setPreviewUrl(null)
-  }
+  const updateProfile = usePatchUserProfile()
+
+  const {
+    form,
+    errors,
+    successMessages,
+    hasNicknameChanged,
+    hasPhoneChanged,
+    handleInputChange,
+    handleNicknameCheck,
+    handlePhoneCheck,
+    handlePasswordCheck,
+    validateChangedFields,
+    isFormValid,
+    getUpdatedFields,
+  } = useProfileForm(profile)
+
+  const {
+    selectedImage,
+    previewUrl,
+    imageError,
+    isImageVerified,
+    handleImageChange,
+    handleImageDelete,
+  } = useProfileImage()
 
   const handleBack = () => {
     router.back()
   }
 
   const handleFormSubmit = async () => {
-    const formErrors = validateProfileForm(
-      form,
-      formState.isNicknameVerified,
-      formState.isPhoneVerified
-    )
-    setIsValidated(true)
-
-    if (Object.keys(formErrors).length > 0) {
-      setErrors(formErrors)
-      return
-    }
+    if (!validateChangedFields()) return
 
     try {
-      setIsUploading(true)
-
+      const updatedFields = getUpdatedFields()
       const updateData = {
-        nickName: form.nickname,
-        phoneNum: form.phone,
-        password: form.password || null,
-        email: form.email,
+        ...updatedFields,
         imageChange: selectedImage !== null,
-        profileImage: selectedImage
-          ? {
-              imageName: selectedImage.name,
-              size: selectedImage.size,
-            }
-          : null,
-      }
-
-      console.log('요청 데이터:', updateData)
-
-      const response = await axiosInstance.patch('/api/users/mypage/profile', updateData)
-
-      if (!response.data.isSuccess) {
-        throw new Error(response.data.message)
-      }
-
-      if (selectedImage && response.data.data?.presignedUrl) {
-        await uploadImageToS3(response.data.data.presignedUrl, selectedImage)
       }
 
-      alert('프로필이 성공적으로 업데이트되었습니다.')
-      router.push(PATH.PROFILE)
-    } catch (error) {
-      console.error('프로필 업데이트 실패:', error)
-      if (axios.isAxiosError(error)) {
-        const errorMessage = error.response?.data?.message || '프로필 업데이트에 실패했습니다.'
-        alert(errorMessage)
-      } else {
-        alert('프로필 업데이트에 실패했습니다. 다시 시도해주세요.')
-      }
-    } finally {
-      setIsUploading(false)
+      await updateProfile.mutateAsync(
+        {
+          profileData: updateData,
+          imageFile: selectedImage,
+        },
+        {
+          onSuccess: () => {
+            router.push(PATH.PROFILE)
+          },
+        }
+      )
+    } catch (err) {
+      console.error('프로필 업데이트 실패:', err)
     }
   }
 
-  if (!profile) {
-    return null
-  }
+  if (!profile) return null
+
+  const displayImageUrl = previewUrl || profile.imageUrl || ''
+  const shouldShowImage = Boolean(previewUrl || profile.imageUrl)
 
   return (
     <div className={cx('container')}>
       <p className={cx('title')}>개인 정보</p>
       <div className={cx('line')}></div>
-
       <div className={cx('content')}>
         <div className={cx('content-wrapper')}>
           <div className={cx('left-wrapper')}>
-            <div className={cx('avatar-wrapper')}>
-              {previewUrl ? (
-                <img src={previewUrl} alt="Preview" className={cx('avatar-preview')} />
+            <div className={cx('avatar-wrapper', { isEditable })}>
+              {shouldShowImage ? (
+                <div className={cx('image-container')}>
+                  <Image
+                    src={displayImageUrl}
+                    alt="Profile"
+                    width={200}
+                    height={200}
+                    className={cx('avatar-preview')}
+                    unoptimized
+                  />
+                </div>
               ) : (
                 <Avatar size="xxlarge" />
               )}
-              <div className={cx('camera-wrapper')}>
-                <input
-                  type="file"
-                  id="profile-image"
-                  accept="image/*"
-                  onChange={handleImageChange}
-                  style={{ display: 'none' }}
-                />
-                <label htmlFor="profile-image">
-                  <CameraIcon
-                    className={cx('camera-icon')}
-                    style={{ cursor: isUploading ? 'wait' : 'pointer' }}
+              {isEditable && (
+                <div className={cx('camera-wrapper')}>
+                  <input
+                    type="file"
+                    id="profile-image"
+                    accept="image/*"
+                    onChange={handleImageChange}
+                    style={{ display: 'none' }}
                   />
-                </label>
-              </div>
+                  <label htmlFor="profile-image">
+                    <CameraIcon
+                      className={cx('camera-icon')}
+                      style={{ cursor: updateProfile.isPending ? 'wait' : 'pointer' }}
+                    />
+                  </label>
+                </div>
+              )}
             </div>
             {isEditable && selectedImage && (
               <Button onClick={handleImageDelete}>프로필 사진 삭제</Button>
             )}
+            {imageError && <p className={cx('error-message')}>{imageError}</p>}
           </div>
 
           <div className={cx('right-wrapper')}>
@@ -265,17 +140,32 @@ const UserInfo = ({ profile, isEditable = false }: Props) => {
                 개인 정보 수정
               </LinkButton>
             )}
-            <div className={cx('first-row')}>
-              <p className={cx('title')}>이름</p>
-              <Input
-                id="name"
-                name="name"
-                value={form.name}
-                inputSize="compact"
-                className={cx('input')}
-                isWhiteDisabled={!isEditable}
-                disabled={isEditable}
-              />
+
+            <div className={cx('row')}>
+              <div>
+                <p className={cx('title')}>이름</p>
+                <Input
+                  id="name"
+                  name="name"
+                  value={form.name}
+                  inputSize="compact"
+                  className={cx('input')}
+                  isWhiteDisabled={!isEditable}
+                  disabled={true}
+                />
+              </div>
+              <div>
+                <p className={cx('title')}>가입일자</p>
+                <Input
+                  id="joinDate"
+                  name="joinDate"
+                  value={form.joinDate}
+                  inputSize="compact"
+                  className={cx('input')}
+                  isWhiteDisabled={!isEditable}
+                  disabled={true}
+                />
+              </div>
             </div>
 
             <div className={cx('row')}>
@@ -286,7 +176,7 @@ const UserInfo = ({ profile, isEditable = false }: Props) => {
                   value={form.email}
                   className={cx('input')}
                   isWhiteDisabled={!isEditable}
-                  disabled={isEditable}
+                  disabled={true}
                 />
               </div>
               <div>
@@ -301,17 +191,16 @@ const UserInfo = ({ profile, isEditable = false }: Props) => {
                       className={cx('input')}
                       inputSize="compact"
                       isWhiteDisabled={!isEditable}
-                      errorMessage={errors.phone}
                     />
-                    {isEditable && <Button onClick={handlePhoneCheck}>확인</Button>}
+                    {isEditable && (
+                      <Button onClick={handlePhoneCheck} disabled={!hasPhoneChanged || !form.phone}>
+                        확인
+                      </Button>
+                    )}
                   </div>
-                  {formState.isPhoneVerified && !isPhoneModified && (
-                    <p className={cx('verified-message')}>사용할 수 있는 휴대폰 번호입니다.</p>
-                  )}
-                  {isPhoneModified && (
-                    <p className={cx('modified-message')}>
-                      휴대폰 번호가 수정되었습니다. 다시 확인해 주세요.
-                    </p>
+                  {errors.phone && <p className={cx('error-message')}>{errors.phone}</p>}
+                  {successMessages.phone && (
+                    <p className={cx('success-message')}>{successMessages.phone}</p>
                   )}
                 </div>
               </div>
@@ -325,7 +214,7 @@ const UserInfo = ({ profile, isEditable = false }: Props) => {
                   value={form.birthDate}
                   className={cx('input')}
                   isWhiteDisabled={!isEditable}
-                  disabled={isEditable}
+                  disabled={true}
                 />
               </div>
               <div>
@@ -340,17 +229,19 @@ const UserInfo = ({ profile, isEditable = false }: Props) => {
                       onChange={handleInputChange}
                       className={cx('input')}
                       isWhiteDisabled={!isEditable}
-                      errorMessage={errors.nickname}
                     />
-                    {isEditable && <Button onClick={handleNicknameCheck}>확인</Button>}
+                    {isEditable && (
+                      <Button
+                        onClick={handleNicknameCheck}
+                        disabled={!hasNicknameChanged || !form.nickname}
+                      >
+                        확인
+                      </Button>
+                    )}
                   </div>
-                  {formState.isNicknameVerified && !isNicknameModified && (
-                    <p className={cx('verified-message')}>사용할 수 있는 닉네임입니다.</p>
-                  )}
-                  {isNicknameModified && (
-                    <p className={cx('modified-message')}>
-                      닉네임이 수정되었습니다. 다시 중복확인해 주세요.
-                    </p>
+                  {errors.nickname && <p className={cx('error-message')}>{errors.nickname}</p>}
+                  {successMessages.nickname && (
+                    <p className={cx('success-message')}>{successMessages.nickname}</p>
                   )}
                 </div>
               </div>
@@ -369,28 +260,39 @@ const UserInfo = ({ profile, isEditable = false }: Props) => {
                     onChange={handleInputChange}
                     placeholder="비밀번호를 입력하세요"
                     className={cx('input')}
-                    errorMessage={errors.password}
                   />
                 </div>
                 <div>
                   <p className={cx('title')}>비밀번호 확인</p>
-                  <Input
-                    id="passwordConfirm"
-                    name="passwordConfirm"
-                    type="password"
-                    value={form.passwordConfirm}
-                    onChange={handleInputChange}
-                    placeholder="한 번 더 입력하세요"
-                    className={cx('input')}
-                    inputSize="compact"
-                  />
+                  <div className={cx('position-wrapper')}>
+                    <Input
+                      id="passwordConfirm"
+                      name="passwordConfirm"
+                      type="password"
+                      value={form.passwordConfirm}
+                      onChange={handleInputChange}
+                      placeholder="한 번 더 입력하세요"
+                      className={cx('input')}
+                      inputSize="compact"
+                    />
+                    <Button
+                      onClick={handlePasswordCheck}
+                      disabled={!form.password && !form.passwordConfirm}
+                    >
+                      확인
+                    </Button>
+                  </div>
+                  {errors.password && <p className={cx('error-message')}>{errors.password}</p>}
+                  {successMessages.password && (
+                    <p className={cx('success-message')}>{successMessages.password}</p>
+                  )}
                 </div>
               </div>
             )}
             {isEditable && (
               <div>
                 <p className={cx('notification')}>
-                  * 비밀번호는 문자, 숫자 포함 6~20자로 구성되어야 합니다.
+                  * 비밀번호는 영문과 숫자를 포함하여 6~20자로 구성되어야 합니다.
                 </p>
               </div>
             )}
@@ -398,16 +300,20 @@ const UserInfo = ({ profile, isEditable = false }: Props) => {
         </div>
         {isEditable && (
           <div className={cx('button-wrapper')}>
-            <Button className={cx('left-button')} onClick={handleBack} disabled={isUploading}>
+            <Button
+              className={cx('left-button')}
+              onClick={handleBack}
+              disabled={updateProfile.isPending}
+            >
               뒤로가기
             </Button>
             <Button
               className={cx('right-button')}
               variant="filled"
               onClick={handleFormSubmit}
-              disabled={isUploading}
+              disabled={updateProfile.isPending || !isFormValid(isImageVerified)}
             >
-              {isUploading ? '저장 중...' : '저장하기'}
+              {updateProfile.isPending ? '저장 중...' : '저장하기'}
             </Button>
           </div>
         )}
diff --git a/app/(dashboard)/my/profile/_ui/user-info/styles.module.scss b/app/(dashboard)/my/profile/_ui/user-info/styles.module.scss
index da2506e2..145db2a3 100644
--- a/app/(dashboard)/my/profile/_ui/user-info/styles.module.scss
+++ b/app/(dashboard)/my/profile/_ui/user-info/styles.module.scss
@@ -1,8 +1,9 @@
 .container {
   background-color: $color-white;
   width: 897px;
-  height: 854px;
+  height: 100%;
   padding: 44px 40px;
+  border-radius: 5px;
 }
 
 .title {
@@ -34,50 +35,81 @@
   display: flex;
   flex-direction: column;
   flex: 1;
-  margin-right: 50px;
+  margin-right: 20px;
+  align-items: center;
 }
 
 .avatar-wrapper {
   position: relative;
   display: inline-block;
-  margin-bottom: 35px;
-
-  .camera-wrapper {
-    position: absolute;
-    bottom: 40px;
-    right: 10px;
-    width: 36px;
-    height: 36px;
-    transform: translate(50%, 50%);
-    background: $color-orange-500;
-    border-radius: 50%;
-    border: 4px solid $color-white;
-    cursor: pointer;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    .camera-icon {
-      fill: $color-white;
-      width: 18px;
-      height: 18px;
-    }
+  margin-bottom: 20px;
+  margin-right: 40px;
+  &.isEditable {
+    margin-right: 10px;
+  }
+}
+
+.image-container {
+  width: 150px;
+  height: 150px;
+  border-radius: 50%;
+  overflow: hidden;
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.avatar-preview {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: center;
+  border-radius: 50%;
+}
+
+.camera-wrapper {
+  position: absolute;
+  bottom: 40px;
+  right: 10px;
+  width: 36px;
+  height: 36px;
+  transform: translate(50%, 50%);
+  background: $color-orange-500;
+  border-radius: 50%;
+  border: 4px solid $color-white;
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  .camera-icon {
+    fill: $color-white;
+    width: 18px;
+    height: 18px;
   }
 }
 
+.error-message {
+  color: $color-orange-700;
+  @include typo-b3;
+  margin-top: 8px;
+}
+
+.success-message {
+  color: $color-indigo;
+  @include typo-b3;
+  margin-top: 8px;
+}
+
 .right-wrapper {
   display: flex;
   flex-direction: column;
+  margin-top: -10px;
 
   .edit-button {
     align-self: flex-end;
-    margin-top: 20px;
-  }
-
-  .first-row {
-    display: flex;
-    flex-direction: column;
-    margin-bottom: 36px;
+    margin-bottom: 20px;
   }
 
   .title {
@@ -88,34 +120,27 @@
 
   .row {
     display: flex;
-    gap: 27px;
-    align-items: center;
+    gap: 32px;
+    align-items: flex-start;
     margin-bottom: 36px;
-
-    .input {
-      flex: 1;
-    }
   }
 
   .password-row {
     display: flex;
-    gap: 27px;
-    align-items: center;
+    gap: 32px;
+    align-items: flex-start;
   }
 }
 
 .button-wrapper {
-  margin-top: 103px;
+  margin-top: 40px;
   display: flex;
   justify-content: center;
   gap: 32px;
   width: 100%;
   height: 40px;
 
-  .left-button {
-    width: 112px;
-  }
-
+  .left-button,
   .right-button {
     width: 112px;
   }
@@ -131,16 +156,16 @@
 .position {
   display: flex;
   flex-direction: column;
-  align-items: center;
-  gap: 27px;
+  align-items: flex-start;
 }
+
 .position-wrapper {
   display: flex;
+  align-items: center;
   gap: 12px;
 }
 
-.nickname-verified {
-  margin-top: 0;
-  @include typo-b3;
-  color: $color-indigo;
+.input {
+  border-radius: 4px;
+  border: 1px solid $color-gray-300;
 }
diff --git a/app/(dashboard)/my/profile/_ui/user-info/types.ts b/app/(dashboard)/my/profile/_ui/user-info/types.ts
index 05409966..4c1aed15 100644
--- a/app/(dashboard)/my/profile/_ui/user-info/types.ts
+++ b/app/(dashboard)/my/profile/_ui/user-info/types.ts
@@ -11,11 +11,13 @@ export interface ProfileFormModel {
   passwordConfirm: string
   phone: string
   birthDate: string
+  joinDate: string
 }
 
 export interface ProfileFormStateModel {
   isNicknameVerified: boolean
   isPhoneVerified: boolean
+  isPasswordVerified: boolean
 }
 
 export interface ProfileFormErrorsModel {
@@ -24,3 +26,20 @@ export interface ProfileFormErrorsModel {
   passwordConfirm?: ProfileErrorMessageType | null
   phone?: ProfileErrorMessageType | null
 }
+
+export interface UserProfileModel {
+  nickName: string
+  phoneNum: string
+  password?: string
+  email: string
+  imageChange: boolean
+}
+
+export interface ProfileModel {
+  userName: string
+  nickname: string
+  email: string
+  phone: string
+  birthDate: string
+  profileImage?: string | null
+}
diff --git a/app/(dashboard)/my/profile/_ui/user-profile/index.tsx b/app/(dashboard)/my/profile/_ui/user-profile/index.tsx
index bd4e247e..ff86fb4c 100644
--- a/app/(dashboard)/my/profile/_ui/user-profile/index.tsx
+++ b/app/(dashboard)/my/profile/_ui/user-profile/index.tsx
@@ -10,9 +10,10 @@ interface Props {
   role: string
   nickname: string
   email: string
+  imageURL?: string | undefined
 }
 
-const UserProfile = ({ role, nickname, email }: Props) => {
+const UserProfile = ({ role, nickname, email, imageURL }: Props) => {
   return (
     <div className={cx('container')}>
       <p className={cx('title')}>프로필 정보</p>
@@ -24,7 +25,7 @@ const UserProfile = ({ role, nickname, email }: Props) => {
           <p className={cx('email')}>{email}</p>
         </div>
         <div className={cx('right-wrapper')}>
-          <Avatar size="xlarge" />
+          <Avatar size="xlarge" src={imageURL} />
         </div>
       </div>
     </div>
diff --git a/app/(dashboard)/my/profile/_ui/user-profile/styles.module.scss b/app/(dashboard)/my/profile/_ui/user-profile/styles.module.scss
index f95f67fe..fcabae34 100644
--- a/app/(dashboard)/my/profile/_ui/user-profile/styles.module.scss
+++ b/app/(dashboard)/my/profile/_ui/user-profile/styles.module.scss
@@ -1,8 +1,8 @@
 .container {
   background-color: $color-white;
   width: 375px;
-  height: 280px;
   padding: 44px 40px;
+  border-radius: 5px;
 }
 
 .title {
diff --git a/app/(dashboard)/my/profile/_ui/user-withdraw/index.tsx b/app/(dashboard)/my/profile/_ui/user-withdraw/index.tsx
deleted file mode 100644
index 6e443ff4..00000000
--- a/app/(dashboard)/my/profile/_ui/user-withdraw/index.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-'use client'
-
-import { useRouter } from 'next/navigation'
-
-import classNames from 'classnames/bind'
-
-import { Button } from '@/shared/ui/button'
-
-import styles from './styles.module.scss'
-
-const cx = classNames.bind(styles)
-
-const UserWithdraw = () => {
-  const router = useRouter()
-  const handleWithdraw = () => {}
-  const handleBack = () => {
-    router.back()
-  }
-  return (
-    <div className={cx('container')}>
-      <p className={cx('title')}>회원탈퇴</p>
-      <div className={cx('line')}></div>
-      <p className={cx('message')}>회원 탈퇴 메세지</p>
-      <div className={cx('content')}>
-        <div className={cx('message-wrapper')}>
-          <p>ㆍ탈퇴 즉시 모든 개인정보가 삭제됩니다.</p>
-          <p>ㆍ구독한 전략에 대한 모든 내용이 삭제됩니다.</p>
-        </div>
-      </div>
-      <div className={cx('button-wrapper')}>
-        <Button className={cx('left-button')} onClick={handleBack}>
-          뒤로가기
-        </Button>
-        <Button className={cx('right-button')} variant="filled" onClick={handleWithdraw}>
-          탈퇴
-        </Button>
-      </div>
-    </div>
-  )
-}
-export default UserWithdraw
diff --git a/app/(dashboard)/my/profile/_ui/user-withdraw/styles.module.scss b/app/(dashboard)/my/profile/_ui/user-withdraw/styles.module.scss
deleted file mode 100644
index 35e2f626..00000000
--- a/app/(dashboard)/my/profile/_ui/user-withdraw/styles.module.scss
+++ /dev/null
@@ -1,68 +0,0 @@
-.container {
-  background-color: $color-white;
-  width: 897px;
-  height: 854px;
-  padding: 44px 40px;
-}
-
-.title {
-  @include typo-b1;
-  color: $color-gray-700;
-  margin-bottom: 22px;
-}
-
-.line {
-  width: 100%;
-  height: 1px;
-  background-color: $color-gray-300;
-}
-
-.message {
-  margin-top: 69px;
-  text-align: center;
-  @include typo-h4;
-  color: $color-gray-700;
-}
-
-.content {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.message-wrapper {
-  margin-top: 51px;
-  border: 1px solid $color-gray-600;
-  border-radius: 6px;
-  width: 569px;
-  height: 206px;
-  color: $color-gray-700;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  gap: 10px;
-
-  p {
-    @include typo-b2;
-    margin: 0;
-    line-height: 1.5;
-  }
-}
-
-.button-wrapper {
-  margin-top: 58px;
-  display: flex;
-  justify-content: center;
-  gap: 32px;
-  width: 100%;
-  height: 40px;
-
-  .left-button {
-    width: 112px;
-  }
-
-  .right-button {
-    width: 112px;
-  }
-}
diff --git a/app/(dashboard)/my/profile/edit/page.tsx b/app/(dashboard)/my/profile/edit/page.tsx
index 5c2b9406..94190652 100644
--- a/app/(dashboard)/my/profile/edit/page.tsx
+++ b/app/(dashboard)/my/profile/edit/page.tsx
@@ -1,19 +1,37 @@
 'use client'
 
+import classNames from 'classnames/bind'
+
+import { PATH } from '@/shared/constants/path'
+import { LinkButton } from '@/shared/ui/link-button'
+
 import useGetProfile from '../../_hooks/query/use-get-profile'
 import UserInfo from '../_ui/user-info'
+import UserProfile from '../_ui/user-profile'
+import styles from './styles.module.scss'
+
+const cx = classNames.bind(styles)
 
 const MyProfileEditPage = () => {
-  const { data: profile, isLoading } = useGetProfile()
+  const { data: profile } = useGetProfile()
 
   if (!profile) {
     return null
   }
 
   return (
-    <>
-      <UserInfo profile={profile} isEditable={true} />
-    </>
+    <div className={cx('container')}>
+      <p className={cx('title')}>나의 정보</p>
+      <div className={cx('wrapper')}>
+        <UserInfo profile={profile} isEditable={true} />
+        <div className={cx('user-profile')}>
+          <UserProfile role={profile.role} nickname={profile.nickname} email={profile.email} />
+          <div className={cx('link-button')}>
+            <LinkButton href={PATH.PROFILE_WITHDRAW}>탈퇴하기</LinkButton>
+          </div>
+        </div>
+      </div>
+    </div>
   )
 }
 
diff --git a/app/(dashboard)/my/profile/page.module.scss b/app/(dashboard)/my/profile/edit/styles.module.scss
similarity index 71%
rename from app/(dashboard)/my/profile/page.module.scss
rename to app/(dashboard)/my/profile/edit/styles.module.scss
index 9fe14a05..6fd74ad3 100644
--- a/app/(dashboard)/my/profile/page.module.scss
+++ b/app/(dashboard)/my/profile/edit/styles.module.scss
@@ -1,5 +1,5 @@
 .container {
-  padding: 40px 28px;
+  padding: 20px 28px;
 }
 
 .title {
@@ -10,12 +10,15 @@
 
 .wrapper {
   display: flex;
-  justify-content: space-between;
+  flex-direction: row;
+  gap: 28px;
+  height: 100%;
 }
 
 .user-profile {
   display: flex;
   flex-direction: column;
+  justify-content: start;
 }
 
 .link-button {
diff --git a/app/(dashboard)/my/profile/page.tsx b/app/(dashboard)/my/profile/page.tsx
index da50ca52..f3ea794a 100644
--- a/app/(dashboard)/my/profile/page.tsx
+++ b/app/(dashboard)/my/profile/page.tsx
@@ -8,12 +8,12 @@ import { LinkButton } from '@/shared/ui/link-button'
 import useGetProfile from '../_hooks/query/use-get-profile'
 import UserInfo from './_ui/user-info'
 import UserProfile from './_ui/user-profile'
-import styles from './page.module.scss'
+import styles from './styles.module.scss'
 
 const cx = classNames.bind(styles)
 
 const MyProfilePage = () => {
-  const { data: profile, isLoading } = useGetProfile()
+  const { data: profile } = useGetProfile()
 
   if (!profile) {
     return null
@@ -25,7 +25,12 @@ const MyProfilePage = () => {
       <div className={cx('wrapper')}>
         <UserInfo profile={profile} />
         <div className={cx('user-profile')}>
-          <UserProfile role={profile.role} nickname={profile.nickname} email={profile.email} />
+          <UserProfile
+            role={profile.role}
+            nickname={profile.nickname}
+            email={profile.email}
+            imageURL={profile.imageUrl ? profile.imageUrl : undefined}
+          />
           <div className={cx('link-button')}>
             <LinkButton href={PATH.PROFILE_WITHDRAW}>탈퇴하기</LinkButton>
           </div>
diff --git a/app/(dashboard)/my/profile/styles.module.scss b/app/(dashboard)/my/profile/styles.module.scss
new file mode 100644
index 00000000..6fd74ad3
--- /dev/null
+++ b/app/(dashboard)/my/profile/styles.module.scss
@@ -0,0 +1,27 @@
+.container {
+  padding: 20px 28px;
+}
+
+.title {
+  margin-top: 40px;
+  @include typo-h4;
+  margin-bottom: 22px;
+}
+
+.wrapper {
+  display: flex;
+  flex-direction: row;
+  gap: 28px;
+  height: 100%;
+}
+
+.user-profile {
+  display: flex;
+  flex-direction: column;
+  justify-content: start;
+}
+
+.link-button {
+  align-self: flex-end;
+  margin-top: 25px;
+}
diff --git a/app/(dashboard)/my/profile/withdraw/page.tsx b/app/(dashboard)/my/profile/withdraw/page.tsx
index 178574c8..866b5629 100644
--- a/app/(dashboard)/my/profile/withdraw/page.tsx
+++ b/app/(dashboard)/my/profile/withdraw/page.tsx
@@ -1,7 +1,83 @@
-import UserWithdraw from '../_ui/user-withdraw'
+'use client'
+
+import { useRouter } from 'next/navigation'
+
+import classNames from 'classnames/bind'
+
+import useModal from '@/shared/hooks/custom/use-modal'
+import { Button } from '@/shared/ui/button'
+import WithdrawCheckModal from '@/shared/ui/modal/withdraw-check-modal'
+
+import useGetProfile from '../../_hooks/query/use-get-profile'
+import { useWithdraw } from '../../_hooks/query/use-user-withdrawal'
+import UserProfile from '../_ui/user-profile'
+import styles from './styles.module.scss'
+
+const cx = classNames.bind(styles)
 
 const MyProfileWithdrawPage = () => {
-  return <UserWithdraw />
+  const router = useRouter()
+  const { mutate: withdraw, isPending } = useWithdraw()
+  const { isModalOpen, openModal, closeModal } = useModal()
+
+  const handleWithdraw = () => {
+    withdraw()
+    closeModal()
+  }
+
+  const handleBack = () => {
+    router.back()
+  }
+
+  const { data: profile } = useGetProfile()
+
+  if (!profile) {
+    return null
+  }
+
+  return (
+    <div className={cx('container')}>
+      <p className={cx('title')}>나의 정보</p>
+      <div className={cx('wrapper')}>
+        <div className={cx('content')}>
+          <p className={cx('withdraw-title')}>회원 탈퇴</p>
+          <div className={cx('message-wrapper')}>
+            <p className={cx('withdraw-message')}>회원 탈퇴 메세지</p>
+            <div className={cx('notice-list')}>
+              <p>ㆍ탈퇴 즉시 모든 개인정보가 삭제됩니다.</p>
+              <p>ㆍ구독한 전략에 대한 모든 내용이 삭제됩니다.</p>
+            </div>
+          </div>
+          <div className={cx('button-wrapper')}>
+            <Button className={cx('left-button')} onClick={handleBack} disabled={isPending}>
+              뒤로가기
+            </Button>
+            <Button
+              className={cx('right-button')}
+              variant="filled"
+              onClick={openModal}
+              disabled={isPending}
+            >
+              {isPending ? '처리중...' : '탈퇴'}
+            </Button>
+          </div>
+        </div>
+        <div className={cx('user-profile')}>
+          <UserProfile
+            role={profile.role}
+            nickname={profile.nickname}
+            email={profile.email}
+            imageURL={profile.imageUrl ? profile.imageUrl : undefined}
+          />
+        </div>
+      </div>
+      <WithdrawCheckModal
+        isModalOpen={isModalOpen}
+        onCloseModal={closeModal}
+        onConfirm={handleWithdraw}
+      />
+    </div>
+  )
 }
 
 export default MyProfileWithdrawPage
diff --git a/app/(dashboard)/my/profile/withdraw/styles.module.scss b/app/(dashboard)/my/profile/withdraw/styles.module.scss
new file mode 100644
index 00000000..5eaed757
--- /dev/null
+++ b/app/(dashboard)/my/profile/withdraw/styles.module.scss
@@ -0,0 +1,74 @@
+.container {
+  padding: 20px 28px;
+}
+
+.title {
+  margin-top: 40px;
+  @include typo-h4;
+  margin-bottom: 22px;
+}
+
+.wrapper {
+  display: flex;
+  flex-direction: row;
+  gap: 28px;
+  height: 100%;
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 80vh;
+  background-color: $color-white;
+
+  .withdraw-title {
+    @include typo-b1;
+    padding: 32px 0;
+    margin: 0 24px 36px 24px;
+    border-bottom: 1px solid $color-gray-300;
+  }
+}
+
+.message-wrapper {
+  background-color: var(--color-gray-50);
+  padding: 24px;
+  border-radius: 8px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.withdraw-message {
+  @include typo-h4;
+  margin-bottom: 16px;
+}
+
+.notice-list {
+  width: 600px;
+  height: 200px;
+  border: 1px solid $color-gray-600;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  p {
+    margin-bottom: 8px;
+  }
+}
+
+.button-wrapper {
+  display: flex;
+  gap: 24px;
+  margin-top: 24px;
+  justify-content: center;
+}
+
+.left-button {
+  width: 120px;
+}
+
+.right-button {
+  width: 120px;
+}
diff --git a/app/(dashboard)/my/questions/[questionId]/_ui/question-container/index.tsx b/app/(dashboard)/my/questions/[questionId]/_ui/question-container/index.tsx
index 9150e3f7..2e8078ec 100644
--- a/app/(dashboard)/my/questions/[questionId]/_ui/question-container/index.tsx
+++ b/app/(dashboard)/my/questions/[questionId]/_ui/question-container/index.tsx
@@ -4,7 +4,6 @@ import { useRef, useState } from 'react'
 
 import { useParams, useRouter } from 'next/navigation'
 
-import usePostQuestion from '@/app/(dashboard)/strategies/[strategyId]/_hooks/query/use-post-question'
 import classNames from 'classnames/bind'
 
 import { PATH } from '@/shared/constants/path'
@@ -12,13 +11,13 @@ import { useAuthStore } from '@/shared/stores/use-auth-store'
 import { Button } from '@/shared/ui/button'
 import { ErrorMessage } from '@/shared/ui/error-message'
 import AddQuestionModal from '@/shared/ui/modal/add-question-modal'
-import { Textarea } from '@/shared/ui/textarea'
+import QuestionDeleteModal from '@/shared/ui/modal/question-delete-modal'
+import Textarea from '@/shared/ui/textarea'
 
 import useDeleteAnswer from '../../../_hooks/query/use-delete-answer'
 import useDeleteQuestion from '../../../_hooks/query/use-delete-question'
 import useGetQuestionDetails from '../../../_hooks/query/use-get-question-details'
 import usePostAnswer from '../../../_hooks/query/use-post-answer'
-import QuestionDeleteModal from '../../../_ui/modal/question-delete-modal'
 import QuestionDetailCard from '../question-detail-card'
 import styles from './styles.module.scss'
 
@@ -38,7 +37,7 @@ const QuestionContainer = () => {
   const { mutate: submitAnswer } = usePostAnswer(parseInt(questionId as string))
   const { mutate: deleteAnswer } = useDeleteAnswer()
   const { mutate: deleteQuestion } = useDeleteQuestion()
-  const { mutate: postQuestion } = usePostQuestion()
+
   const { data: questionDetails } = useGetQuestionDetails({
     questionId: parseInt(questionId as string),
   })
@@ -130,6 +129,7 @@ const QuestionContainer = () => {
           title={questionDetails.title}
           contents={questionDetails.content}
           nickname={questionDetails.nickname}
+          profileImage={questionDetails.profileImageUrl}
           createdAt={questionDetails.createdAt}
           status={questionDetails.state === 'WAITING' ? '답변 대기' : '답변 완료'}
           onDelete={handleDeleteQuestionClick}
@@ -140,6 +140,7 @@ const QuestionContainer = () => {
             isAuthor={isTrader}
             contents={questionDetails.answer.content}
             nickname={questionDetails.answer.nickname}
+            profileImage={questionDetails.answer.profileImageUrl}
             createdAt={questionDetails.answer.createdAt}
             onDelete={handleDeleteAnswerClick}
           />
diff --git a/app/(dashboard)/my/questions/[questionId]/_ui/question-detail-card/index.tsx b/app/(dashboard)/my/questions/[questionId]/_ui/question-detail-card/index.tsx
index e1f21245..b3b39ee0 100644
--- a/app/(dashboard)/my/questions/[questionId]/_ui/question-detail-card/index.tsx
+++ b/app/(dashboard)/my/questions/[questionId]/_ui/question-detail-card/index.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import React from 'react'
+import { Fragment } from 'react'
 
 import classNames from 'classnames/bind'
 
@@ -62,10 +62,10 @@ const QuestionDetailCard = ({
       </div>
       <div className={cx('card-contents')}>
         {contents.split('\n').map((line, idx) => (
-          <React.Fragment key={line + idx}>
+          <Fragment key={line + idx}>
             {line}
             <br />
-          </React.Fragment>
+          </Fragment>
         ))}
       </div>
     </div>
diff --git a/app/(dashboard)/my/questions/[questionId]/_ui/question-detail-card/question-detail-card.stories.tsx b/app/(dashboard)/my/questions/[questionId]/_ui/question-detail-card/question-detail-card.stories.tsx
index 65d61a95..f778b621 100644
--- a/app/(dashboard)/my/questions/[questionId]/_ui/question-detail-card/question-detail-card.stories.tsx
+++ b/app/(dashboard)/my/questions/[questionId]/_ui/question-detail-card/question-detail-card.stories.tsx
@@ -24,6 +24,7 @@ Question.args = {
   nickname: '투자초보',
   profileImage: '',
   createdAt: '2024-11-03T15:00:00',
+  status: '답변 대기',
   isAuthor: false,
   onDelete: () => alert('삭제 버튼 클릭'),
 }
diff --git a/app/(dashboard)/my/questions/_hooks/query/use-delete-answer.ts b/app/(dashboard)/my/questions/_hooks/query/use-delete-answer.ts
index 808cf3ec..475b8934 100644
--- a/app/(dashboard)/my/questions/_hooks/query/use-delete-answer.ts
+++ b/app/(dashboard)/my/questions/_hooks/query/use-delete-answer.ts
@@ -1,5 +1,7 @@
 import { useMutation, useQueryClient } from '@tanstack/react-query'
 
+import { QUERY_KEY } from '@/shared/constants/query-key'
+
 import deleteAnswer, { DeleteAnswerProps } from '../../_api/delete-answer'
 
 const useDeleteAnswer = () => {
@@ -9,11 +11,11 @@ const useDeleteAnswer = () => {
       deleteAnswer({ questionId, answerId }),
     onSuccess: (_, { questionId }) => {
       queryClient.invalidateQueries({
-        queryKey: ['questionDetails', questionId],
+        queryKey: [QUERY_KEY.QUESTION_DETAILS, questionId],
       })
 
       queryClient.invalidateQueries({
-        queryKey: ['questionList'],
+        queryKey: [QUERY_KEY.QUESTION_LIST],
       })
     },
   })
diff --git a/app/(dashboard)/my/questions/_hooks/query/use-delete-question.ts b/app/(dashboard)/my/questions/_hooks/query/use-delete-question.ts
index 85498daf..5ff10cf9 100644
--- a/app/(dashboard)/my/questions/_hooks/query/use-delete-question.ts
+++ b/app/(dashboard)/my/questions/_hooks/query/use-delete-question.ts
@@ -1,5 +1,7 @@
 import { useMutation, useQueryClient } from '@tanstack/react-query'
 
+import { QUERY_KEY } from '@/shared/constants/query-key'
+
 import deleteQuestion, { DeleteQuestionProps } from '../../_api/delete-question'
 
 const useDeleteQuestion = () => {
@@ -9,11 +11,11 @@ const useDeleteQuestion = () => {
       deleteQuestion({ questionId, strategyId }),
     onSuccess: (_, { questionId }) => {
       queryClient.invalidateQueries({
-        queryKey: ['questionDetails', questionId],
+        queryKey: [QUERY_KEY.QUESTION_DETAILS, questionId],
       })
 
       queryClient.invalidateQueries({
-        queryKey: ['questionList'],
+        queryKey: [QUERY_KEY.QUESTION_LIST],
       })
     },
   })
diff --git a/app/(dashboard)/my/questions/_hooks/query/use-get-my-question-list.ts b/app/(dashboard)/my/questions/_hooks/query/use-get-my-question-list.ts
index 2f84b48d..72bd0fdd 100644
--- a/app/(dashboard)/my/questions/_hooks/query/use-get-my-question-list.ts
+++ b/app/(dashboard)/my/questions/_hooks/query/use-get-my-question-list.ts
@@ -1,5 +1,6 @@
 import { useQuery } from '@tanstack/react-query'
 
+import { QUERY_KEY } from '@/shared/constants/query-key'
 import { UserType } from '@/shared/types/auth'
 import { QuestionSearchOptionsModel } from '@/shared/types/questions'
 
@@ -14,7 +15,7 @@ interface Props {
 
 const useGetMyQuestionList = ({ page, size, userType, options }: Props) => {
   return useQuery({
-    queryKey: ['questionList', page, size, options],
+    queryKey: [QUERY_KEY.QUESTION_LIST, page, size, options],
     queryFn: () => {
       const { keyword, searchCondition, stateCondition } = options
       return getMyQuestionList({
diff --git a/app/(dashboard)/my/questions/_hooks/query/use-get-question-details.ts b/app/(dashboard)/my/questions/_hooks/query/use-get-question-details.ts
index 06f737ae..88847d6f 100644
--- a/app/(dashboard)/my/questions/_hooks/query/use-get-question-details.ts
+++ b/app/(dashboard)/my/questions/_hooks/query/use-get-question-details.ts
@@ -1,5 +1,7 @@
 import { useQuery } from '@tanstack/react-query'
 
+import { QUERY_KEY } from '@/shared/constants/query-key'
+
 import getQuestionDetails from '../../_api/get-question-details'
 
 interface Props {
@@ -8,7 +10,7 @@ interface Props {
 
 const useGetQuestionDetails = ({ questionId }: Props) => {
   return useQuery({
-    queryKey: ['questionDetails', questionId],
+    queryKey: [QUERY_KEY.QUESTION_DETAILS, questionId],
     queryFn: () => getQuestionDetails({ questionId }),
   })
 }
diff --git a/app/(dashboard)/my/questions/_hooks/query/use-post-answer.ts b/app/(dashboard)/my/questions/_hooks/query/use-post-answer.ts
index 0d3a64af..c6e2acb7 100644
--- a/app/(dashboard)/my/questions/_hooks/query/use-post-answer.ts
+++ b/app/(dashboard)/my/questions/_hooks/query/use-post-answer.ts
@@ -1,5 +1,7 @@
 import { useMutation, useQueryClient } from '@tanstack/react-query'
 
+import { QUERY_KEY } from '@/shared/constants/query-key'
+
 import postAnswer from '../../_api/post-answer'
 
 const usePostAnswer = (questionId: number) => {
@@ -8,11 +10,11 @@ const usePostAnswer = (questionId: number) => {
     mutationFn: (content: string) => postAnswer(questionId, content),
     onSuccess: () => {
       queryClient.invalidateQueries({
-        queryKey: ['questionDetails', questionId],
+        queryKey: [QUERY_KEY.QUESTION_DETAILS, questionId],
       })
 
       queryClient.invalidateQueries({
-        queryKey: ['questionList'],
+        queryKey: [QUERY_KEY.QUESTION_LIST],
       })
     },
   })
diff --git a/app/(dashboard)/my/questions/_ui/questions-tab-content/index.tsx b/app/(dashboard)/my/questions/_ui/questions-tab-content/index.tsx
index e7225d35..3d39b09e 100644
--- a/app/(dashboard)/my/questions/_ui/questions-tab-content/index.tsx
+++ b/app/(dashboard)/my/questions/_ui/questions-tab-content/index.tsx
@@ -26,10 +26,12 @@ const QuestionsTabContent = ({ options }: Props) => {
 
   const user = useAuthStore((state) => state.user)
 
+  const userType = user?.role.includes('TRADER') ? 'TRADER' : 'INVESTOR'
+
   const { data } = useGetMyQuestionList({
     page,
     size: COUNT_PER_PAGE,
-    userType: user?.role.includes('TRADER') ? 'TRADER' : 'INVESTOR',
+    userType,
     options,
   })
 
@@ -42,21 +44,24 @@ const QuestionsTabContent = ({ options }: Props) => {
   return (
     <>
       <ul className={cx('question-list')}>
-        {questionsData &&
-          !!questionsData.length &&
-          questionsData.map((question) => (
+        {questionsData?.map((question) => {
+          const userInfo = userType === 'TRADER' ? question.investor : question.trader
+
+          return (
             <li key={question.questionId}>
               <QuestionCard
                 questionId={question.questionId}
-                strategyName={question.strategyName}
+                strategyName={question.strategy.name}
                 title={question.title}
                 questionState={question.stateCondition}
                 contents={question.questionContent}
-                nickname={question.nickname}
+                nickname={userInfo?.userName || ''}
+                profileImage={userInfo?.profileImageUrl}
                 createdAt={question.createdAt}
               />
             </li>
-          ))}
+          )
+        })}
       </ul>
 
       {(!questionsData || !questionsData.length) && (
diff --git a/app/(dashboard)/my/questions/_ui/questions-tab-content/styles.module.scss b/app/(dashboard)/my/questions/_ui/questions-tab-content/styles.module.scss
index 3517a7ec..f93b3fa7 100644
--- a/app/(dashboard)/my/questions/_ui/questions-tab-content/styles.module.scss
+++ b/app/(dashboard)/my/questions/_ui/questions-tab-content/styles.module.scss
@@ -7,8 +7,10 @@
 }
 
 .empty-message {
-  margin: 12px 0;
-  @include typo-b2;
+  margin-top: 180px;
+  text-align: center;
+  @include typo-b1;
+  color: $color-gray-600;
 }
 
 .pagination-wrapper {
diff --git a/app/(dashboard)/my/questions/page.tsx b/app/(dashboard)/my/questions/page.tsx
index 4c219c08..a2590400 100644
--- a/app/(dashboard)/my/questions/page.tsx
+++ b/app/(dashboard)/my/questions/page.tsx
@@ -6,7 +6,7 @@ import classNames from 'classnames/bind'
 
 import { QuestionSearchConditionType } from '@/shared/types/questions'
 import { DropdownValueType } from '@/shared/ui/dropdown/types'
-import { SearchInput } from '@/shared/ui/search-input'
+import SearchInput from '@/shared/ui/search-input'
 import Select from '@/shared/ui/select'
 import Title from '@/shared/ui/title'
 
@@ -64,7 +64,7 @@ const MyQuestionsPage = () => {
         <Title label="문의 내역" />
         <div className={cx('search-wrapper')}>
           <Select
-            size="small"
+            size="medium"
             value={selectedOption}
             placeholder="검색 조건"
             onChange={setSelectedOption}
diff --git a/app/(dashboard)/my/strategies/_ui/my-strategy-list/index.tsx b/app/(dashboard)/my/strategies/_ui/my-strategy-list/index.tsx
index 61254eda..43433080 100644
--- a/app/(dashboard)/my/strategies/_ui/my-strategy-list/index.tsx
+++ b/app/(dashboard)/my/strategies/_ui/my-strategy-list/index.tsx
@@ -4,9 +4,13 @@ import { useCallback, useRef } from 'react'
 
 import StrategiesItem from '@/app/(dashboard)/_ui/strategies-item'
 import { useGetMyStrategyList } from '@/app/(dashboard)/my/_hooks/query/use-get-my-strategy-list'
+import classNames from 'classnames/bind'
 
 import { useIntersectionObserver } from '@/shared/hooks/custom/use-intersection-observer'
 
+import styles from './styles.module.scss'
+
+const cx = classNames.bind(styles)
 const MyStrategyList = () => {
   const {
     data: strategyData,
@@ -34,6 +38,7 @@ const MyStrategyList = () => {
   const strategies = strategyData?.pages.flatMap((page) => page.strategies) || []
   return (
     <>
+      {!strategies.length && <p className={cx('no-strategy')}>등록된 나의 전략이 없습니다.</p>}
       {strategies.map((strategy) => (
         <StrategiesItem key={strategy.strategyId} strategiesData={strategy} type="my" />
       ))}
diff --git a/app/(dashboard)/my/strategies/_ui/my-strategy-list/styles.module.scss b/app/(dashboard)/my/strategies/_ui/my-strategy-list/styles.module.scss
new file mode 100644
index 00000000..f43bc937
--- /dev/null
+++ b/app/(dashboard)/my/strategies/_ui/my-strategy-list/styles.module.scss
@@ -0,0 +1,6 @@
+.no-strategy {
+  margin-top: 180px;
+  text-align: center;
+  @include typo-b1;
+  color: $color-gray-600;
+}
diff --git a/app/(dashboard)/my/strategies/add/page.tsx b/app/(dashboard)/my/strategies/add/page.tsx
index c7999780..5a935bd1 100644
--- a/app/(dashboard)/my/strategies/add/page.tsx
+++ b/app/(dashboard)/my/strategies/add/page.tsx
@@ -8,9 +8,11 @@ import { useRouter } from 'next/navigation'
 import { FileIcon } from '@/public/icons'
 import classNames from 'classnames/bind'
 
+import { SUPPORTED_FILE_TYPES } from '@/shared/constants/supported-file-types'
 import { Button } from '@/shared/ui/button'
+import { DropdownValueType } from '@/shared/ui/dropdown/types'
 import BackHeader from '@/shared/ui/header/back-header'
-import { Input } from '@/shared/ui/input'
+import Input from '@/shared/ui/input'
 import Select from '@/shared/ui/select'
 import Title from '@/shared/ui/title'
 
@@ -31,9 +33,9 @@ const cx = classNames.bind(styles)
 
 interface StrategyFormDataModel {
   strategyName: string
-  tradeType: string
+  tradeType: string | null
   operationCycle: OperationCycleType
-  stockTypes: string[]
+  stockTypes: number[]
   minimumInvestmentAmount: MinimumInvestmentAmountType
   description: string
   proposalFile?: File
@@ -41,93 +43,91 @@ interface StrategyFormDataModel {
 
 interface FormErrorsModel {
   strategyName: string
-  tradeType: string
-  operationCycle: string
   stockTypes: string
-  minimumInvestmentAmount: string
   description: string
   proposalFile?: string
 }
 
+const initialFormData: StrategyFormDataModel = {
+  strategyName: '',
+  tradeType: '3',
+  operationCycle: 'DAY',
+  stockTypes: [],
+  minimumInvestmentAmount: 'UNDER_10K',
+  description: '',
+}
+
+const initialFormErrors: FormErrorsModel = {
+  strategyName: '',
+  stockTypes: '',
+  description: '',
+  proposalFile: '',
+}
+
 const StrategyAddPage = () => {
   const router = useRouter()
   const { strategyTypes, registerStrategy, isTypesLoading, isRegistering, error } = useAddStrategy()
 
-  const [formData, setFormData] = useState<StrategyFormDataModel>({
-    strategyName: '',
-    tradeType: '',
-    operationCycle: 'DAY',
-    stockTypes: [],
-    minimumInvestmentAmount: 'UNDER_10K',
-    description: '',
-  })
-
-  const [formErrors, setFormErrors] = useState<FormErrorsModel>({
-    strategyName: '',
-    tradeType: '',
-    operationCycle: '',
-    stockTypes: '',
-    minimumInvestmentAmount: '',
-    description: '',
-  })
+  const [formData, setFormData] = useState<StrategyFormDataModel>(initialFormData)
+  const [formErrors, setFormErrors] = useState<FormErrorsModel>(initialFormErrors)
 
   const validateForm = (): boolean => {
     const newErrors = {
       strategyName: !formData.strategyName ? '전략 명칭을 입력해주세요.' : '',
-      tradeType: !formData.tradeType ? '매매 유형을 선택해주세요.' : '',
-      operationCycle: !formData.operationCycle ? '주기를 선택해주세요.' : '',
       stockTypes: formData.stockTypes.length === 0 ? '종목을 선택해주세요.' : '',
-      minimumInvestmentAmount: !formData.minimumInvestmentAmount
-        ? '최소 운용가능 금액을 선택해주세요.'
-        : '',
       description: !formData.description ? '전략 소개를 입력해주세요.' : '',
-      proposalFile: '',
     }
 
     setFormErrors(newErrors)
-    return !Object.values(newErrors).some((error) => error)
+    return !Object.values(newErrors).some((err) => err)
   }
 
   const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const file = e.target.files?.[0]
-    if (
-      file &&
-      (file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' ||
-        file.type === 'application/vnd.ms-excel')
-    ) {
+    const supportedTypes = SUPPORTED_FILE_TYPES
+
+    if (file && supportedTypes.includes(file.type)) {
       setFormData((prev) => ({ ...prev, proposalFile: file }))
       setFormErrors((prev) => ({ ...prev, proposalFile: '' }))
     } else {
-      setFormErrors((prev) => ({ ...prev, proposalFile: '엑셀 파일만 업로드 가능합니다.' }))
+      setFormErrors((prev) => ({ ...prev, proposalFile: '지원되는 파일 형식이 아닙니다.' }))
     }
   }
 
-  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault()
+    if (!validateForm() || !formData.tradeType) return
 
-    if (!validateForm()) return
-
-    const fileInfo: ProposalFileInfoModel | undefined = formData.proposalFile
+    const fileInfo: ProposalFileInfoModel | null = formData.proposalFile
       ? {
           proposalFileName: formData.proposalFile.name,
           proposalFileSize: formData.proposalFile.size,
         }
-      : undefined
+      : null
 
     const data: StrategyModel = {
       strategyName: formData.strategyName,
       tradeTypeId: Number(formData.tradeType),
       operationCycle: formData.operationCycle,
-      stockTypeIds: formData.stockTypes.map(Number),
+      stockTypeIds: formData.stockTypes,
       minimumInvestmentAmount: formData.minimumInvestmentAmount,
       description: formData.description,
       proposalFile: fileInfo,
     }
 
-    registerStrategy(data)
+    try {
+      await registerStrategy(data, formData.proposalFile)
+    } catch (err) {
+      console.error('Strategy registration failed:', err)
+    }
+  }
+
+  const handleInputChange = (field: keyof StrategyFormDataModel, value: DropdownValueType) => {
+    setFormData((prev) => ({ ...prev, [field]: value }))
+    setFormErrors((prev) => ({ ...prev, [field]: '' }))
   }
 
-  const toggleStockType = (value: string) => {
+  const toggleStockType = (value: number) => {
     setFormData((prev) => {
       const newStockTypes = prev.stockTypes.includes(value)
         ? prev.stockTypes.filter((type) => type !== value)
@@ -137,172 +137,169 @@ const StrategyAddPage = () => {
     setFormErrors((prev) => ({ ...prev, stockTypes: '' }))
   }
 
+  const renderStockTypes = () => (
+    <div className={cx('stock-grid')}>
+      {strategyTypes?.stockTypes.map((type) => (
+        <button
+          key={type.stockTypeId}
+          type="button"
+          onClick={() => toggleStockType(type.stockTypeId)}
+          className={cx('stock-item', {
+            selected: formData.stockTypes.includes(type.stockTypeId),
+          })}
+        >
+          {type.stockTypeName}
+          <span className={cx('marker')}>
+            <Image src={type.stockIconUrl} alt={type.stockTypeName} width={20} height={20} />
+          </span>
+        </button>
+      ))}
+    </div>
+  )
+
+  const renderFileUpload = () => (
+    <div className={cx('file-upload')}>
+      <input
+        type="file"
+        accept=".xlsx,.xls,.pdf,.doc,.docx,.txt,.ppt,.pptx"
+        onChange={handleFileChange}
+        id="proposalFile"
+        className={cx('file-input')}
+      />
+      <label htmlFor="proposalFile" className={cx('file-label')}>
+        <span>{formData.proposalFile?.name || '전략 제안서를 등록해주세요'}</span>
+        <FileIcon className={cx('file-icon')} />
+      </label>
+    </div>
+  )
+
+  if (isTypesLoading) {
+    return <div className={cx('loading')}>로딩 중...</div>
+  }
+
   const tradeTypeOptions =
     strategyTypes?.tradeTypes.map((type) => ({
       value: String(type.tradeTypeId),
       label: type.tradeTypeName,
     })) || []
 
-  if (isTypesLoading) {
-    return <div className={cx('loading')}>로딩 중...</div>
-  }
   return (
     <>
       <BackHeader label="전략관리로 돌아가기" />
       <Title label="전략 등록" />
-      <form onSubmit={handleSubmit} className={cx('form')}>
-        {error && <div className={cx('error')}>{error}</div>}
-        <div className={cx('form-row')}>
-          <label>전략 명칭</label>
-          <div className={cx('form-field')}>
-            <Input
-              value={formData.strategyName}
-              onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-                setFormData((prev) => ({ ...prev, strategyName: e.target.value }))
-                setFormErrors((prev) => ({ ...prev, strategyName: '' }))
-              }}
-              placeholder="전략명을 입력하세요"
-              errorMessage={formErrors.strategyName}
-            />
-          </div>
-        </div>
-        <div className={cx('horizontal-wrapper')}>
-          <div className={cx('form-row', 'half')}>
-            <label>매매 유형</label>
+      <div className={cx('container')}>
+        <form onSubmit={handleSubmit} className={cx('form')}>
+          <div className={cx('form-row')}>
+            <label>전략 명칭</label>
             <div className={cx('form-field')}>
-              <Select
-                value={formData.tradeType}
-                onChange={(value) => {
-                  setFormData((prev) => ({ ...prev, tradeType: value as string }))
-                  setFormErrors((prev) => ({ ...prev, tradeType: '' }))
-                }}
-                options={tradeTypeOptions}
-                placeholder="매매 유형 선택"
-                titleStyle={{ width: '200px', height: '50px' }}
+              <Input
+                value={formData.strategyName}
+                onChange={(e) => handleInputChange('strategyName', e.target.value)}
+                placeholder="전략명을 입력하세요"
+                className={cx('strategy-name-input')}
+                errorMessage={formErrors.strategyName}
+                hideErrorStyle
               />
-              {formErrors.tradeType && (
-                <div className={cx('field-error')}>{formErrors.tradeType}</div>
+            </div>
+          </div>
+
+          <div className={cx('horizontal-wrapper')}>
+            <div className={cx('form-row', 'half')}>
+              <label>매매 유형</label>
+              <div className={cx('form-field')}>
+                <Select
+                  value={formData.tradeType}
+                  onChange={(value) => handleInputChange('tradeType', value)}
+                  options={tradeTypeOptions}
+                  placeholder="매매 유형 선택"
+                  titleStyle={{ width: '160px', height: '45px', border: '1px solid #ccc' }}
+                  size="large"
+                />
+              </div>
+            </div>
+
+            <div className={cx('form-row', 'half')}>
+              <label>주기</label>
+              <div className={cx('form-field')}>
+                <Select
+                  value={formData.operationCycle}
+                  onChange={(value) => handleInputChange('operationCycle', value)}
+                  options={operationCycleOptions}
+                  placeholder="주기 선택"
+                  titleStyle={{ width: '160px', height: '45px', border: '1px solid #ccc' }}
+                  size="large"
+                />
+              </div>
+            </div>
+          </div>
+
+          <div className={cx('form-row')}>
+            <label>종목</label>
+            <div className={cx('form-field')}>
+              {renderStockTypes()}
+              {formErrors.stockTypes && (
+                <div className={cx('field-error')}>{formErrors.stockTypes}</div>
               )}
             </div>
           </div>
 
-          <div className={cx('form-row', 'half')}>
-            <label>주기</label>
+          <div className={cx('form-row')}>
+            <label>최소 운용가능 금액</label>
             <div className={cx('form-field')}>
               <Select
-                value={formData.operationCycle}
-                onChange={(value) => {
-                  setFormData((prev) => ({ ...prev, operationCycle: value as OperationCycleType }))
-                  setFormErrors((prev) => ({ ...prev, operationCycle: '' }))
-                }}
-                options={operationCycleOptions}
-                placeholder="주기 선택"
-                titleStyle={{ width: '200px', height: '50px' }}
-                containerStyle={{ width: '100%' }}
+                value={formData.minimumInvestmentAmount}
+                onChange={(value) => handleInputChange('minimumInvestmentAmount', value)}
+                options={minimumInvestmentAmountOptions}
+                placeholder="최소 운용가능 금액 선택"
+                titleStyle={{ width: '160px', height: '45px', border: '1px solid #ccc' }}
+                size="large"
               />
-              {formErrors.operationCycle && (
-                <div className={cx('field-error')}>{formErrors.operationCycle}</div>
-              )}
             </div>
           </div>
-        </div>
-        <div className={cx('form-row')}>
-          <label>종목</label>
-          <div className={cx('form-field')}>
-            <div className={cx('stock-grid')}>
-              {strategyTypes?.stockTypes.map((type) => (
-                <button
-                  key={type.stockTypeId}
-                  type="button"
-                  onClick={() => toggleStockType(String(type.stockTypeId))}
-                  className={cx('stock-item', {
-                    selected: formData.stockTypes.includes(String(type.stockTypeId)),
-                  })}
-                >
-                  {type.stockTypeName}
-                  <span className={cx('marker')}>
-                    <Image
-                      src={type.stockIconUrl}
-                      alt={type.stockTypeName}
-                      width={20}
-                      height={20}
-                    />
-                  </span>
-                </button>
-              ))}
+
+          <div className={cx('form-row')}>
+            <label>전략 소개</label>
+            <div className={cx('form-field')}>
+              <textarea
+                value={formData.description}
+                onChange={(e) => handleInputChange('description', e.target.value)}
+                placeholder="내용을 입력하세요"
+                className={cx('description-textarea')}
+              />
+              {formErrors.description && (
+                <div className={cx('field-error')}>{formErrors.description}</div>
+              )}
             </div>
-            {formErrors.stockTypes && (
-              <div className={cx('field-error')}>{formErrors.stockTypes}</div>
-            )}
-          </div>
-        </div>
-        <div className={cx('form-row')}>
-          <label>최소 운용가능 금액</label>
-          <div className={cx('form-field')}>
-            <Select
-              value={formData.minimumInvestmentAmount}
-              onChange={(value) => {
-                setFormData((prev) => ({
-                  ...prev,
-                  minimumInvestmentAmount: value as MinimumInvestmentAmountType,
-                }))
-                setFormErrors((prev) => ({ ...prev, minimumInvestmentAmount: '' }))
-              }}
-              options={minimumInvestmentAmountOptions}
-              placeholder="최소 운용가능 금액 선택"
-              titleStyle={{ width: '200px', height: '50px' }}
-              containerStyle={{ width: '100%' }}
-            />
-            {formErrors.minimumInvestmentAmount && (
-              <div className={cx('field-error')}>{formErrors.minimumInvestmentAmount}</div>
-            )}
           </div>
-        </div>
-        <div className={cx('form-row')}>
-          <label>전략 소개</label>
-          <div className={cx('form-field')}>
-            <Input
-              value={formData.description}
-              onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-                setFormData((prev) => ({ ...prev, description: e.target.value }))
-                setFormErrors((prev) => ({ ...prev, description: '' }))
-              }}
-              placeholder="내용을 입력하세요"
-              errorMessage={formErrors.description}
-            />
-          </div>
-        </div>
-        <div className={cx('form-row')}>
-          <label>제안서</label>
-          <div className={cx('form-field')}>
-            <div className={cx('file-upload')}>
-              <input
-                type="file"
-                accept=".xlsx,.xls"
-                onChange={handleFileChange}
-                id="proposalFile"
-                className={cx('file-input')}
-              />
-              <label htmlFor="proposalFile" className={cx('file-label')}>
-                <span>{formData.proposalFile?.name || '엑셀 파일을 선택해주세요'}</span>
-                <FileIcon className={cx('file-icon')} />
-              </label>
+
+          <div className={cx('form-row')}>
+            <label>제안서</label>
+            <div className={cx('form-field')}>
+              {renderFileUpload()}
+              {formErrors.proposalFile && (
+                <div className={cx('field-error')}>{formErrors.proposalFile}</div>
+              )}
             </div>
-            {formErrors.proposalFile && (
-              <div className={cx('field-error')}>{formErrors.proposalFile}</div>
-            )}
           </div>
-        </div>
-        <div className={cx('button-wrapper')}>
-          <Button variant="outline" onClick={() => router.back()} type="button">
-            취소
-          </Button>
-          <Button variant="filled" type="submit" disabled={isRegistering}>
-            {isRegistering ? '등록 중...' : '전략 등록하기'}
-          </Button>
-        </div>
-      </form>
+
+          <p className={cx('notice')}>
+            *제안서는 선택 사항입니다. (허용 파일: xlsx, xls, pdf, doc, docx, txt, ppt, pptx)
+            <br />
+            *매매 유형, 주기, 종목, 최소운용 가능 금액은 추후 수정이 불가합니다.
+          </p>
+          {error && <div className={cx('error')}>{error}</div>}
+          <div className={cx('button-wrapper')}>
+            <Button variant="outline" onClick={() => router.back()} type="button">
+              취소
+            </Button>
+            <Button variant="filled" type="submit" disabled={isRegistering}>
+              {isRegistering ? '등록 중...' : '전략 등록하기'}
+            </Button>
+          </div>
+        </form>
+      </div>
     </>
   )
 }
+
 export default StrategyAddPage
diff --git a/app/(dashboard)/my/strategies/add/styles.module.scss b/app/(dashboard)/my/strategies/add/styles.module.scss
index 54fc4866..0e4f4744 100644
--- a/app/(dashboard)/my/strategies/add/styles.module.scss
+++ b/app/(dashboard)/my/strategies/add/styles.module.scss
@@ -1,3 +1,9 @@
+.container {
+  background-color: $color-white;
+  border-radius: 8px;
+  margin-top: 24px;
+}
+
 .form {
   max-width: 800px;
   margin: 0 auto;
@@ -34,15 +40,26 @@
 
 .form-field {
   flex: 1;
+
+  .strategy-name-input {
+    border-radius: 6px;
+    padding-left: 12px;
+
+    &::placeholder {
+      color: $color-gray-400;
+    }
+  }
 }
 
 .error {
-  margin-bottom: 16px;
-  padding: 12px;
-  border-radius: 4px;
-  background-color: $color-white;
-  color: $color-orange-600;
-  font-size: 14px;
+  margin-top: -1rem;
+}
+
+.field-error,
+.error {
+  color: $color-orange-800;
+  font-size: $text-b3;
+  font-weight: $text-medium;
 }
 
 .loading {
@@ -52,18 +69,8 @@
   min-height: 200px;
 }
 
-.input {
-  width: 100%;
-  padding: 8px 12px;
-  border: 1px solid $color-gray-300;
-  border-radius: 4px;
-  font-size: 14px;
-  line-height: 1.5;
-  transition: border-color 0.2s;
-
-  &.error {
-    border-color: $color-orange-600;
-  }
+.input.error {
+  border-color: $color-orange-700;
 }
 
 .stock-grid {
@@ -142,3 +149,31 @@
   margin-top: 32px;
   gap: 24px;
 }
+
+.description-textarea {
+  width: 100%;
+  min-height: 120px;
+  padding: 12px;
+  border: 1px solid $color-gray-300;
+  border-radius: 4px;
+  resize: vertical;
+  font-size: 14px;
+  line-height: 1.5;
+  font-family: inherit;
+
+  &:focus {
+    outline: none;
+    border-color: none;
+  }
+
+  &::placeholder {
+    color: $color-gray-400;
+  }
+}
+
+.notice {
+  @include typo-c1;
+  color: $color-gray-600;
+  margin: 36px 0;
+  line-height: 1.2rem;
+}
diff --git a/app/(dashboard)/my/strategies/manage/[strategyId]/_store/use-edit-information-store.tsx b/app/(dashboard)/my/strategies/manage/[strategyId]/_store/use-edit-information-store.tsx
new file mode 100644
index 00000000..e924ed80
--- /dev/null
+++ b/app/(dashboard)/my/strategies/manage/[strategyId]/_store/use-edit-information-store.tsx
@@ -0,0 +1,81 @@
+import { create } from 'zustand'
+
+interface InformationModel {
+  strategyName: string | null
+  description: string | null
+}
+
+interface ProposalModel {
+  proposalFile: File | null
+  proposalModified: boolean
+  proposalFileName: string
+}
+
+interface StateModel {
+  information: InformationModel
+  proposal: ProposalModel
+}
+
+interface ActionModel {
+  actions: {
+    setStrategyName: (name: string) => void
+    setDescription: (description: string) => void
+    setProposalFile: (file: File | null) => void
+    setProposalModified: (modified: boolean) => void
+    initializeProposal: (fileName: string) => void
+  }
+}
+
+const initialState: StateModel = {
+  information: {
+    strategyName: null,
+    description: null,
+  },
+  proposal: {
+    proposalFile: null,
+    proposalModified: false,
+    proposalFileName: '',
+  },
+}
+
+const useEditInformationStore = create<StateModel & ActionModel>((set) => ({
+  ...initialState,
+
+  actions: {
+    setStrategyName: (name) =>
+      set((state) => ({
+        information: { ...state.information, strategyName: name },
+      })),
+
+    setDescription: (description) =>
+      set((state) => ({
+        information: { ...state.information, description },
+      })),
+
+    setProposalFile: (file) =>
+      set((state) => ({
+        proposal: {
+          ...state.proposal,
+          proposalFile: file,
+          proposalFileName: file?.name || state.proposal.proposalFileName,
+          proposalModified: true,
+        },
+      })),
+
+    setProposalModified: (modified) =>
+      set((state) => ({
+        proposal: { ...state.proposal, proposalModified: modified },
+      })),
+
+    initializeProposal: (fileName) =>
+      set((state) => ({
+        proposal: {
+          ...state.proposal,
+          proposalFileName: fileName,
+          proposalModified: false,
+        },
+      })),
+  },
+}))
+
+export default useEditInformationStore
diff --git a/app/(dashboard)/my/strategies/manage/[strategyId]/page.tsx b/app/(dashboard)/my/strategies/manage/[strategyId]/page.tsx
index 0e14f21c..3636cbca 100644
--- a/app/(dashboard)/my/strategies/manage/[strategyId]/page.tsx
+++ b/app/(dashboard)/my/strategies/manage/[strategyId]/page.tsx
@@ -1,5 +1,7 @@
 'use client'
 
+import { useState } from 'react'
+
 import AnalysisContainer from '@/app/(dashboard)/_ui/analysis-container'
 import DetailsInformation from '@/app/(dashboard)/_ui/details-information'
 import DetailsSideItem, {
@@ -15,6 +17,8 @@ import { Button } from '@/shared/ui/button'
 import BackHeader from '@/shared/ui/header/back-header'
 import Title from '@/shared/ui/title'
 
+import usePostEditStrategy from '../../../_hooks/query/use-post-edit-strategy'
+import useEditInformationStore from './_store/use-edit-information-store'
 import styles from './styles.module.scss'
 
 const cx = classNames.bind(styles)
@@ -22,46 +26,119 @@ const cx = classNames.bind(styles)
 export type InformationType = { title: TitleType; data: string | number } | InformationModel[]
 
 const StrategyManagePage = ({ params }: { params: { strategyId: string } }) => {
+  const [isEditable, setIsEditable] = useState(false)
+  const [isSubmitting, setIsSubmitting] = useState(false)
   const strategyNumber = parseInt(params.strategyId)
-  const { data: detailsInfoData } = useGetDetailsInformationData({
+
+  const { data: detailsInfoData, refetch } = useGetDetailsInformationData({
     strategyId: strategyNumber,
   })
   const { data: subscribeData } = useGetDetailsInformationData({
     strategyId: strategyNumber,
   })
 
+  const { mutateAsync: editStrategy, error } = usePostEditStrategy()
+
   const { detailsSideData, detailsInformationData } = detailsInfoData || {}
   const { detailsInformationData: subscribeInfo } = subscribeData || {}
   const hasDetailsSideData = detailsSideData?.map((data) => {
     if (!Array.isArray(data)) return data.data !== undefined
   })
 
+  const handleUpdateInformation = () => {
+    const editedInformation = useEditInformationStore.getState().information
+    const { proposal } = useEditInformationStore.getState()
+
+    if (!editedInformation.strategyName || !editedInformation.description) {
+      return
+    }
+
+    setIsSubmitting(true)
+
+    const information = {
+      strategyName: editedInformation.strategyName,
+      description: editedInformation.description,
+      proposalModified: proposal.proposalModified,
+      ...(proposal.proposalFile && {
+        proposalFile: {
+          proposalFileName: proposal.proposalFile.name,
+          proposalFileSize: proposal.proposalFile.size,
+        },
+      }),
+    }
+
+    editStrategy({
+      strategyId: strategyNumber,
+      information,
+      file: proposal.proposalFile || undefined,
+    })
+      .then(async () => {
+        await refetch()
+        const newProposalFileName = proposal.proposalFile?.name || proposal.proposalFileName
+        useEditInformationStore.getState().actions.initializeProposal(newProposalFileName)
+        setIsEditable(false)
+      })
+      .catch((err) => {
+        console.error('전략 수정 실패:', err)
+      })
+      .finally(() => {
+        setIsSubmitting(false)
+      })
+  }
+
   return (
     <div className={cx('container')}>
       <BackHeader label={'나의 전략으로 돌아가기'} />
       <div className={cx('header')}>
         <Title label={'나의 전략 관리'} />
-        <Button size="small" variant="filled" className={cx('edit-button')}>
-          정보 수정하기
-        </Button>
+        {isEditable ? (
+          <Button
+            onClick={handleUpdateInformation}
+            size="small"
+            variant="filled"
+            className={cx('edit-button')}
+            disabled={isSubmitting}
+          >
+            {isSubmitting ? '저장 중...' : '저장하기'}
+          </Button>
+        ) : (
+          <Button
+            onClick={() => setIsEditable(!isEditable)}
+            size="small"
+            variant="filled"
+            className={cx('edit-button')}
+          >
+            정보 수정하기
+          </Button>
+        )}
       </div>
       <div className={cx('strategy-container')}>
         {detailsInformationData && (
           <DetailsInformation
             information={detailsInformationData}
             strategyId={strategyNumber}
+            isEditable={isEditable}
+            error={error as Error}
             type="my"
           />
         )}
         <AnalysisContainer type="my" strategyId={strategyNumber} />
         <SideContainer hasButton={true}>
           {subscribeInfo && (
-            <SubscriberItem subscribers={subscribeInfo?.subscriptionCount} isMyStrategy={true} />
+            <SubscriberItem
+              subscribers={subscribeInfo?.subscriptionCount}
+              isEditable={isEditable}
+              isMyStrategy={true}
+            />
           )}
           {hasDetailsSideData?.[0] &&
             detailsSideData?.map((data, idx) => (
               <div key={`${data}_${idx}`}>
-                <DetailsSideItem information={data} strategyId={strategyNumber} />
+                <DetailsSideItem
+                  information={data}
+                  isEditable={isEditable}
+                  strategyId={strategyNumber}
+                />
               </div>
             ))}
         </SideContainer>
diff --git a/app/(dashboard)/my/strategies/page.tsx b/app/(dashboard)/my/strategies/page.tsx
index 9b5e093c..79d65ece 100644
--- a/app/(dashboard)/my/strategies/page.tsx
+++ b/app/(dashboard)/my/strategies/page.tsx
@@ -1,7 +1,8 @@
 'use client'
 
-import { Suspense } from 'react'
+import React, { Suspense } from 'react'
 
+import dynamic from 'next/dynamic'
 import { useRouter } from 'next/navigation'
 
 import classNames from 'classnames/bind'
@@ -11,9 +12,16 @@ import { Button } from '@/shared/ui/button'
 import Title from '@/shared/ui/title'
 
 import ListHeader from '../../_ui/list-header'
-import MyStrategyList from './_ui/my-strategy-list'
+import StrategiesItemSkeleton from '../../_ui/strategies-item/skeleton'
 import styles from './styles.module.scss'
 
+const MyStrategyList = React.lazy(() => import('./_ui/my-strategy-list'))
+
+const DynamicStrategySkeleton = dynamic(() => import('../../_ui/strategies-item/skeleton'), {
+  loading: () => <StrategiesItemSkeleton />,
+  ssr: false,
+})
+
 const cx = classNames.bind(styles)
 
 const MyStrategiesPage = () => {
@@ -30,11 +38,21 @@ const MyStrategiesPage = () => {
         </Button>
       </div>
       <ListHeader type="my" />
-      <Suspense fallback={<div>Loading...</div>}>
+      <Suspense fallback={<Skeleton />}>
         <MyStrategyList />
       </Suspense>
     </div>
   )
 }
 
+const Skeleton = () => {
+  return (
+    <>
+      {Array.from({ length: 4 }, (_, idx) => (
+        <DynamicStrategySkeleton key={idx} />
+      ))}
+    </>
+  )
+}
+
 export default MyStrategiesPage
diff --git a/app/(dashboard)/strategies/[strategyId]/_api/get-account-images.ts b/app/(dashboard)/strategies/[strategyId]/_api/get-account-images.ts
index f21a5a45..a9c748b2 100644
--- a/app/(dashboard)/strategies/[strategyId]/_api/get-account-images.ts
+++ b/app/(dashboard)/strategies/[strategyId]/_api/get-account-images.ts
@@ -1,18 +1,9 @@
-import { ImageDataModel } from '@/app/(dashboard)/_ui/analysis-container/account-content'
-
 import axiosInstance from '@/shared/api/axios'
+import { AccountImageDataModel } from '@/shared/types/strategy-data'
 
-interface ResponseModel {
-  content: ImageDataModel
-  first: boolean
-  last: boolean
-  page: number
-  size: number
-  totalElements: number
-  totalPages: number
-}
-
-const getAccountImages = async (strategyId: number): Promise<ResponseModel | null | undefined> => {
+const getAccountImages = async (
+  strategyId: number
+): Promise<AccountImageDataModel | null | undefined> => {
   try {
     const response = await axiosInstance.get(`/api/strategies/${strategyId}/account-images`)
     return response.data.result
diff --git a/app/(dashboard)/strategies/[strategyId]/_api/get-analysis-download.ts b/app/(dashboard)/strategies/[strategyId]/_api/get-analysis-download.ts
index 49d80032..651611a2 100644
--- a/app/(dashboard)/strategies/[strategyId]/_api/get-analysis-download.ts
+++ b/app/(dashboard)/strategies/[strategyId]/_api/get-analysis-download.ts
@@ -1,6 +1,8 @@
+import { AxiosError } from 'axios'
+
 import axiosInstance from '@/shared/api/axios'
 
-import { downloadFile } from './helper-download-file'
+import { downloadFile, extractFileName } from './helper-download-file'
 
 const getAnalysisDownload = async (strategyId: number, type: 'daily' | 'monthly') => {
   try {
@@ -10,12 +12,15 @@ const getAnalysisDownload = async (strategyId: number, type: 'daily' | 'monthly'
         responseType: 'blob',
       }
     )
-    const blob = new Blob([response.data], { type: response.headers['content-type'] })
+    const mimeType = response.headers['content-type'] || 'application/octet-stream'
+    const blob = new Blob([response.data], { type: mimeType })
     const contentDisposition = response.headers['content-disposition']
 
-    downloadFile(blob, contentDisposition, `${type}_분석자료`)
+    const fileName = extractFileName(contentDisposition, `${type}_분석자료`)
+
+    downloadFile(blob, fileName)
   } catch (err) {
-    console.error(err)
+    throw new Error('분석자료 다운 실패', err as AxiosError)
   }
 }
 
diff --git a/app/(dashboard)/strategies/[strategyId]/_api/get-proposal-download.ts b/app/(dashboard)/strategies/[strategyId]/_api/get-proposal-download.ts
index 7992f065..ffc5d9fb 100644
--- a/app/(dashboard)/strategies/[strategyId]/_api/get-proposal-download.ts
+++ b/app/(dashboard)/strategies/[strategyId]/_api/get-proposal-download.ts
@@ -1,18 +1,46 @@
+import { AxiosError } from 'axios'
+
 import axiosInstance from '@/shared/api/axios'
 
-import { downloadFile } from './helper-download-file'
+import { downloadFile, extractFileName } from './helper-download-file'
 
+const TIME_OUT = 30000
 const getProposalDownload = async (strategyId: number, name: string) => {
   try {
     const response = await axiosInstance.get(`/api/my-strategies/${strategyId}/download-proposal`, {
       responseType: 'blob',
+      timeout: TIME_OUT,
+      headers: {
+        Accept: 'application/octet-stream',
+      },
     })
-    const blob = new Blob([response.data], { type: response.headers['content-type'] })
+
+    if (response.status !== 200) {
+      throw new Error(`Failed with status: ${response.status}`)
+    }
+
+    const mimeType = response.headers['content-type'] || 'application/octet-stream'
+
+    if (!response.data || response.data.size === 0) {
+      throw new Error('Empty file data received')
+    }
+
+    const blob = new Blob([response.data], { type: mimeType })
     const contentDisposition = response.headers['content-disposition']
+    const fileName = extractFileName(contentDisposition, `${name}_제안서`)
 
-    downloadFile(blob, contentDisposition, `${name}_제안서`)
+    downloadFile(blob, fileName)
   } catch (err) {
-    console.error(err)
+    if (err instanceof AxiosError) {
+      console.error('API Error:', {
+        status: err.response?.status,
+        statusText: err.response?.statusText,
+        headers: err.response?.headers,
+        data: err.response?.data,
+      })
+      throw new Error(`제안서 다운로드 실패: ${err.response?.status} ${err.response?.statusText}`)
+    }
+    throw err
   }
 }
 
diff --git a/app/(dashboard)/strategies/[strategyId]/_api/helper-download-file.ts b/app/(dashboard)/strategies/[strategyId]/_api/helper-download-file.ts
index 3cfb1819..324712db 100644
--- a/app/(dashboard)/strategies/[strategyId]/_api/helper-download-file.ts
+++ b/app/(dashboard)/strategies/[strategyId]/_api/helper-download-file.ts
@@ -1,20 +1,23 @@
-export const downloadFile = (
-  blob: Blob,
+export const extractFileName = (
   contentDisposition: string | undefined,
   defaultFileName: string
-) => {
-  const url = window.URL.createObjectURL(blob)
-  const link = document.createElement('a')
-  link.href = url
-
-  const fileName = contentDisposition
-    ? decodeURIComponent(contentDisposition.split('filename=')[1])
-    : defaultFileName
+): string => {
+  if (!contentDisposition) return defaultFileName
 
-  link.download = fileName
-  document.body.appendChild(link)
-  link.click()
-  document.body.removeChild(link)
+  const fileNameMatch = contentDisposition.match(/filename\*?="?([^;"]+)/i)
+  return fileNameMatch ? decodeURIComponent(fileNameMatch[1]) : defaultFileName
+}
 
-  window.URL.revokeObjectURL(url)
+export const downloadFile = (blob: Blob, fileName: string) => {
+  const url = window.URL.createObjectURL(blob)
+  try {
+    const link = document.createElement('a')
+    link.href = url
+    link.download = fileName
+    document.body.appendChild(link)
+    link.click()
+    document.body.removeChild(link)
+  } finally {
+    window.URL.revokeObjectURL(url)
+  }
 }
diff --git a/app/(dashboard)/strategies/[strategyId]/_hooks/query/use-delete-review.ts b/app/(dashboard)/strategies/[strategyId]/_hooks/query/use-delete-review.ts
index 1b9db669..48ba0546 100644
--- a/app/(dashboard)/strategies/[strategyId]/_hooks/query/use-delete-review.ts
+++ b/app/(dashboard)/strategies/[strategyId]/_hooks/query/use-delete-review.ts
@@ -1,5 +1,7 @@
 import { useMutation, useQueryClient } from '@tanstack/react-query'
 
+import { QUERY_KEY } from '@/shared/constants/query-key'
+
 import deleteReview from '../../_api/delete-review'
 
 const useDeleteReview = (strategyId: number) => {
@@ -8,7 +10,7 @@ const useDeleteReview = (strategyId: number) => {
     mutationFn: ({ strategyId, reviewId }: { strategyId: number; reviewId: number }) =>
       deleteReview(strategyId, reviewId),
     onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['reviews', strategyId] })
+      queryClient.invalidateQueries({ queryKey: [QUERY_KEY.STRATEGY_REVIEWS, strategyId] })
     },
   })
 }
diff --git a/app/(dashboard)/strategies/[strategyId]/_hooks/query/use-get-account-images.ts b/app/(dashboard)/strategies/[strategyId]/_hooks/query/use-get-account-images.ts
index d84e32d6..8c94edab 100644
--- a/app/(dashboard)/strategies/[strategyId]/_hooks/query/use-get-account-images.ts
+++ b/app/(dashboard)/strategies/[strategyId]/_hooks/query/use-get-account-images.ts
@@ -1,10 +1,12 @@
 import { useQuery } from '@tanstack/react-query'
 
+import { QUERY_KEY } from '@/shared/constants/query-key'
+
 import getAccountImages from '../../_api/get-account-images'
 
 const useGetAccountImages = (strategyId: number) => {
   return useQuery({
-    queryKey: ['account-images', strategyId],
+    queryKey: [QUERY_KEY.STRATEGY_ACCOUNT_IMAGES, strategyId],
     queryFn: () => getAccountImages(strategyId),
   })
 }
diff --git a/app/(dashboard)/strategies/[strategyId]/_hooks/query/use-get-analysis-chart.ts b/app/(dashboard)/strategies/[strategyId]/_hooks/query/use-get-analysis-chart.ts
index 4f913c85..6d057263 100644
--- a/app/(dashboard)/strategies/[strategyId]/_hooks/query/use-get-analysis-chart.ts
+++ b/app/(dashboard)/strategies/[strategyId]/_hooks/query/use-get-analysis-chart.ts
@@ -1,6 +1,8 @@
 import { AnalysisChartOptionsType } from '@/app/(dashboard)/_ui/analysis-container'
 import { useQuery } from '@tanstack/react-query'
 
+import { QUERY_KEY } from '@/shared/constants/query-key'
+
 import getAnalysisChart from '../../_api/get-analysis-chart'
 
 interface Props {
@@ -11,7 +13,7 @@ interface Props {
 
 const useGetAnalysisChart = ({ strategyId, firstOption, secondOption }: Props) => {
   return useQuery({
-    queryKey: ['analysisChart', strategyId, firstOption, secondOption],
+    queryKey: [QUERY_KEY.STRATEGY_ANALYSIS_CHART, strategyId, firstOption, secondOption],
     queryFn: () => getAnalysisChart(strategyId, firstOption, secondOption),
   })
 }
diff --git a/app/(dashboard)/strategies/[strategyId]/_hooks/query/use-get-analysis.ts b/app/(dashboard)/strategies/[strategyId]/_hooks/query/use-get-analysis.ts
index 44208c6d..70d7fe62 100644
--- a/app/(dashboard)/strategies/[strategyId]/_hooks/query/use-get-analysis.ts
+++ b/app/(dashboard)/strategies/[strategyId]/_hooks/query/use-get-analysis.ts
@@ -1,11 +1,13 @@
 import { AnalysisTabType } from '@/app/(dashboard)/_ui/analysis-container/tabs-width-table'
 import { useQuery } from '@tanstack/react-query'
 
+import { QUERY_KEY } from '@/shared/constants/query-key'
+
 import getAnalysis from '../../_api/get-analysis'
 
 const useGetAnalysis = (strategyId: number, type: AnalysisTabType, page: number, size: number) => {
   return useQuery({
-    queryKey: ['analysis', strategyId, type, page],
+    queryKey: [QUERY_KEY.STRATEGY_ANALYSIS, strategyId, type, page],
     queryFn: () => getAnalysis(strategyId, type, page, size),
   })
 }
diff --git a/app/(dashboard)/strategies/[strategyId]/_hooks/query/use-get-details-information-data.ts b/app/(dashboard)/strategies/[strategyId]/_hooks/query/use-get-details-information-data.ts
index 87f4d668..5da9f8a8 100644
--- a/app/(dashboard)/strategies/[strategyId]/_hooks/query/use-get-details-information-data.ts
+++ b/app/(dashboard)/strategies/[strategyId]/_hooks/query/use-get-details-information-data.ts
@@ -1,5 +1,6 @@
 import { UseQueryResult, useQuery } from '@tanstack/react-query'
 
+import { QUERY_KEY } from '@/shared/constants/query-key'
 import { StrategyDetailsInformationModel } from '@/shared/types/strategy-data'
 
 import getDetailsInformation from '../../_api/get-details-information'
@@ -16,7 +17,7 @@ const useGetDetailsInformationData = ({
   detailsInformationData: StrategyDetailsInformationModel
 }> => {
   return useQuery({
-    queryKey: ['strategyDetails', strategyId],
+    queryKey: [QUERY_KEY.STRATEGY_DETAILS, strategyId],
     queryFn: () => getDetailsInformation(strategyId),
   })
 }
diff --git a/app/(dashboard)/strategies/[strategyId]/_hooks/query/use-get-reviews-data.ts b/app/(dashboard)/strategies/[strategyId]/_hooks/query/use-get-reviews-data.ts
index dec69f32..3595e636 100644
--- a/app/(dashboard)/strategies/[strategyId]/_hooks/query/use-get-reviews-data.ts
+++ b/app/(dashboard)/strategies/[strategyId]/_hooks/query/use-get-reviews-data.ts
@@ -1,5 +1,7 @@
 import { useQuery } from '@tanstack/react-query'
 
+import { QUERY_KEY } from '@/shared/constants/query-key'
+
 import getReviews from '../../_api/get-reviews'
 
 interface Props {
@@ -9,7 +11,7 @@ interface Props {
 
 const useGetReviewsData = ({ strategyId, page }: Props) => {
   return useQuery({
-    queryKey: ['reviews', strategyId],
+    queryKey: [QUERY_KEY.STRATEGY_REVIEWS, strategyId],
     queryFn: () => getReviews(strategyId, page),
   })
 }
diff --git a/app/(dashboard)/strategies/[strategyId]/_hooks/query/use-get-statistics.ts b/app/(dashboard)/strategies/[strategyId]/_hooks/query/use-get-statistics.ts
index b633062d..d47bbebc 100644
--- a/app/(dashboard)/strategies/[strategyId]/_hooks/query/use-get-statistics.ts
+++ b/app/(dashboard)/strategies/[strategyId]/_hooks/query/use-get-statistics.ts
@@ -1,10 +1,12 @@
 import { useQuery } from '@tanstack/react-query'
 
+import { QUERY_KEY } from '@/shared/constants/query-key'
+
 import getStatistics from '../../_api/get-statistics'
 
 const useGetStatistics = (strategyId: number) => {
   return useQuery({
-    queryKey: ['statistics', strategyId],
+    queryKey: [QUERY_KEY.STRATEGY_STATISTICS, strategyId],
     queryFn: () => getStatistics(strategyId),
   })
 }
diff --git a/app/(dashboard)/strategies/[strategyId]/_hooks/query/use-patch-review.ts b/app/(dashboard)/strategies/[strategyId]/_hooks/query/use-patch-review.ts
index cc4f9b3a..31e23067 100644
--- a/app/(dashboard)/strategies/[strategyId]/_hooks/query/use-patch-review.ts
+++ b/app/(dashboard)/strategies/[strategyId]/_hooks/query/use-patch-review.ts
@@ -1,5 +1,7 @@
 import { useMutation, useQueryClient } from '@tanstack/react-query'
 
+import { QUERY_KEY } from '@/shared/constants/query-key'
+
 import patchReview from '../../_api/patch-review'
 
 const usePatchReview = (strategyId: number) => {
@@ -15,7 +17,7 @@ const usePatchReview = (strategyId: number) => {
       content: { content: string; starRating: number }
     }) => patchReview(strategyId, reviewId, content),
     onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['reviews', strategyId] })
+      queryClient.invalidateQueries({ queryKey: [QUERY_KEY.STRATEGY_REVIEWS, strategyId] })
     },
   })
 }
diff --git a/app/(dashboard)/strategies/[strategyId]/_hooks/query/use-post-question.ts b/app/(dashboard)/strategies/[strategyId]/_hooks/query/use-post-question.ts
index a340a14f..15ae8f78 100644
--- a/app/(dashboard)/strategies/[strategyId]/_hooks/query/use-post-question.ts
+++ b/app/(dashboard)/strategies/[strategyId]/_hooks/query/use-post-question.ts
@@ -1,4 +1,6 @@
-import { useMutation } from '@tanstack/react-query'
+import { useMutation, useQueryClient } from '@tanstack/react-query'
+
+import { QUERY_KEY } from '@/shared/constants/query-key'
 
 import postQuestions from '../../_api/post-question'
 
@@ -9,9 +11,14 @@ interface Props {
 }
 
 const usePostQuestion = () => {
+  const queryClient = useQueryClient()
+
   return useMutation({
     mutationFn: ({ strategyId, title, content }: Props) =>
       postQuestions(strategyId, title, content),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: [QUERY_KEY.QUESTION_LIST] })
+    },
   })
 }
 
diff --git a/app/(dashboard)/strategies/[strategyId]/_hooks/query/use-post-review.ts b/app/(dashboard)/strategies/[strategyId]/_hooks/query/use-post-review.ts
index 668e16b6..670e99a1 100644
--- a/app/(dashboard)/strategies/[strategyId]/_hooks/query/use-post-review.ts
+++ b/app/(dashboard)/strategies/[strategyId]/_hooks/query/use-post-review.ts
@@ -1,5 +1,7 @@
 import { useMutation, useQueryClient } from '@tanstack/react-query'
 
+import { QUERY_KEY } from '@/shared/constants/query-key'
+
 import postReview from '../../_api/post-review'
 
 export interface PostReviewErrModel {
@@ -23,7 +25,7 @@ const usePostReview = (strategyId: number) => {
       content: { content: string; starRating: number }
     }) => postReview(strategyId, content),
     onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['reviews', strategyId] })
+      queryClient.invalidateQueries({ queryKey: [QUERY_KEY.STRATEGY_REVIEWS, strategyId] })
     },
   })
 }
diff --git a/app/(dashboard)/strategies/[strategyId]/_ui/review-container/add-review.tsx b/app/(dashboard)/strategies/[strategyId]/_ui/review-container/add-review.tsx
index 2aaf024f..c191b32b 100644
--- a/app/(dashboard)/strategies/[strategyId]/_ui/review-container/add-review.tsx
+++ b/app/(dashboard)/strategies/[strategyId]/_ui/review-container/add-review.tsx
@@ -7,12 +7,12 @@ import classNames from 'classnames/bind'
 import useModal from '@/shared/hooks/custom/use-modal'
 import { Button } from '@/shared/ui/button'
 import { ErrorMessage } from '@/shared/ui/error-message'
-import { Textarea } from '@/shared/ui/textarea'
+import ReviewGuideModal from '@/shared/ui/modal/review-guide-modal'
+import Textarea from '@/shared/ui/textarea'
 
 import usePatchReview from '../../_hooks/query/use-patch-review'
 import usePostReview from '../../_hooks/query/use-post-review'
 import StarRating from '../star-rating/index'
-import ReviewGuideModal from './review-guide-modal'
 import styles from './styles.module.scss'
 
 const cx = classNames.bind(styles)
@@ -20,6 +20,7 @@ const cx = classNames.bind(styles)
 interface Props {
   strategyId: number
   reviewId?: number
+  isMyStrategy?: boolean
   isEditable?: boolean
   content?: string
   starRating?: number
@@ -29,6 +30,7 @@ interface Props {
 const AddReview = ({
   strategyId,
   reviewId,
+  isMyStrategy,
   isEditable = false,
   content,
   starRating,
@@ -114,7 +116,12 @@ const AddReview = ({
           </Button>
         )}
       </div>
-      <ReviewGuideModal isModalOpen={isModalOpen} isErr={isError} onCloseModal={closeModal} />
+      <ReviewGuideModal
+        isModalOpen={isModalOpen}
+        isErr={isError}
+        isMyStrategy={isMyStrategy}
+        onCloseModal={closeModal}
+      />
     </div>
   )
 }
diff --git a/app/(dashboard)/strategies/[strategyId]/_ui/review-container/index.tsx b/app/(dashboard)/strategies/[strategyId]/_ui/review-container/index.tsx
index 7d3e881f..7429de6e 100644
--- a/app/(dashboard)/strategies/[strategyId]/_ui/review-container/index.tsx
+++ b/app/(dashboard)/strategies/[strategyId]/_ui/review-container/index.tsx
@@ -15,9 +15,10 @@ const cx = classNames.bind(styles)
 
 interface Props {
   strategyId: number
+  isMyStrategy: boolean
 }
 
-const ReviewContainer = ({ strategyId }: Props) => {
+const ReviewContainer = ({ strategyId, isMyStrategy }: Props) => {
   const [currentPage, setCurrentPage] = useState(1)
   const { data: reviewData } = useGetReviewsData({ strategyId, page: currentPage })
 
@@ -31,7 +32,7 @@ const ReviewContainer = ({ strategyId }: Props) => {
           totalElements={reviewData?.reviews.totalElements}
         />
       </div>
-      <AddReview strategyId={strategyId} />
+      <AddReview strategyId={strategyId} isMyStrategy={isMyStrategy} />
       {reviewData && reviewData.reviews.content.length !== 0 ? (
         <ReviewList
           strategyId={strategyId}
diff --git a/app/(dashboard)/strategies/[strategyId]/_ui/review-container/review-item.tsx b/app/(dashboard)/strategies/[strategyId]/_ui/review-container/review-item.tsx
index d9111cfd..5867515d 100644
--- a/app/(dashboard)/strategies/[strategyId]/_ui/review-container/review-item.tsx
+++ b/app/(dashboard)/strategies/[strategyId]/_ui/review-container/review-item.tsx
@@ -6,11 +6,11 @@ import classNames from 'classnames/bind'
 
 import useModal from '@/shared/hooks/custom/use-modal'
 import Avatar from '@/shared/ui/avatar'
+import ReviewGuideModal from '@/shared/ui/modal/review-guide-modal'
 
 import useDeleteReview from '../../_hooks/query/use-delete-review'
 import StarRating from '../star-rating/index'
 import AddReview from './add-review'
-import ReviewGuideModal from './review-guide-modal'
 import styles from './styles.module.scss'
 
 const cx = classNames.bind(styles)
@@ -24,7 +24,7 @@ interface Props {
   createdAt: string
   starRating: number
   isReviewer: boolean
-  isAdmin: boolean
+  isAdmin?: boolean
 }
 
 const ReviewItem = ({
@@ -72,7 +72,7 @@ const ReviewItem = ({
               <button onClick={openModal}>삭제</button>
             </>
           )}
-          {!isReviewer && isAdmin && <button>삭제</button>}
+          {!isReviewer && isAdmin && <button onClick={openModal}>삭제</button>}
         </div>
       </div>
       {isEditable ? (
@@ -85,7 +85,7 @@ const ReviewItem = ({
           onCancel={() => setIsEditable(false)}
         />
       ) : (
-        <div className={cx('content')}>{content}</div>
+        <pre className={cx('content')}>{content}</pre>
       )}
       <ReviewGuideModal
         isModalOpen={isModalOpen}
diff --git a/app/(dashboard)/strategies/[strategyId]/_ui/review-container/review-list.tsx b/app/(dashboard)/strategies/[strategyId]/_ui/review-container/review-list.tsx
index 1e05cef3..b3d5fe14 100644
--- a/app/(dashboard)/strategies/[strategyId]/_ui/review-container/review-list.tsx
+++ b/app/(dashboard)/strategies/[strategyId]/_ui/review-container/review-list.tsx
@@ -44,7 +44,7 @@ const ReviewList = ({ strategyId, reviews, totalReview, currentPage, setCurrentP
             starRating={review.starRating}
             content={review.content}
             isReviewer={user?.nickname === review.nickname}
-            isAdmin={user?.role.includes('admin') ?? false}
+            isAdmin={user?.role.includes('ADMIN')}
           />
         ))}
       </ul>
diff --git a/app/(dashboard)/strategies/[strategyId]/_ui/review-container/styles.module.scss b/app/(dashboard)/strategies/[strategyId]/_ui/review-container/styles.module.scss
index 02376d20..ed0c05bb 100644
--- a/app/(dashboard)/strategies/[strategyId]/_ui/review-container/styles.module.scss
+++ b/app/(dashboard)/strategies/[strategyId]/_ui/review-container/styles.module.scss
@@ -76,13 +76,20 @@
         color: $color-gray-500;
         font-weight: $text-normal;
         margin-right: 5px;
+        @include typo-b3;
       }
     }
   }
   .content {
     margin: 10px 0;
-    font-size: 18px;
-    font-weight: $text-medium;
+    word-wrap: break-word;
+    word-break: break-word;
+    white-space: pre-wrap;
+    @include typo-b2;
+    font-weight: $text-normal;
+    @include tablet-sm {
+      font-size: $text-b3;
+    }
   }
 }
 
@@ -99,18 +106,3 @@
     padding-left: 10px;
   }
 }
-
-.message {
-  @include typo-b1;
-  text-align: center;
-  color: $color-gray-800;
-  margin-bottom: 30px;
-}
-
-.two-button {
-  display: flex;
-  gap: 10px;
-  & .button {
-    width: 90px;
-  }
-}
diff --git a/app/(dashboard)/strategies/[strategyId]/page.tsx b/app/(dashboard)/strategies/[strategyId]/page.tsx
index d928a094..c84ba868 100644
--- a/app/(dashboard)/strategies/[strategyId]/page.tsx
+++ b/app/(dashboard)/strategies/[strategyId]/page.tsx
@@ -55,10 +55,6 @@ const StrategyDetailPage = ({ params }: { params: { strategyId: string } }) => {
     })
   }
 
-  const hasDetailsSideData = detailsSideData?.map((data) => {
-    if (!Array.isArray(data)) return data.data !== undefined
-  })
-
   return (
     <>
       <BackHeader label={'목록으로 돌아가기'} />
@@ -68,7 +64,10 @@ const StrategyDetailPage = ({ params }: { params: { strategyId: string } }) => {
           <>
             <DetailsInformation information={information} strategyId={strategyNumber} />
             <AnalysisContainer strategyId={strategyNumber} />
-            <ReviewContainer strategyId={strategyNumber} />
+            <ReviewContainer
+              strategyId={strategyNumber}
+              isMyStrategy={user?.nickname === information.nickname}
+            />
           </>
         )}
       </Suspense>
@@ -81,18 +80,18 @@ const StrategyDetailPage = ({ params }: { params: { strategyId: string } }) => {
                 isSubscribed={information?.isSubscribed}
                 subscribers={information?.subscriptionCount}
                 onClick={openModal}
+                strategyId={strategyNumber}
               />
-              {hasDetailsSideData?.[0] &&
-                detailsSideData?.map((data, idx) => (
-                  <div key={`${data}_${idx}`}>
-                    <DetailsSideItem
-                      strategyId={strategyNumber}
-                      information={data}
-                      isMyStrategy={user?.nickname === information.nickname}
-                      strategyName={information.strategyName}
-                    />
-                  </div>
-                ))}
+              {detailsSideData?.map((data, idx) => (
+                <div key={`${data}_${idx}`}>
+                  <DetailsSideItem
+                    strategyId={strategyNumber}
+                    information={data}
+                    isMyStrategy={user?.nickname === information.nickname}
+                    strategyName={information.strategyName}
+                  />
+                </div>
+              ))}
             </>
           )}
         </Suspense>
diff --git a/app/(dashboard)/strategies/[strategyId]/util.ts b/app/(dashboard)/strategies/[strategyId]/util.ts
new file mode 100644
index 00000000..61a8409c
--- /dev/null
+++ b/app/(dashboard)/strategies/[strategyId]/util.ts
@@ -0,0 +1,36 @@
+import {
+  DailyAnalysisModel,
+  MonthlyAnalysisModel,
+  MyDailyAnalysisModel,
+} from '@/shared/types/strategy-data'
+import { TableBodyDataType } from '@/shared/ui/table/vertical'
+
+type AnalysisModelType = DailyAnalysisModel | MyDailyAnalysisModel | MonthlyAnalysisModel
+type RateKeysType<ObjectType> = keyof {
+  [Key in keyof ObjectType as Key extends `${string}Rate` ? Key : never]: ObjectType[Key]
+}
+
+export const generateFormattedStrategyData = (data: AnalysisModelType[]): TableBodyDataType[] => {
+  if (!data || data.length === 0) return []
+
+  return data.map((item) => {
+    const transformedItem = { ...item }
+
+    const hasRateKey = Object.keys(transformedItem).some((key) => key.endsWith('Rate'))
+    if (!hasRateKey) return transformedItem
+
+    type RatePropsType = RateKeysType<AnalysisModelType>
+
+    Object.keys(transformedItem).forEach((key) => {
+      if (key.endsWith('Rate')) {
+        const value = (transformedItem as AnalysisModelType)[key as keyof AnalysisModelType]
+
+        if (value !== null && typeof value === 'number') {
+          transformedItem[key as RatePropsType] = `${(value * 100).toFixed(2)}%`
+        }
+      }
+    })
+
+    return transformedItem
+  })
+}
diff --git a/app/(dashboard)/strategies/_hooks/query/use-get-strategies-search.ts b/app/(dashboard)/strategies/_hooks/query/use-get-strategies-search.ts
index 77574220..38b2e7db 100644
--- a/app/(dashboard)/strategies/_hooks/query/use-get-strategies-search.ts
+++ b/app/(dashboard)/strategies/_hooks/query/use-get-strategies-search.ts
@@ -1,10 +1,12 @@
 import { useQuery } from '@tanstack/react-query'
 
+import { QUERY_KEY } from '@/shared/constants/query-key'
+
 import getStrategiesSearch from '../../_api/get-strategies-search'
 
 const useGetStrategiesSearch = () => {
   return useQuery({
-    queryKey: ['strategiesSearch'],
+    queryKey: [QUERY_KEY.STRATEGY_SEARCH],
     queryFn: getStrategiesSearch,
   })
 }
diff --git a/app/(dashboard)/strategies/_hooks/query/use-get-subscribe.ts b/app/(dashboard)/strategies/_hooks/query/use-get-subscribe.ts
index c50532f4..7f2fca89 100644
--- a/app/(dashboard)/strategies/_hooks/query/use-get-subscribe.ts
+++ b/app/(dashboard)/strategies/_hooks/query/use-get-subscribe.ts
@@ -1,10 +1,17 @@
-import { useMutation } from '@tanstack/react-query'
+import { useMutation, useQueryClient } from '@tanstack/react-query'
+
+import { QUERY_KEY } from '@/shared/constants/query-key'
 
 import getSubscribe from '../../_api/get-subscribe'
 
 const useGetSubscribe = () => {
+  const queryClient = useQueryClient()
+
   return useMutation({
     mutationFn: (strategyId: number) => getSubscribe(strategyId),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: [QUERY_KEY.MY_FAVORITE_STRATEGIES] })
+    },
   })
 }
 
diff --git a/app/(dashboard)/strategies/_hooks/query/use-post-strategies.ts b/app/(dashboard)/strategies/_hooks/query/use-post-strategies.ts
index c9297832..e27452a0 100644
--- a/app/(dashboard)/strategies/_hooks/query/use-post-strategies.ts
+++ b/app/(dashboard)/strategies/_hooks/query/use-post-strategies.ts
@@ -1,5 +1,7 @@
 import { useQuery } from '@tanstack/react-query'
 
+import { QUERY_KEY } from '@/shared/constants/query-key'
+
 import postStrategies from '../../_api/post-strategies'
 import { SearchTermsModel } from '../../_ui/search-bar/_type/search'
 
@@ -13,8 +15,9 @@ const usePostStrategies = ({
   searchTerms: SearchTermsModel
 }) => {
   return useQuery({
-    queryKey: ['strategies'],
+    queryKey: [QUERY_KEY.STRATEGIES, page, size],
     queryFn: () => postStrategies(page, size, searchTerms),
+    staleTime: 0,
   })
 }
 
diff --git a/app/(dashboard)/strategies/_ui/search-bar/_store/use-searching-item-store.ts b/app/(dashboard)/strategies/_ui/search-bar/_store/use-searching-item-store.ts
index 8f78db4c..4247dd1e 100644
--- a/app/(dashboard)/strategies/_ui/search-bar/_store/use-searching-item-store.ts
+++ b/app/(dashboard)/strategies/_ui/search-bar/_store/use-searching-item-store.ts
@@ -15,7 +15,7 @@ interface ActionModel {
   setRangeValue: (key: keyof SearchTermsModel, type: keyof RangeModel, value: number) => void
   setSearchWord: (searchWord: string) => void
   resetState: () => void
-  validateRangeValues: () => void
+  validateRangeValues: () => StateModel['errOptions']
 }
 
 interface ActionsModel {
@@ -95,6 +95,7 @@ const useSearchingItemStore = create<StateModel & ActionsModel>((set, get) => ({
         return false
       })
       set({ errOptions })
+      return errOptions
     },
   },
 }))
diff --git a/app/(dashboard)/strategies/_ui/search-bar/accordion-button.tsx b/app/(dashboard)/strategies/_ui/search-bar/accordion-button.tsx
index 78752772..a033aea7 100644
--- a/app/(dashboard)/strategies/_ui/search-bar/accordion-button.tsx
+++ b/app/(dashboard)/strategies/_ui/search-bar/accordion-button.tsx
@@ -2,7 +2,7 @@
 
 import { useContext } from 'react'
 
-import { CloseIcon, OpenIcon } from '@/public/icons'
+import { CloseIcon, ModalAlertIcon, OpenIcon } from '@/public/icons'
 import classNames from 'classnames/bind'
 
 import useSearchingItemStore from './_store/use-searching-item-store'
@@ -21,6 +21,7 @@ interface Props {
 const AccordionButton = ({ optionId, title, size }: Props) => {
   const { openIds, handleButtonIds } = useContext(AccordionContext)
   const searchTerms = useSearchingItemStore((state) => state.searchTerms)
+  const errOptions = useSearchingItemStore((state) => state.errOptions)
 
   const hasOpenId = openIds?.[optionId]
   const clickedValue = searchTerms[optionId]
@@ -30,7 +31,10 @@ const AccordionButton = ({ optionId, title, size }: Props) => {
       <button onClick={() => handleButtonIds(optionId, !hasOpenId)}>
         <p>
           {title}
-          {Array.isArray(clickedValue) &&
+          {errOptions?.includes(optionId) ? (
+            <ModalAlertIcon />
+          ) : (
+            Array.isArray(clickedValue) &&
             clickedValue?.length !== 0 &&
             (clickedValue.length !== size ? (
               <span>
@@ -38,7 +42,8 @@ const AccordionButton = ({ optionId, title, size }: Props) => {
               </span>
             ) : (
               <span>(All)</span>
-            ))}
+            ))
+          )}
         </p>
         {hasOpenId ? <CloseIcon /> : <OpenIcon />}
       </button>
diff --git a/app/(dashboard)/strategies/_ui/search-bar/accordion-container.tsx b/app/(dashboard)/strategies/_ui/search-bar/accordion-container.tsx
index 7c5c4acf..3bb70ce1 100644
--- a/app/(dashboard)/strategies/_ui/search-bar/accordion-container.tsx
+++ b/app/(dashboard)/strategies/_ui/search-bar/accordion-container.tsx
@@ -35,10 +35,8 @@ const AccordionContainer = ({ optionId, title, panels }: Props) => {
 
   return (
     <AccordionContext.Provider value={{ openIds, panelRef, handleButtonIds }}>
-      <div>
-        <AccordionButton optionId={optionId} title={title} size={panels?.length} />
-        <AccordionPanel optionId={optionId} panels={panels} />
-      </div>
+      <AccordionButton optionId={optionId} title={title} size={panels?.length} />
+      <AccordionPanel optionId={optionId} panels={panels} />
     </AccordionContext.Provider>
   )
 }
diff --git a/app/(dashboard)/strategies/_ui/search-bar/index.tsx b/app/(dashboard)/strategies/_ui/search-bar/index.tsx
index bdb0a0ce..40fd7c7a 100644
--- a/app/(dashboard)/strategies/_ui/search-bar/index.tsx
+++ b/app/(dashboard)/strategies/_ui/search-bar/index.tsx
@@ -2,10 +2,14 @@
 
 import { useRef, useState } from 'react'
 
+import { useRouter, useSearchParams } from 'next/navigation'
+
 import classNames from 'classnames/bind'
 
+import { STRATEGIES_PAGE_COUNT } from '@/shared/constants/count-per-page'
+import { PATH } from '@/shared/constants/path'
 import { Button } from '@/shared/ui/button'
-import { SearchInput } from '@/shared/ui/search-input'
+import SearchInput from '@/shared/ui/search-input'
 
 import useGetStrategiesSearch from '../../_hooks/query/use-get-strategies-search'
 import usePostStrategies from '../../_hooks/query/use-post-strategies'
@@ -27,13 +31,15 @@ interface AccordionMenuDataModel {
 const SearchBarContainer = () => {
   const [isMainTab, setIsMainTab] = useState(true)
   const searchTerms = useSearchingItemStore((state) => state.searchTerms)
-  const errOptions = useSearchingItemStore((state) => state.errOptions)
-  const { setSearchWord, setAlgorithm, resetState, validateRangeValues } = useSearchingItemStore(
+  const { setSearchWord, setAlgorithm, resetState } = useSearchingItemStore(
     (state) => state.actions
   )
   const searchRef = useRef<HTMLInputElement>(null)
   const { data } = useGetStrategiesSearch()
-  const { refetch } = usePostStrategies({ page: 1, size: 8, searchTerms })
+  const params = useSearchParams()
+  const router = useRouter()
+  const page = parseInt(params.get('page') || '1')
+  const { refetch } = usePostStrategies({ page, size: 8, searchTerms })
 
   const handleSearchWord = () => {
     if (searchRef.current) {
@@ -41,12 +47,6 @@ const SearchBarContainer = () => {
     }
   }
 
-  const handleEnterSearch = (e: React.KeyboardEvent<HTMLInputElement>) => {
-    if (e.key === 'Enter') {
-      onSearch()
-    }
-  }
-
   const onReset = async () => {
     await resetState()
     if (searchRef.current) {
@@ -56,9 +56,13 @@ const SearchBarContainer = () => {
   }
 
   const onSearch = async () => {
-    await validateRangeValues()
-    if (errOptions === null || errOptions.length === 0) {
-      refetch()
+    const { validateRangeValues } = useSearchingItemStore.getState().actions
+    const errOptions = validateRangeValues()
+    if (errOptions?.length === 0) {
+      if (page !== 1) {
+        await router.replace(`${PATH.STRATEGIES}?page=1&size=${STRATEGIES_PAGE_COUNT}`)
+      }
+      await refetch()
     }
   }
 
@@ -85,16 +89,17 @@ const SearchBarContainer = () => {
 
   return (
     <>
-      <div className={cx('searchInput-wrapper')}>
+      <div className={cx('search-input-wrapper')}>
         <SearchInput
           ref={searchRef}
+          className={cx('input')}
           placeholder="전략명을 검색하세요."
           onChange={handleSearchWord}
-          onKeyDown={(e) => handleEnterSearch(e)}
           onSearchIconClick={onSearch}
+          maxLength={16}
         />
       </div>
-      <div className={cx('searchInput-wrapper')}>
+      <div className={cx('search-input-wrapper')}>
         <SearchBarTab isMainTab={isMainTab} onChangeTab={setIsMainTab} />
         {isMainTab
           ? ACCORDION_MENU.map((menu) => (
diff --git a/app/(dashboard)/strategies/_ui/search-bar/range-container.tsx b/app/(dashboard)/strategies/_ui/search-bar/range-container.tsx
index 44aa439b..329960fc 100644
--- a/app/(dashboard)/strategies/_ui/search-bar/range-container.tsx
+++ b/app/(dashboard)/strategies/_ui/search-bar/range-container.tsx
@@ -16,20 +16,22 @@ const RangeContainer = ({ optionId }: Props) => {
   const errOptions = useSearchingItemStore((state) => state.errOptions)
   const searchTerms = useSearchingItemStore((state) => state.searchTerms)
   const { setRangeValue } = useSearchingItemStore((state) => state.actions)
+  const option = searchTerms?.[optionId] as RangeModel | null
 
   const handleRangeValue = (e: React.ChangeEvent<HTMLInputElement>, type: 'min' | 'max') => {
-    const value = Number(e.target.value)
-    setRangeValue(optionId, type, value)
+    const value = e.target.value === '' ? null : Number(e.target.value)
+    setRangeValue(optionId, type, value ?? 0)
   }
 
-  const option = searchTerms?.[optionId] as RangeModel | null
+  const getDisplayValue = (value: number | null | undefined): string =>
+    value === null || value === undefined ? '' : String(value)
 
   return (
     <div className={cx('range-container')}>
       <div className={cx('range-wrapper')}>
         <input
           className={cx('range')}
-          value={option?.min ?? ''}
+          value={getDisplayValue(option?.min)}
           type="number"
           placeholder="0"
           onChange={(e) => handleRangeValue(e, 'min')}
@@ -37,7 +39,7 @@ const RangeContainer = ({ optionId }: Props) => {
         <span>~</span>
         <input
           className={cx('range')}
-          value={option?.max ?? ''}
+          value={getDisplayValue(option?.max)}
           type="number"
           placeholder="0"
           onChange={(e) => handleRangeValue(e, 'max')}
diff --git a/app/(dashboard)/strategies/_ui/search-bar/styles.module.scss b/app/(dashboard)/strategies/_ui/search-bar/styles.module.scss
index fe548f66..41f8923f 100644
--- a/app/(dashboard)/strategies/_ui/search-bar/styles.module.scss
+++ b/app/(dashboard)/strategies/_ui/search-bar/styles.module.scss
@@ -3,11 +3,16 @@
   justify-content: space-between;
 }
 
-.searchInput-wrapper {
+.search-input-wrapper {
   background-color: $color-white;
   padding: 20px;
   border: 5px;
   margin-bottom: 10px;
+  .input {
+    @include tablet-md {
+      width: 180px;
+    }
+  }
 }
 
 .search-button-wrapper {
@@ -18,9 +23,19 @@
     &.initialize {
       width: 90px;
       padding: 0;
+      @include tablet-md {
+        width: 70px;
+      }
     }
     &.searching {
       width: 140px;
+      @include tablet-md {
+        width: 100px;
+        padding: 0;
+      }
+    }
+    @include tablet-md {
+      font-size: $text-b3;
     }
   }
 }
@@ -40,6 +55,12 @@
       background-color: transparent;
       color: $color-gray-700;
     }
+    @include tablet-md {
+      width: 100px;
+      height: 40px;
+      font-size: $text-b3;
+      padding: 0;
+    }
   }
 }
 
@@ -87,6 +108,13 @@
         color: $color-orange-500;
         margin-left: 4px;
       }
+      svg {
+        width: 26px;
+        margin: -3px 0 -8px 5px;
+        path {
+          fill: $color-orange-600;
+        }
+      }
     }
     svg {
       width: 26px;
@@ -163,6 +191,9 @@
         color: $color-gray-600;
       }
     }
+    @include tablet-md {
+      padding: 4px;
+    }
   }
 }
 
diff --git a/app/(dashboard)/strategies/_ui/side-container/styles.module.scss b/app/(dashboard)/strategies/_ui/side-container/styles.module.scss
index 9a600262..7b1f75cd 100644
--- a/app/(dashboard)/strategies/_ui/side-container/styles.module.scss
+++ b/app/(dashboard)/strategies/_ui/side-container/styles.module.scss
@@ -3,4 +3,7 @@
   position: absolute;
   right: 0px;
   top: 130px;
+  @include tablet-md {
+    width: 220px;
+  }
 }
diff --git a/app/(dashboard)/strategies/_ui/strategy-list/index.tsx b/app/(dashboard)/strategies/_ui/strategy-list/index.tsx
index 46d8113d..13262c3c 100644
--- a/app/(dashboard)/strategies/_ui/strategy-list/index.tsx
+++ b/app/(dashboard)/strategies/_ui/strategy-list/index.tsx
@@ -26,25 +26,36 @@ const StrategyList = () => {
   })
   const searchTerms = useSearchingItemStore((state) => state.searchTerms)
   const { resetState } = useSearchingItemStore((state) => state.actions)
-  const { data } = usePostStrategies({ page, size, searchTerms })
+  const { data, isLoading, refetch } = usePostStrategies({ page, size, searchTerms })
 
   useEffect(() => {
-    resetState()
+    handleInitialize()
   }, [])
 
+  const handleInitialize = async () => {
+    await resetState()
+    await refetch()
+  }
+
   const strategiesData = data?.content as StrategiesModel[]
   const totalPages = (data?.totalPages as number) || null
 
   return (
     <>
-      {strategiesData?.map((strategy) => (
-        <StrategiesItem key={strategy.strategyId} strategiesData={strategy} />
-      ))}
-      <div className={cx('pagination')}>
-        {totalPages && (
-          <Pagination currentPage={page} maxPage={totalPages} onPageChange={handlePageChange} />
-        )}
-      </div>
+      {strategiesData?.length > 0 ? (
+        <>
+          {strategiesData.map((strategy) => (
+            <StrategiesItem key={strategy.strategyId} strategiesData={strategy} />
+          ))}
+          <div className={cx('pagination')}>
+            {totalPages && (
+              <Pagination currentPage={page} maxPage={totalPages} onPageChange={handlePageChange} />
+            )}
+          </div>
+        </>
+      ) : (
+        !isLoading && <div className={cx('no-data')}>검색된 전략이 없습니다.</div>
+      )}
     </>
   )
 }
diff --git a/app/(dashboard)/strategies/_ui/strategy-list/styles.module.scss b/app/(dashboard)/strategies/_ui/strategy-list/styles.module.scss
index f5081c9f..f70a087e 100644
--- a/app/(dashboard)/strategies/_ui/strategy-list/styles.module.scss
+++ b/app/(dashboard)/strategies/_ui/strategy-list/styles.module.scss
@@ -1,3 +1,12 @@
 .pagination {
   margin-bottom: 24px;
 }
+
+.no-data {
+  display: flex;
+  justify-content: center;
+  margin-top: 80px;
+  color: $color-gray-600;
+  height: 200px;
+  @include typo-b1;
+}
diff --git a/app/(dashboard)/strategies/layout.module.scss b/app/(dashboard)/strategies/layout.module.scss
index 29e26f4b..0c23ece5 100644
--- a/app/(dashboard)/strategies/layout.module.scss
+++ b/app/(dashboard)/strategies/layout.module.scss
@@ -6,5 +6,8 @@
     width: calc(100% - $strategy-sidebar-width);
     max-width: $max-width;
     padding-right: 10px;
+    @include tablet-md {
+      width: calc(100% - #{$strategy-sidebar-width} + 60px);
+    }
   }
 }
diff --git a/app/(dashboard)/strategies/page.module.scss b/app/(dashboard)/strategies/page.module.scss
index f53b42ce..6170bfa6 100644
--- a/app/(dashboard)/strategies/page.module.scss
+++ b/app/(dashboard)/strategies/page.module.scss
@@ -2,17 +2,6 @@
   margin-top: 80px;
 }
 
-.strategy-layout {
-  display: flex;
-  position: relative;
-
-  .strategy {
-    width: calc(100% - $strategy-sidebar-width);
-    max-width: $max-width;
-    padding-right: 10px;
-  }
-}
-
 .skeleton-side-bar {
   width: $strategy-sidebar-width;
   position: absolute;
diff --git a/app/(dashboard)/traders/[traderId]/page.module.scss b/app/(dashboard)/traders/[traderId]/page.module.scss
index c385baef..d212bc72 100644
--- a/app/(dashboard)/traders/[traderId]/page.module.scss
+++ b/app/(dashboard)/traders/[traderId]/page.module.scss
@@ -1,5 +1,5 @@
 .page-container {
-  padding: 0 15px;
+  padding: 0 15px 20px;
 }
 
 .title {
@@ -9,3 +9,14 @@
 .card-wrapper {
   margin-bottom: 54px;
 }
+
+.spinner {
+  margin-top: 200px;
+}
+
+.empty-message {
+  margin-top: 180px;
+  text-align: center;
+  @include typo-b1;
+  color: $color-gray-600;
+}
diff --git a/app/(dashboard)/traders/[traderId]/page.tsx b/app/(dashboard)/traders/[traderId]/page.tsx
index 390556e1..9b39f73d 100644
--- a/app/(dashboard)/traders/[traderId]/page.tsx
+++ b/app/(dashboard)/traders/[traderId]/page.tsx
@@ -1,51 +1,73 @@
 'use client'
 
+import { useParams } from 'next/navigation'
+
 import classNames from 'classnames/bind'
 
+import { PATH } from '@/shared/constants/path'
+import { usePagination } from '@/shared/hooks/custom/use-pagination'
 import BackHeader from '@/shared/ui/header/back-header'
+import Pagination from '@/shared/ui/pagination'
+import Spinner from '@/shared/ui/spinner'
 import Title from '@/shared/ui/title'
 import TradersListCard from '@/shared/ui/traders-list-card'
 
 import ListHeader from '../../_ui/list-header'
 import StrategiesItem from '../../_ui/strategies-item'
 import useGetTraderStrategies from '../_hooks/use-get-trader-details'
+import useGetTraderProfile from '../_hooks/use-get-trader-profile'
 import styles from './page.module.scss'
 
 const cx = classNames.bind(styles)
 
 const TraderDetailPage = () => {
-  const traderId = 1
+  const { traderId } = useParams()
+  const traderIdToNumber = parseInt(traderId as string)
   const { data: strategiesData, isLoading } = useGetTraderStrategies({
-    traderId,
+    traderId: traderIdToNumber,
+  })
+  const { data: traderProfile } = useGetTraderProfile(traderIdToNumber)
+  const { page, handlePageChange } = usePagination({
+    basePath: `${PATH.TRADERS}/${traderId}`,
+    pageSize: 5,
   })
 
   const strategies = strategiesData?.content
-  const firstStrategy = strategies?.[0]
+  const totalPages = strategiesData?.totalPages
+
+  if (isLoading) {
+    return <Spinner className={cx('spinner')} />
+  }
 
-  if (!firstStrategy || isLoading) {
-    return null
+  if (!traderProfile) {
+    return <p className={cx('empty-message')}>트레이더 정보를 불러오지 못했습니다.</p>
   }
 
   return (
     <>
       <div className={cx('page-container')}>
-        <BackHeader label={'목록으로 돌아가기'} />
+        <BackHeader label={'목록으로 돌아가기'} href={PATH.TRADERS} />
         <div className={cx('title')}>
           <Title label={'트레이더 상세보기'} />
         </div>
         <div className={cx('card-wrapper')}>
           <TradersListCard
-            imageUrl={firstStrategy.traderImgUrl}
-            nickname={firstStrategy.nickname}
-            strategyCount={strategies.length}
-            subscriberCount={firstStrategy.subscriptionCount}
-            userId={traderId}
+            imageUrl={traderProfile.imageUrl}
+            nickname={traderProfile.nickname}
+            strategyCount={traderProfile.strategyCount}
+            subscriberCount={traderProfile.totalSubCount}
+            userId={traderIdToNumber}
+            hasButton={false}
           />
         </div>
         <ListHeader />
         {strategies?.map((strategy) => (
           <StrategiesItem key={strategy.strategyId} strategiesData={strategy} />
         ))}
+        {!strategies?.length && <p className={cx('empty-message')}>등록한 전략이 없습니다.</p>}
+        {!!totalPages && (
+          <Pagination currentPage={page} maxPage={totalPages} onPageChange={handlePageChange} />
+        )}
       </div>
     </>
   )
diff --git a/app/(dashboard)/traders/_api/get-trader-details.ts b/app/(dashboard)/traders/_api/get-trader-details.ts
index 348c2724..1ab80985 100644
--- a/app/(dashboard)/traders/_api/get-trader-details.ts
+++ b/app/(dashboard)/traders/_api/get-trader-details.ts
@@ -1,4 +1,5 @@
 import axiosInstance from '@/shared/api/axios'
+import { StrategiesModel } from '@/shared/types/strategy-data'
 
 export interface StockTypeInfoModel {
   stockTypeIconUrls: string[]
@@ -10,30 +11,11 @@ export interface ProfitRateChartDataModel {
   profitRates: number[]
 }
 
-export interface StrategyModel {
-  strategyId: number
-  strategyName: string
-  traderImgUrl: string
-  nickname: string
-  stockTypeInfo: StockTypeInfoModel
-  tradeTypeIconUrl: string
-  tradeTypeName: string
-  profitRateChartData: ProfitRateChartDataModel
-  mdd: number
-  smScore: number
-  cumulativeProfitRate: number
-  recentYearProfitLossRate: number
-  subscriptionCount: number
-  averageRating: number
-  totalReviews: number
-  isSubscribed: boolean
-}
-
-interface TraderStrategiesResponseModel {
+export interface TraderStrategiesResponseModel {
   isSuccess: boolean
   message: string
   result: {
-    content: StrategyModel[]
+    content: StrategiesModel[]
     page: number
     size: number
     totalElements: number
diff --git a/app/(dashboard)/traders/_api/get-trader-profile.ts b/app/(dashboard)/traders/_api/get-trader-profile.ts
new file mode 100644
index 00000000..114531cf
--- /dev/null
+++ b/app/(dashboard)/traders/_api/get-trader-profile.ts
@@ -0,0 +1,34 @@
+import axiosInstance from '@/shared/api/axios'
+
+export interface TraderProfileModel {
+  userId: number
+  userName: string
+  nickname: string
+  imageUrl: string
+  strategyCount: number
+  totalSubCount: number
+}
+
+export interface TraderProfileResponseModel {
+  isSuccess: boolean
+  message: string
+  result: TraderProfileModel
+  code: number
+}
+
+export const getTraderProfile = async (traderId: number): Promise<TraderProfileModel> => {
+  try {
+    const response = await axiosInstance.get<TraderProfileResponseModel>(
+      `/api/users/traders/${traderId}`
+    )
+
+    if (response.data.isSuccess) {
+      return response.data.result
+    } else {
+      throw new Error(response.data.message || '요청 실패')
+    }
+  } catch (err) {
+    console.error(err)
+    throw new Error('트레이더 프로필 조회에 실패하였습니다.')
+  }
+}
diff --git a/app/(dashboard)/traders/_hooks/use-get-trader-details.ts b/app/(dashboard)/traders/_hooks/use-get-trader-details.ts
index 3193d3b6..527aca37 100644
--- a/app/(dashboard)/traders/_hooks/use-get-trader-details.ts
+++ b/app/(dashboard)/traders/_hooks/use-get-trader-details.ts
@@ -1,5 +1,7 @@
 import { useQuery } from '@tanstack/react-query'
 
+import { QUERY_KEY } from '@/shared/constants/query-key'
+
 import getTraderStrategies from '../_api/get-trader-details'
 
 interface Props {
@@ -8,7 +10,7 @@ interface Props {
 
 const useGetTraderStrategies = ({ traderId }: Props) => {
   return useQuery({
-    queryKey: ['trader-strategies', traderId],
+    queryKey: [QUERY_KEY.TRADER_STRATEGIES, traderId],
     queryFn: () => getTraderStrategies({ traderId }),
     enabled: !!traderId,
   })
diff --git a/app/(dashboard)/traders/_hooks/use-get-trader-profile.ts b/app/(dashboard)/traders/_hooks/use-get-trader-profile.ts
new file mode 100644
index 00000000..b3015299
--- /dev/null
+++ b/app/(dashboard)/traders/_hooks/use-get-trader-profile.ts
@@ -0,0 +1,13 @@
+import { useQuery } from '@tanstack/react-query'
+
+import { QUERY_KEY } from '@/shared/constants/query-key'
+
+import { getTraderProfile } from '../_api/get-trader-profile'
+
+const useGetTraderProfile = (traderId: number) => {
+  return useQuery({
+    queryKey: [QUERY_KEY.TRADERS, traderId],
+    queryFn: () => getTraderProfile(traderId),
+  })
+}
+export default useGetTraderProfile
diff --git a/app/(dashboard)/traders/_hooks/use-get-traders.ts b/app/(dashboard)/traders/_hooks/use-get-traders.ts
index d03ce64c..fff1f3c0 100644
--- a/app/(dashboard)/traders/_hooks/use-get-traders.ts
+++ b/app/(dashboard)/traders/_hooks/use-get-traders.ts
@@ -1,10 +1,12 @@
 import { useQuery } from '@tanstack/react-query'
 
+import { QUERY_KEY } from '@/shared/constants/query-key'
+
 import { TradersParamsModel, getTraders } from '../_api/get-traders'
 
 const useGetTraders = ({ page, size, keyword, orderBy }: TradersParamsModel) => {
   return useQuery({
-    queryKey: ['traders', page, size, keyword, orderBy],
+    queryKey: [QUERY_KEY.TRADERS, page, size, keyword, orderBy],
     queryFn: () => getTraders({ page, size, keyword, orderBy }),
   })
 }
diff --git a/app/(dashboard)/traders/page.module.scss b/app/(dashboard)/traders/page.module.scss
index 615e9a98..a0d1f9e0 100644
--- a/app/(dashboard)/traders/page.module.scss
+++ b/app/(dashboard)/traders/page.module.scss
@@ -21,6 +21,14 @@
   grid-template-columns: repeat(4, 1fr);
   gap: 24px 32px;
   margin-bottom: 30px;
+
+  @include tablet-md {
+    gap: 16px;
+  }
+
+  @include mobile {
+    gap: 16px;
+  }
 }
 
 .pagination-wrapper {
diff --git a/app/(dashboard)/traders/page.tsx b/app/(dashboard)/traders/page.tsx
index 1d5cbef4..1e353467 100644
--- a/app/(dashboard)/traders/page.tsx
+++ b/app/(dashboard)/traders/page.tsx
@@ -10,7 +10,7 @@ import { PATH } from '@/shared/constants/path'
 import { usePagination } from '@/shared/hooks/custom/use-pagination'
 import { DropdownValueType } from '@/shared/ui/dropdown/types'
 import Pagination from '@/shared/ui/pagination'
-import { SearchInput } from '@/shared/ui/search-input'
+import SearchInput from '@/shared/ui/search-input'
 import Select from '@/shared/ui/select'
 import Title from '@/shared/ui/title'
 import TradersListCard from '@/shared/ui/traders-list-card'
diff --git a/app/(landing)/(home)/_hooks/query/use-get-strategies-metrics.ts b/app/(landing)/(home)/_hooks/query/use-get-strategies-metrics.ts
index 34e94629..245d2b1e 100644
--- a/app/(landing)/(home)/_hooks/query/use-get-strategies-metrics.ts
+++ b/app/(landing)/(home)/_hooks/query/use-get-strategies-metrics.ts
@@ -1,11 +1,13 @@
 import { useQuery } from '@tanstack/react-query'
 
+import { QUERY_KEY } from '@/shared/constants/query-key'
+
 import { getStrategiesMetrics } from '../../_api/strategies-metrics'
 import { AverageMetricsChartDataModel } from '../../_ui/average-metrics-section/average-metrics-chart'
 
 const useGetStrategiesMetrics = () => {
   return useQuery<AverageMetricsChartDataModel>({
-    queryKey: ['totalStrategiesMetrics'],
+    queryKey: [QUERY_KEY.TOTAL_STRATEGIES_METRICS],
     queryFn: getStrategiesMetrics,
   })
 }
diff --git a/app/(landing)/(home)/_hooks/query/use-get-top-ranking-smscore.ts b/app/(landing)/(home)/_hooks/query/use-get-top-ranking-smscore.ts
index 1b632f85..f62e7203 100644
--- a/app/(landing)/(home)/_hooks/query/use-get-top-ranking-smscore.ts
+++ b/app/(landing)/(home)/_hooks/query/use-get-top-ranking-smscore.ts
@@ -1,12 +1,13 @@
 import { useQuery } from '@tanstack/react-query'
 
+import { QUERY_KEY } from '@/shared/constants/query-key'
 import { StrategyCardModel } from '@/shared/types/strategy-data'
 
 import { getTopRankingSmScore } from '../../_api/top-strategies'
 
 const useGetTopRankingSmScore = () => {
   return useQuery<StrategyCardModel[]>({
-    queryKey: ['topRankingSmScore'],
+    queryKey: [QUERY_KEY.TOP_RANKING_SM_SCORE],
     queryFn: getTopRankingSmScore,
   })
 }
diff --git a/app/(landing)/(home)/_hooks/query/use-get-top-ranking.ts b/app/(landing)/(home)/_hooks/query/use-get-top-ranking.ts
index 2f8f3429..351fd5b2 100644
--- a/app/(landing)/(home)/_hooks/query/use-get-top-ranking.ts
+++ b/app/(landing)/(home)/_hooks/query/use-get-top-ranking.ts
@@ -1,12 +1,13 @@
 import { useQuery } from '@tanstack/react-query'
 
+import { QUERY_KEY } from '@/shared/constants/query-key'
 import { StrategyCardModel } from '@/shared/types/strategy-data'
 
 import { getTopRanking } from '../../_api/top-strategies'
 
 const useGetTopRanking = () => {
   return useQuery<StrategyCardModel[]>({
-    queryKey: ['topRanking'],
+    queryKey: [QUERY_KEY.TOP_RANKING],
     queryFn: getTopRanking,
   })
 }
diff --git a/app/(landing)/(home)/_hooks/query/use-get-user-metrics.ts b/app/(landing)/(home)/_hooks/query/use-get-user-metrics.ts
index 2368a017..2b996d46 100644
--- a/app/(landing)/(home)/_hooks/query/use-get-user-metrics.ts
+++ b/app/(landing)/(home)/_hooks/query/use-get-user-metrics.ts
@@ -1,11 +1,13 @@
 import { useQuery } from '@tanstack/react-query'
 
+import { QUERY_KEY } from '@/shared/constants/query-key'
+
 import { getUserMetrics } from '../../_api/user-metrics'
 import { UserMetricsModel } from '../../types'
 
 const useGetUserMetrics = () => {
   return useQuery<UserMetricsModel>({
-    queryKey: ['userMetrics'],
+    queryKey: [QUERY_KEY.USER_METRICS],
     queryFn: getUserMetrics,
   })
 }
diff --git a/app/(landing)/(home)/_ui/average-metrics-section/average-metrics-chart.tsx b/app/(landing)/(home)/_ui/average-metrics-section/average-metrics-chart.tsx
index bbe0af43..9646d2c8 100644
--- a/app/(landing)/(home)/_ui/average-metrics-section/average-metrics-chart.tsx
+++ b/app/(landing)/(home)/_ui/average-metrics-section/average-metrics-chart.tsx
@@ -5,6 +5,8 @@ import dynamic from 'next/dynamic'
 import Highcharts from 'highcharts'
 import mouseWheelZoom from 'highcharts/modules/mouse-wheel-zoom'
 
+import { processChartData } from '@/shared/utils/chart'
+
 mouseWheelZoom(Highcharts)
 
 const HighchartsReact = dynamic(() => import('highcharts-react-official'), {
@@ -25,6 +27,12 @@ interface Props {
 }
 
 const AverageMetricsChart = ({ data }: Props) => {
+  const avgReferencePriceData = processChartData(data.data.avgReferencePrice)
+  const highestSmScoreReferencePriceData = processChartData(data.data.highestSmScoreReferencePrice)
+  const highestSubscribeScoreReferencePriceData = processChartData(
+    data.data.highestSubscribeScoreReferencePrice
+  )
+
   const chartOptions: Highcharts.Options = {
     chart: {
       type: 'areaspline',
@@ -152,7 +160,7 @@ const AverageMetricsChart = ({ data }: Props) => {
       {
         type: 'areaspline',
         name: '평균',
-        data: data.data.avgReferencePrice,
+        data: avgReferencePriceData,
         color: '#FF4F1F',
         yAxis: 0,
         stickyTracking: false,
@@ -161,7 +169,7 @@ const AverageMetricsChart = ({ data }: Props) => {
       {
         type: 'spline',
         name: 'SM SCORE 1위',
-        data: data.data.highestSmScoreReferencePrice,
+        data: highestSmScoreReferencePriceData,
         color: '#6877FF',
         yAxis: 1,
         stickyTracking: false,
@@ -170,7 +178,7 @@ const AverageMetricsChart = ({ data }: Props) => {
       {
         type: 'spline',
         name: '구독 1위',
-        data: data.data.highestSubscribeScoreReferencePrice,
+        data: highestSubscribeScoreReferencePriceData,
         color: '#FFE070',
         yAxis: 1,
         stickyTracking: false,
diff --git a/app/(landing)/(home)/_ui/average-metrics-section/index.tsx b/app/(landing)/(home)/_ui/average-metrics-section/index.tsx
index 5d2156d0..75bab73e 100644
--- a/app/(landing)/(home)/_ui/average-metrics-section/index.tsx
+++ b/app/(landing)/(home)/_ui/average-metrics-section/index.tsx
@@ -4,41 +4,48 @@ import dynamic from 'next/dynamic'
 
 import classNames from 'classnames/bind'
 
+import Spinner from '@/shared/ui/spinner'
+
 import useGetStrategiesMetrics from '../../_hooks/query/use-get-strategies-metrics'
 import HomeSubtitle from '../home-subtitle'
 import styles from './styles.module.scss'
 
 const AverageMetricsChart = dynamic(() => import('./average-metrics-chart'), {
   ssr: false,
-  loading: () => <div>Loading...</div>,
 })
 
 const cx = classNames.bind(styles)
 
 const AverageMetricsSection = () => {
-  const { data: chartData } = useGetStrategiesMetrics()
+  const { data: chartData, isLoading } = useGetStrategiesMetrics()
 
-  if (!chartData) {
+  if (!chartData && !isLoading) {
     return <p>차트 조회에 실패했습니다.</p>
   }
 
-  const startDate = chartData.dates[0]
-  const endDate = chartData.dates.at(-1)
+  const startDate = chartData?.dates[0]
+  const endDate = chartData?.dates.at(-1)
 
   return (
     <section>
       <HomeSubtitle>대표 전략 통합 평균 지표</HomeSubtitle>
 
       <div className={cx('container')}>
-        <div className={cx('contents-wrapper')}>
-          <div className={cx('date-wrapper')}>
-            FROM <span className={cx('date')}>{startDate}</span>TO
-            <span className={cx('date')}>{endDate}</span>
-          </div>
-          <div className={cx('chart-wrapper')}>
-            <AverageMetricsChart data={chartData} />
-          </div>
-        </div>
+        {isLoading && !chartData ? (
+          <Spinner />
+        ) : (
+          chartData && (
+            <div className={cx('contents-wrapper')}>
+              <div className={cx('date-wrapper')}>
+                FROM <span className={cx('date')}>{startDate}</span>TO
+                <span className={cx('date')}>{endDate}</span>
+              </div>
+              <div className={cx('chart-wrapper')}>
+                <AverageMetricsChart data={chartData} />
+              </div>
+            </div>
+          )
+        )}
       </div>
     </section>
   )
diff --git a/app/(landing)/(home)/_ui/top-favorite-section/index.tsx b/app/(landing)/(home)/_ui/top-favorite-section/index.tsx
index 51d3321d..446b214d 100644
--- a/app/(landing)/(home)/_ui/top-favorite-section/index.tsx
+++ b/app/(landing)/(home)/_ui/top-favorite-section/index.tsx
@@ -4,6 +4,7 @@ import classNames from 'classnames/bind'
 
 import { PATH } from '@/shared/constants/path'
 import { LinkButton } from '@/shared/ui/link-button'
+import Spinner from '@/shared/ui/spinner'
 
 import useGetTopRanking from '../../_hooks/query/use-get-top-ranking'
 import HomeSubtitle from '../home-subtitle'
@@ -13,7 +14,7 @@ import styles from './styles.module.scss'
 const cx = classNames.bind(styles)
 
 const TopFavoriteSection = () => {
-  const { data: favoriteStrategies } = useGetTopRanking()
+  const { data: favoriteStrategies, isLoading } = useGetTopRanking()
 
   return (
     <section className={cx('section-container')}>
@@ -22,27 +23,34 @@ const TopFavoriteSection = () => {
         인기 있는 전략을 확인해보세요!
       </HomeSubtitle>
 
-      <ul className={cx('strategy-wrapper')}>
-        {favoriteStrategies &&
-          favoriteStrategies.map((strategy, idx) => (
-            <li key={strategy.strategyId}>
-              <TopFavoriteCard
-                ranking={idx + 1}
-                nickname={strategy.nickname}
-                title={strategy.strategyName}
-                chartData={strategy.profitRateChartData}
-                percentageChange={strategy.cumulativeProfitRate}
-                subscriptionCount={strategy.subscriptionCount}
-                averageRating={strategy.averageRating}
-                reviewCount={strategy.totalReviews}
-              />
-            </li>
-          ))}
-      </ul>
-
-      <LinkButton href={PATH.STRATEGIES} variant="filled">
-        전략랭킹 더보기
-      </LinkButton>
+      {isLoading && !favoriteStrategies ? (
+        <Spinner />
+      ) : (
+        <>
+          <ul className={cx('strategy-wrapper')}>
+            {favoriteStrategies &&
+              favoriteStrategies.map((strategy, idx) => (
+                <li key={strategy.strategyId}>
+                  <TopFavoriteCard
+                    id={strategy.strategyId}
+                    ranking={idx + 1}
+                    nickname={strategy.nickname}
+                    title={strategy.strategyName}
+                    chartData={strategy.profitRateChartData}
+                    percentageChange={strategy.cumulativeProfitRate}
+                    subscriptionCount={strategy.subscriptionCount}
+                    averageRating={strategy.averageRating}
+                    reviewCount={strategy.totalReviews}
+                  />
+                </li>
+              ))}
+          </ul>
+
+          <LinkButton href={PATH.STRATEGIES} variant="filled">
+            전략랭킹 더보기
+          </LinkButton>
+        </>
+      )}
     </section>
   )
 }
diff --git a/app/(landing)/(home)/_ui/top-sm-score-section/index.tsx b/app/(landing)/(home)/_ui/top-sm-score-section/index.tsx
index 52b699df..a8aab7fd 100644
--- a/app/(landing)/(home)/_ui/top-sm-score-section/index.tsx
+++ b/app/(landing)/(home)/_ui/top-sm-score-section/index.tsx
@@ -2,6 +2,8 @@
 
 import classNames from 'classnames/bind'
 
+import Spinner from '@/shared/ui/spinner'
+
 import useGetTopRankingSmScore from '../../_hooks/query/use-get-top-ranking-smscore'
 import HomeSubtitle from '../home-subtitle'
 import TopSmScoreCard from '../top-strategy-card/top-sm-score-card'
@@ -10,28 +12,34 @@ import styles from './styles.module.scss'
 const cx = classNames.bind(styles)
 
 const TopSmScoreSection = () => {
-  const { data: topSmScoreStrategies } = useGetTopRankingSmScore()
+  const { data: topSmScoreStrategies, isLoading } = useGetTopRankingSmScore()
 
   return (
     <section className={cx('section-container')}>
       <HomeSubtitle>높은 SM 스코어별로 전략을 확인해보세요!</HomeSubtitle>
 
-      <ul className={cx('strategy-wrapper')}>
-        {topSmScoreStrategies &&
-          topSmScoreStrategies.map((strategy, idx) => (
-            <li key={strategy.strategyId}>
-              <TopSmScoreCard
-                size={idx > 0 ? 'small' : 'large'}
-                ranking={idx + 1}
-                nickname={strategy.nickname}
-                title={strategy.strategyName}
-                chartData={strategy.profitRateChartData}
-                percentageChange={strategy.cumulativeProfitRate}
-                score={strategy.smScore}
-              />
-            </li>
-          ))}
-      </ul>
+      {isLoading && !topSmScoreStrategies ? (
+        <Spinner className={cx('spinner')} />
+      ) : (
+        topSmScoreStrategies && (
+          <ul className={cx('strategy-wrapper')}>
+            {topSmScoreStrategies.map((strategy, idx) => (
+              <li key={strategy.strategyId}>
+                <TopSmScoreCard
+                  id={strategy.strategyId}
+                  size={idx > 0 ? 'small' : 'large'}
+                  ranking={idx + 1}
+                  nickname={strategy.nickname}
+                  title={strategy.strategyName}
+                  chartData={strategy.profitRateChartData}
+                  percentageChange={strategy.cumulativeProfitRate}
+                  score={strategy.smScore}
+                />
+              </li>
+            ))}
+          </ul>
+        )
+      )}
     </section>
   )
 }
diff --git a/app/(landing)/(home)/_ui/top-strategy-card/index.tsx b/app/(landing)/(home)/_ui/top-strategy-card/index.tsx
index 73907c20..6ceec46b 100644
--- a/app/(landing)/(home)/_ui/top-strategy-card/index.tsx
+++ b/app/(landing)/(home)/_ui/top-strategy-card/index.tsx
@@ -1,7 +1,10 @@
-import { StarIcon } from '@/public/icons'
+import Link from 'next/link'
+
 import classNames from 'classnames/bind'
 
+import { PATH } from '@/shared/constants/path'
 import Avatar from '@/shared/ui/avatar'
+import TotalStar from '@/shared/ui/total-star'
 
 import LineChart from '../line-chart'
 import styles from './styles.module.scss'
@@ -15,12 +18,17 @@ import {
 const cx = classNames.bind(styles)
 
 interface Props {
+  id: number
   size?: CardSizeType
   children: React.ReactNode
 }
 
-const TopStrategyCard = ({ size, children }: Props) => {
-  return <div className={cx('card-container', size)}>{children}</div>
+const TopStrategyCard = ({ id, size, children }: Props) => {
+  return (
+    <Link className={cx('card-container', size)} href={`${PATH.STRATEGIES}/${id}`}>
+      {children}
+    </Link>
+  )
 }
 
 const ContentsWrapper = ({ children }: { children: React.ReactNode }) => {
@@ -48,12 +56,7 @@ const ContentDetails = ({
   return (
     <div className={cx('content-details-wrapper')}>
       <span className={cx('subscription')}>{subscriptionCount.toLocaleString()}명 구독</span>
-      <div className={cx('rating-wrapper')}>
-        <StarIcon width="24px" height="24px" />
-        <span>
-          {averageRating} ({reviewCount})
-        </span>
-      </div>
+      <TotalStar averageRating={averageRating} totalElements={reviewCount} />
     </div>
   )
 }
@@ -62,7 +65,7 @@ const SmScore = ({ score }: { score: number }) => {
   return (
     <div className={cx('score-wrapper')}>
       <span className={cx('label')}>SM SCORE</span>
-      <span className={cx('score')}>{score}</span>
+      <span className={cx('score')}>{score.toFixed(1)}</span>
     </div>
   )
 }
diff --git a/app/(landing)/(home)/_ui/top-strategy-card/styles.module.scss b/app/(landing)/(home)/_ui/top-strategy-card/styles.module.scss
index d1d9f731..be235eac 100644
--- a/app/(landing)/(home)/_ui/top-strategy-card/styles.module.scss
+++ b/app/(landing)/(home)/_ui/top-strategy-card/styles.module.scss
@@ -84,20 +84,6 @@
     margin-top: 2px;
     color: $color-gray-800;
   }
-
-  .rating-wrapper {
-    display: flex;
-    align-items: center;
-
-    svg {
-      color: $color-yellow;
-    }
-
-    span {
-      margin-top: 2px;
-      color: $color-gray-400;
-    }
-  }
 }
 
 .profit-wrapper {
diff --git a/app/(landing)/(home)/_ui/top-strategy-card/top-favorite-card.tsx b/app/(landing)/(home)/_ui/top-strategy-card/top-favorite-card.tsx
index c938c278..e607f405 100644
--- a/app/(landing)/(home)/_ui/top-strategy-card/top-favorite-card.tsx
+++ b/app/(landing)/(home)/_ui/top-strategy-card/top-favorite-card.tsx
@@ -10,6 +10,7 @@ interface Props extends TopStrategyCardCommonProps {
 }
 
 const TopFavoriteCard = ({
+  id,
   ranking,
   nickname,
   title,
@@ -20,7 +21,7 @@ const TopFavoriteCard = ({
   reviewCount,
 }: Props) => {
   return (
-    <TopStrategyCard>
+    <TopStrategyCard id={id}>
       <TopStrategyCard.ContentsWrapper>
         <TopStrategyCard.Content ranking={ranking} nickname={nickname} title={title} />
         <TopStrategyCard.ContentDetails
diff --git a/app/(landing)/(home)/_ui/top-strategy-card/top-sm-score-card.tsx b/app/(landing)/(home)/_ui/top-strategy-card/top-sm-score-card.tsx
index 2285522a..6f8355fa 100644
--- a/app/(landing)/(home)/_ui/top-strategy-card/top-sm-score-card.tsx
+++ b/app/(landing)/(home)/_ui/top-strategy-card/top-sm-score-card.tsx
@@ -11,6 +11,7 @@ interface Props extends TopStrategyCardCommonProps {
 }
 
 const TopSmScoreCard = ({
+  id,
   size = 'small',
   ranking,
   nickname,
@@ -20,7 +21,7 @@ const TopSmScoreCard = ({
   score,
 }: Props) => {
   return (
-    <TopStrategyCard size={size}>
+    <TopStrategyCard size={size} id={id}>
       <TopStrategyCard.ContentsWrapper>
         <TopStrategyCard.Content ranking={ranking} nickname={nickname} title={title} />
         <TopStrategyCard.SmScore score={score} />
diff --git a/app/(landing)/(home)/_ui/top-strategy-card/types.ts b/app/(landing)/(home)/_ui/top-strategy-card/types.ts
index 2e2ece81..24384af6 100644
--- a/app/(landing)/(home)/_ui/top-strategy-card/types.ts
+++ b/app/(landing)/(home)/_ui/top-strategy-card/types.ts
@@ -22,6 +22,7 @@ export interface TopCardContentDetailsProps {
 }
 
 export interface TopStrategyCardCommonProps {
+  id: number
   ranking: number
   nickname: string
   title: string
diff --git a/app/(landing)/(home)/_ui/user-metrics-section/index.tsx b/app/(landing)/(home)/_ui/user-metrics-section/index.tsx
index aed9187d..039cd8b0 100644
--- a/app/(landing)/(home)/_ui/user-metrics-section/index.tsx
+++ b/app/(landing)/(home)/_ui/user-metrics-section/index.tsx
@@ -14,11 +14,7 @@ const cx = classNames.bind(styles)
 const UserMetricsSection = () => {
   const { data: metrics, isLoading } = useGetUserMetrics()
 
-  if (isLoading) {
-    return <Spinner className={cx('spinner')} />
-  }
-
-  if (!metrics) {
+  if (!metrics && !isLoading) {
     return null
   }
 
@@ -27,10 +23,18 @@ const UserMetricsSection = () => {
       <HomeSubtitle>이미 이렇게 많은 사람들이 주식 전략을 공유하고, 구독하고 있어요!</HomeSubtitle>
 
       <div className={cx('card-wrapper')}>
-        <MetricCard count={metrics.totalTrader} label="명의 트레이더가" />
-        <MetricCard count={metrics.totalStrategies} label="개의 투자 전략을 올렸어요!" />
-        <MetricCard count={metrics.totalInvestor} label="명의 투자자가" />
-        <MetricCard count={metrics.totalSubscribe} label="개의 전략을 구독 중이에요!" />
+        {isLoading ? (
+          <Spinner className={cx('spinner')} />
+        ) : (
+          metrics && (
+            <>
+              <MetricCard count={metrics.totalTrader} label="명의 트레이더가" />
+              <MetricCard count={metrics.totalStrategies} label="개의 투자 전략을 올렸어요!" />
+              <MetricCard count={metrics.totalInvestor} label="명의 투자자가" />
+              <MetricCard count={metrics.totalSubscribe} label="개의 전략을 구독 중이에요!" />
+            </>
+          )
+        )}
       </div>
     </section>
   )
diff --git a/app/(landing)/(home)/_ui/user-metrics-section/styles.module.scss b/app/(landing)/(home)/_ui/user-metrics-section/styles.module.scss
index e7316e0d..87951411 100644
--- a/app/(landing)/(home)/_ui/user-metrics-section/styles.module.scss
+++ b/app/(landing)/(home)/_ui/user-metrics-section/styles.module.scss
@@ -19,5 +19,5 @@
 }
 
 .spinner {
-  margin: 200px 0;
+  margin: 40px 0;
 }
diff --git a/app/(landing)/notices/_api/get-notice-detail.ts b/app/(landing)/notices/_api/get-notice-detail.ts
index e4b677b4..29d9991d 100644
--- a/app/(landing)/notices/_api/get-notice-detail.ts
+++ b/app/(landing)/notices/_api/get-notice-detail.ts
@@ -1,30 +1,27 @@
 import axiosInstance from '@/shared/api/axios'
+import { APIResponseBaseModel } from '@/shared/types/response'
 
-interface NoticeResponseModel {
-  isSuccess: true
-  message: '공지사항 상세 조회'
+export interface NoticeDetailResponseModel extends APIResponseBaseModel<boolean> {
   result: {
-    title: '제목'
-    content: '내용'
-    createdAt: '2024-12-06 11:24:59'
+    title: string
+    content: string
+    createdAt: string
     files: [
       {
-        fileName: '2.jpg'
-        noticeFileId: 3
+        fileName: string
+        noticeFileId: number
       },
     ]
   }
 }
 
-export const getNoticeDetail = async (noticeId: number): Promise<NoticeResponseModel['result']> => {
+export const getNoticeDetail = async (noticeId: number) => {
   try {
-    const response = await axiosInstance.get<NoticeResponseModel>(`/api/notice/${noticeId}`)
+    const response = await axiosInstance.get<NoticeDetailResponseModel>(`/api/notices/${noticeId}`)
 
-    if (response.data.isSuccess) {
-      return response.data.result
-    } else {
-      throw new Error(response.data.message || '요청 실패')
-    }
+    if (!response.data.isSuccess) throw new Error(response.data.message || '요청 실패')
+
+    return response.data.result
   } catch (err) {
     console.error(err)
     throw new Error('공지사항 조회 실패.')
diff --git a/app/(landing)/notices/_api/get-notice-file.ts b/app/(landing)/notices/_api/get-notice-file.ts
new file mode 100644
index 00000000..b44b574b
--- /dev/null
+++ b/app/(landing)/notices/_api/get-notice-file.ts
@@ -0,0 +1,35 @@
+'use client'
+
+import axios from 'axios'
+
+export const downloadNoticeFile = async (noticeId: number, noticeFileId: number) => {
+  const response = await axios.get(`/api/notice/${noticeId}/files/${noticeFileId}`, {
+    responseType: 'blob',
+  })
+  return response.data
+}
+
+export const handleNoticeFileDownload = async (
+  fileName: string,
+  noticeId: number,
+  noticeFileId: number
+) => {
+  try {
+    const blobData = await downloadNoticeFile(noticeId, noticeFileId)
+
+    const blob = new Blob([blobData])
+    const url = window.URL.createObjectURL(blob)
+
+    const link = document.createElement('a')
+    link.href = url
+    link.download = fileName
+    document.body.appendChild(link)
+    link.click()
+
+    link.remove()
+    window.URL.revokeObjectURL(url)
+  } catch (err) {
+    console.error('파일 다운로드 중 오류 발생:', err)
+    throw new Error('파일 다운로드에 실패했습니다.')
+  }
+}
diff --git a/app/(landing)/notices/_api/get-notice.ts b/app/(landing)/notices/_api/get-notice.ts
index f8b3ce99..69cc0dbd 100644
--- a/app/(landing)/notices/_api/get-notice.ts
+++ b/app/(landing)/notices/_api/get-notice.ts
@@ -1,4 +1,5 @@
 import axiosInstance from '@/shared/api/axios'
+import { APIResponseBaseModel } from '@/shared/types/response'
 
 export interface NoticeUserModel {
   userId: number
@@ -13,9 +14,7 @@ export interface NoticeModel {
   createdAt: string
 }
 
-interface NoticesResponseModel {
-  isSuccess: boolean
-  message: string
+interface NoticesResponseModel extends APIResponseBaseModel<boolean> {
   result: {
     content: NoticeModel[]
     page: number
@@ -32,13 +31,14 @@ interface Props {
   size?: number
 }
 
-const getNotices = async ({ page = 1, size = 9 }: Props = {}): Promise<
-  NoticesResponseModel['result']
-> => {
+const getNotices = async ({ page = 1, size = 9 }: Props = {}) => {
   try {
-    const response = await axiosInstance.get<NoticesResponseModel>(
-      `/api/notices?page=${page}&size=${size}`
-    )
+    const response = await axiosInstance<NoticesResponseModel>(`/api/notices`, {
+      params: {
+        page,
+        size,
+      },
+    })
     return response.data.result
   } catch (err) {
     console.error(err)
diff --git a/app/(landing)/notices/_hooks/use-notice-detail.ts b/app/(landing)/notices/_hooks/use-notice-detail.ts
index d64535eb..c5711c09 100644
--- a/app/(landing)/notices/_hooks/use-notice-detail.ts
+++ b/app/(landing)/notices/_hooks/use-notice-detail.ts
@@ -1,10 +1,12 @@
 import { useQuery } from '@tanstack/react-query'
 
+import { QUERY_KEY } from '@/shared/constants/query-key'
+
 import { getNoticeDetail } from '../_api/get-notice-detail'
 
 const useNoticeDetail = (noticeId: number) => {
   return useQuery({
-    queryKey: ['noticeDetail', noticeId],
+    queryKey: [QUERY_KEY.NOTICE_DETAIL, noticeId],
     queryFn: () => getNoticeDetail(noticeId),
   })
 }
diff --git a/app/(landing)/notices/_hooks/use-notice.ts b/app/(landing)/notices/_hooks/use-notice.ts
index 5c01c37e..49d44e0a 100644
--- a/app/(landing)/notices/_hooks/use-notice.ts
+++ b/app/(landing)/notices/_hooks/use-notice.ts
@@ -1,5 +1,7 @@
 import { useQuery } from '@tanstack/react-query'
 
+import { QUERY_KEY } from '@/shared/constants/query-key'
+
 import getNotices from '../_api/get-notice'
 
 interface Props {
@@ -9,7 +11,7 @@ interface Props {
 
 const useGetNotices = ({ page, size }: Props = {}) => {
   return useQuery({
-    queryKey: ['notices', page, size],
+    queryKey: [QUERY_KEY.NOTICES, page, size],
     queryFn: () => getNotices({ page, size }),
   })
 }
diff --git a/app/(landing)/notices/_ui/notice-detail/index.tsx b/app/(landing)/notices/_ui/notice-detail/index.tsx
index 7c2949a1..66475421 100644
--- a/app/(landing)/notices/_ui/notice-detail/index.tsx
+++ b/app/(landing)/notices/_ui/notice-detail/index.tsx
@@ -3,36 +3,17 @@
 import { DownloadIcon } from '@/public/icons'
 import classNames from 'classnames/bind'
 
-import axios from '@/shared/api/axios'
-
+import { handleNoticeFileDownload } from '../../_api/get-notice-file'
 import useNoticeDetail from '../../_hooks/use-notice-detail'
 import styles from './styles.module.scss'
 
 const cx = classNames.bind(styles)
 
 const NoticeDetail = ({ noticeId }: { noticeId: number }) => {
-  const { data: notice, isLoading } = useNoticeDetail(noticeId)
-
-  const handleSave = async (fileName: string, noticeFileId: number) => {
-    try {
-      const response = await axios.get(`/api/files/download/${noticeFileId}`, {
-        responseType: 'blob',
-      })
-
-      const blob = new Blob([response.data])
-      const url = window.URL.createObjectURL(blob)
+  const { data: notice } = useNoticeDetail(noticeId)
 
-      const link = document.createElement('a')
-      link.href = url
-      link.download = fileName
-      document.body.appendChild(link)
-      link.click()
-
-      link.remove()
-      window.URL.revokeObjectURL(url)
-    } catch (error) {
-      console.error('파일 다운로드 중 오류 발생:', error)
-    }
+  const handleSave = (fileName: string, noticeFileId: number) => {
+    handleNoticeFileDownload(fileName, noticeId, noticeFileId)
   }
 
   return (
@@ -42,7 +23,9 @@ const NoticeDetail = ({ noticeId }: { noticeId: number }) => {
         <div className={cx('date')}>{notice?.createdAt}</div>
       </div>
       <div className={cx('top-line')}></div>
-      <div className={cx('content')}>{notice?.content}</div>
+      <div className={cx('content')}>
+        <pre>{notice?.content}</pre>
+      </div>
       <div className={cx('bottom-line')}></div>
 
       <div className={cx('attach-file')}>
@@ -58,7 +41,10 @@ const NoticeDetail = ({ noticeId }: { noticeId: number }) => {
               >
                 {file.fileName}
               </div>
-              <DownloadIcon className={cx('file-download')} onClick={() => handleSave} />
+              <DownloadIcon
+                className={cx('file-download')}
+                onClick={() => handleSave(file.fileName, file.noticeFileId)}
+              />
             </div>
           ))}
         </div>
diff --git a/app/(landing)/notices/_ui/notice-detail/styles.module.scss b/app/(landing)/notices/_ui/notice-detail/styles.module.scss
index 1e1a741a..c99e3f65 100644
--- a/app/(landing)/notices/_ui/notice-detail/styles.module.scss
+++ b/app/(landing)/notices/_ui/notice-detail/styles.module.scss
@@ -1,6 +1,6 @@
 .container {
   width: 100%;
-  height: 813px;
+  margin: 40px 0;
   padding: 52px 28px;
   background-color: $color-white;
 }
@@ -32,6 +32,11 @@
   padding: 0px 24px;
   @include typo-b2;
   line-height: 2;
+  pre {
+    word-wrap: break-word;
+    word-break: break-word;
+    white-space: pre-wrap;
+  }
 }
 
 .bottom-line {
diff --git a/app/(landing)/notices/_ui/notice-table/index.tsx b/app/(landing)/notices/_ui/notice-table/index.tsx
index 2d0d2c2e..2b3de09d 100644
--- a/app/(landing)/notices/_ui/notice-table/index.tsx
+++ b/app/(landing)/notices/_ui/notice-table/index.tsx
@@ -8,6 +8,7 @@ import { PATH } from '@/shared/constants/path'
 import { usePagination } from '@/shared/hooks/custom/use-pagination'
 import Pagination from '@/shared/ui/pagination'
 import VerticalTable from '@/shared/ui/table/vertical'
+import { calculateTableNumber } from '@/shared/utils/table'
 
 import useGetNotices from '../../_hooks/use-notice'
 import styles from './styles.module.scss'
@@ -38,7 +39,7 @@ const NoticeTable = () => {
   }
 
   const notices = data.content.map((values, idx) => ({
-    no: (page - 1) * COUNT_PER_PAGE + (idx + 1),
+    no: calculateTableNumber({ page, idx, countPerPage: COUNT_PER_PAGE }),
     title: <Link href={`${PATH.NOTICES}/${values.noticeId}/detail`}>{values.title}</Link>,
     createdAt: values.createdAt,
   }))
diff --git a/app/(landing)/signin/page.tsx b/app/(landing)/signin/page.tsx
index 8ebabca1..d943b71d 100644
--- a/app/(landing)/signin/page.tsx
+++ b/app/(landing)/signin/page.tsx
@@ -16,7 +16,7 @@ import { useAuthStore } from '@/shared/stores/use-auth-store'
 import type { LoginFormDataModel } from '@/shared/types/auth'
 import { Button } from '@/shared/ui/button'
 import Checkbox from '@/shared/ui/check-box'
-import { Input } from '@/shared/ui/input'
+import Input from '@/shared/ui/input'
 import FindEmailModal from '@/shared/ui/modal/find-email-modal'
 import FindPasswordModal from '@/shared/ui/modal/find-password-modal'
 import { validate } from '@/shared/utils/validation'
@@ -82,7 +82,6 @@ const SignInPage = () => {
       const response = await loginMutation.mutateAsync(formData)
 
       if (!response.data.isSuccess) {
-        setErrors(response.data.message || ERROR_MESSAGES.AUTH.LOGIN_FAILED)
         return
       }
 
@@ -102,10 +101,10 @@ const SignInPage = () => {
       router.replace(PATH.STRATEGIES)
     } catch (err) {
       if (err instanceof AxiosError) {
-        if (err.response) {
-          setErrors(err.response.data.message)
+        if (!err.response?.data.isSuccess) {
+          setErrors(err.response?.data.message)
         } else {
-          setErrors(ERROR_MESSAGES.NETWORK.ERROR)
+          setErrors(ERROR_MESSAGES.AUTH.LOGIN_FAILED)
         }
       } else {
         setErrors(ERROR_MESSAGES.AUTH.LOGIN_FAILED)
diff --git a/app/(landing)/signin/styles.module.scss b/app/(landing)/signin/styles.module.scss
index 7d1b2e4f..04d59511 100644
--- a/app/(landing)/signin/styles.module.scss
+++ b/app/(landing)/signin/styles.module.scss
@@ -2,6 +2,7 @@
   display: flex;
   justify-content: center;
   align-items: center;
+  height: calc(100vh - $header-height);
 }
 
 .loginBox {
diff --git a/app/(landing)/signup/_constants/signup.ts b/app/(landing)/signup/_constants/signup.ts
index c2bcc969..178eac60 100644
--- a/app/(landing)/signup/_constants/signup.ts
+++ b/app/(landing)/signup/_constants/signup.ts
@@ -4,6 +4,8 @@ export const SIGNUP_ERROR_MESSAGES = {
   NICKNAME_LENGTH: '닉네임은 2글자 이상 10글자 이하로 입력해주세요.',
   NICKNAME_CHECK_REQUIRED: '닉네임 중복확인이 필요합니다.',
   NICKNAME_DUPLICATED: '이미 사용 중인 닉네임입니다.',
+  NICKNAME_NOT_ALLOWED:
+    '닉네임은 2~10자 이내로 설정해야 하며, 특수문자는 . _ - 만 사용할 수 있습니다.',
   NICKNAME_CHECK_FAILED: '닉네임 중복 확인에 실패했습니다.',
   NAME_MIN_LENGTH: '이름을 2자 이상 입력해주세요.',
   PASSWORD_REQUIRED: '비밀번호를 입력해주세요.',
diff --git a/app/(landing)/signup/_hooks/custom/use-signup-form.ts b/app/(landing)/signup/_hooks/custom/use-signup-form.ts
index 9e82f61e..1e9faa34 100644
--- a/app/(landing)/signup/_hooks/custom/use-signup-form.ts
+++ b/app/(landing)/signup/_hooks/custom/use-signup-form.ts
@@ -7,7 +7,8 @@ import { PATH } from '@/shared/constants/path'
 
 import { signup } from '../../_api/signup'
 import { SIGNUP_ERROR_MESSAGES } from '../../_constants/signup'
-import { getUserTypeCookie, setNicknameCookie } from '../../_lib/cookies'
+import { setNicknameCookie } from '../../_lib/cookies'
+import useSignupStore from '../../_store/use-signup-store'
 import {
   SignupFormDataModel,
   SignupFormErrorsModel,
@@ -45,6 +46,8 @@ const useSignupForm = () => {
   const [formState, setFormState] = useState<SignupFormStateModel>(initialFormState)
   const [isValidated, setIsValidated] = useState(false)
   const [isModalOpen, setIsModalOpen] = useState(false)
+  const userType = useSignupStore((state) => state.userType)
+  const { setNickname } = useSignupStore((state) => state.actions)
 
   const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
     const { name, value } = e.target
@@ -132,8 +135,6 @@ const useSignupForm = () => {
       return
     }
 
-    const role = getUserTypeCookie()
-
     try {
       const formData: SignupFormDataModel = {
         name: form.name,
@@ -141,7 +142,7 @@ const useSignupForm = () => {
         phone: form.phone,
         password: form.password,
         email: form.email,
-        role: role || 'INVESTOR',
+        role: userType,
         infoAgreement: form.isMarketingAgreed,
         birthYear: form.birthYear,
         birthMonth: form.birthMonth,
@@ -152,6 +153,7 @@ const useSignupForm = () => {
 
       await signup(formData)
       setNicknameCookie(form.nickname)
+      setNickname(form.nickname)
       router.push(PATH.SIGN_UP_COMPLETE)
     } catch (err) {
       console.error('회원가입 실패:', err)
diff --git a/app/(landing)/signup/_lib/cookies.ts b/app/(landing)/signup/_lib/cookies.ts
index 0f985ceb..4a6999a2 100644
--- a/app/(landing)/signup/_lib/cookies.ts
+++ b/app/(landing)/signup/_lib/cookies.ts
@@ -6,10 +6,10 @@ import { SIGN_UP_COOKIE, SignUpCookieValueType } from '../_constants/cookies'
 
 const COOKIE_EXPIRATION_MINUTES = 30
 
-const isBrowser = typeof window !== 'undefined'
+const isBrowser = () => typeof window !== 'undefined'
 
 const setSignupCookie = (key: SignUpCookieValueType, value: string) => {
-  if (!isBrowser) return
+  if (!isBrowser()) return
 
   const expirationDate = new Date()
   expirationDate.setMinutes(expirationDate.getMinutes() + COOKIE_EXPIRATION_MINUTES)
@@ -18,7 +18,8 @@ const setSignupCookie = (key: SignUpCookieValueType, value: string) => {
 }
 
 const getSignupCookie = (key: SignUpCookieValueType) => {
-  if (!isBrowser) return
+  if (!isBrowser()) return
+
   const value = `; ${document.cookie}`
   const parts = value.split(`; ${key}=`)
 
@@ -26,7 +27,7 @@ const getSignupCookie = (key: SignUpCookieValueType) => {
 }
 
 export const removeAllSignupCookies = () => {
-  if (!isBrowser) return false
+  if (!isBrowser()) return
 
   try {
     const signupCookies = Object.values(SIGN_UP_COOKIE)
diff --git a/app/(landing)/signup/_store/use-signup-store.ts b/app/(landing)/signup/_store/use-signup-store.ts
new file mode 100644
index 00000000..4b3b8b28
--- /dev/null
+++ b/app/(landing)/signup/_store/use-signup-store.ts
@@ -0,0 +1,32 @@
+import { create } from 'zustand'
+
+import { UserType } from '@/shared/types/auth'
+
+interface StateModel {
+  userType: UserType
+  nickname: string
+}
+
+interface ActionModel {
+  setUserType: (userType: UserType) => void
+  setNickname: (nickname: string) => void
+}
+
+interface ActionsModel {
+  actions: ActionModel
+}
+
+const initialState = {
+  userType: 'INVESTOR',
+  nickname: '',
+} as const
+
+const useSignupStore = create<StateModel & ActionsModel>((set) => ({
+  ...initialState,
+  actions: {
+    setUserType: (userType) => set((state) => ({ ...state, userType })),
+    setNickname: (nickname) => set((state) => ({ ...state, nickname })),
+  },
+}))
+
+export default useSignupStore
diff --git a/app/(landing)/signup/_ui/signup-complete-message/index.tsx b/app/(landing)/signup/_ui/signup-complete-message/index.tsx
index 36e9964f..fe90bf62 100644
--- a/app/(landing)/signup/_ui/signup-complete-message/index.tsx
+++ b/app/(landing)/signup/_ui/signup-complete-message/index.tsx
@@ -15,20 +15,26 @@ const COMPLETE_MESSAGE = {
 }
 
 interface Props {
-  nickname: string
-  userType: UserType
+  nickname?: string
+  userType?: UserType
 }
 
 const SignupCompleteMessage = ({ nickname, userType }: Props) => {
   return (
     <section className={cx('container')}>
-      <p>{nickname}님의 회원가입이 완료되었습니다.</p>
-      <p>
-        지금 바로 인베스트메틱
-        <Logo width={42} />
-        에서 <br />
-        {COMPLETE_MESSAGE[userType]}
-      </p>
+      {nickname && userType ? (
+        <>
+          <p>{nickname}님의 회원가입이 완료되었습니다.</p>
+          <p>
+            지금 바로 인베스트메틱
+            <Logo width={42} />
+            에서 <br />
+            {COMPLETE_MESSAGE[userType]}
+          </p>
+        </>
+      ) : (
+        <p>회원가입이 완료되었습니다.</p>
+      )}
     </section>
   )
 }
diff --git a/app/(landing)/signup/_ui/signup-complete-message/styles.module.scss b/app/(landing)/signup/_ui/signup-complete-message/styles.module.scss
index 0dae4ea0..b258181e 100644
--- a/app/(landing)/signup/_ui/signup-complete-message/styles.module.scss
+++ b/app/(landing)/signup/_ui/signup-complete-message/styles.module.scss
@@ -7,3 +7,7 @@
     margin: 0 4px;
   }
 }
+
+.spinner {
+  margin-top: 200px;
+}
diff --git a/app/(landing)/signup/_ui/user-type-card/index.tsx b/app/(landing)/signup/_ui/user-type-card/index.tsx
index 7e62e318..0992deb5 100644
--- a/app/(landing)/signup/_ui/user-type-card/index.tsx
+++ b/app/(landing)/signup/_ui/user-type-card/index.tsx
@@ -13,6 +13,7 @@ import classNames from 'classnames/bind'
 import { PATH } from '@/shared/constants/path'
 import { UserType } from '@/shared/types/auth'
 
+import useSignupStore from '../../_store/use-signup-store'
 import styles from './styles.module.scss'
 
 const cx = classNames.bind(styles)
@@ -25,6 +26,7 @@ interface Props {
 
 const UserTypeCard = ({ userType, title, highlight }: Props) => {
   const router = useRouter()
+  const { setUserType } = useSignupStore((state) => state.actions)
   const userTypeCookie = getUserTypeCookie()
 
   const handleTypeSelect = () => {
@@ -33,6 +35,7 @@ const UserTypeCard = ({ userType, title, highlight }: Props) => {
     }
 
     setUserTypeCookie(userType)
+    setUserType(userType)
     router.push(PATH.SIGN_UP_TERMS_OF_USE)
   }
 
diff --git a/app/(landing)/signup/complete/page.tsx b/app/(landing)/signup/complete/page.tsx
index a9136c98..0ed0d5fd 100644
--- a/app/(landing)/signup/complete/page.tsx
+++ b/app/(landing)/signup/complete/page.tsx
@@ -1,14 +1,11 @@
 'use client'
 
-import { useEffect, useState } from 'react'
-
 import classNames from 'classnames/bind'
 
 import { PATH } from '@/shared/constants/path'
-import { UserType } from '@/shared/types/auth'
 import { LinkButton } from '@/shared/ui/link-button'
 
-import { getNicknameCookie, getUserTypeCookie } from '../_lib/cookies'
+import useSignupStore from '../_store/use-signup-store'
 import SignupCompleteMessage from '../_ui/signup-complete-message'
 import Step from '../_ui/step'
 import styles from './page.module.scss'
@@ -16,25 +13,13 @@ import styles from './page.module.scss'
 const cx = classNames.bind(styles)
 
 const CompletePage = () => {
-  const [userData, setUserData] = useState<{
-    userType: UserType | undefined
-    nickname: string | undefined
-  }>({ userType: undefined, nickname: undefined })
-
-  useEffect(() => {
-    const userType = getUserTypeCookie()
-    const nickname = getNicknameCookie()
-    setUserData({ userType, nickname })
-  }, [])
-
-  if (!userData.userType || !userData.nickname) {
-    return null
-  }
+  const userType = useSignupStore((state) => state.userType)
+  const nickname = useSignupStore((state) => state.nickname)
 
   return (
     <>
       <Step />
-      <SignupCompleteMessage nickname={userData.nickname} userType={userData.userType} />
+      <SignupCompleteMessage nickname={nickname} userType={userType} />
       <div className={cx('button-wrapper')}>
         <LinkButton href={PATH.SIGN_IN} variant="filled">
           로그인하기
diff --git a/app/(landing)/signup/information/page.tsx b/app/(landing)/signup/information/page.tsx
index fca24b32..39357d6d 100644
--- a/app/(landing)/signup/information/page.tsx
+++ b/app/(landing)/signup/information/page.tsx
@@ -9,7 +9,7 @@ import { PATH } from '@/shared/constants/path'
 import { Button } from '@/shared/ui/button'
 import Checkbox from '@/shared/ui/check-box'
 import { ErrorMessage } from '@/shared/ui/error-message'
-import { Input } from '@/shared/ui/input'
+import Input from '@/shared/ui/input'
 import { LinkButton } from '@/shared/ui/link-button'
 import Modal from '@/shared/ui/modal'
 import Select from '@/shared/ui/select'
@@ -207,7 +207,7 @@ const InformationPage = () => {
               className={cx('input')}
               errorMessage={errors.password}
             />
-            <small>* 비밀번호는 문자, 숫자 포함 6~20자로 구성되어야 합니다.</small>
+            <small>* 비밀번호는 영문과 숫자 포함 6~20자로 구성되어야 합니다.</small>
           </div>
         </div>
 
diff --git a/app/admin/_ui/file-input/index.tsx b/app/admin/_ui/file-input/index.tsx
index 78d8f630..868b6516 100644
--- a/app/admin/_ui/file-input/index.tsx
+++ b/app/admin/_ui/file-input/index.tsx
@@ -14,15 +14,31 @@ const cx = classNames.bind(styles)
 interface Props extends ComponentPropsWithoutRef<'input'> {
   accept?: string
   preview?: string
+  multiple?: boolean
+  className?: string
 }
 
-const FileInput = ({ preview, accept = '*', value, onChange, ...props }: Props) => {
+const FileInput = ({
+  preview,
+  accept = '*',
+  onChange,
+  multiple = false,
+  className,
+  ...props
+}: Props) => {
   return (
-    <div className={cx('container')}>
+    <div className={cx('container', className)}>
       {preview && (
         <Image width={24} height={24} src={preview} alt="Preview" className={cx('preview')} />
       )}
-      <input type="file" accept={accept} onChange={onChange} className={cx('input')} {...props} />
+      <input
+        type="file"
+        accept={accept}
+        multiple={multiple}
+        onChange={onChange}
+        className={cx('input')}
+        {...props}
+      />
       <FileIcon className={cx('icon')} />
     </div>
   )
diff --git a/app/admin/category/_ui/shared/_api/upload-file-with-presigned-url.ts b/app/admin/category/_ui/shared/_api/upload-file-with-presigned-url.ts
deleted file mode 100644
index eb561b65..00000000
--- a/app/admin/category/_ui/shared/_api/upload-file-with-presigned-url.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import axiosInstance from '@/shared/api/axios'
-
-const uploadFileWithPresignedUrl = async (presignedUrl: string, file: File) => {
-  await axiosInstance.put(presignedUrl, file, {
-    headers: {
-      'Content-Type': file.type,
-    },
-  })
-}
-
-export default uploadFileWithPresignedUrl
diff --git a/app/admin/category/_ui/shared/_hooks/use-category-icon-post.ts b/app/admin/category/_ui/shared/_hooks/use-category-icon-post.ts
index 53f457ba..1b38f932 100644
--- a/app/admin/category/_ui/shared/_hooks/use-category-icon-post.ts
+++ b/app/admin/category/_ui/shared/_hooks/use-category-icon-post.ts
@@ -1,7 +1,8 @@
 import { ChangeEvent, useState } from 'react'
 
+import uploadFileWithPresignedUrl from '@/shared/api/upload-file-with-presigned-url'
+
 import getPresignedUrl from '../_api/get-presigned-url'
-import uploadFileWithPresignedUrl from '../_api/upload-file-with-presigned-url'
 
 export type DomainType = 'trade' | 'stock'
 
@@ -27,7 +28,6 @@ const useCategoryIconPost = (domain: DomainType) => {
 
       setImage(iconImage)
 
-      // preview
       const reader = new FileReader()
       reader.onload = (e) => {
         setImagePreview(e.target?.result as string)
diff --git a/app/admin/category/_ui/shared/manage-table/index.tsx b/app/admin/category/_ui/shared/manage-table/index.tsx
index ca6bb0ca..abf63120 100644
--- a/app/admin/category/_ui/shared/manage-table/index.tsx
+++ b/app/admin/category/_ui/shared/manage-table/index.tsx
@@ -7,7 +7,6 @@ import VerticalTable from '@/shared/ui/table/vertical'
 
 import { COUNT_PER_PAGE } from './constant'
 import styles from './styles.module.scss'
-import addIndexToData from './utils/add-index-to-data'
 
 const cx = classNames.bind(styles)
 
@@ -15,7 +14,6 @@ interface Props {
   active?: boolean
   domain: '종목' | '매매 유형'
   data: (ReactNode | string | number)[][]
-  //TODO: domain이 종록일 때만 쓰는 속성들 컨트롤 하는 법 고민해보기
   size?: number
   currentPage?: number
   setCurrentPage?: Dispatch<SetStateAction<number>>
@@ -38,9 +36,9 @@ const ManageTable = ({
       <span className={cx('title')}>{active ? '활성화' : '비활성화'}</span>
       <VerticalTable
         tableHead={['No.', domain === '종목' ? '종목명' : '매매 유형', '분류', '상태']}
-        tableBody={addIndexToData(data)}
+        tableBody={data}
         countPerPage={size}
-        currentPage={1} // 공통 컴포넌트와의 호환성 문제...
+        currentPage={1}
       />
       {hasData && domain === '종목' && (
         <Pagination
diff --git a/app/admin/category/_ui/shared/manage-table/styles.module.scss b/app/admin/category/_ui/shared/manage-table/styles.module.scss
index e94f4a1d..3717480c 100644
--- a/app/admin/category/_ui/shared/manage-table/styles.module.scss
+++ b/app/admin/category/_ui/shared/manage-table/styles.module.scss
@@ -1,6 +1,5 @@
 .container {
-  width: 625px;
-  padding: 21px 20px 52px;
+  padding: 21px 10px 52px;
   background-color: $color-white;
 }
 
diff --git a/app/admin/category/_ui/shared/manage-table/utils/add-index-to-data.tsx b/app/admin/category/_ui/shared/manage-table/utils/add-index-to-data.tsx
deleted file mode 100644
index 5f59cf36..00000000
--- a/app/admin/category/_ui/shared/manage-table/utils/add-index-to-data.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import { ReactNode } from 'react'
-
-const addIndexAndButton = (data: (string | number | ReactNode)[][]) => {
-  return data?.map((d, idx) => [idx + 1, ...d])
-}
-
-export default addIndexAndButton
diff --git a/app/admin/category/_ui/stock/stock-manage/_api/delete-inactive-stock.ts b/app/admin/category/_ui/stock/stock-manage/_api/delete-inactive-stock.ts
new file mode 100644
index 00000000..dcf0f73f
--- /dev/null
+++ b/app/admin/category/_ui/stock/stock-manage/_api/delete-inactive-stock.ts
@@ -0,0 +1,15 @@
+import axiosInstance from '@/shared/api/axios'
+
+import { DeleteInactiveStockResponseModel } from '../types'
+
+const deleteInactiveStock = async (stockTypeId: number) => {
+  const res = await axiosInstance.delete<DeleteInactiveStockResponseModel>(
+    `/api/admin/strategies/stock-type/${stockTypeId}`
+  )
+
+  if (!res.data.isSuccess) throw new Error(res.data.message)
+
+  return res.data
+}
+
+export default deleteInactiveStock
diff --git a/app/admin/category/_ui/stock/stock-manage/_api/get-stocks.ts b/app/admin/category/_ui/stock/stock-manage/_api/get-stocks.ts
index aed70b79..f0d7530b 100644
--- a/app/admin/category/_ui/stock/stock-manage/_api/get-stocks.ts
+++ b/app/admin/category/_ui/stock/stock-manage/_api/get-stocks.ts
@@ -3,22 +3,17 @@ import axiosInstance from '@/shared/api/axios'
 import { StockResponseModel } from '../types'
 
 const getStocks = async (activateState: boolean, page: number = 1, size: number = 10) => {
-  try {
-    const res = await axiosInstance<StockResponseModel>('/api/admin/strategies/stock-type', {
-      params: {
-        activateState,
-        page,
-        size,
-      },
-    })
+  const res = await axiosInstance.get<StockResponseModel>('/api/admin/strategies/stock-type', {
+    params: {
+      activateState,
+      page,
+      size,
+    },
+  })
 
-    if (!res.data.isSuccess) throw new Error(res.data.message)
+  if (!res.data.isSuccess) throw new Error(res.data.message)
 
-    return res.data.result
-  } catch (err) {
-    console.log('Error : ' + err)
-    throw err
-  }
+  return res.data.result
 }
 
 export default getStocks
diff --git a/app/admin/category/_ui/stock/stock-manage/_api/set-admin-stock-manage-table-data.tsx b/app/admin/category/_ui/stock/stock-manage/_api/set-admin-stock-manage-table-data.tsx
index c4ceb326..0df56445 100644
--- a/app/admin/category/_ui/stock/stock-manage/_api/set-admin-stock-manage-table-data.tsx
+++ b/app/admin/category/_ui/stock/stock-manage/_api/set-admin-stock-manage-table-data.tsx
@@ -1,10 +1,22 @@
 import Image from 'next/image'
 
+import { Button } from '@/shared/ui/button'
+import { calculateTableNumber } from '@/shared/utils/table'
+
+import InactiveStockDeleteButton from '../_ui/inactive-stock-delete-button'
 import StockActiveStateToggleButton from '../_ui/stock-active-state-toggle-button'
 import { StockResponseModel } from '../types'
 
-const setAdminStockManageTableData = (data: StockResponseModel['result']) =>
-  data?.content.map((data) => [
+interface Props {
+  data: StockResponseModel['result']
+  isActive: boolean
+  page: number
+  countPerPage: number
+}
+
+const setAdminStockManageTableData = ({ data, isActive, page, countPerPage }: Props) =>
+  data?.content.map((data, idx) => [
+    calculateTableNumber({ page, idx, countPerPage }),
     data.stockTypeName,
     <Image
       src={data.stockTypeIconUrl}
@@ -13,7 +25,10 @@ const setAdminStockManageTableData = (data: StockResponseModel['result']) =>
       height={24}
       key={data.stockTypeName}
     />,
-    <StockActiveStateToggleButton stockTypeId={data.stockTypeId} active key={data.stockTypeId} />,
+    <Button.ButtonGroup key={data.stockTypeId}>
+      <StockActiveStateToggleButton active={isActive} stockTypeId={data.stockTypeId} />
+      {!isActive && <InactiveStockDeleteButton stockTypeId={data.stockTypeId} />}
+    </Button.ButtonGroup>,
   ]) ?? []
 
 export default setAdminStockManageTableData
diff --git a/app/admin/category/_ui/stock/stock-manage/_api/toggle-stock-active-state.ts b/app/admin/category/_ui/stock/stock-manage/_api/toggle-stock-active-state.ts
index 43629679..d391877f 100644
--- a/app/admin/category/_ui/stock/stock-manage/_api/toggle-stock-active-state.ts
+++ b/app/admin/category/_ui/stock/stock-manage/_api/toggle-stock-active-state.ts
@@ -3,17 +3,13 @@ import axiosInstance from '@/shared/api/axios'
 import { ToggleStockActiveStateResponseModel } from '../types'
 
 const ToggleStockActiveState = async (stockTypeId: number) => {
-  try {
-    const res = await axiosInstance.patch<ToggleStockActiveStateResponseModel>(
-      `/api/admin/strategies/stock-type/${stockTypeId}`
-    )
+  const res = await axiosInstance.patch<ToggleStockActiveStateResponseModel>(
+    `/api/admin/strategies/stock-type/${stockTypeId}`
+  )
 
-    if (!res.data.isSuccess) throw new Error(res.data.message)
+  if (!res.data.isSuccess) throw new Error(res.data.message)
 
-    return res.data
-  } catch (err) {
-    console.log('Error : ' + err)
-  }
+  return res.data
 }
 
 export default ToggleStockActiveState
diff --git a/app/admin/category/_ui/stock/stock-manage/_hooks/query/use-delete-inactive-stock.ts b/app/admin/category/_ui/stock/stock-manage/_hooks/query/use-delete-inactive-stock.ts
new file mode 100644
index 00000000..f3460fe7
--- /dev/null
+++ b/app/admin/category/_ui/stock/stock-manage/_hooks/query/use-delete-inactive-stock.ts
@@ -0,0 +1,23 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query'
+
+import { QUERY_KEY } from '@/shared/constants/query-key'
+
+import deleteInactiveStock from '../../_api/delete-inactive-stock'
+
+const useDeleteInactiveStock = (stockTypeId: number) => {
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    mutationFn: () => deleteInactiveStock(stockTypeId),
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: [QUERY_KEY.ADMIN_STOCKS],
+      })
+    },
+    onError: (err) => {
+      console.error('Error : ', err)
+    },
+  })
+}
+
+export default useDeleteInactiveStock
diff --git a/app/admin/category/_ui/stock/stock-manage/_hooks/query/use-stocks-data.ts b/app/admin/category/_ui/stock/stock-manage/_hooks/query/use-stocks-data.ts
index 840f2bae..9b1a12de 100644
--- a/app/admin/category/_ui/stock/stock-manage/_hooks/query/use-stocks-data.ts
+++ b/app/admin/category/_ui/stock/stock-manage/_hooks/query/use-stocks-data.ts
@@ -1,5 +1,7 @@
 import { useQuery } from '@tanstack/react-query'
 
+import { QUERY_KEY } from '@/shared/constants/query-key'
+
 import getStocks from '../../_api/get-stocks'
 
 type ArgType = 'active' | 'inactive'
@@ -8,7 +10,7 @@ const useStocksData = (activateState: ArgType, page: number = 1, size: number =
   const isActive = activateState === 'active' ? true : false
 
   return useQuery({
-    queryKey: ['adminStocks', activateState, page, size],
+    queryKey: [QUERY_KEY.ADMIN_STOCKS, activateState, page, size],
     queryFn: () => getStocks(isActive, page, size),
   })
 }
diff --git a/app/admin/category/_ui/stock/stock-manage/_hooks/query/use-toggle-trade-active-state.ts b/app/admin/category/_ui/stock/stock-manage/_hooks/query/use-toggle-stock-active-state.ts
similarity index 67%
rename from app/admin/category/_ui/stock/stock-manage/_hooks/query/use-toggle-trade-active-state.ts
rename to app/admin/category/_ui/stock/stock-manage/_hooks/query/use-toggle-stock-active-state.ts
index d190e1dc..80ba45b7 100644
--- a/app/admin/category/_ui/stock/stock-manage/_hooks/query/use-toggle-trade-active-state.ts
+++ b/app/admin/category/_ui/stock/stock-manage/_hooks/query/use-toggle-stock-active-state.ts
@@ -1,15 +1,17 @@
 import { useMutation, useQueryClient } from '@tanstack/react-query'
 
+import { QUERY_KEY } from '@/shared/constants/query-key'
+
 import ToggleStockActiveState from '../../_api/toggle-stock-active-state'
 
-const useToggoleStockActiveState = (stockTypeId: number) => {
+const useToggleStockActiveState = (stockTypeId: number) => {
   const queryClient = useQueryClient()
 
   return useMutation({
     mutationFn: () => ToggleStockActiveState(stockTypeId),
     onSuccess: () => {
       queryClient.invalidateQueries({
-        queryKey: ['adminStocks'],
+        queryKey: [QUERY_KEY.ADMIN_STOCKS],
       })
     },
     onError: (err) => {
@@ -18,4 +20,4 @@ const useToggoleStockActiveState = (stockTypeId: number) => {
   })
 }
 
-export default useToggoleStockActiveState
+export default useToggleStockActiveState
diff --git a/app/admin/category/_ui/stock/stock-manage/_ui/active-stock-manage-table.tsx b/app/admin/category/_ui/stock/stock-manage/_ui/active-stock-manage-table.tsx
index 1e7c5fdf..f8d4905c 100644
--- a/app/admin/category/_ui/stock/stock-manage/_ui/active-stock-manage-table.tsx
+++ b/app/admin/category/_ui/stock/stock-manage/_ui/active-stock-manage-table.tsx
@@ -2,8 +2,6 @@
 
 import { useState } from 'react'
 
-import withSuspense from '@/shared/utils/with-suspense'
-
 import ManageTable from '../../../shared/manage-table'
 import setAdminStockManageTableData from '../_api/set-admin-stock-manage-table-data'
 import useStocksData from '../_hooks/query/use-stocks-data'
@@ -16,7 +14,12 @@ const ActiveStockManageTable = () => {
   const { data } = useStocksData('active', currentPage, TABLE_BODY_SIZE)
   if (!data) return null
 
-  const tableData = setAdminStockManageTableData(data)
+  const tableData = setAdminStockManageTableData({
+    data,
+    isActive: true,
+    page: currentPage,
+    countPerPage: TABLE_BODY_SIZE,
+  })
 
   return (
     <ManageTable
@@ -31,7 +34,4 @@ const ActiveStockManageTable = () => {
   )
 }
 
-export default withSuspense(
-  ActiveStockManageTable,
-  <ManageTable.Skeleton active size={10} domain="종목" />
-)
+export default ActiveStockManageTable
diff --git a/app/admin/category/_ui/stock/stock-manage/_ui/inactive-stock-delete-button.tsx b/app/admin/category/_ui/stock/stock-manage/_ui/inactive-stock-delete-button.tsx
new file mode 100644
index 00000000..a31c4db1
--- /dev/null
+++ b/app/admin/category/_ui/stock/stock-manage/_ui/inactive-stock-delete-button.tsx
@@ -0,0 +1,45 @@
+'use client'
+
+import { CSSProperties } from 'react'
+
+import useModal from '@/shared/hooks/custom/use-modal'
+import { Button } from '@/shared/ui/button'
+import AlertModal from '@/shared/ui/modal/alert-modal'
+
+import useDeleteInactiveStock from '../_hooks/query/use-delete-inactive-stock'
+
+interface Props {
+  stockTypeId: number
+}
+
+const InactiveStockDeleteButton = ({ stockTypeId }: Props) => {
+  const { mutate, isPending } = useDeleteInactiveStock(stockTypeId)
+  const { closeModal, isModalOpen, openModal } = useModal()
+
+  return (
+    <>
+      <Button
+        size="small"
+        onClick={openModal}
+        disabled={isPending}
+        variant="filled"
+        style={buttonStyles}
+      >
+        삭제
+      </Button>
+      <AlertModal
+        message={`해당 종목을\n삭제하시겠습니까?`}
+        isModalOpen={isModalOpen}
+        onCancel={closeModal}
+        onConfirm={mutate}
+      />
+    </>
+  )
+}
+
+const buttonStyles: CSSProperties = {
+  height: '30px',
+  padding: '7px 16px',
+  margin: '15px 0',
+}
+export default InactiveStockDeleteButton
diff --git a/app/admin/category/_ui/stock/stock-manage/_ui/inactive-stock-manage-table.tsx b/app/admin/category/_ui/stock/stock-manage/_ui/inactive-stock-manage-table.tsx
index 602dad61..20486230 100644
--- a/app/admin/category/_ui/stock/stock-manage/_ui/inactive-stock-manage-table.tsx
+++ b/app/admin/category/_ui/stock/stock-manage/_ui/inactive-stock-manage-table.tsx
@@ -2,8 +2,6 @@
 
 import { useState } from 'react'
 
-import withSuspense from '@/shared/utils/with-suspense'
-
 import ManageTable from '../../../shared/manage-table'
 import setAdminStockManageTableData from '../_api/set-admin-stock-manage-table-data'
 import useStocksData from '../_hooks/query/use-stocks-data'
@@ -16,12 +14,17 @@ const InactiveTradeManageTable = () => {
   const { data } = useStocksData('inactive', currentPage, TABLE_BODY_SIZE)
   if (!data) return null
 
-  const tableData = setAdminStockManageTableData(data)
+  const tableData = setAdminStockManageTableData({
+    data,
+    isActive: false,
+    page: currentPage,
+    countPerPage: data.size,
+  })
 
   return (
     <ManageTable
       data={tableData}
-      size={TABLE_BODY_SIZE}
+      size={data.size}
       currentPage={currentPage}
       setCurrentPage={setCurrentPage}
       maxPage={data?.totalPages}
@@ -30,7 +33,4 @@ const InactiveTradeManageTable = () => {
   )
 }
 
-export default withSuspense(
-  InactiveTradeManageTable,
-  <ManageTable.Skeleton size={10} domain="종목" />
-)
+export default InactiveTradeManageTable
diff --git a/app/admin/category/_ui/stock/stock-manage/_ui/stock-active-state-toggle-button.tsx b/app/admin/category/_ui/stock/stock-manage/_ui/stock-active-state-toggle-button.tsx
index 4edd4539..7e7ab8ac 100644
--- a/app/admin/category/_ui/stock/stock-manage/_ui/stock-active-state-toggle-button.tsx
+++ b/app/admin/category/_ui/stock/stock-manage/_ui/stock-active-state-toggle-button.tsx
@@ -4,7 +4,7 @@ import { CSSProperties } from 'react'
 
 import { Button } from '@/shared/ui/button'
 
-import useToggoleStockActiveState from '../_hooks/query/use-toggle-trade-active-state'
+import useToggleStockActiveState from '../_hooks/query/use-toggle-stock-active-state'
 
 interface Props {
   active?: boolean
@@ -12,7 +12,7 @@ interface Props {
 }
 
 const StockActiveStateToggleButton = ({ active, stockTypeId }: Props) => {
-  const { mutate, isPending } = useToggoleStockActiveState(stockTypeId)
+  const { mutate, isPending } = useToggleStockActiveState(stockTypeId)
   const onButtonClick = () => {
     mutate()
   }
diff --git a/app/admin/category/_ui/stock/stock-manage/_ui/stock-post-button/index.tsx b/app/admin/category/_ui/stock/stock-manage/_ui/stock-post-button/index.tsx
index 1bb449aa..845a2d9b 100644
--- a/app/admin/category/_ui/stock/stock-manage/_ui/stock-post-button/index.tsx
+++ b/app/admin/category/_ui/stock/stock-manage/_ui/stock-post-button/index.tsx
@@ -7,9 +7,10 @@ import { RegisterIcon } from '@/public/icons'
 import { useQueryClient } from '@tanstack/react-query'
 import classNames from 'classnames/bind'
 
+import { QUERY_KEY } from '@/shared/constants/query-key'
 import useModal from '@/shared/hooks/custom/use-modal'
 import { Button } from '@/shared/ui/button'
-import { Input } from '@/shared/ui/input'
+import Input from '@/shared/ui/input'
 import Modal from '@/shared/ui/modal'
 
 import useStrategyIconPost from '../../../../shared/_hooks/use-category-icon-post'
@@ -35,7 +36,7 @@ const StockPostButton = () => {
     try {
       await onSubmit(e)
       closeModal()
-      queryClient.invalidateQueries({ queryKey: ['adminStocks'] })
+      queryClient.invalidateQueries({ queryKey: [QUERY_KEY.ADMIN_STOCKS] })
     } catch (err) {
       console.error('Error : ' + err)
     }
diff --git a/app/admin/category/_ui/stock/stock-manage/_ui/stock-post-button/styles.module.scss b/app/admin/category/_ui/stock/stock-manage/_ui/stock-post-button/styles.module.scss
index 2817e085..f1deaa53 100644
--- a/app/admin/category/_ui/stock/stock-manage/_ui/stock-post-button/styles.module.scss
+++ b/app/admin/category/_ui/stock/stock-manage/_ui/stock-post-button/styles.module.scss
@@ -6,7 +6,7 @@
 }
 
 .form {
-  width: 236px; //이거 고정값 맞나?...
+  width: 236px;
   margin-top: 24px;
 }
 
diff --git a/app/admin/category/_ui/stock/stock-manage/types.ts b/app/admin/category/_ui/stock/stock-manage/types.ts
index 76a8be23..7af2ac5d 100644
--- a/app/admin/category/_ui/stock/stock-manage/types.ts
+++ b/app/admin/category/_ui/stock/stock-manage/types.ts
@@ -24,8 +24,5 @@ export interface StockResponseModel extends StockResponseBaseModel<boolean> {
 // eslint-disable-next-line
 export interface ToggleStockActiveStateResponseModel extends StockResponseBaseModel<boolean> {}
 
-export interface PresignedUrlResponseModel extends StockResponseBaseModel<boolean> {
-  result: {
-    presignedUrl: string
-  }
-}
+// eslint-disable-next-line
+export interface DeleteInactiveStockResponseModel extends StockResponseBaseModel<boolean> {}
diff --git a/app/admin/category/_ui/trade/trade-manage/_api/delete-inactive-trade.ts b/app/admin/category/_ui/trade/trade-manage/_api/delete-inactive-trade.ts
new file mode 100644
index 00000000..6c61e576
--- /dev/null
+++ b/app/admin/category/_ui/trade/trade-manage/_api/delete-inactive-trade.ts
@@ -0,0 +1,20 @@
+import axiosInstance from '@/shared/api/axios'
+
+import { DeleteInactiveTradeResponseModel } from '../types'
+
+const deleteInactiveTrade = async (tradeTypeId: number) => {
+  try {
+    const res = await axiosInstance.delete<DeleteInactiveTradeResponseModel>(
+      `/api/admin/strategies/trade-type/${tradeTypeId}`
+    )
+
+    if (!res.data.isSuccess) throw new Error(res.data.message)
+
+    return res.data
+  } catch (err) {
+    console.error('Error : ' + err)
+    throw err
+  }
+}
+
+export default deleteInactiveTrade
diff --git a/app/admin/category/_ui/trade/trade-manage/_api/get-trades.ts b/app/admin/category/_ui/trade/trade-manage/_api/get-trades.ts
index fbc7cb1b..6722bad6 100644
--- a/app/admin/category/_ui/trade/trade-manage/_api/get-trades.ts
+++ b/app/admin/category/_ui/trade/trade-manage/_api/get-trades.ts
@@ -3,20 +3,15 @@ import axiosInstance from '@/shared/api/axios'
 import { TradeResponseModel } from '../types'
 
 const getTrades = async (activateState: boolean) => {
-  try {
-    const res = await axiosInstance<TradeResponseModel>('/api/admin/strategies/trade-type', {
-      params: {
-        activateState,
-      },
-    })
+  const res = await axiosInstance.get<TradeResponseModel>('/api/admin/strategies/trade-type', {
+    params: {
+      activateState,
+    },
+  })
 
-    if (!res.data.isSuccess) throw new Error(res.data.message)
+  if (!res.data.isSuccess) throw new Error(res.data.message)
 
-    return res.data
-  } catch (err) {
-    console.log('Error : ' + err)
-    throw err
-  }
+  return res.data.result
 }
 
 export default getTrades
diff --git a/app/admin/category/_ui/trade/trade-manage/_api/set-admin-trade-manage-table-data.tsx b/app/admin/category/_ui/trade/trade-manage/_api/set-admin-trade-manage-table-data.tsx
index fa4a110e..b2f144c1 100644
--- a/app/admin/category/_ui/trade/trade-manage/_api/set-admin-trade-manage-table-data.tsx
+++ b/app/admin/category/_ui/trade/trade-manage/_api/set-admin-trade-manage-table-data.tsx
@@ -1,10 +1,22 @@
 import Image from 'next/image'
 
-import StockActiveStateToggleButton from '../../../stock/stock-manage/_ui/stock-active-state-toggle-button'
+import { Button } from '@/shared/ui/button'
+import { calculateTableNumber } from '@/shared/utils/table'
+
+import InactiveTradeDeleteButton from '../_ui/inactive-trade-delete-button'
+import TradeActiveStateToggleButton from '../_ui/trade-active-state-toggle-button'
 import { TradeResponseModel } from '../types'
 
-const setAdminTradeManageTableData = (data: TradeResponseModel['result']) =>
-  data?.map((data) => [
+interface Props {
+  data: TradeResponseModel['result']
+  isActive: boolean
+  page: number
+  countPerPage: number
+}
+
+const setAdminTradeManageTableData = ({ data, isActive, page, countPerPage }: Props) =>
+  data?.map((data, idx) => [
+    calculateTableNumber({ page, idx, countPerPage }),
     data.tradeName,
     <Image
       src={data.tradeTypeIconUrl}
@@ -13,7 +25,14 @@ const setAdminTradeManageTableData = (data: TradeResponseModel['result']) =>
       height={24}
       key={data.tradeTypeId}
     />,
-    <StockActiveStateToggleButton stockTypeId={data.tradeTypeId} active key={data.tradeTypeId} />,
+    <Button.ButtonGroup key={data.tradeTypeId}>
+      <TradeActiveStateToggleButton
+        active={isActive}
+        tradeTypeId={data.tradeTypeId}
+        key={data.tradeTypeId}
+      />
+      {!isActive && <InactiveTradeDeleteButton tradeTypeId={data.tradeTypeId} />}
+    </Button.ButtonGroup>,
   ]) ?? []
 
 export default setAdminTradeManageTableData
diff --git a/app/admin/category/_ui/trade/trade-manage/_api/toggle-trade-active-state.ts b/app/admin/category/_ui/trade/trade-manage/_api/toggle-trade-active-state.ts
index cee615a9..554db632 100644
--- a/app/admin/category/_ui/trade/trade-manage/_api/toggle-trade-active-state.ts
+++ b/app/admin/category/_ui/trade/trade-manage/_api/toggle-trade-active-state.ts
@@ -3,17 +3,13 @@ import axiosInstance from '@/shared/api/axios'
 import { ToggleTradeActiveStateResponseModel } from '../types'
 
 const ToggleTradeActiveState = async (tradeTypeId: number) => {
-  try {
-    const res = await axiosInstance.patch<ToggleTradeActiveStateResponseModel>(
-      `/api/admin/strategies/trade-type/${tradeTypeId}`
-    )
+  const res = await axiosInstance.patch<ToggleTradeActiveStateResponseModel>(
+    `/api/admin/strategies/trade-type/${tradeTypeId}`
+  )
 
-    if (!res.data.isSuccess) throw new Error(res.data.message)
+  if (!res.data.isSuccess) throw new Error(res.data.message)
 
-    return res.data
-  } catch (err) {
-    console.log('Error : ' + err)
-  }
+  return res.data
 }
 
 export default ToggleTradeActiveState
diff --git a/app/admin/category/_ui/trade/trade-manage/_hooks/query/use-delete-inactive-trade.ts b/app/admin/category/_ui/trade/trade-manage/_hooks/query/use-delete-inactive-trade.ts
new file mode 100644
index 00000000..84a1eca7
--- /dev/null
+++ b/app/admin/category/_ui/trade/trade-manage/_hooks/query/use-delete-inactive-trade.ts
@@ -0,0 +1,33 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query'
+
+import { QUERY_KEY } from '@/shared/constants/query-key'
+
+import deleteInactiveTrade from '../../_api/delete-inactive-trade'
+
+interface Props {
+  tradeTypeId: number
+  options: {
+    onSuccess?: () => void
+    onError?: (error: Error) => void
+  }
+}
+
+const useDeleteInactiveTrade = ({ tradeTypeId, options }: Props) => {
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    mutationFn: () => deleteInactiveTrade(tradeTypeId),
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: [QUERY_KEY.ADMIN_TRADES],
+      })
+      options?.onSuccess?.()
+    },
+    onError: (err) => {
+      console.error('Error : ', err)
+      options?.onError?.(err as Error)
+    },
+  })
+}
+
+export default useDeleteInactiveTrade
diff --git a/app/admin/category/_ui/trade/trade-manage/_hooks/query/use-toggle-trade-active-state.ts b/app/admin/category/_ui/trade/trade-manage/_hooks/query/use-toggle-trade-active-state.ts
index c48878f5..909c2777 100644
--- a/app/admin/category/_ui/trade/trade-manage/_hooks/query/use-toggle-trade-active-state.ts
+++ b/app/admin/category/_ui/trade/trade-manage/_hooks/query/use-toggle-trade-active-state.ts
@@ -1,5 +1,7 @@
 import { useMutation, useQueryClient } from '@tanstack/react-query'
 
+import { QUERY_KEY } from '@/shared/constants/query-key'
+
 import ToggleTradeActiveState from '../../_api/toggle-trade-active-state'
 
 const useToggoleTradeActiveState = (tradeTypeId: number) => {
@@ -9,7 +11,7 @@ const useToggoleTradeActiveState = (tradeTypeId: number) => {
     mutationFn: () => ToggleTradeActiveState(tradeTypeId),
     onSuccess: () => {
       queryClient.invalidateQueries({
-        queryKey: ['adminTrades'],
+        queryKey: [QUERY_KEY.ADMIN_TRADES],
       })
     },
     onError: (err) => {
diff --git a/app/admin/category/_ui/trade/trade-manage/_hooks/query/use-trades-data.ts b/app/admin/category/_ui/trade/trade-manage/_hooks/query/use-trades-data.ts
index 7d32530d..c905f6a9 100644
--- a/app/admin/category/_ui/trade/trade-manage/_hooks/query/use-trades-data.ts
+++ b/app/admin/category/_ui/trade/trade-manage/_hooks/query/use-trades-data.ts
@@ -1,5 +1,7 @@
 import { useQuery } from '@tanstack/react-query'
 
+import { QUERY_KEY } from '@/shared/constants/query-key'
+
 import getTrades from '../../_api/get-trades'
 
 type ArgType = 'active' | 'inactive'
@@ -8,7 +10,7 @@ const useTradeData = (activateState: ArgType) => {
   const isActive = activateState === 'active' ? true : false
 
   return useQuery({
-    queryKey: ['adminTrades', activateState],
+    queryKey: [QUERY_KEY.ADMIN_TRADES, activateState],
     queryFn: () => getTrades(isActive),
   })
 }
diff --git a/app/admin/category/_ui/trade/trade-manage/_ui/active-trade-manage-table.tsx b/app/admin/category/_ui/trade/trade-manage/_ui/active-trade-manage-table.tsx
index 593164ab..f1b70123 100644
--- a/app/admin/category/_ui/trade/trade-manage/_ui/active-trade-manage-table.tsx
+++ b/app/admin/category/_ui/trade/trade-manage/_ui/active-trade-manage-table.tsx
@@ -1,5 +1,3 @@
-import withSuspense from '@/shared/utils/with-suspense'
-
 import ManageTable from '../../../shared/manage-table'
 import setAdminTradeManageTableData from '../_api/set-admin-trade-manage-table-data'
 import useTradeData from '../_hooks/query/use-trades-data'
@@ -8,12 +6,14 @@ const ActiveTradeManageTable = () => {
   const { data } = useTradeData('active')
   if (!data) return null
 
-  const tableData = setAdminTradeManageTableData(data.result)
+  const tableData = setAdminTradeManageTableData({
+    data,
+    isActive: true,
+    page: 1,
+    countPerPage: 10,
+  })
 
   return <ManageTable data={tableData} active domain="매매 유형" />
 }
 
-export default withSuspense(
-  ActiveTradeManageTable,
-  <ManageTable.Skeleton active size={10} domain="매매 유형" />
-)
+export default ActiveTradeManageTable
diff --git a/app/admin/category/_ui/trade/trade-manage/_ui/inactive-trade-delete-button.tsx b/app/admin/category/_ui/trade/trade-manage/_ui/inactive-trade-delete-button.tsx
new file mode 100644
index 00000000..399b6a18
--- /dev/null
+++ b/app/admin/category/_ui/trade/trade-manage/_ui/inactive-trade-delete-button.tsx
@@ -0,0 +1,65 @@
+'use client'
+
+import { CSSProperties } from 'react'
+
+import useModal from '@/shared/hooks/custom/use-modal'
+import { Button } from '@/shared/ui/button'
+import AlertModal from '@/shared/ui/modal/alert-modal'
+import NotificationModal from '@/shared/ui/modal/notification-modal'
+
+import useDeleteInactiveTrade from '../_hooks/query/use-delete-inactive-trade'
+
+interface Props {
+  tradeTypeId: number
+}
+
+const InactiveTradeDeleteButton = ({ tradeTypeId }: Props) => {
+  const { closeModal, isModalOpen, openModal } = useModal()
+  const {
+    closeModal: closeErrorModal,
+    isModalOpen: isErrorModalOpen,
+    openModal: openErrorModal,
+  } = useModal()
+  const { mutate, isPending } = useDeleteInactiveTrade({
+    tradeTypeId,
+    options: {
+      onError: () => {
+        closeModal()
+        openErrorModal()
+      },
+    },
+  })
+
+  return (
+    <>
+      <Button
+        size="small"
+        onClick={openModal}
+        disabled={isPending}
+        variant="filled"
+        style={buttonStyles}
+      >
+        삭제
+      </Button>
+      <AlertModal
+        message={`해당 매매유형을\n삭제하시겠습니까?`}
+        isModalOpen={isModalOpen}
+        onCancel={closeModal}
+        onConfirm={mutate}
+      />
+      <NotificationModal
+        message={`해당 매매유형은\n삭제할 수 없습니다.`}
+        isOpen={isErrorModalOpen}
+        onClose={closeErrorModal}
+      />
+    </>
+  )
+}
+
+const buttonStyles: CSSProperties = {
+  height: '30px',
+  padding: '7px 16px',
+  margin: '15px 0',
+}
+
+export default InactiveTradeDeleteButton
diff --git a/app/admin/category/_ui/trade/trade-manage/_ui/inactive-trade-manage-table.tsx b/app/admin/category/_ui/trade/trade-manage/_ui/inactive-trade-manage-table.tsx
index 922659ba..44f2d4e8 100644
--- a/app/admin/category/_ui/trade/trade-manage/_ui/inactive-trade-manage-table.tsx
+++ b/app/admin/category/_ui/trade/trade-manage/_ui/inactive-trade-manage-table.tsx
@@ -1,5 +1,3 @@
-import withSuspense from '@/shared/utils/with-suspense'
-
 import ManageTable from '../../../shared/manage-table'
 import setAdminTradeManageTableData from '../_api/set-admin-trade-manage-table-data'
 import useTradeData from '../_hooks/query/use-trades-data'
@@ -8,12 +6,14 @@ const InactiveTradeManageTable = () => {
   const { data } = useTradeData('inactive')
   if (!data) return null
 
-  const tableData = setAdminTradeManageTableData(data.result)
+  const tableData = setAdminTradeManageTableData({
+    data,
+    isActive: false,
+    page: 1,
+    countPerPage: 10,
+  })
 
   return <ManageTable data={tableData} domain="매매 유형" />
 }
 
-export default withSuspense(
-  InactiveTradeManageTable,
-  <ManageTable.Skeleton size={10} domain="매매 유형" />
-)
+export default InactiveTradeManageTable
diff --git a/app/admin/category/_ui/trade/trade-manage/_ui/trade-active-state-toggle-button.tsx b/app/admin/category/_ui/trade/trade-manage/_ui/trade-active-state-toggle-button.tsx
index 3ec95b75..58e0493b 100644
--- a/app/admin/category/_ui/trade/trade-manage/_ui/trade-active-state-toggle-button.tsx
+++ b/app/admin/category/_ui/trade/trade-manage/_ui/trade-active-state-toggle-button.tsx
@@ -4,7 +4,7 @@ import { CSSProperties } from 'react'
 
 import { Button } from '@/shared/ui/button'
 
-import useToggoleTradeActiveState from '../_hooks/query/use-toggle-trade-active-state'
+import useToggleTradeActiveState from '../_hooks/query/use-toggle-trade-active-state'
 
 interface Props {
   active?: boolean
@@ -12,10 +12,9 @@ interface Props {
 }
 
 const TradeActiveStateToggleButton = ({ active, tradeTypeId }: Props) => {
-  const { mutate, isPending } = useToggoleTradeActiveState(tradeTypeId)
+  const { mutate, isPending } = useToggleTradeActiveState(tradeTypeId)
   const onButtonClick = () => {
     mutate()
-    console.log('t', tradeTypeId)
   }
 
   return (
@@ -36,4 +35,5 @@ const buttonStyles: CSSProperties = {
   padding: '7px 16px',
   margin: '15px 0',
 }
+
 export default TradeActiveStateToggleButton
diff --git a/app/admin/category/_ui/trade/trade-manage/_ui/trade-post-button/index.tsx b/app/admin/category/_ui/trade/trade-manage/_ui/trade-post-button/index.tsx
index 69808927..c8be5415 100644
--- a/app/admin/category/_ui/trade/trade-manage/_ui/trade-post-button/index.tsx
+++ b/app/admin/category/_ui/trade/trade-manage/_ui/trade-post-button/index.tsx
@@ -7,9 +7,10 @@ import { RegisterIcon } from '@/public/icons'
 import { useQueryClient } from '@tanstack/react-query'
 import classNames from 'classnames/bind'
 
+import { QUERY_KEY } from '@/shared/constants/query-key'
 import useModal from '@/shared/hooks/custom/use-modal'
 import { Button } from '@/shared/ui/button'
-import { Input } from '@/shared/ui/input'
+import Input from '@/shared/ui/input'
 import Modal from '@/shared/ui/modal'
 
 import useStrategyIconPost from '../../../../shared/_hooks/use-category-icon-post'
@@ -30,7 +31,7 @@ const TradePostButton = () => {
     try {
       await onSubmit(e)
       closeModal()
-      queryClient.invalidateQueries({ queryKey: ['adminTrades'] })
+      queryClient.invalidateQueries({ queryKey: [QUERY_KEY.ADMIN_TRADES] })
     } catch (err) {
       console.error('Error : ' + err)
     }
diff --git a/app/admin/category/_ui/trade/trade-manage/_ui/trade-post-button/styles.module.scss b/app/admin/category/_ui/trade/trade-manage/_ui/trade-post-button/styles.module.scss
index 2817e085..f1deaa53 100644
--- a/app/admin/category/_ui/trade/trade-manage/_ui/trade-post-button/styles.module.scss
+++ b/app/admin/category/_ui/trade/trade-manage/_ui/trade-post-button/styles.module.scss
@@ -6,7 +6,7 @@
 }
 
 .form {
-  width: 236px; //이거 고정값 맞나?...
+  width: 236px;
   margin-top: 24px;
 }
 
diff --git a/app/admin/category/_ui/trade/trade-manage/types.ts b/app/admin/category/_ui/trade/trade-manage/types.ts
index c3ce3092..dda22a85 100644
--- a/app/admin/category/_ui/trade/trade-manage/types.ts
+++ b/app/admin/category/_ui/trade/trade-manage/types.ts
@@ -16,6 +16,9 @@ export interface TradeResponseModel extends TradeResponseBaseModel<boolean> {
 // eslint-disable-next-line
 export interface ToggleTradeActiveStateResponseModel extends TradeResponseBaseModel<boolean> {}
 
+// eslint-disable-next-line
+export interface DeleteInactiveTradeResponseModel extends TradeResponseBaseModel<boolean> {}
+
 export interface PresignedUrlResponseModel extends TradeResponseBaseModel<boolean> {
   result: {
     presignedUrl: string
diff --git a/app/admin/notices/[noticeId]/edit/_hooks/query/use-patch-notice.ts b/app/admin/notices/[noticeId]/edit/_hooks/query/use-patch-notice.ts
new file mode 100644
index 00000000..c835f385
--- /dev/null
+++ b/app/admin/notices/[noticeId]/edit/_hooks/query/use-patch-notice.ts
@@ -0,0 +1,57 @@
+import { useRouter } from 'next/navigation'
+
+import { NoticeFormModel } from '@/app/admin/notices/types'
+import { useMutation, useQueryClient } from '@tanstack/react-query'
+
+import axiosInstance from '@/shared/api/axios'
+import { QUERY_KEY } from '@/shared/constants/query-key'
+import uploadFilesWithPresignedUrl from '@/shared/utils/upload-files-with-presigned-url'
+
+import { PatchNoticeResponseModel } from '../../types'
+
+const usePatchNotice = (formData: NoticeFormModel, noticeId: number) => {
+  const router = useRouter()
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    mutationFn: async () => {
+      const { existingFiles, newFiles } = formData
+
+      const allFilePaths = [
+        ...(existingFiles?.map((file) => file.fileName) ?? []),
+        ...(newFiles?.map((file) => file.name) ?? []),
+      ]
+
+      const allSizes = [
+        ...(existingFiles?.map((_) => 0) ?? []),
+        ...(newFiles?.map((file) => file.size) ?? []),
+      ]
+
+      const uploadResponse = await axiosInstance.patch<PatchNoticeResponseModel>(
+        `/api/admin/notices/${noticeId}`,
+        {
+          title: formData.title,
+          content: formData.content,
+          filePaths: allFilePaths,
+          sizes: allSizes,
+        }
+      )
+
+      if (!newFiles?.length) return
+
+      const presignedUrls = uploadResponse.data.result
+      await uploadFilesWithPresignedUrl(newFiles, presignedUrls)
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: [QUERY_KEY.NOTICES],
+      })
+      queryClient.invalidateQueries({
+        queryKey: [QUERY_KEY.NOTICE_DETAIL, noticeId],
+      })
+      router.replace('/admin/notices')
+    },
+  })
+}
+
+export default usePatchNotice
diff --git a/app/admin/notices/[noticeId]/edit/page.module.scss b/app/admin/notices/[noticeId]/edit/page.module.scss
new file mode 100644
index 00000000..570bc4ce
--- /dev/null
+++ b/app/admin/notices/[noticeId]/edit/page.module.scss
@@ -0,0 +1,49 @@
+.container {
+  padding: 86px 0 80px;
+  border-radius: 8px;
+  margin-bottom: 42px;
+  background-color: $color-white;
+}
+
+.form {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.input-field {
+  width: 795px;
+  margin-bottom: 64px;
+  display: flex;
+  flex-direction: column;
+  gap: 30px;
+}
+
+.file-input {
+  width: 100%;
+}
+
+.textarea {
+  height: 420px;
+
+  &::placeholder {
+    vertical-align: middle;
+  }
+}
+
+.button {
+  width: 74px;
+  height: 30px;
+  border: 1px solid $color-gray-300;
+}
+
+.notice-files-container {
+  width: 640px;
+  margin-left: auto;
+  margin-top: -28px;
+
+  .notice-file-list {
+    @include typo-b3;
+    font-weight: 500;
+  }
+}
diff --git a/app/admin/notices/[noticeId]/edit/page.tsx b/app/admin/notices/[noticeId]/edit/page.tsx
new file mode 100644
index 00000000..0f6e4e3c
--- /dev/null
+++ b/app/admin/notices/[noticeId]/edit/page.tsx
@@ -0,0 +1,137 @@
+'use client'
+
+import { useEffect } from 'react'
+
+import { useParams } from 'next/navigation'
+
+import useNoticeDetail from '@/app/(landing)/notices/_hooks/use-notice-detail'
+import FileInput from '@/app/admin/_ui/file-input'
+import InputField from '@/app/admin/_ui/input-field'
+import classNames from 'classnames/bind'
+
+import { Button } from '@/shared/ui/button'
+import BackHeader from '@/shared/ui/header/back-header'
+import Input from '@/shared/ui/input'
+import NotificationModal from '@/shared/ui/modal/notification-modal'
+import Textarea from '@/shared/ui/textarea'
+import Title from '@/shared/ui/title'
+
+import useFileHandler from '../../_hook/use-file-handler'
+import NoticeFileItem from '../../_ui/notice-file-item'
+import useNoticeForm from '../../post/_hooks/use-notice-form'
+import usePatchNotice from './_hooks/query/use-patch-notice'
+import styles from './page.module.scss'
+
+const cx = classNames.bind(styles)
+
+const AdminNoticeEditPage = () => {
+  const { noticeId } = useParams()
+  const { data } = useNoticeDetail(Number(noticeId as string))
+  const { formData, setFormData, onInputChange } = useNoticeForm()
+  const { mutate } = usePatchNotice(formData, Number(noticeId as string))
+  const { handleDeleteFile, handleFileChange, isModalOpen, handleCloseModal } = useFileHandler({
+    formData,
+    setFormData,
+    onInputChange,
+  })
+
+  useEffect(() => {
+    if (data) {
+      setFormData({
+        title: data.title || '',
+        content: data.content || '',
+        existingFiles: data.files || [],
+      })
+    }
+  }, [data, setFormData])
+
+  return (
+    <>
+      <BackHeader label="공지사항으로 돌아가기" />
+      <Title label="공지사항 수정" style={{ margin: '0 0 26px 12.6px' }} />
+      <div className={cx('container')}>
+        <form
+          className={cx('form')}
+          onSubmit={(e) => {
+            e.preventDefault()
+            mutate()
+          }}
+        >
+          <div className={cx('input-field')}>
+            <InputField
+              label="제목"
+              Input={
+                <Input
+                  type="text"
+                  inputSize="full"
+                  placeholder="제목을 입력하세요."
+                  value={formData.title}
+                  onChange={(e) => onInputChange('title', e.target.value)}
+                />
+              }
+            />
+            <InputField
+              label="내용"
+              Input={
+                <Textarea
+                  className={cx('textarea')}
+                  placeholder="내용을 입력하세요."
+                  value={formData.content}
+                  onChange={(e) => onInputChange('content', e.target.value)}
+                />
+              }
+            />
+            <InputField
+              label="파일첨부"
+              Input={
+                <FileInput
+                  className={cx('file-input')}
+                  onChange={handleFileChange}
+                  multiple
+                  accept=".jpg,.jpeg,.png,.doc,.docx,.pptx,.ppt"
+                />
+              }
+            />
+            <div className={cx('notice-files-container')}>
+              {formData.existingFiles && formData.existingFiles.length > 0 && (
+                <ul className={cx('notice-file-list')}>
+                  {formData.existingFiles.map((file) => (
+                    <NoticeFileItem
+                      key={file.noticeFileId}
+                      id={file.noticeFileId}
+                      name={file.fileName}
+                      onDeleteFile={handleDeleteFile}
+                    />
+                  ))}
+                </ul>
+              )}
+              {formData.newFiles && formData.newFiles.length > 0 && (
+                <ul className={cx('notice-file-list')}>
+                  {formData.newFiles.map((file) => (
+                    <NoticeFileItem
+                      key={file.name}
+                      id={file.name}
+                      name={file.name}
+                      onDeleteFile={handleDeleteFile}
+                    />
+                  ))}
+                </ul>
+              )}
+            </div>
+          </div>
+          <Button size="small" type="submit" variant="filled">
+            공지 수정하기
+          </Button>
+        </form>
+      </div>
+
+      <NotificationModal
+        isOpen={isModalOpen}
+        onClose={handleCloseModal}
+        message="이미 추가된 파일입니다."
+      />
+    </>
+  )
+}
+
+export default AdminNoticeEditPage
diff --git a/app/admin/notices/[noticeId]/edit/types.ts b/app/admin/notices/[noticeId]/edit/types.ts
new file mode 100644
index 00000000..de2d586f
--- /dev/null
+++ b/app/admin/notices/[noticeId]/edit/types.ts
@@ -0,0 +1,5 @@
+import { APIResponseBaseModel } from '@/shared/types/response'
+
+export interface PatchNoticeResponseModel extends APIResponseBaseModel<boolean> {
+  result: string[]
+}
diff --git a/app/admin/notices/_api/delete-notice.ts b/app/admin/notices/_api/delete-notice.ts
new file mode 100644
index 00000000..bb1815ed
--- /dev/null
+++ b/app/admin/notices/_api/delete-notice.ts
@@ -0,0 +1,20 @@
+import axiosInstance from '@/shared/api/axios'
+
+import { DeleteNoticeResponeseModel } from '../types'
+
+const deleteNotice = async (noticeId: number) => {
+  try {
+    const res = await axiosInstance.delete<DeleteNoticeResponeseModel>(
+      `/api/admin/notices/${noticeId}`
+    )
+
+    if (!res.data.isSuccess) throw new Error('Error with code' + res.data.code)
+
+    return res.data
+  } catch (err) {
+    console.error(err)
+    throw err
+  }
+}
+
+export default deleteNotice
diff --git a/app/admin/notices/_hook/query/get-admin-notices.ts b/app/admin/notices/_hook/query/get-admin-notices.ts
new file mode 100644
index 00000000..1fd8516b
--- /dev/null
+++ b/app/admin/notices/_hook/query/get-admin-notices.ts
@@ -0,0 +1,18 @@
+import getNotices from '@/app/(landing)/notices/_api/get-notice'
+import { useQuery } from '@tanstack/react-query'
+
+import { QUERY_KEY } from '@/shared/constants/query-key'
+
+interface Props {
+  page?: number
+  size?: number
+}
+
+const useAdminNotices = ({ page, size }: Props = {}) => {
+  return useQuery({
+    queryKey: [QUERY_KEY.NOTICES, page, size],
+    queryFn: () => getNotices({ page, size }),
+  })
+}
+
+export default useAdminNotices
diff --git a/app/admin/notices/_hook/query/use-delete-notice.ts b/app/admin/notices/_hook/query/use-delete-notice.ts
new file mode 100644
index 00000000..14012b91
--- /dev/null
+++ b/app/admin/notices/_hook/query/use-delete-notice.ts
@@ -0,0 +1,18 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query'
+
+import { QUERY_KEY } from '@/shared/constants/query-key'
+
+import deleteNotice from '../../_api/delete-notice'
+
+const useDeleteNotice = (noticeId: number) => {
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    mutationFn: () => deleteNotice(noticeId),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: [QUERY_KEY.NOTICES] })
+    },
+  })
+}
+
+export default useDeleteNotice
diff --git a/app/admin/notices/_hook/use-admin-notice-page.ts b/app/admin/notices/_hook/use-admin-notice-page.ts
new file mode 100644
index 00000000..adda38d7
--- /dev/null
+++ b/app/admin/notices/_hook/use-admin-notice-page.ts
@@ -0,0 +1,12 @@
+import { useState } from 'react'
+
+const useAdminNoticePage = () => {
+  const [currentPage, setCurrentPage] = useState(1)
+
+  return {
+    currentPage,
+    setCurrentPage,
+  }
+}
+
+export default useAdminNoticePage
diff --git a/app/admin/notices/_hook/use-file-handler.ts b/app/admin/notices/_hook/use-file-handler.ts
new file mode 100644
index 00000000..752438fa
--- /dev/null
+++ b/app/admin/notices/_hook/use-file-handler.ts
@@ -0,0 +1,67 @@
+'use client'
+
+import { SetStateAction, useState } from 'react'
+
+import { NoticeFileModel, NoticeFormModel } from '../types'
+
+interface UseFileHandlerProps {
+  formData: NoticeFormModel
+  setFormData: React.Dispatch<SetStateAction<NoticeFormModel>>
+  onInputChange: (name: keyof NoticeFormModel, value: string | File[] | NoticeFileModel[]) => void
+}
+
+const useFileHandler = ({ formData, setFormData, onInputChange }: UseFileHandlerProps) => {
+  const [isModalOpen, setIsModalOpen] = useState(false)
+
+  const hasDuplicateFile = (file: File) => {
+    return (
+      formData.existingFiles?.some((existingFile) => existingFile.fileName === file.name) ||
+      formData.newFiles?.some((newFile) => newFile.name === file.name)
+    )
+  }
+
+  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const selectedFiles = Array.from(e.target.files || [])
+
+    const uniqueFiles = selectedFiles.filter((file) => !hasDuplicateFile(file))
+    const duplicateFiles = selectedFiles.filter((file) => hasDuplicateFile(file))
+
+    if (duplicateFiles.length > 0) {
+      setIsModalOpen(true)
+      return
+    }
+
+    if (uniqueFiles.length > 0) {
+      onInputChange('newFiles', [...(formData.newFiles || []), ...uniqueFiles])
+    }
+
+    e.target.value = ''
+  }
+
+  const handleDeleteFile = (id: number | string) => {
+    if (typeof id === 'number') {
+      setFormData((prev) => ({
+        ...prev,
+        existingFiles: prev.existingFiles?.filter((file) => file.noticeFileId !== id),
+      }))
+    } else {
+      setFormData((prev) => ({
+        ...prev,
+        newFiles: prev.newFiles?.filter((file) => file.name !== id),
+      }))
+    }
+  }
+
+  const handleCloseModal = () => {
+    setIsModalOpen(false)
+  }
+
+  return {
+    handleFileChange,
+    handleDeleteFile,
+    handleCloseModal,
+    isModalOpen,
+  }
+}
+
+export default useFileHandler
diff --git a/app/admin/notices/_ui/admin-notice-table/index.tsx b/app/admin/notices/_ui/admin-notice-table/index.tsx
new file mode 100644
index 00000000..f1a52cb0
--- /dev/null
+++ b/app/admin/notices/_ui/admin-notice-table/index.tsx
@@ -0,0 +1,70 @@
+'use client'
+
+import Link from 'next/link'
+
+import AdminContentsHeader from '@/app/admin/_ui/admin-header'
+import classNames from 'classnames/bind'
+
+import { Button } from '@/shared/ui/button'
+import Pagination from '@/shared/ui/pagination'
+import VerticalTable from '@/shared/ui/table/vertical'
+import { calculateTableNumber } from '@/shared/utils/table'
+
+import useAdminNotices from '../../_hook/query/get-admin-notices'
+import useAdminNoticePage from '../../_hook/use-admin-notice-page'
+import NoticeDeleteButton from '../button/notice-delete-button'
+import NoticeEditButton from '../button/notice-edit-button'
+import styles from './styles.module.scss'
+
+const cx = classNames.bind(styles)
+
+const COUNT_PER_PAGE = 10
+
+const AdminNoticeTable = () => {
+  const { currentPage, setCurrentPage } = useAdminNoticePage()
+  const { data, isLoading } = useAdminNotices()
+
+  if (isLoading || !data) {
+    return <VerticalTable.Skeleton tableHead={['No.', '제목', '내용', '작성일', '']} />
+  }
+
+  const tableBody =
+    data?.content.map((data, idx) => [
+      calculateTableNumber({ page: currentPage, idx, countPerPage: COUNT_PER_PAGE }),
+      <Link href={`/notices/${data.noticeId}/detail`} key={data.noticeId}>
+        {data.title}
+      </Link>,
+      data.content.slice(0, 15),
+      data.createdAt,
+      <Button.ButtonGroup key={data.noticeId}>
+        <NoticeEditButton noticeId={data.noticeId} />
+        <NoticeDeleteButton noticeId={data.noticeId} />
+      </Button.ButtonGroup>,
+    ]) || []
+
+  return (
+    <>
+      <AdminContentsHeader
+        Left={
+          <span>
+            총 <span className={cx('colored')}>{data?.totalElements}</span>개
+          </span>
+        }
+        className={cx('header')}
+      />
+      <VerticalTable
+        tableHead={['No.', '제목', '내용', '작성일', '']}
+        tableBody={tableBody}
+        countPerPage={COUNT_PER_PAGE}
+        currentPage={1}
+      />
+      <Pagination
+        currentPage={currentPage}
+        maxPage={data?.totalPages}
+        onPageChange={setCurrentPage}
+      />
+    </>
+  )
+}
+
+export default AdminNoticeTable
diff --git a/app/admin/notices/_ui/admin-notice-table/styles.module.scss b/app/admin/notices/_ui/admin-notice-table/styles.module.scss
new file mode 100644
index 00000000..21e24918
--- /dev/null
+++ b/app/admin/notices/_ui/admin-notice-table/styles.module.scss
@@ -0,0 +1,21 @@
+.container {
+  position: relative;
+  padding: 0 25px 37px;
+  border-radius: 8px;
+  margin-bottom: 42px;
+  background-color: $color-white;
+}
+
+.header {
+  padding: 40px 20px 20px;
+}
+
+.colored {
+  color: $color-orange-500;
+}
+
+.button {
+  width: 74px;
+  height: 30px;
+  border: 1px solid $color-gray-300;
+}
diff --git a/app/admin/notices/_ui/button/notice-delete-button.tsx b/app/admin/notices/_ui/button/notice-delete-button.tsx
new file mode 100644
index 00000000..d6fbdb8c
--- /dev/null
+++ b/app/admin/notices/_ui/button/notice-delete-button.tsx
@@ -0,0 +1,43 @@
+'use client'
+
+import classNames from 'classnames/bind'
+
+import useModal from '@/shared/hooks/custom/use-modal'
+import { Button } from '@/shared/ui/button'
+import AlertModal from '@/shared/ui/modal/alert-modal'
+
+import useDeleteNotice from '../../_hook/query/use-delete-notice'
+import styles from './styles.module.scss'
+
+const cx = classNames.bind(styles)
+
+interface Props {
+  noticeId: number
+}
+
+const NoticeDeleteButton = ({ noticeId }: Props) => {
+  const { mutate, isPending } = useDeleteNotice(noticeId)
+  const { closeModal, isModalOpen, openModal } = useModal()
+
+  return (
+    <>
+      <Button
+        size="small"
+        onClick={openModal}
+        disabled={isPending}
+        variant="filled"
+        className={cx('button')}
+      >
+        삭제
+      </Button>
+      <AlertModal
+        message={`해당 공지를\n삭제하시겠습니까?`}
+        isModalOpen={isModalOpen}
+        onCancel={closeModal}
+        onConfirm={mutate}
+      />
+    </>
+  )
+}
+
+export default NoticeDeleteButton
diff --git a/app/admin/notices/_ui/button/notice-edit-button.tsx b/app/admin/notices/_ui/button/notice-edit-button.tsx
new file mode 100644
index 00000000..dd1643b0
--- /dev/null
+++ b/app/admin/notices/_ui/button/notice-edit-button.tsx
@@ -0,0 +1,33 @@
+'use client'
+
+import { useRouter } from 'next/navigation'
+
+import classNames from 'classnames/bind'
+
+import { Button } from '@/shared/ui/button'
+
+import styles from './styles.module.scss'
+
+const cx = classNames.bind(styles)
+
+interface Props {
+  noticeId: number
+}
+
+const NoticeEditButton = ({ noticeId }: Props) => {
+  const router = useRouter()
+
+  const goToEditPage = () => {
+    router.push(`/admin/notices/${noticeId}/edit`)
+  }
+
+  return (
+    <>
+      <Button onClick={goToEditPage} size="small" className={cx('button')}>
+        수정
+      </Button>
+    </>
+  )
+}
+
+export default NoticeEditButton
diff --git a/app/admin/notices/_ui/button/styles.module.scss b/app/admin/notices/_ui/button/styles.module.scss
new file mode 100644
index 00000000..7c9b04e0
--- /dev/null
+++ b/app/admin/notices/_ui/button/styles.module.scss
@@ -0,0 +1,6 @@
+.button {
+  width: 74px;
+  height: 30px;
+  padding: 16px 7px;
+  border: 1px solid $color-gray-300;
+}
diff --git a/app/admin/notices/_ui/notice-file-item/index.tsx b/app/admin/notices/_ui/notice-file-item/index.tsx
new file mode 100644
index 00000000..0119d2f4
--- /dev/null
+++ b/app/admin/notices/_ui/notice-file-item/index.tsx
@@ -0,0 +1,24 @@
+import classNames from 'classnames/bind'
+
+import styles from './styles.module.scss'
+
+interface Props {
+  name: string
+  id: number | string
+  onDeleteFile: (id: number | string) => void
+}
+
+const cx = classNames.bind(styles)
+
+const NoticeFileItem = ({ name, id, onDeleteFile }: Props) => {
+  return (
+    <li className={cx('container')}>
+      <span className={cx('name')}>{name}</span>
+      <button className={cx('button')} type="button" onClick={() => onDeleteFile(id)}>
+        삭제
+      </button>
+    </li>
+  )
+}
+
+export default NoticeFileItem
diff --git a/app/admin/notices/_ui/notice-file-item/styles.module.scss b/app/admin/notices/_ui/notice-file-item/styles.module.scss
new file mode 100644
index 00000000..6efe9e81
--- /dev/null
+++ b/app/admin/notices/_ui/notice-file-item/styles.module.scss
@@ -0,0 +1,12 @@
+.container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 8px;
+  padding: 0 4px;
+
+  .button {
+    color: $color-gray-800;
+    background-color: transparent;
+  }
+}
diff --git a/app/admin/notices/page.module.scss b/app/admin/notices/page.module.scss
index 02684f1a..21e24918 100644
--- a/app/admin/notices/page.module.scss
+++ b/app/admin/notices/page.module.scss
@@ -1,6 +1,6 @@
 .container {
   position: relative;
-  padding: 0 25px 37px; // table 기본 padding 때문에 20 뺌
+  padding: 0 25px 37px;
   border-radius: 8px;
   margin-bottom: 42px;
   background-color: $color-white;
diff --git a/app/admin/notices/page.tsx b/app/admin/notices/page.tsx
index 3553e0ce..540223ff 100644
--- a/app/admin/notices/page.tsx
+++ b/app/admin/notices/page.tsx
@@ -1,70 +1,20 @@
-'use client'
-
 import classNames from 'classnames/bind'
 
-import { Button } from '@/shared/ui/button'
-import Pagination from '@/shared/ui/pagination'
-import VerticalTable from '@/shared/ui/table/vertical'
 import Title from '@/shared/ui/title'
 
-import AdminContentsHeader from '../_ui/admin-header'
+import AdminNoticeTable from './_ui/admin-notice-table'
 import NoticePostButton from './_ui/notice-post-button'
 import styles from './page.module.scss'
-import { RES } from './tabledata'
 
 const cx = classNames.bind(styles)
 
-const TOTAL_NOTICE = RES.data.content.length
-
 const AdminNoticesPage = () => {
   return (
     <>
       <Title label="공지사항" style={{ margin: '80px 0 26px 12.6px' }} />
       <div className={cx('container')}>
         <NoticePostButton />
-        <AdminContentsHeader
-          Left={
-            <span>
-              총 <span className={cx('colored')}>{TOTAL_NOTICE}</span>개
-            </span>
-          }
-          className={cx('header')}
-        />
-        <VerticalTable
-          tableHead={['No.', '제목', '등록일', '작성일', '']}
-          tableBody={RES.data.content.map((d, idx) => [
-            idx + 1,
-            d.title,
-            d.publishedAt.slice(0, 10),
-            d.createdAt.slice(0, 10),
-            <Button.ButtonGroup key={d.content}>
-              {/* TODO: onclick 로직 정의 */}
-
-              <Button
-                onClick={() => {}}
-                size="small"
-                className={cx('button')}
-                style={{ padding: '16px 7px' }}
-              >
-                수정
-              </Button>
-              <Button
-                size="small"
-                onClick={() => {}}
-                variant="filled"
-                className={cx('button')}
-                style={{ padding: '16px 7px' }}
-              >
-                삭제
-              </Button>
-            </Button.ButtonGroup>,
-          ])}
-          // TODO: 실제 값으로 추가
-          countPerPage={10}
-          currentPage={1}
-        />
-        {/* TODO: 실제 값으로 추가 */}
-        <Pagination currentPage={1} maxPage={1} onPageChange={() => {}} />
+        <AdminNoticeTable />
       </div>
     </>
   )
diff --git a/app/admin/notices/post/_api/post-notice.ts b/app/admin/notices/post/_api/post-notice.ts
deleted file mode 100644
index 8b32f275..00000000
--- a/app/admin/notices/post/_api/post-notice.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import axiosInstance from '@/shared/api/axios'
-
-import { NoticeFormModel, PostNoticeResopnseModel } from '../types'
-
-const postNotice = async (formData: NoticeFormModel) => {
-  const data = new FormData()
-  data.append('title', formData.title)
-  data.append('content', formData.content)
-  formData.files.forEach((file) => data.append('files', file))
-
-  try {
-    const res = await axiosInstance.post<PostNoticeResopnseModel>('/api/admin/notices', {
-      method: 'POST',
-      body: data,
-    })
-
-    if (!res.data.isSuccess) throw new Error('Error : ' + res.data.message)
-
-    alert('공지 등록이 완료되었습니다.')
-  } catch (error) {
-    console.error(error)
-    alert('공지 등록 중 오류가 발생했습니다.')
-  }
-}
-
-export default postNotice
diff --git a/app/admin/notices/post/_hooks/query/use-post-notice.ts b/app/admin/notices/post/_hooks/query/use-post-notice.ts
new file mode 100644
index 00000000..2e5b5fa0
--- /dev/null
+++ b/app/admin/notices/post/_hooks/query/use-post-notice.ts
@@ -0,0 +1,44 @@
+import { useRouter } from 'next/navigation'
+
+import { useMutation, useQueryClient } from '@tanstack/react-query'
+
+import axiosInstance from '@/shared/api/axios'
+import { QUERY_KEY } from '@/shared/constants/query-key'
+import uploadFilesWithPresignedUrl from '@/shared/utils/upload-files-with-presigned-url'
+
+import { NoticeFormModel } from '../../../types'
+import { PostNoticeResopnseModel } from '../../types'
+
+const usePostNotice = () => {
+  const router = useRouter()
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    mutationFn: async (formData: NoticeFormModel) => {
+      const uploadResponse = await axiosInstance.post<PostNoticeResopnseModel>(
+        '/api/admin/notices',
+        {
+          title: formData.title,
+          content: formData.content,
+          filePaths: formData?.newFiles?.map((file) => file.name) ?? [],
+          sizes: formData?.newFiles?.map((file) => file.size) ?? [],
+        }
+      )
+
+      const { newFiles } = formData
+      if (!newFiles) return
+
+      const presignedUrls = uploadResponse.data.result
+
+      await uploadFilesWithPresignedUrl(newFiles, presignedUrls)
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: [QUERY_KEY.NOTICES],
+      })
+      router.replace('/admin/notices')
+    },
+  })
+}
+
+export default usePostNotice
diff --git a/app/admin/notices/post/_hooks/use-notice-form.ts b/app/admin/notices/post/_hooks/use-notice-form.ts
index f169e3d0..0d375652 100644
--- a/app/admin/notices/post/_hooks/use-notice-form.ts
+++ b/app/admin/notices/post/_hooks/use-notice-form.ts
@@ -1,15 +1,21 @@
 import { useState } from 'react'
 
-import { NoticeFormModel } from '../types'
+import { NoticeFileModel, NoticeFormModel } from '../../types'
 
-const useNoticeForm = () => {
-  const [formData, setFormData] = useState<NoticeFormModel>({
+const useNoticeForm = (
+  initialValue = {
     title: '',
     content: '',
-    files: [],
-  })
+    existingFiles: [],
+    newFiles: [],
+  }
+) => {
+  const [formData, setFormData] = useState<NoticeFormModel>(initialValue)
 
-  const onInputChange = (name: keyof NoticeFormModel, value: string | File[]) => {
+  const onInputChange = (
+    name: keyof NoticeFormModel,
+    value: string | File[] | NoticeFileModel[]
+  ) => {
     setFormData((prev) => ({
       ...prev,
       [name]: value,
@@ -18,6 +24,7 @@ const useNoticeForm = () => {
 
   return {
     formData,
+    setFormData,
     onInputChange,
   }
 }
diff --git a/app/admin/notices/post/_hooks/use-notice-post.ts b/app/admin/notices/post/_hooks/use-notice-post.ts
deleted file mode 100644
index 76dc5bca..00000000
--- a/app/admin/notices/post/_hooks/use-notice-post.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { useMutation, useQueryClient } from '@tanstack/react-query'
-
-import postNotice from '../_api/post-notice'
-import { NoticeFormModel } from '../types'
-
-const usePostNotice = (formData: NoticeFormModel) => {
-  const queryClient = useQueryClient()
-
-  return useMutation({
-    mutationFn: () => postNotice(formData),
-    onSuccess: () => {
-      queryClient.invalidateQueries({
-        queryKey: ['notices'],
-      })
-    },
-    onError: (err) => {
-      console.error('Error : ', err)
-    },
-  })
-}
-
-export default usePostNotice
diff --git a/app/admin/notices/post/page.module.scss b/app/admin/notices/post/page.module.scss
index 59d57426..7691081b 100644
--- a/app/admin/notices/post/page.module.scss
+++ b/app/admin/notices/post/page.module.scss
@@ -19,7 +19,11 @@
   gap: 30px;
 }
 
-.textarea {
+.file-input {
+  width: 100%;
+}
+
+.content {
   height: 420px;
 
   &::placeholder {
@@ -32,3 +36,11 @@
   height: 30px;
   border: 1px solid $color-gray-300;
 }
+
+.notice-file-list {
+  @include typo-b3;
+  width: 640px;
+  margin-left: auto;
+  margin-top: -28px;
+  font-weight: 500;
+}
diff --git a/app/admin/notices/post/page.tsx b/app/admin/notices/post/page.tsx
index 25180303..1369fb6d 100644
--- a/app/admin/notices/post/page.tsx
+++ b/app/admin/notices/post/page.tsx
@@ -4,21 +4,29 @@ import classNames from 'classnames/bind'
 
 import { Button } from '@/shared/ui/button'
 import BackHeader from '@/shared/ui/header/back-header'
-import { Input } from '@/shared/ui/input'
-import { Textarea } from '@/shared/ui/textarea'
+import Input from '@/shared/ui/input'
+import NotificationModal from '@/shared/ui/modal/notification-modal'
+import Textarea from '@/shared/ui/textarea'
 import Title from '@/shared/ui/title'
 
 import FileInput from '../../_ui/file-input'
 import InputField from '../../_ui/input-field'
+import useFileHandler from '../_hook/use-file-handler'
+import NoticeFileItem from '../_ui/notice-file-item'
+import usePostNotice from './_hooks/query/use-post-notice'
 import useNoticeForm from './_hooks/use-notice-form'
-import usePostNotice from './_hooks/use-notice-post'
 import styles from './page.module.scss'
 
 const cx = classNames.bind(styles)
 
 const AdminNoticePostPage = () => {
-  const { formData, onInputChange } = useNoticeForm()
-  const { mutate: postNotice } = usePostNotice(formData)
+  const { formData, onInputChange, setFormData } = useNoticeForm()
+  const { mutate: postNotice, isPending } = usePostNotice()
+  const { handleDeleteFile, handleFileChange, isModalOpen, handleCloseModal } = useFileHandler({
+    formData,
+    onInputChange,
+    setFormData,
+  })
 
   return (
     <>
@@ -29,7 +37,7 @@ const AdminNoticePostPage = () => {
           className={cx('form')}
           onSubmit={(e) => {
             e.preventDefault()
-            postNotice()
+            postNotice(formData)
           }}
         >
           <div className={cx('input-field')}>
@@ -49,7 +57,7 @@ const AdminNoticePostPage = () => {
               label="내용"
               Input={
                 <Textarea
-                  className={cx('textarea')}
+                  className={cx('content')}
                   placeholder="내용을 입력하세요."
                   value={formData.content}
                   onChange={(e) => onInputChange('content', e.target.value)}
@@ -60,15 +68,37 @@ const AdminNoticePostPage = () => {
               label="파일첨부"
               Input={
                 <FileInput
-                  onChange={(e) => onInputChange('files', Array.from(e.target.files || []))}
+                  className={cx('file-input')}
+                  onChange={handleFileChange}
+                  multiple
+                  accept=".jpg,.jpeg,.png,.doc,.docx,.pptx,.ppt"
                 />
               }
             />
+            {formData.newFiles && formData.newFiles.length > 0 && (
+              <ul className={cx('notice-file-list')}>
+                {formData.newFiles.map((file) => (
+                  <NoticeFileItem
+                    key={file.name}
+                    id={file.name}
+                    name={file.name}
+                    onDeleteFile={handleDeleteFile}
+                  />
+                ))}
+              </ul>
+            )}
           </div>
-          <Button size="small" type="submit" variant="filled">
+
+          <Button disabled={isPending} size="small" type="submit" variant="filled">
             공지 등록하기
           </Button>
         </form>
+
+        <NotificationModal
+          isOpen={isModalOpen}
+          onClose={handleCloseModal}
+          message="이미 추가된 파일입니다."
+        />
       </div>
     </>
   )
diff --git a/app/admin/notices/post/types.ts b/app/admin/notices/post/types.ts
index 205d4c6e..c7b2a212 100644
--- a/app/admin/notices/post/types.ts
+++ b/app/admin/notices/post/types.ts
@@ -1,24 +1,5 @@
 import { APIResponseBaseModel } from '@/shared/types/response'
 
-export interface NoticeFormModel {
-  title: string
-  content: string
-  files: File[]
-}
-
 export interface PostNoticeResopnseModel extends APIResponseBaseModel<boolean> {
-  data: {
-    noticeId: number
-    user: {
-      id: number
-      nickname: string
-    }
-    title: string
-    content: string
-    createdAt: string
-    publishedAt: string
-    updatedAt: string
-    createdBy: string
-    updatedBy: string
-  }
+  result: string[]
 }
diff --git a/app/admin/notices/tabledata.tsx b/app/admin/notices/tabledata.tsx
deleted file mode 100644
index c474022d..00000000
--- a/app/admin/notices/tabledata.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-export const RES = {
-  isSuccess: true,
-  message: '공지사항 목록 조회 성공',
-  data: {
-    content: [
-      {
-        noticeId: 1,
-        user: {
-          id: 2,
-          nickname: '관리자',
-        },
-        title: '서비스 점검 안내', //공지사항 제목
-        content: '점검예정.', //공지사항 내용
-        createdAt: '2024-01-01 12:00:00', // 등록일
-        publishedAt: '2024-11-15T09:00:00', //공개일
-        createdBy: '관리자', // 등록자
-      },
-      {
-        noticeId: 2,
-        user: {
-          id: 3,
-          nickname: '관리자',
-        },
-        title: '업데이트 안내',
-        content: '이번 업데이트 내용은',
-        nickname: '관리자',
-        createdAt: '2024-01-02 12:00:00',
-        publishedAt: '2024-11-15T09:00:00',
-        createdBy: '관리자',
-      },
-    ],
-    pageable: {
-      pageNumber: 0,
-      pageSize: 20,
-    },
-    totalPages: 5,
-    totalElements: 50,
-  },
-}
diff --git a/app/admin/notices/types.ts b/app/admin/notices/types.ts
new file mode 100644
index 00000000..9057c1c0
--- /dev/null
+++ b/app/admin/notices/types.ts
@@ -0,0 +1,16 @@
+import { APIResponseBaseModel } from '@/shared/types/response'
+
+// eslint-disable-next-line
+export interface DeleteNoticeResponeseModel extends APIResponseBaseModel<boolean> {}
+
+export interface NoticeFormModel {
+  title: string
+  content: string
+  existingFiles?: NoticeFileModel[]
+  newFiles?: File[]
+}
+
+export interface NoticeFileModel {
+  fileName: string
+  noticeFileId: number
+}
diff --git a/app/admin/questions/_api/delete-admin-question.ts b/app/admin/questions/_api/delete-admin-question.ts
new file mode 100644
index 00000000..d97adc99
--- /dev/null
+++ b/app/admin/questions/_api/delete-admin-question.ts
@@ -0,0 +1,21 @@
+import axiosInstance from '@/shared/api/axios'
+
+import { AdminQuestionsResponseModel } from '../types'
+
+interface ArgModel {
+  strategyId: number
+  questionId: number
+}
+const deleteAdminQuestion = async ({ strategyId, questionId }: ArgModel) => {
+  try {
+    const res = await axiosInstance.delete<AdminQuestionsResponseModel>(
+      `/api/admin/strategies/${strategyId}/questions/${questionId}`
+    )
+    if (!res.data.isSuccess) throw new Error('Error with code' + res.data.code)
+    return res.data.result
+  } catch (err) {
+    console.error(err)
+    throw err
+  }
+}
+export default deleteAdminQuestion
diff --git a/app/admin/questions/_api/get-admin-questions.ts b/app/admin/questions/_api/get-admin-questions.ts
new file mode 100644
index 00000000..7ff3fedc
--- /dev/null
+++ b/app/admin/questions/_api/get-admin-questions.ts
@@ -0,0 +1,41 @@
+import axiosInstance from '@/shared/api/axios'
+import { QuestionSearchConditionType, QuestionStateTapType } from '@/shared/types/questions'
+
+import { AdminQuestionsResponseModel } from '../types'
+
+interface ArgModel {
+  keyword: string | null
+  searchCondition: QuestionSearchConditionType
+  stateCondition: QuestionStateTapType
+  page?: number
+  size?: number
+}
+
+const getAdminQuestions = async ({
+  keyword = null,
+  searchCondition,
+  stateCondition,
+  page = 1,
+  size = 10,
+}: ArgModel) => {
+  try {
+    const res = await axiosInstance<AdminQuestionsResponseModel>('/api/admin/questions', {
+      params: {
+        keyword,
+        searchCondition,
+        stateCondition,
+        page,
+        size,
+      },
+    })
+
+    if (!res.data.isSuccess) throw new Error('Error with code' + res.data.code)
+
+    return res.data.result
+  } catch (err) {
+    console.error(err)
+    throw err
+  }
+}
+
+export default getAdminQuestions
diff --git a/app/admin/questions/_api/set-admin-question-table-body.tsx b/app/admin/questions/_api/set-admin-question-table-body.tsx
new file mode 100644
index 00000000..46fabb35
--- /dev/null
+++ b/app/admin/questions/_api/set-admin-question-table-body.tsx
@@ -0,0 +1,42 @@
+import { PATH } from '@/shared/constants/path'
+import { LinkButton } from '@/shared/ui/link-button'
+import { calculateTableNumber } from '@/shared/utils/table'
+
+import AdminQuestionDeleteButton from '../_ui/admin-question-delete-button'
+import AdminQuestionStateBox from '../_ui/admin-question-state-box'
+import { AdminQuestionsResponseModel } from '../types'
+
+interface Props {
+  data: AdminQuestionsResponseModel['result']['content']
+  page: number
+  countPerPage: number
+}
+
+const setAdminQuestionTableBody = ({ data, page, countPerPage }: Props) =>
+  data.map((data, idx) => {
+    return [
+      calculateTableNumber({ page, idx, countPerPage }),
+      data.title,
+      data.strategy.name,
+      data.trader.userName,
+      data.investor.userName,
+      <AdminQuestionStateBox questionState={data.stateCondition} key={data.questionId} />,
+      <div style={{ display: 'flex', gap: '24px' }} key={data.questionId}>
+        <LinkButton
+          href={`${PATH.MY_QUESTIONS}/${data.questionId}`}
+          size="small"
+          style={{
+            width: 'fit-content',
+            height: '30px',
+            padding: '7px 16px',
+            borderRadius: '16px',
+          }}
+        >
+          상세보기
+        </LinkButton>
+        <AdminQuestionDeleteButton questionId={data.questionId} strategyId={data.strategy.id} />
+      </div>,
+    ]
+  })
+
+export default setAdminQuestionTableBody
diff --git a/app/admin/questions/_hooks/query/use-admin-questions.ts b/app/admin/questions/_hooks/query/use-admin-questions.ts
new file mode 100644
index 00000000..6ed6ecfe
--- /dev/null
+++ b/app/admin/questions/_hooks/query/use-admin-questions.ts
@@ -0,0 +1,36 @@
+import { useQuery } from '@tanstack/react-query'
+
+import { QUERY_KEY } from '@/shared/constants/query-key'
+import { QuestionSearchConditionType, QuestionStateTapType } from '@/shared/types/questions'
+
+import getAdminQuestions from '../../_api/get-admin-questions'
+
+interface ArgModel {
+  keyword?: string | null
+  searchCondition: QuestionSearchConditionType
+  stateCondition: QuestionStateTapType
+  page?: number
+  size?: number
+}
+
+const useAdminQuestions = ({
+  keyword = null,
+  searchCondition,
+  stateCondition,
+  page = 0,
+  size = 10,
+}: ArgModel) => {
+  return useQuery({
+    queryKey: [QUERY_KEY.ADMIN_QUESTIONS, [keyword, searchCondition, stateCondition, page, size]],
+    queryFn: () =>
+      getAdminQuestions({
+        keyword,
+        searchCondition,
+        stateCondition,
+        page,
+        size,
+      }),
+  })
+}
+
+export default useAdminQuestions
diff --git a/app/admin/questions/_hooks/query/use-delete-question.ts b/app/admin/questions/_hooks/query/use-delete-question.ts
new file mode 100644
index 00000000..3416c1e0
--- /dev/null
+++ b/app/admin/questions/_hooks/query/use-delete-question.ts
@@ -0,0 +1,20 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query'
+
+import { QUERY_KEY } from '@/shared/constants/query-key'
+
+import deleteAdminQuestion from '../../_api/delete-admin-question'
+
+interface ArgModel {
+  strategyId: number
+  questionId: number
+}
+const useDeleteQuestion = ({ strategyId, questionId }: ArgModel) => {
+  const queryClient = useQueryClient()
+  return useMutation({
+    mutationFn: () => deleteAdminQuestion({ strategyId, questionId }),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: [QUERY_KEY.ADMIN_QUESTIONS] })
+    },
+  })
+}
+export default useDeleteQuestion
diff --git a/app/admin/questions/_hooks/use-admin-questions-page.ts b/app/admin/questions/_hooks/use-admin-questions-page.ts
new file mode 100644
index 00000000..123f74aa
--- /dev/null
+++ b/app/admin/questions/_hooks/use-admin-questions-page.ts
@@ -0,0 +1,55 @@
+import { useState } from 'react'
+
+import { QuestionSearchConditionType, QuestionStateTapType } from '@/shared/types/questions'
+
+import { searchConditions, tabs } from '../constants'
+
+const useAdminQuestionsPage = () => {
+  const [activeTab, setActiveTab] = useState(tabs[0].id)
+  const [keyword, setKeyword] = useState('')
+  const [stateCondition, setStateCondition] = useState<QuestionStateTapType>('ALL')
+  const [searchCondition, setSearchCondition] = useState<QuestionSearchConditionType>('TITLE')
+  const initialSearchParams = {
+    keyword: '',
+    searchCondition,
+  }
+  const [searchParams, setSearchParams] = useState(initialSearchParams)
+
+  const initializeSearchParams = () => {
+    setKeyword('')
+    setSearchCondition('TITLE')
+    setSearchParams(initialSearchParams)
+  }
+
+  const setConditionAndKeyword = () => {
+    setSearchParams({
+      keyword,
+      searchCondition,
+    })
+  }
+
+  const onTabChange = (id: string) => {
+    initializeSearchParams()
+    setActiveTab(id)
+    setStateCondition(id as QuestionStateTapType)
+  }
+
+  return {
+    searchConditions,
+    tabs,
+    activeTab,
+    setActiveTab,
+    keyword,
+    setKeyword,
+    stateCondition,
+    setStateCondition,
+    searchCondition,
+    searchParams,
+    setSearchCondition,
+    setConditionAndKeyword,
+    onTabChange,
+    initializeSearchParams,
+  }
+}
+
+export default useAdminQuestionsPage
diff --git a/app/admin/questions/_ui/admin-question-delete-button/index.tsx b/app/admin/questions/_ui/admin-question-delete-button/index.tsx
new file mode 100644
index 00000000..43891731
--- /dev/null
+++ b/app/admin/questions/_ui/admin-question-delete-button/index.tsx
@@ -0,0 +1,44 @@
+'use client'
+
+import classNames from 'classnames/bind'
+
+import useModal from '@/shared/hooks/custom/use-modal'
+import { Button } from '@/shared/ui/button'
+import AlertModal from '@/shared/ui/modal/alert-modal'
+
+import useDeleteQuestion from '../../_hooks/query/use-delete-question'
+import styles from './styles.module.scss'
+
+const cx = classNames.bind(styles)
+interface Props {
+  questionId: number
+  strategyId: number
+}
+const AdminQuestionDeleteButton = ({ questionId, strategyId }: Props) => {
+  const { mutate, isPending } = useDeleteQuestion({ strategyId, questionId })
+  const { closeModal, isModalOpen, openModal } = useModal()
+
+  return (
+    <>
+      <Button
+        variant="filled"
+        onClick={openModal}
+        size="small"
+        style={{ padding: '7px 16px' }}
+        className={cx('button')}
+      >
+        삭제
+      </Button>
+      <AlertModal
+        message={`해당 문의내역을\n삭제하시겠습니까?`}
+        isModalOpen={isModalOpen}
+        disabled={isPending}
+        onCancel={closeModal}
+        onConfirm={() => {
+          mutate()
+        }}
+      />
+    </>
+  )
+}
+export default AdminQuestionDeleteButton
diff --git a/app/admin/questions/_ui/admin-question-delete-button/styles.module.scss b/app/admin/questions/_ui/admin-question-delete-button/styles.module.scss
new file mode 100644
index 00000000..c54954dc
--- /dev/null
+++ b/app/admin/questions/_ui/admin-question-delete-button/styles.module.scss
@@ -0,0 +1,6 @@
+.button {
+  width: fit-content;
+  height: 30px;
+  padding: 7px 16px;
+  border-radius: 16px;
+}
diff --git a/app/admin/questions/_ui/admin-question-state-box/index.tsx b/app/admin/questions/_ui/admin-question-state-box/index.tsx
new file mode 100644
index 00000000..fa42e5c7
--- /dev/null
+++ b/app/admin/questions/_ui/admin-question-state-box/index.tsx
@@ -0,0 +1,29 @@
+'use client'
+
+import classNames from 'classnames/bind'
+
+import { QuestionStateConditionType } from '@/shared/types/questions'
+
+import styles from './styles.module.scss'
+
+const cx = classNames.bind(styles)
+
+interface Props {
+  questionState: QuestionStateConditionType
+}
+
+const AdminQuestionStateBox = ({ questionState }: Props) => {
+  return (
+    <div
+      className={cx(
+        'container',
+        { waiting: questionState === 'WAITING' },
+        { completed: questionState === 'COMPLETED' }
+      )}
+    >
+      {questionState === 'COMPLETED' ? '답변완료' : '답변대기'}
+    </div>
+  )
+}
+
+export default AdminQuestionStateBox
diff --git a/app/admin/questions/_ui/admin-question-state-box/styles.module.scss b/app/admin/questions/_ui/admin-question-state-box/styles.module.scss
new file mode 100644
index 00000000..de50de4a
--- /dev/null
+++ b/app/admin/questions/_ui/admin-question-state-box/styles.module.scss
@@ -0,0 +1,21 @@
+$color-waiting: $color-orange-600;
+$color-completed: $color-indigo;
+
+.container {
+  width: fit-content;
+  text-align: center;
+  padding: 7px 16px;
+  border-radius: 4px;
+  border: 1px solid;
+  @include typo-c1;
+
+  &.waiting {
+    color: $color-waiting;
+    border-color: $color-waiting;
+  }
+
+  &.completed {
+    color: $color-completed;
+    border-color: $color-completed;
+  }
+}
diff --git a/app/admin/questions/constants.ts b/app/admin/questions/constants.ts
new file mode 100644
index 00000000..2b6c6059
--- /dev/null
+++ b/app/admin/questions/constants.ts
@@ -0,0 +1,17 @@
+import { DropdownOptionModel } from '@/shared/ui/dropdown/types'
+import { TabItemModel } from '@/shared/ui/tabs'
+
+export const searchConditions: DropdownOptionModel[] = [
+  { label: '제목', value: 'TITLE' },
+  { label: '내용', value: 'CONTENT' },
+  { label: '제목 + 내용', value: 'TITLE_OR_CONTENT' },
+  { label: '트레이더명', value: 'TRADER_NAME' },
+  { label: '투자자명', value: 'INVESTOR_NAME' },
+  { label: '전략명', value: 'STRATEGY_NAME' },
+]
+
+export const tabs: Array<TabItemModel> = [
+  { label: '모든 질문', id: 'ALL' },
+  { label: '답변대기', id: 'WAITING' },
+  { label: '답변완료', id: 'COMPLETED' },
+]
diff --git a/app/admin/questions/page.module.scss b/app/admin/questions/page.module.scss
new file mode 100644
index 00000000..0038b2d7
--- /dev/null
+++ b/app/admin/questions/page.module.scss
@@ -0,0 +1,19 @@
+.title {
+  margin: $header-height 0 26px 13px;
+}
+
+.container {
+  padding: 42px 45px 37px;
+  border-radius: 8px;
+  margin-bottom: 42px;
+  background-color: $color-white;
+}
+
+.color-primary-500 {
+  color: $color-orange-500;
+}
+
+.condition-search {
+  display: flex;
+  gap: 24px;
+}
diff --git a/app/admin/questions/page.tsx b/app/admin/questions/page.tsx
index 7fbeedf7..4175337d 100644
--- a/app/admin/questions/page.tsx
+++ b/app/admin/questions/page.tsx
@@ -1,5 +1,107 @@
+'use client'
+
+import classNames from 'classnames/bind'
+
+import { PATH } from '@/shared/constants/path'
+import { usePagination } from '@/shared/hooks/custom/use-pagination'
+import { QuestionSearchConditionType } from '@/shared/types/questions'
+import Pagination from '@/shared/ui/pagination'
+import SearchInput from '@/shared/ui/search-input'
+import Select from '@/shared/ui/select'
+import VerticalTable from '@/shared/ui/table/vertical'
+import Tabs from '@/shared/ui/tabs'
+import Title from '@/shared/ui/title'
+
+import AdminContentsHeader from '../_ui/admin-header'
+import setAdminQuestionTableBody from './_api/set-admin-question-table-body'
+import useAdminQuestions from './_hooks/query/use-admin-questions'
+import useAdminQuestionsPage from './_hooks/use-admin-questions-page'
+import styles from './page.module.scss'
+
+const cx = classNames.bind(styles)
+
 const AdminQuestionsPage = () => {
-  return <></>
+  const {
+    searchConditions,
+    tabs,
+    activeTab,
+    keyword,
+    setKeyword,
+    searchCondition,
+    setSearchCondition,
+    stateCondition,
+    setConditionAndKeyword,
+    searchParams,
+    onTabChange,
+  } = useAdminQuestionsPage()
+
+  const { isLoading, data, refetch } = useAdminQuestions({
+    ...searchParams,
+    stateCondition,
+  })
+
+  const { page, handlePageChange } = usePagination({
+    basePath: PATH.ADMIN_QUESTIONS,
+    pageSize: data?.size || 10,
+  })
+
+  if (isLoading || !data) return null
+
+  return (
+    <>
+      <Title label="문의 내역" className={cx('title')} />
+      <section className={cx('container')}>
+        <Tabs tabs={tabs} activeTab={activeTab} onTabChange={onTabChange} />
+        <AdminContentsHeader
+          Left={
+            <span>
+              총 <span className={cx('color-primary-500')}>{data?.totalElements}</span>개
+            </span>
+          }
+          Right={
+            <div className={cx('condition-search')}>
+              <Select
+                size="small"
+                options={searchConditions.map((option) => ({
+                  label: option.label,
+                  value: option.value,
+                }))}
+                value={searchCondition}
+                onChange={(v) => {
+                  setSearchCondition(v as QuestionSearchConditionType)
+                }}
+              />
+              <SearchInput
+                value={keyword}
+                onChange={(e) => setKeyword(e.target.value)}
+                onSearchIconClick={() => {
+                  setConditionAndKeyword()
+                  refetch()
+                }}
+              />
+            </div>
+          }
+        />
+        <VerticalTable
+          tableHead={['No.', '제목', '전략명', '트레이더', '질문자', '상태', '']}
+          tableBody={setAdminQuestionTableBody({
+            data: data.content,
+            page: data.page,
+            countPerPage: data.size,
+          })}
+          countPerPage={data.size}
+          currentPage={1}
+        />
+        {data.content.length > 0 && (
+          <Pagination
+            currentPage={page}
+            maxPage={data.totalPages}
+            onPageChange={handlePageChange}
+          />
+        )}
+      </section>
+    </>
+  )
 }
 
 export default AdminQuestionsPage
diff --git a/app/admin/questions/types.ts b/app/admin/questions/types.ts
new file mode 100644
index 00000000..630d6639
--- /dev/null
+++ b/app/admin/questions/types.ts
@@ -0,0 +1,34 @@
+import { QuestionStateConditionType } from '@/shared/types/questions'
+import { APIResponseBaseModel } from '@/shared/types/response'
+
+export interface AdminQuestionsResponseModel extends APIResponseBaseModel<boolean> {
+  result: {
+    content: Array<{
+      strategy: {
+        id: number
+        name: string
+      }
+      investor: {
+        id: number
+        userName: string
+        profileImageUrl: string
+      }
+      trader: {
+        id: number
+        userName: string
+        profileImageUrl: string
+      }
+      questionId: number
+      title: string
+      questionContent: string
+      stateCondition: QuestionStateConditionType
+      createdAt: string
+    }>
+    page: number
+    size: number
+    totalElements: number
+    totalPages: number
+    first: boolean
+    last: boolean
+  }
+}
diff --git a/app/admin/strategies/_api/get-strategies.ts b/app/admin/strategies/_api/get-strategies.ts
index 4fb6eaa0..bdc51d73 100644
--- a/app/admin/strategies/_api/get-strategies.ts
+++ b/app/admin/strategies/_api/get-strategies.ts
@@ -10,23 +10,17 @@ interface ArgModel {
 }
 
 const getStrategies = async ({ searchWord, isApproved, page = 0, size = 10 }: ArgModel) => {
-  try {
-    const res = await axiosInstance<StrategiesResponseModel>('/api/admin/strategies', {
-      params: {
-        searchWord,
-        isApproved,
-        page,
-        size,
-      },
-    })
+  const res = await axiosInstance<StrategiesResponseModel>('/api/admin/strategies', {
+    params: {
+      searchWord,
+      isApproved,
+      page,
+      size,
+    },
+  })
 
-    if (!res.data.isSuccess) throw new Error(res.data.message)
-
-    return res.data.result
-  } catch (err) {
-    console.log('Error : ' + err)
-    throw err
-  }
+  if (!res.data.isSuccess) throw new Error(res.data.message)
+  return res.data.result
 }
 
 export default getStrategies
diff --git a/app/admin/strategies/_api/patch-strategy-approval.ts b/app/admin/strategies/_api/patch-strategy-approval.ts
index df60bb65..600df408 100644
--- a/app/admin/strategies/_api/patch-strategy-approval.ts
+++ b/app/admin/strategies/_api/patch-strategy-approval.ts
@@ -3,24 +3,18 @@ import axiosInstance from '@/shared/api/axios'
 import { StrategiesResponseModel } from '../types'
 
 const patchStrategyApproval = async (strategyId: number, isApproved: 'APPROVED' | 'DENY') => {
-  try {
-    const res = await axiosInstance.patch<StrategiesResponseModel>(
-      `/api/admin/strategies/${strategyId}`,
-      null,
-      {
-        params: {
-          isApproved,
-        },
-      }
-    )
+  const res = await axiosInstance.patch<StrategiesResponseModel>(
+    `/api/admin/strategies/${strategyId}`,
+    null,
+    {
+      params: {
+        isApproved,
+      },
+    }
+  )
 
-    if (!res.data.isSuccess) throw new Error(res.data.message)
-
-    return res.data.result
-  } catch (err) {
-    console.log('Error : ' + err)
-    throw err
-  }
+  if (!res.data.isSuccess) throw new Error(res.data.message)
+  return res.data.result
 }
 
 export default patchStrategyApproval
diff --git a/app/admin/strategies/_api/patch-strategy-role.ts b/app/admin/strategies/_api/patch-strategy-role.ts
new file mode 100644
index 00000000..032b2279
--- /dev/null
+++ b/app/admin/strategies/_api/patch-strategy-role.ts
@@ -0,0 +1,26 @@
+import axiosInstance from '@/shared/api/axios'
+
+import { StrategiesPatchResponseModel, StrategiesPublicStateType } from '../types'
+
+const patchAdminStrategyPublic = async (
+  strategyId: number,
+  isPublic: StrategiesPublicStateType
+) => {
+  try {
+    const res = await axiosInstance.patch<StrategiesPatchResponseModel>(
+      `/api/my-strategies/${strategyId}/visibility`,
+      {
+        isPublic: isPublic === 'PUBLIC' ? true : false,
+      }
+    )
+
+    if (!res.data.isSuccess) throw new Error('Error with code' + res.data.code)
+
+    return res.data
+  } catch (err) {
+    console.error(err)
+    throw err
+  }
+}
+
+export default patchAdminStrategyPublic
diff --git a/app/admin/strategies/_api/set-admin-strategies-table-body.tsx b/app/admin/strategies/_api/set-admin-strategies-table-body.tsx
index f28c4ba8..4e94008e 100644
--- a/app/admin/strategies/_api/set-admin-strategies-table-body.tsx
+++ b/app/admin/strategies/_api/set-admin-strategies-table-body.tsx
@@ -1,19 +1,36 @@
+import { Button } from '@/shared/ui/button'
+import { formatDate } from '@/shared/utils/format'
+import { calculateTableNumber } from '@/shared/utils/table'
+
 import AdminStrategiesApproveTd from '../_ui/admin-strategies-approve-td'
+import StrategyDeleteButton from '../_ui/button/strategy-delete-button copy'
+import StrategyEditButton from '../_ui/button/strategy-edit-button'
+import PublicSelect from '../_ui/public-select'
 import { StrategiesResponseModel } from '../types'
 
-const setAdminStrategiesTableBody = (data: StrategiesResponseModel['result']['content']) =>
+interface Props {
+  data: StrategiesResponseModel['result']['content']
+  page: number
+  countPerPage: number
+}
+
+const setAdminStrategiesTableBody = ({ data, page, countPerPage }: Props) =>
   data.map((data, idx) => {
     return [
-      idx + 1,
-      data.createAt,
+      calculateTableNumber({ page, idx, countPerPage }),
+      formatDate(data.createAt),
       data.strategyName,
       data.nickname,
-      data.isPublic === 'PUBLIC' ? '공개' : '비공개',
+      <PublicSelect data={data} key={data.strategyId} />,
       <AdminStrategiesApproveTd
         isApproved={data.isApproved}
         strategyId={data.strategyId}
         key={data.strategyId}
       />,
+      <Button.ButtonGroup key={data.strategyId}>
+        <StrategyEditButton strategyId={data.strategyId} />
+        <StrategyDeleteButton strategyId={data.strategyId} />
+      </Button.ButtonGroup>,
     ]
   })
 
diff --git a/app/admin/strategies/_hooks/query/use-admin-delete-strategy.ts b/app/admin/strategies/_hooks/query/use-admin-delete-strategy.ts
new file mode 100644
index 00000000..8bbf8572
--- /dev/null
+++ b/app/admin/strategies/_hooks/query/use-admin-delete-strategy.ts
@@ -0,0 +1,19 @@
+import { deleteMyStrategy } from '@/app/(dashboard)/my/_api/delete-my-strategy'
+import { useMutation, useQueryClient } from '@tanstack/react-query'
+
+import { QUERY_KEY } from '@/shared/constants/query-key'
+
+const useDeleteAdminStrategy = (strategyId: number) => {
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    mutationFn: () => deleteMyStrategy(strategyId),
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: [QUERY_KEY.ADMIN_STRATEGIES],
+      })
+    },
+  })
+}
+
+export default useDeleteAdminStrategy
diff --git a/app/admin/strategies/_hooks/query/use-patch-strategy-approval.ts b/app/admin/strategies/_hooks/query/use-patch-strategy-approval.ts
index 802389d3..e023261f 100644
--- a/app/admin/strategies/_hooks/query/use-patch-strategy-approval.ts
+++ b/app/admin/strategies/_hooks/query/use-patch-strategy-approval.ts
@@ -1,5 +1,7 @@
 import { useMutation, useQueryClient } from '@tanstack/react-query'
 
+import { QUERY_KEY } from '@/shared/constants/query-key'
+
 import patchStrategyApproval from '../../_api/patch-strategy-approval'
 
 const usePatchStrategyApproval = (strategyId: number, isApproved: 'APPROVED' | 'DENY') => {
@@ -8,7 +10,7 @@ const usePatchStrategyApproval = (strategyId: number, isApproved: 'APPROVED' | '
   return useMutation({
     mutationFn: () => patchStrategyApproval(strategyId, isApproved),
     onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['adminStrategies'] })
+      queryClient.invalidateQueries({ queryKey: [QUERY_KEY.ADMIN_STRATEGIES] })
     },
   })
 }
diff --git a/app/admin/strategies/_hooks/query/use-patch-strategy-role.ts b/app/admin/strategies/_hooks/query/use-patch-strategy-role.ts
new file mode 100644
index 00000000..ece89e7e
--- /dev/null
+++ b/app/admin/strategies/_hooks/query/use-patch-strategy-role.ts
@@ -0,0 +1,22 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query'
+
+import { QUERY_KEY } from '@/shared/constants/query-key'
+
+import patchAdminStrategyPublic from '../../_api/patch-strategy-role'
+import { StrategiesPublicStateType } from '../../types'
+
+const usePatchStrategyPublic = (strategyId: number, isPublic: StrategiesPublicStateType) => {
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    mutationFn: () => patchAdminStrategyPublic(strategyId, isPublic),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: [QUERY_KEY.ADMIN_STRATEGIES] })
+    },
+    onError: () => {
+      alert('실패했음')
+    },
+  })
+}
+
+export default usePatchStrategyPublic
diff --git a/app/admin/strategies/_hooks/query/use-strategies-data.ts b/app/admin/strategies/_hooks/query/use-strategies-data.ts
index 6d05e33f..e2de7d36 100644
--- a/app/admin/strategies/_hooks/query/use-strategies-data.ts
+++ b/app/admin/strategies/_hooks/query/use-strategies-data.ts
@@ -1,5 +1,7 @@
 import { useQuery } from '@tanstack/react-query'
 
+import { QUERY_KEY } from '@/shared/constants/query-key'
+
 import getStrategies from '../../_api/get-strategies'
 import { StrategiesApprovalStateType } from '../../types'
 
@@ -12,7 +14,7 @@ interface ArgModel {
 
 const useStrategiesData = ({ searchWord, isApproved, page, size }: ArgModel) => {
   return useQuery({
-    queryKey: ['adminStrategies', { searchWord, isApproved, page, size }],
+    queryKey: [QUERY_KEY.ADMIN_STRATEGIES, { searchWord, isApproved, page, size }],
     queryFn: () => getStrategies({ searchWord, isApproved, page, size }),
   })
 }
diff --git a/app/admin/strategies/_hooks/use-admin-strategies-page.ts b/app/admin/strategies/_hooks/use-admin-strategies-page.ts
index 14aa42e5..5273bf98 100644
--- a/app/admin/strategies/_hooks/use-admin-strategies-page.ts
+++ b/app/admin/strategies/_hooks/use-admin-strategies-page.ts
@@ -5,21 +5,24 @@ import { AdminStrategiesTapType } from '../types'
 
 const useAdminQuestionsPage = () => {
   const [activeTab, setActiveTab] = useState<AdminStrategiesTapType>('ALL')
+  const [inputValue, setInputValue] = useState('')
   const [keyword, setKeyword] = useState('')
-  const initialSearchParams = {
-    searchWord: '',
+  const [currentPage, setCurrentPage] = useState(1)
+
+  const searchParams = {
+    searchWord: keyword,
+    page: currentPage,
   }
-  const [searchParams, setSearchParams] = useState(initialSearchParams)
 
   const initializeSearchParams = () => {
+    setInputValue('')
     setKeyword('')
-    setSearchParams(initialSearchParams)
+    setCurrentPage(1)
   }
 
   const searchWithKeyword = () => {
-    setSearchParams({
-      searchWord: keyword,
-    })
+    setKeyword(inputValue)
+    setCurrentPage(1)
   }
 
   const onTabChange = (id: string) => {
@@ -31,8 +34,10 @@ const useAdminQuestionsPage = () => {
     tabs,
     activeTab,
     setActiveTab,
-    keyword,
-    setKeyword,
+    inputValue,
+    setInputValue,
+    currentPage,
+    setCurrentPage,
     searchParams,
     searchWithKeyword,
     onTabChange,
diff --git a/app/admin/strategies/_ui/admin-strategies-post-button/index.tsx b/app/admin/strategies/_ui/admin-strategies-post-button/index.tsx
new file mode 100644
index 00000000..1af1247b
--- /dev/null
+++ b/app/admin/strategies/_ui/admin-strategies-post-button/index.tsx
@@ -0,0 +1,27 @@
+'use client'
+
+import { useRouter } from 'next/navigation'
+
+import classNames from 'classnames/bind'
+
+import { Button } from '@/shared/ui/button'
+
+import styles from './styles.module.scss'
+
+const cx = classNames.bind(styles)
+
+const AdminStrategyPostButton = () => {
+  const router = useRouter()
+
+  const onClick = () => {
+    router.push(`/my/strategies/add`)
+  }
+
+  return (
+    <Button onClick={onClick} variant="filled" size="small" className={cx('post-button')}>
+      전략 등록하기
+    </Button>
+  )
+}
+
+export default AdminStrategyPostButton
diff --git a/app/admin/strategies/_ui/admin-strategies-post-button/styles.module.scss b/app/admin/strategies/_ui/admin-strategies-post-button/styles.module.scss
new file mode 100644
index 00000000..f8fba06a
--- /dev/null
+++ b/app/admin/strategies/_ui/admin-strategies-post-button/styles.module.scss
@@ -0,0 +1,6 @@
+.post-button {
+  position: absolute;
+  top: -55px;
+  right: 0;
+  padding: 12px 24px;
+}
diff --git a/app/admin/strategies/_ui/admin-strategy-public-select.tsx b/app/admin/strategies/_ui/admin-strategy-public-select.tsx
index e4e1278f..269baae3 100644
--- a/app/admin/strategies/_ui/admin-strategy-public-select.tsx
+++ b/app/admin/strategies/_ui/admin-strategy-public-select.tsx
@@ -4,7 +4,6 @@ import { useState } from 'react'
 
 import Select from '@/shared/ui/select'
 
-// import usePatchUserRole from '../_hooks/query/use-patch-user-role'
 import { strategyPublicOptions } from '../constants'
 import { StrategiesPublicStateType, StrategiesResponseModel } from '../types'
 
@@ -16,14 +15,11 @@ const AdminStrategyPublicSelect = ({ data }: Props) => {
   const { strategyId, isPublic } = data
   const [value, setValue] = useState<StrategiesPublicStateType>(isPublic)
 
-  // const { mutate } = usePatchUserRole(strategyId, value)
-
   return (
     <Select
       value={value}
       onChange={(v) => {
         setValue(v as StrategiesPublicStateType)
-        // mutate()
       }}
       options={strategyPublicOptions}
       key={strategyId}
diff --git a/app/admin/strategies/_ui/button/strategy-delete-button copy.tsx b/app/admin/strategies/_ui/button/strategy-delete-button copy.tsx
new file mode 100644
index 00000000..3bdb7661
--- /dev/null
+++ b/app/admin/strategies/_ui/button/strategy-delete-button copy.tsx	
@@ -0,0 +1,43 @@
+'use client'
+
+import classNames from 'classnames/bind'
+
+import useModal from '@/shared/hooks/custom/use-modal'
+import { Button } from '@/shared/ui/button'
+import AlertModal from '@/shared/ui/modal/alert-modal'
+
+import useDeleteAdminStrategy from '../../_hooks/query/use-admin-delete-strategy'
+import styles from './styles.module.scss'
+
+const cx = classNames.bind(styles)
+
+interface Props {
+  strategyId: number
+}
+
+const StrategyDeleteButton = ({ strategyId }: Props) => {
+  const { mutate, isPending } = useDeleteAdminStrategy(strategyId)
+  const { closeModal, isModalOpen, openModal } = useModal()
+
+  return (
+    <>
+      <Button
+        size="small"
+        onClick={openModal}
+        disabled={isPending}
+        variant="filled"
+        className={cx('button')}
+      >
+        삭제
+      </Button>
+      <AlertModal
+        message={`해당 전략을\n삭제하시겠습니까?`}
+        isModalOpen={isModalOpen}
+        onCancel={closeModal}
+        onConfirm={mutate}
+      />
+    </>
+  )
+}
+
+export default StrategyDeleteButton
diff --git a/app/admin/strategies/_ui/button/strategy-edit-button.tsx b/app/admin/strategies/_ui/button/strategy-edit-button.tsx
new file mode 100644
index 00000000..d77441a5
--- /dev/null
+++ b/app/admin/strategies/_ui/button/strategy-edit-button.tsx
@@ -0,0 +1,32 @@
+'use client'
+
+import { useRouter } from 'next/navigation'
+
+import classNames from 'classnames/bind'
+
+import { Button } from '@/shared/ui/button'
+
+import styles from './styles.module.scss'
+
+const cx = classNames.bind(styles)
+
+interface Props {
+  strategyId: number
+}
+
+const StrategyEditButton = ({ strategyId }: Props) => {
+  const router = useRouter()
+  const onClick = () => {
+    router.push(`/my/strategies/manage/${strategyId}`)
+  }
+
+  return (
+    <>
+      <Button onClick={onClick} size="small" className={cx('button')}>
+        수정
+      </Button>
+    </>
+  )
+}
+
+export default StrategyEditButton
diff --git a/app/admin/strategies/_ui/button/styles.module.scss b/app/admin/strategies/_ui/button/styles.module.scss
new file mode 100644
index 00000000..7c9b04e0
--- /dev/null
+++ b/app/admin/strategies/_ui/button/styles.module.scss
@@ -0,0 +1,6 @@
+.button {
+  width: 74px;
+  height: 30px;
+  padding: 16px 7px;
+  border: 1px solid $color-gray-300;
+}
diff --git a/app/admin/strategies/_ui/public-select.tsx b/app/admin/strategies/_ui/public-select.tsx
new file mode 100644
index 00000000..257bbd4d
--- /dev/null
+++ b/app/admin/strategies/_ui/public-select.tsx
@@ -0,0 +1,35 @@
+'use client'
+
+import { useState } from 'react'
+
+import Select from '@/shared/ui/select'
+
+import usePatchUserRole from '../_hooks/query/use-patch-strategy-role'
+import { strategyPublicOptions } from '../constants'
+// import { InvestorOptions, TraderOptions } from '../constants'
+import { StrategiesPublicStateType, StrategiesResponseModel } from '../types'
+
+interface Props {
+  data: StrategiesResponseModel['result']['content'][number]
+}
+
+const PublicSelect = ({ data }: Props) => {
+  const { strategyId, isPublic } = data
+  const [value, setValue] = useState(isPublic)
+
+  const { mutate } = usePatchUserRole(strategyId, value)
+
+  return (
+    <Select
+      value={value}
+      onChange={(v) => {
+        setValue(v as StrategiesPublicStateType)
+        mutate()
+      }}
+      options={strategyPublicOptions}
+      key={strategyId}
+    />
+  )
+}
+
+export default PublicSelect
diff --git a/app/admin/strategies/page.tsx b/app/admin/strategies/page.tsx
index 7bbfa426..7cffc726 100644
--- a/app/admin/strategies/page.tsx
+++ b/app/admin/strategies/page.tsx
@@ -3,7 +3,7 @@
 import classNames from 'classnames/bind'
 
 import Pagination from '@/shared/ui/pagination'
-import { SearchInput } from '@/shared/ui/search-input'
+import SearchInput from '@/shared/ui/search-input'
 import VerticalTable from '@/shared/ui/table/vertical'
 import Tabs from '@/shared/ui/tabs'
 import Title from '@/shared/ui/title'
@@ -12,16 +12,27 @@ import AdminContentsHeader from '../_ui/admin-header'
 import setAdminStrategiesTableBody from './_api/set-admin-strategies-table-body'
 import useStrategiesData from './_hooks/query/use-strategies-data'
 import useAdminStrategiesPage from './_hooks/use-admin-strategies-page'
+import AdminStrategyPostButton from './_ui/admin-strategies-post-button'
 import styles from './page.module.scss'
 
 const cx = classNames.bind(styles)
 
 const AdminStrategyPage = () => {
-  const { tabs, activeTab, keyword, setKeyword, searchParams, searchWithKeyword, onTabChange } =
-    useAdminStrategiesPage()
+  const {
+    tabs,
+    activeTab,
+    inputValue,
+    setInputValue,
+    searchParams,
+    searchWithKeyword,
+    onTabChange,
+    currentPage,
+    setCurrentPage,
+  } = useAdminStrategiesPage()
 
   const { data, isLoading } = useStrategiesData({
     ...searchParams,
+    size: 8,
     isApproved: activeTab === 'ALL' ? undefined : 'PENDING',
   })
 
@@ -31,20 +42,20 @@ const AdminStrategyPage = () => {
     <>
       <Title label="전략 관리" className={cx('title')} />
       <section className={cx('container')}>
-        {/* <AdminPostButton label="전략 등록하기" pathname="strategies" /> */}
+        <AdminStrategyPostButton />
         <Tabs tabs={tabs} activeTab={activeTab} onTabChange={onTabChange} />
         <AdminContentsHeader
           Left={
             <span>
-              총 <span className={cx('color-primary-500')}>{data.totalElements}</span>명
+              총 <span className={cx('color-primary-500')}>{data.totalElements}</span>개
             </span>
           }
           Right={
             <div>
               <SearchInput
-                value={keyword}
+                value={inputValue}
                 placeholder="전략명을 입력하세요."
-                onChange={(e) => setKeyword(e.target.value)}
+                onChange={(e) => setInputValue(e.target.value)}
                 onSearchIconClick={searchWithKeyword}
               />
             </div>
@@ -52,12 +63,20 @@ const AdminStrategyPage = () => {
           className={cx('header')}
         />
         <VerticalTable
-          tableHead={['No.', '날짜', '전략명', '닉네임', '공개여부', '승인여부']}
-          tableBody={setAdminStrategiesTableBody(data.content)}
-          countPerPage={10}
+          tableHead={['No.', '날짜', '전략명', '닉네임', '공개여부', '승인여부', '']}
+          tableBody={setAdminStrategiesTableBody({
+            data: data.content,
+            page: data.page,
+            countPerPage: data.size,
+          })}
+          countPerPage={data.size}
           currentPage={1}
         />
-        <Pagination currentPage={data.page} maxPage={data.totalPages} onPageChange={() => {}} />
+        <Pagination
+          currentPage={currentPage}
+          maxPage={data.totalPages}
+          onPageChange={setCurrentPage}
+        />
       </section>
     </>
   )
diff --git a/app/admin/users/_api/get-admin-users.ts b/app/admin/users/_api/get-admin-users.ts
index c6e3bb02..c9bbc629 100644
--- a/app/admin/users/_api/get-admin-users.ts
+++ b/app/admin/users/_api/get-admin-users.ts
@@ -10,7 +10,7 @@ interface ArgModel {
   size?: number
 }
 
-const getAdminUsers = async ({ role, condition, keyword, page = 1, size }: ArgModel) => {
+const getAdminUsers = async ({ role, condition, keyword, page = 1, size = 10 }: ArgModel) => {
   try {
     const res = await axiosInstance<AdminUsersResponeseModel>('/api/admin/users', {
       params: {
diff --git a/app/admin/users/_api/set-table-body.tsx b/app/admin/users/_api/set-table-body.tsx
index 0fdff9fe..e54c2de5 100644
--- a/app/admin/users/_api/set-table-body.tsx
+++ b/app/admin/users/_api/set-table-body.tsx
@@ -1,16 +1,24 @@
 import Avatar from '@/shared/ui/avatar'
+import { calculateTableNumber } from '@/shared/utils/table'
 
 import RoleSelect from '../_ui/role-select'
 import UserDeleteButton from '../_ui/user-delete-button'
 import { AdminUserInfoModel } from '../types'
 
-const setTableBody = (data: AdminUserInfoModel[]) =>
+interface ArgModel {
+  data: AdminUserInfoModel[]
+  page: number
+  countPerPage: number
+}
+
+const setTableBody = ({ data, page, countPerPage }: ArgModel) =>
   data.map((data, idx) => {
     return [
-      idx + 1,
+      calculateTableNumber({ page, idx, countPerPage }),
       <Avatar src={data?.imageUrl ?? undefined} key={data.userId} />,
       data.userName,
       data.nickname,
+      data.joinDate,
       data.email,
       data.phone,
       <RoleSelect data={data} key={data.userId} />,
diff --git a/app/admin/users/_hooks/query/use-admin-users.ts b/app/admin/users/_hooks/query/use-admin-users.ts
index a6771370..e3921bc9 100644
--- a/app/admin/users/_hooks/query/use-admin-users.ts
+++ b/app/admin/users/_hooks/query/use-admin-users.ts
@@ -1,5 +1,7 @@
 import { useQuery } from '@tanstack/react-query'
 
+import { QUERY_KEY } from '@/shared/constants/query-key'
+
 import getAdminUsers from '../../_api/get-admin-users'
 
 interface ArgModel {
@@ -12,7 +14,7 @@ interface ArgModel {
 
 const useAdminUsers = ({ role, condition, keyword, page, size }: ArgModel) => {
   return useQuery({
-    queryKey: ['adminUsers', [role, condition, keyword, page, size]],
+    queryKey: [QUERY_KEY.ADMIN_USERS, [role, condition, keyword, page, size]],
     queryFn: () => getAdminUsers({ role, condition, keyword, page, size }),
   })
 }
diff --git a/app/admin/users/_hooks/query/use-delete-user.ts b/app/admin/users/_hooks/query/use-delete-user.ts
index 964563a2..f3fd4e71 100644
--- a/app/admin/users/_hooks/query/use-delete-user.ts
+++ b/app/admin/users/_hooks/query/use-delete-user.ts
@@ -1,5 +1,7 @@
 import { useMutation, useQueryClient } from '@tanstack/react-query'
 
+import { QUERY_KEY } from '@/shared/constants/query-key'
+
 import deleteUser from '../../_api/delete-user'
 
 const useDeleteUser = (userId: number) => {
@@ -8,7 +10,7 @@ const useDeleteUser = (userId: number) => {
   return useMutation({
     mutationFn: () => deleteUser(userId),
     onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['adminUsers'] })
+      queryClient.invalidateQueries({ queryKey: [QUERY_KEY.ADMIN_USERS] })
     },
   })
 }
diff --git a/app/admin/users/_hooks/query/use-patch-user-role.ts b/app/admin/users/_hooks/query/use-patch-user-role.ts
index b163f174..933443ff 100644
--- a/app/admin/users/_hooks/query/use-patch-user-role.ts
+++ b/app/admin/users/_hooks/query/use-patch-user-role.ts
@@ -1,5 +1,7 @@
 import { useMutation, useQueryClient } from '@tanstack/react-query'
 
+import { QUERY_KEY } from '@/shared/constants/query-key'
+
 import patchAdminUserRole from '../../_api/patch-user-role'
 import { AdminPatchUserRoleType } from '../../types'
 
@@ -9,7 +11,7 @@ const usePatchUserRole = (userId: number, newRole: AdminPatchUserRoleType) => {
   return useMutation({
     mutationFn: () => patchAdminUserRole(userId, newRole),
     onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['adminUsers'] })
+      queryClient.invalidateQueries({ queryKey: [QUERY_KEY.ADMIN_USERS] })
     },
   })
 }
diff --git a/app/admin/users/_hooks/use-user-search-page.ts b/app/admin/users/_hooks/use-user-search-page.ts
index 0335a970..4c4fa4cc 100644
--- a/app/admin/users/_hooks/use-user-search-page.ts
+++ b/app/admin/users/_hooks/use-user-search-page.ts
@@ -8,13 +8,35 @@ const useUserSearchPage = () => {
   const [inputValue, setInputValue] = useState('')
   const [keyword, setKeyword] = useState('')
   const [condition, setCondition] = useState<string | null>(null)
+  const [currentPage, setCurrentPage] = useState(1)
+
+  const searchParams = {
+    role: activeTab,
+    condition,
+    keyword,
+    page: currentPage,
+  }
 
   const setConditionAndKeyword = () => {
     setKeyword(inputValue)
     setCondition(select)
   }
 
+  const initializeSearchParams = () => {
+    setCurrentPage(1)
+    setSelect(searchOptions[0].value)
+    setInputValue('')
+    setKeyword('')
+    setCondition(null)
+  }
+
+  const onTabChange = (tab: string) => {
+    setActiveTab(tab)
+    initializeSearchParams()
+  }
+
   return {
+    searchParams,
     searchOptions,
     tabs,
     select,
@@ -28,6 +50,9 @@ const useUserSearchPage = () => {
     condition,
     setCondition,
     setConditionAndKeyword,
+    currentPage,
+    setCurrentPage,
+    onTabChange,
   }
 }
 
diff --git a/app/admin/users/_ui/role-select.tsx b/app/admin/users/_ui/role-select.tsx
index 7a0c870a..f217f0d4 100644
--- a/app/admin/users/_ui/role-select.tsx
+++ b/app/admin/users/_ui/role-select.tsx
@@ -5,8 +5,8 @@ import { useState } from 'react'
 import Select from '@/shared/ui/select'
 
 import usePatchUserRole from '../_hooks/query/use-patch-user-role'
-import { InvestorOptions, TraderOptions } from '../constants'
-import { AdminPatchUserRoleType, AdminUserInfoModel, AdminUserRoleType } from '../types'
+import { investorOptions, traderOptions } from '../constants'
+import { AdminUserInfoModel, AdminUserRoleType } from '../types'
 
 interface Props {
   data: AdminUserInfoModel
@@ -16,16 +16,16 @@ const RoleSelect = ({ data }: Props) => {
   const { userId, role } = data
   const castAdmin = (role: AdminUserRoleType) =>
     role === 'INVESTOR_ADMIN' || role === 'TRADER_ADMIN' ? 'ADMIN' : role
-  const [value, setValue] = useState<AdminPatchUserRoleType>(castAdmin(role))
-  const options = role.includes('TRADER') ? TraderOptions : InvestorOptions
+  const [value, setValue] = useState<AdminUserRoleType>(role)
+  const options = role.includes('TRADER') ? traderOptions : investorOptions
 
-  const { mutate } = usePatchUserRole(userId, value)
+  const { mutate } = usePatchUserRole(userId, castAdmin(value))
 
   return (
     <Select
-      value={role}
+      value={value}
       onChange={(v) => {
-        setValue(castAdmin(v as AdminUserRoleType))
+        setValue(v as AdminUserRoleType)
         mutate()
       }}
       options={options}
diff --git a/app/admin/users/_ui/user-delete-button.tsx b/app/admin/users/_ui/user-delete-button.tsx
index d8912595..df67031e 100644
--- a/app/admin/users/_ui/user-delete-button.tsx
+++ b/app/admin/users/_ui/user-delete-button.tsx
@@ -1,6 +1,8 @@
 'use client'
 
+import useModal from '@/shared/hooks/custom/use-modal'
 import { Button } from '@/shared/ui/button'
+import AlertModal from '@/shared/ui/modal/alert-modal'
 
 import useDeleteUser from '../_hooks/query/use-delete-user'
 
@@ -9,18 +11,24 @@ interface Props {
 }
 
 const UserDeleteButton = ({ userId }: Props) => {
+  const { closeModal, isModalOpen, openModal } = useModal()
   const { mutate, isPending } = useDeleteUser(userId)
 
   return (
-    <Button
-      variant="filled"
-      onClick={() => mutate()}
-      disabled={isPending}
-      size="small"
-      style={{ padding: '7px 16px' }}
-    >
-      강제탈퇴
-    </Button>
+    <>
+      <Button variant="filled" onClick={openModal} size="small" style={{ padding: '7px 16px' }}>
+        강제탈퇴
+      </Button>
+      <AlertModal
+        message={`해당 회원을\n탈퇴시키겠습니까?`}
+        isModalOpen={isModalOpen}
+        disabled={isPending}
+        onCancel={closeModal}
+        onConfirm={() => {
+          mutate()
+        }}
+      />
+    </>
   )
 }
 
diff --git a/app/admin/users/_ui/user-delete-modal/index.tsx b/app/admin/users/_ui/user-delete-modal/index.tsx
new file mode 100644
index 00000000..fb204e27
--- /dev/null
+++ b/app/admin/users/_ui/user-delete-modal/index.tsx
@@ -0,0 +1,45 @@
+'use client'
+
+import { ModalAlertIcon } from '@/public/icons'
+import classNames from 'classnames/bind'
+
+import { Button } from '@/shared/ui/button'
+import Modal from '@/shared/ui/modal'
+import styles from '@/shared/ui/modal/styles.module.scss'
+
+import useDeleteUser from '../../_hooks/query/use-delete-user'
+
+const cx = classNames.bind(styles)
+
+interface Props {
+  isModalOpen: boolean
+  userId: number
+  closeModal: () => void
+  onConfirm?: () => void
+}
+
+const UserDeleteModal = ({ isModalOpen, userId, closeModal }: Props) => {
+  const { mutate, isPending } = useDeleteUser(userId)
+
+  return (
+    <Modal isOpen={isModalOpen} icon={ModalAlertIcon}>
+      <span className={cx('message')}>회원을 탈퇴시키겠습니까?</span>
+      <div className={cx('two-button')}>
+        <Button onClick={closeModal}>아니오</Button>
+        <Button
+          onClick={() => {
+            mutate()
+            closeModal()
+          }}
+          disabled={isPending}
+          variant="filled"
+          className={cx('button')}
+        >
+          예
+        </Button>
+      </div>
+    </Modal>
+  )
+}
+
+export default UserDeleteModal
diff --git a/app/admin/users/constants.ts b/app/admin/users/constants.ts
index 71354f18..17ef3cc3 100644
--- a/app/admin/users/constants.ts
+++ b/app/admin/users/constants.ts
@@ -15,12 +15,12 @@ export const tabs: Array<TabItemModel> = [
   { label: '관리자', id: 'ADMIN' },
 ]
 
-export const InvestorOptions: DropdownOptionModel[] = [
+export const investorOptions: DropdownOptionModel[] = [
   { label: '일반', value: 'INVESTOR' },
   { label: '관리자', value: 'INVESTOR_ADMIN' },
 ]
 
-export const TraderOptions: DropdownOptionModel[] = [
+export const traderOptions: DropdownOptionModel[] = [
   { label: '트레이더', value: 'TRADER' },
   { label: '관리자', value: 'TRADER_ADMIN' },
 ]
diff --git a/app/admin/users/page.tsx b/app/admin/users/page.tsx
index bd0a2b67..58ec8af6 100644
--- a/app/admin/users/page.tsx
+++ b/app/admin/users/page.tsx
@@ -3,7 +3,7 @@
 import classNames from 'classnames/bind'
 
 import Pagination from '@/shared/ui/pagination'
-import { SearchInput } from '@/shared/ui/search-input'
+import SearchInput from '@/shared/ui/search-input'
 import Select from '@/shared/ui/select'
 import VerticalTable from '@/shared/ui/table/vertical'
 import Tabs from '@/shared/ui/tabs'
@@ -19,20 +19,20 @@ const cx = classNames.bind(styles)
 
 const AdminUsersPage = () => {
   const {
+    searchParams,
     searchOptions,
     tabs,
     select,
     setSelect,
     activeTab,
-    setActiveTab,
     inputValue,
     setInputValue,
-    keyword,
-    condition,
     setConditionAndKeyword,
+    setCurrentPage,
+    onTabChange,
   } = useUserSearch()
 
-  const { isLoading, data } = useAdminUsers({ role: activeTab, condition, keyword })
+  const { isLoading, data } = useAdminUsers(searchParams)
 
   if (isLoading || !data) return null
 
@@ -40,7 +40,7 @@ const AdminUsersPage = () => {
     <>
       <Title label="회원 관리" className={cx('title')} />
       <section className={cx('container')}>
-        <Tabs tabs={tabs} activeTab={activeTab} onTabChange={setActiveTab} />
+        <Tabs tabs={tabs} activeTab={activeTab} onTabChange={onTabChange} />
         <AdminContentsHeader
           Left={
             <span>
@@ -69,12 +69,31 @@ const AdminUsersPage = () => {
           }
         />
         <VerticalTable
-          tableHead={['No.', '프로필', '이름', '닉네임', '이메일', '전화번호', '회원분류', '탈퇴']}
-          tableBody={setTableBody(data?.content)}
-          countPerPage={10}
+          tableHead={[
+            'No.',
+            '프로필',
+            '이름',
+            '닉네임',
+            '가입 일자',
+            '이메일',
+            '전화번호',
+            '회원분류',
+            '탈퇴',
+          ]}
+          tableBody={setTableBody({
+            data: data?.content,
+            page: data?.page,
+            countPerPage: data.size,
+          })}
+          countPerPage={data.size}
           currentPage={1}
+          colWidths={[1.2, 1.5, 1.5, 2, 2, 3, 2, 2, 2]}
+        />
+        <Pagination
+          currentPage={data?.page}
+          maxPage={data?.totalPages}
+          onPageChange={(page) => setCurrentPage(page)}
         />
-        <Pagination currentPage={data?.page} maxPage={data?.totalPages} onPageChange={() => {}} />
       </section>
     </>
   )
diff --git a/app/admin/users/types.ts b/app/admin/users/types.ts
index 40cc9fee..2d1e6289 100644
--- a/app/admin/users/types.ts
+++ b/app/admin/users/types.ts
@@ -12,6 +12,7 @@ export interface AdminUserInfoModel {
   userId: number
   userName: string
   email: string
+  joinDate: string
   imageUrl: string | null
   nickname: string
   phone: string
diff --git a/app/layout.tsx b/app/layout.tsx
index 5e14ea54..cc0bfa17 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,5 +1,7 @@
 import type { Metadata } from 'next'
 
+import { GoogleAnalytics } from '@next/third-parties/google'
+
 import { QueryProvider } from '@/shared/providers'
 import { AuthProvider } from '@/shared/providers/auth-provider'
 import '@/shared/styles/global.scss'
@@ -8,7 +10,8 @@ import { pretendard } from './fonts'
 
 export const metadata: Metadata = {
   title: 'InvestMetic',
-  description: '',
+  description: '성공적인 투자 전략을 참고하거나 공유하고 싶다면 인베스트 메틱에서!',
+  metadataBase: new URL('https://www.investmetic.co.kr'),
 }
 
 const RootLayout = ({ children }: { children: React.ReactNode }) => {
@@ -21,6 +24,7 @@ const RootLayout = ({ children }: { children: React.ReactNode }) => {
             <div id="modal-root" />
           </AuthProvider>
         </QueryProvider>
+        <GoogleAnalytics gaId="G-KW2Z1H0QES" />
       </body>
     </html>
   )
diff --git a/app/opengraph-image.alt.txt b/app/opengraph-image.alt.txt
new file mode 100644
index 00000000..7d57aebb
--- /dev/null
+++ b/app/opengraph-image.alt.txt
@@ -0,0 +1 @@
+Investmetic
\ No newline at end of file
diff --git a/app/opengraph-image.png b/app/opengraph-image.png
new file mode 100644
index 00000000..9fc506a7
Binary files /dev/null and b/app/opengraph-image.png differ
diff --git a/app/twitter-image.alt.txt b/app/twitter-image.alt.txt
new file mode 100644
index 00000000..7d57aebb
--- /dev/null
+++ b/app/twitter-image.alt.txt
@@ -0,0 +1 @@
+Investmetic
\ No newline at end of file
diff --git a/app/twitter-image.png b/app/twitter-image.png
new file mode 100644
index 00000000..9fc506a7
Binary files /dev/null and b/app/twitter-image.png differ
diff --git a/middleware.ts b/middleware.ts
index 3575db4e..f976445a 100644
--- a/middleware.ts
+++ b/middleware.ts
@@ -5,16 +5,41 @@ import { handleSignupMiddleware } from '@/middleware/signup'
 
 import { PATH } from '@/shared/constants/path'
 
+const PROTECTED_API_PATHS = [
+  '/api/my-strategies/',
+  '/api/strategies/search/trader/',
+  '/api/admin/',
+  '/api/notices/',
+  '/api/trader/',
+  '/reviews',
+] as const
+
+const isProtectedApiPath = (path: string): boolean => {
+  return PROTECTED_API_PATHS.some((protectedPath) => {
+    if (protectedPath.endsWith('/')) {
+      return path.startsWith(protectedPath)
+    }
+    return path.includes(protectedPath)
+  })
+}
+
 export const middleware = (request: NextRequest) => {
   const path = request.nextUrl.pathname
 
-  //TODO: api 요청 보호
-  // if (path.startsWith('/api/')) {
-  //   const authHeader = request.headers.get('access-token')
-  //   if (!authHeader) {
-  //     return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
-  //   }
-  // }
+  if (path.startsWith('/api/')) {
+    if (isProtectedApiPath(path)) {
+      const authHeader = request.headers.get('access-token')
+      if (!authHeader) {
+        return NextResponse.json(
+          {
+            error: 'Unauthorized',
+            message: '로그인이 필요한 요청입니다.',
+          },
+          { status: 401 }
+        )
+      }
+    }
+  }
 
   if (path.startsWith(PATH.SIGN_UP)) {
     const response = handleSignupMiddleware(request)
@@ -25,5 +50,13 @@ export const middleware = (request: NextRequest) => {
 }
 
 export const config = {
-  matcher: ['/api/:path*', '/signup/:path*'],
+  matcher: [
+    '/api/:path*',
+    '/signup/:path*',
+    '/my/:path*',
+    '/admin/:path*',
+    '/traders/:id*',
+    '/strategies/:path*',
+    '/((?!_next/static|_next/image|favicon.ico|public).*)',
+  ],
 }
diff --git a/next.config.mjs b/next.config.mjs
index c3a3ba48..9d6ab14e 100644
--- a/next.config.mjs
+++ b/next.config.mjs
@@ -11,14 +11,6 @@ const nextConfig = {
   },
   async rewrites() {
     return [
-      {
-        source: '/api/users/:path*',
-        destination: 'http://15.164.90.102:8081/api/users/:path*',
-      },
-      {
-        source: '/login',
-        destination: 'http://15.164.90.102:8081/login',
-      },
       {
         source: '/api/:path*',
         destination: 'http://15.164.90.102:8081/api/:path*',
diff --git a/package-lock.json b/package-lock.json
index 63ebbfdc..4c69c5a0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
       "name": "investmetic",
       "version": "0.1.0",
       "dependencies": {
+        "@next/third-parties": "^15.2.4",
         "@tanstack/react-query": "^5.59.19",
         "axios": "^1.7.7",
         "classnames": "^2.5.1",
@@ -3397,6 +3398,18 @@
         "node": ">= 10"
       }
     },
+    "node_modules/@next/third-parties": {
+      "version": "15.2.4",
+      "resolved": "https://registry.npmjs.org/@next/third-parties/-/third-parties-15.2.4.tgz",
+      "integrity": "sha512-a8GlPnMmPymxyLOiSnh5InUsG/hw7wjU3munGoHNB+oLCPruAeoplBa9Uf/xE83WMyutyK4cbi5Ixu4uyh96Mw==",
+      "dependencies": {
+        "third-party-capital": "1.0.20"
+      },
+      "peerDependencies": {
+        "next": "^13.0.0 || ^14.0.0 || ^15.0.0",
+        "react": "^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0"
+      }
+    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -14486,6 +14499,11 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/third-party-capital": {
+      "version": "1.0.20",
+      "resolved": "https://registry.npmjs.org/third-party-capital/-/third-party-capital-1.0.20.tgz",
+      "integrity": "sha512-oB7yIimd8SuGptespDAZnNkzIz+NWaJCu2RMsbs4Wmp9zSDUM8Nhi3s2OOcqYuv3mN4hitXc8DVx+LyUmbUDiA=="
+    },
     "node_modules/timers-browserify": {
       "version": "2.0.12",
       "resolved": "https://registry.npmjs.org/timers-browserify/-/timers-browserify-2.0.12.tgz",
diff --git a/package.json b/package.json
index cb4a612d..6e95f0a9 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
     "deploy-storybook": "npx chromatic --project-token $CHROMATIC_PROJECT_TOKEN"
   },
   "dependencies": {
+    "@next/third-parties": "^15.2.4",
     "@tanstack/react-query": "^5.59.19",
     "axios": "^1.7.7",
     "classnames": "^2.5.1",
diff --git a/public/files/upload-guide.xls b/public/files/upload-guide.xls
new file mode 100644
index 00000000..64f14ad2
Binary files /dev/null and b/public/files/upload-guide.xls differ
diff --git a/public/icons/index.tsx b/public/icons/index.tsx
index 4586fed3..4e8132de 100644
--- a/public/icons/index.tsx
+++ b/public/icons/index.tsx
@@ -35,3 +35,4 @@ export { default as BackIcon } from './back.svg'
 export { default as RegisterIcon } from './modal-register.svg'
 export { default as DownloadIcon } from './download.svg'
 export { default as CameraIcon } from './camera.svg'
+export { default as TrashcanIcon } from './trashcan.svg'
diff --git a/public/icons/trashcan.svg b/public/icons/trashcan.svg
new file mode 100644
index 00000000..40dd4a2a
--- /dev/null
+++ b/public/icons/trashcan.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="black" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9 3V4H4V6H5V19C5 19.5304 5.21071 20.0391 5.58579 20.4142C5.96086 20.7893 6.46957 21 7 21H17C17.5304 21 18.0391 20.7893 18.4142 20.4142C18.7893 20.0391 19 19.5304 19 19V6H20V4H15V3H9ZM7 6H17V19H7V6ZM9 8H11V17H9V8ZM13 8H15V17H13V8Z" fill="currentColor"/>
+</svg>
\ No newline at end of file
diff --git a/shared/api/axios.ts b/shared/api/axios.ts
index cd7d98a7..c03929d4 100644
--- a/shared/api/axios.ts
+++ b/shared/api/axios.ts
@@ -7,7 +7,6 @@ import { isTokenExpired, refreshToken } from '@/shared/utils/token-utils'
 
 export const createAxiosInstance = (options: { withInterceptors?: boolean } = {}) => {
   const instance = axios.create({
-    baseURL: process.env.NEXT_PUBLIC_API_HOST,
     withCredentials: true,
   })
 
diff --git a/shared/api/upload-file-with-presigned-url.ts b/shared/api/upload-file-with-presigned-url.ts
new file mode 100644
index 00000000..82211852
--- /dev/null
+++ b/shared/api/upload-file-with-presigned-url.ts
@@ -0,0 +1,18 @@
+const uploadFileWithPresignedUrl = async (presignedUrl: string, file: File) => {
+  try {
+    await fetch(presignedUrl, {
+      method: 'PUT',
+      body: file,
+      headers: {
+        'Content-Type': file.type,
+      },
+    })
+  } catch (err) {
+    if (err instanceof Error) {
+      throw new Error(`File upload failed: ${err.message}`)
+    }
+    throw err
+  }
+}
+
+export default uploadFileWithPresignedUrl
diff --git a/shared/constants/auth.ts b/shared/constants/auth.ts
index 475d9813..a950e877 100644
--- a/shared/constants/auth.ts
+++ b/shared/constants/auth.ts
@@ -8,12 +8,12 @@ export const STORAGE_KEYS = {
 } as const
 
 export const AUTH_TIME = {
-  TOKEN_CHECK_INTERVAL: 120 * 1000,
+  TOKEN_CHECK_INTERVAL: 60 * 1000,
   ADMIN_EXPIRY_WARNING: 600 * 1000,
   SAFETY_MARGIN: 5 * 1000,
 } as const
 
-export const AUTH_REQUIRED_PATTERNS = ['/my/', '/admin', '/traders', '/strategies/'] as const
+export const AUTH_REQUIRED_PATTERNS = ['/my/', '/admin', '/traders/', '/strategies/[0-9]+'] as const
 
 export const NON_AUTH_PAGES = [
   PATH.SIGN_IN,
diff --git a/shared/constants/error-messages.ts b/shared/constants/error-messages.ts
index 37841955..83d7f6c8 100644
--- a/shared/constants/error-messages.ts
+++ b/shared/constants/error-messages.ts
@@ -1,19 +1,11 @@
 export const ERROR_MESSAGES = {
   AUTH: {
-    INVALID_CREDENTIALS: '이메일 또는 비밀번호가 올바르지 않습니다.',
-    SESSION_EXPIRED: '로그인이 만료되었습니다. 다시 로그인해주세요.',
     LOGIN_FAILED: '서버 오류로 로그인에 실패했습니다.',
-    INVALID_TOKEN: '유효하지 않은 인증입니다.',
-    ALREADY_LOGGED_IN: '이미 로그인되어 있습니다.',
-    REFRESH_FAILED: '토큰 갱신에 실패했습니다.',
   },
   FORM: {
     REQUIRED_FIELDS: '이메일과 비밀번호를 입력해주세요.',
     EMAIL: '이메일 형식이 올바르지 않습니다.',
-    PASSWORD: '비밀번호는 8자 이상, 영문과 숫자를 포함해야 합니다.',
+    PASSWORD: '비밀번호는 6~20자로 영문과 숫자를 포함해야 합니다.',
     PHONE: '휴대폰 번호 형식이 올바르지 않습니다.',
   },
-  NETWORK: {
-    ERROR: '일시적인 오류가 발생했습니다. 잠시 후 다시 시도해주세요.',
-  },
 } as const
diff --git a/shared/constants/query-key.ts b/shared/constants/query-key.ts
new file mode 100644
index 00000000..10ee8642
--- /dev/null
+++ b/shared/constants/query-key.ts
@@ -0,0 +1,45 @@
+export const QUERY_KEY = {
+  // My
+  MY_STRATEGIES: 'myStrategies',
+  MY_DAILY_ANALYSIS: 'myDailyAnalysis',
+  MY_ACCOUNT_IMAGES: 'myAccountImages',
+  MY_FAVORITE_STRATEGIES: 'myFavoriteStrategies',
+  MY_PROFILE: 'myProfile',
+
+  // sTRATEGY
+  STRATEGIES: 'strategies',
+  STRATEGY_TYPES: 'strategyTypes',
+  STRATEGY_DETAILS: 'strategyDetails',
+  STRATEGY_REVIEWS: 'strategyReviews',
+  STRATEGY_ACCOUNT_IMAGES: 'strategyAccountImages',
+  STRATEGY_ANALYSIS_CHART: 'strategyAnalysisChart',
+  STRATEGY_ANALYSIS: 'strategyAnalysis',
+  STRATEGY_STATISTICS: 'strategyStatistics',
+  STRATEGY_SEARCH: 'strategiesSearch',
+  STRATEGY_PROPOSAL_FILE_NAME: 'proposalFileName',
+
+  // question
+  QUESTION_DETAILS: 'questionDetails',
+  QUESTION_LIST: 'questionList',
+
+  // trader
+  TRADERS: 'traders',
+  TRADER_STRATEGIES: 'traderStrategies',
+
+  // notice
+  NOTICES: 'notices',
+  NOTICE_DETAIL: 'noticeDetail',
+
+  // admin
+  ADMIN_STOCKS: 'adminStocks',
+  ADMIN_TRADES: 'adminTrades',
+  ADMIN_QUESTIONS: 'adminQuestions',
+  ADMIN_STRATEGIES: 'adminStrategies',
+  ADMIN_USERS: 'adminUsers',
+
+  // etc
+  TOTAL_STRATEGIES_METRICS: 'totalStrategiesMetrics',
+  TOP_RANKING_SM_SCORE: 'topRankingSmScore',
+  TOP_RANKING: 'topRanking',
+  USER_METRICS: 'userMetrics',
+} as const
diff --git a/shared/constants/supported-file-types.ts b/shared/constants/supported-file-types.ts
new file mode 100644
index 00000000..91631ae2
--- /dev/null
+++ b/shared/constants/supported-file-types.ts
@@ -0,0 +1,10 @@
+export const SUPPORTED_FILE_TYPES = [
+  'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+  'application/vnd.ms-excel',
+  'application/pdf',
+  'application/msword',
+  'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+  'text/plain',
+  'application/vnd.ms-powerpoint',
+  'application/vnd.openxmlformats-officedocument.presentationml.presentation',
+]
diff --git a/shared/hooks/custom/use-auth.ts b/shared/hooks/custom/use-auth.ts
index 7260b911..4d545639 100644
--- a/shared/hooks/custom/use-auth.ts
+++ b/shared/hooks/custom/use-auth.ts
@@ -2,7 +2,7 @@ import { useCallback, useEffect } from 'react'
 
 import { usePathname } from 'next/navigation'
 
-import { AUTH_TIME } from '@/shared/constants/auth'
+import { AUTH_TIME, STORAGE_KEYS } from '@/shared/constants/auth'
 import { useLogoutMutation } from '@/shared/hooks/query/auth-queries'
 import { getAccessToken } from '@/shared/lib/auth-tokens'
 import { useAuthStore } from '@/shared/stores/use-auth-store'
@@ -31,7 +31,7 @@ export const useAuth = () => {
       }
 
       if (isAdmin(user)) {
-        if (localStorage.getItem('access_token')) {
+        if (!sessionStorage.getItem(STORAGE_KEYS.ACCESS_TOKEN)) {
           logout()
           return null
         }
@@ -42,8 +42,8 @@ export const useAuth = () => {
         timeUntilExpiry,
         isNearExpiry: timeUntilExpiry < AUTH_TIME.ADMIN_EXPIRY_WARNING,
       }
-    } catch (error) {
-      console.error('Token status check failed:', error)
+    } catch (err) {
+      console.error('Token status check failed:', err)
       logout()
       return null
     }
diff --git a/shared/hooks/custom/use-delayed-loading.ts b/shared/hooks/custom/use-delayed-loading.ts
new file mode 100644
index 00000000..bfb19c88
--- /dev/null
+++ b/shared/hooks/custom/use-delayed-loading.ts
@@ -0,0 +1,32 @@
+import { useEffect, useRef, useState } from 'react'
+
+const useDelayedLoading = (isLoading: boolean, minLoadingTime: number = 500) => {
+  const [isDelayedLoading, setDelayedLoading] = useState(isLoading)
+  const loadingStartTime = useRef<number | null>(null)
+
+  useEffect(() => {
+    if (isLoading) {
+      loadingStartTime.current = Date.now()
+      setDelayedLoading(true)
+      return
+    }
+
+    if (!isLoading && loadingStartTime.current) {
+      const loadingDuration = Date.now() - loadingStartTime.current
+
+      if (loadingDuration < minLoadingTime) {
+        const remainingTime = minLoadingTime - loadingDuration
+        const timer = setTimeout(() => {
+          setDelayedLoading(false)
+        }, remainingTime)
+        return () => clearTimeout(timer)
+      } else {
+        setDelayedLoading(false)
+      }
+    }
+  }, [isLoading, minLoadingTime])
+
+  return isDelayedLoading
+}
+
+export default useDelayedLoading
diff --git a/shared/hooks/custom/use-pagination.ts b/shared/hooks/custom/use-pagination.ts
index 7e517f3f..7daa4053 100644
--- a/shared/hooks/custom/use-pagination.ts
+++ b/shared/hooks/custom/use-pagination.ts
@@ -23,9 +23,12 @@ export const usePagination = ({ basePath, pageSize }: Props): UsePaginationRetur
 
   useEffect(() => {
     if (!searchParams.size) {
-      router.push(`${basePath}?page=1&size=${size ?? pageSize}`)
+      const params = new URLSearchParams(searchParams)
+      params.set('page', String(page))
+      params.set('size', String(size))
+      router.replace(`${basePath}?${params.toString()}`)
     }
-  }, [searchParams, router, basePath, pageSize, size])
+  }, [searchParams, router, basePath, pageSize, size, page])
 
   const handlePageChange = (page: number) => {
     router.push(`${basePath}?page=${page}&size=${pageSize}`)
diff --git a/shared/hooks/custom/use-reset-password.ts b/shared/hooks/custom/use-reset-password.ts
index 4ab84642..9603ca61 100644
--- a/shared/hooks/custom/use-reset-password.ts
+++ b/shared/hooks/custom/use-reset-password.ts
@@ -1,11 +1,12 @@
-import { useCallback, useState } from 'react'
+import { useCallback, useEffect, useRef, useState } from 'react'
 
 import axios from 'axios'
 
 import { useFindCredentials } from '@/shared/hooks/query/use-find-credentials'
+import { isValidPassword } from '@/shared/utils/validation'
 
 interface UseResetPasswordProps {
-  onSuccess: () => void
+  onSuccess: (message: string) => void
   onError: (message: string) => void
 }
 
@@ -17,6 +18,11 @@ export const useResetPassword = ({ onSuccess, onError }: UseResetPasswordProps)
     password: '',
     passwordConfirm: '',
   })
+  const [countdown, setCountdown] = useState(0)
+  const [isEmailVerified, setIsEmailVerified] = useState(false)
+  const [isPasswordReset, setIsPasswordReset] = useState(false)
+  const timerRef = useRef<NodeJS.Timeout | null>(null)
+  const controllerRef = useRef<AbortController | null>(null)
 
   const { authenticateMutation, resetPasswordMutation } = useFindCredentials()
 
@@ -27,46 +33,113 @@ export const useResetPassword = ({ onSuccess, onError }: UseResetPasswordProps)
     [onError]
   )
 
-  const memoizedOnSuccess = useCallback(() => {
-    onSuccess()
-  }, [onSuccess])
+  const memoizedOnSuccess = useCallback(
+    (message: string) => {
+      onSuccess(message)
+    },
+    [onSuccess]
+  )
+
+  const validatePassword = (password: string): { isValid: boolean; message: string } => {
+    if (!isValidPassword(password)) {
+      return {
+        isValid: false,
+        message: '비밀번호는 영문과 숫자를 포함한 6~20자리여야 합니다.',
+      }
+    }
+
+    return { isValid: true, message: '' }
+  }
+
+  const startCountdown = useCallback((duration: number) => {
+    if (timerRef.current) {
+      clearInterval(timerRef.current)
+      timerRef.current = null
+    }
+
+    setCountdown(duration)
+
+    timerRef.current = setInterval(() => {
+      setCountdown((prev) => {
+        if (prev <= 1) {
+          clearInterval(timerRef.current as NodeJS.Timeout)
+          timerRef.current = null
+          return 0
+        }
+        return prev - 1
+      })
+    }, 1000)
+  }, [])
 
   const handleVerifyEmail = async (e?: React.FormEvent) => {
     e?.preventDefault()
+
+    if (!formData.email || !formData.code) {
+      memoizedOnError('이메일과 인증코드를 모두 입력해주세요.')
+      return
+    }
+
     try {
       const response = await authenticateMutation.mutateAsync({
         email: formData.email,
         code: formData.code,
       })
+
       if (response.isSuccess) {
-        setStep(2)
-        memoizedOnError('')
+        setIsEmailVerified(true)
+        memoizedOnSuccess('이메일 인증에 성공했습니다.')
+        if (timerRef.current) {
+          clearInterval(timerRef.current)
+          timerRef.current = null
+        }
+        setCountdown(0)
       } else {
+        setIsEmailVerified(false)
         memoizedOnError(response.message || '인증에 실패했습니다.')
       }
-    } catch {
-      memoizedOnError('인증에 실패했습니다.')
+    } catch (error) {
+      setIsEmailVerified(false)
+      memoizedOnError('인증에 실패했습니다. 다시 시도해주세요.')
+    }
+  }
+
+  const handleNextStep = () => {
+    if (!isEmailVerified) {
+      memoizedOnError('이메일 인증을 먼저 진행해주세요.')
+      return
     }
+    setStep(2)
+    memoizedOnSuccess('')
   }
 
   const handlePasswordReset = async (e: React.FormEvent) => {
     e.preventDefault()
+
+    const validation = validatePassword(formData.password)
+    if (!validation.isValid) {
+      memoizedOnError(validation.message)
+      return
+    }
+
     if (formData.password !== formData.passwordConfirm) {
       memoizedOnError('비밀번호가 일치하지 않습니다.')
       return
     }
+
     try {
       const response = await resetPasswordMutation.mutateAsync({
         email: formData.email,
         password: formData.password,
       })
+
       if (response.isSuccess) {
-        memoizedOnSuccess()
+        setIsPasswordReset(true)
+        memoizedOnSuccess('비밀번호가 성공적으로 재설정되었습니다.')
       } else {
         memoizedOnError(response.message || '비밀번호 재설정에 실패했습니다.')
       }
-    } catch {
-      memoizedOnError('비밀번호 재설정에 실패했습니다.')
+    } catch (error) {
+      memoizedOnError('비밀번호 재설정에 실패했습니다. 다시 시도해주세요.')
     }
   }
 
@@ -79,17 +152,57 @@ export const useResetPassword = ({ onSuccess, onError }: UseResetPasswordProps)
   }, [])
 
   const handleRequestCode = useCallback(async () => {
+    if (!formData.email) {
+      memoizedOnError('이메일을 입력해주세요.')
+      return
+    }
+
+    if (controllerRef.current) {
+      controllerRef.current.abort()
+    }
+
+    const controller = new AbortController()
+    controllerRef.current = controller
+
     try {
-      const response = await axios.get(`/api/users/authenticate?email=${formData.email}`)
+      const response = await axios.get(`/api/users/authenticate?email=${formData.email}`, {
+        signal: controller.signal,
+      })
+
       if (response.data.isSuccess) {
-        memoizedOnError('')
+        memoizedOnSuccess('인증코드가 발송되었습니다. 30분 내에 입력해주세요.')
+        startCountdown(1800)
       } else {
         memoizedOnError(response.data.message || '인증코드 발송에 실패했습니다.')
       }
-    } catch {
-      memoizedOnError('인증코드 발송에 실패했습니다.')
+    } catch (error: any) {
+      if (axios.isCancel(error)) {
+        return
+      }
+      if (error.response && error.response.data && error.response.data.message) {
+        memoizedOnError(error.response.data.message)
+      } else {
+        memoizedOnError('인증코드 발송에 실패했습니다.')
+      }
+    } finally {
+      controllerRef.current = null
     }
-  }, [formData.email, memoizedOnError])
+  }, [formData.email, memoizedOnError, memoizedOnSuccess, startCountdown])
+
+  useEffect(() => {
+    return () => {
+      if (timerRef.current) {
+        clearInterval(timerRef.current)
+        timerRef.current = null
+      }
+    }
+  }, [])
+
+  const formatCountdown = () => {
+    const minutes = Math.floor(countdown / 60)
+    const seconds = countdown % 60
+    return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`
+  }
 
   const isPending = authenticateMutation.isPending || resetPasswordMutation.isPending
 
@@ -100,17 +213,49 @@ export const useResetPassword = ({ onSuccess, onError }: UseResetPasswordProps)
       password: '',
       passwordConfirm: '',
     })
+    setCountdown(0)
+    setIsEmailVerified(false)
+    setIsPasswordReset(false)
+
+    if (controllerRef.current) {
+      controllerRef.current.abort()
+      controllerRef.current = null
+    }
+
+    if (timerRef.current) {
+      clearInterval(timerRef.current)
+      timerRef.current = null
+    }
+
+    memoizedOnSuccess('')
+    memoizedOnError('')
+    setStep(1)
+  }, [memoizedOnSuccess, memoizedOnError])
+
+  useEffect(() => {
+    return () => {
+      if (timerRef.current) {
+        clearInterval(timerRef.current)
+      }
+      if (controllerRef.current) {
+        controllerRef.current.abort()
+      }
+    }
   }, [])
 
   return {
     formData,
     step,
     isPending,
+    countdown,
+    formatCountdown,
+    isEmailVerified,
+    isPasswordReset,
     handleInputChange,
     handleRequestCode,
     handleVerifyEmail,
     handlePasswordReset,
-    setStep,
+    handleNextStep,
     resetForm,
   }
 }
diff --git a/shared/hooks/custom/use-session-expiry-warning.tsx b/shared/hooks/custom/use-session-expiry-warning.tsx
index 34ed1afc..d8a1877e 100644
--- a/shared/hooks/custom/use-session-expiry-warning.tsx
+++ b/shared/hooks/custom/use-session-expiry-warning.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useRef } from 'react'
+import { useCallback, useEffect } from 'react'
 
 import { AUTH_TIME } from '@/shared/constants/auth'
 import { useRefreshTokenMutation } from '@/shared/hooks/query/auth-queries'
@@ -14,66 +14,68 @@ export const useSessionExpiryWarning = () => {
   const { checkTokenStatus } = useAuth()
   const { user } = useAuthStore()
   const { mutate: refreshToken } = useRefreshTokenMutation()
-  const { isModalOpen, openModal, onCloseModal } = useModalStore()
-  const { setWarningShown, setMinutesLeft, minutesLeft } = useSessionStore()
-  const warningShownRef = useRef(false)
-
-  useEffect(() => {
-    if (!isModalOpen) return
-
-    const timer = setInterval(() => {
-      setMinutesLeft((prev) => {
-        const newMinutes = Math.max(0, prev - 1)
-        if (newMinutes === 0) {
-          onCloseModal()
-          warningShownRef.current = false
-          setWarningShown(false)
-        }
-        return newMinutes
-      })
-    }, 60000)
-
-    return () => clearInterval(timer)
-  }, [isModalOpen, onCloseModal, setMinutesLeft, setWarningShown])
+  const {
+    isModalOpen: isSessionModalOpen,
+    openModal: openSessionModal,
+    onCloseModal: closeSessionModal,
+  } = useModalStore()
+  const { isWarningShown, setWarningShown, setMinutesLeft, minutesLeft } = useSessionStore()
 
   const handleRefreshToken = useCallback(() => {
     refreshToken(undefined, {
       onSuccess: () => {
-        onCloseModal()
-        warningShownRef.current = false
+        closeSessionModal()
         setWarningShown(false)
       },
-      onError: (error) => {
-        console.error('Token refresh failed in session warning:', error)
+      onError: (err) => {
+        console.error('Token refresh failed in session warning:', err)
       },
     })
-  }, [refreshToken, onCloseModal, setWarningShown])
+  }, [refreshToken, closeSessionModal, setWarningShown])
 
-  useEffect(() => {
+  const performCheck = useCallback(() => {
     if (!user || !isAdmin(user)) return
 
-    const checkAndNotify = () => {
-      const tokenStatus = checkTokenStatus()
+    const tokenStatus = checkTokenStatus()
 
-      if (tokenStatus?.isNearExpiry && !warningShownRef.current) {
-        const minutes = Math.floor(tokenStatus.timeUntilExpiry / 60000)
-        setMinutesLeft(minutes)
-        setWarningShown(true)
-        warningShownRef.current = true
-        openModal()
-      }
+    if (tokenStatus?.isNearExpiry && !isWarningShown) {
+      const minutes = Math.floor(tokenStatus.timeUntilExpiry / 60000)
+      setMinutesLeft(minutes)
+      setWarningShown(true)
+      openSessionModal()
     }
+  }, [user, checkTokenStatus, isWarningShown, setMinutesLeft, setWarningShown, openSessionModal])
 
-    checkAndNotify()
-    const interval = setInterval(checkAndNotify, AUTH_TIME.TOKEN_CHECK_INTERVAL)
+  useEffect(() => {
+    performCheck()
+  }, [performCheck])
 
+  useEffect(() => {
+    const interval = setInterval(performCheck, AUTH_TIME.TOKEN_CHECK_INTERVAL)
     return () => clearInterval(interval)
-  }, [checkTokenStatus, openModal, setMinutesLeft, setWarningShown, user])
+  }, [performCheck])
+
+  useEffect(() => {
+    if (!isSessionModalOpen) return
+
+    const timer = setInterval(() => {
+      setMinutesLeft((prev) => {
+        const newMinutes = Math.max(0, prev - 1)
+        if (newMinutes === 0) {
+          closeSessionModal()
+          setWarningShown(false)
+        }
+        return newMinutes
+      })
+    }, 60000)
+
+    return () => clearInterval(timer)
+  }, [isSessionModalOpen, closeSessionModal, setMinutesLeft, setWarningShown])
 
   return (
     <SessionExtensionModal
-      isModalOpen={isModalOpen}
-      onCloseModal={onCloseModal}
+      isModalOpen={isSessionModalOpen}
+      onCloseModal={closeSessionModal}
       onExtend={handleRefreshToken}
       minutesLeft={minutesLeft}
     />
diff --git a/shared/hooks/query/auth-queries.ts b/shared/hooks/query/auth-queries.ts
index 7964de6c..88766b70 100644
--- a/shared/hooks/query/auth-queries.ts
+++ b/shared/hooks/query/auth-queries.ts
@@ -1,5 +1,6 @@
 import { useRouter } from 'next/navigation'
 
+import useSearchingItemStore from '@/app/(dashboard)/strategies/_ui/search-bar/_store/use-searching-item-store'
 import { useMutation } from '@tanstack/react-query'
 import axios from 'axios'
 
@@ -39,10 +40,10 @@ export const useLoginMutation = () => {
           isAuthenticated: true,
           user,
         })
-      } catch (error) {
-        console.error('Login process failed:', error)
+      } catch (err) {
+        console.error('Login process failed:', err)
         removeAccessToken()
-        throw error
+        throw err
       }
     },
   })
@@ -59,15 +60,17 @@ export const useLogoutMutation = () => {
         isAuthenticated: false,
         user: null,
       })
+      useSearchingItemStore.getState().actions.resetState()
       router.replace(PATH.SIGN_IN)
     },
-    onError: (error) => {
-      console.error('Logout failed:', error)
+    onError: (err) => {
+      console.error('Logout failed:', err)
       removeAccessToken()
       useAuthStore.getState().setAuthState({
         isAuthenticated: false,
         user: null,
       })
+      useSearchingItemStore.getState().actions.resetState()
       router.replace(PATH.SIGN_IN)
     },
   })
@@ -102,19 +105,19 @@ export const useRefreshTokenMutation = () => {
           isAuthenticated: true,
           user,
         })
-      } catch (error) {
-        console.error('Token refresh process failed:', error)
+      } catch (err) {
+        console.error('Token refresh process failed:', err)
         removeAccessToken()
         useAuthStore.getState().setAuthState({
           isAuthenticated: false,
           user: null,
         })
         router.replace(PATH.SIGN_IN)
-        throw error
+        throw err
       }
     },
-    onError: (error) => {
-      console.error('Token refresh mutation failed:', error)
+    onError: (err) => {
+      console.error('Token refresh mutation failed:', err)
       removeAccessToken()
       useAuthStore.getState().setAuthState({
         isAuthenticated: false,
diff --git a/shared/providers/auth-provider.tsx b/shared/providers/auth-provider.tsx
index 2e29e219..e67331cc 100644
--- a/shared/providers/auth-provider.tsx
+++ b/shared/providers/auth-provider.tsx
@@ -5,10 +5,12 @@ import { ReactNode, createContext, useEffect } from 'react'
 import { usePathname, useRouter } from 'next/navigation'
 
 import { PATH } from '@/shared/constants/path'
+import useModal from '@/shared/hooks/custom/use-modal'
+import { useSessionExpiryWarning } from '@/shared/hooks/custom/use-session-expiry-warning'
 import { getAccessToken } from '@/shared/lib/auth-tokens'
+import SigninCheckModal from '@/shared/ui/modal/signin-check-modal'
 
 import { useAuth } from '../hooks/custom/use-auth'
-import { useSessionExpiryWarning } from '../hooks/custom/use-session-expiry-warning'
 import { useAuthStore } from '../stores/use-auth-store'
 import { isAuthRequiredPath, isNonAuthPage } from '../utils/auth-path'
 
@@ -22,9 +24,10 @@ export const AuthProvider = ({ children }: AuthProviderProps) => {
   const pathname = usePathname()
   const router = useRouter()
   const { initializeAuthState } = useAuthStore()
+  const { isModalOpen, openModal, closeModal } = useModal()
+  const SessionModal = useSessionExpiryWarning()
 
   useAuth()
-  const SessionExpiryWarningModal = useSessionExpiryWarning()
 
   useEffect(() => {
     initializeAuthState()
@@ -34,7 +37,7 @@ export const AuthProvider = ({ children }: AuthProviderProps) => {
     const accessToken = getAccessToken()
 
     if (isAuthRequiredPath(pathname) && !accessToken) {
-      router.replace(`${PATH.SIGN_IN}?returnUrl=${pathname}`)
+      openModal()
       return
     }
 
@@ -44,10 +47,20 @@ export const AuthProvider = ({ children }: AuthProviderProps) => {
     }
   }, [pathname, router])
 
+  const handleLoginConfirm = () => {
+    closeModal()
+    router.push(`${PATH.SIGN_IN}?returnUrl=${pathname}`)
+  }
+
   return (
     <AuthContext.Provider value={null}>
       {children}
-      {SessionExpiryWarningModal}
+      <SigninCheckModal
+        isModalOpen={isModalOpen}
+        onCloseModal={closeModal}
+        onConfirm={handleLoginConfirm}
+      />
+      {SessionModal}
     </AuthContext.Provider>
   )
 }
diff --git a/shared/stores/use-auth-store.ts b/shared/stores/use-auth-store.ts
index e53e348e..40ab6369 100644
--- a/shared/stores/use-auth-store.ts
+++ b/shared/stores/use-auth-store.ts
@@ -130,8 +130,8 @@ export const useAuthStore = create<AuthStoreType>()((set) => ({
           })
           return
         }
-      } catch (error) {
-        console.error('Failed to parse session user data:', error)
+      } catch (err) {
+        console.error('Failed to parse session user data:', err)
         sessionStorage.removeItem(STORAGE_KEYS.USER)
       }
     }
@@ -146,8 +146,8 @@ export const useAuthStore = create<AuthStoreType>()((set) => ({
             isKeepLoggedIn: true,
           })
         }
-      } catch (error) {
-        console.error('Failed to parse local user data:', error)
+      } catch (err) {
+        console.error('Failed to parse local user data:', err)
         localStorage.removeItem(STORAGE_KEYS.USER)
       }
     }
diff --git a/shared/types/auth.ts b/shared/types/auth.ts
index 4b6e549e..97388246 100644
--- a/shared/types/auth.ts
+++ b/shared/types/auth.ts
@@ -59,6 +59,11 @@ export const isAdmin = (user: UserModel | null): boolean => {
   return user.role.includes('ADMIN')
 }
 
+export const isSuperAdmin = (user: UserModel | null): boolean => {
+  if (!user) return false
+  return user.role.includes('SUPER_ADMIN')
+}
+
 export const isTrader = (user: UserModel | null): boolean => {
   if (!user) return false
   return user.role.includes('TRADER')
diff --git a/shared/types/questions.ts b/shared/types/questions.ts
index 36b49b6c..21ae89de 100644
--- a/shared/types/questions.ts
+++ b/shared/types/questions.ts
@@ -13,15 +13,24 @@ export type QuestionSearchConditionType =
   | 'INVESTOR_NAME'
   | 'STRATEGY_NAME'
 
+export interface QuestionUserModel {
+  id: number
+  userName: string
+  profileImageUrl: string
+}
+
 export interface QuestionModel {
   questionId: number
   title: string
   questionContent: string
-  strategyName: string
-  nickname: string
-  profileImageUrl: string
+  strategy: {
+    id: number
+    name: string
+  }
   stateCondition: QuestionStateConditionType
   createdAt: string
+  investor?: QuestionUserModel
+  trader?: QuestionUserModel
 }
 
 export interface AnswerModel {
diff --git a/shared/types/strategy-data.ts b/shared/types/strategy-data.ts
index d25c4ca1..3a716177 100644
--- a/shared/types/strategy-data.ts
+++ b/shared/types/strategy-data.ts
@@ -1,12 +1,22 @@
-// API Request Data
 export interface DailyAnalysisModel {
   date: string
   principal: number
   transaction: number
   dailyProfitLoss: number
-  dailyProfitLossRate: number
+  dailyProfitLossRate: number | string
   cumulativeProfitLoss: number
-  cumulativeProfitLossRate: number
+  cumulativeProfitLossRate: number | string
+}
+
+export interface MyDailyAnalysisModel {
+  dailyAnalysisId: number
+  dailyDate: string
+  transaction: number
+  dailyProfitLoss: number
+  dailyProfitLossRate: number | string
+  principal: number
+  cumulativeProfitLoss: number
+  cumulativeProfitLossRate: number | string
 }
 
 export interface MonthlyAnalysisModel {
@@ -14,9 +24,9 @@ export interface MonthlyAnalysisModel {
   monthlyAveragePrincipal: number
   depositsWithdrawals: number
   monthlyProfitLoss: number
-  monthlyProfitLossRate: number
+  monthlyProfitLossRate: number | string
   cumulativeProfitLoss: number
-  cumulativeProfitLossRate: number
+  cumulativeProfitLossRate: number | string
 }
 
 export interface ProfitRateChartDataModel {
@@ -62,6 +72,7 @@ export interface StrategyDetailsInformationModel extends BaseStrategyModel {
   kpRatio: number
   finalProfitLossDate: string
   createdAt: string
+  hasProposal: boolean
 }
 
 export interface StrategyCardModel {
@@ -82,3 +93,19 @@ export interface AnalysisDataModel {
   transaction: number
   dailyProfitLoss: number
 }
+
+export interface ImageDataModel {
+  id: number
+  imageUrl: string
+  title: string
+}
+
+export interface AccountImageDataModel {
+  content: ImageDataModel
+  first: boolean
+  last: boolean
+  page: number
+  size: number
+  totalElements: number
+  totalPages: number
+}
diff --git a/shared/types/svg.d.ts b/shared/types/svg.d.ts
index 50267039..2e323377 100644
--- a/shared/types/svg.d.ts
+++ b/shared/types/svg.d.ts
@@ -1,4 +1,4 @@
-declare module '@/public/icons/*.svg' {
+declare module '*.svg' {
   const content: React.FunctionComponent<React.SVGAttributes<SVGElement>>
   export default content
 }
diff --git a/shared/ui/avatar/index.tsx b/shared/ui/avatar/index.tsx
index 349991d7..dba4522c 100644
--- a/shared/ui/avatar/index.tsx
+++ b/shared/ui/avatar/index.tsx
@@ -23,7 +23,7 @@ const Avatar = ({ src, size = 'small', avatarStyle }: Props) => {
   const [isValidImage, setIsValidImage] = useState(true)
 
   return (
-    <div className={cx('avatar', size, avatarStyle)}>
+    <div className={cx('avatar', size)} style={avatarStyle}>
       {src && isValidImage ? (
         <Image src={src} alt="프로필" fill onError={() => setIsValidImage(false)} />
       ) : (
diff --git a/shared/ui/avatar/styles.module.scss b/shared/ui/avatar/styles.module.scss
index 415511fa..1f460c79 100644
--- a/shared/ui/avatar/styles.module.scss
+++ b/shared/ui/avatar/styles.module.scss
@@ -38,6 +38,16 @@ $svg-xxlarge: 110px;
       width: $svg-medium;
       height: $svg-medium;
     }
+
+    @include tablet-md {
+      width: $avatar-small;
+      height: $avatar-small;
+
+      svg {
+        width: $svg-small;
+        height: $svg-small;
+      }
+    }
   }
 
   &.large {
diff --git a/shared/ui/button/index.tsx b/shared/ui/button/index.tsx
index 14f40ef7..5f5073cb 100644
--- a/shared/ui/button/index.tsx
+++ b/shared/ui/button/index.tsx
@@ -14,7 +14,7 @@ export type ButtonVariantType = 'outline' | 'filled'
 interface Props extends ComponentProps<'button'> {
   size?: ButtonSizeType
   variant?: ButtonVariantType
-  onClick?: () => void
+  onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void
 }
 
 const _Button = ({
diff --git a/shared/ui/dropdown/styles.module.scss b/shared/ui/dropdown/styles.module.scss
index 15ccf8da..3b1434c5 100644
--- a/shared/ui/dropdown/styles.module.scss
+++ b/shared/ui/dropdown/styles.module.scss
@@ -2,6 +2,8 @@ $small-width: 90px;
 $small-height: 30px;
 $large-width: 160px;
 $large-height: 40px;
+$medium-width: 124px;
+$medium-height: 30px;
 
 $color-selected-text: #171717;
 
@@ -15,9 +17,17 @@ $color-selected-text: #171717;
     height: fit-content;
   }
 
+  &-medium {
+    width: $medium-width;
+    height: fit-content;
+  }
+
   &-large {
     width: $large-width;
     height: fit-content;
+    @include tablet-md {
+      width: $medium-width;
+    }
   }
 }
 
@@ -63,11 +73,21 @@ $color-selected-text: #171717;
   padding: 3px 6px 3px 10px;
 }
 
+.medium {
+  width: $medium-width;
+  height: $medium-height;
+  padding: 3px 6px 3px 10px;
+}
+
 .large {
   width: $large-width;
   height: $large-height;
   padding-left: 10.5px;
   padding-right: 14.5px;
+  @include tablet-md {
+    width: $medium-width;
+    height: $medium-height;
+  }
 }
 
 .options {
@@ -89,9 +109,17 @@ $color-selected-text: #171717;
     max-height: 180px;
   }
 
+  &.medium {
+    width: $medium-width;
+    max-height: 180px;
+  }
+
   &.large {
     width: $large-width;
     max-height: 200px;
+    @include tablet-md {
+      width: $medium-width;
+    }
   }
 }
 
diff --git a/shared/ui/dropdown/types.ts b/shared/ui/dropdown/types.ts
index d0baaf4f..a7b1cc5f 100644
--- a/shared/ui/dropdown/types.ts
+++ b/shared/ui/dropdown/types.ts
@@ -7,7 +7,7 @@ export interface DropdownOptionModel {
 
 export type DropdownValueType = string | string[] | null
 
-export type DropdownSizeType = 'small' | 'large'
+export type DropdownSizeType = 'small' | 'medium' | 'large'
 
 export interface DropdownProps {
   size?: DropdownSizeType
diff --git a/shared/ui/error-message/styles.module.scss b/shared/ui/error-message/styles.module.scss
index 5163dd56..82560d80 100644
--- a/shared/ui/error-message/styles.module.scss
+++ b/shared/ui/error-message/styles.module.scss
@@ -1,4 +1,5 @@
 .error-message {
+  margin-top: 4px;
   color: $color-orange-800;
   font-size: $text-b3;
   font-weight: $text-medium;
diff --git a/shared/ui/footer/index.tsx b/shared/ui/footer/index.tsx
index 707489f5..e7fce630 100644
--- a/shared/ui/footer/index.tsx
+++ b/shared/ui/footer/index.tsx
@@ -16,8 +16,9 @@ const Footer = () => {
         <FooterLogo />
         <div className={cx('info-wrapper')}>
           <div className={cx('info')}>
-            <strong>(주)인베스트메틱</strong>
+            <strong>(주) 시스메틱</strong>
             <ul className={cx('contents')}>
+              <li>대표이사: 박혜정</li>
               <li>사업자 등록 번호 ㅣ 711-86-00050</li>
               <li>통신판매업신고 ㅣ 제2020-서울 영등포-2864호</li>
               <li>특허출원번호 ㅣ 10-2016-00262203</li>
@@ -26,10 +27,8 @@ const Footer = () => {
           <div className={cx('info')}>
             <strong>CONTACT</strong>
             <ul className={cx('contents')}>
-              <li>
-                서울시 영등포구 당산로41길 11, <br />
-                E동 1202호
-              </li>
+              <li>서울시 영등포구 당산로41길 11, E동 1202호</li>
+              <li>ceo@sysmetic.co.kr</li>
               <li>+82-2-6338-1880</li>
             </ul>
           </div>
diff --git a/shared/ui/footer/styles.module.scss b/shared/ui/footer/styles.module.scss
index c3800af9..6f94d891 100644
--- a/shared/ui/footer/styles.module.scss
+++ b/shared/ui/footer/styles.module.scss
@@ -41,7 +41,7 @@
     display: flex;
     flex-direction: column;
     justify-content: space-between;
-    height: 82px;
+    height: 100px;
   }
 }
 
diff --git a/shared/ui/header/_ui/header-links/index.tsx b/shared/ui/header/_ui/header-links/index.tsx
index 2098605a..3c3d5782 100644
--- a/shared/ui/header/_ui/header-links/index.tsx
+++ b/shared/ui/header/_ui/header-links/index.tsx
@@ -20,7 +20,7 @@ const HeaderLinks = ({ isLoggedIn }: Props) => {
         </LinkButton>
       )}
       {isLoggedIn ? (
-        <Button onClick={logout} size="small" variant="filled">
+        <Button onClick={() => logout()} size="small" variant="filled">
           로그아웃
         </Button>
       ) : (
diff --git a/shared/ui/header/back-header/index.tsx b/shared/ui/header/back-header/index.tsx
index ed2b35ec..5f5e2e29 100644
--- a/shared/ui/header/back-header/index.tsx
+++ b/shared/ui/header/back-header/index.tsx
@@ -21,20 +21,25 @@ const headerStyles = {
 
 interface Props {
   label: string
+  href?: string
 }
 
-const BackHeader = ({ label }: Props) => {
-  return <Header Left={<Left label={label} />} styles={headerStyles} />
+const BackHeader = ({ label, href }: Props) => {
+  return <Header Left={<Left label={label} href={href} />} styles={headerStyles} />
 }
 
-const Left = ({ label }: Props) => {
+const Left = ({ label, href }: Props) => {
   const router = useRouter()
-  const onClick = () => {
-    router.back()
+  const handleClick = () => {
+    if (href) {
+      router.push(href)
+    } else {
+      router.back()
+    }
   }
 
   return (
-    <button onClick={onClick} className={cx('container')}>
+    <button onClick={handleClick} className={cx('container')}>
       <BackIcon />
       <span>{label}</span>
     </button>
diff --git a/shared/ui/header/logo-header/index.tsx b/shared/ui/header/logo-header/index.tsx
index 8ac8b42b..01c5bd05 100644
--- a/shared/ui/header/logo-header/index.tsx
+++ b/shared/ui/header/logo-header/index.tsx
@@ -1,4 +1,3 @@
-// NOTE: 이름 공모전 개최
 import Logo from '@/shared/ui/logo'
 
 import Header from '..'
diff --git a/shared/ui/input/index.tsx b/shared/ui/input/index.tsx
index 6c65a096..1d7bb8a4 100644
--- a/shared/ui/input/index.tsx
+++ b/shared/ui/input/index.tsx
@@ -15,9 +15,10 @@ interface Props extends ComponentPropsWithoutRef<'input'> {
   inputSize?: InputSizeType
   errorMessage?: string | null
   isWhiteDisabled?: boolean
+  hideErrorStyle?: boolean
 }
 
-export const Input = forwardRef<HTMLInputElement, Props>(
+const Input = forwardRef<HTMLInputElement, Props>(
   (
     {
       inputSize = 'medium',
@@ -25,6 +26,7 @@ export const Input = forwardRef<HTMLInputElement, Props>(
       value,
       errorMessage,
       isWhiteDisabled = false,
+      hideErrorStyle = false,
       onChange,
       ...props
     },
@@ -39,7 +41,10 @@ export const Input = forwardRef<HTMLInputElement, Props>(
           className={cx(
             'input',
             inputSize,
-            { error: !!errorMessage, 'white-disabled': isWhiteDisabled },
+            {
+              error: !!errorMessage && !hideErrorStyle,
+              'white-disabled': isWhiteDisabled,
+            },
             className
           )}
           {...props}
@@ -51,3 +56,5 @@ export const Input = forwardRef<HTMLInputElement, Props>(
 )
 
 Input.displayName = 'Input'
+
+export default Input
diff --git a/shared/ui/input/input.stories.tsx b/shared/ui/input/input.stories.tsx
index ce01968d..55478435 100644
--- a/shared/ui/input/input.stories.tsx
+++ b/shared/ui/input/input.stories.tsx
@@ -1,6 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react'
 
-import { Input } from './index'
+import Input from './index'
 
 const meta: Meta<typeof Input> = {
   title: 'Components/Input',
diff --git a/shared/ui/input/styles.module.scss b/shared/ui/input/styles.module.scss
index 7210a507..6863a256 100644
--- a/shared/ui/input/styles.module.scss
+++ b/shared/ui/input/styles.module.scss
@@ -8,8 +8,8 @@
   @include typo-b3;
 
   &:focus {
-    color: $color-gray-400;
-    border-color: $color-gray-700;
+    color: none;
+    border-color: none;
   }
 
   &.error {
diff --git a/shared/ui/modal/account-image-modal.tsx b/shared/ui/modal/account-image-modal.tsx
index 723a1a23..ea085126 100644
--- a/shared/ui/modal/account-image-modal.tsx
+++ b/shared/ui/modal/account-image-modal.tsx
@@ -17,7 +17,7 @@ interface Props {
 
 const AccountImageModal = ({ isOpen, title, url, onClose }: Props) => {
   return (
-    <Modal isOpen={isOpen} message={title} className={cx('medium')}>
+    <Modal isOpen={isOpen} message={title} className={cx('max')}>
       <div className={cx('image')}>
         <Image src={url} alt={'imageData.title'} fill sizes="100%" />
       </div>
diff --git a/shared/ui/modal/account-register-modal/styles.module.scss b/shared/ui/modal/account-register-modal/styles.module.scss
index c47acdea..3430a467 100644
--- a/shared/ui/modal/account-register-modal/styles.module.scss
+++ b/shared/ui/modal/account-register-modal/styles.module.scss
@@ -92,7 +92,7 @@
 }
 
 .error-message {
-  color: $color-orange-500;
+  color: $color-orange-700;
   font-size: 14px;
   margin-top: 8px;
 }
diff --git a/shared/ui/modal/add-question-modal.tsx b/shared/ui/modal/add-question-modal.tsx
index 2b0ad897..b210685c 100644
--- a/shared/ui/modal/add-question-modal.tsx
+++ b/shared/ui/modal/add-question-modal.tsx
@@ -9,8 +9,8 @@ import classNames from 'classnames/bind'
 import Modal from '.'
 import { Button } from '../button'
 import { ErrorMessage } from '../error-message'
-import { Input } from '../input'
-import { Textarea } from '../textarea'
+import Input from '../input'
+import Textarea from '../textarea'
 import styles from './styles.module.scss'
 
 const cx = classNames.bind(styles)
diff --git a/shared/ui/modal/alert-modal/index.tsx b/shared/ui/modal/alert-modal/index.tsx
new file mode 100644
index 00000000..39f11825
--- /dev/null
+++ b/shared/ui/modal/alert-modal/index.tsx
@@ -0,0 +1,35 @@
+'use client'
+
+import { ModalAlertIcon } from '@/public/icons'
+import classNames from 'classnames/bind'
+
+import { Button } from '@/shared/ui/button'
+import Modal from '@/shared/ui/modal'
+
+import styles from '../styles.module.scss'
+
+const cx = classNames.bind(styles)
+
+interface Props {
+  isModalOpen: boolean
+  message: string
+  disabled?: boolean
+  onConfirm: () => void
+  onCancel: () => void
+}
+
+const AlertModal = ({ isModalOpen, message, disabled, onConfirm, onCancel }: Props) => {
+  return (
+    <Modal isOpen={isModalOpen} icon={ModalAlertIcon}>
+      <span className={cx('message')}>{message}</span>
+      <div className={cx('two-button')}>
+        <Button onClick={onCancel}>아니오</Button>
+        <Button onClick={onConfirm} disabled={disabled} variant="filled" className={cx('button')}>
+          예
+        </Button>
+      </div>
+    </Modal>
+  )
+}
+
+export default AlertModal
diff --git a/shared/ui/modal/analysis-upload-modal/form/direct-input-form.tsx b/shared/ui/modal/analysis-upload-modal/form/direct-input-form.tsx
index 1c774192..7189f8d6 100644
--- a/shared/ui/modal/analysis-upload-modal/form/direct-input-form.tsx
+++ b/shared/ui/modal/analysis-upload-modal/form/direct-input-form.tsx
@@ -6,7 +6,7 @@ import { useAnalysisUploadMutation } from '@/app/(dashboard)/my/_hooks/query/use
 import classNames from 'classnames/bind'
 
 import { Button } from '@/shared/ui/button'
-import { Input } from '@/shared/ui/input'
+import Input from '@/shared/ui/input'
 
 import styles from './styles.module.scss'
 
@@ -184,6 +184,9 @@ const DirectInputForm = ({ strategyId, onClose }: Props) => {
           </div>
         </div>
       ))}
+      <p className={cx('guide-message')}>
+        *일간분석 데이터 업로드 후 통계지표 집계 및 반영까지 약간의 시간이 소요될 수 있습니다.
+      </p>
 
       {error && <p className={cx('error-message')}>{error}</p>}
 
diff --git a/shared/ui/modal/analysis-upload-modal/form/excel-upload-form.tsx b/shared/ui/modal/analysis-upload-modal/form/excel-upload-form.tsx
index cc54f5a2..8f518a26 100644
--- a/shared/ui/modal/analysis-upload-modal/form/excel-upload-form.tsx
+++ b/shared/ui/modal/analysis-upload-modal/form/excel-upload-form.tsx
@@ -31,10 +31,6 @@ const ExcelUploadForm = ({ strategyId, onClose }: Props) => {
     }
   }
 
-  const handleGuidDownload = () => {
-    //TODO 업로드 가이드 다운로드 api 없음 ;;
-  }
-
   const handleSubmit = async () => {
     if (!file) return
 
@@ -72,10 +68,15 @@ const ExcelUploadForm = ({ strategyId, onClose }: Props) => {
             <FileIcon />
           </button>
         </label>
-        <Button variant="outline" className={cx('guide-button')} onClick={handleGuidDownload}>
-          업로드 가이드 다운
+        <Button variant="outline" className={cx('guide-button')} disabled={isLoading}>
+          <a href="/files/upload-guide.xls" download="엑셀업로드설명.xls">
+            업로드 가이드 다운
+          </a>
         </Button>
       </div>
+      <p className={cx('guide-message')}>
+        *일간분석 데이터 업로드 후 통계지표 집계 및 반영까지 약간의 시간이 소요될 수 있습니다.
+      </p>
 
       {error && <p className={cx('error-message')}>{error}</p>}
 
diff --git a/shared/ui/modal/analysis-upload-modal/form/styles.module.scss b/shared/ui/modal/analysis-upload-modal/form/styles.module.scss
index ffc52938..bd76d097 100644
--- a/shared/ui/modal/analysis-upload-modal/form/styles.module.scss
+++ b/shared/ui/modal/analysis-upload-modal/form/styles.module.scss
@@ -54,6 +54,12 @@
   border: 1px solid #797979;
 }
 
+.guide-message {
+  @include typo-c1;
+  color: $color-gray-600;
+  line-height: 1.2rem;
+}
+
 .button-group {
   display: flex;
   justify-content: center;
@@ -62,7 +68,7 @@
 }
 
 .error-message {
-  color: $color-orange-500;
+  color: $color-orange-700;
   font-size: 14px;
 }
 
@@ -82,7 +88,7 @@
   .data-input {
     width: 170px;
     border-radius: 4px;
-    border: 1px solid $color-gray-200;
+    border: 1px solid $color-gray-300;
     &::placeholder {
       color: $color-gray-400;
       @include typo-c1;
diff --git a/shared/ui/modal/daily-analysis-delete-all-modal.tsx b/shared/ui/modal/daily-analysis-delete-all-modal.tsx
new file mode 100644
index 00000000..983203ee
--- /dev/null
+++ b/shared/ui/modal/daily-analysis-delete-all-modal.tsx
@@ -0,0 +1,33 @@
+import { ModalAlertIcon } from '@/public/icons'
+import classNames from 'classnames/bind'
+
+import Modal from '.'
+import { Button } from '../button'
+import styles from './styles.module.scss'
+
+const cx = classNames.bind(styles)
+
+interface Props {
+  isModalOpen: boolean
+  onCloseModal: () => void
+  onDelete: () => void
+  isPending: boolean
+}
+
+const DailyAnalysisDeleteAllModal = ({ isModalOpen, onCloseModal, onDelete, isPending }: Props) => {
+  return (
+    <Modal isOpen={isModalOpen} icon={ModalAlertIcon}>
+      <span className={cx('message')}>모든 일간 분석을 삭제하시겠습니까?</span>
+      <div className={cx('two-button')}>
+        <Button onClick={onCloseModal} disabled={isPending}>
+          아니오
+        </Button>
+        <Button onClick={onDelete} variant="filled" className={cx('button')} disabled={isPending}>
+          예
+        </Button>
+      </div>
+    </Modal>
+  )
+}
+
+export default DailyAnalysisDeleteAllModal
diff --git a/shared/ui/modal/edit-daily-analysis-modal.ts/index.tsx b/shared/ui/modal/edit-daily-analysis-modal.ts/index.tsx
new file mode 100644
index 00000000..2688a104
--- /dev/null
+++ b/shared/ui/modal/edit-daily-analysis-modal.ts/index.tsx
@@ -0,0 +1,158 @@
+'use client'
+
+import React, { useState } from 'react'
+
+import { useMyAnalysisMutation } from '@/app/(dashboard)/my/_hooks/query/use-manage-daily-analysis'
+import { RegisterIcon } from '@/public/icons'
+import classNames from 'classnames/bind'
+
+import { Button } from '@/shared/ui/button'
+import Input from '@/shared/ui/input'
+import Modal from '@/shared/ui/modal'
+
+import styles from './styles.module.scss'
+
+const cx = classNames.bind(styles)
+
+interface EditAnalysisModalProps {
+  isOpen: boolean
+  onClose: () => void
+  strategyId: number
+  analysisId: number
+  initialData: {
+    date: string
+    transaction: number
+    dailyProfitLoss: number
+  }
+  page: number
+  size: number
+}
+
+const EditAnalysisModal = ({
+  isOpen,
+  onClose,
+  strategyId,
+  initialData,
+  page,
+  size,
+}: EditAnalysisModalProps) => {
+  const [formData, setFormData] = useState({
+    date: initialData.date,
+    transaction: initialData.transaction.toString(),
+    dailyProfitLoss: initialData.dailyProfitLoss.toString(),
+  })
+  const [error, setError] = useState<string>('')
+
+  const { editAnalysisData } = useMyAnalysisMutation(strategyId, page, size)
+
+  const handleChange = (field: 'date' | 'transaction' | 'dailyProfitLoss', value: string) => {
+    setFormData((prev) => ({
+      ...prev,
+      [field]: value,
+    }))
+    setError('')
+  }
+
+  const validateForm = () => {
+    if (!formData.date || !formData.transaction || !formData.dailyProfitLoss) {
+      setError('모든 필드를 입력해주세요.')
+      return false
+    }
+
+    const dateRegex = /^\d{4}-\d{2}-\d{2}$/
+    if (!dateRegex.test(formData.date)) {
+      setError('날짜 형식이 올바르지 않습니다. (YYYY-MM-DD)')
+      return false
+    }
+
+    const transaction = Number(formData.transaction)
+    const dailyProfitLoss = Number(formData.dailyProfitLoss)
+
+    if (isNaN(transaction) || isNaN(dailyProfitLoss)) {
+      setError('입출금과 일손익은 숫자여야 합니다.')
+      return false
+    }
+
+    return true
+  }
+
+  const handleSubmit = () => {
+    try {
+      if (!validateForm()) return
+
+      editAnalysisData(
+        {
+          payload: {
+            date: formData.date,
+            transaction: Number(formData.transaction),
+            dailyProfitLoss: Number(formData.dailyProfitLoss),
+          },
+        },
+        {
+          onSuccess: () => {
+            onClose()
+          },
+          onError: () => {
+            setError('데이터 수정 중 오류가 발생했습니다.')
+          },
+        }
+      )
+    } catch (err) {
+      setError('데이터 수정 중 오류가 발생했습니다.')
+    }
+  }
+
+  return (
+    <Modal isOpen={isOpen} size="big" icon={RegisterIcon} message="일간분석 데이터 수정">
+      <div className={cx('upload-container')}>
+        <div className={cx('form-grid')}>
+          <div className={cx('input-group')}>
+            <label className={cx('label')}>날짜</label>
+            <Input
+              className={cx('data-input')}
+              name="date"
+              value={formData.date}
+              onChange={(e) => handleChange('date', e.target.value)}
+              placeholder="날짜를 입력해주세요."
+            />
+          </div>
+
+          <div className={cx('input-group')}>
+            <label className={cx('label')}>입출금</label>
+            <Input
+              className={cx('data-input')}
+              name="transaction"
+              value={formData.transaction}
+              onChange={(e) => handleChange('transaction', e.target.value)}
+              placeholder="입출금을 입력해주세요."
+            />
+          </div>
+
+          <div className={cx('input-group')}>
+            <label className={cx('label')}>일 손익</label>
+            <Input
+              className={cx('data-input')}
+              name="dailyProfitLoss"
+              value={formData.dailyProfitLoss}
+              onChange={(e) => handleChange('dailyProfitLoss', e.target.value)}
+              placeholder="일손익금을 입력해주세요."
+            />
+          </div>
+        </div>
+
+        {error && <p className={cx('error-message')}>{error}</p>}
+
+        <div className={cx('button-group')}>
+          <Button variant="outline" onClick={onClose}>
+            취소
+          </Button>
+          <Button variant="filled" onClick={handleSubmit}>
+            수정
+          </Button>
+        </div>
+      </div>
+    </Modal>
+  )
+}
+
+export default EditAnalysisModal
diff --git a/shared/ui/modal/edit-daily-analysis-modal.ts/styles.module.scss b/shared/ui/modal/edit-daily-analysis-modal.ts/styles.module.scss
new file mode 100644
index 00000000..6dc9e49e
--- /dev/null
+++ b/shared/ui/modal/edit-daily-analysis-modal.ts/styles.module.scss
@@ -0,0 +1,48 @@
+.upload-container {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  padding: 24px;
+}
+
+.form-grid {
+  display: grid;
+  grid-template-columns: 170px 170px 160px;
+  gap: 24px;
+  align-items: flex-start;
+}
+
+.input-group {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+
+  .label {
+    @include typo-b3;
+    color: $color-gray-800;
+  }
+
+  .data-input {
+    width: 100%;
+    border-radius: 4px;
+    border: 1px solid $color-gray-200;
+
+    &::placeholder {
+      color: $color-gray-400;
+      @include typo-c1;
+    }
+  }
+}
+
+.error-message {
+  color: $color-orange-700;
+  font-size: 14px;
+  margin-top: 8px;
+}
+
+.button-group {
+  display: flex;
+  justify-content: center;
+  gap: 24px;
+  margin-top: 32px;
+}
diff --git a/shared/ui/modal/find-email-modal/index.tsx b/shared/ui/modal/find-email-modal/index.tsx
index 9a3ab0d1..3be9d17c 100644
--- a/shared/ui/modal/find-email-modal/index.tsx
+++ b/shared/ui/modal/find-email-modal/index.tsx
@@ -8,7 +8,7 @@ import classNames from 'classnames/bind'
 
 import { useFindCredentials } from '@/shared/hooks/query/use-find-credentials'
 import { Button } from '@/shared/ui/button'
-import { Input } from '@/shared/ui/input'
+import Input from '@/shared/ui/input'
 import Modal from '@/shared/ui/modal'
 
 import styles from './styles.module.scss'
diff --git a/shared/ui/modal/find-password-modal/index.tsx b/shared/ui/modal/find-password-modal/index.tsx
index 54011583..50e77019 100644
--- a/shared/ui/modal/find-password-modal/index.tsx
+++ b/shared/ui/modal/find-password-modal/index.tsx
@@ -8,7 +8,7 @@ import classNames from 'classnames/bind'
 
 import { useResetPassword } from '@/shared/hooks/custom/use-reset-password'
 import { Button } from '@/shared/ui/button'
-import { Input } from '@/shared/ui/input'
+import Input from '@/shared/ui/input'
 import Modal from '@/shared/ui/modal'
 
 import styles from './styles.module.scss'
@@ -21,29 +21,41 @@ interface Props {
 }
 
 const FindPasswordModal = ({ isOpen, onClose }: Props) => {
-  const [error, setError] = useState('')
+  const [notice, setNotice] = useState('')
+  const [isSuccess, setIsSuccess] = useState(false)
+
   const {
     formData,
     step,
     isPending,
+    countdown,
+    formatCountdown,
+    isEmailVerified,
+    isPasswordReset,
     handleInputChange,
     handleRequestCode,
     handleVerifyEmail,
     handlePasswordReset,
-    setStep,
+    handleNextStep,
     resetForm,
   } = useResetPassword({
-    onSuccess: onClose,
-    onError: (message) => setError(message),
+    onSuccess: (message) => {
+      setNotice(message)
+      setIsSuccess(true)
+    },
+    onError: (message) => {
+      setNotice(message)
+      setIsSuccess(false)
+    },
   })
 
   useEffect(() => {
     if (!isOpen) {
       resetForm()
-      setError('')
-      setStep(1)
+      setNotice('')
+      setIsSuccess(false)
     }
-  }, [isOpen, resetForm, setStep])
+  }, [isOpen])
 
   return (
     <Modal
@@ -53,7 +65,13 @@ const FindPasswordModal = ({ isOpen, onClose }: Props) => {
       className={cx('container')}
     >
       {step === 1 && (
-        <form onSubmit={handleVerifyEmail} className={cx('form')}>
+        <form
+          onSubmit={(e) => {
+            e.preventDefault()
+            handleNextStep()
+          }}
+          className={cx('form')}
+        >
           <p className={cx('explanation')}>본인 인증을 위해 가입한 이메일 주소를 입력해주세요.</p>
           <div className={cx('input-group')}>
             <label>이메일 주소</label>
@@ -65,13 +83,13 @@ const FindPasswordModal = ({ isOpen, onClose }: Props) => {
                 value={formData.email}
                 onChange={handleInputChange}
                 placeholder="이메일을 입력하세요"
-                disabled={isPending}
+                disabled={isPending || isEmailVerified}
                 required
               />
               <Button
                 type="button"
                 onClick={handleRequestCode}
-                disabled={isPending || !formData.email}
+                disabled={isPending || !formData.email || isEmailVerified}
                 variant="filled"
               >
                 인증
@@ -88,25 +106,36 @@ const FindPasswordModal = ({ isOpen, onClose }: Props) => {
                 value={formData.code}
                 onChange={handleInputChange}
                 placeholder="인증번호를 입력하세요"
-                disabled={isPending}
+                disabled={isPending || isEmailVerified}
                 required
               />
               <Button
                 type="button"
                 onClick={handleVerifyEmail}
-                disabled={isPending || !formData.code}
+                disabled={isPending || !formData.code || isEmailVerified}
                 variant="outline"
               >
                 확인
               </Button>
             </div>
+            {countdown > 0 && !isEmailVerified && (
+              <p className={cx('countdown')}>인증 코드 유효시간: {formatCountdown()}</p>
+            )}
           </div>
-          {error && <p className={cx('error')}>{error}</p>}
+
+          {notice && (
+            <p className={cx('notice', { success: isSuccess, error: !isSuccess })}>{notice}</p>
+          )}
+
           <div className={cx('buttons')}>
             <Button type="button" onClick={onClose} variant="outline">
               닫기
             </Button>
-            <Button type="submit" disabled={isPending} variant="filled">
+            <Button
+              type="submit"
+              disabled={isPending || !formData.email || !formData.code || !isEmailVerified}
+              variant="filled"
+            >
               다음
             </Button>
           </div>
@@ -115,7 +144,7 @@ const FindPasswordModal = ({ isOpen, onClose }: Props) => {
 
       {step === 2 && (
         <form onSubmit={handlePasswordReset} className={cx('form')}>
-          <p className={cx('explanation')}>본인 인증을 위해 가입한 이메일 주소를 입력해주세요.</p>
+          <p className={cx('explanation')}>새로운 비밀번호를 설정합니다.</p>
           <div className={cx('input-group')}>
             <label>새 비밀번호</label>
             <Input
@@ -125,9 +154,10 @@ const FindPasswordModal = ({ isOpen, onClose }: Props) => {
               value={formData.password}
               onChange={handleInputChange}
               placeholder="새 비밀번호를 입력하세요"
-              disabled={isPending}
+              disabled={isPending || isPasswordReset}
               required
             />
+            <p className={cx('password-guide')}>* 영문과 숫자를 포함한 6~20자로 입력해주세요.</p>
           </div>
           <div className={cx('input-group')}>
             <label>비밀번호 확인</label>
@@ -138,18 +168,34 @@ const FindPasswordModal = ({ isOpen, onClose }: Props) => {
               value={formData.passwordConfirm}
               onChange={handleInputChange}
               placeholder="비밀번호를 다시 입력하세요"
-              disabled={isPending}
+              disabled={isPending || isPasswordReset}
               required
             />
           </div>
-          {error && <p className={cx('error')}>{error}</p>}
+
+          {notice && (
+            <p className={cx('notice', { success: isSuccess, error: !isSuccess })}>{notice}</p>
+          )}
+
           <div className={cx('buttons')}>
-            <Button type="button" onClick={() => setStep(1)} variant="outline">
-              이전
-            </Button>
-            <Button type="submit" disabled={isPending} variant="filled">
-              재설정
-            </Button>
+            {isPasswordReset ? (
+              <Button type="button" onClick={onClose} variant="filled">
+                닫기
+              </Button>
+            ) : (
+              <>
+                <Button type="button" onClick={onClose} variant="outline">
+                  닫기
+                </Button>
+                <Button
+                  type="submit"
+                  disabled={isPending || !formData.password || !formData.passwordConfirm}
+                  variant="filled"
+                >
+                  재설정
+                </Button>
+              </>
+            )}
           </div>
         </form>
       )}
diff --git a/shared/ui/modal/find-password-modal/styles.module.scss b/shared/ui/modal/find-password-modal/styles.module.scss
index 155d1825..c1ef8e3e 100644
--- a/shared/ui/modal/find-password-modal/styles.module.scss
+++ b/shared/ui/modal/find-password-modal/styles.module.scss
@@ -4,11 +4,13 @@
   display: flex;
   justify-content: center;
 }
+
 .explanation {
   color: $color-gray-800;
   @include typo-c1;
   text-align: center;
 }
+
 .form {
   display: flex;
   flex-direction: column;
@@ -38,17 +40,38 @@
   }
 }
 
-.error {
-  color: $color-orange-700;
+.countdown {
+  font-size: 0.75rem;
+  color: $color-gray-600;
+  margin-top: 0.25rem;
+}
+
+.password-guide {
+  font-size: 0.75rem;
+  color: $color-gray-600;
+  margin-top: 0.25rem;
+}
+
+.notice {
   font-size: 0.8rem;
+  & + .buttons {
+    margin-top: 0;
+  }
+
+  &.success {
+    color: $color-indigo;
+  }
+
+  &.error {
+    color: $color-orange-700;
+  }
 }
 
 .buttons {
   display: flex;
   gap: 36px;
-  margin-top: 1rem;
-  justify-content: center;
   margin-top: 40px;
+  justify-content: center;
 
   button {
     flex: 0.2;
diff --git a/shared/ui/modal/index.tsx b/shared/ui/modal/index.tsx
index e4a13f9f..885a8b8d 100644
--- a/shared/ui/modal/index.tsx
+++ b/shared/ui/modal/index.tsx
@@ -28,7 +28,7 @@ const Modal = ({
 
   const modalRoot = document.getElementById('modal-root')
 
-  if (!isOpen || !modalRoot) return null
+  if (!modalRoot) return null
 
   return createPortal(
     <>
diff --git a/shared/ui/modal/notification-modal/index.tsx b/shared/ui/modal/notification-modal/index.tsx
new file mode 100644
index 00000000..bb9c586a
--- /dev/null
+++ b/shared/ui/modal/notification-modal/index.tsx
@@ -0,0 +1,30 @@
+'use client'
+
+import { ModalAlertIcon } from '@/public/icons'
+import classNames from 'classnames/bind'
+
+import { Button } from '@/shared/ui/button'
+import Modal from '@/shared/ui/modal'
+
+import styles from '../styles.module.scss'
+
+const cx = classNames.bind(styles)
+
+interface Props {
+  isOpen: boolean
+  message: string
+  onClose: () => void
+}
+
+const NotificationModal = ({ isOpen, message, onClose }: Props) => {
+  return (
+    <Modal isOpen={isOpen} icon={ModalAlertIcon}>
+      <span className={cx('message')}>{message}</span>
+      <div className={cx('two-button')}>
+        <Button onClick={onClose}>닫기</Button>
+      </div>
+    </Modal>
+  )
+}
+
+export default NotificationModal
diff --git a/app/(dashboard)/my/questions/_ui/modal/question-delete-modal.tsx b/shared/ui/modal/question-delete-modal/index.tsx
similarity index 100%
rename from app/(dashboard)/my/questions/_ui/modal/question-delete-modal.tsx
rename to shared/ui/modal/question-delete-modal/index.tsx
diff --git a/app/(dashboard)/my/questions/_ui/modal/styles.module.scss b/shared/ui/modal/question-delete-modal/styles.module.scss
similarity index 100%
rename from app/(dashboard)/my/questions/_ui/modal/styles.module.scss
rename to shared/ui/modal/question-delete-modal/styles.module.scss
diff --git a/app/(dashboard)/strategies/[strategyId]/_ui/review-container/review-guide-modal.tsx b/shared/ui/modal/review-guide-modal.tsx
similarity index 80%
rename from app/(dashboard)/strategies/[strategyId]/_ui/review-container/review-guide-modal.tsx
rename to shared/ui/modal/review-guide-modal.tsx
index 92acec9e..8101d9d8 100644
--- a/app/(dashboard)/strategies/[strategyId]/_ui/review-container/review-guide-modal.tsx
+++ b/shared/ui/modal/review-guide-modal.tsx
@@ -15,15 +15,20 @@ const cx = classNames.bind(styles)
 interface Props {
   isModalOpen: boolean
   isErr: boolean
+  isMyStrategy?: boolean
   onCloseModal: () => void
   onChange?: () => void
 }
 
-const ReviewGuideModal = ({ isModalOpen, isErr, onCloseModal, onChange }: Props) => {
+const ReviewGuideModal = ({ isModalOpen, isErr, isMyStrategy, onCloseModal, onChange }: Props) => {
   return (
     <Modal isOpen={isModalOpen} icon={ModalAlertIcon}>
       <span className={cx('message')}>
-        {isErr ? (
+        {isMyStrategy ? (
+          <>
+            나의 전략엔 리뷰를 <br /> 등록 할 수 없습니다.
+          </>
+        ) : isErr ? (
           <>
             이미 등록된 리뷰가 있습니다. <br /> 리뷰는 한 번만 등록 가능합니다.
           </>
diff --git a/shared/ui/modal/signin-check-modal.tsx b/shared/ui/modal/signin-check-modal.tsx
index dc1c0294..93c45f80 100644
--- a/shared/ui/modal/signin-check-modal.tsx
+++ b/shared/ui/modal/signin-check-modal.tsx
@@ -18,23 +18,25 @@ const cx = classNames.bind(styles)
 interface Props {
   isModalOpen: boolean
   onCloseModal: () => void
+  onConfirm: () => void
 }
 
-const SigninCheckModal = ({ isModalOpen, onCloseModal }: Props) => {
+const SigninCheckModal = ({ isModalOpen, onCloseModal, onConfirm }: Props) => {
   const router = useRouter()
-
-  const handleRouter = () => {
-    router.push(PATH.SIGN_IN)
+  const handleModalClose = () => {
+    router.replace(PATH.STRATEGIES)
+    onCloseModal()
   }
-
   return (
     <Modal isOpen={isModalOpen} icon={ModalAlertIcon}>
       <span className={cx('message')}>
-        로그인이 필요합니다. <br /> 로그인 하시겠습니까?
+        로그인이 필요합니다.
+        <br />
+        로그인 하시겠습니까?
       </span>
       <div className={cx('two-button')}>
-        <Button onClick={onCloseModal}>아니오</Button>
-        <Button onClick={handleRouter} variant="filled" className={cx('button')}>
+        <Button onClick={handleModalClose}>아니오</Button>
+        <Button onClick={onConfirm} variant="filled" className={cx('button')}>
           예
         </Button>
       </div>
diff --git a/shared/ui/modal/strategy-delete-modal.tsx b/shared/ui/modal/strategy-delete-modal.tsx
new file mode 100644
index 00000000..d82c8428
--- /dev/null
+++ b/shared/ui/modal/strategy-delete-modal.tsx
@@ -0,0 +1,45 @@
+import { useDeleteMyStrategy } from '@/app/(dashboard)/my/_hooks/query/use-delete-my-strategy'
+import { ModalAlertIcon } from '@/public/icons'
+import classNames from 'classnames/bind'
+
+import Modal from '.'
+import { Button } from '../button'
+import styles from './styles.module.scss'
+
+const cx = classNames.bind(styles)
+
+interface Props {
+  isModalOpen: boolean
+  onCloseModal: () => void
+  strategyId: number
+}
+
+const StrategyDeleteModal = ({ isModalOpen, onCloseModal, strategyId }: Props) => {
+  const { mutate: deleteStrategy, isPending } = useDeleteMyStrategy()
+
+  const handleDelete = () => {
+    deleteStrategy(strategyId)
+    onCloseModal()
+  }
+
+  return (
+    <Modal isOpen={isModalOpen} icon={ModalAlertIcon}>
+      <span className={cx('message')}>해당 전략을 삭제하시겠습니까?</span>
+      <div className={cx('two-button')}>
+        <Button onClick={onCloseModal} disabled={isPending}>
+          아니오
+        </Button>
+        <Button
+          onClick={handleDelete}
+          variant="filled"
+          className={cx('button')}
+          disabled={isPending}
+        >
+          예
+        </Button>
+      </div>
+    </Modal>
+  )
+}
+
+export default StrategyDeleteModal
diff --git a/shared/ui/modal/styles.module.scss b/shared/ui/modal/styles.module.scss
index dcda2eb6..9be6de1e 100644
--- a/shared/ui/modal/styles.module.scss
+++ b/shared/ui/modal/styles.module.scss
@@ -40,6 +40,10 @@
   &.big {
     width: 800px;
   }
+  &.max {
+    width: 100%;
+    max-width: 1000px;
+  }
 }
 
 .icon {
diff --git a/shared/ui/modal/withdraw-check-modal.tsx b/shared/ui/modal/withdraw-check-modal.tsx
new file mode 100644
index 00000000..4441ad63
--- /dev/null
+++ b/shared/ui/modal/withdraw-check-modal.tsx
@@ -0,0 +1,36 @@
+'use client'
+
+import { ModalAlertIcon } from '@/public/icons'
+import classNames from 'classnames/bind'
+
+import Modal from '.'
+import { Button } from '../button'
+import styles from './styles.module.scss'
+
+const cx = classNames.bind(styles)
+
+interface Props {
+  isModalOpen: boolean
+  onCloseModal: () => void
+  onConfirm: () => void
+}
+
+const WithdrawCheckModal = ({ isModalOpen, onCloseModal, onConfirm }: Props) => {
+  return (
+    <Modal isOpen={isModalOpen} icon={ModalAlertIcon}>
+      <span className={cx('message')}>
+        정말 탈퇴하시겠습니까?
+        <br />
+        탈퇴 시 모든 정보가 삭제됩니다.
+      </span>
+      <div className={cx('two-button')}>
+        <Button onClick={onCloseModal}>아니오</Button>
+        <Button onClick={onConfirm} variant="filled" className={cx('button')}>
+          예
+        </Button>
+      </div>
+    </Modal>
+  )
+}
+
+export default WithdrawCheckModal
diff --git a/shared/ui/search-input/index.tsx b/shared/ui/search-input/index.tsx
index 3ad2a59c..a3b5639e 100644
--- a/shared/ui/search-input/index.tsx
+++ b/shared/ui/search-input/index.tsx
@@ -10,18 +10,26 @@ import styles from './styles.module.scss'
 const cx = classNames.bind(styles)
 
 interface Props extends ComponentPropsWithoutRef<'input'> {
+  className?: string
   placeholder?: string
   onSearchIconClick?: () => void
 }
 
-export const SearchInput = forwardRef<HTMLInputElement, Props>(
-  ({ placeholder = '', onSearchIconClick, value, onChange, ...props }: Props, ref) => {
+const SearchInput = forwardRef<HTMLInputElement, Props>(
+  ({ placeholder = '', className, onSearchIconClick, value, onChange, ...props }: Props, ref) => {
+    const handleEnterSearch = (e: React.KeyboardEvent<HTMLInputElement>) => {
+      if (e.key === 'Enter' && onSearchIconClick) {
+        onSearchIconClick()
+      }
+    }
+
     return (
-      <div className={cx('search-input-container')}>
+      <div className={cx('search-input-container', className)}>
         <input
           ref={ref}
           value={value}
           onChange={onChange}
+          onKeyDown={(e) => handleEnterSearch(e)}
           placeholder={placeholder}
           className={cx('search-input')}
           {...props}
@@ -33,3 +41,5 @@ export const SearchInput = forwardRef<HTMLInputElement, Props>(
 )
 
 SearchInput.displayName = 'SearchInput'
+
+export default SearchInput
diff --git a/shared/ui/search-input/search-input.stories.tsx b/shared/ui/search-input/search-input.stories.tsx
index 1d6e163c..4298a6af 100644
--- a/shared/ui/search-input/search-input.stories.tsx
+++ b/shared/ui/search-input/search-input.stories.tsx
@@ -1,6 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react'
 
-import { SearchInput } from './index'
+import SearchInput from './index'
 
 const meta: Meta<typeof SearchInput> = {
   title: 'Components/SearchInput',
diff --git a/shared/ui/side-navigation/nav-link-item.tsx b/shared/ui/side-navigation/nav-link-item.tsx
index 53408ed6..c074c065 100644
--- a/shared/ui/side-navigation/nav-link-item.tsx
+++ b/shared/ui/side-navigation/nav-link-item.tsx
@@ -7,25 +7,31 @@ import classNames from 'classnames/bind'
 
 import { PATH } from '@/shared/constants/path'
 
+import Avatar from '../avatar'
 import styles from './styles.module.scss'
 
 const cx = classNames.bind(styles)
 
 interface Props {
   href: string
-  icon: React.ElementType
+  icon?: React.ElementType
   children: React.ReactNode
   textClassName?: keyof typeof styles
+  imageUrl?: string
 }
 
-const NavLinkItem = ({ href, icon: Icon, textClassName, children }: Props) => {
+const NavLinkItem = ({ href, icon: Icon, textClassName, children, imageUrl }: Props) => {
   const path = usePathname()
   const isActive = path.startsWith(href) && href !== PATH.PROFILE
 
   return (
     <li className={cx('navigation-item')}>
       <Link href={href} className={cx('link', isActive && 'active')}>
-        <Icon className={cx('icon')} />
+        {Icon ? (
+          <Icon className={cx('icon')} />
+        ) : (
+          <Avatar size="medium" src={imageUrl} avatarStyle={{ marginLeft: '-4px' }} />
+        )}
         <span className={cx('text', textClassName)}>{children}</span>
       </Link>
     </li>
diff --git a/shared/ui/side-navigation/styles.module.scss b/shared/ui/side-navigation/styles.module.scss
index 231e10f2..aea296ee 100644
--- a/shared/ui/side-navigation/styles.module.scss
+++ b/shared/ui/side-navigation/styles.module.scss
@@ -110,12 +110,16 @@
 .user {
   display: flex;
   flex-direction: column;
+  margin-left: -4px;
 
   .nickname {
     color: $color-gray-800;
   }
 
   .email {
-    font-size: $text-c2;
+    width: 90%;
+    font-size: $text-c1;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
 }
diff --git a/shared/ui/side-navigation/user-navigation.tsx b/shared/ui/side-navigation/user-navigation.tsx
index c503aedd..edb4eb34 100644
--- a/shared/ui/side-navigation/user-navigation.tsx
+++ b/shared/ui/side-navigation/user-navigation.tsx
@@ -2,7 +2,7 @@
 
 import { usePathname } from 'next/navigation'
 
-import { ChangeIcon, ProfileIcon, SignOutIcon } from '@/public/icons'
+import { ChangeIcon, SignOutIcon } from '@/public/icons'
 import classNames from 'classnames/bind'
 
 import { PATH } from '@/shared/constants/path'
@@ -27,7 +27,7 @@ const UserNavigation = () => {
   return (
     <nav className={cx('user-navigation')} aria-label="사용자 메뉴">
       <ul>
-        <NavLinkItem href={PATH.PROFILE} icon={ProfileIcon} textClassName="user">
+        <NavLinkItem href={PATH.PROFILE} imageUrl={user.imageUrl} textClassName="user">
           <span className={cx('nickname')}>{user.nickname}</span>
           <span className={cx('email')}>{user.email}</span>
         </NavLinkItem>
diff --git a/shared/ui/table/statistics/constant.ts b/shared/ui/table/statistics/constant.ts
index 4b6fada2..4d674cca 100644
--- a/shared/ui/table/statistics/constant.ts
+++ b/shared/ui/table/statistics/constant.ts
@@ -35,7 +35,7 @@ export const inKoreanData = {
   tradingInfo: '거래 관련 정보',
 } as const
 
-export const STATISTICS_PERCENT = [
+export const STATISTICS_FORMATTED_PERCENT = [
   '누적 수익률',
   '최대 누적 수익률',
   '평균 손익률',
@@ -46,12 +46,17 @@ export const STATISTICS_PERCENT = [
   '승률',
 ]
 
+export const STATISTICS_PERCENT = ['자산 수익률']
+
 export const STATISTICS_DATE = [
   '고점 갱신 후 경과일',
   '총 거래 일수',
   '총 이익 일수',
   '총 손실 일수',
-  '현재 연속 손익 일수',
+  '현재 연속 손실 일수',
   '최대 연속 이익 일수',
   '최대 연속 손실 일수',
+  '운용 기간',
 ]
+
+export const STATISTICS_RAW = ['시작 일자', '종료 일자', 'Profit Factor']
diff --git a/shared/ui/table/statistics/index.tsx b/shared/ui/table/statistics/index.tsx
index af8eb75c..6051054f 100644
--- a/shared/ui/table/statistics/index.tsx
+++ b/shared/ui/table/statistics/index.tsx
@@ -2,7 +2,13 @@ import classNames from 'classnames/bind'
 
 import { formatNumber } from '@/shared/utils/format'
 
-import { STATISTICS_DATE, STATISTICS_PERCENT, inKoreanData } from './constant'
+import {
+  STATISTICS_DATE,
+  STATISTICS_FORMATTED_PERCENT,
+  STATISTICS_PERCENT,
+  STATISTICS_RAW,
+  inKoreanData,
+} from './constant'
 import styles from './styles.module.scss'
 
 const cx = classNames.bind(styles)
@@ -42,6 +48,22 @@ const StatisticsTable = ({ title, statisticsData }: Props) => {
     }
   )
 
+  const formatStatisticsValue = (key: string, value: number) => {
+    if (STATISTICS_FORMATTED_PERCENT.includes(key)) {
+      return Number(value).toFixed(2) + ' %'
+    }
+    if (STATISTICS_PERCENT.includes(key)) {
+      return (Number(value) * 100).toFixed(2) + ' %'
+    }
+    if (STATISTICS_DATE.includes(key)) {
+      return formatNumber(value) + ' 일'
+    }
+    if (STATISTICS_RAW.includes(key)) {
+      return formatNumber(value)
+    }
+    return formatNumber(value) + ' 원'
+  }
+
   return (
     <div className={cx('container')}>
       <p>{titleInKorean ?? title}</p>
@@ -50,21 +72,11 @@ const StatisticsTable = ({ title, statisticsData }: Props) => {
           {groupedData.map((row, idx) => (
             <tr key={idx}>
               <td>{row[0]}</td>
-              <td>
-                {STATISTICS_PERCENT.includes(row[0] as string)
-                  ? Number(row[1]).toFixed(2) + '%'
-                  : formatNumber(row[1])}
-                {STATISTICS_DATE.includes(row[0] as string) && '일'}
-              </td>
+              <td>{formatStatisticsValue(row[0] as string, row[1] as number)}</td>
               {row[2] && (
                 <>
                   <td>{row[2]}</td>
-                  <td>
-                    {STATISTICS_PERCENT.includes(row[2] as string)
-                      ? Number(row[3]).toFixed(2) + '%'
-                      : formatNumber(row[3])}
-                    {STATISTICS_DATE.includes(row[2] as string) && '일'}
-                  </td>
+                  <td>{formatStatisticsValue(row[2] as string, row[3] as number)}</td>
                 </>
               )}
             </tr>
diff --git a/shared/ui/table/statistics/styles.module.scss b/shared/ui/table/statistics/styles.module.scss
index a4b15362..42b20517 100644
--- a/shared/ui/table/statistics/styles.module.scss
+++ b/shared/ui/table/statistics/styles.module.scss
@@ -4,7 +4,7 @@
   table {
     width: 100%;
     margin-top: 10px;
-    font-size: $text-c1;
+    font-size: $text-b3;
     td:nth-child(2n + 1) {
       font-weight: $text-semibold;
       color: $color-gray-600;
@@ -13,10 +13,20 @@
     td {
       padding: 0 20px;
       width: 120px;
-      height: 32px;
+      height: 36px;
       text-align: start;
       vertical-align: middle;
       border: 1px solid $color-white;
     }
   }
+  @include tablet-md {
+    padding: 10px;
+    table {
+      font-size: $text-c1;
+      td {
+        height: 32px;
+        padding: 0 4px;
+      }
+    }
+  }
 }
diff --git a/shared/ui/table/vertical/index.tsx b/shared/ui/table/vertical/index.tsx
index ebd14ad9..ac912f10 100644
--- a/shared/ui/table/vertical/index.tsx
+++ b/shared/ui/table/vertical/index.tsx
@@ -1,11 +1,15 @@
-// import { TABLE_DATA } from '@/app/admin/notices/tabledata'
+'use client'
+
 import { ReactNode } from 'react'
 
 import { NoticeListContentModel } from '@/app/(landing)/notices/_ui/notice-table'
 import classNames from 'classnames/bind'
 
-import { DailyAnalysisModel, MonthlyAnalysisModel } from '@/shared/types/strategy-data'
-import { Button } from '@/shared/ui/button'
+import {
+  DailyAnalysisModel,
+  MonthlyAnalysisModel,
+  MyDailyAnalysisModel,
+} from '@/shared/types/strategy-data'
 import { formatNumber } from '@/shared/utils/format'
 import sliceArray from '@/shared/utils/slice-array'
 
@@ -13,8 +17,9 @@ import styles from './styles.module.scss'
 
 const cx = classNames.bind(styles)
 
-type TableBodyDataType =
+export type TableBodyDataType =
   | DailyAnalysisModel
+  | MyDailyAnalysisModel
   | MonthlyAnalysisModel
   | NoticeListContentModel
   | Array<ReactNode | string | number>
@@ -24,8 +29,10 @@ export interface VerticalTableProps {
   tableBody: TableBodyDataType[]
   countPerPage: number
   currentPage: number
-  isEditable?: boolean
   className?: string
+  renderActions?: (row: TableBodyDataType) => ReactNode | null
+  hideFirstColumn?: boolean
+  colWidths?: number[]
 }
 
 const VerticalTable = ({
@@ -33,21 +40,33 @@ const VerticalTable = ({
   tableBody,
   countPerPage,
   currentPage,
-  isEditable = false,
   className,
+  renderActions,
+  hideFirstColumn = false,
+  colWidths = [],
 }: VerticalTableProps) => {
   const hasData = tableBody.length > 0
   const slicedTableBody = sliceArray(tableBody, countPerPage, currentPage)
 
+  const widths = colWidths.length > 0 ? colWidths : new Array(tableHead.length).fill(1)
+
+  const totalWidth = widths.reduce((sum, width) => sum + width, 0)
+
   return (
     <div className={cx('container', className)}>
       <table>
+        <colgroup>
+          {widths.map((width, index) => (
+            <col key={index} style={{ width: `${(width / totalWidth) * 100}%` }} />
+          ))}
+          {renderActions && <col style={{ width: '150px' }} />}
+        </colgroup>
         <thead>
           <tr>
             {tableHead.map((head) => (
               <td key={head}>{head}</td>
             ))}
-            {isEditable && <td></td>}
+            {renderActions && <td></td>}
           </tr>
         </thead>
         {hasData && (
@@ -55,20 +74,11 @@ const VerticalTable = ({
             {slicedTableBody.map((row) => (
               <tr key={Object.values(row)[0]}>
                 {Object.values(row)
-                  .slice(isEditable ? 1 : 0)
+                  .slice(hideFirstColumn ? 1 : 0)
                   .map((data, idx) => (
-                    <td key={data + idx}>{formatNumber(data)}</td>
+                    <td key={`${data}-${idx}`}>{formatNumber(data)}</td>
                   ))}
-                {isEditable && (
-                  <td className={cx('button-container')}>
-                    <Button size="small" variant="outline" className={cx('edit-button')}>
-                      수정
-                    </Button>
-                    <Button size="small" variant="filled" className={cx('delete-button')}>
-                      삭제
-                    </Button>
-                  </td>
-                )}
+                {renderActions && <td className={cx('button-container')}>{renderActions(row)}</td>}
               </tr>
             ))}
           </tbody>
@@ -83,18 +93,52 @@ const VerticalTable = ({
   )
 }
 
-const Skeleton = ({ tableHead, countPerPage, isEditable = false }: Partial<VerticalTableProps>) => {
+const Skeleton = ({
+  tableHead,
+  countPerPage,
+  renderActions,
+  colWidths = [],
+}: Partial<VerticalTableProps>) => {
+  if (!tableHead || !countPerPage) return null
+
+  const widths = colWidths.length > 0 ? colWidths : new Array(tableHead.length).fill(1)
+
+  const totalWidth = widths.reduce((sum, width) => sum + width, 0)
+
   return (
     <div className={cx('container')}>
       <table>
+        <colgroup>
+          {widths.map((width, index) => (
+            <col key={index} style={{ width: `${(width / totalWidth) * 100}%` }} />
+          ))}
+          {renderActions && <col style={{ width: '150px' }} />}
+        </colgroup>
         <thead>
           <tr>
-            {tableHead?.map((head) => <td key={head}>{head}</td>)}
-            {isEditable && <td></td>}
+            {tableHead.map((head) => (
+              <td key={head}>{head}</td>
+            ))}
+            {renderActions && <td></td>}
           </tr>
         </thead>
+        <tbody>
+          {[...Array(countPerPage)].map((_, rowIdx) => (
+            <tr key={rowIdx}>
+              {tableHead.map((_, colIdx) => (
+                <td key={colIdx} className={cx('skeleton-cell')}>
+                  <div className={cx('skeleton-content')} />
+                </td>
+              ))}
+              {renderActions && (
+                <td className={cx('button-container')}>
+                  <div className={cx('skeleton-button')} />
+                </td>
+              )}
+            </tr>
+          ))}
+        </tbody>
       </table>
-      <div className={cx('no-data')} style={{ height: `calc(40px * ${countPerPage}` }} />
     </div>
   )
 }
diff --git a/shared/ui/table/vertical/styles.module.scss b/shared/ui/table/vertical/styles.module.scss
index b3b10445..1ccff246 100644
--- a/shared/ui/table/vertical/styles.module.scss
+++ b/shared/ui/table/vertical/styles.module.scss
@@ -4,37 +4,69 @@
 
   table {
     width: 100%;
-    font-size: $text-c1;
+    font-size: $text-b3;
+    table-layout: fixed;
 
     thead {
       background-color: $color-gray-100;
     }
 
     td {
-      padding: 0 20px;
-      height: 40px;
+      padding: 0 4px;
+      height: 44px;
       text-align: start;
       vertical-align: middle;
       border-top: 1px solid $color-gray-200;
       border-bottom: 1px solid $color-gray-200;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    & td:first-child {
+      padding-left: 20px;
+      @include tablet-md {
+        padding-left: 10px;
+      }
+    }
+
+    td:has(div[class*='dropdown']) {
+      overflow: visible;
     }
 
     .button-container {
+      display: flex;
+      justify-content: center;
+      align-items: center;
       padding: 0;
       text-align: right;
     }
-
-    .edit-button,
-    .delete-button {
-      min-width: 60px;
-      height: 24px;
-      padding: 7px 16px;
-    }
-    .edit-button {
-      border: 1px solid $color-gray-300;
-      margin-right: 8px;
+  }
+  @include tablet-md {
+    padding: 10px;
+    table {
+      height: 40px;
+      font-size: $text-c1;
     }
   }
+
+  .skeleton-cell {
+    position: relative;
+    overflow: hidden;
+  }
+
+  .skeleton-content {
+    @include skeleton;
+    width: 70%;
+    height: 16px;
+    margin: 4px 0;
+  }
+
+  .skeleton-button {
+    width: 80px;
+    height: 24px;
+    background: $color-gray-200;
+    border-radius: 4px;
+  }
 }
 
 .no-data {
diff --git a/shared/ui/tabs/styles.module.scss b/shared/ui/tabs/styles.module.scss
index 3fcdc3d9..68002f11 100644
--- a/shared/ui/tabs/styles.module.scss
+++ b/shared/ui/tabs/styles.module.scss
@@ -38,4 +38,7 @@
       background-color: $color-orange-500;
     }
   }
+  @include tablet-md {
+    font-size: $text-b2;
+  }
 }
diff --git a/shared/ui/textarea/index.tsx b/shared/ui/textarea/index.tsx
index 65b00998..2468c41e 100644
--- a/shared/ui/textarea/index.tsx
+++ b/shared/ui/textarea/index.tsx
@@ -12,7 +12,7 @@ interface Props extends ComponentProps<'textarea'> {
   rows?: number
 }
 
-export const Textarea = forwardRef<HTMLTextAreaElement, Props>(
+const Textarea = forwardRef<HTMLTextAreaElement, Props>(
   ({ rows = 5, className, value, onChange, ...props }, ref) => {
     return (
       <textarea
@@ -28,3 +28,5 @@ export const Textarea = forwardRef<HTMLTextAreaElement, Props>(
 )
 
 Textarea.displayName = 'Textarea'
+
+export default Textarea
diff --git a/shared/ui/textarea/textarea.stories.tsx b/shared/ui/textarea/textarea.stories.tsx
index b80f2a6d..565946d9 100644
--- a/shared/ui/textarea/textarea.stories.tsx
+++ b/shared/ui/textarea/textarea.stories.tsx
@@ -1,6 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react'
 
-import { Textarea } from './index'
+import Textarea from './index'
 
 const meta: Meta<typeof Textarea> = {
   title: 'Components/Textarea',
diff --git a/shared/ui/total-star/index.tsx b/shared/ui/total-star/index.tsx
index 4af98681..37bb6bdd 100644
--- a/shared/ui/total-star/index.tsx
+++ b/shared/ui/total-star/index.tsx
@@ -26,7 +26,7 @@ const TotalStar = ({
       <div className={cx('icon')}>
         <Star size={size} />
       </div>
-      <p className={cx('text')}>{averageRating}</p>
+      <p className={cx('text')}>{averageRating !== 0 ? averageRating.toFixed(1) : averageRating}</p>
       <p className={cx('text')}>({totalElements})</p>
     </div>
   )
diff --git a/shared/ui/traders-list-card/index.tsx b/shared/ui/traders-list-card/index.tsx
index 4e07ce4c..ae3a3375 100644
--- a/shared/ui/traders-list-card/index.tsx
+++ b/shared/ui/traders-list-card/index.tsx
@@ -10,7 +10,7 @@ const cx = classNames.bind(styles)
 
 interface Props {
   nickname: string
-  imageUrl: string
+  imageUrl?: string
   strategyCount: number
   subscriberCount: number
   userId: number
diff --git a/shared/utils/auth-path.ts b/shared/utils/auth-path.ts
index ced0c131..4389d40a 100644
--- a/shared/utils/auth-path.ts
+++ b/shared/utils/auth-path.ts
@@ -1,9 +1,15 @@
 import { AUTH_REQUIRED_PATTERNS, NON_AUTH_PAGES } from '../constants/auth'
 
-export const isAuthRequiredPath = (pathname: string): boolean => {
-  return AUTH_REQUIRED_PATTERNS.some((pattern) => pathname.startsWith(pattern))
+export const isAuthRequiredPath = (path: string): boolean => {
+  return AUTH_REQUIRED_PATTERNS.some((pattern) => {
+    if (pattern.includes('[0-9]+')) {
+      const regex = new RegExp(pattern.replace('[0-9]+', '\\d+'))
+      return regex.test(path)
+    }
+    return path.startsWith(pattern)
+  })
 }
 
-export const isNonAuthPage = (pathname: string): boolean => {
-  return NON_AUTH_PAGES.some((page) => pathname.startsWith(page))
+export const isNonAuthPage = (path: string): boolean => {
+  return NON_AUTH_PAGES.some((nonAuthPath) => path === nonAuthPath)
 }
diff --git a/shared/utils/chart.ts b/shared/utils/chart.ts
new file mode 100644
index 00000000..09837e33
--- /dev/null
+++ b/shared/utils/chart.ts
@@ -0,0 +1,24 @@
+export const findNearestNonZeroValue = (arr: number[], currentIndex: number): number => {
+  if (arr[currentIndex] !== 0) return arr[currentIndex]
+
+  let leftIndex = currentIndex - 1
+  let rightIndex = currentIndex + 1
+
+  while (leftIndex >= 0 || rightIndex < arr.length) {
+    if (leftIndex >= 0 && arr[leftIndex] !== 0) {
+      return arr[leftIndex]
+    }
+
+    if (rightIndex < arr.length && arr[rightIndex] !== 0) {
+      return arr[rightIndex]
+    }
+    leftIndex--
+    rightIndex++
+  }
+
+  return 0
+}
+
+export const processChartData = (data: number[]): number[] => {
+  return data.map((num, idx) => (num === 0 ? findNearestNonZeroValue(data, idx) : num))
+}
diff --git a/shared/utils/excel-utils.ts b/shared/utils/excel-utils.ts
index 2b7d3a45..c7db59ee 100644
--- a/shared/utils/excel-utils.ts
+++ b/shared/utils/excel-utils.ts
@@ -25,22 +25,20 @@ export const processExcelFile = (file: File): Promise<RowDataModel[]> => {
         })
 
         const header = jsonData[0]
-        if (!header || header[0] !== '일자' || header[1] !== '입출금' || header[2] !== '일일손익') {
-          throw new Error('올바른 형식의 엑셀 파일이 아닙니다.')
-        }
+        validateHeaders(header)
 
         const rows: RowDataModel[] = jsonData
           .slice(1)
           .filter((row) => row.length >= 3)
           .map((row) => ({
-            date: parseExcelDate(row[0] as number),
-            transaction: Number(row[1]),
-            dailyProfitLoss: Number(row[2]),
+            date: parseExcelDate(row[0] ?? ''),
+            transaction: Number(row[1] ?? 0),
+            dailyProfitLoss: Number(row[2] ?? 0),
           }))
 
         resolve(rows)
-      } catch (error) {
-        reject(error)
+      } catch (err) {
+        reject(err)
       }
     }
 
@@ -49,7 +47,17 @@ export const processExcelFile = (file: File): Promise<RowDataModel[]> => {
   })
 }
 
-const parseExcelDate = (excelDate: number): string => {
+const parseExcelDate = (excelDate: number | string | null): string => {
+  if (excelDate === null) return ''
+
+  const dateStr = String(excelDate).replace(/[^0-9]/g, '')
+  if (dateStr.length === 8) {
+    const year = dateStr.substring(0, 4)
+    const month = dateStr.substring(4, 6)
+    const day = dateStr.substring(6, 8)
+    return `${year}-${month}-${day}`
+  }
+
   if (typeof excelDate === 'number') {
     const date = XLSX.SSF.parse_date_code(excelDate)
     const year = date.y
@@ -57,5 +65,18 @@ const parseExcelDate = (excelDate: number): string => {
     const day = String(date.d).padStart(2, '0')
     return `${year}-${month}-${day}`
   }
+
   return String(excelDate)
 }
+
+const validateHeaders = (header: (string | number | null)[]) => {
+  const requiredHeaders = ['일자', '입출금', '일손익']
+
+  const missingHeaders = requiredHeaders.filter(
+    (requiredHeader) => !header.some((h) => h?.toString().includes(requiredHeader))
+  )
+
+  if (missingHeaders.length > 0) {
+    throw new Error(`다음 헤더를 포함해야 합니다: ${missingHeaders.join(', ')}`)
+  }
+}
diff --git a/shared/utils/format.ts b/shared/utils/format.ts
index 164869e9..3148cf8b 100644
--- a/shared/utils/format.ts
+++ b/shared/utils/format.ts
@@ -1,16 +1,36 @@
-export const formatDateTime = (dateString: string) => {
-  const date = new Date(dateString)
-
-  if (isNaN(date.getTime())) {
-    return dateString
-  }
-
+const splitDate = (date: Date) => {
   const year = date.getFullYear()
   const month = String(date.getMonth() + 1).padStart(2, '0')
   const day = String(date.getDate()).padStart(2, '0')
   const hours = String(date.getHours()).padStart(2, '0')
   const minutes = String(date.getMinutes()).padStart(2, '0')
 
+  return {
+    year,
+    month,
+    day,
+    hours,
+    minutes,
+  }
+}
+
+export const formatDate = (dateString: string) => {
+  const date = new Date(dateString)
+
+  if (isNaN(date.getTime())) return dateString
+
+  const { year, month, day } = splitDate(date)
+
+  return `${year}.${month}.${day}`
+}
+
+export const formatDateTime = (dateString: string) => {
+  const date = new Date(dateString)
+
+  if (isNaN(date.getTime())) return dateString
+
+  const { year, month, day, hours, minutes } = splitDate(date)
+
   return `${year}.${month}.${day} ${hours}:${minutes}`
 }
 
diff --git a/shared/utils/table.ts b/shared/utils/table.ts
new file mode 100644
index 00000000..ab6016c3
--- /dev/null
+++ b/shared/utils/table.ts
@@ -0,0 +1,11 @@
+export const calculateTableNumber = ({
+  page,
+  idx,
+  countPerPage,
+}: {
+  page: number
+  idx: number
+  countPerPage: number
+}) => {
+  return (page - 1) * countPerPage + (idx + 1)
+}
diff --git a/shared/utils/token-utils.ts b/shared/utils/token-utils.ts
index 2f795560..b23a3b71 100644
--- a/shared/utils/token-utils.ts
+++ b/shared/utils/token-utils.ts
@@ -38,8 +38,8 @@ export const refreshToken = async (): Promise<string | null> => {
     setAccessToken(newAccessToken, currentUser)
     pendingRefreshRequests.forEach((callback) => callback(newAccessToken))
     return newAccessToken
-  } catch (error) {
-    console.error('Token refresh failed:', error)
+  } catch (err) {
+    console.error('Token refresh failed:', err)
     return null
   } finally {
     isRefreshInProgress = false
@@ -54,8 +54,8 @@ export const isTokenExpired = (token: string): boolean => {
     const expiryTime = decoded.exp * 1000
 
     return expiryTime - currentTime <= AUTH_TIME.SAFETY_MARGIN
-  } catch (error) {
-    console.error('Token expiry check failed:', error)
+  } catch (err) {
+    console.error('Token expiry check failed:', err)
     return true
   }
 }
@@ -67,8 +67,8 @@ export const isNearExpiry = (token: string): boolean => {
     const expiryTime = decoded.exp * 1000
 
     return expiryTime - currentTime < AUTH_TIME.ADMIN_EXPIRY_WARNING
-  } catch (error) {
-    console.error('Near expiry check failed:', error)
+  } catch (err) {
+    console.error('Near expiry check failed:', err)
     return true
   }
 }
@@ -79,8 +79,8 @@ export const getEmailFromToken = (token: string | null): string | null => {
   try {
     const decoded = jwtDecode<TokenPayloadModel>(token)
     return decoded.email || null
-  } catch (error) {
-    console.error('Email extraction failed:', error)
+  } catch (err) {
+    console.error('Email extraction failed:', err)
     return null
   }
 }
@@ -92,8 +92,8 @@ export const getTimeUntilExpiry = (token: string): number => {
     const expiryTime = decoded.exp * 1000
 
     return Math.max(0, expiryTime - currentTime)
-  } catch (error) {
-    console.error('Time until expiry calculation failed:', error)
+  } catch (err) {
+    console.error('Time until expiry calculation failed:', err)
     return 0
   }
 }
diff --git a/shared/utils/upload-files-with-presigned-url.ts b/shared/utils/upload-files-with-presigned-url.ts
new file mode 100644
index 00000000..2b8758bc
--- /dev/null
+++ b/shared/utils/upload-files-with-presigned-url.ts
@@ -0,0 +1,26 @@
+const uploadFilesWithPresignedUrl = async (files: File[], presignedUrls: string[]) => {
+  try {
+    await Promise.all(
+      files.map((file, idx) => {
+        if (presignedUrls[idx]) {
+          return fetch(presignedUrls[idx], {
+            method: 'PUT',
+            body: file,
+            headers: {
+              'Content-Type': file.type,
+            },
+          })
+        } else {
+          throw new Error(`Presigned URL이 인덱스 ${idx}에 대해 없습니다.`)
+        }
+      })
+    )
+  } catch (err) {
+    if (err instanceof Error) {
+      throw new Error(`File upload failed: ${err.message}`)
+    }
+    throw err
+  }
+}
+
+export default uploadFilesWithPresignedUrl
diff --git a/shared/utils/validation.ts b/shared/utils/validation.ts
index b537a9e0..4d0e5942 100644
--- a/shared/utils/validation.ts
+++ b/shared/utils/validation.ts
@@ -2,7 +2,7 @@ import { ERROR_MESSAGES } from '@/shared/constants/error-messages'
 
 const PATTERNS = {
   EMAIL: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/,
-  PASSWORD: /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d@$!%*?&]{6,}$/,
+  PASSWORD: /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d!@#$%^&*(),.?":{}|<>]{6,20}$/,
   PHONE: /^01([0|1|6|7|8|9])([0-9]{3,4})([0-9]{4})$/,
   NAME: /^.{2,}$/,
   NICKNAME: /^.{2,10}$/,