Merge pull request #25 from Nexters/feat/qa-ticker

style: fix the design qa on ticker
Nexters · Feb 24, 2024 · 413908a · 413908a
2 parents bb20c6c + 88d740f
commit 413908a
Show file tree

Hide file tree

Showing 9 changed files with 55 additions and 21 deletions.
diff --git a/src/app/(main)/report/sector-detail/_components/header.tsx b/src/app/(main)/report/sector-detail/_components/header.tsx
@@ -16,7 +16,7 @@ export const Header = React.memo(({ tickerCount }: HeaderProps) => {
         <Image src={"/next.svg"} alt={"section-logo"} width={56} height={56} />
       </div>
 
-      <div className="inline-block rounded-2xl bg-gray-200 px-2.5 py-1.5">{`${tickerCount} Tickers`}</div>
+      <div className="inline-block rounded-2xl bg-gray-100 px-2.5 py-1.5 text-h6">{`${tickerCount} Stocks`}</div>
     </div>
   );
 });
diff --git a/src/app/(main)/report/sector-detail/_components/sector-insights-item.tsx b/src/app/(main)/report/sector-detail/_components/sector-insights-item.tsx
@@ -28,7 +28,13 @@ export const SectorInsightsItem = React.memo(({ title, stocks, type }: SectorIns
           return (
             <div key={idx} className="rounded-lg border border-gray-200 p-4" style={{ minWidth: 119, maxWidth: 119 }}>
               <div className="flex flex-col gap-4">
-                <Image src={"/next.svg"} alt={stock.ticker} width={32} height={32} />
+                <Image
+                  src={"/next.svg"}
+                  alt={stock.ticker}
+                  className="h-8 w-8 rounded-full border border-gray-100"
+                  width={32}
+                  height={32}
+                />
 
                 <div>
                   <h5 className="text-h5 text-gray-900">{stock.ticker}</h5>

diff --git a/src/app/(main)/report/sector-detail/_components/sector-insights.tsx b/src/app/(main)/report/sector-detail/_components/sector-insights.tsx
@@ -63,7 +63,10 @@ export const SectorInsights = React.memo(() => {
     <div>
       <div className="flex w-full flex-col gap-2 border-b border-b-gray-200 px-5 py-8">
         <h2 className="text-h2 text-grey-900">Sector Insights</h2>
-        <p className=" text-body3 text-grey-600">{`Last updated ${"2024/01/27 21:38"}`}</p>
+        <p className="text-body3 text-grey-600">
+          {`Last updated `}
+          <span className="text-main-700">{`${"2024/01/27 21:38"}`}</span>{" "}
+        </p>
       </div>
 
       <div className="flex w-full flex-col gap-10 py-8">

diff --git a/src/app/(main)/ticker/_components/intro.tsx b/src/app/(main)/ticker/_components/intro.tsx
@@ -7,10 +7,11 @@ import React from "react";
 const Intro = () => {
   const { isDrawerOpenChange } = useDrawerStore();
   const { stocks } = useStocksStore();
+  const hasStock = stocks.length > 0;
   return (
-    <div className="border-b border-b-grey-100 px-4">
+    <div className={`${hasStock && "border-b border-b-grey-100"} px-4`}>
       <h2 className="pt-4 text-h2">
-        You Added <span className="text-main-700">{stocks.length}</span> Tickers.
+        You added <span className="text-main-700">{stocks.length}</span> {`${hasStock ? "stocks" : "stock"}`}.
       </h2>
       <div className="flex flex-col justify-start pb-4 pt-10 text-lg">
         <Button
@@ -22,7 +23,7 @@ const Intro = () => {
           <div className="flex h-10 w-10 items-center justify-center rounded-full bg-gray-100 text-gray-500">
             <Plus />
           </div>
-          <p className="text-h5 text-gray-700">Add Ticker</p>
+          <p className="text-h5 text-gray-700">Add Stock</p>
         </Button>
       </div>
     </div>

diff --git a/src/app/(main)/ticker/_components/ticker-content.tsx b/src/app/(main)/ticker/_components/ticker-content.tsx
@@ -115,8 +115,13 @@ const TickerContent = React.memo(() => {
   }, [editStock, isDrawerOpenChange, resetData, selectedStock, tickerCount]);
 
   return (
-    <DrawerPrimitive open={isDrawerOpen}>
-      <div className="flex h-full w-full flex-col pt-11">
+    <DrawerPrimitive
+      open={isDrawerOpen}
+      onClose={() => {
+        isDrawerOpenChange(false);
+      }}
+    >
+      <div className="flex h-full w-full flex-col pt-2.5">
         <Intro />
         <TickerList data={stocks} hasShares onClick={handleSelectedTickerClick} />
       </div>

diff --git a/src/app/(main)/ticker/_components/ticker-drawer.tsx b/src/app/(main)/ticker/_components/ticker-drawer.tsx
@@ -61,7 +61,7 @@ export const TickerDrawer = React.memo(
     return (
       <DrawerContent className="mx-auto h-[calc(100%-100px)] max-w-[--max-width] ">
         <DrawerHeader>
-          <DrawerTitle className="mb-10">{title}</DrawerTitle>
+          <DrawerTitle className="mb-10 text-h3">{title}</DrawerTitle>
           <Input
             value={tickerName}
             label="Ticker"

diff --git a/src/app/(main)/ticker/_components/ticker-footer.tsx b/src/app/(main)/ticker/_components/ticker-footer.tsx
@@ -7,27 +7,27 @@ import React from "react";
 export default function TickerFooter() {
   const { stocks } = useStocksStore();
   const router = useRouter();
-  const isSubmittable = stocks.length > 0;
 
   const handleTickerSubmit = () => {
     router.push(`/report`);
   };
 
+  if (stocks.length === 0) return null;
+
   return (
     <div
-      className="fixed bottom-4 flex w-full justify-center pt-12"
+      className="fixed bottom-4 flex w-full justify-center p-5 pt-12"
       style={{
         backgroundImage: "linear-gradient(0deg, var(--color-white) 52.78%, rgba(255, 255, 255, 0.00) 100%)",
         maxWidth: 768,
       }}
     >
       <Button
-        disabled={!isSubmittable}
         variant={"default"}
         className="mx-5 h-14 w-full rounded-lg bg-main-700 p-4"
         style={{
-          backgroundColor: isSubmittable ? "#4F6AFC" : "#7692DA",
-          color: isSubmittable ? "#fff" : "rgba(255, 255, 255, 0.40)",
+          backgroundColor: "#4F6AFC",
+          color: "#fff",
         }}
         onClick={handleTickerSubmit}
       >

diff --git a/src/components/common/navigation-bar/navigation-bar.tsx b/src/components/common/navigation-bar/navigation-bar.tsx
@@ -1,11 +1,12 @@
 import React from "react";
 import Logo from "../logo/logo";
+import Link from "next/link";
 
 const NavigationBar = () => {
   return (
-    <div className="flex w-full items-center justify-start bg-transparent px-5 py-2.5">
+    <Link href="/" className="flex w-full items-center justify-start bg-transparent px-5 py-2.5">
       <Logo />
-    </div>
+    </Link>
   );
 };
 

diff --git a/src/components/ui/input.tsx b/src/components/ui/input.tsx
@@ -15,7 +15,7 @@ interface InputProps extends HTMLProps<HTMLInputElement> {
   onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
 }
 
-const inputVariants = cva("outline-none w-full", {
+const containerVariants = cva("", {
   variants: {
     variant: {
       default: "border-gray-300",
@@ -27,7 +27,20 @@ const inputVariants = cva("outline-none w-full", {
     variant: "default",
   },
 });
-const labelVariants = cva("block text-h6 font-medium mb-1", {
+
+const inputVariants = cva("outline-none w-full h-9", {
+  variants: {
+    variant: {
+      default: "border-gray-300",
+      focused: "border-2 border-blue-700",
+      error: "border-error",
+    },
+  },
+  defaultVariants: {
+    variant: "default",
+  },
+});
+const labelVariants = cva("block text-h6 mb-1.5", {
   variants: {
     variant: {
       default: "text-gray-700",
@@ -60,16 +73,21 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
     return (
       <div className={`input-container${type}`}>
         {label && <label className={cn(labelVariants({ variant: inputState }))}>{label}</label>}
-        <div className="relative flex w-full justify-center rounded-lg border px-4 py-2 outline-none">
+        <div
+          className={
+            cn(containerVariants({ variant: inputState })) +
+            " outline-none relative flex w-full justify-center rounded-lg border px-4 py-2"
+          }
+        >
           <input
             ref={ref}
-            className={cn(inputVariants({ variant: inputState }))}
+            className={"h-9 w-full outline-none"}
             type={type}
             onFocus={handleFocus} // 수정된 handleFocus 함수로 변경
             onBlur={handleBlur}
             {...props}
           />
-          {!props.disabled && (
+          {!props.disabled && props.value && (
             <div className="flex items-center pl-4 ">
               <button
                 className="flex h-5 w-5 items-center justify-center rounded-full bg-gray-300"