TeamStockPort · jjamming · Nov 3, 2025 · Nov 2, 2025 · Nov 2, 2025 · Nov 2, 2025
diff --git a/index.html b/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/png" href="/images/logo.png" />
     <!--파비콘-->
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>StockPort</title>

diff --git a/package.json b/package.json
@@ -16,10 +16,13 @@
     "@radix-ui/react-popover": "^1.1.14",
     "@radix-ui/react-radio-group": "^1.3.7",
     "@radix-ui/react-slot": "^1.2.3",
+    "@radix-ui/react-tabs": "^1.1.13",
     "@tailwindcss/vite": "^4.1.8",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "date-fns": "^4.1.0",
+    "echarts": "^6.0.0",
+    "echarts-for-react": "^3.0.2",
     "lodash": "^4.17.21",
     "lucide-react": "^0.514.0",
     "pretendard": "^1.3.9",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/public/images/logo.png b/public/images/logo.png
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,5 +1,5 @@
 import { BrowserRouter as Router, useRoutes } from "react-router-dom";
-import { routes } from "./routes/routes";
+import { routes } from "@/routes/routes";
 
 const AppRoutes = () => {
   return useRoutes(routes);

diff --git a/src/_BacktestingPage/apis/searchAsset.ts b/src/_BacktestingPage/apis/searchAsset.ts
@@ -1,4 +1,4 @@
-import type { SearchResult } from "../types/backtestFormType";
+import type { SearchResult } from "@/_BacktestingPage/types/backtestFormType";
 import { BACKEND_BASE_URL, API_ENDPOINTS } from "@/constants/api";
 
 export const searchAsset = async (query: string): Promise<SearchResult[]> => {

diff --git a/src/_BacktestingPage/components/AssetAllocation.tsx b/src/_BacktestingPage/components/AssetAllocation.tsx
@@ -1,7 +1,7 @@
-import type { Asset } from "../types/backtestFormType";
-import AssetItem from "./AssetItem";
+import type { Asset } from "@/_BacktestingPage/types/backtestFormType";
+import AssetItem from "@/_BacktestingPage/components/AssetItem";
 import { v4 as uuidv4 } from "uuid";
-import WeightSummary from "./WeightSummary";
+import WeightSummary from "@/_BacktestingPage/components/WeightSummary";
 type AssetAllocationProps = {
   assets: Asset[];
   setAssets: React.Dispatch<React.SetStateAction<Asset[]>>;

diff --git a/src/_BacktestingPage/components/AssetItem.tsx b/src/_BacktestingPage/components/AssetItem.tsx
@@ -1,5 +1,5 @@
 import { useState, useEffect, useRef } from "react";
-import type { SearchResult, Asset } from "../types/backtestFormType";
+import type { SearchResult, Asset } from "@/_BacktestingPage/types/backtestFormType";
 import { debounce } from "lodash";
 type AssetItemProps = {
   AssetIndex: number;

diff --git a/src/_BacktestingPage/components/BacktestForm.tsx b/src/_BacktestingPage/components/BacktestForm.tsx
@@ -10,7 +10,7 @@ import { Input } from "@/components/ui/input";
 import { DatePicker } from "@/components/ui/datepicker";
 import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
 import type { UseFormReturn } from "react-hook-form";
-import type { BacktestFormSchema } from "../utils/backtestFormSchema";
+import type { BacktestFormSchema } from "@/_BacktestingPage/utils/backtestFormSchema";
 
 type BacktestFormProps = {
   form: UseFormReturn<BacktestFormSchema>;

diff --git a/src/_BacktestingPage/components/Notice.tsx b/src/_BacktestingPage/components/Notice.tsx
@@ -1,4 +1,4 @@
-import { notices } from "../datas/notice";
+import { notices } from "@/_BacktestingPage/datas/notice";
 
 const Notice = () => {
   return (

diff --git a/src/_BacktestingPage/utils/convertAssetsForRequest.ts b/src/_BacktestingPage/utils/convertAssetsForRequest.ts
@@ -1,4 +1,4 @@
-import type { Asset, AssetRequest } from "../types/backtestFormType";
+import type { Asset, AssetRequest } from "@/_BacktestingPage/types/backtestFormType";
 
 // Asset type에서 id를 제거
 export const convertAssetsForRequest = (assets: Asset[]): AssetRequest[] => {

diff --git a/src/_BacktestingPage/utils/mapToRequest.ts b/src/_BacktestingPage/utils/mapToRequest.ts
@@ -1,6 +1,6 @@
 // 백엔드측 전송 양식을 맞추기 위해 formDataSchema -> BacktestRequest변한
-import type { BacktestFormSchema } from "./backtestFormSchema";
-import type { Asset, BacktestRequest } from "../types/backtestFormType";
+import type { BacktestFormSchema } from "@/_BacktestingPage/utils/backtestFormSchema";
+import type { Asset, BacktestRequest } from "@/_BacktestingPage/types/backtestFormType";
 
 export function mapToBacktestRequest(values: BacktestFormSchema, assets: Asset[]): BacktestRequest {
   const formatDate = (date: Date) => date.toLocaleDateString("sv-SE");

diff --git a/src/_MainPage/components/HeroSection.tsx b/src/_MainPage/components/HeroSection.tsx
@@ -1,6 +1,6 @@
 import { Button } from "@/components/ui/button";
 import { ArrowRight } from "lucide-react";
-import { HERO_CONTENT } from "../mocks/heroContent";
+import { HERO_CONTENT } from "@/_MainPage/mocks/heroContent";
 import React from "react";
 import { Link } from "react-router-dom";
 

diff --git a/src/_MainPage/components/MarketIndexCard.tsx b/src/_MainPage/components/MarketIndexCard.tsx
@@ -1,6 +1,6 @@
 import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
 import { YAxis, AreaChart, Area, ResponsiveContainer } from "recharts";
-import type { MarketType, MarketIndex } from "../types/MarketIndexType";
+import type { MarketType, MarketIndex } from "@/_MainPage/types/MarketIndexType";
 
 type MarketIndexCardProps = {
   marketType: MarketType;

diff --git a/src/_MainPage/components/MarketIndexSection.tsx b/src/_MainPage/components/MarketIndexSection.tsx
@@ -1,5 +1,5 @@
-import MarketIndexCard from "./MarketIndexCard";
-import { marketData } from "../mocks/marketData";
+import MarketIndexCard from "@/_MainPage/components/MarketIndexCard";
+import { marketData } from "@/_MainPage/mocks/marketData";
 
 export default function MarketIndexSection() {
   return (

diff --git a/src/_MainPage/mocks/marketData.ts b/src/_MainPage/mocks/marketData.ts
@@ -1,4 +1,4 @@
-import type { MarketIndexData } from "../types/MarketIndexType";
+import type { MarketIndexData } from "@/_MainPage/types/MarketIndexType";
 
 export const marketData: MarketIndexData = {
   KOSPI: {

diff --git a/src/_MarketDetailPage/components/ChartFilterBar.tsx b/src/_MarketDetailPage/components/ChartFilterBar.tsx
@@ -0,0 +1,59 @@
+import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { ChartCandlestick, ChartLine } from "lucide-react";
+
+interface ChartFilterBarProps {
+  onChangePeriod: (value: string) => void;
+  onChangeChartType: (value: string) => void;
+}
+
+const ChartFilterBar = ({ onChangePeriod, onChangeChartType }: ChartFilterBarProps) => {
+  return (
+    <div className="flex justify-start items-center gap-4 ml-2.5 h-20">
+      <Tabs defaultValue="1M" onValueChange={onChangePeriod}>
+        <TabsList className="bg-white/5 border-white/10">
+          <TabsTrigger
+            value="1W"
+            className="data-[state=active]:bg-white/10 text-gray-400 data-[state=active]:text-white"
+          >
+            1W
+          </TabsTrigger>
+          <TabsTrigger
+            value="1M"
+            className="data-[state=active]:bg-white/10 text-gray-400 data-[state=active]:text-white"
+          >
+            1M
+          </TabsTrigger>
+          <TabsTrigger
+            value="1Y"
+            className="data-[state=active]:bg-white/10 text-gray-400 data-[state=active]:text-white"
+          >
+            1Y
+          </TabsTrigger>
+          <TabsTrigger
+            value="10Y"
+            className="data-[state=active]:bg-white/10 text-gray-400 data-[state=active]:text-white"
+          >
+            10Y
+          </TabsTrigger>
+        </TabsList>
+      </Tabs>
+      <Tabs defaultValue="candlestick" onValueChange={onChangeChartType}>
+        <TabsList className="bg-white/5 border-white/10">
+          <TabsTrigger
+            value="candlestick"
+            className="data-[state=active]:bg-white/10 text-gray-400 data-[state=active]:text-white"
+          >
+            <ChartCandlestick />
+          </TabsTrigger>
+          <TabsTrigger
+            value="line"
+            className="data-[state=active]:bg-white/10 text-gray-400 data-[state=active]:text-white"
+          >
+            <ChartLine />
+          </TabsTrigger>
+        </TabsList>
+      </Tabs>
+    </div>
+  );
+};
+export default ChartFilterBar;