feat: integrate backend to yearly dividend ranking page

next.config.js

@@ -1,4 +1,13 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {}
+const nextConfig = {
+  images: {
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: 'api-ninjas-data.s3.us-west-2.amazonaws.com',
+      },
+    ],
+  },
+}
 
 module.exports = nextConfig

src/app/(main)/report/_components/annual-dividend.tsx

@@ -5,12 +5,12 @@ import { useRouter } from "next/navigation";
 import React from "react";
 
 interface AnnualDividendProps {
-  data: YearlyDividendResponse
+  data: YearlyDividendResponse;
 }
 
 const bubbleStyles = ["absolute bottom-3 left-0", "absolute right-0 top-0", "absolute bottom-0 right-3"];
 
-export const AnnualDividend = ({data}: AnnualDividendProps) => {
+export const AnnualDividend = ({ data }: AnnualDividendProps) => {
   const router = useRouter();
 
   const handleButtonClick = React.useCallback(() => {
@@ -25,7 +25,7 @@ export const AnnualDividend = ({data}: AnnualDividendProps) => {
           <p className=" text-h1 text-grey-900">{`$${2000}`}</p>
         </div>
         <BubbleChart dividend={data.dividends[0]} rank={0} />
-        <Button variant={"secondary"} size={"max"} onClick={() => {}}>
+        <Button variant={"secondary"} size={"max"} onClick={handleButtonClick}>
           Check Overall Rankings
         </Button>
       </div>

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

@@ -1,19 +1,19 @@
-import { StockResponse } from "@/api/generated/endpoint.schemas";
+import { SingleYearlyDividendResponse, StockResponse } from "@/api/generated/endpoint.schemas";
 import Image from "next/image";
 import React from "react";
 
 export interface Dividend extends StockResponse {}
 
-export const DividendRow = React.memo(({ dividend }: { dividend: Dividend }) => {
+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.companyName} width={40} height={40} />
+      <Image src={dividend.logoUrl} alt={dividend.ticker} width={40} height={40} />
       <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.companyName}</p>
-          <p className="text-body1 text-main-900">${dividend.price}</p>
+          <p className="text-h5 text-grey-900">{dividend.ticker}</p>
+          <p className="text-body1 text-main-900">${dividend.totalDividend}</p>
         </div>
-        <p className=" text-body3 text-grey-600">{1} Shares</p>
+        <p className=" text-body3 text-grey-600">{dividend.share} Shares</p>
       </div>
     </div>
   );

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

@@ -1,7 +1,8 @@
 import React from "react";
-import { Dividend, DividendRow } from "../../_components/dividend-row";
+import { DividendRow } from "../../_components/dividend-row";
+import { SingleYearlyDividendResponse } from "@/api/generated/endpoint.schemas";
 
-export const DividendList = React.memo(({ dividendList }: { dividendList: Dividend[] }) => {
+export const DividendList = React.memo(({ dividendList }: { dividendList: SingleYearlyDividendResponse[] }) => {
   return (
     <div className="flex w-full flex-col items-center justify-start gap-6 overflow-y-auto px-5 pb-8">
       {dividendList.map((dividend, idx) => (

src/app/(main)/report/dividend/yearly/_components/header.tsx

@@ -1,10 +1,26 @@
 import React from "react";
 
+const getYearRange = (date: Date): string => {
+  const startDate = new Date(date);
+  const endDate = new Date(startDate.getFullYear() + 1, startDate.getMonth(), startDate.getDate());
+
+  const startYear = startDate.getFullYear();
+  const startMonth = startDate.getMonth() + 1;
+  const endYear = endDate.getFullYear();
+  const endMonth = endDate.getMonth() + 1;
+
+  const formattedStartMonth = startMonth < 10 ? `0${startMonth}` : startMonth.toString();
+  const formattedEndMonth = endMonth < 10 ? `0${endMonth}` : endMonth.toString();
+
+  const dateRange = `${startYear}.${formattedStartMonth} ~ ${endYear}.${formattedEndMonth}`;
+  return dateRange;
+};
+
 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">Overall Dividend Rankings</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>
   );
 });