Merge pull request #25 from street62/Refactor/접근성개선

접근성 개선 + MUI 버전 업데이트 + 배경 이미지 너비 수정
codesquad-members-2022 · May 25, 2022 · e5cd795 · e5cd795
2 parents ab41138 + df23d69
commit e5cd795
Show file tree

Hide file tree

Showing 17 changed files with 17,891 additions and 467 deletions.
diff --git a/fe/package-lock.json b/fe/package-lock.json
diff --git a/fe/package.json b/fe/package.json
@@ -1,64 +1,65 @@
 {
-	"name": "fe",
-	"version": "0.1.0",
-	"private": true,
-	"dependencies": {
-		"@material-ui/core": "^4.12.4",
-		"@testing-library/jest-dom": "^5.16.4",
-		"@testing-library/react": "^13.2.0",
-		"@testing-library/user-event": "^13.5.0",
-		"@types/jest": "^27.5.1",
-		"@types/node": "^16.11.36",
-		"@types/react": "^18.0.9",
-		"@types/react-dom": "^18.0.4",
-		"@types/react-router-dom": "^5.3.3",
-		"react": "^18.1.0",
-		"react-dom": "^18.1.0",
-		"react-router-dom": "^6.3.0",
-		"react-scripts": "5.0.1",
-		"styled-components": "^5.3.5",
-		"styled-reset": "^4.4.1",
-		"typescript": "^4.6.4",
-		"web-vitals": "^2.1.4"
-	},
-	"scripts": {
-		"start": "react-scripts start",
-		"build": "react-scripts build",
-		"test": "react-scripts test",
-		"eject": "react-scripts eject",
-		"lint": "eslint ./src/**/*.{ts,tsx,js,jsx}",
-		"lint:fix": "eslint --fix ./src/**/*.{ts,tsx,js,jsx}"
-	},
-	"eslintConfig": {
-		"extends": [
-			"react-app",
-			"react-app/jest"
-		]
-	},
-	"browserslist": {
-		"production": [
-			">0.2%",
-			"not dead",
-			"not op_mini all"
-		],
-		"development": [
-			"last 1 chrome version",
-			"last 1 firefox version",
-			"last 1 safari version"
-		]
-	},
-	"devDependencies": {
-		"@types/styled-components": "^5.1.25",
-		"@typescript-eslint/eslint-plugin": "^5.25.0",
-		"@typescript-eslint/parser": "^5.25.0",
-		"eslint": "^8.16.0",
-		"eslint-config-airbnb": "^19.0.4",
-		"eslint-config-prettier": "^8.5.0",
-		"eslint-plugin-import": "^2.26.0",
-		"eslint-plugin-jsx-a11y": "^6.5.1",
-		"eslint-plugin-prettier": "^4.0.0",
-		"eslint-plugin-react": "^7.30.0",
-		"eslint-plugin-react-hooks": "^4.5.0",
-		"prettier": "^2.6.2"
-	}
+  "name": "fe",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@testing-library/jest-dom": "^5.16.4",
+    "@testing-library/react": "^13.2.0",
+    "@testing-library/user-event": "^13.5.0",
+    "@types/jest": "^27.5.1",
+    "@types/node": "^16.11.36",
+    "@types/react": "^18.0.9",
+    "@types/react-dom": "^18.0.4",
+    "@types/react-router-dom": "^5.3.3",
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0",
+    "react-router-dom": "^6.3.0",
+    "react-scripts": "5.0.1",
+    "typescript": "^4.6.4",
+    "web-vitals": "^2.1.4"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject",
+    "lint": "eslint ./src/**/*.{ts,tsx,js,jsx}",
+    "lint:fix": "eslint --fix ./src/**/*.{ts,tsx,js,jsx}"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "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",
+    "eslint-config-airbnb": "^19.0.4",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-jsx-a11y": "^6.5.1",
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-react": "^7.30.0",
+    "eslint-plugin-react-hooks": "^4.5.0",
+    "prettier": "^2.6.2"
+  }
 }
diff --git a/fe/public/index.html b/fe/public/index.html
@@ -1,21 +1,19 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="ko ">
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Web site created using create-react-app"
+    <meta name="description" content="Web site created using create-react-app" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700;900&display=swap"
+      rel="stylesheet"
     />
-    <link rel="preconnect" href="https://fonts.googleapis.com"> 
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700;900&display=swap" rel="stylesheet">
-    <title>React App</title>
+    <title>LOGOBNB</title>
   </head>
   <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
-
   </body>
 </html>
