[FE] 서치바 UI 작업 (#37)

* chore: semantic tag로 변경

- div 떡칠되어 있던 것을 table 관련 태그로 바꿈

Dae-Hwa/airbnb/#19

* feat: 서치바 UI

- 서치바 UI 조금 더 기획서에 가깝게 디자인
- 타입스크립트를 약간 사용했음

Dae-Hwa/airbnb/#2

FE/fe-airbnb/src/components/SearchButton.jsx

@@ -21,7 +21,6 @@ const Button = styled.button`
   border-radius: ${({ theme }) => theme.borders.M};
   width: ${({ size }) => (size === 'compact' ? '40px' : '90px')};
   height: 40px;
-  padding: 8px 16px 8px 8px;
 
   span {
     margin-left: 5px;

FE/fe-airbnb/src/components/calendar/Calendar.jsx

@@ -34,21 +34,21 @@ const Calendar = ({ calendar }) => {
   );
 };
 
-const CalendarContainer = styled.div``;
+const CalendarContainer = styled.table``;
 
-const CalendarBody = styled.div`
+const CalendarBody = styled.tbody`
   display: flex;
   flex-direction: column;
 
   flex-wrap: wrap;
   gap: 4px 0px;
 `;
 
-const Week = styled.div`
+const Week = styled.tr`
   display: flex;
 `;
 
-const Day = styled.div`
+const Day = styled.td`
   display: flex;
   align-items: center;
   justify-content: center;

FE/fe-airbnb/src/components/calendar/CalendarHeader.jsx

@@ -11,15 +11,15 @@ const CalendarHeader = ({ calendar }) => {
   }
 
   return (
-    <Flex>
-      <Title>
+    <Title>
+      <Flex>
         {currYear()}년 {currMonthName()}월
-      </Title>
-    </Flex>
+      </Flex>
+    </Title>
   );
 };
 
-const Title = styled.div`
+const Title = styled.caption`
   width: 336px;
   display: flex;
   justify-content: center;

FE/fe-airbnb/src/components/calendar/DayNames.jsx

@@ -14,7 +14,7 @@ const DayNames = (props) => {
   );
 };
 
-const DayName = styled.li`
+const DayName = styled.th`
   color: ${({ theme }) => theme.colors.gray3};
   font-size: ${({ theme }) => theme.fontSizes.XS};
   width: 48px;

FE/fe-airbnb/src/components/searchBar/SearchBar.tsx

@@ -0,0 +1,89 @@
+import { Center, Container, Flex, Spacer } from '@chakra-ui/layout';
+import styled from 'styled-components';
+import SearchButton from '../SearchButton';
+import SearchBarBtn from './SearchBarBtn';
+
+function SearchBar() {
+  return (
+    <Center>
+      <SearchBarContainer>
+        <Flex>
+          <SearchBarBtn>
+            <CheckInOut>
+              <Flex direction="column">
+                <SearchBarSubTitle>체크인</SearchBarSubTitle>
+                <SelectedContent contentType="placeholder">날짜 입력</SelectedContent>
+              </Flex>
+              <CustomSpacer />
+              <Flex direction="column">
+                <SearchBarSubTitle>체크아웃</SearchBarSubTitle>
+                <SelectedContent contentType="placeholder">날짜 입력</SelectedContent>
+              </Flex>
+            </CheckInOut>
+          </SearchBarBtn>
+
+          <SearchBarBtn>
+            <Flex direction="column">
+                <SearchBarSubTitle>요금</SearchBarSubTitle>
+                <SelectedContent contentType="placeholder">금액대 설정</SelectedContent>
+            </Flex>
+          </SearchBarBtn>
+
+          <SearchBarBtn>
+            <Flex direction="column">
+              <SearchBarSubTitle>인원</SearchBarSubTitle>
+              <SelectedContent contentType="placeholder">게스트 추가</SelectedContent>
+            </Flex>
+          </SearchBarBtn>
+
+          <SearchButtonContainer>
+            <SearchButton size="compact" />
+          </SearchButtonContainer>
+        </Flex>
+      </SearchBarContainer>
+    </Center>
+  );
+};
+
+const SearchBarContainer = styled.div`
+  width: 916px;
+  height: 76px;
+  background-color: ${({ theme }) => theme.colors.white};
+  border: 1px solid ${({ theme }) => theme.colors.gray4};
+  border-radius: ${({ theme }) => theme.borders.XL};
+  position: relative;
+`;
+
+const SearchBarSubTitle = styled.div`
+  font-size: ${({theme}) => theme.fontSizes.XS};
+  font-weight: bold;
+  width: 112px;
+  height: 17px;
+  margin-bottom: 4px;
+`
+
+const CheckInOut = styled.div`
+  display: flex;
+`
+
+const CustomSpacer = styled.div`
+  width: 24px;
+`
+
+type SelectedContentProps = {
+  contentType: string
+}
+const SelectedContent = styled.div<SelectedContentProps>`
+  font-size: ${({theme}) => theme.fontSizes.SM};
+  color: ${({contentType, theme}) => contentType === 'placeholder' ? theme.colors.gray2 : theme.colors.black};
+  width: 112px;
+  height: 23px;
+`
+
+const SearchButtonContainer = styled.div`
+  position: absolute;
+  top: 18px;
+  right: 18px;
+`
+
+export default SearchBar;

FE/fe-airbnb/src/components/searchBar/SearchBarBtn.tsx

@@ -0,0 +1,29 @@
+import styled from 'styled-components';
+import { ReactElement } from 'react'
+
+type SearchBarBtnProps = {
+  children: ReactElement[] | any;
+}
+
+function SearchBarBtn({children}: SearchBarBtnProps): ReactElement {
+  return (
+    <SearchBarBtnContainer>
+      {children}
+    </SearchBarBtnContainer>
+  )
+}
+
+const SearchBarBtnContainer = styled.div`
+  display: flex;
+  align-items: center;
+  padding: 14px 24px; 
+  width: 100%;
+  height: 76px;
+  border-radius: ${({theme}) => theme.borders.XL};
+
+  &:hover {
+    background-color: ${({theme}) => theme.colors.gray5};
+  }
+`
+
+export default SearchBarBtn