Search 불러오는 곳 구분 & css

client/src/components/Navs/MainNav.js

@@ -6,7 +6,7 @@ const MainNav = () => {
             <a class="nav-link text-white" href="#">영화</a>
             <a class="nav-link text-white" href="#">빠른예매</a>
             <a class="nav-link text-white" href="#">극장</a>
-            <Search />
+            <Search type="home" />
         </nav>
     )
 }

client/src/components/Search/Search.js

 import styles from "./search.module.scss";
 
-const Search = () => {
+const Search = ({ type }) => {
+    console.log("type==",type)
     return (
         <div className="d-flex">
-            <input className="form-control" type="text" id="search" />
-            <i className="bi bi-search align-self-center text-white" style={{ fontSize: "1.3rem" }}></i>
+            <input className="form-control" type="text" id={type === "home" ? styles.searchWhite : styles.search} />
+            <i className={`bi bi-search align-self-center ${type === "home" ? "text-white" : "mx-1"} ${styles.icon}`} style={{ fontSize: "1.3rem" }}></i>
         </div>
     )
 }

client/src/components/Search/search.module.scss

-input[type="text"] {
+.icon {
+    cursor: pointer;
+}
+
+#searchWhite {
     background: transparent;
     border: none;
     border-bottom: 2px solid #fff;
@@ -7,16 +11,22 @@ input[type="text"] {
     border-radius: 0;
     color: #fff;
     margin-bottom: 5px;
-}
 
-input[type="text"]:focus {
-    background: transparent;
-    -webkit-box-shadow: none;
-    box-shadow: none;
-    border-color: #fff;
-    color: #fff;
+    &:focus {
+        background: transparent;
+        -webkit-box-shadow: none;
+        box-shadow: none;
+        border-color: #fff;
+        color: #fff;
+    }
 }
 
-i {
-    cursor: pointer;
+#search {
+    box-shadow: none;
+    -webkit-box-shadow: none;
+    &:focus {
+        -webkit-box-shadow: none;
+        box-shadow: none;
+        border-color: #000;
+    }
 }
\ No newline at end of file