[Fix] 업로드 가이드 저장 오류

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**은 **투자 매매 전략 공유 및
+중개소셜 플랫폼 서비스** 입니다.
+
+## 테스트 계정
+
+| **역할**     | **이메일**           | **비밀번호** |
+| ------------ | -------------------- | ------------ |
+| **투자자**   | [email protected] | investor123  |
+| **트레이더** | [email protected]   | 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)

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) => (

app/(dashboard)/_ui/analysis-container/analysis-chart.tsx

@@ -5,16 +5,16 @@ 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,
 })
 
 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',