woowacourse · kamwoo · Oct 11, 2022 · Oct 5, 2022 · Oct 5, 2022 · Oct 6, 2022
diff --git a/package.json b/package.json
@@ -0,0 +1,35 @@
+{
+  "name": "a11y-airline",
+  "version": "1.0.0",
+  "main": "index.js",
+  "repository": "https://github.com/KangYunHo1221/a11y-airline",
+  "author": "Yunho <ansghkdbsgh@gmail.com>",
+  "license": "MIT",
+  "scripts": {
+    "start": "webpack serve --open",
+    "build": "webpack --mode=production",
+    "deploy": "gh-pages -d dist"
+  },
+  "devDependencies": {
+    "@types/node": "^18.8.2",
+    "@types/react": "^18.0.21",
+    "@types/react-dom": "^18.0.6",
+    "css-loader": "^6.7.1",
+    "html-webpack-plugin": "^5.5.0",
+    "mini-css-extract-plugin": "^2.6.1",
+    "ts-loader": "^9.4.1",
+    "typescript": "^4.8.4",
+    "webpack": "^5.74.0",
+    "webpack-cli": "^4.10.0",
+    "webpack-dev-server": "^4.11.1",
+    "gh-pages": "^4.0.0"
+  },
+  "dependencies": {
+    "@types/styled-components": "^5.1.26",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.4.1",
+    "styled-components": "^5.3.6"
+  },
+  "homepage": "."
+}
diff --git a/public/index.html b/public/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="ko">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
+    <meta name="keyword" content="미션, 항공사, 웹사이트, 접근성" />
+    <meta name="description" content="미션: 항공사 웹사이트 컴포넌트의 접근성 높이기" />
+    <meta property="og:type" content="website" />
+    <meta property="og:url" content="https://capable-pixie-ad7eb2.netlify.app/" />
+    <meta property="og:title" content="a11y-airline" />
+    <meta property="og:description" content="미션: 항공사 웹사이트 컴포넌트의 접근성 높이기" />
+    <title>웹 접근성 미션</title>
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>
diff --git a/src/App.tsx b/src/App.tsx
@@ -0,0 +1,14 @@
+import { BrowserRouter, Route, Routes } from 'react-router-dom';
+import FirstPage from './pages/FirstPage';
+
+const App = () => {
+  return (
+    <BrowserRouter>
+      <Routes>
+        <Route path='/' element={<FirstPage />} />
+      </Routes>
+    </BrowserRouter>
+  );
+};
+
+export default App;
diff --git a/src/Pages/FirstPage.tsx b/src/Pages/FirstPage.tsx
@@ -0,0 +1,117 @@
+import { useState } from 'react';
+import styled from 'styled-components';
+import Tooltip from '../components/Tooltip';
+
+const FirstPage = () => {
+  const [count, setCount] = useState<number>(1);
+
+  const countUp = () => {
+    setCount((prev) => {
+      if (prev + 1 <= 3) {
+        return prev + 1;
+      }
+      return prev;
+    });
+  };
+
+  const countDown = () => {
+    setCount((prev) => {
+      if (prev - 1 >= 1) {
+        return prev - 1;
+      }
+      return prev;
+    });
+  };
+
+  const handleCountChange = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    const input = Number(e.key);
+
+    if (input >= 1 && input <= 3) {
+      setCount(input);
+    }
+  };
+
+  const makeText = () => {
+    const text = `성인 승객이 ${count}으로 변경됐습니다`;
+    return text;
+  };
+  return (
+    <S.PageWrapper>
+      <h1>승객 선택</h1>
+      <S.SubtitleWrapper>
+        <h2>성인</h2>
+        <Tooltip />
+      </S.SubtitleWrapper>
+      <S.ControlWrapper>
+        <S.Button aria-label='성인 탑승자 한명 줄이기' onClick={countDown}>
+          -
+        </S.Button>
+        <S.Count
+          type='number'
+          min={1}
+          max={3}
+          onKeyDown={(e) => {
+            handleCountChange(e);
+          }}
+          value={count}
+        />
+        <S.Button aria-label='성인 탑승자 한명 늘리기' onClick={countUp}>
+          +
+        </S.Button>
+        <S.HiddenText>{makeText()}</S.HiddenText>
+      </S.ControlWrapper>
+    </S.PageWrapper>
+  );
+};
+
+const S = {
+  PageWrapper: styled.div`
+    height: 300px;
+    width: 250px;
+    border: 2px solid gray;
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+    align-items: center;
+  `,
+  SubtitleWrapper: styled.div`
+    position: relative;
+    display: flex;
+    align-items: center;
+    gap: 4px;
+  `,
+  Button: styled.button`
+    width: 30px;
+    height: 30px;
+    border: 1px solid #b8b8b8;
+    border-radius: 50%;
+    font-size: 22px;
+    background-color: transparent;
+    cursor: pointer;
+  `,
+  Count: styled.input`
+    width: 32px;
+    text-align: center;
+    font-size: 24px;
+    border: none;
+    border-bottom: 2px solid #6d6d6d;
+    outline: none;
+
+    ::-webkit-outer-spin-button,
+    ::-webkit-inner-spin-button {
+      -webkit-appearance: none;
+      margin: 0;
+    }
+  `,
+  ControlWrapper: styled.div`
+    display: flex;
+    align-items: center;
+    gap: 10px;
+  `,
+  HiddenText: styled.div.attrs({ role: 'status', 'aria-live': 'assertive', 'aria-relevant': 'additions' })`
+    position: absolute;
+    text-indent: -9999px;
+  `,
+};
+
+export default FirstPage;
diff --git a/src/components/Tooltip.tsx b/src/components/Tooltip.tsx
@@ -0,0 +1,42 @@
+import styled from 'styled-components';
+
+const Tooltip = () => {
+  return (
+    <>
+      <S.Question aria-label='tooltip'>?</S.Question>
+      <S.StyledTooltip aria-live='assertive' id='tooltip' role='tooltip'>
+        국민은행 61210204071715로 후원해 결식아동을 도와보세요!
+      </S.StyledTooltip>
+    </>
+  );
+};
+
+const S = {
+  Question: styled.button`
+    width: 20px;
+    height: 20px;
+    border: 1px solid #cbcbcb;
+    color: #cbcbcb;
+    border-radius: 50%;
+    text-align: center;
+    cursor: help;
+    background-color: white;
+
+    &:hover + [role='tooltip'],
+    &:focus + [role='tooltip'] {
+      display: block !important;
+      background-color: red;
+    }
+  `,
+  StyledTooltip: styled.div`
+    display: ${(props) => (props.role === 'tooltip' ? 'none' : 'block')};
+
+    position: absolute;
+    top: -3rem;
+    left: 4rem;
+    padding: 4px;
+    color: white;
+  `,
+};
+
+export default Tooltip;
diff --git a/src/index.tsx b/src/index.tsx
@@ -0,0 +1,7 @@
+import { createRoot } from 'react-dom/client';
+import App from './App';
+
+const container = document.getElementById('root')!;
+const root = createRoot(container);
+
+root.render(<App />);
diff --git a/tsconfig.json b/tsconfig.json
@@ -0,0 +1,16 @@
+{
+  "compileOnSave": true,
+  "compilerOptions": {
+    "target": "es6",
+    "module": "esnext",
+    "strict": true,
+    "allowJs": true,
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "jsx": "react-jsx",
+    "skipLibCheck": true,
+    "incremental": true,
+    "moduleResolution": "node"
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules"]
+}
diff --git a/webpack.config.js b/webpack.config.js
@@ -0,0 +1,35 @@
+const path = require('path');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+
+module.exports = {
+  entry: './src/index.tsx',
+  devServer: {
+    compress: true,
+    port: 3000,
+  },
+  module: {
+    rules: [
+      {
+        test: /\.tsx?$/,
+        use: [{ loader: 'ts-loader' }],
+        exclude: /node_modules/,
+      },
+      {
+        test: /\.module.css$/,
+        use: [MiniCssExtractPlugin.loader, 'css-loader'],
+      },
+    ],
+  },
+  resolve: {
+    extensions: ['.tsx', '.ts', '.js'],
+  },
+  output: {
+    filename: 'bundle[hash].js',
+    clean: true,
+    path: path.resolve(__dirname, 'dist'),
+  },
+  mode: 'production',
+  plugins: [new HtmlWebpackPlugin({ template: './public/index.html' }), new MiniCssExtractPlugin()],
+  performance: { hints: false },
+};