From fe3803bec0722b9e500a91977168153cb5ed7a48 Mon Sep 17 00:00:00 2001
From: Gilpop8663 <wolfye@naver.com>
Date: Thu, 17 Aug 2023 17:33:09 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20(#456)=20=ED=83=80=EC=9E=84=20=ED=94=BD?=
 =?UTF-8?q?=EC=BB=A4=20=EC=9B=B9=20=EC=A0=91=EA=B7=BC=EC=84=B1=20=ED=96=A5?=
 =?UTF-8?q?=EC=83=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../TimePickerOption/constants.ts                    |  6 ++++++
 .../TimePickerOptionList/TimePickerOption/index.tsx  | 12 ++++++++++--
 .../components/common/TimePickerOptionList/index.tsx |  2 +-
 3 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/common/TimePickerOptionList/TimePickerOption/constants.ts b/frontend/src/components/common/TimePickerOptionList/TimePickerOption/constants.ts
index fa5054535..db46ae862 100644
--- a/frontend/src/components/common/TimePickerOptionList/TimePickerOption/constants.ts
+++ b/frontend/src/components/common/TimePickerOptionList/TimePickerOption/constants.ts
@@ -5,3 +5,9 @@ export const TIME_UNIT: { [key: string]: number } = {
   hour: 24,
   minute: 60,
 };
+
+export const TIME_KOREAN: { [key: string]: string } = {
+  day: '일',
+  hour: '시간',
+  minute: '분',
+};
diff --git a/frontend/src/components/common/TimePickerOptionList/TimePickerOption/index.tsx b/frontend/src/components/common/TimePickerOptionList/TimePickerOption/index.tsx
index bef95f761..7ba762860 100644
--- a/frontend/src/components/common/TimePickerOptionList/TimePickerOption/index.tsx
+++ b/frontend/src/components/common/TimePickerOptionList/TimePickerOption/index.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useRef } from 'react';
 
-import { TIME_UNIT, TIMEBOX_CHILD_HEIGHT } from './constants';
+import { TIME_KOREAN, TIME_UNIT, TIMEBOX_CHILD_HEIGHT } from './constants';
 import * as S from './style';
 
 interface TimePickerOptionProps {
@@ -65,11 +65,19 @@ export default function TimePickerOption({
   return (
     <S.Container>
       <S.PickedTimeOverlay />
-      <S.TimeBox onScroll={handleScroll} ref={timeBoxRef} onWheel={handleWheel}>
+      <S.TimeBox
+        aria-label={`현재 선택된 ${TIME_KOREAN[option]}은 ${currentTime} 입니다. 위, 아래 방향키 혹은 터치로 시간 조절이 가능합니다.`}
+        tabIndex={0}
+        onScroll={handleScroll}
+        ref={timeBoxRef}
+        onWheel={handleWheel}
+      >
         <S.Empty />
         {Array.from({ length: timeUnit }).map((_, index) => (
           <S.Time
             key={index}
+            aria-live="polite"
+            aria-label={`현재 선택된 ${TIME_KOREAN[option]}은 ${currentTime} 입니다.`}
             ref={index === currentTime ? timeBoxChildRef : null}
             $isPicked={currentTime === index}
           >
diff --git a/frontend/src/components/common/TimePickerOptionList/index.tsx b/frontend/src/components/common/TimePickerOptionList/index.tsx
index 74575e6fa..7969dedf2 100644
--- a/frontend/src/components/common/TimePickerOptionList/index.tsx
+++ b/frontend/src/components/common/TimePickerOptionList/index.tsx
@@ -36,7 +36,7 @@ export default function TimePickerOptionList({ time, setTime }: TimePickerOption
           ></TimePickerOption>
         ))}
       </S.Container>
-      <S.PickedTimeText>
+      <S.PickedTimeText tabIndex={0}>
         <p>{day}일</p>
         <p>{hour}시</p>
         <p>{minute}분</p> 후 마감