From 0cac093695f79188741ef515f5e0cd4a394a3e30 Mon Sep 17 00:00:00 2001
From: Jeongbowoon <happyanne200212@gmail/com>
Date: Sun, 7 Jul 2024 20:35:43 +0900
Subject: [PATCH 01/10] =?UTF-8?q?#32=20feat:=20input=20error=20border=20?=
 =?UTF-8?q?=EC=B2=98=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/common/component/Input/Input.style.ts |  8 +++++---
 src/common/component/Input/Input.tsx      | 16 +++++++++++++---
 2 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/src/common/component/Input/Input.style.ts b/src/common/component/Input/Input.style.ts
index 88710d948..6e69112c7 100644
--- a/src/common/component/Input/Input.style.ts
+++ b/src/common/component/Input/Input.style.ts
@@ -31,14 +31,16 @@ export const inputStyle = css({
   },
 });
 
-export const variantStyle = (variant: Required<InputProps>['variant']) => {
+export const variantStyle = ({ variant, isError }: { variant: Required<InputProps>['variant']; isError: boolean }) => {
+  const borderColor = isError ? `${theme.colors.red}` : `${theme.colors.gray_400}`;
+
   const style = {
     outline: {
-      boxShadow: ` 0px 0px 0px 1px ${theme.colors.gray_400}`,
+      boxShadow: ` 0px 0px 0px 1px ${borderColor}`,
       borderRadius: '8px',
     },
     underline: {
-      boxShadow: ` 0px 1px 0px ${theme.colors.gray_400}`,
+      boxShadow: ` 0px 1px 0px ${borderColor}`,
     },
     colored: {
       borderRadius: '100px',
diff --git a/src/common/component/Input/Input.tsx b/src/common/component/Input/Input.tsx
index 0604200f5..fbedbbaf9 100644
--- a/src/common/component/Input/Input.tsx
+++ b/src/common/component/Input/Input.tsx
@@ -18,16 +18,26 @@ export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>,
   label?: string;
   LeftIcon?: React.FunctionComponent<React.SVGProps<SVGSVGElement>>; //svg 컴포넌트
   isError?: boolean;
+  supportingText?: string;
 }
 
-const Input = ({ variant, size = 'medium', label, LeftIcon, ...props }: InputProps) => {
+const Input = ({
+  variant,
+  size = 'medium',
+  label,
+  LeftIcon,
+  isError = false,
+  supportingText,
+  ...props
+}: InputProps) => {
   return (
     <article css={inputContainerStyle}>
       {label && <Label id={label}>{label}</Label>}
-      <div css={[inputWarpperStyle, variantStyle(variant), sizeStyle(size)]}>
+      <div css={[inputWarpperStyle, variantStyle({ variant, isError }), sizeStyle(size)]}>
         {LeftIcon && <LeftIcon />}
-        <input css={[inputStyle]} {...props} />
+        <input css={inputStyle} {...props} />
       </div>
+      {}
     </article>
   );
 };

From 465f73aad20ff71b71bb827371463f0388d4a754 Mon Sep 17 00:00:00 2001
From: Jeongbowoon <happyanne200212@gmail/com>
Date: Sun, 7 Jul 2024 21:19:11 +0900
Subject: [PATCH 02/10] =?UTF-8?q?#32=20feat:=20support=20text=20=EC=BB=B4?=
 =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=83=9D=EC=84=B1=20=EB=B0=8F=20?=
 =?UTF-8?q?=EC=84=B8=ED=8C=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/common/component/Input/Input.tsx                  |  5 ++++-
 .../component/SupportingText/SupportingText.tsx       | 11 +++++++++++
 2 files changed, 15 insertions(+), 1 deletion(-)
 create mode 100644 src/common/component/SupportingText/SupportingText.tsx

diff --git a/src/common/component/Input/Input.tsx b/src/common/component/Input/Input.tsx
index fbedbbaf9..0622e9d40 100644
--- a/src/common/component/Input/Input.tsx
+++ b/src/common/component/Input/Input.tsx
@@ -8,6 +8,7 @@ import {
   variantStyle,
 } from '@/common/component/Input/Input.style';
 import Label from '@/common/component/Label/Label';
+import SupportingText from '@/common/component/SupportingText/SupportingText';
 
 type InputSize = 'small' | 'medium' | 'large';
 type InputVariant = 'outline' | 'underline' | 'colored';
@@ -18,6 +19,7 @@ export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>,
   label?: string;
   LeftIcon?: React.FunctionComponent<React.SVGProps<SVGSVGElement>>; //svg 컴포넌트
   isError?: boolean;
+  isNotice?: boolean;
   supportingText?: string;
 }
 
@@ -27,6 +29,7 @@ const Input = ({
   label,
   LeftIcon,
   isError = false,
+  isNotice = false,
   supportingText,
   ...props
 }: InputProps) => {
@@ -37,7 +40,7 @@ const Input = ({
         {LeftIcon && <LeftIcon />}
         <input css={inputStyle} {...props} />
       </div>
-      {}
+      {supportingText && <SupportingText text={supportingText} isError={isError} isNotice={isNotice} />}
     </article>
   );
 };
diff --git a/src/common/component/SupportingText/SupportingText.tsx b/src/common/component/SupportingText/SupportingText.tsx
new file mode 100644
index 000000000..1cf8db8d6
--- /dev/null
+++ b/src/common/component/SupportingText/SupportingText.tsx
@@ -0,0 +1,11 @@
+interface SupportingTextProps {
+  text: string;
+  isError?: boolean; //red
+  isNotice?: boolean; //blue
+}
+
+const SupportingText = ({ text, isError = false, isNotice = false }: SupportingTextProps) => {
+  return <p>{text}</p>;
+};
+
+export default SupportingText;

From dae1ec72692280c2c022f24d067a1ccf12c26c7b Mon Sep 17 00:00:00 2001
From: Jeongbowoon <happyanne200212@gmail/com>
Date: Sun, 7 Jul 2024 22:50:17 +0900
Subject: [PATCH 03/10] =?UTF-8?q?#32=20feat:input=EC=BB=B4=ED=8F=AC?=
 =?UTF-8?q?=EB=84=8C=ED=8A=B8=EC=97=90=20supportingText=20=EC=A0=81?=
 =?UTF-8?q?=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/common/component/Input/Input.style.ts | 20 +++++++++++++++-----
 src/common/component/Input/Input.tsx      | 17 ++++++++++-------
 2 files changed, 25 insertions(+), 12 deletions(-)

diff --git a/src/common/component/Input/Input.style.ts b/src/common/component/Input/Input.style.ts
index 6e69112c7..bf9d93c35 100644
--- a/src/common/component/Input/Input.style.ts
+++ b/src/common/component/Input/Input.style.ts
@@ -3,14 +3,23 @@ import { css } from '@emotion/react';
 import { InputProps } from '@/common/component/Input/Input';
 import { theme } from '@/common/style/theme/theme';
 
-export const inputContainerStyle = css({
+export const containerStyle = css({
   display: 'flex',
   flexDirection: 'column',
 
   gap: '1.2rem',
+
+  width: '100%',
+});
+
+export const inputSupportStyle = css({
+  display: 'flex',
+  flexDirection: 'column',
+
+  gap: '0.8rem',
 });
 
-export const inputWarpperStyle = css({
+export const warpperStyle = css({
   display: 'flex',
   alignItems: 'center',
 
@@ -28,6 +37,7 @@ export const inputStyle = css({
 
   '::placeholder': {
     color: theme.colors.gray_500,
+    ...theme.text.body03,
   },
 });
 
@@ -53,9 +63,9 @@ export const variantStyle = ({ variant, isError }: { variant: Required<InputProp
 
 export const sizeStyle = (size: Required<InputProps>['size']) => {
   const style = {
-    small: { padding: '0.8rem 1.2rem', ...theme.text.body04 },
-    medium: { padding: '1.2rem 1.2rem', ...theme.text.body02 },
-    large: { padding: '1.2rem 1.6rem', ...theme.text.body02 },
+    small: { padding: '0.8rem 1.2rem' },
+    medium: { padding: '1.2rem 1.2rem' },
+    large: { padding: '1.2rem 1.6rem' },
   };
 
   return style[size];
diff --git a/src/common/component/Input/Input.tsx b/src/common/component/Input/Input.tsx
index 0622e9d40..f314e37c3 100644
--- a/src/common/component/Input/Input.tsx
+++ b/src/common/component/Input/Input.tsx
@@ -1,11 +1,12 @@
 import React, { InputHTMLAttributes } from 'react';
 
 import {
-  inputContainerStyle,
+  containerStyle,
   inputStyle,
-  inputWarpperStyle,
+  inputSupportStyle,
   sizeStyle,
   variantStyle,
+  warpperStyle,
 } from '@/common/component/Input/Input.style';
 import Label from '@/common/component/Label/Label';
 import SupportingText from '@/common/component/SupportingText/SupportingText';
@@ -34,13 +35,15 @@ const Input = ({
   ...props
 }: InputProps) => {
   return (
-    <article css={inputContainerStyle}>
+    <article css={containerStyle}>
       {label && <Label id={label}>{label}</Label>}
-      <div css={[inputWarpperStyle, variantStyle({ variant, isError }), sizeStyle(size)]}>
-        {LeftIcon && <LeftIcon />}
-        <input css={inputStyle} {...props} />
+      <div css={inputSupportStyle}>
+        <div css={[warpperStyle, variantStyle({ variant, isError }), sizeStyle(size)]}>
+          {LeftIcon && <LeftIcon />}
+          <input css={inputStyle} {...props} />
+        </div>
+        {supportingText && <SupportingText text={supportingText} isError={isError} isNotice={isNotice} />}
       </div>
-      {supportingText && <SupportingText text={supportingText} isError={isError} isNotice={isNotice} />}
     </article>
   );
 };

From 5dc71275dd395fdbd97d85259f1c441492ad2f02 Mon Sep 17 00:00:00 2001
From: Jeongbowoon <happyanne200212@gmail/com>
Date: Sun, 7 Jul 2024 22:51:22 +0900
Subject: [PATCH 04/10] =?UTF-8?q?#32=20feat:=20supporting=20text=20?=
 =?UTF-8?q?=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/common/component/SupportingText/SupportingText.style.ts | 6 ++++++
 src/common/component/SupportingText/SupportingText.tsx      | 6 +++++-
 2 files changed, 11 insertions(+), 1 deletion(-)
 create mode 100644 src/common/component/SupportingText/SupportingText.style.ts

diff --git a/src/common/component/SupportingText/SupportingText.style.ts b/src/common/component/SupportingText/SupportingText.style.ts
new file mode 100644
index 000000000..921920f7d
--- /dev/null
+++ b/src/common/component/SupportingText/SupportingText.style.ts
@@ -0,0 +1,6 @@
+import { css } from '@emotion/react';
+
+import { theme } from '@/common/style/theme/theme';
+
+export const textStyle = (textColor: string) =>
+  css({ color: textColor, wordBreak: 'break-word', ...theme.text.body04 });
diff --git a/src/common/component/SupportingText/SupportingText.tsx b/src/common/component/SupportingText/SupportingText.tsx
index 1cf8db8d6..38e2bd42e 100644
--- a/src/common/component/SupportingText/SupportingText.tsx
+++ b/src/common/component/SupportingText/SupportingText.tsx
@@ -1,3 +1,6 @@
+import { textStyle } from '@/common/component/SupportingText/SupportingText.style';
+import { theme } from '@/common/style/theme/theme';
+
 interface SupportingTextProps {
   text: string;
   isError?: boolean; //red
@@ -5,7 +8,8 @@ interface SupportingTextProps {
 }
 
 const SupportingText = ({ text, isError = false, isNotice = false }: SupportingTextProps) => {
-  return <p>{text}</p>;
+  const textColor = isError ? theme.colors.red : isNotice ? theme.colors.blue_900 : theme.colors.gray_400;
+  return <p css={textStyle(textColor)}>{text}</p>;
 };
 
 export default SupportingText;

From c1ea37448c05d7bcc106661f44c0d3a1e324084f Mon Sep 17 00:00:00 2001
From: Jeongbowoon <happyanne200212@gmail/com>
Date: Mon, 8 Jul 2024 00:08:30 +0900
Subject: [PATCH 05/10] =?UTF-8?q?#32=20fix:build=EC=97=90=EB=9F=AC=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/common/component/Header/Header.tsx      | 4 ++--
 src/common/component/Modal/Modal.tsx        | 2 +-
 src/common/component/Select/Select.style.ts | 2 +-
 src/story/common/Modal.stories.tsx          | 1 -
 src/story/page/MonthHeader.stories.tsx      | 2 +-
 5 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/src/common/component/Header/Header.tsx b/src/common/component/Header/Header.tsx
index 97388bd3c..d9142298e 100644
--- a/src/common/component/Header/Header.tsx
+++ b/src/common/component/Header/Header.tsx
@@ -20,11 +20,11 @@ export const UserHeader = ({ isLogin = false }: HeaderProps) => {
     <header css={headerStyle}>
       <SmallLogo />
       {isLogin ? (
-        <Button variant="secondary" size="xxSmall">
+        <Button variant="secondary" size="small">
           로그아웃
         </Button>
       ) : (
-        <Button variant="secondary" size="xxSmall">
+        <Button variant="secondary" size="small">
           로그인
         </Button>
       )}
diff --git a/src/common/component/Modal/Modal.tsx b/src/common/component/Modal/Modal.tsx
index a64b6e712..ce3295736 100644
--- a/src/common/component/Modal/Modal.tsx
+++ b/src/common/component/Modal/Modal.tsx
@@ -1,4 +1,4 @@
-import { ReactElement, useEffect, useRef } from 'react';
+import { ReactElement, useEffect } from 'react';
 import ReactDOM from 'react-dom';
 
 import { backgroundStyle, dialogStyle } from '@/common/component/Modal/Modal.style';
diff --git a/src/common/component/Select/Select.style.ts b/src/common/component/Select/Select.style.ts
index 6b6fe5a68..9834620f1 100644
--- a/src/common/component/Select/Select.style.ts
+++ b/src/common/component/Select/Select.style.ts
@@ -20,6 +20,6 @@ export const itemStyle = css({
   lineHeight: theme.text.body04.lineHeight,
 
   '&:hover, &:focus': {
-    backgroundColor: theme.colors.blue_10,
+    backgroundColor: theme.colors.blue_100,
   },
 });
diff --git a/src/story/common/Modal.stories.tsx b/src/story/common/Modal.stories.tsx
index a2c49b995..eefc96df4 100644
--- a/src/story/common/Modal.stories.tsx
+++ b/src/story/common/Modal.stories.tsx
@@ -1,7 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react';
 
 import Modal from '@/common/component/Modal/Modal';
-import { useOutsideClick } from '@/common/hook';
 import useModal from '@/common/hook/Modal/useModal';
 
 const meta: Meta<typeof Modal> = {
diff --git a/src/story/page/MonthHeader.stories.tsx b/src/story/page/MonthHeader.stories.tsx
index 8c68b4f7b..1dabc8fac 100644
--- a/src/story/page/MonthHeader.stories.tsx
+++ b/src/story/page/MonthHeader.stories.tsx
@@ -8,7 +8,7 @@ const meta = {
     layout: 'centered',
   },
   args: {
-    onMonthClick: (month: string) => {},
+    onMonthClick: () => {},
   },
   argTypes: {},
 } satisfies Meta<typeof MonthHeader>;

From 40ec4af4ca22797cf2a2104a3fd383a322b3d313 Mon Sep 17 00:00:00 2001
From: Jeongbowoon <happyanne200212@gmail/com>
Date: Mon, 8 Jul 2024 11:17:45 +0900
Subject: [PATCH 06/10] =?UTF-8?q?#32=20refactor:=20style=20=EC=A7=80?=
 =?UTF-8?q?=EC=A0=95=20style=20=ED=8C=8C=EC=9D=BC=20=EB=82=B4=EC=97=90?=
 =?UTF-8?q?=EC=84=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../component/SupportingText/SupportingText.style.ts  | 11 ++++++++---
 .../component/SupportingText/SupportingText.tsx       | 11 +++++------
 2 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/src/common/component/SupportingText/SupportingText.style.ts b/src/common/component/SupportingText/SupportingText.style.ts
index 921920f7d..44e411e04 100644
--- a/src/common/component/SupportingText/SupportingText.style.ts
+++ b/src/common/component/SupportingText/SupportingText.style.ts
@@ -1,6 +1,11 @@
-import { css } from '@emotion/react';
+import { CSSObject } from '@emotion/react';
 
 import { theme } from '@/common/style/theme/theme';
 
-export const textStyle = (textColor: string) =>
-  css({ color: textColor, wordBreak: 'break-word', ...theme.text.body04 });
+export const textStyle = ({ isError, isNotice }: { isError: boolean; isNotice: boolean }) => {
+  const textColor = isError ? theme.colors.red : isNotice ? theme.colors.blue_900 : theme.colors.gray_400;
+
+  const style: CSSObject = { color: textColor, wordBreak: 'break-word', ...theme.text.body04 };
+
+  return style;
+};
diff --git a/src/common/component/SupportingText/SupportingText.tsx b/src/common/component/SupportingText/SupportingText.tsx
index 38e2bd42e..749ab7f1d 100644
--- a/src/common/component/SupportingText/SupportingText.tsx
+++ b/src/common/component/SupportingText/SupportingText.tsx
@@ -1,15 +1,14 @@
+import { ComponentPropsWithoutRef } from 'react';
+
 import { textStyle } from '@/common/component/SupportingText/SupportingText.style';
-import { theme } from '@/common/style/theme/theme';
 
-interface SupportingTextProps {
-  text: string;
+interface SupportingTextProps extends ComponentPropsWithoutRef<'p'> {
   isError?: boolean; //red
   isNotice?: boolean; //blue
 }
 
-const SupportingText = ({ text, isError = false, isNotice = false }: SupportingTextProps) => {
-  const textColor = isError ? theme.colors.red : isNotice ? theme.colors.blue_900 : theme.colors.gray_400;
-  return <p css={textStyle(textColor)}>{text}</p>;
+const SupportingText = ({ isError = false, isNotice = false, children }: SupportingTextProps) => {
+  return <p css={textStyle({ isError, isNotice })}>{children}</p>;
 };
 
 export default SupportingText;

From 5453d32e7b43a8f28f565dc42f7cfd6c57f219ef Mon Sep 17 00:00:00 2001
From: Jeongbowoon <happyanne200212@gmail/com>
Date: Mon, 8 Jul 2024 11:18:27 +0900
Subject: [PATCH 07/10] =?UTF-8?q?#32=20refactor:=20input=20text=20style=20?=
 =?UTF-8?q?=EC=A7=80=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/common/component/Input/Input.style.ts | 1 +
 src/common/component/Input/Input.tsx      | 6 +++++-
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/common/component/Input/Input.style.ts b/src/common/component/Input/Input.style.ts
index bf9d93c35..6d3b67f46 100644
--- a/src/common/component/Input/Input.style.ts
+++ b/src/common/component/Input/Input.style.ts
@@ -32,6 +32,7 @@ export const inputStyle = css({
   border: 'none',
   backgroundColor: 'transparent',
   fontWeight: 400,
+  ...theme.text.body03,
 
   outline: 'none',
 
diff --git a/src/common/component/Input/Input.tsx b/src/common/component/Input/Input.tsx
index f314e37c3..ae7395146 100644
--- a/src/common/component/Input/Input.tsx
+++ b/src/common/component/Input/Input.tsx
@@ -42,7 +42,11 @@ const Input = ({
           {LeftIcon && <LeftIcon />}
           <input css={inputStyle} {...props} />
         </div>
-        {supportingText && <SupportingText text={supportingText} isError={isError} isNotice={isNotice} />}
+        {supportingText && (
+          <SupportingText isError={isError} isNotice={isNotice}>
+            {supportingText}
+          </SupportingText>
+        )}
       </div>
     </article>
   );

From fe286bdfcacf5972e3800f88c27baee26117fb9e Mon Sep 17 00:00:00 2001
From: Jeongbowoon <happyanne200212@gmail/com>
Date: Mon, 8 Jul 2024 13:55:51 +0900
Subject: [PATCH 08/10] =?UTF-8?q?#32=20feat:=20input=20ref=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/common/component/Input/Input.tsx          | 29 ++++++++++---------
 .../SupportingText/SupportingText.tsx         |  4 +--
 src/story/common/Input.stories.tsx            | 20 +++++++++++--
 3 files changed, 36 insertions(+), 17 deletions(-)

diff --git a/src/common/component/Input/Input.tsx b/src/common/component/Input/Input.tsx
index ae7395146..8650b6fe9 100644
--- a/src/common/component/Input/Input.tsx
+++ b/src/common/component/Input/Input.tsx
@@ -1,4 +1,4 @@
-import React, { InputHTMLAttributes } from 'react';
+import React, { ForwardedRef, InputHTMLAttributes, forwardRef } from 'react';
 
 import {
   containerStyle,
@@ -24,23 +24,26 @@ export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>,
   supportingText?: string;
 }
 
-const Input = ({
-  variant,
-  size = 'medium',
-  label,
-  LeftIcon,
-  isError = false,
-  isNotice = false,
-  supportingText,
-  ...props
-}: InputProps) => {
+const Input = (
+  {
+    variant,
+    size = 'medium',
+    label,
+    LeftIcon,
+    isError = false,
+    isNotice = false,
+    supportingText,
+    ...props
+  }: InputProps,
+  ref: ForwardedRef<HTMLInputElement>
+) => {
   return (
     <article css={containerStyle}>
       {label && <Label id={label}>{label}</Label>}
       <div css={inputSupportStyle}>
         <div css={[warpperStyle, variantStyle({ variant, isError }), sizeStyle(size)]}>
           {LeftIcon && <LeftIcon />}
-          <input css={inputStyle} {...props} />
+          <input ref={ref} css={inputStyle} {...props} />
         </div>
         {supportingText && (
           <SupportingText isError={isError} isNotice={isNotice}>
@@ -52,4 +55,4 @@ const Input = ({
   );
 };
 
-export default Input;
+export default forwardRef(Input);
diff --git a/src/common/component/SupportingText/SupportingText.tsx b/src/common/component/SupportingText/SupportingText.tsx
index 749ab7f1d..995129e31 100644
--- a/src/common/component/SupportingText/SupportingText.tsx
+++ b/src/common/component/SupportingText/SupportingText.tsx
@@ -3,8 +3,8 @@ import { ComponentPropsWithoutRef } from 'react';
 import { textStyle } from '@/common/component/SupportingText/SupportingText.style';
 
 interface SupportingTextProps extends ComponentPropsWithoutRef<'p'> {
-  isError?: boolean; //red
-  isNotice?: boolean; //blue
+  isError?: boolean;
+  isNotice?: boolean;
 }
 
 const SupportingText = ({ isError = false, isNotice = false, children }: SupportingTextProps) => {
diff --git a/src/story/common/Input.stories.tsx b/src/story/common/Input.stories.tsx
index a9dbd1ab1..6edc032a4 100644
--- a/src/story/common/Input.stories.tsx
+++ b/src/story/common/Input.stories.tsx
@@ -1,5 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
 
+import { useEffect, useRef } from 'react';
+
 import Input from '@/common/component/Input/Input';
 
 const meta = {
@@ -11,9 +13,12 @@ const meta = {
   args: {
     type: 'text',
     placeholder: 'placeholder',
-    width: 20,
     label: 'label',
     variant: 'underline',
+    size: 'medium',
+    isError: false,
+    isNotice: false,
+    supportingText: '',
   },
   argTypes: {},
 } satisfies Meta<typeof Input>;
@@ -21,4 +26,15 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const Default: Story = {};
+export const Default: Story = {
+  render: (args) => {
+    const inputRef = useRef<HTMLInputElement>(null);
+    useEffect(() => {
+      if (inputRef.current) {
+        inputRef.current.focus();
+      }
+    }, []);
+
+    return <Input ref={inputRef} {...args} />;
+  },
+};

From f1c01fd018ba6b52dbdaf770fc52748d6a2f4e37 Mon Sep 17 00:00:00 2001
From: Jeongbowoon <happyanne200212@gmail/com>
Date: Mon, 8 Jul 2024 16:24:27 +0900
Subject: [PATCH 09/10] =?UTF-8?q?#32=20refactor:=20style=20=ED=95=A8?=
 =?UTF-8?q?=EC=88=98=20=EC=88=98=EC=A0=95=20=EB=B0=8F=20=EC=BD=94=EB=93=9C?=
 =?UTF-8?q?=EB=A6=AC=EB=B7=B0=EB=B0=98=EC=98=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/common/component/Input/Input.style.ts                 | 6 +++---
 src/common/component/Input/Input.tsx                      | 6 +++---
 .../component/SupportingText/SupportingText.style.ts      | 8 +++-----
 src/common/component/SupportingText/SupportingText.tsx    | 2 +-
 4 files changed, 10 insertions(+), 12 deletions(-)

diff --git a/src/common/component/Input/Input.style.ts b/src/common/component/Input/Input.style.ts
index 6d3b67f46..ef72b6528 100644
--- a/src/common/component/Input/Input.style.ts
+++ b/src/common/component/Input/Input.style.ts
@@ -46,12 +46,12 @@ export const variantStyle = ({ variant, isError }: { variant: Required<InputProp
   const borderColor = isError ? `${theme.colors.red}` : `${theme.colors.gray_400}`;
 
   const style = {
-    outline: {
-      boxShadow: ` 0px 0px 0px 1px ${borderColor}`,
+    default: {
+      boxShadow: `inset 0px 0px 0px 1px ${borderColor}`,
       borderRadius: '8px',
     },
     underline: {
-      boxShadow: ` 0px 1px 0px ${borderColor}`,
+      boxShadow: `0px 1px 0px ${borderColor}`,
     },
     colored: {
       borderRadius: '100px',
diff --git a/src/common/component/Input/Input.tsx b/src/common/component/Input/Input.tsx
index 8650b6fe9..b3f72da97 100644
--- a/src/common/component/Input/Input.tsx
+++ b/src/common/component/Input/Input.tsx
@@ -12,10 +12,10 @@ import Label from '@/common/component/Label/Label';
 import SupportingText from '@/common/component/SupportingText/SupportingText';
 
 type InputSize = 'small' | 'medium' | 'large';
-type InputVariant = 'outline' | 'underline' | 'colored';
+type InputVariant = 'default' | 'underline' | 'colored';
 
 export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
-  variant: InputVariant;
+  variant?: InputVariant;
   size?: InputSize; //default: medium(p: 1.2rem)
   label?: string;
   LeftIcon?: React.FunctionComponent<React.SVGProps<SVGSVGElement>>; //svg 컴포넌트
@@ -26,7 +26,7 @@ export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>,
 
 const Input = (
   {
-    variant,
+    variant = 'default',
     size = 'medium',
     label,
     LeftIcon,
diff --git a/src/common/component/SupportingText/SupportingText.style.ts b/src/common/component/SupportingText/SupportingText.style.ts
index 44e411e04..a7de252b4 100644
--- a/src/common/component/SupportingText/SupportingText.style.ts
+++ b/src/common/component/SupportingText/SupportingText.style.ts
@@ -1,11 +1,9 @@
-import { CSSObject } from '@emotion/react';
+import { css } from '@emotion/react';
 
 import { theme } from '@/common/style/theme/theme';
 
-export const textStyle = ({ isError, isNotice }: { isError: boolean; isNotice: boolean }) => {
+export const textStyle = (isError: boolean, isNotice: boolean) => {
   const textColor = isError ? theme.colors.red : isNotice ? theme.colors.blue_900 : theme.colors.gray_400;
 
-  const style: CSSObject = { color: textColor, wordBreak: 'break-word', ...theme.text.body04 };
-
-  return style;
+  return css({ color: textColor, wordBreak: 'break-word', ...theme.text.body04 });
 };
diff --git a/src/common/component/SupportingText/SupportingText.tsx b/src/common/component/SupportingText/SupportingText.tsx
index 995129e31..ddf0998c0 100644
--- a/src/common/component/SupportingText/SupportingText.tsx
+++ b/src/common/component/SupportingText/SupportingText.tsx
@@ -8,7 +8,7 @@ interface SupportingTextProps extends ComponentPropsWithoutRef<'p'> {
 }
 
 const SupportingText = ({ isError = false, isNotice = false, children }: SupportingTextProps) => {
-  return <p css={textStyle({ isError, isNotice })}>{children}</p>;
+  return <p css={textStyle(isError, isNotice)}>{children}</p>;
 };
 
 export default SupportingText;

From c0cbac3ccda189f9e680ef6cf97001edbaa7033c Mon Sep 17 00:00:00 2001
From: Jeongbowoon <happyanne200212@gmail/com>
Date: Mon, 8 Jul 2024 17:18:55 +0900
Subject: [PATCH 10/10] =?UTF-8?q?#32=20refactor:=20label,=20supporting=20t?=
 =?UTF-8?q?ext=20=EC=9C=84=EC=B9=98=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/common/component/Input/Input.style.ts |  6 +++++-
 src/common/component/Input/Input.tsx      | 18 ++++++++----------
 2 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/src/common/component/Input/Input.style.ts b/src/common/component/Input/Input.style.ts
index ef72b6528..fad9872b3 100644
--- a/src/common/component/Input/Input.style.ts
+++ b/src/common/component/Input/Input.style.ts
@@ -7,9 +7,13 @@ export const containerStyle = css({
   display: 'flex',
   flexDirection: 'column',
 
-  gap: '1.2rem',
+  gap: '0.8rem',
 
   width: '100%',
+
+  '& > div': {
+    marginTop: '0.4rem',
+  },
 });
 
 export const inputSupportStyle = css({
diff --git a/src/common/component/Input/Input.tsx b/src/common/component/Input/Input.tsx
index b3f72da97..c3c7a8e7e 100644
--- a/src/common/component/Input/Input.tsx
+++ b/src/common/component/Input/Input.tsx
@@ -40,17 +40,15 @@ const Input = (
   return (
     <article css={containerStyle}>
       {label && <Label id={label}>{label}</Label>}
-      <div css={inputSupportStyle}>
-        <div css={[warpperStyle, variantStyle({ variant, isError }), sizeStyle(size)]}>
-          {LeftIcon && <LeftIcon />}
-          <input ref={ref} css={inputStyle} {...props} />
-        </div>
-        {supportingText && (
-          <SupportingText isError={isError} isNotice={isNotice}>
-            {supportingText}
-          </SupportingText>
-        )}
+      <div css={[warpperStyle, variantStyle({ variant, isError }), sizeStyle(size)]}>
+        {LeftIcon && <LeftIcon />}
+        <input ref={ref} css={inputStyle} {...props} />
       </div>
+      {supportingText && (
+        <SupportingText isError={isError} isNotice={isNotice}>
+          {supportingText}
+        </SupportingText>
+      )}
     </article>
   );
 };