From 728a14402603f77efb7a6f615bfea4fb8a391389 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=A0=95=EC=A7=84=EB=A6=AC/=EC=8A=A4=ED=86=A0=EC=96=B4?=
 =?UTF-8?q?=ED=94=84=EB=A1=A0=ED=8A=B8=ED=8C=80?= <yeti.jeong@musinsa.com>
Date: Sat, 2 Mar 2024 01:32:02 +0900
Subject: [PATCH] feat: implement sticky on ticker page

---
 src/app/(input)/error.tsx                     | 26 +++++++++++++++++++
 src/app/(input)/layout.tsx                    | 23 ++++++++++++++++
 .../ticker/_components/intro.tsx              |  9 ++++---
 .../ticker/_components/ticker-content.tsx     |  4 +--
 .../ticker/_components/ticker-drawer.tsx      |  0
 .../ticker/_components/ticker-footer.tsx      |  0
 .../ticker/_components/ticker-list.tsx        |  2 +-
 src/app/{(main) => (input)}/ticker/page.tsx   |  0
 8 files changed, 57 insertions(+), 7 deletions(-)
 create mode 100644 src/app/(input)/error.tsx
 create mode 100644 src/app/(input)/layout.tsx
 rename src/app/{(main) => (input)}/ticker/_components/intro.tsx (80%)
 rename src/app/{(main) => (input)}/ticker/_components/ticker-content.tsx (97%)
 rename src/app/{(main) => (input)}/ticker/_components/ticker-drawer.tsx (100%)
 rename src/app/{(main) => (input)}/ticker/_components/ticker-footer.tsx (100%)
 rename src/app/{(main) => (input)}/ticker/_components/ticker-list.tsx (95%)
 rename src/app/{(main) => (input)}/ticker/page.tsx (100%)

