From ae949ff1b8c297c4587f704317cfd5067cb718c5 Mon Sep 17 00:00:00 2001
From: hae-on <solbi2004@naver.com>
Date: Wed, 8 Nov 2023 23:00:01 +0900
Subject: [PATCH 1/8] =?UTF-8?q?docs:=20=ED=86=A0=EC=8A=A4=ED=8A=B8=20?=
 =?UTF-8?q?=EB=AC=B8=EC=84=9C=20=EC=9E=91=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/README.md b/README.md
index dd02692..9305f68 100644
--- a/README.md
+++ b/README.md
@@ -348,3 +348,14 @@ import {Link as RouterLink, NavLink} from 'react-router-dom'
 <Textarea />
 <Textarea resize="vertical" rows={10} placeholder="값을 입력해주세요."/>
 ```
+
+## Toast
+
+알람을 띄우는 토스트 컴포넌트입니다.
+
+### Example
+
+```jsx
+toast.success('성공');
+toast.error('실패');
+```

From f399b5ab6c2348a4b06e0d3f012978cdc2c8ef9f Mon Sep 17 00:00:00 2001
From: hae-on <solbi2004@naver.com>
Date: Wed, 8 Nov 2023 23:05:43 +0900
Subject: [PATCH 2/8] =?UTF-8?q?refactor:=20toast=20assertive=20=EC=86=8D?=
 =?UTF-8?q?=EC=84=B1=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/Toast/Toast.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/Toast/Toast.tsx b/src/Toast/Toast.tsx
index 96a6183..d1c42fa 100644
--- a/src/Toast/Toast.tsx
+++ b/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>
   );
 };

From 8c2d2643b2527f48d7268a3f556570b82f38be90 Mon Sep 17 00:00:00 2001
From: hae-on <solbi2004@naver.com>
Date: Wed, 8 Nov 2023 23:49:42 +0900
Subject: [PATCH 3/8] =?UTF-8?q?refactor:=20esc=20=ED=82=A4=20=EB=88=84?=
 =?UTF-8?q?=EB=A5=B4=EB=A9=B4=20dialog=20=EA=BA=BC=EC=A7=80=EB=8F=84?=
 =?UTF-8?q?=EB=A1=9D=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/BottomSheet/useBottomSheet.ts | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/src/BottomSheet/useBottomSheet.ts b/src/BottomSheet/useBottomSheet.ts
index c53f91f..de3f18a 100644
--- a/src/BottomSheet/useBottomSheet.ts
+++ b/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 };
 };

From 7a02be55b17acfc282c0096801011d3d7e6000ae Mon Sep 17 00:00:00 2001
From: hae-on <solbi2004@naver.com>
Date: Thu, 9 Nov 2023 20:46:24 +0900
Subject: [PATCH 4/8] =?UTF-8?q?docs:=20=EB=A6=AC=EB=93=9C=EB=AF=B8=20?=
 =?UTF-8?q?=EC=98=A4=ED=83=80=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index 9305f68..e53702d 100644
--- a/README.md
+++ b/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
 
 체크박스 컴포넌트입니다.
 
@@ -356,6 +356,8 @@ import {Link as RouterLink, NavLink} from 'react-router-dom'
 ### Example
 
 ```jsx
