FC-DEV-FinalProject · devdeun · Nov 29, 2024 · Nov 29, 2024 · Nov 29, 2024 · Nov 29, 2024
diff --git a/app/(dashboard)/_ui/details-information/index.tsx b/app/(dashboard)/_ui/details-information/index.tsx
@@ -12,9 +12,10 @@ const cx = classNames.bind(styles)
 
 interface Props {
   information: StrategyDetailsInformationModel
+  type?: 'default' | 'my'
 }
 
-const DetailsInformation = ({ information }: Props) => {
+const DetailsInformation = ({ information, type = 'default' }: Props) => {
   const percentageToArray = [
     { percent: information.cumulativeProfitRate, label: '누적 수익률' },
     { percent: information.maxDrawdownRate, label: '최대 자본 인하율' },
@@ -38,11 +39,13 @@ const DetailsInformation = ({ information }: Props) => {
         />
       </div>
       <StrategyIntroduction content={information.strategyDescription} />
-      <div className={cx('percentage-container')}>
-        {percentageToArray.map((data) => (
-          <Percentage key={data.label} percent={data.percent} label={data.label} />
-        ))}
-      </div>
+      {type === 'default' && (
+        <div className={cx('percentage-container')}>
+          {percentageToArray.map((data) => (
+            <Percentage key={data.label} percent={data.percent} label={data.label} />
+          ))}
+        </div>
+      )}
     </>
   )
 }

diff --git a/app/(dashboard)/_ui/introduction/styles.module.scss b/app/(dashboard)/_ui/introduction/styles.module.scss
@@ -3,6 +3,7 @@
   background-color: $color-white;
   border-radius: 5px;
   padding: 20px;
+  margin-bottom: 20px;
   .title {
     @include typo-b2;
     margin-bottom: 15px;

diff --git a/app/(dashboard)/my/_api/get-my-strategy-list.ts b/app/(dashboard)/my/_api/get-my-strategy-list.ts
@@ -13,7 +13,7 @@ interface StrategiesResponseModel {
 
 export const getMyStrategyList = async ({ page = 1, size = 4 }: { page: number; size: number }) => {
   const response = await axiosInstance.get<StrategiesResponseModel>(
-    `/api/my-strategies/page=${page}&size=${size}`
+    `/api/my-strategies?page=${page}&size=${size}`
   )
   return response.data.result
 }
diff --git a/app/(dashboard)/my/strategies/manage/[strategyId]/page.tsx b/app/(dashboard)/my/strategies/manage/[strategyId]/page.tsx
@@ -1,5 +1,65 @@
-const StrategyManagePage = () => {
-  return <></>
-}
+'use client'
+
+import DetailsInformation from '@/app/(dashboard)/_ui/details-information'
+import DetailsSideItem, {
+  InformationModel,
+  TitleType,
+} from '@/app/(dashboard)/_ui/details-side-item'
+import useGetDetailsInformationData from '@/app/(dashboard)/strategies/[strategyId]/_hooks/query/use-get-details-information-data'
+import AnalysisContainer from '@/app/(dashboard)/strategies/[strategyId]/_ui/analysis-container'
+import SubscriberItem from '@/app/(dashboard)/strategies/[strategyId]/_ui/subscriber-item'
+import SideContainer from '@/app/(dashboard)/strategies/_ui/side-container'
+import classNames from 'classnames/bind'
+
+import { useMSWStore } from '@/shared/stores/msw'
+import { Button } from '@/shared/ui/button'
+import BackHeader from '@/shared/ui/header/back-header'
+import Title from '@/shared/ui/title'
+
+import styles from './styles.module.scss'
+
+const cx = classNames.bind(styles)
 
+export type InformationType = { title: TitleType; data: string | number } | InformationModel[]
+
+const StrategyManagePage = ({ params }: { params: { strategyId: string } }) => {
+  const isReady = useMSWStore((state) => state.isReady)
+  const { data } = useGetDetailsInformationData({
+    isReady,
+    strategyId: params.strategyId,
+  })
+
+  const { detailsSideData, detailsInformationData } = data || {}
+
+  const hasDetailsSideData = detailsSideData?.map((data) => {
+    if (!Array.isArray(data)) return data.data !== undefined
+  })
+
+  return (
+    <div className={cx('container')}>
+      <BackHeader label={'나의 전략으로 돌아가기'} />
+      <div className={cx('header')}>
+        <Title label={'나의 전략 관리'} />
+        <Button size="small" variant="filled" className={cx('edit-button')}>
+          정보 수정하기
+        </Button>
+      </div>
+      <div className={cx('strategy-container')}>
+        {detailsInformationData && (
+          <DetailsInformation information={detailsInformationData} type="my" />
+        )}
+        <AnalysisContainer type="my" />
+        <SideContainer hasButton={true}>
+          <SubscriberItem subscribers={99} />
+          {hasDetailsSideData?.[0] &&
+            detailsSideData?.map((data, idx) => (
+              <div key={`${data}_${idx}`}>
+                <DetailsSideItem information={data} />
+              </div>
+            ))}
+        </SideContainer>
+      </div>
+    </div>
+  )
+}
 export default StrategyManagePage
diff --git a/app/(dashboard)/my/strategies/manage/[strategyId]/styles.module.scss b/app/(dashboard)/my/strategies/manage/[strategyId]/styles.module.scss
@@ -0,0 +1,20 @@
+.container {
+  position: relative;
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+
+  .edit-button {
+    width: $strategy-sidebar-width;
+    height: 40px;
+  }
+}
+
+.strategy-container {
+  width: calc(100% - $strategy-sidebar-width);
+  max-width: $max-width;
+  padding-right: 10px;
+  margin-top: -10px;
+}
diff --git a/app/(dashboard)/my/strategies/page.tsx b/app/(dashboard)/my/strategies/page.tsx
@@ -1,7 +1,13 @@
+'use client'
+
 import { Suspense } from 'react'
 
+import { useRouter } from 'next/navigation'
+
 import classNames from 'classnames/bind'
 
+import { PATH } from '@/shared/constants/path'
+import { Button } from '@/shared/ui/button'
 import Title from '@/shared/ui/title'
 
 import ListHeader from '../../_ui/list-header'
@@ -11,9 +17,18 @@ import styles from './styles.module.scss'
 const cx = classNames.bind(styles)
 
 const MyStrategiesPage = () => {
+  const router = useRouter()
+  const handleClick = () => {
+    router.push(PATH.ADD_STRATEGY)
+  }
   return (
     <div className={cx('container')}>
-      <Title label={'나의 전략'} />
+      <div className={cx('wrapper')}>
+        <Title label={'나의 전략'} />
+        <Button size="small" variant="filled" onClick={handleClick}>
+          전략 등록하기
+        </Button>
+      </div>
       <ListHeader type="my" />
       <Suspense fallback={<div>Loading...</div>}>
         <MyStrategyList />

diff --git a/app/(dashboard)/my/strategies/styles.module.scss b/app/(dashboard)/my/strategies/styles.module.scss
@@ -1,3 +1,10 @@
 .container {
   margin-top: 80px;
 }
+
+.wrapper {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-right: 20px;
+}
diff --git a/app/(dashboard)/strategies/[strategyId]/_ui/analysis-container/account-content.tsx b/app/(dashboard)/strategies/[strategyId]/_ui/analysis-container/account-content.tsx
@@ -4,6 +4,7 @@ import Image from 'next/image'
 
 import classNames from 'classnames/bind'
 
+import { Button } from '@/shared/ui/button'
 import Pagination from '@/shared/ui/pagination'
 
 import styles from './styles.module.scss'
@@ -21,9 +22,10 @@ interface Props {
   imagesData?: ImageDataModel[]
   currentPage: number
   onPageChange: (page: number) => void
+  isEditable?: boolean
 }
 
-const AccountContent = ({ imagesData, currentPage, onPageChange }: Props) => {
+const AccountContent = ({ imagesData, currentPage, onPageChange, isEditable = false }: Props) => {
   const croppedImagesData = imagesData?.slice(
     COUNT_PER_PAGE * (currentPage - 1),
     COUNT_PER_PAGE * (currentPage - 1) + COUNT_PER_PAGE
@@ -33,6 +35,16 @@ const AccountContent = ({ imagesData, currentPage, onPageChange }: Props) => {
 
   return (
     <div className={cx('table-wrapper')}>
+      {isEditable && (
+        <div className={cx('edit-button-container')}>
+          <Button size="small" className={cx('edit-button')} variant="filled">
+            실계좌 이미지 업로드
+          </Button>
+          <Button size="small" className={cx('delete-button')} variant="outline">
+            선택 삭제
+          </Button>
+        </div>
+      )}
       {croppedImagesData && croppedImagesData.length !== 0 ? (
         <>
           <div className={cx('account-images-container', isTwoLines && 'line')}>

diff --git a/app/(dashboard)/strategies/[strategyId]/_ui/analysis-container/analysis-content.tsx b/app/(dashboard)/strategies/[strategyId]/_ui/analysis-container/analysis-content.tsx
@@ -36,26 +36,47 @@ interface AnalysisContentProps {
   analysisData: DailyAnalysisModel[] | MonthlyAnalysisModel[]
   currentPage: number
   onPageChange: (page: number) => void
+  isEditable?: boolean
 }
 
 const AnalysisContent = ({
   type,
   analysisData,
   currentPage,
   onPageChange,
+  isEditable = false,
 }: AnalysisContentProps) => {
   const tableHeader = type === 'daily' ? DAILY_TABLE_HEADER : MONTHLY_TABLE_HEADER
 
   return (
     <div className={cx('table-wrapper', 'analysis')}>
-      <Button size="small" className={cx('excel-button')} variant="filled">
-        엑셀 다운받기
-      </Button>
+      {!isEditable && (
+        <Button size="small" className={cx('excel-button')} variant="filled">
+          엑셀 다운받기
+        </Button>
+      )}
+      {isEditable && (
+        <div className={cx('button-container')}>
+          <div className={cx('button-wrapper')}>
+            <Button size="small" className={cx('upload-button')} variant="filled">
+              엑셀 업로드
+            </Button>
+            <Button size="small" className={cx('upload-button')} variant="outline">
+              직접 입력
+            </Button>
+          </div>
+          <Button size="small" variant="filled">
+            전체 삭제
+          </Button>
+        </div>
+      )}
+
       <VerticalTable
         tableHead={tableHeader}
         tableBody={analysisData}
         currentPage={currentPage}
         countPerPage={COUNT_PER_PAGE}
+        isEditable={isEditable}
       />
       <Pagination
         currentPage={currentPage}

diff --git a/app/(dashboard)/strategies/[strategyId]/_ui/analysis-container/index.tsx b/app/(dashboard)/strategies/[strategyId]/_ui/analysis-container/index.tsx
@@ -16,7 +16,11 @@ const cx = classNames.bind(styles)
 
 type OptionsType = (typeof YAXIS_OPTIONS)[keyof typeof YAXIS_OPTIONS]
 
-const AnalysisContainer = () => {
+interface Props {
+  type?: 'default' | 'my'
+}
+
+const AnalysisContainer = ({ type = 'default' }: Props) => {
   const [firstValue, setFirstValue] = useState<OptionsType>('잔고')
   const [secondValue, setSecondValue] = useState<OptionsType>('잔고')
 
@@ -30,27 +34,30 @@ const AnalysisContainer = () => {
   return (
     <div className={cx('container')}>
       <div className={cx('analysis-header')}>
-        <p>분석</p>
-        <div>
-          <Select
-            size="large"
-            options={options}
-            value={firstValue}
-            onChange={(newValue) => setFirstValue(newValue as OptionsType)}
-          />
-          <Select
-            size="large"
-            options={options}
-            value={secondValue}
-            onChange={(newValue) => setSecondValue(newValue as OptionsType)}
-          />
-        </div>
+        <p className={cx({ my: type === 'my' })}>분석</p>
+        {type === 'default' && (
+          <div>
+            <Select
+              size="large"
+              options={options}
+              value={firstValue}
+              onChange={(newValue) => setFirstValue(newValue as OptionsType)}
+            />
+            <Select
+              size="large"
+              options={options}
+              value={secondValue}
+              onChange={(newValue) => setSecondValue(newValue as OptionsType)}
+            />
+          </div>
+        )}
       </div>
-      <div className={cx('chart-wrapper')}>
-        <AnalysisChart analysisChartData={analysisChartData} />
-      </div>
-
-      <TabsWithTable />
+      {type === 'default' && (
+        <div className={cx('chart-wrapper')}>
+          <AnalysisChart analysisChartData={analysisChartData} />
+        </div>
+      )}
+      <TabsWithTable isEditable={type === 'my' ? true : false} />
     </div>
   )
 }

diff --git a/app/(dashboard)/strategies/[strategyId]/_ui/analysis-container/styles.module.scss b/app/(dashboard)/strategies/[strategyId]/_ui/analysis-container/styles.module.scss
@@ -8,6 +8,9 @@
     p {
       @include typo-h4;
       color: $color-gray-600;
+      &.my {
+        margin-bottom: 40px;
+      }
     }
     div {
       display: flex;
@@ -26,6 +29,15 @@
 .table-wrapper {
   margin-top: 20px;
   position: relative;
+  .edit-button-container {
+    display: flex;
+    justify-content: space-between;
+
+    .edit-button,
+    .delete-button {
+      padding: 7px 18px;
+    }
+  }
   &.analysis {
     margin-top: 40px;
   }
@@ -73,3 +85,17 @@
   color: $color-gray-600;
   @include typo-b2;
 }
+
+.button-container {
+  display: flex;
+  justify-content: space-between;
+  height: 30px;
+  margin-top: -20px;
+  margin-bottom: 10px;
+
+  button.upload-button {
+    height: 100%;
+    padding: 7px 18px;
+    margin-right: 10px;
+  }
+}