Merge pull request #20 from Nexters/feat/sector-list

src/app/(main)/report/sector-list/_components/sector-list.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import { SectorRatio, SectorRow } from "./sector-row";
+
+export const SectorList = React.memo(({ sectorList }: { sectorList: SectorRatio[] }) => {
+  return (
+    <div className="mt-5 flex w-full flex-col items-center justify-start gap-6 overflow-y-auto px-5 pb-8">
+      {sectorList.map((sector, idx) => (
+        <div className="flex h-10 w-full items-center justify-between gap-2" key={`${sector.sectorName}-${idx}`}>
+          <SectorRow sector={sector} />
+        </div>
+      ))}
+    </div>
+  );
+});

src/app/(main)/report/sector-list/_components/sector-row.tsx

@@ -0,0 +1,30 @@
+"use client";
+import { SectorRatioResponse } from "@/api/generated/endpoint.schemas";
+import ChevronRightIcon from "@/components/icons/chevron-right";
+import Image from "next/image";
+import { useRouter } from "next/navigation";
+import React from "react";
+
+export interface SectorRatio extends Required<SectorRatioResponse> {}
+
+export const SectorRow = React.memo(({ sector }: { sector: SectorRatio }) => {
+  const router = useRouter();
+
+  const handleSectorClick = () => {
+    // @TODO 수정 필요
+    router.push(`/`);
+  };
+  return (
+    <div className="flex h-full w-full flex-1 items-center gap-4" onClick={handleSectorClick}>
+      <Image src={"/next.svg"} alt={sector.sectorName} width={32} height={32} />
+      <div className="flex w-full items-center justify-between  gap-1">
+        <div>
+          <p className="text-h5 text-grey-900">{sector.sectorName}</p>
+          <p className="mt-1 text-body2 text-grey-600">{(sector.sectorRatio * 100).toFixed(0) + "%"}</p>
+        </div>
+
+        <ChevronRightIcon className="text-grey-500" />
+      </div>
+    </div>
+  );
+});

src/app/(main)/report/sector-list/page.tsx

@@ -0,0 +1,106 @@
+import React from "react";
+import { SectorList } from "./_components/sector-list";
+import { SectorRatio } from "./_components/sector-row";
+
+const dummySectorList: SectorRatio[] = [
+  {
+    sectorName: "Technology",
+    sectorRatio: 0.6402923367406732,
+    stocks: [
+      {
+        stockId: "41b8b18f-6f4f-460c-a978-ff300c1a08f1",
+        ticker: "AAPL",
+        companyName: "Apple Inc.",
+        sectorName: "Technology",
+        exchange: "NASDAQ",
+        industry: "Consumer Electronics",
+        price: 182.32,
+        volume: 39054026,
+        logoUrl:
+          "https://api-ninjas-data.s3.us-west-2.amazonaws.com/logos/l476432a3e85a0aa21c23f5abd2975a89b6820d63.png",
+      },
+    ],
+  },
+  {
+    sectorName: "Financial Services",
+    sectorRatio: 0.20970766325932678,
+    stocks: [
+      {
+        stockId: "bf983d90-3096-4468-a350-b8689b2cbec2",
+        ticker: "BAC",
+        companyName: "Bank of America Corporation",
+        sectorName: "Financial Services",
+        exchange: "NYSE",
+        industry: "Banks—Diversified",
+        price: 33.7,
+        volume: 37695294,
+        logoUrl:
+          "https://api-ninjas-data.s3.us-west-2.amazonaws.com/logos/lb80e2d3601b59154da80bd0a07f9d9705ced29dc.png",
+      },
+    ],
+  },
+  {
+    sectorName: "Communication Services",
+    sectorRatio: 0.10970766325932678,
+    stocks: [
+      {
+        stockId: "bf983d90-3096-4468-a350-b8689b2cbec2",
+        ticker: "BAC",
+        companyName: "Bank of America Corporation",
+        sectorName: "Financial Services",
+        exchange: "NYSE",
+        industry: "Banks—Diversified",
+        price: 33.7,
+        volume: 37695294,
+        logoUrl:
+          "https://api-ninjas-data.s3.us-west-2.amazonaws.com/logos/lb80e2d3601b59154da80bd0a07f9d9705ced29dc.png",
+      },
+    ],
+  },
+  {
+    sectorName: "Sector 4",
+    sectorRatio: 0.4970766325932678,
+    stocks: [
+      {
+        stockId: "bf983d90-3096-4468-a350-b8689b2cbec2",
+        ticker: "BAC",
+        companyName: "Bank of America Corporation",
+        sectorName: "Sector 4",
+        exchange: "NYSE",
+        industry: "Banks—Diversified",
+        price: 33.7,
+        volume: 37695294,
+        logoUrl:
+          "https://api-ninjas-data.s3.us-west-2.amazonaws.com/logos/lb80e2d3601b59154da80bd0a07f9d9705ced29dc.png",
+      },
+    ],
+  },
+  {
+    sectorName: "Sector 5",
+    sectorRatio: 0.2970766325932678,
+    stocks: [
+      {
+        stockId: "bf983d90-3096-4468-a350-b8689b2cbec2",
+        ticker: "BAC",
+        companyName: "Bank of America Corporation",
+        sectorName: "Sector 5",
+        exchange: "NYSE",
+        industry: "Banks—Diversified",
+        price: 33.7,
+        volume: 37695294,
+        logoUrl:
+          "https://api-ninjas-data.s3.us-west-2.amazonaws.com/logos/lb80e2d3601b59154da80bd0a07f9d9705ced29dc.png",
+      },
+    ],
+  },
+];
+
+const SectorListPage = React.memo(() => {
+  return (
+    <div className="flex size-full flex-col items-center justify-start gap-5">
+      <SectorList sectorList={dummySectorList} />
+    </div>
+  );
+});
+
+export default SectorListPage;

src/components/icons/chevron-down.tsx

@@ -8,9 +8,9 @@ const ChevronDownIcon = React.memo(({ ...props }: ChevronDownIconProps) => {
       <path
         d="M4 6L8 10L12 6"
         stroke="currentColor"
-        stroke-width="0.866667"
-        stroke-linecap="round"
-        stroke-linejoin="round"
+        strokeWidth="0.866667"
+        strokeLinecap="round"
+        strokeLinejoin="round"
       />
     </svg>
   );

src/components/icons/chevron-right.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+
+export interface ChevronRightIconProps extends React.SVGProps<SVGSVGElement> {}
+
+const ChevronRightIcon = React.memo(({ ...props }: ChevronRightIconProps) => {
+  return (
+    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="24" height="25" viewBox="0 0 24 25" fill="none">
+      <path d="M9 18.5L15 12.5L9 6.5" stroke="#8B95A1" strokeWidth="1.3" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  );
+});
+
+export default ChevronRightIcon;