feat: stock 검색 작업 및 tickers 데이터 핸들링

src/api/http.ts

@@ -0,0 +1,36 @@
+import axios, { AxiosError, AxiosRequestConfig, AxiosResponse } from "axios";
+
+export const instance = axios.create({
+  baseURL: "http://110.234.18.211:8080",
+  headers: {
+    "content-type": "application/json",
+    Authorization: ``,
+  },
+});
+
+export interface Response<T> {
+  success: boolean;
+  data: T;
+  error: {
+    code: string;
+    message: string;
+  } | null;
+}
+
+instance.interceptors.response.use(
+  (response: AxiosResponse) => {
+    return response;
+  },
+  (error: AxiosError) => {
+    return Promise.reject(error);
+  }
+);
+
+export const HTTP = {
+  get: <ResponseType>(url: string): Promise<AxiosResponse<ResponseType>> => instance.get(url),
+  post: <ParamType, ResponseType>(
+    url: string,
+    param?: ParamType,
+    config?: AxiosRequestConfig<ParamType>
+  ): Promise<AxiosResponse<ResponseType>> => instance.post(url, param, config),
+};

src/app/(main)/ticker/_components/intro.tsx

@@ -1,20 +1,26 @@
-import { DrawerTrigger } from "@/components/ui/drawer";
+import { useDrawerStore } from "@/state/stores/stocks-store";
 import { Plus } from "lucide-react";
 import React from "react";
 
 const Intro = () => {
+  const { isOpenChange } = useDrawerStore();
   return (
     <div className="border-b border-b-grey-100 px-4">
-      <h2 className="pt-4 text-h2">You Added <span className="text-main-700">{0}</span> Tickers.</h2>
+      <h2 className="pt-4 text-h2">
+        You Added <span className="text-main-700">{0}</span> Tickers.
+      </h2>
       <div className="flex flex-col justify-start pb-4 pt-10 text-lg">
-        <DrawerTrigger asChild>
-          <div className="flex w-full cursor-pointer items-center justify-start gap-4">
-            <div className="flex h-10 w-10 items-center justify-center rounded-full bg-gray-200 text-[#8B95A1]">
-              <Plus />
-            </div>
-            <p>Add Ticker</p>
+        <button
+          onClick={() => {
+            isOpenChange(true);
+          }}
+          className="flex w-full cursor-pointer items-center justify-start gap-4"
+        >
+          <div className="flex h-10 w-10 items-center justify-center rounded-full bg-gray-200 text-[#8B95A1]">
+            <Plus />
           </div>
-        </DrawerTrigger>
+          <p>Add Ticker</p>
+        </button>
       </div>
     </div>
   );

src/app/(main)/ticker/_components/selected-ticker-list.tsx

@@ -0,0 +1,16 @@
+"use client";
+
+import React from "react";
+import TickerList from "./ticker-list";
+import { Stock, useStocksStore } from "@/state/stores/stocks-store";
+
+interface SelectedTickerListProps {
+  handleTickerClick: (data: Stock) => void;
+}
+
+const SelectedTickerList = React.memo(({ handleTickerClick }: SelectedTickerListProps) => {
+  const { stocks } = useStocksStore();
+  return <TickerList data={stocks} hasShares onClick={handleTickerClick} />;
+});
+
+export default SelectedTickerList;

src/app/(main)/ticker/_components/ticker-content.tsx

@@ -0,0 +1,142 @@
+"use client";
+
+import Intro from "@/app/(main)/ticker/_components/intro";
+import SelectedTickerList from "@/app/(main)/ticker/_components/selected-ticker-list";
+import { TickerDrawer } from "@/app/(main)/ticker/_components/ticker-drawer";
+import { Dialog } from "@/components/common/dialog/dialog";
+import Toast from "@/components/common/toast/toast";
+import { Stock, useDialogStore, useDrawerStore, useStocksStore } from "@/state/stores/stocks-store";
+import React from "react";
+import { toast } from "sonner";
+import { Drawer as DrawerPrimitive } from "@/components/ui/drawer";
+import { Dialog as DialogPrimitive } from "@/components/ui/dialog";
+
+export type DrawerType = "name" | "count" | "edit";
+
+const MAX_TICKER_COUNT = 15;
+
+const TickerContent = React.memo(() => {
+  const { stocks, addStocks, removeStocks, editStocks } = useStocksStore();
+  const { isOpen: drawerIsOpen, isOpenChange: isDrawerOpenChange } = useDrawerStore();
+  const { isOpen: dialogIsOpen, isOpenChange: isDialogOpenChange } = useDialogStore();
+
+  const [tickerName, setTickerName] = React.useState<string>("");
+  const [tickerCount, setTickerCount] = React.useState<number>(0);
+  const [drawerType, setDrawerType] = React.useState<DrawerType>("name");
+  const [selectedStock, setSelectedStock] = React.useState<Stock>();
+
+  const resetData = React.useCallback(() => {
+    setTickerName("");
+    setTickerCount(0);
+    setDrawerType("name");
+  }, []);
+
+  const handleTickerClick = React.useCallback((data: Stock) => {
+    setDrawerType("count");
+
+    setTickerName(data.ticker ?? "");
+    setSelectedStock(data);
+  }, []);
+
+  const handleKeywordChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const { value } = e.target;
+    const brandName = !!value ? value : "";
+    setTickerName(brandName);
+  };
+  const handleCountChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const targetValue = Number(e.target.value);
+    const count = isNaN(targetValue) ? 0 : targetValue;
+    setTickerCount(count);
+  };
+
+  const handleSubmitClick = React.useCallback(() => {
+    if (stocks.length > MAX_TICKER_COUNT - 1) {
+      return isDialogOpenChange(true);
+    }
+
+    if (selectedStock) {
+      resetData();
+
+      addStocks({ ...selectedStock, count: tickerCount });
+      isDrawerOpenChange(false);
+    }
+  }, [addStocks, isDialogOpenChange, isDrawerOpenChange, resetData, selectedStock, stocks.length, tickerCount]);
+
+  const handleInputClear = React.useCallback((type: DrawerType) => {
+    if (type === "name") {
+      return setTickerName("");
+    }
+
+    return setTickerCount(0);
+  }, []);
+
+  const handleNameFocus = React.useCallback(() => {
+    setDrawerType("name");
+  }, []);
+
+  const handleSelectedTickerClick = React.useCallback(
+    (data: Stock) => {
+      if (data.ticker && data.count) {
+        isDrawerOpenChange(true);
+        setTickerName(data.ticker);
+        setTickerCount(data.count);
+        setDrawerType("edit");
+        setSelectedStock(data);
+      }
+    },
+    [isDrawerOpenChange]
+  );
+
+  const handleDeleteClick = React.useCallback(() => {
+    const prevStock = selectedStock;
+    if (selectedStock) {
+      removeStocks(selectedStock);
+      resetData();
+      toast.custom((t) => (
+        <Toast
+          t={t}
+          title={`You deleted ${selectedStock.ticker}`}
+          isRevertable
+          handleUndo={() => {
+            prevStock && addStocks(prevStock);
+          }}
+        />
+      ));
+      return isDrawerOpenChange(false);
+    }
+  }, [addStocks, isDrawerOpenChange, removeStocks, resetData, selectedStock]);
+
+  const handleConfirmClick = React.useCallback(() => {
+    editStocks({ ...selectedStock, count: tickerCount });
+    resetData();
+    return isDrawerOpenChange(false);
+  }, [editStocks, isDrawerOpenChange, resetData, selectedStock, tickerCount]);
+
+  return (
+    <DrawerPrimitive open={drawerIsOpen}>
+      <div className="flex h-full w-full flex-col pt-11">
+        <Intro />
+        <SelectedTickerList handleTickerClick={handleSelectedTickerClick} />
+      </div>
+      <TickerDrawer
+        drawerType={drawerType}
+        tickerCount={tickerCount}
+        tickerName={tickerName}
+        handleTickerClick={handleTickerClick}
+        handleKeywordChange={handleKeywordChange}
+        handleCountChange={handleCountChange}
+        handleSubmitClick={handleSubmitClick}
+        handleInputClear={handleInputClear}
+        handleNameFocus={handleNameFocus}
+        handleDeleteClick={handleDeleteClick}
+        handleConfirmClick={handleConfirmClick}
+      />
+
+      <DialogPrimitive open={dialogIsOpen}>
+        <Dialog title={`You can add up to ${MAX_TICKER_COUNT} stocks.`} />
+      </DialogPrimitive>
+    </DrawerPrimitive>
+  );
+});
+
+export default TickerContent;