feat(investment): ✨ init

gracefullight · Sep 10, 2023 · d19dc62 · d19dc62
1 parent b8e4fc8
commit d19dc62
Show file tree

Hide file tree

Showing 9 changed files with 356 additions and 30 deletions.
diff --git a/apps/web/src/components/layout/StackLayout.tsx b/apps/web/src/components/layout/StackLayout.tsx
@@ -1,36 +1,52 @@
 import { ChevronLeftIcon } from "@heroicons/react/24/solid";
+import clsx from "clsx";
 import { useRouter } from "next/router";
-import type { PropsWithChildren } from "react";
+import type { ElementType, PropsWithChildren } from "react";
 import ScreenCaptureToast from "./ScreenCaptureToast";
 
 export interface StackLayoutNavbarItem {
   title: string;
+  IconComponent?: ElementType;
   link?: string;
   handleItem?: () => void;
 }
 
 interface StackLayoutProps {
   title?: string;
   items?: StackLayoutNavbarItem[];
+  isLightBackground?: boolean;
 }
 
 export default function StackLayout({
   children,
   items,
   title,
+  isLightBackground = false,
 }: PropsWithChildren<StackLayoutProps>) {
   const router = useRouter();
   const handleBack = () => {
     router.back();
   };
 
-  const handleNavbarLink = async (link: string) => {
-    await router.push(link);
+  const handleInnerItem = async ({
+    link,
+    handleItem,
+  }: Pick<StackLayoutNavbarItem, "link" | "handleItem">) => {
+    if (link) {
+      await router.push(link);
+    } else if (handleItem) {
+      handleItem();
+    }
   };
 
   return (
     <div className="bg-base-100 flex min-h-screen flex-col">
-      <div className="navbar bg-base-100 sticky top-0 z-50 px-4">
+      <div
+        className={clsx(
+          "navbar sticky top-0 z-50 px-4",
+          isLightBackground ? "bg-neutral-800" : "bg-base-100",
+        )}
+      >
         <div className="navbar-start">
           <ChevronLeftIcon
             className="w-6 cursor-pointer font-bold"
@@ -45,21 +61,27 @@ export default function StackLayout({
 
         <div className="navbar-end gap-3 pr-1">
           {items &&
-            items.map((item) => (
-              <div
-                key={item.title}
-                className="cursor-pointer text-neutral-200"
-                onClick={() => {
-                  if (item.link) {
-                    handleNavbarLink(item.link);
-                  } else if (item.handleItem) {
-                    item.handleItem();
-                  }
-                }}
-              >
-                {item.title}
-              </div>
-            ))}
+            items.map(({ IconComponent, title, ...item }) =>
+              IconComponent ? (
+                <button
+                  key={title}
+                  className="btn btn-square btn-sm btn-ghost"
+                  type="button"
+                  title={title}
+                  onClick={() => void handleInnerItem(item)}
+                >
+                  <IconComponent className="w-6" />
+                </button>
+              ) : (
+                <div
+                  key={title}
+                  className="cursor-pointer text-neutral-200"
+                  onClick={() => void handleInnerItem(item)}
+                >
+                  {title}
+                </div>
+              ),
+            )}
         </div>
       </div>
       {children}

diff --git a/apps/web/src/components/main/Section.tsx b/apps/web/src/components/main/Section.tsx
@@ -1,27 +1,44 @@
 import { ChevronRightIcon } from "@heroicons/react/24/solid";
 import clsx from "clsx";
+import { useRouter } from "next/router";
 import type { PropsWithChildren } from "react";
 
 interface SectionProps {
   title: string;
-  link?: string;
+  link: string;
+  hiddenLink?: boolean;
 }
 
 export default function Section({
   title,
   link,
   children,
+  hiddenLink = false,
 }: PropsWithChildren<SectionProps>) {
+  const router = useRouter();
+  const handleLink = async (link: string) => {
+    await router.push(link);
+  };
+
   return (
     <div className="w-full rounded-2xl bg-neutral-800 p-5 pb-6">
       <div
         className={clsx(
-          `flex items-center justify-between`,
+          `flex cursor-pointer items-center justify-between`,
           children && "mb-6",
         )}
+        onClick={() => void handleLink(link)}
       >
         <h2 className="text-lg font-semibold text-neutral-200">{title}</h2>
-        {link && <ChevronRightIcon className="h-4 w-4" />}
+        {!hiddenLink && (
+          <button
+            className="btn btn-square btn-sm btn-ghost"
+            type="button"
+            title={title}
+          >
+            <ChevronRightIcon className="h-4 w-4" />
+          </button>
+        )}
       </div>
       {children}
     </div>

diff --git a/apps/web/src/components/main/Spend.tsx b/apps/web/src/components/main/Spend.tsx
@@ -2,12 +2,12 @@ import Section from "./Section";
 
 export default function Spend() {
   return (
-    <Section title="소비" link="/">
+    <Section title="소비" link="/" hiddenLink>
       <ul className="flex flex-col">
         <li className="flex items-center justify-between">
           <div className="flex items-center space-x-3">
             <div className="placeholder avatar">
-              <div className="w-10 rounded-full bg-neutral-focus text-neutral-content">
+              <div className="bg-neutral-focus text-neutral-content w-10 rounded-full">
                 <span>1</span>
               </div>
             </div>
@@ -16,15 +16,18 @@ export default function Spend() {
               <span className="text-lg font-medium">1,000,000원</span>
             </div>
           </div>
-          <button className="btn-sm btn border-none bg-neutral-700 focus:outline-none">
+          <button
+            className="btn-sm btn border-none bg-neutral-700 focus:outline-none"
+            type="button"
+          >
             내역
           </button>
         </li>
         <div className="divider"></div>
         <li className="flex items-center justify-between">
           <div className="flex items-center space-x-3">
             <div className="placeholder avatar">
-              <div className="w-10 rounded-lg bg-neutral-500 text-neutral-content">
+              <div className="text-neutral-content w-10 rounded-lg bg-neutral-500">
                 <span>1</span>
               </div>
             </div>

diff --git a/apps/web/src/components/main/Stock.tsx b/apps/web/src/components/main/Stock.tsx
@@ -2,20 +2,20 @@ import Section from "./Section";
 
 export default function Stock() {
   return (
-    <Section title="투자" link="/">
+    <Section title="투자" link="/stock/investment">
       <ul className="flex flex-col gap-6">
         <li className="flex items-center justify-between">
           <div className="flex items-center space-x-3">
             <div className="placeholder avatar">
-              <div className="w-10 rounded-full bg-neutral-focus text-neutral-content">
+              <div className="bg-neutral-focus text-neutral-content w-10 rounded-full">
                 <span>1</span>
               </div>
             </div>
             <div className="flex flex-col">
               <span className="text-sm text-neutral-400">주식</span>
               <div className="flex flex-row space-x-2">
                 <span className="text-lg font-medium">20,000,000원</span>
-                <span className="text-lg font-medium text-error">+10.1%</span>
+                <span className="text-error text-lg font-medium">+10.1%</span>
               </div>
             </div>
           </div>

diff --git a/apps/web/src/components/stock/investment/ByAccountTab.tsx b/apps/web/src/components/stock/investment/ByAccountTab.tsx
@@ -0,0 +1,3 @@
+export default function ByAccountTab() {
+  return <>1</>;
+}