웹 접근성 개선과 토스트 문서 추가

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
 
 체크박스 컴포넌트입니다.
 
@@ -348,3 +348,16 @@ import {Link as RouterLink, NavLink} from 'react-router-dom'
 <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,6 +2,10 @@ import { forwardRef } from 'react';
 import type { CSSProperties, ComponentPropsWithRef } from 'react';
 import styled from 'styled-components';
 
+import useValidator from '../hooks/useSpaceValidator';
+import theme from '../styles/theme';
+import Text from '../Text/Text';
+
 export interface TextareaProps extends ComponentPropsWithRef<'textarea'> {
   /**
    * Textarea 컴포넌트 사이즈 재조정 방향 설정입니다.
@@ -10,14 +14,33 @@ export interface TextareaProps extends ComponentPropsWithRef<'textarea'> {
 }
 
 const Textarea = ({ resize = 'both', ref, ...props }: TextareaProps) => {
+  const { value, error, handleChange } = useValidator();
+
   return (
-    <TextareaContainer ref={ref} resize={resize} autoCapitalize="off" autoCorrect="off" spellCheck="false" {...props} />
+    <>
+      <TextareaContainer
+        value={value}
+        ref={ref}
+        resize={resize}
+        error={error}
+        autoCapitalize="off"
+        autoCorrect="off"
+        spellCheck="false"
+        onChange={handleChange}
+        {...props}
+      />
+      <Text size="xs" color={theme.colors.error} aria-live="assertive">
+        {error}
+      </Text>
+    </>
   );
 };
 
 export default forwardRef(Textarea);
 
-type TextareaStyleProps = Pick<TextareaProps, 'resize'>;
+type TextareaStyleProps = Pick<TextareaProps, 'resize'> & {
+  error: string;
+};
 
 const TextareaContainer = styled.textarea<TextareaStyleProps>`
   width: 100%;
@@ -27,7 +50,7 @@ const TextareaContainer = styled.textarea<TextareaStyleProps>`
   border-radius: 0;
   line-height: 1.5;
   resize: ${({ resize }) => resize};
-  outline-color: ${({ theme }) => theme.colors.primary};
+  outline-color: ${({ error, theme }) => (error ? 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>
   );
 };

src/hooks/useSpaceValidator.ts

@@ -0,0 +1,24 @@
+import type { ChangeEventHandler } from 'react';
+import { useState } from 'react';
+
+const useSpaceValidator = (initialValue = '') => {
+  const [value, setValue] = useState(initialValue);
+  const [error, setError] = useState('');
+
+  const handleChange: ChangeEventHandler<HTMLTextAreaElement> = (e) => {
+    const newValue = e.target.value;
+    setValue(newValue);
+
+    const isWhitespaceOnly = !newValue.trim() && newValue.length > 2;
+    const isConsecutiveSpaces = /\s{10,}/.test(newValue);
+    const isConsecutiveNewlines = /\n{4,}/.test(newValue);
+
+    isWhitespaceOnly || isConsecutiveSpaces || isConsecutiveNewlines
+      ? setError('의미 있는 리뷰를 작성해보는 건 어떨까요? 🫨')
+      : setError('');
+  };
+
+  return { value, error, handleChange };
+};
+
+export default useSpaceValidator;

src/index.ts

@@ -2,6 +2,7 @@ export { default as FunEatProvider } from './FunEatProvider';
 
 export { default as theme } from './styles/theme';
 export { default as useTheme } from './hooks/useTheme';
+export { default as useSpaceValidator } from './hooks/useSpaceValidator';
 
 export { default as Badge } from './Badge';
 export { default as BottomSheet } from './BottomSheet';