feat: integrate backend with yearly, monthly dividend ranking pages a…

…long with design qa
Nexters · Feb 27, 2024 · 49cd23f · 49cd23f
1 parent c2d8231
commit 49cd23f
Show file tree

Hide file tree

Showing 9 changed files with 108 additions and 593 deletions.
diff --git a/src/app/(main)/report/dividend/_components/dividend-row.tsx b/src/app/(main)/report/dividend/_components/dividend-row.tsx
@@ -7,7 +7,9 @@ export interface Dividend extends StockResponse {}
 export const DividendRow = React.memo(({ dividend }: { dividend: SingleYearlyDividendResponse }) => {
   return (
     <div className="flex h-full w-full flex-1 items-center gap-4">
-      <Image src={dividend.logoUrl} alt={dividend.ticker} width={40} height={40} />
+      <div className="flex size-10 shrink-0 items-center justify-center rounded-full border border-grey-100">
+        <Image src={dividend.logoUrl} alt={dividend.ticker} width={40} height={40} />
+      </div>
       <div className="items-between flex w-full flex-col justify-center  gap-1">
         <div className="flex items-center justify-between">
           <p className="text-h5 text-grey-900">{dividend.ticker}</p>

diff --git a/src/app/(main)/report/dividend/monthly/_components/dividend-accordion.tsx b/src/app/(main)/report/dividend/monthly/_components/dividend-accordion.tsx
@@ -2,45 +2,59 @@
 
 import React from "react";
 import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion";
-import { MonthlyDividendIncome } from "../page";
+
 import { DividendRow } from "../../_components/dividend-row";
 import { cn } from "@/utils/cn";
+import { MonthlyDividendResponse } from "@/api/generated/endpoint.schemas";
 
-export const DividendAccordion = ({ monthlyDividendList }: { monthlyDividendList: MonthlyDividendIncome[] }) => {
+export const DividendAccordion = ({ monthlyDividendList }: { monthlyDividendList: MonthlyDividendResponse[] }) => {
   return (
-    <Accordion type="single" collapsible className="flex w-full flex-col gap-3 overflow-y-auto px-5 pb-9">
+    <Accordion
+      type="single"
+      defaultValue="item-0"
+      collapsible
+      className="flex w-full flex-col gap-3 overflow-y-auto px-5 pb-9 pt-5"
+    >
       {monthlyDividendList.map((monthDividend, idx) => {
-        const isOpenable = monthDividend.dividendList.length > 0;
+        const isOpenable = monthDividend.dividends.length > 0;
+        const currentMonthDate = new Date(monthDividend.year, monthDividend.month - 1);
+
+        let month = currentMonthDate.toLocaleString("default", { month: "short" });
+        let year = "";
+        if (idx === 0 || monthDividend.year !== monthlyDividendList[idx - 1]?.year) {
+          year = ` ${monthDividend.year}`;
+        }
+
         if (!isOpenable) {
           return (
             <div
-              key={`${monthDividend.date.toDateString()}-${idx}`}
+              key={`${currentMonthDate.toDateString()}-${idx}`}
               className={cn(
                 "flex w-full items-center justify-between rounded-lg border border-grey-200 p-5",
-                isOpenable && "pr-4"
+                isOpenable && "pr-5"
               )}
             >
-              <p className=" text-h4 text-grey-900">{monthDividend.date.toDateString()}</p>
-              <p className=" text-h4 text-grey-900">{monthDividend.totalIncome}</p>
+              <p className=" text-h4 text-grey-900">{`${month}${year}`}</p>
+              <p className=" text-h4 text-grey-900">${monthDividend.totalDividend}</p>
             </div>
           );
         }
         return (
           <AccordionItem
-            key={`${monthDividend.date.toDateString()}-${idx}`}
+            key={`${currentMonthDate.toDateString()}-${idx}`}
             value={`item-${idx}`}
             className={cn("rounded-lg border border-grey-200 p-5")}
           >
             <AccordionTrigger>
-              <div className={cn("flex w-full items-center justify-between", isOpenable && "pr-4")}>
-                <p className=" text-h4 text-grey-900">{monthDividend.date.toDateString()}</p>
-                <p className=" text-h4 text-grey-900">{monthDividend.totalIncome}</p>
+              <div className={cn("flex w-full items-center justify-between", isOpenable && "pr-5")}>
+                <p className=" text-h4 text-grey-900">{`${month}${year}`}</p>
+                <p className=" text-h4 text-grey-900">${monthDividend.totalDividend}</p>
               </div>
             </AccordionTrigger>
 
             <AccordionContent>
               <div className="flex w-full flex-col items-center justify-center gap-6 border-t border-t-grey-200 pt-6">
-                {monthDividend.dividendList.map((dividend, idx) => (
+                {monthDividend.dividends.map((dividend, idx) => (
                   <DividendRow dividend={dividend} key={`${dividend.ticker}-${idx}`} />
                 ))}
               </div>

diff --git a/src/app/(main)/report/dividend/monthly/_components/header.tsx b/src/app/(main)/report/dividend/monthly/_components/header.tsx
@@ -1,10 +1,11 @@
+import { getYearRange } from "@/utils/date";
 import React from "react";
 
 export const Header = React.memo(() => {
   return (
     <div className="flex w-full flex-col items-start justify-center gap-2 p-5">
       <h2 className="text-h2 text-grey-900">Monthly Dividend Income</h2>
-      <p className=" text-body3 text-grey-600">YYYY.MM ~ YYYY.MM</p>
+      <p className=" text-body3 text-grey-600">{getYearRange(new Date())}</p>
     </div>
   );
 });