diff --git a/fe/src/App.tsx b/fe/src/App.tsx
@@ -1,5 +1,5 @@
 import { ThemeProvider as StyledThemeProvider } from 'styled-components';
-import { CssBaseline, ThemeProvider } from '@material-ui/core';
+import { CssBaseline, ThemeProvider } from '@mui/material';
 import { theme as globalTheme } from 'styles/GlobalStyles';
 import { theme as StyledTheme } from 'styles/theme';
 

diff --git a/fe/src/components/Header/Menu.tsx b/fe/src/components/Header/Menu.tsx
@@ -1,28 +1,37 @@
 import styled from 'styled-components';
-import { ButtonGroup, Button } from '@material-ui/core';
+import { Breadcrumbs, Link } from '@mui/material';
 
 function Menu() {
   return (
-    <CustomButtonGroup>
-      <CustomButton>숙소</CustomButton>
-      <CustomButton>체험</CustomButton>
-      <CustomButton>온라인 체험</CustomButton>
-    </CustomButtonGroup>
+    <CustomBreadcrumbs separator="" aria-label="네비게이션 메뉴">
+      <CustomLink href="/">숙소</CustomLink>
+      <CustomLink href="/">체험</CustomLink>
+      <CustomLink href="/">온라인 체험</CustomLink>
+    </CustomBreadcrumbs>
   );
 }
 
-const CustomButtonGroup = styled(ButtonGroup)`
-  margin: 0 auto;
-  margin-bottom: 32px;
-  border: none;
+const CustomBreadcrumbs = styled(Breadcrumbs)`
+  && {
+    margin: 0 auto;
+    margin-bottom: 32px;
+    border: none;
+  }
 `;
 
-const CustomButton = styled(Button)`
-  border: none;
+const CustomLink = styled(Link)`
+  && {
+    border: none;
+    padding: 0 6px;
+    color: ${({ theme }) => theme.colors.black};
+    ${({ theme }) => theme.fontStyles.normal14px};
+    text-decoration: none;
 
-  &:hover {
-    background: none;
-    ${({ theme }) => theme.fontStyles.bold16px};
+    &:hover {
+      background: none;
+      ${({ theme }) => theme.fontStyles.bold16px};
+      text-decoration: none;
+    }
   }
 `;
 

diff --git a/fe/src/components/Header/MiniSearchBar/index.tsx b/fe/src/components/Header/MiniSearchBar/index.tsx
@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import { Divider } from '@material-ui/core';
+import { Divider } from '@mui/material';
 import { SearchButton, StyledSearchIcon, Btn } from 'components/Header/SearchBar/searchBar.styled';
 
 function MiniSearchBar({ changeSearchBar }: any) {

diff --git a/fe/src/components/Header/SearchBar/Modals/PersonnelModal.tsx b/fe/src/components/Header/SearchBar/Modals/PersonnelModal.tsx
@@ -1,4 +1,4 @@
-import { Divider } from '@material-ui/core';
+import { Divider } from '@mui/material';
 import styled from 'styled-components';
 import PersonnelModalWrap from './PersonnelModalWrap';
 

diff --git a/fe/src/components/Header/SearchBar/Period.tsx b/fe/src/components/Header/SearchBar/Period.tsx
@@ -12,13 +12,15 @@ function Period() {
     <PeriodContainer>
       <CommonWrapper>
         <CheckIn>체크인</CheckIn>
-        <Btn>날짜 입력</Btn>
+        <Btn aria-label="체크인 날짜 입력 버튼">날짜 입력</Btn>
       </CommonWrapper>
       <CommonWrapper>
         <CheckOut>체크아웃</CheckOut>
-        <Btn>날짜 입력</Btn>
+        <Btn aria-label="체크아웃 날짜 입력 버튼">날짜 입력</Btn>
       </CommonWrapper>
-      <StyledCrossIcon />
+      <button type="button" aria-label="날짜 입력 취소 버튼">
+        <StyledCrossIcon />
+      </button>
     </PeriodContainer>
   );
 }

diff --git a/fe/src/components/Header/SearchBar/Personnel.tsx b/fe/src/components/Header/SearchBar/Personnel.tsx
@@ -11,9 +11,11 @@ function Personnel() {
     <PersonnelContainer>
       <CommonWrapper>
         <Label>인원</Label>
-        <Btn>게스트 추가</Btn>
+        <Btn aria-label="게스트 추가 버튼">게스트 추가</Btn>
       </CommonWrapper>
-      <StyledCrossIcon />
+      <button type="button" aria-label="게스트 추가 취소 버튼">
+        <StyledCrossIcon />
+      </button>
     </PersonnelContainer>
   );
 }

