From c9b7022301fb6e4c459790249f55bcc48388ea9d Mon Sep 17 00:00:00 2001
From: hanseulhee <3021062@gmail.com>
Date: Tue, 27 Jun 2023 18:07:07 +0900
Subject: [PATCH] [#112] modify styles

---
 src/components/Nav/BottomCategory.tsx |  4 ++--
 src/components/Nav/SearchBar.tsx      | 24 ++++++++++++------------
 src/components/Nav/TopCategory.tsx    |  2 +-
 src/pages/Notice/index.tsx            |  6 +++---
 src/styles/Theme/theme.ts             |  2 +-
 5 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/src/components/Nav/BottomCategory.tsx b/src/components/Nav/BottomCategory.tsx
index 0e20329..9092c9d 100644
--- a/src/components/Nav/BottomCategory.tsx
+++ b/src/components/Nav/BottomCategory.tsx
@@ -1,6 +1,6 @@
 import { css } from "@emotion/react";
-import { useRouter } from "next/router";
 import Link from "next/link";
+import { useRouter } from "next/router";
 import { ReactNode } from "react";
 
 interface Props {
@@ -12,7 +12,7 @@ interface Props {
 function BottomCategory({ path, category, icon }: Props) {
   const router = useRouter();
   const click = {
-    color: router.asPath === path ? "#000000" : "#888888",
+    color: router.asPath === path ? "#000000" : "#757575",
     fontWeight: router.asPath === path ? "700" : "500",
   };
   return (
diff --git a/src/components/Nav/SearchBar.tsx b/src/components/Nav/SearchBar.tsx
index d70f546..155de88 100644
--- a/src/components/Nav/SearchBar.tsx
+++ b/src/components/Nav/SearchBar.tsx
@@ -10,15 +10,16 @@ function SearchBar({ search, onChange }: Props) {
   return (
     <div css={wrapper}>
       <div css={inputWrapper}>
-        <label htmlFor="search"></label>
-        <input
-          type="text"
-          id="search"
-          css={inputCss}
-          placeholder="오늘은 또 무얼 먹어볼까? 🔍"
-          value={search}
-          onChange={onChange}
-        />
+        <label htmlFor="search">
+          <input
+            type="text"
+            id="search"
+            css={inputCss}
+            placeholder="오늘은 또 무얼 먹어볼까? 🔍"
+            value={search}
+            onChange={onChange}
+          />
+        </label>
       </div>
     </div>
   );
@@ -49,8 +50,7 @@ const inputCss = (theme: Theme) => css`
   border-radius: 12px;
   width: 100%;
   height: 100%;
-  padding: 0.77rem 0.815rem;
-
-  font-weight: ${theme.fontWeight.normal};
+  padding: 0.7rem 0.815rem;
   font-size: 0.87rem;
+  font-weight: ${theme.fontWeight.normal};
 `;
diff --git a/src/components/Nav/TopCategory.tsx b/src/components/Nav/TopCategory.tsx
index 82ff64c..90f3198 100644
--- a/src/components/Nav/TopCategory.tsx
+++ b/src/components/Nav/TopCategory.tsx
@@ -11,7 +11,7 @@ function TopCategory({ path, category }: Props) {
   const router = useRouter();
 
   const click = {
-    color: router.asPath === path ? "#000000" : "#565656",
+    color: router.asPath === path ? "#000000" : "#757575",
     fontSize: "0.94rem",
     fontWeight: router.asPath === path ? "700" : "500",
   };
diff --git a/src/pages/Notice/index.tsx b/src/pages/Notice/index.tsx
index fb66a11..7061c3d 100644
--- a/src/pages/Notice/index.tsx
+++ b/src/pages/Notice/index.tsx
@@ -1,10 +1,10 @@
 import { css } from "@emotion/react";
-import InformCard from "components/Card/InformCard";
-import bgLottieRandom from "assets/lottieJSON/random.json";
-import bgLottieHi from "assets/lottieJSON/cardHi.json";
 import bgLottieComm from "assets/lottieJSON/cardComm.json";
+import bgLottieHi from "assets/lottieJSON/cardHi.json";
 import bgLottieInquiry from "assets/lottieJSON/cardInquiry.json";
 import bgLottieReview from "assets/lottieJSON/cardReview.json";
+import bgLottieRandom from "assets/lottieJSON/random.json";
+import InformCard from "components/Card/InformCard";
 import Intro from "components/Notice/Intro";
 
 function Notice() {
diff --git a/src/styles/Theme/theme.ts b/src/styles/Theme/theme.ts
index ca4811a..8ceb29b 100644
--- a/src/styles/Theme/theme.ts
+++ b/src/styles/Theme/theme.ts
@@ -4,7 +4,7 @@ const theme = {
     white: "#fafafa",
     border: "#f2f2f2",
     black: "#000000",
-    yellow: "#fbbe18",
+    yellow: "#ffbb00",
     grey100: "#f9f9f9",
     grey500: "#888888",
     grey900: "#5d5d5d",