style: #17 style clone (#18)

### Description Style을 적용하였습니다.
wanted-pre-onboarding-team-12th-7 · Sep 8, 2023 · 49156bc · 49156bc
2 parents 2ed2148 + d3b0022
commit 49156bc
Show file tree

Hide file tree

Showing 16 changed files with 457 additions and 79 deletions.
diff --git a/public/index.html b/public/index.html
@@ -8,6 +8,11 @@
     <meta name="og:title" content="Search Clinical Trial 7팀" />
     <meta name="og:description" content="한국임상정보에서 질환명을 검색해보세요!" />
     <meta name="og:type" content="website" />
+    <link
+      href="//spoqa.github.io/spoqa-han-sans/css/SpoqaHanSansNeo.css"
+      rel="stylesheet"
+      type="text/css"
+    />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/clinicaltrial_logo.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a

diff --git a/public/manifest.json b/public/manifest.json
@@ -6,16 +6,6 @@
       "src": "favicon.ico",
       "sizes": "64x64 32x32 24x24 16x16",
       "type": "image/x-icon"
-    },
-    {
-      "src": "logo192.png",
-      "type": "image/png",
-      "sizes": "192x192"
-    },
-    {
-      "src": "logo512.png",
-      "type": "image/png",
-      "sizes": "512x512"
     }
   ],
   "start_url": ".",

diff --git a/src/components/search/Search.styled.ts b/src/components/search/Search.styled.ts
@@ -0,0 +1,191 @@
+import styled from 'styled-components'
+
+export const Wrapper = styled.section`
+  ${({ theme }) => theme.flex.flexColumnCenter};
+`
+
+export const SearchWrapper = styled.section`
+  text-align: center;
+  padding: 80px 0 160px;
+  width: 100%;
+  margin: auto;
+  max-width: 1040px;
+`
+
+export const TitleText = styled.div`
+  margin-bottom: 40px;
+  font-size: ${({ theme }) => theme.fontSize.title};
+  font-weight: 700;
+  letter-spacing: -0.018em;
+  line-height: 1.6;
+`
+
+export const SearchBox = styled.div`
+  max-width: 490px;
+  margin: 0 auto;
+  width: 100%;
+`
+
+export const SearchInnerBox = styled.div<{ isOpen: boolean }>`
+  border-radius: 42px;
+  border: 2px solid;
+  border-color: ${({ isOpen, theme }) => (isOpen ? theme.color.borderBottom : theme.color.white)};
+  background-color: ${({ theme }) => theme.color.white};
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  font-size: 1rem;
+  font-weight: 400;
+  letter-spacing: -0.018em;
+  line-height: 1.6;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  width: 100%;
+  position: relative;
+  padding-right: 8px;
+`
+
+export const SearchInputWrapper = styled.div`
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  font-size: 1.125rem;
+  font-weight: 700;
+  letter-spacing: -0.018em;
+  line-height: 1.6;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  padding: 20px 10px 20px 24px;
+  font-weight: 400;
+`
+
+export const SearchInputWrapperFlex = styled.div`
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  width: 100%;
+  padding-top: 7px;
+  opacity: 0;
+`
+
+export const SearchInputBox = styled.div`
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  position: relative;
+  width: 100%;
+`
+
+export const PlaceholderAbsoluteBox = styled.div`
+  color: ${({ theme }) => theme.color.placeholderText};
+  position: absolute;
+  pointer-events: none;
+  display: flex;
+`
+
+export const PlaceholderImgBox = styled.div`
+  width: 16px;
+  height: 16px;
+  margin-right: 12px;
+`
+
+export const SearchInput = styled.input`
+  caret-color: rgb(25, 118, 210);
+  padding-right: 25px;
+  width: 100%;
+  border: 0;
+  background-color: transparent;
+  min-width: 0;
+  appearance: textfield;
+  outline-offset: -2px;
+`
+
+export const ClearImgBox = styled.div<{ isOpen: boolean }>`
+  opacity: ${({ isOpen }) => (isOpen ? 100 : 0)};
+  position: absolute;
+  display: flex;
+  -webkit-box-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  justify-content: center;
+  top: 50%;
+  transform: translateY(-50%);
+  right: 0px;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  color: ${({ theme }) => theme.color.white};
+  background-color: ${({ theme }) => theme.color.clearBg};
+  cursor: pointer;
+`
+
+export const SearchButton = styled.button`
+  border-radius: 100%;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  width: 48px;
+  height: 48px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  font-weight: 500;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  border: 0;
+  cursor: pointer;
+  background-color: ${({ theme }) => theme.color.buttonBg};
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  color: ${({ theme }) => theme.color.white};
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+`
+
+export const SearchButtonImgBox = styled.div`
+  width: 21px;
+  height: 21px;
+`
diff --git a/src/components/search/SearchForm.tsx b/src/components/search/SearchForm.tsx
@@ -1,17 +1,60 @@
+import { useRef } from 'react'
+
 import { SearchFormProps } from './type'