diff --git a/src/app/(input)/error.tsx b/src/app/(input)/error.tsx
new file mode 100644
index 0000000..bc7e888
--- /dev/null
+++ b/src/app/(input)/error.tsx
@@ -0,0 +1,26 @@
+"use client";
+import Image from "next/image";
+import { Button } from "@/components/common/button/button";
+import { useRouter } from "next/navigation";
+import ErrorImage from "@/app/(main)/_assets/error.png";
+
+export default function Error({ error, reset }: { error: Error & { digest?: string }; reset: () => void }) {
+  const router = useRouter();
+
+  const handleButtonClick = () => {
+    router.replace("/");
+  };
+
+  return (
+    <div className="flex size-full flex-col items-center justify-center gap-6">
+      <Image src={ErrorImage} alt="Error Occurred" width={160} height={160} />
+      <div className="flex flex-col items-center">
+        <h2 className=" text-h5 text-grey-900">Something went wrong!</h2>
+        <h2 className=" text-h5 text-grey-900">Please Try Again</h2>
+      </div>
+      <Button className="rounded-lg" variant={"primary"} size={"fit"} onClick={handleButtonClick}>
+        Go To Home
+      </Button>
+    </div>
+  );
+}
diff --git a/src/app/(input)/layout.tsx b/src/app/(input)/layout.tsx
new file mode 100644
index 0000000..5f9b716
--- /dev/null
+++ b/src/app/(input)/layout.tsx
@@ -0,0 +1,23 @@
+import { Viewport } from "next";
+import Link from "next/link";
+import React from "react";
+import Logo from "@/components/common/logo/logo";
+
+export const viewport: Viewport = {
+  themeColor: "var(--color-white)",
+};
+
+const InputLayout = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <div className="flex size-full flex-col">
+      <div className="sticky top-0 z-10 flex h-11 w-full shrink-0 items-center justify-start bg-white px-5">
+        <Link href="/">
+          <Logo />
+        </Link>
+      </div>
+      <div className="h-[calc(100%-50px)] w-full">{children}</div>
+    </div>
+  );
+};
+
+export default InputLayout;
diff --git a/src/app/(main)/ticker/_components/intro.tsx b/src/app/(input)/ticker/_components/intro.tsx
similarity index 80%
rename from src/app/(main)/ticker/_components/intro.tsx
rename to src/app/(input)/ticker/_components/intro.tsx
index e4142a3..343378a 100644
--- a/src/app/(main)/ticker/_components/intro.tsx
+++ b/src/app/(input)/ticker/_components/intro.tsx
@@ -10,11 +10,11 @@ const Intro = () => {
   const hasStock = stocks.length > 0;
 
   return (
-    <div className={`${hasStock && "border-b border-b-grey-100"} sticky top-0 w-full bg-white px-4`}>
-      <h2 className="pt-4 text-h2">
+    <>
+      <h2 className="px-4 pt-4 text-h2">
         You added <span className="text-main-700">{stocks.length}</span> {`${stocks.length > 1 ? "stocks" : "stock"}`}.
       </h2>
-      <div className="flex flex-col justify-start pb-4 pt-10 text-lg">
+      <div className="sticky top-4 flex flex-col justify-start bg-white px-4 pb-4 pt-10 text-lg">
         <Button
           onClick={() => {
             isDrawerOpenChange(true);
@@ -27,7 +27,8 @@ const Intro = () => {
           <p className="text-h5 text-grey-700">Add Stock</p>
         </Button>
       </div>
-    </div>
+      <div className={`${hasStock && "h-px border-b border-b-grey-100"}`} />
+    </>
   );
 };
 
diff --git a/src/app/(main)/ticker/_components/ticker-content.tsx b/src/app/(input)/ticker/_components/ticker-content.tsx
similarity index 97%
rename from src/app/(main)/ticker/_components/ticker-content.tsx
rename to src/app/(input)/ticker/_components/ticker-content.tsx
index 4431392..4b4474d 100644
--- a/src/app/(main)/ticker/_components/ticker-content.tsx
+++ b/src/app/(input)/ticker/_components/ticker-content.tsx
@@ -1,7 +1,7 @@
 "use client";
 
-import Intro from "@/app/(main)/ticker/_components/intro";
-import { TickerDrawer } from "@/app/(main)/ticker/_components/ticker-drawer";
+import Intro from "@/app/(input)/ticker/_components/intro";
+import { TickerDrawer } from "@/app/(input)/ticker/_components/ticker-drawer";
 import { Dialog } from "@/components/common/dialog/dialog";
 import Toast from "@/components/common/toast/toast";
 import { Stock, useStocksStore } from "@/state/stores/stocks-store";
diff --git a/src/app/(main)/ticker/_components/ticker-drawer.tsx b/src/app/(input)/ticker/_components/ticker-drawer.tsx
similarity index 100%
rename from src/app/(main)/ticker/_components/ticker-drawer.tsx
rename to src/app/(input)/ticker/_components/ticker-drawer.tsx
diff --git a/src/app/(main)/ticker/_components/ticker-footer.tsx b/src/app/(input)/ticker/_components/ticker-footer.tsx
similarity index 100%
rename from src/app/(main)/ticker/_components/ticker-footer.tsx
rename to src/app/(input)/ticker/_components/ticker-footer.tsx
diff --git a/src/app/(main)/ticker/_components/ticker-list.tsx b/src/app/(input)/ticker/_components/ticker-list.tsx
similarity index 95%
rename from src/app/(main)/ticker/_components/ticker-list.tsx
rename to src/app/(input)/ticker/_components/ticker-list.tsx
index 7d54267..582a1b4 100644
--- a/src/app/(main)/ticker/_components/ticker-list.tsx
+++ b/src/app/(input)/ticker/_components/ticker-list.tsx
@@ -38,7 +38,7 @@ const TickerList = React.memo(({ data, tickerName, hasShares, onClick }: TickerP
   );
 
   return (
-    <div className="flex h-full w-full flex-1 flex-col items-start overflow-scroll" style={{}}>
+    <div className={`flex h-full w-full flex-1 flex-col items-start ${!hasShares && "overflow-scroll"} `} style={{}}>
       <div className={`flex w-full flex-1 flex-col items-start ${hasShares ? "gap-6 pt-6" : "gap-5 pt-8"} px-4 pb-1`}>
         {data.map((item, index) => (
           <div key={index} className="flex w-full justify-between" onClick={() => onClick(item)}>
diff --git a/src/app/(main)/ticker/page.tsx b/src/app/(input)/ticker/page.tsx
similarity index 100%
rename from src/app/(main)/ticker/page.tsx
rename to src/app/(input)/ticker/page.tsx