[Team22][FE]1주차 금요일 pr (#98)

* Refactor: PR 리뷰를 바탕으로 코드 수정 - 모달창 경로 수정 - styled-components와 mui 구분 - 그 외는 리뷰 참고 Co-authored-by: herrakam <herrakam@users.noreply.github.com> * [FE] result페이지 UI 구현 (#33) * Design: 기존 스타일 수정 - 라우터에 따른 스타일 변경 추가 Co-authored-by: herrakam <herrakam@users.noreply.github.com> * Design: Result 페이지 UI 구현 Co-authored-by: herrakam <herrakam@users.noreply.github.com> * Rename: Hotel.tsx 파일 경로 이동 * Design: result 페이지의 숙소 리스트 컴포넌트와 일부 컴포넌트의 스타일 변경 * Design: Hotel 컴포넌트와 관련된 스켈레톤 UI 생성 * Refactoer: 서치바 리팩토링 - 각 컴포넌트를 공통된 스타일 컴포넌트로 변경 - 일부 태그 변경 - hover 이펙트 추가 Co-authored-by: herrakam <herrakam@users.noreply.github.com> * Chore: dependencies 관련 수정 (#40) - devDependencies에 설치된 스타일 라이브러리를 dependencies로 재설치함 Co-authored-by: jm <jm.dev.study@gmail.com> Co-authored-by: herrakam <herrakam@users.noreply.github.com> Co-authored-by: 도비 <85747667+JiminKim-dev@users.noreply.github.com>
codesquad-members-2022 · May 30, 2022 · cbbb792 · cbbb792
1 parent 737956a
commit cbbb792
Show file tree

Hide file tree

Showing 22 changed files with 29,961 additions and 29,717 deletions.
diff --git a/fe/package-lock.json b/fe/package-lock.json
diff --git a/fe/package.json b/fe/package.json
@@ -3,6 +3,9 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@emotion/react": "^11.9.0",
+    "@emotion/styled": "^11.8.1",
+    "@mui/material": "^5.8.1",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.2.0",
     "@testing-library/user-event": "^13.5.0",
@@ -15,6 +18,7 @@
     "react-dom": "^18.1.0",
     "react-router-dom": "^6.3.0",
     "react-scripts": "5.0.1",
+    "styled-components": "^5.3.5",
     "typescript": "^4.6.4",
     "web-vitals": "^2.1.4"
   },
@@ -45,11 +49,7 @@
     ]
   },
   "devDependencies": {
-    "@emotion/react": "^11.9.0",
-    "@emotion/styled": "^11.8.1",
-    "@mui/material": "^5.8.1",
     "@types/styled-components": "^5.1.25",
-    "styled-components": "^5.3.5",
     "@typescript-eslint/eslint-plugin": "^5.25.0",
     "@typescript-eslint/parser": "^5.25.0",
     "eslint": "^8.16.0",

diff --git a/fe/src/App.tsx b/fe/src/App.tsx
@@ -1,18 +1,18 @@
 import { ThemeProvider as StyledThemeProvider } from 'styled-components';
-import { CssBaseline, ThemeProvider } from '@mui/material';
-import { theme as globalTheme } from 'styles/GlobalStyles';
-import { theme as StyledTheme } from 'styles/theme';
+import { CssBaseline, ThemeProvider as MuiThemeProvider } from '@mui/material';
+import { theme as MuiGlobalTheme } from 'styles/GlobalStyles';
+import { theme as ScGlobalTheme } from 'styles/theme';
 
 import Router from 'Router';
 
 function App() {
   return (
-    <ThemeProvider theme={globalTheme}>
+    <MuiThemeProvider theme={MuiGlobalTheme}>
       <CssBaseline />
-      <StyledThemeProvider theme={StyledTheme}>
+      <StyledThemeProvider theme={ScGlobalTheme}>
         <Router />
       </StyledThemeProvider>
-    </ThemeProvider>
+    </MuiThemeProvider>
   );
 }
 

diff --git a/fe/src/components/Header/Menu.tsx b/fe/src/components/Header/Menu.tsx
@@ -13,7 +13,8 @@ function Menu() {
 
 const CustomBreadcrumbs = styled(Breadcrumbs)`
   && {
-    margin: 0 auto;
+    display: flex;
+    justify-content: center;
     margin-bottom: 32px;
     border: none;
   }
@@ -30,7 +31,7 @@ const CustomLink = styled(Link)`
     &:hover {
       background: none;
       ${({ theme }) => theme.fontStyles.bold16px};
-      text-decoration: none;
+      text-decoration: underline;
     }
   }
 `;

diff --git a/fe/src/components/Header/MiniSearchBar/index.tsx b/fe/src/components/Header/MiniSearchBar/index.tsx
@@ -1,19 +1,21 @@
 import styled from 'styled-components';
 import { Divider } from '@mui/material';
-import { SearchButton, StyledSearchIcon, Btn } from 'components/Header/SearchBar/searchBar.styled';
+import { StyledSearchIcon } from 'components/Header/SearchBar/searchBar.styled';
 
-function MiniSearchBar({ changeSearchBar }: any) {
+type MyProps = {
+  changeSearchBar: () => void;
+};
+
+function MiniSearchBar({ changeSearchBar }: MyProps) {
   return (
     <MiniSearchBarWrap onClick={changeSearchBar}>
-      <MiniBarButton>일정 입력</MiniBarButton>
+      <MiniBarButton aria-label="일정 입력 버튼">일정 입력</MiniBarButton>
       <Divider orientation="vertical" />
-      <PriceButton>₩100,000~1,000,000</PriceButton>
+      <PriceButton aria-label="요금 입력 버튼">₩100,000~1,000,000</PriceButton>
       <Divider orientation="vertical" />
-      <MiniBarButton>인원 입력</MiniBarButton>
-      <MiniSearchBtn>
-        <StyledSearchButton>
-          <MiniSearchIcon />
-        </StyledSearchButton>
+      <MiniBarButton aria-label="인원 입력 버튼">인원 입력</MiniBarButton>
+      <MiniSearchBtn type="button" aria-label="결과 찾기 버튼">
+        <MiniSearchIcon />
       </MiniSearchBtn>
     </MiniSearchBarWrap>
   );
@@ -29,28 +31,30 @@ const MiniSearchBarWrap = styled.div`
   border-radius: 999px;
   padding: 8px 8px 8px 24px;
   border: 1px solid ${({ theme }) => theme.colors.grey4};
+  cursor: pointer;
+
+  &:hover {
+    box-shadow: 0px 0px 13px 2px rgba(51, 51, 51, 0.29);
+  }
 `;
 
 const MiniSearchBtn = styled.button`
   width: 32px;
   height: 32px;
   border-radius: 50%;
+  padding-top: 5px;
   background: ${({ theme }) => theme.colors.primary};
 `;
 
-const MiniBarButton = styled(Btn)`
+const MiniBarButton = styled.div`
+  ${({ theme }) => theme.fontStyles.normal16px};
   color: ${({ theme }) => theme.colors.grey3};
 `;
 
 const PriceButton = styled(MiniBarButton)`
   color: ${({ theme }) => theme.colors.grey3};
 `;
 
-const StyledSearchButton = styled(SearchButton)`
-  padding: 0;
-  height: 0;
-`;
-
 const MiniSearchIcon = styled(StyledSearchIcon)`
   width: 16px;
   height: 16px;

diff --git a/fe/src/components/Header/SearchBar/Period.tsx b/fe/src/components/Header/SearchBar/Period.tsx
@@ -1,27 +1,35 @@
+import { Divider } from '@mui/material';
 import {
-  Period as PeriodContainer,
-  CommonWrapper,
-  CheckIn,
-  CheckOut,
-  Btn,
+  CommonContainer,
+  CommonButton,
+  Label,
+  InputState,
   StyledCrossIcon,
 } from 'components/Header/SearchBar/searchBar.styled';
 
 function Period() {
   return (
-    <PeriodContainer>
-      <CommonWrapper>
-        <CheckIn>체크인</CheckIn>
-        <Btn aria-label="체크인 날짜 입력 버튼">날짜 입력</Btn>
-      </CommonWrapper>
-      <CommonWrapper>
-        <CheckOut>체크아웃</CheckOut>
-        <Btn aria-label="체크아웃 날짜 입력 버튼">날짜 입력</Btn>
-      </CommonWrapper>
-      <button type="button" aria-label="날짜 입력 취소 버튼">
-        <StyledCrossIcon />
-      </button>
-    </PeriodContainer>
+    <>
+      <CommonContainer>
+        <CommonButton aria-label="체크인 날짜 입력 버튼" style={{ paddingLeft: '24px' }}>
+          <Label>체크인</Label>
+          <InputState>날짜 입력</InputState>
+        </CommonButton>
+        <button type="button" aria-label="날짜 입력 취소 버튼">
+          <StyledCrossIcon />
+        </button>
+      </CommonContainer>
+      <Divider orientation="vertical" sx={{ height: '60%' }} />
+      <CommonContainer>
+        <CommonButton aria-label="체크아웃 날짜 입력 버튼">
+          <Label>체크아웃</Label>
+          <InputState>날짜 입력</InputState>
+        </CommonButton>
+        <button type="button" aria-label="날짜 입력 취소 버튼">
+          <StyledCrossIcon />
+        </button>
+      </CommonContainer>
+    </>
   );
 }
 

diff --git a/fe/src/components/Header/SearchBar/Personnel.tsx b/fe/src/components/Header/SearchBar/Personnel.tsx
@@ -1,23 +1,29 @@
+import styled from 'styled-components';
 import {
-  Personnel as PersonnelContainer,
-  CommonWrapper,
+  CommonButton,
   Label,
-  Btn,
+  InputState,
   StyledCrossIcon,
 } from 'components/Header/SearchBar/searchBar.styled';
 
 function Personnel() {
   return (
-    <PersonnelContainer>
-      <CommonWrapper>
+    <>
+      <CommonButton aria-label="게스트 추가 버튼" style={{ width: '124px' }}>
         <Label>인원</Label>
-        <Btn aria-label="게스트 추가 버튼">게스트 추가</Btn>
-      </CommonWrapper>
+        <PersonnelInputState>게스트 2명, 유아 2명</PersonnelInputState>
+      </CommonButton>
       <button type="button" aria-label="게스트 추가 취소 버튼">
         <StyledCrossIcon />
       </button>
-    </PersonnelContainer>
+    </>
   );
 }
 
+const PersonnelInputState = styled(InputState)`
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+
 export default Personnel;
diff --git a/fe/src/components/Header/SearchBar/Price.tsx b/fe/src/components/Header/SearchBar/Price.tsx
@@ -1,22 +1,22 @@
 import {
-  Price as PriceContainer,
-  PriceWrapper,
+  CommonContainer,
+  CommonButton,
   Label,
-  Btn,
+  InputState,
   StyledCrossIcon,
 } from 'components/Header/SearchBar/searchBar.styled';
 
 function Price() {
   return (
-    <PriceContainer>
-      <PriceWrapper>
+    <CommonContainer>
+      <CommonButton aria-label="요금 입력 버튼">
         <Label>요금</Label>
-        <Btn aria-label="요금 입력 버튼">₩100,000~1,000,000</Btn>
-      </PriceWrapper>
+        <InputState>₩100,000~1,000,000</InputState>
+      </CommonButton>
       <button type="button" aria-label="요금 입력 취소 버튼">
         <StyledCrossIcon />
       </button>
-    </PriceContainer>
+    </CommonContainer>
   );
 }
 

diff --git a/fe/src/components/Header/SearchBar/SearchButton.tsx b/fe/src/components/Header/SearchBar/SearchButton.tsx
@@ -5,7 +5,7 @@ import {
 
 function SearchButton() {
   return (
-    <SearchButtonContainer>
+    <SearchButtonContainer aria-label="결과 찾기 버튼">
       <StyledSearchIcon />
       <span>검색</span>
     </SearchButtonContainer>

diff --git a/fe/src/components/Header/SearchBar/index.tsx b/fe/src/components/Header/SearchBar/index.tsx
@@ -1,25 +1,31 @@
 import { Divider } from '@mui/material';
-import { SearchBarWrap, SearchBarContainer } from 'components/Header/SearchBar/searchBar.styled';
+import {
+  SearchBarWrap,
+  SearchBarContainer,
+  CommonContainer,
+} from 'components/Header/SearchBar/searchBar.styled';
 
 import Period from 'components/Header/SearchBar/Period';
 import Personnel from 'components/Header/SearchBar/Personnel';
 import Price from 'components/Header/SearchBar/Price';
 import SearchButton from 'components/Header/SearchBar/SearchButton';
 
-import PeriodModal from './Modals/PeriodModal';
-import PriceModal from './Modals/PriceModal';
-import PersonnelModal from './Modals/PersonnelModal';
+import PeriodModal from 'components/Modals/PeriodModal';
+import PriceModal from 'components/Modals/PriceModal';
+import PersonnelModal from 'components/Modals/PersonnelModal';
 
 function SearchBar() {
   return (
     <SearchBarContainer>
       <SearchBarWrap>
         <Period />
-        <Divider orientation="vertical" />
+        <Divider orientation="vertical" sx={{ height: '60%' }} />
         <Price />
-        <Divider orientation="vertical" />
-        <Personnel />
-        <SearchButton />
+        <Divider orientation="vertical" sx={{ height: '60%' }} />
+        <CommonContainer>
+          <Personnel />
+          <SearchButton />
+        </CommonContainer>
       </SearchBarWrap>
       <PeriodModal />
       <PriceModal />