+const { toast } = useToastActionContext();
+
 toast.success('성공');
 toast.error('실패');
 ```

From 158ec7814ba595c7115929f20776d57aa3ab9190 Mon Sep 17 00:00:00 2001
From: hae-on <solbi2004@naver.com>
Date: Thu, 9 Nov 2023 20:47:12 +0900
Subject: [PATCH 5/8] =?UTF-8?q?refactor:=20=EC=9C=A0=ED=9A=A8=EC=84=B1=20?=
 =?UTF-8?q?=EA=B2=80=EC=82=AC=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/Textarea/Textarea.tsx      | 29 ++++++++++++++++++++++++++---
 src/hooks/useSpaceValidator.ts | 24 ++++++++++++++++++++++++
 src/index.ts                   |  1 +
 3 files changed, 51 insertions(+), 3 deletions(-)
 create mode 100644 src/hooks/useSpaceValidator.ts

diff --git a/src/Textarea/Textarea.tsx b/src/Textarea/Textarea.tsx
index aab9b2f..4285bc7 100644
--- a/src/Textarea/Textarea.tsx
+++ b/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/useValidator';
+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};
diff --git a/src/hooks/useSpaceValidator.ts b/src/hooks/useSpaceValidator.ts
new file mode 100644
index 0000000..a3c037d
--- /dev/null
+++ b/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;
diff --git a/src/index.ts b/src/index.ts
index f4956b4..f68a514 100644
--- a/src/index.ts
+++ b/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';

From 17c3954bfff7ee142bb91296449e971a92a48612 Mon Sep 17 00:00:00 2001
From: hae-on <solbi2004@naver.com>
Date: Thu, 9 Nov 2023 20:47:28 +0900
Subject: [PATCH 6/8] =?UTF-8?q?chore:=20import=20=ED=8C=8C=EC=9D=BC=20?=
 =?UTF-8?q?=EC=9D=B4=EB=A6=84=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/Textarea/Textarea.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Textarea/Textarea.tsx b/src/Textarea/Textarea.tsx
index 4285bc7..173dee2 100644
--- a/src/Textarea/Textarea.tsx
+++ b/src/Textarea/Textarea.tsx
@@ -2,7 +2,7 @@ import { forwardRef } from 'react';
 import type { CSSProperties, ComponentPropsWithRef } from 'react';
 import styled from 'styled-components';
 
-import useValidator from '../hooks/useValidator';
+import useValidator from '../hooks/useSpaceValidator';
 import theme from '../styles/theme';
 import Text from '../Text/Text';
 

From f1414ffc36152c7d59dbacebde18138b4f284835 Mon Sep 17 00:00:00 2001
From: hae-on <solbi2004@naver.com>
Date: Sun, 12 Nov 2023 13:48:09 +0900
Subject: [PATCH 7/8] =?UTF-8?q?refactor:=20hook=20=EC=99=B8=EB=B6=80?=
 =?UTF-8?q?=EB=A1=9C=20=EB=B6=84=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/Textarea/Textarea.tsx      | 11 +++++------
 src/hooks/useSpaceValidator.ts | 24 ------------------------
 src/index.ts                   |  1 -
 3 files changed, 5 insertions(+), 31 deletions(-)
 delete mode 100644 src/hooks/useSpaceValidator.ts

diff --git a/src/Textarea/Textarea.tsx b/src/Textarea/Textarea.tsx
index 173dee2..9fb9750 100644
--- a/src/Textarea/Textarea.tsx
+++ b/src/Textarea/Textarea.tsx
@@ -2,7 +2,6 @@ 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';
 
@@ -11,22 +10,22 @@ export interface TextareaProps extends ComponentPropsWithRef<'textarea'> {
    * Textarea 컴포넌트 사이즈 재조정 방향 설정입니다.
    */
   resize?: CSSProperties['resize'];
+  /**
+   * Textarea 컴포넌트의 에러 메시지입니다.
+   */
+  error: string;
 }
 
-const Textarea = ({ resize = 'both', ref, ...props }: TextareaProps) => {
-  const { value, error, handleChange } = useValidator();
-
+const Textarea = ({ resize = 'both', error, ref, ...props }: TextareaProps) => {
   return (
     <>
       <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">
diff --git a/src/hooks/useSpaceValidator.ts b/src/hooks/useSpaceValidator.ts
deleted file mode 100644
index a3c037d..0000000
--- a/src/hooks/useSpaceValidator.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-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;
diff --git a/src/index.ts b/src/index.ts
index f68a514..f4956b4 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -2,7 +2,6 @@ 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';

From ae3791b4b775632804a681f1282d7ce4ba76a127 Mon Sep 17 00:00:00 2001
From: hae-on <solbi2004@naver.com>
Date: Sun, 12 Nov 2023 14:13:29 +0900
Subject: [PATCH 8/8] =?UTF-8?q?refactor:=20props=20=EC=9D=B4=EB=A6=84=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95=EA=B3=BC=20=EB=A6=AC=EB=93=9C=EB=AF=B8=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md                 |  7 ++++---
 src/Textarea/Textarea.tsx | 12 ++++++------
 2 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/README.md b/README.md
index e53702d..859832d 100644
--- a/README.md
+++ b/README.md
@@ -338,9 +338,10 @@ 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
 
diff --git a/src/Textarea/Textarea.tsx b/src/Textarea/Textarea.tsx
index 9fb9750..cee1800 100644
--- a/src/Textarea/Textarea.tsx
+++ b/src/Textarea/Textarea.tsx
@@ -13,23 +13,23 @@ export interface TextareaProps extends ComponentPropsWithRef<'textarea'> {
   /**
    * Textarea 컴포넌트의 에러 메시지입니다.
    */
-  error: string;
+  errorMessage?: string;
 }
 
-const Textarea = ({ resize = 'both', error, ref, ...props }: TextareaProps) => {
+const Textarea = ({ resize = 'both', errorMessage, ref, ...props }: TextareaProps) => {
   return (
     <>
       <TextareaContainer
         ref={ref}
         resize={resize}
-        error={error}
+        errorMessage={errorMessage}
         autoCapitalize="off"
         autoCorrect="off"
         spellCheck="false"
         {...props}
       />
       <Text size="xs" color={theme.colors.error} aria-live="assertive">
-        {error}
+        {errorMessage}
       </Text>
     </>
   );
@@ -38,7 +38,7 @@ const Textarea = ({ resize = 'both', error, ref, ...props }: TextareaProps) => {
 export default forwardRef(Textarea);
 
 type TextareaStyleProps = Pick<TextareaProps, 'resize'> & {
-  error: string;
+  errorMessage?: string;
 };
 
 const TextareaContainer = styled.textarea<TextareaStyleProps>`
@@ -49,7 +49,7 @@ const TextareaContainer = styled.textarea<TextareaStyleProps>`
   border-radius: 0;
   line-height: 1.5;
   resize: ${({ resize }) => resize};
-  outline-color: ${({ error, theme }) => (error ? theme.colors.error : theme.colors.primary)};
+  outline-color: ${({ errorMessage, theme }) => (errorMessage ? theme.colors.error : theme.colors.primary)};
 
   &::placeholder {
     color: ${({ theme }) => theme.textColors.disabled};