diff --git a/fe/src/components/Header/SearchBar/Price.tsx b/fe/src/components/Header/SearchBar/Price.tsx
@@ -11,9 +11,11 @@ function Price() {
     <PriceContainer>
       <PriceWrapper>
         <Label>요금</Label>
-        <Btn>₩100,000~1,000,000</Btn>
+        <Btn aria-label="요금 입력 버튼">₩100,000~1,000,000</Btn>
       </PriceWrapper>
-      <StyledCrossIcon />
+      <button type="button" aria-label="요금 입력 취소 버튼">
+        <StyledCrossIcon />
+      </button>
     </PriceContainer>
   );
 }

diff --git a/fe/src/components/Header/SearchBar/index.tsx b/fe/src/components/Header/SearchBar/index.tsx
@@ -1,9 +1,11 @@
-import { Divider } from '@material-ui/core';
+import { Divider } from '@mui/material';
 import { SearchBarWrap, SearchBarContainer } 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';

diff --git a/fe/src/components/Header/SearchBar/searchBar.styled.js b/fe/src/components/Header/SearchBar/searchBar.styled.js
@@ -66,7 +66,7 @@ export const CheckIn = styled(Label)`
 
 export const CheckOut = styled(CheckIn)``;
 
-export const SearchButton = styled.div`
+export const SearchButton = styled.button`
   display: flex;
   align-items: center;
   justify-content: center;

diff --git a/fe/src/components/Header/index.tsx b/fe/src/components/Header/index.tsx
@@ -2,8 +2,9 @@ import { useState } from 'react';
 import { useLocation } from 'react-router-dom';
 
 import styled from 'styled-components';
-import { Avatar } from '@material-ui/core';
+import { Avatar, Link } from '@mui/material';
 import { ReactComponent as HamburgerIcon } from 'images/FE_숙소예약서비스/Property 1=menu.svg';
+import { ReactComponent as LogoImg } from 'images/logo.svg';
 
 import Menu from 'components/Header/Menu';
 import SearchBar from 'components/Header/SearchBar/index';
@@ -22,7 +23,9 @@ function Header() {
   };
   return (
     <HeaderWrap position={location.pathname}>
-      <Logo>LOGO</Logo>
+      <Link href="/" style={{ height: '26px' }}>
+        <LogoImg aria-label="로고이미지" />
+      </Link>
       {location.pathname === '/' ? (
         <SearchWrap>
           <Menu />
@@ -36,30 +39,31 @@ function Header() {
         />
       )}
       <UserWrapper>
-        <Hamburger>햄버거</Hamburger>
-        <CustomAvatar src="images/FE_숙소예약서비스/Property 1=user.svg" />
+        <CustomButton type="button" aria-label="유저 정보 메뉴">
+          <Hamburger>햄버거</Hamburger>
+        </CustomButton>
+        <button type="button" aria-label="유저 아바타">
+          <CustomAvatar src="images/FE_숙소예약서비스/Property 1=user.svg" />
+        </button>
       </UserWrapper>
     </HeaderWrap>
   );
 }
 
-const HeaderWrap = styled.div<Position>`
+const HeaderWrap = styled.header<Position>`
   display: flex;
   justify-content: space-between;
-  padding: 24px;
-  margin-bottom: 20px;
   position: ${(props) => {
     return props.position === '/' ? 'fixed' : 'sticky';
   }};
   top: 0;
+  left: 50%;
+  transform: translate(-50%, 0);
+  margin-bottom: 20px;
+  padding: 24px;
   width: 1440px;
 `;
 
-const Logo = styled.span`
-  ${({ theme }) => theme.fontStyles.logo};
-  color: ${({ theme }) => theme.colors.grey1};
-`;
-
 const UserWrapper = styled.div`
   display: flex;
   justify-content: center;
@@ -71,19 +75,24 @@ const UserWrapper = styled.div`
   background: ${({ theme }) => theme.colors.white};
 `;
 
+const CustomButton = styled.button`
+  padding: 16px 8px;
+`;
+
 const Hamburger = styled(HamburgerIcon)`
   width: 16px;
   height: 16px;
-  margin: 0 8px 0 12px;
 
   path {
     stroke: ${({ theme }) => theme.colors.grey2};
   }
 `;
 
 const CustomAvatar = styled(Avatar)`
-  width: 32px;
-  height: 32px;
-  background: ${({ theme }) => theme.colors.grey3};
+  && {
+    width: 32px;
+    height: 32px;
+    background: ${({ theme }) => theme.colors.grey3};
+  }
 `;
 export default Header;
diff --git a/fe/src/images/logo.svg b/fe/src/images/logo.svg