Merge pull request #121 from 00kang/main

[항공사 웹사이트의 컴포넌트 접근성 높이기] 초코(강다빈) 미션 제출합니다
woowacourse · Oct 4, 2024 · 4458eab · 4458eab
2 parents c51d0dd + ca649f0
commit 4458eab
Show file tree

Hide file tree

Showing 53 changed files with 3,429 additions and 29,005 deletions.
diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md
@@ -0,0 +1,37 @@
+## 🔥 결과
+
+<!-- 개선 작업 후 모바일 낭독기를 사용해서 미션 페이지를 읽어보세요 -->
+
+- 배포한 페이지 접근 경로(GitHub Pages):
+- 스크린 리더 화면 녹화 영상 (before / after)
+
+## ✅ 개선 작업 목록
+
+<!-- 각 요구 사항을 위해 어떤 부분을 고민/학습해보았고, 결과적으로 어떤 개선 작업을 진행했는지 적어주세요-->
+
+**1 컴포넌트 접근성 개선 - 이미지 캐로셀**
+
+- [ ] 스크린 리더가 캐로셀의 전체 아이템 수를 읽을 수 있어야 합니다.
+- [ ] 스크린 리더가 이미지 캐로셀 내 각 아이템 정보를 읽을 수 있어야 합니다.
+  - [ ] 여행지, 좌석 유형, 가격 정보를 한번에 읽을 수 있어야 합니다.
+  - [ ] 이전/다음 아이템으로 이동하고 현재 보이는 아이템의 정보를 읽을 수 있어야 합니다.
+- [ ] 각 아이템을 선택하면 각각에 맞는 링크로 이동할 수 있어야 합니다.
+
+**2 페이지 접근성 개선**
+
+- [ ] 페이지를 하나의 문서로 읽을 수 있어야 합니다.
+  - [ ] 페이지에 적절한 제목(title)을 제공하세요. 제목은 페이지의 주요 내용을 간결하게 설명해야 합니다.
+  - [ ] 페이지의 주요 영역을 시맨틱 태그를 사용해 명확히 구분해 주세요
+  - [ ] 헤딩을 논리적인 순서로 사용해 페이지 구조를 명확히 해주세요
+- [ ] 키보드 사용자를 위해 페이지 최상단에 '본문으로 바로가기' 링크를 제공해 반복되는 메뉴를 건너뛸 수 있게 해주세요
+
+## 🧐 우리 팀의 접근성 체크리스트
+
+<!--
+우리 서비스에서 이런 부분의 접근성은 챙겨봐야겠다! 하는 체크리스트 v1을 만들고, 리뷰어와 의견을 나눠보세요
+- 우리 팀 서비스에서 가장 중요하고 자주 사용되는 기능 플로우 1개를 선택하고 간단히 나열해 주세요 (예: 로그인 → 상품 검색 → 상품 선택 → 장바구니 추가 → 결제)
+- 해당 플로우의 각 단계에 대해 다음 질문을 생각해 보세요.
+  - 1. 화면을 볼 수 없는 사용자가 이 단계를 완료할 수 있는가?
+  - 2. 이 단계에서 제공하는 정보나 지시 사항이 모든 사용자에게 명확한가?
+- 질문에 대해 팀원들과 의견을 나눠본 것을 바탕으로, 우리 팀만의 접근성 체크리스트 v1을 만들고 리뷰어와 의견을 나눠보세요. (예: "모든 이미지에 적절한 대체 텍스트가 제공되는가?")
+-->
diff --git a/.gitignore b/.gitignore
@@ -1,23 +1,24 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-/.pnp
-.pnp.js
-
-# testing
-/coverage
-
-# production
-/build
-
-# misc
-.DS_Store
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-
+# Logs
+logs
+*.log
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,7 @@
+{
+  "trailingComma": "none",
+  "tabWidth": 2,
+  "singleQuote": true,
+  "bracketSpacing": true,
+  "printWidth": 100
+}
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,3 +1,10 @@
 {
-    "nuxt.isNuxtApp": false
-}
+  "editor.formatOnSave": true,
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "[typescript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[typescriptreact]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  }
+}
diff --git a/LICENSE b/LICENSE
diff --git a/README.md b/README.md
@@ -1,6 +1,3 @@
-<p align="middle" >
-  <img width="100px;" src="./src/images/airplane.png"/>
-</p>
-<h2 align="middle">누구나 접근할 수 있는 항공사 웹사이트</h2>
-<p align="middle">항공사 웹사이트 컴포넌트의 스크린 리더 접근성 높이기</p>
-<br/>
+# ✈️ 누구나 접근할 수 있는 항공사 웹사이트
+
+항공사 웹사이트 컴포넌트의 스크린 리더 접근성 높이기
diff --git a/eslint.config.js b/eslint.config.js
@@ -0,0 +1,28 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+
+export default tseslint.config(
+  { ignores: ['dist'] },
+  {
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    files: ['**/*.{ts,tsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+    plugins: {
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+    },
+  },
+)
diff --git a/index.html b/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="ko">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>A11Y AIRLINE - 안전하고 쾌적한 여행</title>
+  </head>
+
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>