Mvp bug fix (#13)

* feat: ux 개선

* feat: chrome에서 button이 사라지던 문제 해결

apps/web/src/components/Search/Search.css.ts

@@ -66,6 +66,7 @@ export const iconContainer = recipe({
       true: {
         position: 'absolute',
         right: 59,
+        zIndex: 10,
       },
     },
   },

apps/web/src/components/Search/Search.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useEffect, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import { Icon, Text } from '@vook-client/design-system/src/index'
 
 import {
@@ -69,6 +69,7 @@ const HistoryBar = ({ word, handleSearch }: HistoryBarType) => {
 export const SearchBox = () => {
   const { query, queryHistory, setQuery, setQueryHistory, setRequestQuery } =
     searchStore()
+  const inputRef = useRef<HTMLInputElement>(null)
 
   const [isFocused, setIsFocused] = useState(false)
 
@@ -102,7 +103,7 @@ export const SearchBox = () => {
     const word = searchedWord.trim()
 
     if (word === '') {
-      setQuery(word)
+      setRequestQuery()
       return
     }
 
@@ -125,18 +126,23 @@ export const SearchBox = () => {
 
   return (
     <div
+      role="presentation"
       className={searchBoxContainer}
       onFocus={() => setIsFocused(true)}
       onBlur={() => {
         setIsFocused(false)
       }}
+      onClick={() => {
+        inputRef.current?.focus()
+      }}
     >
       <div className={searchBar()}>
         <div className={iconContainer()}>
           <Icon name="symbol" />
         </div>
         <div className={inputContainer}>
           <input
+            ref={inputRef}
             className={inputBox()}
             placeholder="어떤 용어가 궁금하신가요?"
             value={query}
@@ -152,8 +158,10 @@ export const SearchBox = () => {
           <div
             role="presentation"
             className={iconContainer({ click: true, absoulte: true })}
-            onClick={() => {
+            onClick={(e) => {
+              e.stopPropagation()
               setQuery('')
+              setRequestQuery()
             }}
           >
             <Icon name="close-circle" />
@@ -162,7 +170,8 @@ export const SearchBox = () => {
         <div
           role="presentation"
           className={iconContainer({ click: true })}
-          onClick={() => {
+          onClick={(e) => {
+            e.stopPropagation()
             handleSearch()
           }}
         >

apps/web/src/components/layout/Header.tsx

@@ -4,7 +4,7 @@ import { Button } from '@vook-client/design-system'
 
 import { Logo } from '../common'
 
-import { chromeOnly, header, headerContainer, inner } from './Layout.css'
+import { displayNone, header, headerContainer, inner } from './Layout.css'
 
 export const Header = () => {
   const [isChrome, setIsChrome] = useState(false)
@@ -20,7 +20,7 @@ export const Header = () => {
       <div className={inner}>
         <div className={headerContainer}>
           <Logo />
-          <div id="chrome-only-element" className={isChrome ? chromeOnly : ''}>
+          <div id="chrome-only-element" className={isChrome ? '' : displayNone}>
             <Button size="small">Download</Button>
           </div>
         </div>

apps/web/src/components/layout/Layout.css.ts

@@ -66,7 +66,7 @@ export const inner = style({
   height: '100%',
 })
 
-export const chromeOnly = style({
+export const displayNone = style({
   display: 'none',
 })
 

packages/design-system/src/components/Text/Text.css.ts

@@ -7,7 +7,6 @@ export const text = recipe({
     display: 'inline',
     letterSpacing: '0.01em',
     whiteSpace: 'pre-wrap',
-    margin: 0,
   },
   variants: {
     type: {