[feat] StockPage 구현 및 포트폴리오 종목 추가,삭제 구현

fe/src/api/auth/queries/useSignUpMutation.ts

@@ -15,6 +15,7 @@ export default function useSignUpMutation() {
     },
     onError: (error) => {
       // TODO: Handle error
+      // eslint-disable-next-line no-console
       console.error(error);
     },
   });

fe/src/api/portfolio/index.ts

@@ -1,23 +1,25 @@
 import { fetcher } from "@api/fetcher";
 import { Response } from "@api/types";
 
-export type PortfolioPieChartDataItem = {
-  portfolios: {
-    id: number;
-    securitiesFirm: string;
-    name: string;
-    budget: number;
-    totalGain: number;
-    totalGainRate: number;
-    dailyGain: number;
-    dailyGainRate: number;
-    expectedMonthlyDividend: number;
-    numShares: number;
-  }[];
+export type PortfolioList = {
+  portfolios: PortfolioItem[];
   hasNext: boolean;
   nextCursor: string | null;
 };
 
+export type PortfolioItem = {
+  id: number;
+  securitiesFirm: string;
+  name: string;
+  budget: number;
+  totalGain: number;
+  totalGainRate: number;
+  dailyGain: number;
+  dailyGainRate: number;
+  expectedMonthlyDividend: number;
+  numShares: number;
+};
+
 export type Portfolio = {
   portfolioDetails: PortfolioDetails;
   portfolioHoldings: PortfolioHolding[];
@@ -77,9 +79,8 @@ type PortfolioReqBody = {
   maximumLoss: number;
 };
 
-export const getPortfolioChart = async () => {
-  const res =
-    await fetcher.get<Response<PortfolioPieChartDataItem>>("/portfolios");
+export const getPortfolioList = async () => {
+  const res = await fetcher.get<Response<PortfolioList>>("/portfolios");
   return res.data;
 };
 

fe/src/api/portfolio/queries/usePortfolioHoldingAddMutation.ts

@@ -14,5 +14,9 @@ export default function usePortfolioHoldingAddMutation(portfolioId: number) {
         queryKey: portfolioKeys.details(portfolioId).queryKey,
       });
     },
+    onError: (error) => {
+      // eslint-disable-next-line no-console
+      console.error(error);
+    },
   });
 }

fe/src/api/portfolio/queries/usePortfolioHoldingDeleteMutation.ts

@@ -2,7 +2,7 @@ import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { deletePortfolioHolding } from "..";
 import { portfolioKeys } from "./queryKeys";
 
