feat: ✨ improvement main

apps/web/src/components/main/Asset.tsx

@@ -1,3 +1,4 @@
+import { ChevronDownIcon } from "@heroicons/react/24/solid";
 import Image from "next/image";
 import { useRouter } from "next/router";
 import type { SyntheticEvent } from "react";
@@ -46,7 +47,7 @@ export default function Asset() {
   };
 
   return (
-    <Section title="자산" link="/">
+    <Section title="자산" link="/" hasBottomButton>
       <div className="flex flex-col gap-2">
         {items.map((item, index) => (
           <div
@@ -86,6 +87,11 @@ export default function Asset() {
           </div>
         ))}
       </div>
+      <div className="divider m-0 px-2"></div>
+      <div className="btn btn-ghost btn-block text-neutral-400">
+        계좌·대출·증권·포인트 보기
+        <ChevronDownIcon className="w-4" />
+      </div>
     </Section>
   );
 }

apps/web/src/components/main/BankLinks.tsx

@@ -0,0 +1,24 @@
+export default function BankLinks() {
+  return (
+    <div className="join flex w-full rounded-xl">
+      <button
+        className="btn join-item flex-1 border-none bg-neutral-800"
+        type="button"
+      >
+        계좌개설
+      </button>
+      <button
+        className="btn join-item flex-1 border-none bg-neutral-800"
+        type="button"
+      >
+        카드발급
+      </button>
+      <button
+        className="btn join-item flex-1 border-none bg-neutral-800"
+        type="button"
+      >
+        대출받기
+      </button>
+    </div>
+  );
+}

apps/web/src/components/main/Section.tsx

@@ -8,6 +8,7 @@ interface SectionProps {
   link: string;
   handleLink?: () => void;
   hiddenLink?: boolean;
+  hasBottomButton?: boolean;
 }
 
 export default function Section({
@@ -16,6 +17,7 @@ export default function Section({
   children,
   handleLink,
   hiddenLink = false,
+  hasBottomButton,
 }: PropsWithChildren<SectionProps>) {
   const router = useRouter();
   const handleClick = async () => {
@@ -26,7 +28,12 @@ export default function Section({
   };
 
   return (
-    <section className="w-full rounded-2xl bg-neutral-800 px-3 pb-6 pt-5">
+    <section
+      className={clsx(
+        `w-full rounded-2xl bg-neutral-800 px-3 pt-5`,
+        hasBottomButton ? "pb-2" : "pb-5",
+      )}
+    >
       <div
         className={clsx(
           `flex cursor-pointer items-center justify-between px-2`,

apps/web/src/components/main/index.ts

@@ -1,4 +1,5 @@
 export { default as Asset } from "./Asset";
+export { default as BankLinks } from "./BankLinks";
 export { default as Extra } from "./Extra";
 export { default as MainCarousel } from "./MainCarousel";
 export { default as MainNavbar } from "./MainNavbar";

apps/web/src/pages/index.tsx

@@ -3,6 +3,7 @@ import { bankWelcomeToastState } from "~/components/bank";
 import { Layout } from "~/components/layout";
 import {
   Asset,
+  BankLinks,
   Extra,
   MainCarousel,
   MainNavbar,
@@ -33,6 +34,7 @@ export default function Home() {
         <Asset />
         <Stock />
         <Spend />
+        <BankLinks />
         <MainCarousel />
         <Extra />
       </div>