From c0f7e3cc7f5cf3b85a143978c2a22c1743de98c9 Mon Sep 17 00:00:00 2001
From: Shinak <hin6150@gmail.com>
Date: Wed, 22 May 2024 22:14:57 +0900
Subject: [PATCH] Mvp bug fix (#13)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat: ux 개선

* feat: chrome에서 button이 사라지던 문제 해결
---
 apps/web/src/components/Search/Search.css.ts    |  1 +
 apps/web/src/components/Search/Search.tsx       | 17 +++++++++++++----
 apps/web/src/components/layout/Header.tsx       |  4 ++--
 apps/web/src/components/layout/Layout.css.ts    |  2 +-
 .../src/components/Text/Text.css.ts             |  1 -
 5 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/apps/web/src/components/Search/Search.css.ts b/apps/web/src/components/Search/Search.css.ts
index bcc9663..466e44c 100644
--- a/apps/web/src/components/Search/Search.css.ts
+++ b/apps/web/src/components/Search/Search.css.ts
@@ -66,6 +66,7 @@ export const iconContainer = recipe({
       true: {
         position: 'absolute',
         right: 59,
+        zIndex: 10,
       },
     },
   },
diff --git a/apps/web/src/components/Search/Search.tsx b/apps/web/src/components/Search/Search.tsx
index 9db79ef..8e83258 100644
--- a/apps/web/src/components/Search/Search.tsx
+++ b/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,11 +126,15 @@ 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()}>
@@ -137,6 +142,7 @@ export const SearchBox = () => {
         </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()
           }}
         >
diff --git a/apps/web/src/components/layout/Header.tsx b/apps/web/src/components/layout/Header.tsx
index 1520e55..840ca10 100644
--- a/apps/web/src/components/layout/Header.tsx
+++ b/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>
diff --git a/apps/web/src/components/layout/Layout.css.ts b/apps/web/src/components/layout/Layout.css.ts
index f0ca9df..4851548 100644
--- a/apps/web/src/components/layout/Layout.css.ts
+++ b/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',
 })
 
diff --git a/packages/design-system/src/components/Text/Text.css.ts b/packages/design-system/src/components/Text/Text.css.ts
index de94f29..a9eea6a 100644
--- a/packages/design-system/src/components/Text/Text.css.ts
+++ b/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: {