+import { ReactComponent as ButtonSearchIcon } from '../../styles/svg/buttonSearchIcon.svg'
+import { ReactComponent as ClearIcon } from '../../styles/svg/clearIcon.svg'
+import { ReactComponent as PlaceholderSearchIcon } from '../../styles/svg/placeholderSearchIcon.svg'
+
+import * as S from './Search.styled'
 
-function SearchForm({ getInput, keyword, changeIndexByKeyDown }: SearchFormProps) {
+function SearchForm({ getInput, keyword, changeIndexByKeyDown, isOpen }: SearchFormProps) {
+  const inputRef = useRef<HTMLInputElement>(null)
   return (
-    <form onSubmit={(e) => e.preventDefault()}>
-      <input
-        type="text"
-        value={keyword}
-        onBlur={() => changeIndexByKeyDown.setIndex(-1)}
-        onChange={(e) => getInput(e.target.value)}
-        onFocus={() => changeIndexByKeyDown.setIndex(0)}
-      />
-      <button type="button">검색하기</button>
-    </form>
+    <S.SearchInnerBox isOpen={isOpen} onSubmit={(e) => e.preventDefault()}>
+      <S.SearchInputWrapper>
+        <S.SearchInputWrapperFlex />
+        <S.SearchInputBox
+          onClick={() => {
+            inputRef.current?.focus()
+          }}
+        >
+          {!isOpen && !keyword && (
+            <S.PlaceholderAbsoluteBox>
+              <S.PlaceholderImgBox>
+                <PlaceholderSearchIcon />
+              </S.PlaceholderImgBox>
+              <div>질환명을 입력해 주세요.</div>
+            </S.PlaceholderAbsoluteBox>
+          )}
+          <S.SearchInput
+            ref={inputRef}
+            autoFocus
+            type="text"
+            value={keyword}
+            onBlur={() => {
+              changeIndexByKeyDown.setIndex(-1)
+            }}
+            onChange={(e) => getInput(e.target.value)}
+            onFocus={() => {
+              changeIndexByKeyDown.setIndex(0)
+            }}
+          />
+          <S.ClearImgBox
+            isOpen={isOpen}
+            onClick={() => {
+              getInput('')
+            }}
+          >
+            <ClearIcon />
+          </S.ClearImgBox>
+        </S.SearchInputBox>
+      </S.SearchInputWrapper>
+      <S.SearchButton type="button">
+        <S.SearchButtonImgBox>
+          <ButtonSearchIcon />
+        </S.SearchButtonImgBox>
+      </S.SearchButton>
+    </S.SearchInnerBox>
   )
 }
 export default SearchForm
diff --git a/src/components/search/SearchSuggestion.styled.ts b/src/components/search/SearchSuggestion.styled.ts
@@ -0,0 +1,76 @@
+import styled from 'styled-components'
+
+export const Wrapper = styled.aside`
+  background-color: ${({ theme }) => theme.color.white};
+  width: 100%;
+  margin-top: 7px;
+  padding: 30px;
+  min-height: 240px;
+  border-radius: 20px;
+  -webkit-box-shadow: 0px 0px 5px 0.5px rgba(214, 214, 214, 1);
+  -moz-box-shadow: 0px 0px 5px 0.5px rgba(214, 214, 214, 1);
+  box-shadow: 0px 0px 5px 0.5px rgba(214, 214, 214, 1);
+  text-align: left;
+`
+
+export const SearchMainText = styled.div`
+  color: ${({ theme }) => theme.color.searchTitleText};
+  font-size: ${({ theme }) => theme.fontSize.default};
+  margin: 10px 0;
+`
+export const SearchRecentItemList = styled.ul`
+  display: flex;
+  flex-direction: column;
+`
+export const SearchRecentItem = styled.li<{ selectIndex: boolean }>`
+  padding: 8px 0;
+  background-color: ${({ theme, selectIndex }) =>
+    selectIndex ? theme.color.keyboardBg : theme.color.white};
+  width: calc(100% + 60px);
+  margin-left: -30px;
+  padding-left: 30px;
+  cursor: pointer;
+`
+
+export const SearchRecentItemButton = styled.button`
+  display: flex;
+  cursor: pointer;
+`
+
+export const SearchImgBox = styled.div`
+  width: 16px;
+  height: 16px;
+  margin-top: 2px;
+  margin-right: 10px;
+`
+
+export const SearchRecentText = styled.div`
+  color: ${({ theme }) => theme.color.basicText};
+`
+
+export const SearchRecentBox = styled.div`
+  color: rgb(173, 180, 187);
+  font-size: ${({ theme }) => theme.fontSize.default};
+`
+
+export const DivideLine = styled.div`
+  height: 1px;
+  background-color: rgb(236, 239, 241);
+  color: rgb(248, 249, 250);
+  width: calc(100% + 60px);
+  margin: 20px 0 30px -30px;
+`
+
+export const SearchSuggestionBox = styled.div`
+  margin-top: 20px;
+  display: flex;
+  gap: 8px;
+`
+
+export const SearchSuggestionItem = styled.div`
+  color: ${({ theme }) => theme.color.blue};
+  background-color: ${({ theme }) => theme.color.keyboardBg};
+  padding: 14px 16px;
+  border-radius: 22px;
+  cursor: pointer;
+`