-export default function usePortfolioHoldingAddMutation(portfolioId: number) {
+export default function usePortfolioHoldingDeleteMutation(portfolioId: number) {
   const queryClient = useQueryClient();
 
   return useMutation({

fe/src/api/portfolio/queries/usePortfolioChartQuery.ts → fe/src/api/portfolio/queries/usePortfolioListQuery.ts

@@ -1,11 +1,11 @@
 import { useQuery } from "@tanstack/react-query";
+import { getPortfolioList } from "..";
 import { portfolioKeys } from "./queryKeys";
-import { getPortfolioChart } from "..";
 
-export default function usePortfolioChartQuery() {
+export default function usePortfolioListQuery() {
   return useQuery({
     queryKey: portfolioKeys.chart().queryKey,
-    queryFn: getPortfolioChart,
+    queryFn: getPortfolioList,
     retry: false,
     select: (res) => res.data,
     meta: {

fe/src/api/stock/index.ts

@@ -1,16 +1,16 @@
 import { fetcher } from "@api/fetcher";
 import { Response } from "@api/types";
 
-type StockSearchResponse = {
+export type StockSearchResponse = {
   stockCode: string;
   tickerSymbol: string;
   companyName: string;
   companyNameEng: string;
   market: string;
-}[];
+};
 
 export const postStockSearch = async (query: string) => {
-  const res = await fetcher.post<Response<StockSearchResponse>>(
+  const res = await fetcher.post<Response<StockSearchResponse[]>>(
     `/stocks/search/`,
     { searchTerm: query }
   );

fe/src/components/Dashboard/PortfolioPieChart.tsx

@@ -1,4 +1,4 @@
-import usePortfolioChartQuery from "@api/portfolio/queries/usePortfolioChartQuery";
+import usePortfoliosQuery from "@api/portfolio/queries/usePortfolioListQuery";
 import Legend from "@components/common/PieChart/Legend";
 import RechartPieChart from "@components/common/PieChart/RechartPieChart";
 import { CSSProperties } from "react";
@@ -15,7 +15,7 @@ export default function PortfolioPieChart({
   height,
   legendStyle,
 }: Props) {
-  const { data: pieData } = usePortfolioChartQuery();
+  const { data: pieData } = usePortfoliosQuery();
 
   const coloredPieData = pieData?.portfolios.map((item, index) => ({
     name: item.name,

fe/src/components/Portfolio/DividendBarChart.tsx

@@ -106,6 +106,7 @@ const StyledDividendBarChart = styled.div`
   background-color: white;
   border-radius: 8px;
   border: 1px solid #e0e0e0;
+  box-shadow: 0px 0px 12px 0px #00000014;
 `;
 
 // ?: API를 따로 만들건지 포트폴리오 종목 조회에서 아래에 필요한 값들을 추가할것인지

fe/src/components/Portfolio/HoldingsPieChart.tsx

@@ -145,6 +145,7 @@ const StyledHoldingsPieChart = styled.div`
   border-radius: 8px;
   border: 1px solid #e0e0e0;
   background-color: #ffffff;
+  box-shadow: 0px 0px 12px 0px #00000014;
 `;
 const TotalValue = styled.div`
   display: flex;

fe/src/components/Portfolio/PortfolioHoldings/PortfolioHoldingAddModal.tsx

@@ -1,17 +1,37 @@
+import usePortfolioHoldingAddMutation from "@api/portfolio/queries/usePortfolioHoldingAddMutation";
 import BaseModal from "@components/BaseModal";
-import SearchBar from "@components/SearchBar";
+import SearchBar from "@components/SearchBar/SearchBar";
 
 type Props = {
+  portfolioId: number;
   isOpen: boolean;
   onClose: () => void;
 };
 
-export default function PortfolioHoldingAddModal({ isOpen, onClose }: Props) {
+export default function PortfolioHoldingAddModal({
+  portfolioId,
+  isOpen,
+  onClose,
+}: Props) {
+  const { mutate: portfolioHoldingAddMutate } =
+    usePortfolioHoldingAddMutation(portfolioId);
+
+  const addStockToPortfolio = (tickerSymbol: string) => {
+    portfolioHoldingAddMutate({
+      portfolioId,
+      body: {
+        tickerSymbol,
+      },
+    });
+  };
+
   return (
     <BaseModal isOpen={isOpen} onClose={onClose}>
       <>
-        <div>모달</div>
-        <SearchBar />
+        <SearchBar>
+          <SearchBar.Input />
+          <SearchBar.SearchList onItemClick={addStockToPortfolio} />
+        </SearchBar>
       </>
     </BaseModal>
   );

fe/src/components/Portfolio/PortfolioHoldings/PortfolioHoldingRow.tsx

@@ -1,4 +1,5 @@
 import { PortfolioHolding } from "@api/portfolio";
+import usePortfolioHoldingDeleteMutation from "@api/portfolio/queries/usePortfolioHoldingDeleteMutation";
 import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
 import KeyboardArrowRightIcon from "@mui/icons-material/KeyboardArrowRight";
 import {
@@ -37,8 +38,15 @@ export default function PortfolioHoldingRow({
     purchaseHistory,
   } = row;
 
+  const { mutate: portfolioHoldingDeleteMutate } =
+    usePortfolioHoldingDeleteMutation(portfolioId);
+
   const [isOpen, setIsOpen] = useState(false);
 
+  const onDeleteClick = () => {
+    portfolioHoldingDeleteMutate({ portfolioId, portfolioHoldingId });
+  };
+
   return (
     <>
       <HoldingTableRow>
@@ -87,6 +95,11 @@ export default function PortfolioHoldingRow({
           <Typography>{annualDividend}</Typography>
         </HoldingTableCell>
         {/* TODO: 종목 삭제 버튼 */}
+        <div
+          onClick={onDeleteClick}
+          style={{ border: "1px solid black", cursor: "pointer" }}>
+          삭제
+        </div>
       </HoldingTableRow>
       <HoldingLotRow>
         <TableCell

fe/src/components/Portfolio/PortfolioHoldings/PortfolioHoldingsTable.tsx

@@ -16,9 +16,11 @@ type Props = {
 
 export default function PortfolioHoldingsTable({ portfolioId, data }: Props) {
   return (
-    <Table aria-label="collapsible table">
-      <TableHead>
-        <ColumnHeader>
+    <Table
+      style={{ backgroundColor: "#FFFFFF" }}
+      aria-label="collapsible table">
+      <TableHead style={{ backgroundColor: "#FFFFFF" }}>
+        <ColumnHeader style={{ backgroundColor: "#FFFFFF" }}>
           <TableCell />
           <ColumnHeaderCell>종목명</ColumnHeaderCell>
           <ColumnHeaderCell align="right">평가금액</ColumnHeaderCell>