웹 접근성 개선과 토스트 문서 추가 (#86)

* docs: 토스트 문서 작성

* refactor: toast assertive 속성 추가

* refactor: esc 키 누르면 dialog 꺼지도록 구현

* docs: 리드미 오타 수정

* refactor: 유효성 검사 추가

* chore: import 파일 이름 변경

* refactor: hook 외부로 분리

* refactor: props 이름 수정과 리드미 추가

README.md

@@ -77,9 +77,9 @@ const Parent = () => {
 
   return (
     <>
-      <Button type="button" onClick={handleOpenBottomSheet}>
+      <button type="button" onClick={handleOpenBottomSheet}>
         바텀시트 열기
-      </Button>
+      </button>
       <BottomSheet ref={ref} isClosing={isClosing} close={handleCloseBottomSheet}>
         <div>바텀시트 컴포넌트</div>
       </BottomSheet>
@@ -133,7 +133,7 @@ const carouselList = [0, 1, 2].map((index) => ({
 
 <br />
 
-## **Checkbox**
+## Checkbox
 
 체크박스 컴포넌트입니다.
 
@@ -338,13 +338,27 @@ import {Link as RouterLink, NavLink} from 'react-router-dom'
 
 ### Props
 
-| props   | value                                                  | description                                      |
-| ------- | ------------------------------------------------------ | ------------------------------------------------ |
-| resize? | both, horizontal, vertical, none<br /> (default: both) | Textarea 컴포넌트의 크기 재조정 방향 설정입니다. |
+| props         | value                                                  | description                                      |
+| ------------- | ------------------------------------------------------ | ------------------------------------------------ |
+| resize?       | both, horizontal, vertical, none<br /> (default: both) | Textarea 컴포넌트의 크기 재조정 방향 설정입니다. |
+| errorMessage? | string                                                 | Textarea 컴포넌트의 에러 메시지입니다.           |
 
 ### Example
 
 ```jsx
 <Textarea />
 <Textarea resize="vertical" rows={10} placeholder="값을 입력해주세요."/>
 ```
+
+## Toast
+
+알람을 띄우는 토스트 컴포넌트입니다.
+
+### Example
+
+```jsx
+const { toast } = useToastActionContext();
+
+toast.success('성공');
+toast.error('실패');
+```

src/BottomSheet/useBottomSheet.ts

@@ -1,4 +1,5 @@
-import { useCallback, useRef, useState } from 'react';
+import type { KeyboardEventHandler } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 
 export const useBottomSheet = () => {
   const [isOpen, setIsOpen] = useState(false);
@@ -24,5 +25,18 @@ export const useBottomSheet = () => {
     closeAnimated();
   };
 
+  const handleKeydown = (e: KeyboardEvent) => {
+    if (e.keyCode === 27) {
+      e.preventDefault();
+      handleCloseBottomSheet();
+    }
+  };
+
+  useEffect(() => {
+    document.addEventListener('keydown', handleKeydown);
+
+    return () => document.removeEventListener('keydown', handleKeydown);
+  }, [handleKeydown]);
+
   return { ref, isOpen, isClosing, handleOpenBottomSheet, handleCloseBottomSheet };
 };

src/Textarea/Textarea.tsx

@@ -2,22 +2,44 @@ import { forwardRef } from 'react';
 import type { CSSProperties, ComponentPropsWithRef } from 'react';
 import styled from 'styled-components';
 
+import theme from '../styles/theme';
+import Text from '../Text/Text';
+
 export interface TextareaProps extends ComponentPropsWithRef<'textarea'> {
   /**
    * Textarea 컴포넌트 사이즈 재조정 방향 설정입니다.
    */
   resize?: CSSProperties['resize'];
+  /**
+   * Textarea 컴포넌트의 에러 메시지입니다.
+   */
+  errorMessage?: string;
 }
 
-const Textarea = ({ resize = 'both', ref, ...props }: TextareaProps) => {
+const Textarea = ({ resize = 'both', errorMessage, ref, ...props }: TextareaProps) => {
   return (
-    <TextareaContainer ref={ref} resize={resize} autoCapitalize="off" autoCorrect="off" spellCheck="false" {...props} />
+    <>
+      <TextareaContainer
+        ref={ref}
+        resize={resize}
+        errorMessage={errorMessage}
+        autoCapitalize="off"
+        autoCorrect="off"
+        spellCheck="false"
+        {...props}
+      />
+      <Text size="xs" color={theme.colors.error} aria-live="assertive">
+        {errorMessage}
+      </Text>
+    </>
   );
 };
 
 export default forwardRef(Textarea);
 
-type TextareaStyleProps = Pick<TextareaProps, 'resize'>;
+type TextareaStyleProps = Pick<TextareaProps, 'resize'> & {
+  errorMessage?: string;
+};
 
 const TextareaContainer = styled.textarea<TextareaStyleProps>`
   width: 100%;
@@ -27,7 +49,7 @@ const TextareaContainer = styled.textarea<TextareaStyleProps>`
   border-radius: 0;
   line-height: 1.5;
   resize: ${({ resize }) => resize};
-  outline-color: ${({ theme }) => theme.colors.primary};
+  outline-color: ${({ errorMessage, theme }) => (errorMessage ? theme.colors.error : theme.colors.primary)};
 
   &::placeholder {
     color: ${({ theme }) => theme.textColors.disabled};

src/Toast/Toast.tsx

@@ -16,7 +16,9 @@ const Toast = ({ id, message, isError = false }: ToastProps) => {
 
   return (
     <ToastWrapper isError={isError} isAnimating={isShown}>
-      <Message color={theme.colors.white}>{message}</Message>
+      <Message color={theme.colors.white} aria-live="assertive">
+        {message}
+      </Message>
     </ToastWrapper>
   );
 };