From 77a4f4881c191c20678210c24505b58da17fd0f2 Mon Sep 17 00:00:00 2001
From: wonjin-dev <fsdjin159@gmail.com>
Date: Sat, 16 Dec 2023 01:00:56 +0900
Subject: [PATCH 01/31] =?UTF-8?q?feat:=20alias=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 tsconfig.json | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/tsconfig.json b/tsconfig.json
index cfddc22b..c1080dfd 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -14,7 +14,12 @@
     "jsx": "preserve",
     "incremental": true,
     "paths": {
-      "@/*": ["./*"]
+      "@/*": ["./*"],
+      "@components/*": ["./src/components/*"],
+      "@feature/*": ["./src/feature/*"],
+      "@hooks/*": ["./src/hooks/*"],
+      "@styles/*": ["./src/styles/*"],
+      "@utils/*": ["./src/utils/*"]
     }
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],

From 82ab4004563d12f71fc43e95072cee54eaac132d Mon Sep 17 00:00:00 2001
From: wonjin-dev <fsdjin159@gmail.com>
Date: Sat, 16 Dec 2023 01:06:17 +0900
Subject: [PATCH 02/31] =?UTF-8?q?feat:=20=EC=8A=A4=ED=86=A0=EB=A6=AC?=
 =?UTF-8?q?=EB=B6=81=20=EC=B4=88=EC=95=88=20=EC=9E=91=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .storybook/main.ts                       |  2 +-
 .storybook/stories/BaseInput.stories.tsx | 14 ++++++++++++++
 2 files changed, 15 insertions(+), 1 deletion(-)
 create mode 100644 .storybook/stories/BaseInput.stories.tsx

diff --git a/.storybook/main.ts b/.storybook/main.ts
index 0d315412..b7913244 100644
--- a/.storybook/main.ts
+++ b/.storybook/main.ts
@@ -1,7 +1,7 @@
 import type { StorybookConfig } from '@storybook/nextjs';
 
 const config: StorybookConfig = {
-  stories: ['./**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  stories: ['./stories/*.stories.@(js|jsx|mjs|ts|tsx)'],
   addons: [
     '@storybook/addon-links',
     '@storybook/addon-essentials',
diff --git a/.storybook/stories/BaseInput.stories.tsx b/.storybook/stories/BaseInput.stories.tsx
new file mode 100644
index 00000000..e71e3773
--- /dev/null
+++ b/.storybook/stories/BaseInput.stories.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import BaseInput from '../../src/components/Input/BaseInput';
+import { type Meta } from '@storybook/react';
+
+const meta: Meta<typeof BaseInput> = {
+  title: 'BaseInput',
+  component: BaseInput,
+};
+
+export default meta;
+
+export function Default() {
+  return <BaseInput controlledInputProps={{ value: '', onChange: () => {} }} />;
+}

From 5809aaaf3f4d9038b9edf300dc19d3e9e737a934 Mon Sep 17 00:00:00 2001
From: wonjin-dev <fsdjin159@gmail.com>
Date: Sat, 16 Dec 2023 01:06:27 +0900
Subject: [PATCH 03/31] =?UTF-8?q?feat:=20useInput=20=EC=B4=88=EC=95=88=20?=
 =?UTF-8?q?=EC=9E=91=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .eslintrc.json                     |  6 ++++--
 src/components/Input/BaseInput.tsx | 15 +++++++++++++++
 src/hooks/useInput.ts              | 13 +++++++++++++
 3 files changed, 32 insertions(+), 2 deletions(-)
 create mode 100644 src/components/Input/BaseInput.tsx
 create mode 100644 src/hooks/useInput.ts

diff --git a/.eslintrc.json b/.eslintrc.json
index 67210252..d33b811e 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -3,8 +3,7 @@
     "next/core-web-vitals",
     "prettier",
     "eslint:recommended",
-    "plugin:react-hooks/recommended",
-    "plugin:jsx-a11y/recommended"
+    "plugin:react-hooks/recommended"
   ],
   "parser": "@typescript-eslint/parser",
   "plugins": [
@@ -16,6 +15,9 @@
   "rules": {
     "import/first": "error",
     "import/newline-after-import": "error",
+    "plugin:jsx-a11y/recommended": {
+      "some": ["nesting", "id"]
+    },
     "import/no-useless-path-segments": [
       "error",
       {
diff --git a/src/components/Input/BaseInput.tsx b/src/components/Input/BaseInput.tsx
new file mode 100644
index 00000000..52fed367
--- /dev/null
+++ b/src/components/Input/BaseInput.tsx
@@ -0,0 +1,15 @@
+import { UseInputReturn } from '@hooks/useInput';
+
+interface BaseInputProps extends Omit<HTMLInputElement, keyof UseInputReturn> {
+  controlledInputProps: UseInputReturn;
+}
+
+const BaseInput = ({ id, controlledInputProps }: BaseInputProps) => {
+  return (
+    <label htmlFor={id}>
+      <input id={id} {...controlledInputProps} />
+    </label>
+  );
+};
+
+export default BaseInput;
diff --git a/src/hooks/useInput.ts b/src/hooks/useInput.ts
new file mode 100644
index 00000000..59806b5e
--- /dev/null
+++ b/src/hooks/useInput.ts
@@ -0,0 +1,13 @@
+import { ChangeEvent, useState } from 'react';
+
+export const useInput = () => {
+  const [value, setValue] = useState<string>('');
+
+  const onChange = (e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+    setValue(e.currentTarget.value);
+  };
+
+  return { value, onChange };
+};
+
+export type UseInputReturn = ReturnType<typeof useInput>;

From 71718b28f303a4495a21903dd7f8e9e48524f365 Mon Sep 17 00:00:00 2001
From: wonjin-dev <fsdjin159@gmail.com>
Date: Sat, 16 Dec 2023 01:08:45 +0900
Subject: [PATCH 04/31] =?UTF-8?q?refactor:=20=ED=8E=B8=EC=9D=98=EB=A5=BC?=
 =?UTF-8?q?=20=EC=9C=84=ED=95=B4=20@/=20alias=20=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 tsconfig.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tsconfig.json b/tsconfig.json
index c1080dfd..0237a7f8 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -14,10 +14,10 @@
     "jsx": "preserve",
     "incremental": true,
     "paths": {
-      "@/*": ["./*"],
       "@components/*": ["./src/components/*"],
       "@feature/*": ["./src/feature/*"],
       "@hooks/*": ["./src/hooks/*"],
+      "@pages": ["./pages/*"],
       "@styles/*": ["./src/styles/*"],
       "@utils/*": ["./src/utils/*"]
     }

From 523dcf360750a791032a3552597a165703c8537c Mon Sep 17 00:00:00 2001
From: wonjin-dev <fsdjin159@gmail.com>
Date: Sat, 16 Dec 2023 01:23:45 +0900
Subject: [PATCH 05/31] =?UTF-8?q?feat:=20=EC=A0=9C=EC=96=B4=20=EC=BB=B4?=
 =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20BaseInput=20=EC=9E=91=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/_app.tsx                     |  2 +-
 pages/index.tsx                    |  6 +++++-
 src/components/Input/BaseInput.tsx | 32 +++++++++++++++++++++++++-----
 src/hooks/useInput.ts              |  4 ++--
 4 files changed, 35 insertions(+), 9 deletions(-)

diff --git a/pages/_app.tsx b/pages/_app.tsx
index 22f77394..bdd8ae21 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -1,5 +1,5 @@
 import type { AppProps } from 'next/app';
-import '@/src/styles/global.css';
+import '@styles/global.css';
 
 const App = ({ Component, pageProps }: AppProps) => {
   return <Component {...pageProps} />;
diff --git a/pages/index.tsx b/pages/index.tsx
index 2a7ba008..8cb5b886 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,7 +1,11 @@
+import BaseInput from '@components/Input/BaseInput';
+import { useInput } from '@hooks/useInput';
 import type { NextPage } from 'next';
 
 const HomePage: NextPage = () => {
-  return <></>;
+  const testInputProps = useInput('test');
+
+  return <BaseInput inputProps={testInputProps} />;
 };
 
 export default HomePage;
diff --git a/src/components/Input/BaseInput.tsx b/src/components/Input/BaseInput.tsx
index 52fed367..558a0fcf 100644
--- a/src/components/Input/BaseInput.tsx
+++ b/src/components/Input/BaseInput.tsx
@@ -1,13 +1,35 @@
 import { UseInputReturn } from '@hooks/useInput';
+import { FocusEventHandler, ReactNode } from 'react';
 
-interface BaseInputProps extends Omit<HTMLInputElement, keyof UseInputReturn> {
-  controlledInputProps: UseInputReturn;
+interface BaseInputProps {
+  inputProps: UseInputReturn;
+
+  labelClassName?: string;
+  inputClassName?: string;
+  postfix?: ReactNode;
+
+  onFocus?: FocusEventHandler<HTMLInputElement>;
+  onBlur?: FocusEventHandler<HTMLInputElement>;
 }
 
-const BaseInput = ({ id, controlledInputProps }: BaseInputProps) => {
+const BaseInput = ({
+  inputProps,
+  labelClassName,
+  inputClassName,
+  postfix,
+  onFocus,
+  onBlur,
+}: BaseInputProps) => {
   return (
-    <label htmlFor={id}>
-      <input id={id} {...controlledInputProps} />
+    <label htmlFor={inputProps.id} className={labelClassName}>
+      <input
+        {...inputProps}
+        name={inputProps.id}
+        className={inputClassName}
+        onFocus={onFocus}
+        onBlur={onBlur}
+      />
+      {postfix}
     </label>
   );
 };
diff --git a/src/hooks/useInput.ts b/src/hooks/useInput.ts
index 59806b5e..4e774cd8 100644
--- a/src/hooks/useInput.ts
+++ b/src/hooks/useInput.ts
@@ -1,13 +1,13 @@
 import { ChangeEvent, useState } from 'react';
 
-export const useInput = () => {
+export const useInput = (inputId: string) => {
   const [value, setValue] = useState<string>('');
 
   const onChange = (e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
     setValue(e.currentTarget.value);
   };
 
-  return { value, onChange };
+  return { id: inputId, value, onChange };
 };
 
 export type UseInputReturn = ReturnType<typeof useInput>;

From 3f1bc53dc5b2e1d5da1209b9efbef04728745c58 Mon Sep 17 00:00:00 2001
From: wonjin-dev <fsdjin159@gmail.com>
Date: Sat, 16 Dec 2023 01:34:39 +0900
Subject: [PATCH 06/31] =?UTF-8?q?refactor:=20=EC=8A=A4=ED=86=A0=EB=A6=AC?=
 =?UTF-8?q?=20=EC=9E=91=EC=84=B1=20=EB=B0=8F=20=EC=BB=B4=ED=8F=AC=EB=84=8C?=
 =?UTF-8?q?=ED=8A=B8=20=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

---
 .storybook/stories/BaseInput.stories.tsx      | 14 ----------
 .../stories/ControlledInput.stories.tsx       | 28 +++++++++++++++++++
 pages/index.tsx                               | 13 +++++++--
 .../{BaseInput.tsx => ControlledInput.tsx}    |  8 +++---
 4 files changed, 43 insertions(+), 20 deletions(-)
 delete mode 100644 .storybook/stories/BaseInput.stories.tsx
 create mode 100644 .storybook/stories/ControlledInput.stories.tsx
 rename src/components/Input/{BaseInput.tsx => ControlledInput.tsx} (84%)

diff --git a/.storybook/stories/BaseInput.stories.tsx b/.storybook/stories/BaseInput.stories.tsx
deleted file mode 100644
index e71e3773..00000000
--- a/.storybook/stories/BaseInput.stories.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import React from 'react';
-import BaseInput from '../../src/components/Input/BaseInput';
-import { type Meta } from '@storybook/react';
-
-const meta: Meta<typeof BaseInput> = {
-  title: 'BaseInput',
-  component: BaseInput,
-};
-
-export default meta;
-
-export function Default() {
-  return <BaseInput controlledInputProps={{ value: '', onChange: () => {} }} />;
-}
diff --git a/.storybook/stories/ControlledInput.stories.tsx b/.storybook/stories/ControlledInput.stories.tsx
new file mode 100644
index 00000000..c250c119
--- /dev/null
+++ b/.storybook/stories/ControlledInput.stories.tsx
@@ -0,0 +1,28 @@
+import React, { useState } from 'react';
+import ControlledInput from '../../src/components/Input/ControlledInput';
+import type { Meta } from '@storybook/react';
+
+const meta: Meta<typeof ControlledInput> = {
+  title: 'components/ControlledInput',
+  component: ControlledInput,
+};
+
+export default meta;
+
+export function Default() {
+  const [value, setValue] = useState('');
+
+  return (
+    <ControlledInput
+      inputProps={{
+        value: value,
+        onChange: (e) => setValue(e.target.value),
+      }}
+      postfix={
+        <>
+          <p>0/1,000자</p>
+        </>
+      }
+    />
+  );
+}
diff --git a/pages/index.tsx b/pages/index.tsx
index 8cb5b886..4aa53f38 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,11 +1,20 @@
-import BaseInput from '@components/Input/BaseInput';
+import ControlledInput from '@components/Input/ControlledInput';
 import { useInput } from '@hooks/useInput';
 import type { NextPage } from 'next';
 
 const HomePage: NextPage = () => {
   const testInputProps = useInput('test');
 
-  return <BaseInput inputProps={testInputProps} />;
+  return (
+    <ControlledInput
+      inputProps={testInputProps}
+      postfix={
+        <>
+          <p>0/1000자</p>
+        </>
+      }
+    />
+  );
 };
 
 export default HomePage;
diff --git a/src/components/Input/BaseInput.tsx b/src/components/Input/ControlledInput.tsx
similarity index 84%
rename from src/components/Input/BaseInput.tsx
rename to src/components/Input/ControlledInput.tsx
index 558a0fcf..24eb2f2d 100644
--- a/src/components/Input/BaseInput.tsx
+++ b/src/components/Input/ControlledInput.tsx
@@ -1,7 +1,7 @@
 import { UseInputReturn } from '@hooks/useInput';
 import { FocusEventHandler, ReactNode } from 'react';
 
-interface BaseInputProps {
+interface ControlledInputProps {
   inputProps: UseInputReturn;
 
   labelClassName?: string;
@@ -12,14 +12,14 @@ interface BaseInputProps {
   onBlur?: FocusEventHandler<HTMLInputElement>;
 }
 
-const BaseInput = ({
+const ControlledInput = ({
   inputProps,
   labelClassName,
   inputClassName,
   postfix,
   onFocus,
   onBlur,
-}: BaseInputProps) => {
+}: ControlledInputProps) => {
   return (
     <label htmlFor={inputProps.id} className={labelClassName}>
       <input
@@ -34,4 +34,4 @@ const BaseInput = ({
   );
 };
 
-export default BaseInput;
+export default ControlledInput;

From b4d240276f7066851f508cae52e4d0626e009656 Mon Sep 17 00:00:00 2001
From: wonjin-dev <fsdjin159@gmail.com>
Date: Sun, 17 Dec 2023 01:43:58 +0900
Subject: [PATCH 07/31] =?UTF-8?q?feat:=20=EC=B6=94=EC=83=81=ED=99=94=20?=
 =?UTF-8?q?=EC=84=A4=EA=B3=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../stories/ControlledInput.stories.tsx       | 28 --------------
 pages/index.tsx                               |  8 ++--
 src/components/Input/ControlledInput.tsx      | 31 ++++++++++------
 src/components/Input/Postfix.tsx              | 18 +++++++++
 src/components/Input/style.css.ts             | 37 +++++++++++++++++++
 src/constants/config.ts                       |  1 +
 tsconfig.json                                 |  1 +
 7 files changed, 79 insertions(+), 45 deletions(-)
 delete mode 100644 .storybook/stories/ControlledInput.stories.tsx
 create mode 100644 src/components/Input/Postfix.tsx
 create mode 100644 src/components/Input/style.css.ts
 create mode 100644 src/constants/config.ts

diff --git a/.storybook/stories/ControlledInput.stories.tsx b/.storybook/stories/ControlledInput.stories.tsx
deleted file mode 100644
index c250c119..00000000
--- a/.storybook/stories/ControlledInput.stories.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import React, { useState } from 'react';
-import ControlledInput from '../../src/components/Input/ControlledInput';
-import type { Meta } from '@storybook/react';
-
-const meta: Meta<typeof ControlledInput> = {
-  title: 'components/ControlledInput',
-  component: ControlledInput,
-};
-
-export default meta;
-
-export function Default() {
-  const [value, setValue] = useState('');
-
-  return (
-    <ControlledInput
-      inputProps={{
-        value: value,
-        onChange: (e) => setValue(e.target.value),
-      }}
-      postfix={
-        <>
-          <p>0/1,000자</p>
-        </>
-      }
-    />
-  );
-}
diff --git a/pages/index.tsx b/pages/index.tsx
index 4aa53f38..915d10d5 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,6 +1,7 @@
 import ControlledInput from '@components/Input/ControlledInput';
 import { useInput } from '@hooks/useInput';
 import type { NextPage } from 'next';
+import DefaultPostfix from '@components/Input/Postfix';
 
 const HomePage: NextPage = () => {
   const testInputProps = useInput('test');
@@ -8,11 +9,8 @@ const HomePage: NextPage = () => {
   return (
     <ControlledInput
       inputProps={testInputProps}
-      postfix={
-        <>
-          <p>0/1000자</p>
-        </>
-      }
+      placeholder="메모를 끄적여보세요"
+      postfix={<DefaultPostfix valueLength={testInputProps.value.length} />}
     />
   );
 };
diff --git a/src/components/Input/ControlledInput.tsx b/src/components/Input/ControlledInput.tsx
index 24eb2f2d..b2ec8c73 100644
--- a/src/components/Input/ControlledInput.tsx
+++ b/src/components/Input/ControlledInput.tsx
@@ -1,37 +1,44 @@
 import { UseInputReturn } from '@hooks/useInput';
 import { FocusEventHandler, ReactNode } from 'react';
+import { defaultInputStyle, defaultLabelStyle } from './style.css';
+import { MAIN_INPUT_MAX_LENGTH } from '@constants/config';
 
 interface ControlledInputProps {
   inputProps: UseInputReturn;
 
-  labelClassName?: string;
+  placeholder?: string;
+  maxLength?: number;
+
   inputClassName?: string;
   postfix?: ReactNode;
 
-  onFocus?: FocusEventHandler<HTMLInputElement>;
-  onBlur?: FocusEventHandler<HTMLInputElement>;
+  onFocus?: FocusEventHandler<HTMLTextAreaElement>;
+  onBlur?: FocusEventHandler<HTMLTextAreaElement>;
 }
 
 const ControlledInput = ({
   inputProps,
-  labelClassName,
-  inputClassName,
+  placeholder,
+  maxLength = MAIN_INPUT_MAX_LENGTH,
+  inputClassName = defaultInputStyle,
   postfix,
   onFocus,
   onBlur,
-}: ControlledInputProps) => {
-  return (
-    <label htmlFor={inputProps.id} className={labelClassName}>
-      <input
+}: ControlledInputProps) => (
+  <label htmlFor={inputProps.id}>
+    <div className={defaultLabelStyle}>
+      <textarea
         {...inputProps}
         name={inputProps.id}
+        placeholder={placeholder}
+        maxLength={maxLength}
         className={inputClassName}
         onFocus={onFocus}
         onBlur={onBlur}
       />
       {postfix}
-    </label>
-  );
-};
+    </div>
+  </label>
+);
 
 export default ControlledInput;
diff --git a/src/components/Input/Postfix.tsx b/src/components/Input/Postfix.tsx
new file mode 100644
index 00000000..241df876
--- /dev/null
+++ b/src/components/Input/Postfix.tsx
@@ -0,0 +1,18 @@
+import { MAIN_INPUT_MAX_LENGTH } from '@constants/config';
+import { postfixWrapper } from './style.css';
+
+interface DefaultPostfixProps {
+  valueLength: number;
+}
+
+const DefaultPostfix = ({ valueLength }: DefaultPostfixProps) => {
+  return (
+    <div className={postfixWrapper}>
+      {valueLength > 0 && (
+        <span>{`${valueLength} / ${MAIN_INPUT_MAX_LENGTH}자`}</span>
+      )}
+    </div>
+  );
+};
+
+export default DefaultPostfix;
diff --git a/src/components/Input/style.css.ts b/src/components/Input/style.css.ts
new file mode 100644
index 00000000..8e84a151
--- /dev/null
+++ b/src/components/Input/style.css.ts
@@ -0,0 +1,37 @@
+import { style } from '@vanilla-extract/css';
+
+const placeholder = {
+  textAlign: 'center',
+  verticalAlign: 'center',
+} as const;
+
+export const defaultLabelStyle = style({
+  position: 'relative',
+});
+
+export const defaultInputStyle = style({
+  height: '72px',
+  padding: '0 24px 0 12px',
+  borderRadius: '16px',
+  backgroundColor: '#EFF5FF',
+  width: '100%',
+  color: '#121212',
+  fontSize: '17px',
+  fontWeight: '400',
+  lineHeight: '27px',
+  resize: 'none',
+  selectors: {
+    '&::placeholder': placeholder,
+  },
+});
+
+export const postfixWrapper = style({
+  position: 'absolute',
+  top: '50%',
+  right: '12px',
+  transform: 'translateY(-50%)',
+});
+
+export const postfixTextStyle = style({
+  height: '17px',
+});
diff --git a/src/constants/config.ts b/src/constants/config.ts
new file mode 100644
index 00000000..bd049a0d
--- /dev/null
+++ b/src/constants/config.ts
@@ -0,0 +1 @@
+export const MAIN_INPUT_MAX_LENGTH = 500;
diff --git a/tsconfig.json b/tsconfig.json
index 0237a7f8..a5eacb39 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -15,6 +15,7 @@
     "incremental": true,
     "paths": {
       "@components/*": ["./src/components/*"],
+      "@constants/*": ["./src/constants/*"],
       "@feature/*": ["./src/feature/*"],
       "@hooks/*": ["./src/hooks/*"],
       "@pages": ["./pages/*"],

From 27d58a33d7fe7e1a99d1bf16f740f07a1596dfd4 Mon Sep 17 00:00:00 2001
From: wonjin-dev <fsdjin159@gmail.com>
Date: Sun, 17 Dec 2023 01:44:58 +0900
Subject: [PATCH 08/31] =?UTF-8?q?fix:=20=EC=8A=A4=ED=86=A0=EB=A6=AC?=
 =?UTF-8?q?=EB=B6=81=20=EC=9C=84=EC=B9=98=20=EB=A1=A4=EB=B0=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .storybook/main.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.storybook/main.ts b/.storybook/main.ts
index b7913244..0d315412 100644
--- a/.storybook/main.ts
+++ b/.storybook/main.ts
@@ -1,7 +1,7 @@
 import type { StorybookConfig } from '@storybook/nextjs';
 
 const config: StorybookConfig = {
-  stories: ['./stories/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  stories: ['./**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   addons: [
     '@storybook/addon-links',
     '@storybook/addon-essentials',

From 3d46fa186d587f5fe83b2703e2ca94ac99eeb3bf Mon Sep 17 00:00:00 2001
From: wonjin-dev <fsdjin159@gmail.com>
Date: Sun, 17 Dec 2023 02:13:29 +0900
Subject: [PATCH 09/31] =?UTF-8?q?[WIP]=20=EC=8A=A4=ED=83=80=EC=9D=BC?=
 =?UTF-8?q?=EB=A7=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Input/ControlledInput.tsx | 17 ++++++--------
 src/components/Input/Postfix.tsx         |  4 ++--
 src/components/Input/style.css.ts        | 30 +++++++-----------------
 src/constants/config.ts                  |  3 +++
 4 files changed, 21 insertions(+), 33 deletions(-)

diff --git a/src/components/Input/ControlledInput.tsx b/src/components/Input/ControlledInput.tsx
index b2ec8c73..f1e678c6 100644
--- a/src/components/Input/ControlledInput.tsx
+++ b/src/components/Input/ControlledInput.tsx
@@ -1,17 +1,14 @@
 import { UseInputReturn } from '@hooks/useInput';
 import { FocusEventHandler, ReactNode } from 'react';
-import { defaultInputStyle, defaultLabelStyle } from './style.css';
+import { noneValue } from './style.css';
 import { MAIN_INPUT_MAX_LENGTH } from '@constants/config';
 
 interface ControlledInputProps {
   inputProps: UseInputReturn;
-
+  postfix?: ReactNode;
   placeholder?: string;
   maxLength?: number;
-
-  inputClassName?: string;
-  postfix?: ReactNode;
-
+  inputStyle?: string;
   onFocus?: FocusEventHandler<HTMLTextAreaElement>;
   onBlur?: FocusEventHandler<HTMLTextAreaElement>;
 }
@@ -20,24 +17,24 @@ const ControlledInput = ({
   inputProps,
   placeholder,
   maxLength = MAIN_INPUT_MAX_LENGTH,
-  inputClassName = defaultInputStyle,
+  inputStyle = noneValue,
   postfix,
   onFocus,
   onBlur,
 }: ControlledInputProps) => (
   <label htmlFor={inputProps.id}>
-    <div className={defaultLabelStyle}>
+    <article>
       <textarea
         {...inputProps}
         name={inputProps.id}
         placeholder={placeholder}
         maxLength={maxLength}
-        className={inputClassName}
+        className={inputStyle}
         onFocus={onFocus}
         onBlur={onBlur}
       />
       {postfix}
-    </div>
+    </article>
   </label>
 );
 
diff --git a/src/components/Input/Postfix.tsx b/src/components/Input/Postfix.tsx
index 241df876..c3f57fe8 100644
--- a/src/components/Input/Postfix.tsx
+++ b/src/components/Input/Postfix.tsx
@@ -1,5 +1,4 @@
 import { MAIN_INPUT_MAX_LENGTH } from '@constants/config';
-import { postfixWrapper } from './style.css';
 
 interface DefaultPostfixProps {
   valueLength: number;
@@ -7,10 +6,11 @@ interface DefaultPostfixProps {
 
 const DefaultPostfix = ({ valueLength }: DefaultPostfixProps) => {
   return (
-    <div className={postfixWrapper}>
+    <div>
       {valueLength > 0 && (
         <span>{`${valueLength} / ${MAIN_INPUT_MAX_LENGTH}자`}</span>
       )}
+      <button></button>
     </div>
   );
 };
diff --git a/src/components/Input/style.css.ts b/src/components/Input/style.css.ts
index 8e84a151..6112af52 100644
--- a/src/components/Input/style.css.ts
+++ b/src/components/Input/style.css.ts
@@ -1,37 +1,25 @@
 import { style } from '@vanilla-extract/css';
 
 const placeholder = {
-  textAlign: 'center',
-  verticalAlign: 'center',
+  lineHeight: '27px',
+  transform: 'translateY(10px)',
 } as const;
 
-export const defaultLabelStyle = style({
-  position: 'relative',
-});
-
-export const defaultInputStyle = style({
-  height: '72px',
-  padding: '0 24px 0 12px',
+const defaultInputStyle = {
   borderRadius: '16px',
-  backgroundColor: '#EFF5FF',
   width: '100%',
+  resize: 'none',
   color: '#121212',
   fontSize: '17px',
   fontWeight: '400',
   lineHeight: '27px',
-  resize: 'none',
   selectors: {
     '&::placeholder': placeholder,
   },
-});
-
-export const postfixWrapper = style({
-  position: 'absolute',
-  top: '50%',
-  right: '12px',
-  transform: 'translateY(-50%)',
-});
+} as const;
 
-export const postfixTextStyle = style({
-  height: '17px',
+export const noneValue = style({
+  ...defaultInputStyle,
+  backgroundColor: '#EFF5FF',
+  height: 'auto',
 });
diff --git a/src/constants/config.ts b/src/constants/config.ts
index bd049a0d..1307be25 100644
--- a/src/constants/config.ts
+++ b/src/constants/config.ts
@@ -1 +1,4 @@
+/**
+ * "끄적끄적" 최대 입력 글자 수
+ */
 export const MAIN_INPUT_MAX_LENGTH = 500;

From 733efc38701a38ae7bcc152658d7db87faf2a894 Mon Sep 17 00:00:00 2001
From: wonjin-dev <fsdjin159@gmail.com>
Date: Sun, 17 Dec 2023 16:02:46 +0900
Subject: [PATCH 10/31] =?UTF-8?q?feat:=20=EA=B8=B0=EB=B3=B8=20=EC=9D=B8?=
 =?UTF-8?q?=ED=92=8B=20=EC=8A=A4=ED=83=80=EC=9D=BC=EB=A7=81=20(value?=
 =?UTF-8?q?=EA=B0=80=20=EC=97=86=EC=9D=84=20=EB=95=8C)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Input/ControlledInput.tsx | 4 ++--
 src/components/Input/style.css.ts        | 5 +++--
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/components/Input/ControlledInput.tsx b/src/components/Input/ControlledInput.tsx
index f1e678c6..861d5b77 100644
--- a/src/components/Input/ControlledInput.tsx
+++ b/src/components/Input/ControlledInput.tsx
@@ -1,6 +1,6 @@
 import { UseInputReturn } from '@hooks/useInput';
 import { FocusEventHandler, ReactNode } from 'react';
-import { noneValue } from './style.css';
+import { noneValueInputStyle } from './style.css';
 import { MAIN_INPUT_MAX_LENGTH } from '@constants/config';
 
 interface ControlledInputProps {
@@ -17,7 +17,7 @@ const ControlledInput = ({
   inputProps,
   placeholder,
   maxLength = MAIN_INPUT_MAX_LENGTH,
-  inputStyle = noneValue,
+  inputStyle = noneValueInputStyle,
   postfix,
   onFocus,
   onBlur,
diff --git a/src/components/Input/style.css.ts b/src/components/Input/style.css.ts
index 6112af52..4c890d25 100644
--- a/src/components/Input/style.css.ts
+++ b/src/components/Input/style.css.ts
@@ -2,7 +2,7 @@ import { style } from '@vanilla-extract/css';
 
 const placeholder = {
   lineHeight: '27px',
-  transform: 'translateY(10px)',
+  transform: 'translate(24px, 13.5px)',
 } as const;
 
 const defaultInputStyle = {
@@ -18,8 +18,9 @@ const defaultInputStyle = {
   },
 } as const;
 
-export const noneValue = style({
+export const noneValueInputStyle = style({
   ...defaultInputStyle,
   backgroundColor: '#EFF5FF',
   height: 'auto',
+  caretColor: 'transparent',
 });

From 33fcc356c599b783607987b7dd3b348e2476f76d Mon Sep 17 00:00:00 2001
From: wonjin-dev <fsdjin159@gmail.com>
Date: Thu, 21 Dec 2023 21:24:52 +0900
Subject: [PATCH 11/31] =?UTF-8?q?[WIP]=20feat:=20=EC=8A=A4=ED=83=80?=
 =?UTF-8?q?=EC=9D=BC=EB=A7=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Input/ControlledInput.tsx | 85 ++++++++++++++++++------
 src/components/Input/style.css.ts        | 20 +++---
 2 files changed, 78 insertions(+), 27 deletions(-)

diff --git a/src/components/Input/ControlledInput.tsx b/src/components/Input/ControlledInput.tsx
index 861d5b77..641fb7e2 100644
--- a/src/components/Input/ControlledInput.tsx
+++ b/src/components/Input/ControlledInput.tsx
@@ -1,6 +1,17 @@
 import { UseInputReturn } from '@hooks/useInput';
-import { FocusEventHandler, ReactNode } from 'react';
-import { noneValueInputStyle } from './style.css';
+import {
+  type FocusEvent,
+  type FocusEventHandler,
+  type ReactNode,
+  useCallback,
+  useMemo,
+  useState,
+} from 'react';
+import {
+  activeInputStyle,
+  inputContainerStyle,
+  noneValueInputStyle,
+} from './style.css';
 import { MAIN_INPUT_MAX_LENGTH } from '@constants/config';
 
 interface ControlledInputProps {
@@ -8,6 +19,7 @@ interface ControlledInputProps {
   postfix?: ReactNode;
   placeholder?: string;
   maxLength?: number;
+  containerStyle?: string;
   inputStyle?: string;
   onFocus?: FocusEventHandler<HTMLTextAreaElement>;
   onBlur?: FocusEventHandler<HTMLTextAreaElement>;
@@ -17,25 +29,60 @@ const ControlledInput = ({
   inputProps,
   placeholder,
   maxLength = MAIN_INPUT_MAX_LENGTH,
-  inputStyle = noneValueInputStyle,
+  containerStyle = inputContainerStyle,
+  inputStyle,
   postfix,
   onFocus,
   onBlur,
-}: ControlledInputProps) => (
-  <label htmlFor={inputProps.id}>
-    <article>
-      <textarea
-        {...inputProps}
-        name={inputProps.id}
-        placeholder={placeholder}
-        maxLength={maxLength}
-        className={inputStyle}
-        onFocus={onFocus}
-        onBlur={onBlur}
-      />
-      {postfix}
-    </article>
-  </label>
-);
+}: ControlledInputProps) => {
+  const { value } = inputProps;
+  const [isFocus, setIsFocus] = useState(false);
+
+  const style = useMemo(() => {
+    if (containerStyle) {
+      return containerStyle;
+    } else {
+      if (isFocus || value.length > 0) {
+        return activeInputStyle;
+      }
+
+      return noneValueInputStyle;
+    }
+  }, [isFocus, value]);
+
+  const handleFocus = useCallback(
+    (e: FocusEvent<HTMLTextAreaElement, Element>) => {
+      setIsFocus(true);
+      onFocus?.(e);
+    },
+    [onFocus],
+  );
+
+  const handleBlur = useCallback(
+    (e: FocusEvent<HTMLTextAreaElement, Element>) => {
+      setIsFocus(false);
+      onBlur?.(e);
+    },
+    [onBlur],
+  );
+
+  return (
+    <label htmlFor={inputProps.id}>
+      <article className={containerStyle}>
+        <textarea
+          {...inputProps}
+          rows={value.length === 0 ? 1 : Math.ceil(value.length / 190)}
+          name={inputProps.id}
+          placeholder={placeholder}
+          maxLength={maxLength}
+          className={inputStyle}
+          onFocus={handleFocus}
+          onBlur={handleBlur}
+        />
+        {postfix}
+      </article>
+    </label>
+  );
+};
 
 export default ControlledInput;
diff --git a/src/components/Input/style.css.ts b/src/components/Input/style.css.ts
index 4c890d25..4d111368 100644
--- a/src/components/Input/style.css.ts
+++ b/src/components/Input/style.css.ts
@@ -1,9 +1,9 @@
 import { style } from '@vanilla-extract/css';
 
-const placeholder = {
-  lineHeight: '27px',
-  transform: 'translate(24px, 13.5px)',
-} as const;
+export const inputContainerStyle = style({
+  width: '100%',
+  padding: '22px 12px 22px 24px',
+});
 
 const defaultInputStyle = {
   borderRadius: '16px',
@@ -13,14 +13,18 @@ const defaultInputStyle = {
   fontSize: '17px',
   fontWeight: '400',
   lineHeight: '27px',
-  selectors: {
-    '&::placeholder': placeholder,
-  },
 } as const;
 
 export const noneValueInputStyle = style({
   ...defaultInputStyle,
   backgroundColor: '#EFF5FF',
-  height: 'auto',
   caretColor: 'transparent',
+  height: '72px',
+});
+
+export const activeInputStyle = style({
+  ...defaultInputStyle,
+  backgroundColor: 'white',
+  border: '1px solid #4C94FF',
+  height: 'auto',
 });

From 13d957e05349ad0dd600cc47aae0b889db966ffc Mon Sep 17 00:00:00 2001
From: wonjin-dev <fsdjin159@gmail.com>
Date: Wed, 27 Dec 2023 22:28:39 +0900
Subject: [PATCH 12/31] =?UTF-8?q?fix:=20=EC=BB=A8=ED=94=8C=EB=A6=AD=20?=
 =?UTF-8?q?=ED=95=B4=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/_app.tsx                  | 3 +--
 src/components/common/utils.tsx | 2 +-
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/pages/_app.tsx b/pages/_app.tsx
index b867f58d..7203cb72 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -1,7 +1,6 @@
 import type { AppProps } from 'next/app';
 import '@styles/global.css';
-
-import TanstackQueryProvider from '@/src/components/Providers/TanstackQueryProvider';
+import TanstackQueryProvider from '@components/Providers/TanstackQueryProvider';
 
 const App = ({ Component, pageProps }: AppProps) => {
   return (
diff --git a/src/components/common/utils.tsx b/src/components/common/utils.tsx
index 41212d19..b3e95833 100644
--- a/src/components/common/utils.tsx
+++ b/src/components/common/utils.tsx
@@ -2,7 +2,7 @@ import type {
   FlexStyles,
   GridItemStyles,
   GridStyles,
-} from '@/src/styles/sprinkles.css';
+} from '@styles/sprinkles.css';
 
 export const seperateProps = <
   T extends FlexStyles | GridStyles | GridItemStyles,

From b598b1e122545a056b54de47dd4d7b3a5296826f Mon Sep 17 00:00:00 2001
From: wonjin-dev <fsdjin159@gmail.com>
Date: Sat, 30 Dec 2023 14:38:40 +0900
Subject: [PATCH 13/31] =?UTF-8?q?[WIP]=20=EC=8A=A4=ED=83=80=EC=9D=BC?=
 =?UTF-8?q?=EB=A7=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/index.tsx                          |  3 +-
 src/components/Input/ControlledInput.tsx | 36 ++++----------
 src/components/Input/Postfix.tsx         |  5 +-
 src/components/Input/style.css.ts        | 61 +++++++++++++-----------
 src/hooks/useInput.ts                    | 11 +++--
 5 files changed, 56 insertions(+), 60 deletions(-)

diff --git a/pages/index.tsx b/pages/index.tsx
index 915d10d5..3ea14502 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -4,10 +4,11 @@ import type { NextPage } from 'next';
 import DefaultPostfix from '@components/Input/Postfix';
 
 const HomePage: NextPage = () => {
-  const testInputProps = useInput('test');
+  const testInputProps = useInput({ id: 'test', defaultValue: 'xxxx' });
 
   return (
     <ControlledInput
+      type={'2'}
       inputProps={testInputProps}
       placeholder="메모를 끄적여보세요"
       postfix={<DefaultPostfix valueLength={testInputProps.value.length} />}
diff --git a/src/components/Input/ControlledInput.tsx b/src/components/Input/ControlledInput.tsx
index 641fb7e2..9df7e9a5 100644
--- a/src/components/Input/ControlledInput.tsx
+++ b/src/components/Input/ControlledInput.tsx
@@ -4,52 +4,33 @@ import {
   type FocusEventHandler,
   type ReactNode,
   useCallback,
-  useMemo,
   useState,
 } from 'react';
-import {
-  activeInputStyle,
-  inputContainerStyle,
-  noneValueInputStyle,
-} from './style.css';
+import * as style from './style.css';
 import { MAIN_INPUT_MAX_LENGTH } from '@constants/config';
 
 interface ControlledInputProps {
+  type: '1' | '2';
   inputProps: UseInputReturn;
   postfix?: ReactNode;
   placeholder?: string;
   maxLength?: number;
-  containerStyle?: string;
-  inputStyle?: string;
   onFocus?: FocusEventHandler<HTMLTextAreaElement>;
   onBlur?: FocusEventHandler<HTMLTextAreaElement>;
 }
 
 const ControlledInput = ({
+  type,
   inputProps,
   placeholder,
   maxLength = MAIN_INPUT_MAX_LENGTH,
-  containerStyle = inputContainerStyle,
-  inputStyle,
   postfix,
   onFocus,
   onBlur,
 }: ControlledInputProps) => {
-  const { value } = inputProps;
+  const { id, value, onChange } = inputProps;
   const [isFocus, setIsFocus] = useState(false);
 
-  const style = useMemo(() => {
-    if (containerStyle) {
-      return containerStyle;
-    } else {
-      if (isFocus || value.length > 0) {
-        return activeInputStyle;
-      }
-
-      return noneValueInputStyle;
-    }
-  }, [isFocus, value]);
-
   const handleFocus = useCallback(
     (e: FocusEvent<HTMLTextAreaElement, Element>) => {
       setIsFocus(true);
@@ -67,17 +48,18 @@ const ControlledInput = ({
   );
 
   return (
-    <label htmlFor={inputProps.id}>
-      <article className={containerStyle}>
+    <label htmlFor={id}>
+      <article>
         <textarea
           {...inputProps}
+          className={style.input({ type, focus: isFocus })}
           rows={value.length === 0 ? 1 : Math.ceil(value.length / 190)}
-          name={inputProps.id}
+          name={id}
           placeholder={placeholder}
           maxLength={maxLength}
-          className={inputStyle}
           onFocus={handleFocus}
           onBlur={handleBlur}
+          onChange={onChange}
         />
         {postfix}
       </article>
diff --git a/src/components/Input/Postfix.tsx b/src/components/Input/Postfix.tsx
index c3f57fe8..413b8e78 100644
--- a/src/components/Input/Postfix.tsx
+++ b/src/components/Input/Postfix.tsx
@@ -10,7 +10,10 @@ const DefaultPostfix = ({ valueLength }: DefaultPostfixProps) => {
       {valueLength > 0 && (
         <span>{`${valueLength} / ${MAIN_INPUT_MAX_LENGTH}자`}</span>
       )}
-      <button></button>
+
+      <button>
+        <img src="" alt="" />
+      </button>
     </div>
   );
 };
diff --git a/src/components/Input/style.css.ts b/src/components/Input/style.css.ts
index 4d111368..4580900d 100644
--- a/src/components/Input/style.css.ts
+++ b/src/components/Input/style.css.ts
@@ -1,30 +1,35 @@
-import { style } from '@vanilla-extract/css';
+import { recipe } from '@vanilla-extract/recipes';
 
-export const inputContainerStyle = style({
-  width: '100%',
-  padding: '22px 12px 22px 24px',
-});
-
-const defaultInputStyle = {
-  borderRadius: '16px',
-  width: '100%',
-  resize: 'none',
-  color: '#121212',
-  fontSize: '17px',
-  fontWeight: '400',
-  lineHeight: '27px',
-} as const;
-
-export const noneValueInputStyle = style({
-  ...defaultInputStyle,
-  backgroundColor: '#EFF5FF',
-  caretColor: 'transparent',
-  height: '72px',
-});
-
-export const activeInputStyle = style({
-  ...defaultInputStyle,
-  backgroundColor: 'white',
-  border: '1px solid #4C94FF',
-  height: 'auto',
+export const input = recipe({
+  base: [
+    {
+      borderRadius: '16px',
+      width: '100%',
+      resize: 'none',
+      padding: '22px 12px 22px 24px',
+      color: '#121212',
+      fontSize: '17px',
+      fontWeight: '400',
+      lineHeight: '27px',
+    },
+  ],
+  variants: {
+    type: {
+      '1': {
+        backgroundColor: '#EFF5FF',
+        caretColor: 'transparent',
+        height: '72px',
+      },
+      '2': {
+        backgroundColor: 'white',
+        border: '1px solid #4C94FF',
+        height: 'auto',
+      },
+    },
+    focus: {
+      true: {
+        border: '1px solid purple',
+      },
+    },
+  },
 });
diff --git a/src/hooks/useInput.ts b/src/hooks/useInput.ts
index 4e774cd8..16a56c00 100644
--- a/src/hooks/useInput.ts
+++ b/src/hooks/useInput.ts
@@ -1,13 +1,18 @@
 import { ChangeEvent, useState } from 'react';
 
-export const useInput = (inputId: string) => {
-  const [value, setValue] = useState<string>('');
+interface UseInputArgs {
+  id: string;
+  defaultValue?: string;
+}
+
+export const useInput = ({ id, defaultValue = '' }: UseInputArgs) => {
+  const [value, setValue] = useState<string>(defaultValue);
 
   const onChange = (e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
     setValue(e.currentTarget.value);
   };
 
-  return { id: inputId, value, onChange };
+  return { id, value, onChange };
 };
 
 export type UseInputReturn = ReturnType<typeof useInput>;

From cb2aa31fd10591bf21519feb057f172a6ede696d Mon Sep 17 00:00:00 2001
From: wonjin-dev <fsdjin159@gmail.com>
Date: Sat, 30 Dec 2023 14:43:29 +0900
Subject: [PATCH 14/31] =?UTF-8?q?fix:=20=EB=B3=91=ED=95=A9=20alias=20?=
 =?UTF-8?q?=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Toast/Toast.tsx    | 2 +-
 src/components/Toast/style.css.ts | 6 +++---
 tsconfig.json                     | 1 +
 3 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/components/Toast/Toast.tsx b/src/components/Toast/Toast.tsx
index eb839641..980e5cdd 100644
--- a/src/components/Toast/Toast.tsx
+++ b/src/components/Toast/Toast.tsx
@@ -1,6 +1,6 @@
 import { useEffect } from 'react';
 
-import { useToast } from '@/src/stores/toastStore';
+import { useToast } from '@stores/toastStore';
 
 import * as styles from './style.css';
 
diff --git a/src/components/Toast/style.css.ts b/src/components/Toast/style.css.ts
index e62458c0..ac0e95ce 100644
--- a/src/components/Toast/style.css.ts
+++ b/src/components/Toast/style.css.ts
@@ -1,8 +1,8 @@
 import { recipe } from '@vanilla-extract/recipes';
 
-import { sprinkles } from '@/src/styles/sprinkles.css';
-import { theme } from '@/src/styles/theme.css';
-import { modalLayer } from '@/src/styles/utils.css';
+import { sprinkles } from '@styles/sprinkles.css';
+import { theme } from '@styles/theme.css';
+import { modalLayer } from '@styles/utils.css';
 
 export const toast = recipe({
   base: [
diff --git a/tsconfig.json b/tsconfig.json
index a5eacb39..4fda098d 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -19,6 +19,7 @@
       "@feature/*": ["./src/feature/*"],
       "@hooks/*": ["./src/hooks/*"],
       "@pages": ["./pages/*"],
+      "@stores/*": ["./src/stores/*"],
       "@styles/*": ["./src/styles/*"],
       "@utils/*": ["./src/utils/*"]
     }

From ac62aea1d4fb7a9c7a4bc120655066cf22cdcb88 Mon Sep 17 00:00:00 2001
From: wonjin-dev <fsdjin159@gmail.com>
Date: Tue, 2 Jan 2024 01:36:10 +0900
Subject: [PATCH 15/31] =?UTF-8?q?fix:=20=EB=B6=88=ED=95=84=EC=9A=94=20?=
 =?UTF-8?q?=EC=A3=BC=EC=84=9D=20=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 plopfile.mjs | 1 -
 1 file changed, 1 deletion(-)

diff --git a/plopfile.mjs b/plopfile.mjs
index d2e3eb12..3f197c12 100644
--- a/plopfile.mjs
+++ b/plopfile.mjs
@@ -1,4 +1,3 @@
-/* eslint-disable import/no-anonymous-default-export */
 export default function (plop) {
   const getComponentName = {
     type: 'input',

From 4cfff1b5dd839846458540db16e439c9613d7a49 Mon Sep 17 00:00:00 2001
From: wonjin-dev <fsdjin159@gmail.com>
Date: Tue, 2 Jan 2024 01:48:37 +0900
Subject: [PATCH 16/31] =?UTF-8?q?fix:=20alias,lint=20=EB=A1=A4=EB=B0=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .eslintrc.json                           |  3 ---
 pages/_app.tsx                           | 12 ++++++----
 pages/index.tsx                          |  5 ++--
 src/components/Input/ControlledInput.tsx | 25 +++++++-------------
 src/components/Toast/Toast.tsx           |  2 +-
 src/components/Toast/style.css.ts        |  6 ++---
 src/components/common/utils.tsx          | 29 ------------------------
 src/hooks/useInput.ts                    |  3 ++-
 tsconfig.json                            |  9 +-------
 9 files changed, 25 insertions(+), 69 deletions(-)
 delete mode 100644 src/components/common/utils.tsx

diff --git a/.eslintrc.json b/.eslintrc.json
index c8e82120..a556732b 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -17,9 +17,6 @@
   "rules": {
     "import/first": "error",
     "import/newline-after-import": "error",
-    "plugin:jsx-a11y/recommended": {
-      "some": ["nesting", "id"]
-    },
     "import/no-useless-path-segments": [
       "error",
       {
diff --git a/pages/_app.tsx b/pages/_app.tsx
index 870a1371..0256c491 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -1,9 +1,11 @@
 import type { AppProps } from 'next/app';
-import '@styles/global.css';
-import TanstackQueryProvider from '@components/Providers/TanstackQueryProvider';
-import Toast from '@components/Toast/Toast';
-import Layout from '@components/Layout/Layout';
-import { pretendard } from '@styles/font';
+
+import '@/src/styles/global.css';
+
+import Layout from '@/src/components/Layout/Layout';
+import TanstackQueryProvider from '@/src/components/Providers/TanstackQueryProvider';
+import Toast from '@/src/components/Toast/Toast';
+import { pretendard } from '@/src/styles/font';
 
 const App = ({ Component, pageProps }: AppProps) => {
   return (
diff --git a/pages/index.tsx b/pages/index.tsx
index 4cf33358..a1bc2191 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,7 +1,8 @@
-import ControlledInput from '@components/Input/ControlledInput';
-import { useInput } from '@hooks/useInput';
 import type { NextPage } from 'next';
 
+import ControlledInput from '@/src/components/Input/ControlledInput';
+import { useInput } from '@/src/hooks/useInput';
+
 const HomePage: NextPage = () => {
   const testInputProps = useInput({
     id: 'test',
diff --git a/src/components/Input/ControlledInput.tsx b/src/components/Input/ControlledInput.tsx
index 63801742..eab12ccb 100644
--- a/src/components/Input/ControlledInput.tsx
+++ b/src/components/Input/ControlledInput.tsx
@@ -1,18 +1,11 @@
-import { UseInputReturn } from '@hooks/useInput';
-import {
-  type FocusEvent,
-  type FocusEventHandler,
-  type ReactNode,
-  useCallback,
-  useState,
-  HTMLAttributes,
-  useRef,
-  useEffect,
-} from 'react';
-import * as style from './style.css';
-import { MAIN_INPUT_MAX_LENGTH } from '@constants/config';
-
+import type { HTMLAttributes } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { assignInlineVars } from '@vanilla-extract/dynamic';
+
+import { MAIN_INPUT_MAX_LENGTH } from '@/src/constants/config';
+import type { UseInputReturn } from '@/src/hooks/useInput';
+
+import * as style from './style.css';
 import { inputHeight } from './style.css';
 
 type InputType = 'primary' | 'create';
@@ -22,7 +15,6 @@ interface ControlledInputProps extends HTMLAttributes<HTMLTextAreaElement> {
   inputProps: UseInputReturn;
   placeholder?: string;
   maxLength?: number;
-  showCount?: boolean;
 }
 
 const ControlledInput = ({
@@ -30,7 +22,6 @@ const ControlledInput = ({
   inputProps,
   placeholder,
   maxLength = MAIN_INPUT_MAX_LENGTH,
-  showCount = false,
 }: ControlledInputProps) => {
   const { id, value } = inputProps;
   const inputRef = useRef<HTMLTextAreaElement | null>(null);
@@ -46,7 +37,7 @@ const ControlledInput = ({
 
       setHeight(inputRef.current.scrollHeight);
     }
-  }, [value]);
+  }, [height, value]);
 
   return (
     <label htmlFor={id}>
diff --git a/src/components/Toast/Toast.tsx b/src/components/Toast/Toast.tsx
index 980e5cdd..eb839641 100644
--- a/src/components/Toast/Toast.tsx
+++ b/src/components/Toast/Toast.tsx
@@ -1,6 +1,6 @@
 import { useEffect } from 'react';
 
-import { useToast } from '@stores/toastStore';
+import { useToast } from '@/src/stores/toastStore';
 
 import * as styles from './style.css';
 
diff --git a/src/components/Toast/style.css.ts b/src/components/Toast/style.css.ts
index ac0e95ce..e62458c0 100644
--- a/src/components/Toast/style.css.ts
+++ b/src/components/Toast/style.css.ts
@@ -1,8 +1,8 @@
 import { recipe } from '@vanilla-extract/recipes';
 
-import { sprinkles } from '@styles/sprinkles.css';
-import { theme } from '@styles/theme.css';
-import { modalLayer } from '@styles/utils.css';
+import { sprinkles } from '@/src/styles/sprinkles.css';
+import { theme } from '@/src/styles/theme.css';
+import { modalLayer } from '@/src/styles/utils.css';
 
 export const toast = recipe({
   base: [
diff --git a/src/components/common/utils.tsx b/src/components/common/utils.tsx
deleted file mode 100644
index b3e95833..00000000
--- a/src/components/common/utils.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import type {
-  FlexStyles,
-  GridItemStyles,
-  GridStyles,
-} from '@styles/sprinkles.css';
-
-export const seperateProps = <
-  T extends FlexStyles | GridStyles | GridItemStyles,
->(
-  styleDefinitions,
-  props,
-  stylesProps = {},
-) => {
-  const styleProps = stylesProps;
-  const nativeProps: Record<string, unknown> = {};
-
-  Object.entries(props).forEach(([key, value]) => {
-    if (styleDefinitions.properties.has(key as keyof T)) {
-      styleProps[key] = value;
-    } else {
-      nativeProps[key] = value;
-    }
-  });
-
-  return {
-    styleProps,
-    nativeProps,
-  };
-};
diff --git a/src/hooks/useInput.ts b/src/hooks/useInput.ts
index 16a56c00..a4637380 100644
--- a/src/hooks/useInput.ts
+++ b/src/hooks/useInput.ts
@@ -1,4 +1,5 @@
-import { ChangeEvent, useState } from 'react';
+import type { ChangeEvent } from 'react';
+import { useState } from 'react';
 
 interface UseInputArgs {
   id: string;
diff --git a/tsconfig.json b/tsconfig.json
index 4fda098d..cfddc22b 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -14,14 +14,7 @@
     "jsx": "preserve",
     "incremental": true,
     "paths": {
-      "@components/*": ["./src/components/*"],
-      "@constants/*": ["./src/constants/*"],
-      "@feature/*": ["./src/feature/*"],
-      "@hooks/*": ["./src/hooks/*"],
-      "@pages": ["./pages/*"],
-      "@stores/*": ["./src/stores/*"],
-      "@styles/*": ["./src/styles/*"],
-      "@utils/*": ["./src/utils/*"]
+      "@/*": ["./*"]
     }
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],

From 5f7f8d93e65c811529c776423b7eb6f74d705915 Mon Sep 17 00:00:00 2001
From: wonjin-dev <fsdjin159@gmail.com>
Date: Tue, 2 Jan 2024 01:52:11 +0900
Subject: [PATCH 17/31] =?UTF-8?q?feat:=20=EC=8A=A4=ED=86=A0=EB=A6=AC=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

---
 .../Input/ControlledInput.stories.tsx         | 28 +++++++++++++++++++
 1 file changed, 28 insertions(+)
 create mode 100644 src/components/Input/ControlledInput.stories.tsx

diff --git a/src/components/Input/ControlledInput.stories.tsx b/src/components/Input/ControlledInput.stories.tsx
new file mode 100644
index 00000000..7653d443
--- /dev/null
+++ b/src/components/Input/ControlledInput.stories.tsx
@@ -0,0 +1,28 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { useInput } from '@/src/hooks/useInput';
+
+import ControlledInput from './ControlledInput';
+
+const meta: Meta<typeof ControlledInput> = {
+  title: 'Input/ControlledInput',
+  component: ControlledInput,
+  decorators: [
+    (Story) => (
+      <div style={{ height: '500px' }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof ControlledInput>;
+
+export const Basic: Story = {
+  render: function Render() {
+    const inputProps = useInput({ id: 'story' });
+
+    return <ControlledInput type={'primary'} inputProps={inputProps} />;
+  },
+};

From bde8c5d6f8b7f1c83fef6bbe444e398dcea767a6 Mon Sep 17 00:00:00 2001
From: wonjin-dev <fsdjin159@gmail.com>
Date: Tue, 2 Jan 2024 01:55:42 +0900
Subject: [PATCH 18/31] =?UTF-8?q?feat:=20=EC=8A=A4=ED=86=A0=EB=A6=AC=20?=
 =?UTF-8?q?=EC=84=A4=EB=AA=85=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Input/ControlledInput.stories.tsx | 8 ++++++++
 src/components/Toast/Toast.stories.tsx           | 2 +-
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/components/Input/ControlledInput.stories.tsx b/src/components/Input/ControlledInput.stories.tsx
index 7653d443..1b1b7527 100644
--- a/src/components/Input/ControlledInput.stories.tsx
+++ b/src/components/Input/ControlledInput.stories.tsx
@@ -7,6 +7,14 @@ import ControlledInput from './ControlledInput';
 const meta: Meta<typeof ControlledInput> = {
   title: 'Input/ControlledInput',
   component: ControlledInput,
+  parameters: {
+    componentSubtitle: '프로젝트 기본 Input',
+    docs: {
+      description: {
+        component: '제어 컴포넌트로 제작',
+      },
+    },
+  },
   decorators: [
     (Story) => (
       <div style={{ height: '500px' }}>
diff --git a/src/components/Toast/Toast.stories.tsx b/src/components/Toast/Toast.stories.tsx
index 908e589f..16c14735 100644
--- a/src/components/Toast/Toast.stories.tsx
+++ b/src/components/Toast/Toast.stories.tsx
@@ -7,7 +7,7 @@ import { useToast } from '@/src/stores/toastStore';
 import Toast from './Toast';
 
 const meta: Meta<typeof Toast> = {
-  title: 'Toast',
+  title: 'Modals/Toast',
   component: Toast,
   decorators: [
     (Story) => (

From ff64470ff8aaa7e0f11dc24126f2db1f39090cca Mon Sep 17 00:00:00 2001
From: wonjin-dev <fsdjin159@gmail.com>
Date: Thu, 4 Jan 2024 00:43:07 +0900
Subject: [PATCH 19/31] =?UTF-8?q?style:=20=EA=B8=B0=EB=B3=B8=20=EC=8A=A4?=
 =?UTF-8?q?=ED=83=80=EC=9D=BC=EB=A7=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md                                     | 23 ++++++++++
 pages/index.tsx                               |  2 +
 public/icons/error.svg                        |  4 ++
 public/icons/warn.svg                         |  5 ++
 .../Input/ControlledInput.stories.tsx         | 10 +++-
 src/components/Input/ControlledInput.tsx      | 44 ++++++++++++++----
 src/components/Input/style.css.ts             | 46 +++++++++++++++++--
 7 files changed, 119 insertions(+), 15 deletions(-)
 create mode 100644 public/icons/error.svg
 create mode 100644 public/icons/warn.svg

diff --git a/README.md b/README.md
index b86a6523..7c96d05e 100644
--- a/README.md
+++ b/README.md
@@ -1 +1,24 @@
 # BARO
+
+<div>
+  <svg width="67" height="67" viewBox="0 0 67 72" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M0.292969 7.49551C0.292969 3.43622 3.58368 0.145508 7.64297 0.145508H26.018C30.0773 0.145508 33.368 3.43622 33.368 7.49551V25.8705C33.368 29.9298 30.0773 33.2205 26.018 33.2205H7.64297C3.58368 33.2205 0.292969 29.9298 0.292969 25.8705V7.49551Z" fill="#4C94FF"/>
+    <path d="M33.3691 7.49551C33.3691 3.43622 36.6599 0.145508 40.7191 0.145508H59.0942C63.1535 0.145508 66.4442 3.43622 66.4442 7.49551V25.8705C66.4442 29.9298 63.1535 33.2205 59.0942 33.2205H40.7191C36.6598 33.2205 33.3691 29.9298 33.3691 25.8705V7.49551Z" fill="#FFC633"/>
+    <path d="M0.292969 40.5705C0.292969 36.5112 3.58368 33.2205 7.64297 33.2205H26.018C30.0773 33.2205 33.368 36.5112 33.368 40.5705V58.9455C33.368 63.0048 30.0773 66.2955 26.018 66.2955H7.64297C3.58368 66.2955 0.292969 63.0048 0.292969 58.9455V40.5705Z" fill="#33D486"/>
+    <path d="M40.7191 33.2205C36.6599 33.2205 33.3691 36.5112 33.3691 40.5705V70.7729C33.3691 71.7454 34.448 72.3302 35.2628 71.7993L43.7104 66.2955H59.0942C63.1535 66.2955 66.4442 63.0048 66.4442 58.9455V40.5705C66.4442 36.5112 63.1535 33.2205 59.0942 33.2205H40.7191Z" fill="#1C1C1C"/>
+  </svg>
+</div>
+
+<caption>바로 잡아 바로 쓰는 <strong>Baro</strong></caption>
+
+<br/>
+
+<div>
+  <h3>Tech Stack</h3>
+</div>
+
+<br/>
+
+<div>
+  <h3>Member</h3>
+</div>
diff --git a/pages/index.tsx b/pages/index.tsx
index a1bc2191..9534896b 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -14,6 +14,8 @@ const HomePage: NextPage = () => {
       type={'primary'}
       inputProps={testInputProps}
       placeholder="메모를 끄적여보세요"
+      alertType={'error'}
+      alertMsg="에러 메시지"
     />
   );
 };
diff --git a/public/icons/error.svg b/public/icons/error.svg
new file mode 100644
index 00000000..6f41dc8b
--- /dev/null
+++ b/public/icons/error.svg
@@ -0,0 +1,4 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="10" cy="10" r="9.16667" fill="#F9594F"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.9226 7.25592C14.2481 6.93049 14.2481 6.40285 13.9226 6.07741C13.5972 5.75198 13.0696 5.75198 12.7441 6.07741L10 8.82149L7.25596 6.07741C6.93053 5.75198 6.40289 5.75198 6.07745 6.07741C5.75201 6.40285 5.75201 6.93049 6.07745 7.25592L8.82153 10L6.07745 12.7441C5.75201 13.0695 5.75201 13.5972 6.07745 13.9226C6.40289 14.248 6.93053 14.248 7.25596 13.9226L10 11.1785L12.7441 13.9226C13.0696 14.248 13.5972 14.248 13.9226 13.9226C14.2481 13.5972 14.2481 13.0695 13.9226 12.7441L11.1786 10L13.9226 7.25592Z" fill="white"/>
+</svg>
diff --git a/public/icons/warn.svg b/public/icons/warn.svg
new file mode 100644
index 00000000..8bf657c9
--- /dev/null
+++ b/public/icons/warn.svg
@@ -0,0 +1,5 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.99985 1.58102C9.57018 1.58102 9.14777 1.69176 8.77336 1.90256C8.39895 2.11335 8.08518 2.41708 7.86234 2.78445L0.801632 14.5718L0.794863 14.5833C0.576573 14.9613 0.461071 15.3899 0.459849 15.8264C0.458626 16.2629 0.571726 16.6922 0.787896 17.0714C1.00406 17.4507 1.31577 17.7667 1.692 17.9881C2.06822 18.2095 2.49586 18.3285 2.93236 18.3333L17.0582 18.3334L17.0673 18.3333C17.5038 18.3285 17.9315 18.2095 18.3077 17.9881C18.6839 17.7667 18.9956 17.4507 19.2118 17.0714C19.428 16.6922 19.5411 16.2629 19.5399 15.8264C19.5386 15.3899 19.4231 14.9613 19.2048 14.5833L19.1981 14.5718L12.1398 2.78841L12.1374 2.78445C11.9145 2.41709 11.6008 2.11335 11.2263 1.90256C10.8519 1.69176 10.4295 1.58102 9.99985 1.58102Z" fill="#FFC633"/>
+<path d="M10.8334 7.50002C10.8334 7.03978 10.4603 6.66669 10.0001 6.66669C9.53984 6.66669 9.16675 7.03978 9.16675 7.50002V10.8334C9.16675 11.2936 9.53984 11.6667 10.0001 11.6667C10.4603 11.6667 10.8334 11.2936 10.8334 10.8334V7.50002Z" fill="white"/>
+<path d="M10.0001 13.3334C9.53984 13.3334 9.16675 13.7064 9.16675 14.1667C9.16675 14.6269 9.53984 15 10.0001 15H10.0084C10.4687 15 10.8417 14.6269 10.8417 14.1667C10.8417 13.7064 10.4687 13.3334 10.0084 13.3334H10.0001Z" fill="white"/>
+</svg>
diff --git a/src/components/Input/ControlledInput.stories.tsx b/src/components/Input/ControlledInput.stories.tsx
index 1b1b7527..422c7c98 100644
--- a/src/components/Input/ControlledInput.stories.tsx
+++ b/src/components/Input/ControlledInput.stories.tsx
@@ -31,6 +31,14 @@ export const Basic: Story = {
   render: function Render() {
     const inputProps = useInput({ id: 'story' });
 
-    return <ControlledInput type={'primary'} inputProps={inputProps} />;
+    return (
+      <ControlledInput
+        type={'primary'}
+        inputProps={inputProps}
+        placeholder="메모를 끄적여보세요"
+        alertType="error"
+        alertMsg="에러 메시지"
+      />
+    );
   },
 };
diff --git a/src/components/Input/ControlledInput.tsx b/src/components/Input/ControlledInput.tsx
index eab12ccb..e4e9e4a4 100644
--- a/src/components/Input/ControlledInput.tsx
+++ b/src/components/Input/ControlledInput.tsx
@@ -1,5 +1,6 @@
+import Image from 'next/image';
 import type { HTMLAttributes } from 'react';
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import { assignInlineVars } from '@vanilla-extract/dynamic';
 
 import { MAIN_INPUT_MAX_LENGTH } from '@/src/constants/config';
@@ -8,13 +9,16 @@ import type { UseInputReturn } from '@/src/hooks/useInput';
 import * as style from './style.css';
 import { inputHeight } from './style.css';
 
-type InputType = 'primary' | 'create';
+type InputType = 'primary' | 'secondary';
+type AlertType = 'error' | 'warn';
 
 interface ControlledInputProps extends HTMLAttributes<HTMLTextAreaElement> {
   type: InputType;
   inputProps: UseInputReturn;
   placeholder?: string;
   maxLength?: number;
+  alertType?: AlertType;
+  alertMsg?: string;
 }
 
 const ControlledInput = ({
@@ -22,19 +26,26 @@ const ControlledInput = ({
   inputProps,
   placeholder,
   maxLength = MAIN_INPUT_MAX_LENGTH,
+  alertType,
+  alertMsg,
 }: ControlledInputProps) => {
   const { id, value } = inputProps;
   const inputRef = useRef<HTMLTextAreaElement | null>(null);
   const [height, setHeight] = useState(0);
 
+  const alertIconUrl = useMemo(
+    () => (type: AlertType) => {
+      if (type === 'error') {
+        return '/icons/error.svg';
+      }
+
+      return '/icons/warn.svg';
+    },
+    [],
+  );
+
   useEffect(() => {
     if (inputRef.current) {
-      console.log(
-        height,
-        inputRef.current.scrollHeight,
-        inputRef.current.style.height,
-      );
-
       setHeight(inputRef.current.scrollHeight);
     }
   }, [height, value]);
@@ -45,10 +56,25 @@ const ControlledInput = ({
         {...inputProps}
         ref={inputRef}
         style={assignInlineVars({ [inputHeight]: `${height}px` })}
-        className={style.input({ type })}
+        className={style.input({ type, error: alertType === 'error' })}
         placeholder={placeholder}
         maxLength={maxLength}
       />
+
+      {alertMsg && (
+        <div className={style.alert()}>
+          {/* TODO: Svg 공용 아이콘 제작 후 변경 @원진 */}
+          {alertType && (
+            <Image
+              src={alertIconUrl(alertType)}
+              alt="alert 메시지 타입 아이콘"
+              width={20}
+              height={20}
+            />
+          )}
+          <p className={style.alertMsg()}>{alertMsg}</p>
+        </div>
+      )}
     </label>
   );
 };
diff --git a/src/components/Input/style.css.ts b/src/components/Input/style.css.ts
index e7e72cf6..6981bb9d 100644
--- a/src/components/Input/style.css.ts
+++ b/src/components/Input/style.css.ts
@@ -1,24 +1,60 @@
 import { createVar } from '@vanilla-extract/css';
 import { recipe } from '@vanilla-extract/recipes';
 
+import { COLORS } from '@/src/styles/tokens';
+
 export const inputHeight = createVar();
 
 export const input = recipe({
   base: [
     {
-      borderRadius: '16px',
-      caretColor: 'transparent',
-      border: '2px solid #4C94FF',
+      borderRadius: '8px',
       resize: 'none',
       width: '100%',
+      minHeight: '54px',
       padding: '12px 16px',
       height: inputHeight,
+      color: COLORS['Grey/900'],
+      fontSize: '17px',
+      lineHeight: '27px',
+      '::placeholder': {
+        color: COLORS['Grey/250'],
+      },
     },
   ],
   variants: {
     type: {
-      primary: {},
-      create: {},
+      primary: { border: `2px solid ${COLORS['Blue/Gradient']}` },
+      secondary: {
+        backgroundColor: COLORS['Grey/100'],
+      },
+    },
+    error: {
+      true: {
+        border: `1.5px solid ${COLORS['Red']}`,
+      },
     },
   },
 });
+
+export const alert = recipe({
+  base: [
+    {
+      display: 'flex',
+      alignItems: 'center',
+      marginTop: '12px',
+    },
+  ],
+});
+
+export const alertMsg = recipe({
+  base: [
+    {
+      marginLeft: '6px',
+      color: COLORS['Grey/600'],
+      fontSize: '13px',
+      fontWeight: '600',
+      lineHeight: '17px',
+    },
+  ],
+});

From ca5dddc3a8bcc3ed8025e49d38beabf1f74cd35e Mon Sep 17 00:00:00 2001
From: wonjin-dev <fsdjin159@gmail.com>
Date: Thu, 4 Jan 2024 02:49:18 +0900
Subject: [PATCH 20/31] =?UTF-8?q?style:=20=EC=9D=B8=ED=92=8B=20=EC=8A=A4?=
 =?UTF-8?q?=ED=83=80=EC=9D=BC=EB=A7=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/index.tsx                          |  1 +
 public/icons/submit-active.svg           |  3 ++
 public/icons/submit.svg                  |  3 ++
 src/components/Input/ControlledInput.tsx | 48 ++++++++++++++++++------
 src/components/Input/style.css.ts        | 41 +++++++++++++++-----
 5 files changed, 75 insertions(+), 21 deletions(-)
 create mode 100644 public/icons/submit-active.svg
 create mode 100644 public/icons/submit.svg

diff --git a/pages/index.tsx b/pages/index.tsx
index 9534896b..ddce8116 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -16,6 +16,7 @@ const HomePage: NextPage = () => {
       placeholder="메모를 끄적여보세요"
       alertType={'error'}
       alertMsg="에러 메시지"
+      showPostFix
     />
   );
 };
diff --git a/public/icons/submit-active.svg b/public/icons/submit-active.svg
new file mode 100644
index 00000000..6608ead1
--- /dev/null
+++ b/public/icons/submit-active.svg
@@ -0,0 +1,3 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M44 24C44 35.0457 35.0457 44 24 44C12.9543 44 4 35.0457 4 24C4 12.9543 12.9543 4 24 4C35.0457 4 44 12.9543 44 24ZM14.9393 22.9393L22.9393 14.9393C23.5251 14.3536 24.4749 14.3536 25.0607 14.9393L33.0607 22.9393C33.6464 23.5251 33.6464 24.4749 33.0607 25.0607C32.4749 25.6464 31.5251 25.6464 30.9393 25.0607L25.5 19.6213V32C25.5 32.8284 24.8284 33.5 24 33.5C23.1716 33.5 22.5 32.8284 22.5 32V19.6213L17.0607 25.0607C16.4749 25.6464 15.5251 25.6464 14.9393 25.0607C14.3536 24.4749 14.3536 23.5251 14.9393 22.9393Z" fill="#4C94FF"/>
+</svg>
diff --git a/public/icons/submit.svg b/public/icons/submit.svg
new file mode 100644
index 00000000..d4b36f84
--- /dev/null
+++ b/public/icons/submit.svg
@@ -0,0 +1,3 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M44 24C44 35.0457 35.0457 44 24 44C12.9543 44 4 35.0457 4 24C4 12.9543 12.9543 4 24 4C35.0457 4 44 12.9543 44 24ZM14.9393 22.9393L22.9393 14.9393C23.5251 14.3536 24.4749 14.3536 25.0607 14.9393L33.0607 22.9393C33.6464 23.5251 33.6464 24.4749 33.0607 25.0607C32.4749 25.6464 31.5251 25.6464 30.9393 25.0607L25.5 19.6213V32C25.5 32.8284 24.8284 33.5 24 33.5C23.1716 33.5 22.5 32.8284 22.5 32V19.6213L17.0607 25.0607C16.4749 25.6464 15.5251 25.6464 14.9393 25.0607C14.3536 24.4749 14.3536 23.5251 14.9393 22.9393Z" fill="#D1D2D7"/>
+</svg>
diff --git a/src/components/Input/ControlledInput.tsx b/src/components/Input/ControlledInput.tsx
index e4e9e4a4..0be610b5 100644
--- a/src/components/Input/ControlledInput.tsx
+++ b/src/components/Input/ControlledInput.tsx
@@ -19,6 +19,7 @@ interface ControlledInputProps extends HTMLAttributes<HTMLTextAreaElement> {
   maxLength?: number;
   alertType?: AlertType;
   alertMsg?: string;
+  showPostFix?: boolean;
 }
 
 const ControlledInput = ({
@@ -28,6 +29,7 @@ const ControlledInput = ({
   maxLength = MAIN_INPUT_MAX_LENGTH,
   alertType,
   alertMsg,
+  showPostFix = false,
 }: ControlledInputProps) => {
   const { id, value } = inputProps;
   const inputRef = useRef<HTMLTextAreaElement | null>(null);
@@ -44,6 +46,13 @@ const ControlledInput = ({
     [],
   );
 
+  const submitButton = useMemo(() => {
+    if (value.length > 0) {
+      return '/icons/submit-active.svg';
+    }
+    return '/icons/submit.svg';
+  }, [value.length]);
+
   useEffect(() => {
     if (inputRef.current) {
       setHeight(inputRef.current.scrollHeight);
@@ -51,16 +60,33 @@ const ControlledInput = ({
   }, [height, value]);
 
   return (
-    <label htmlFor={id}>
-      <textarea
-        {...inputProps}
-        ref={inputRef}
-        style={assignInlineVars({ [inputHeight]: `${height}px` })}
-        className={style.input({ type, error: alertType === 'error' })}
-        placeholder={placeholder}
-        maxLength={maxLength}
-      />
-
+    <div>
+      <div className={style.label({ type, error: alertType === 'error' })}>
+        <label htmlFor={id}>
+          <textarea
+            {...inputProps}
+            ref={inputRef}
+            style={assignInlineVars({ [inputHeight]: `${height}px` })}
+            className={style.input()}
+            placeholder={placeholder}
+            maxLength={maxLength}
+          />
+        </label>
+        {showPostFix && (
+          <div className={style.submit()}>
+            <span>{'0 / 1,000자'}</span>
+            <button disabled={value.length < 1}>
+              {/* TODO: Svg 공용 아이콘 제작 후 변경 @원진 */}
+              <Image
+                src={submitButton}
+                alt={'제출 버튼'}
+                width={27}
+                height={27}
+              />
+            </button>
+          </div>
+        )}
+      </div>
       {alertMsg && (
         <div className={style.alert()}>
           {/* TODO: Svg 공용 아이콘 제작 후 변경 @원진 */}
@@ -75,7 +101,7 @@ const ControlledInput = ({
           <p className={style.alertMsg()}>{alertMsg}</p>
         </div>
       )}
-    </label>
+    </div>
   );
 };
 
diff --git a/src/components/Input/style.css.ts b/src/components/Input/style.css.ts
index 6981bb9d..d0b93fd8 100644
--- a/src/components/Input/style.css.ts
+++ b/src/components/Input/style.css.ts
@@ -5,21 +5,15 @@ import { COLORS } from '@/src/styles/tokens';
 
 export const inputHeight = createVar();
 
-export const input = recipe({
+export const label = recipe({
   base: [
     {
+      position: 'relative',
+      display: 'flex',
+      alignItems: 'center',
       borderRadius: '8px',
-      resize: 'none',
       width: '100%',
-      minHeight: '54px',
       padding: '12px 16px',
-      height: inputHeight,
-      color: COLORS['Grey/900'],
-      fontSize: '17px',
-      lineHeight: '27px',
-      '::placeholder': {
-        color: COLORS['Grey/250'],
-      },
     },
   ],
   variants: {
@@ -37,6 +31,23 @@ export const input = recipe({
   },
 });
 
+export const input = recipe({
+  base: [
+    {
+      width: 'auto',
+      minHeight: '54px',
+      height: inputHeight,
+      resize: 'none',
+      color: COLORS['Grey/900'],
+      fontSize: '17px',
+      lineHeight: '27px',
+      '::placeholder': {
+        color: COLORS['Grey/250'],
+      },
+    },
+  ],
+});
+
 export const alert = recipe({
   base: [
     {
@@ -58,3 +69,13 @@ export const alertMsg = recipe({
     },
   ],
 });
+
+export const submit = recipe({
+  base: [
+    {
+      display: 'flex',
+      alignItems: 'center',
+      paddingLeft: '20px',
+    },
+  ],
+});

From 7d74f9541e9beb2659d02118af3bc74e1f616e3b Mon Sep 17 00:00:00 2001
From: wonjin-dev <fsdjin159@gmail.com>
Date: Fri, 5 Jan 2024 22:06:25 +0900
Subject: [PATCH 21/31] =?UTF-8?q?style:=20=EC=8A=A4=ED=83=80=EC=9D=BC?=
 =?UTF-8?q?=EB=A7=81=20=EC=96=BC=EC=B6=94=20=EC=99=84=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Input/ControlledInput.tsx | 67 ++++++++++++++----------
 src/components/Input/style.css.ts        | 58 ++++++++++++++------
 2 files changed, 81 insertions(+), 44 deletions(-)

diff --git a/src/components/Input/ControlledInput.tsx b/src/components/Input/ControlledInput.tsx
index 0be610b5..55f61091 100644
--- a/src/components/Input/ControlledInput.tsx
+++ b/src/components/Input/ControlledInput.tsx
@@ -1,6 +1,6 @@
 import Image from 'next/image';
 import type { HTMLAttributes } from 'react';
-import { useEffect, useMemo, useRef, useState } from 'react';
+import { Fragment, useEffect, useMemo, useRef, useState } from 'react';
 import { assignInlineVars } from '@vanilla-extract/dynamic';
 
 import { MAIN_INPUT_MAX_LENGTH } from '@/src/constants/config';
@@ -60,33 +60,44 @@ const ControlledInput = ({
   }, [height, value]);
 
   return (
-    <div>
-      <div className={style.label({ type, error: alertType === 'error' })}>
-        <label htmlFor={id}>
-          <textarea
-            {...inputProps}
-            ref={inputRef}
-            style={assignInlineVars({ [inputHeight]: `${height}px` })}
-            className={style.input()}
-            placeholder={placeholder}
-            maxLength={maxLength}
-          />
-        </label>
-        {showPostFix && (
-          <div className={style.submit()}>
-            <span>{'0 / 1,000자'}</span>
-            <button disabled={value.length < 1}>
-              {/* TODO: Svg 공용 아이콘 제작 후 변경 @원진 */}
-              <Image
-                src={submitButton}
-                alt={'제출 버튼'}
-                width={27}
-                height={27}
-              />
-            </button>
-          </div>
-        )}
+    <Fragment>
+      <div className={style.conatiner({ type, error: alertType === 'error' })}>
+        <div
+          className={style.contentWrapper}
+          style={assignInlineVars({ [inputHeight]: `${height}px` })}
+        >
+          <label htmlFor={id} className={style.label}>
+            <textarea
+              {...inputProps}
+              ref={inputRef}
+              style={assignInlineVars({ [inputHeight]: `${height}px` })}
+              className={style.input()}
+              placeholder={placeholder}
+              maxLength={maxLength}
+            />
+          </label>
+
+          {showPostFix && (
+            <div className={style.submitWrapper}>
+              <div className={style.submit}>
+                <span className={style.textCount}>
+                  <span className={style.currentTextCount}>500</span> / 500자
+                </span>
+                <button disabled={value.length < 1}>
+                  {/* TODO: Svg 공용 아이콘 제작 후 변경 @원진 */}
+                  <Image
+                    src={submitButton}
+                    alt={'제출 버튼'}
+                    width={48}
+                    height={48}
+                  />
+                </button>
+              </div>
+            </div>
+          )}
+        </div>
       </div>
+
       {alertMsg && (
         <div className={style.alert()}>
           {/* TODO: Svg 공용 아이콘 제작 후 변경 @원진 */}
@@ -101,7 +112,7 @@ const ControlledInput = ({
           <p className={style.alertMsg()}>{alertMsg}</p>
         </div>
       )}
-    </div>
+    </Fragment>
   );
 };
 
diff --git a/src/components/Input/style.css.ts b/src/components/Input/style.css.ts
index d0b93fd8..137cef32 100644
--- a/src/components/Input/style.css.ts
+++ b/src/components/Input/style.css.ts
@@ -1,19 +1,18 @@
-import { createVar } from '@vanilla-extract/css';
+import { createVar, style } from '@vanilla-extract/css';
 import { recipe } from '@vanilla-extract/recipes';
 
 import { COLORS } from '@/src/styles/tokens';
 
 export const inputHeight = createVar();
 
-export const label = recipe({
+export const conatiner = recipe({
   base: [
     {
-      position: 'relative',
       display: 'flex',
-      alignItems: 'center',
-      borderRadius: '8px',
+      justifyContent: 'space-between',
+      borderRadius: '16px',
       width: '100%',
-      padding: '12px 16px',
+      padding: '22px 12px 22px 24px',
     },
   ],
   variants: {
@@ -31,11 +30,21 @@ export const label = recipe({
   },
 });
 
+export const contentWrapper = style({
+  display: 'flex',
+  alignItems: 'center',
+  width: '100%',
+  height: inputHeight,
+});
+
+export const label = style({
+  width: '100%',
+});
+
 export const input = recipe({
   base: [
     {
-      width: 'auto',
-      minHeight: '54px',
+      width: '100%',
       height: inputHeight,
       resize: 'none',
       color: COLORS['Grey/900'],
@@ -70,12 +79,29 @@ export const alertMsg = recipe({
   ],
 });
 
-export const submit = recipe({
-  base: [
-    {
-      display: 'flex',
-      alignItems: 'center',
-      paddingLeft: '20px',
-    },
-  ],
+export const submitWrapper = style({
+  display: 'flex',
+  alignItems: 'flex-end',
+  paddingLeft: '20px',
+  height: '100%',
+});
+
+export const submit = style({
+  display: 'flex',
+  alignItems: 'center',
+  gap: '16px',
+  height: '48px',
+});
+
+export const textCount = style({
+  color: COLORS['Grey/400'],
+  fontSize: '14px',
+  fontWeight: '400',
+  whiteSpace: 'nowrap',
+});
+
+export const currentTextCount = style({
+  color: COLORS['Blue/Default'],
+  fontSize: '14px',
+  fontWeight: '700',
 });

From 554abd9b187f0265e396d925666a47aed340b6bc Mon Sep 17 00:00:00 2001
From: wonjin-dev <fsdjin159@gmail.com>
Date: Fri, 5 Jan 2024 22:52:04 +0900
Subject: [PATCH 22/31] =?UTF-8?q?refactor:=20=EC=BD=94=EB=93=9C=20?=
 =?UTF-8?q?=EC=A0=95=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/index.tsx                               |  5 +-
 .../Input/ControlledInput.stories.tsx         | 44 -----------
 .../TextArea.tsx}                             | 31 ++++----
 .../Input/{ => TextArea}/style.css.ts         | 77 +++++++++----------
 4 files changed, 56 insertions(+), 101 deletions(-)
 delete mode 100644 src/components/Input/ControlledInput.stories.tsx
 rename src/components/Input/{ControlledInput.tsx => TextArea/TextArea.tsx} (77%)
 rename src/components/Input/{ => TextArea}/style.css.ts (63%)

diff --git a/pages/index.tsx b/pages/index.tsx
index ddce8116..9c40988b 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,6 +1,6 @@
 import type { NextPage } from 'next';
 
-import ControlledInput from '@/src/components/Input/ControlledInput';
+import TextArea from '@/src/components/Input/TextArea/TextArea';
 import { useInput } from '@/src/hooks/useInput';
 
 const HomePage: NextPage = () => {
@@ -10,8 +10,7 @@ const HomePage: NextPage = () => {
   });
 
   return (
-    <ControlledInput
-      type={'primary'}
+    <TextArea
       inputProps={testInputProps}
       placeholder="메모를 끄적여보세요"
       alertType={'error'}
diff --git a/src/components/Input/ControlledInput.stories.tsx b/src/components/Input/ControlledInput.stories.tsx
deleted file mode 100644
index 422c7c98..00000000
--- a/src/components/Input/ControlledInput.stories.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { useInput } from '@/src/hooks/useInput';
-
-import ControlledInput from './ControlledInput';
-
-const meta: Meta<typeof ControlledInput> = {
-  title: 'Input/ControlledInput',
-  component: ControlledInput,
-  parameters: {
-    componentSubtitle: '프로젝트 기본 Input',
-    docs: {
-      description: {
-        component: '제어 컴포넌트로 제작',
-      },
-    },
-  },
-  decorators: [
-    (Story) => (
-      <div style={{ height: '500px' }}>
-        <Story />
-      </div>
-    ),
-  ],
-};
-
-export default meta;
-type Story = StoryObj<typeof ControlledInput>;
-
-export const Basic: Story = {
-  render: function Render() {
-    const inputProps = useInput({ id: 'story' });
-
-    return (
-      <ControlledInput
-        type={'primary'}
-        inputProps={inputProps}
-        placeholder="메모를 끄적여보세요"
-        alertType="error"
-        alertMsg="에러 메시지"
-      />
-    );
-  },
-};
diff --git a/src/components/Input/ControlledInput.tsx b/src/components/Input/TextArea/TextArea.tsx
similarity index 77%
rename from src/components/Input/ControlledInput.tsx
rename to src/components/Input/TextArea/TextArea.tsx
index 55f61091..0cb2f0c4 100644
--- a/src/components/Input/ControlledInput.tsx
+++ b/src/components/Input/TextArea/TextArea.tsx
@@ -9,11 +9,9 @@ import type { UseInputReturn } from '@/src/hooks/useInput';
 import * as style from './style.css';
 import { inputHeight } from './style.css';
 
-type InputType = 'primary' | 'secondary';
 type AlertType = 'error' | 'warn';
 
-interface ControlledInputProps extends HTMLAttributes<HTMLTextAreaElement> {
-  type: InputType;
+interface TextAreaProps extends HTMLAttributes<HTMLTextAreaElement> {
   inputProps: UseInputReturn;
   placeholder?: string;
   maxLength?: number;
@@ -22,18 +20,17 @@ interface ControlledInputProps extends HTMLAttributes<HTMLTextAreaElement> {
   showPostFix?: boolean;
 }
 
-const ControlledInput = ({
-  type,
+const TextArea = ({
   inputProps,
   placeholder,
   maxLength = MAIN_INPUT_MAX_LENGTH,
   alertType,
   alertMsg,
   showPostFix = false,
-}: ControlledInputProps) => {
+}: TextAreaProps) => {
   const { id, value } = inputProps;
   const inputRef = useRef<HTMLTextAreaElement | null>(null);
-  const [height, setHeight] = useState(0);
+  const [height, setHeight] = useState(27);
 
   const alertIconUrl = useMemo(
     () => (type: AlertType) => {
@@ -57,11 +54,16 @@ const ControlledInput = ({
     if (inputRef.current) {
       setHeight(inputRef.current.scrollHeight);
     }
+
+    // TODO: scroll height로 높이를 줄이기 때문에 이미 스크롤된 값에 대해 인지하는 방법을 확인해야 함. @원진
+    if (value.length === 0) {
+      setHeight(27);
+    }
   }, [height, value]);
 
   return (
     <Fragment>
-      <div className={style.conatiner({ type, error: alertType === 'error' })}>
+      <div className={style.conatiner({ error: alertType === 'error' })}>
         <div
           className={style.contentWrapper}
           style={assignInlineVars({ [inputHeight]: `${height}px` })}
@@ -71,17 +73,18 @@ const ControlledInput = ({
               {...inputProps}
               ref={inputRef}
               style={assignInlineVars({ [inputHeight]: `${height}px` })}
-              className={style.input()}
+              className={style.input}
               placeholder={placeholder}
               maxLength={maxLength}
             />
           </label>
 
           {showPostFix && (
-            <div className={style.submitWrapper}>
+            <div className={style.submitWrapper({ hasValue: height > 27 })}>
               <div className={style.submit}>
                 <span className={style.textCount}>
-                  <span className={style.currentTextCount}>500</span> / 500자
+                  <span className={style.currentTextCount}>{value.length}</span>
+                  &nbsp;/&nbsp;500자
                 </span>
                 <button disabled={value.length < 1}>
                   {/* TODO: Svg 공용 아이콘 제작 후 변경 @원진 */}
@@ -99,7 +102,7 @@ const ControlledInput = ({
       </div>
 
       {alertMsg && (
-        <div className={style.alert()}>
+        <div className={style.alert}>
           {/* TODO: Svg 공용 아이콘 제작 후 변경 @원진 */}
           {alertType && (
             <Image
@@ -109,11 +112,11 @@ const ControlledInput = ({
               height={20}
             />
           )}
-          <p className={style.alertMsg()}>{alertMsg}</p>
+          <p className={style.alertMsg}>{alertMsg}</p>
         </div>
       )}
     </Fragment>
   );
 };
 
-export default ControlledInput;
+export default TextArea;
diff --git a/src/components/Input/style.css.ts b/src/components/Input/TextArea/style.css.ts
similarity index 63%
rename from src/components/Input/style.css.ts
rename to src/components/Input/TextArea/style.css.ts
index 137cef32..055dcde4 100644
--- a/src/components/Input/style.css.ts
+++ b/src/components/Input/TextArea/style.css.ts
@@ -3,8 +3,6 @@ import { recipe } from '@vanilla-extract/recipes';
 
 import { COLORS } from '@/src/styles/tokens';
 
-export const inputHeight = createVar();
-
 export const conatiner = recipe({
   base: [
     {
@@ -18,9 +16,6 @@ export const conatiner = recipe({
   variants: {
     type: {
       primary: { border: `2px solid ${COLORS['Blue/Gradient']}` },
-      secondary: {
-        backgroundColor: COLORS['Grey/100'],
-      },
     },
     error: {
       true: {
@@ -30,60 +25,48 @@ export const conatiner = recipe({
   },
 });
 
+export const inputHeight = createVar();
 export const contentWrapper = style({
   display: 'flex',
   alignItems: 'center',
   width: '100%',
   height: inputHeight,
+  maxHeight: '260px',
 });
 
 export const label = style({
   width: '100%',
 });
 
-export const input = recipe({
-  base: [
-    {
-      width: '100%',
-      height: inputHeight,
-      resize: 'none',
-      color: COLORS['Grey/900'],
-      fontSize: '17px',
-      lineHeight: '27px',
-      '::placeholder': {
-        color: COLORS['Grey/250'],
-      },
-    },
-  ],
+export const input = style({
+  padding: '0',
+  width: '100%',
+  height: inputHeight,
+  maxHeight: '216px',
+  resize: 'none',
+  color: COLORS['Grey/900'],
+  fontSize: '17px',
+  lineHeight: '27px',
+  '::placeholder': {
+    color: COLORS['Grey/250'],
+  },
 });
 
-export const alert = recipe({
+export const submitWrapper = recipe({
   base: [
     {
       display: 'flex',
-      alignItems: 'center',
-      marginTop: '12px',
+      alignItems: 'flex-end',
+      paddingLeft: '20px',
     },
   ],
-});
-
-export const alertMsg = recipe({
-  base: [
-    {
-      marginLeft: '6px',
-      color: COLORS['Grey/600'],
-      fontSize: '13px',
-      fontWeight: '600',
-      lineHeight: '17px',
+  variants: {
+    hasValue: {
+      true: {
+        height: '100%',
+      },
     },
-  ],
-});
-
-export const submitWrapper = style({
-  display: 'flex',
-  alignItems: 'flex-end',
-  paddingLeft: '20px',
-  height: '100%',
+  },
 });
 
 export const submit = style({
@@ -105,3 +88,17 @@ export const currentTextCount = style({
   fontSize: '14px',
   fontWeight: '700',
 });
+
+export const alert = style({
+  display: 'flex',
+  alignItems: 'center',
+  marginTop: '12px',
+});
+
+export const alertMsg = style({
+  marginLeft: '6px',
+  color: COLORS['Grey/600'],
+  fontSize: '13px',
+  fontWeight: '600',
+  lineHeight: '17px',
+});

From 1fb72fa54aeee1eae102c6036fe894abb80813c5 Mon Sep 17 00:00:00 2001
From: wonjin-dev <fsdjin159@gmail.com>
Date: Fri, 5 Jan 2024 22:55:37 +0900
Subject: [PATCH 23/31] =?UTF-8?q?refactor:=20readme=20=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md | 23 -----------------------
 1 file changed, 23 deletions(-)

diff --git a/README.md b/README.md
index 7c96d05e..b86a6523 100644
--- a/README.md
+++ b/README.md
@@ -1,24 +1 @@
 # BARO
-
-<div>
-  <svg width="67" height="67" viewBox="0 0 67 72" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M0.292969 7.49551C0.292969 3.43622 3.58368 0.145508 7.64297 0.145508H26.018C30.0773 0.145508 33.368 3.43622 33.368 7.49551V25.8705C33.368 29.9298 30.0773 33.2205 26.018 33.2205H7.64297C3.58368 33.2205 0.292969 29.9298 0.292969 25.8705V7.49551Z" fill="#4C94FF"/>
-    <path d="M33.3691 7.49551C33.3691 3.43622 36.6599 0.145508 40.7191 0.145508H59.0942C63.1535 0.145508 66.4442 3.43622 66.4442 7.49551V25.8705C66.4442 29.9298 63.1535 33.2205 59.0942 33.2205H40.7191C36.6598 33.2205 33.3691 29.9298 33.3691 25.8705V7.49551Z" fill="#FFC633"/>
-    <path d="M0.292969 40.5705C0.292969 36.5112 3.58368 33.2205 7.64297 33.2205H26.018C30.0773 33.2205 33.368 36.5112 33.368 40.5705V58.9455C33.368 63.0048 30.0773 66.2955 26.018 66.2955H7.64297C3.58368 66.2955 0.292969 63.0048 0.292969 58.9455V40.5705Z" fill="#33D486"/>
-    <path d="M40.7191 33.2205C36.6599 33.2205 33.3691 36.5112 33.3691 40.5705V70.7729C33.3691 71.7454 34.448 72.3302 35.2628 71.7993L43.7104 66.2955H59.0942C63.1535 66.2955 66.4442 63.0048 66.4442 58.9455V40.5705C66.4442 36.5112 63.1535 33.2205 59.0942 33.2205H40.7191Z" fill="#1C1C1C"/>
-  </svg>
-</div>
-
-<caption>바로 잡아 바로 쓰는 <strong>Baro</strong></caption>
-
-<br/>
-
-<div>
-  <h3>Tech Stack</h3>
-</div>
-
-<br/>
-
-<div>
-  <h3>Member</h3>
-</div>

From 875bafde49810772fb2000aaf89b7c8cac9dfc2d Mon Sep 17 00:00:00 2001
From: wonjin-dev <fsdjin159@gmail.com>
Date: Fri, 5 Jan 2024 22:59:35 +0900
Subject: [PATCH 24/31] =?UTF-8?q?refactor:=20pr=EC=97=90=20=EC=97=B0?=
 =?UTF-8?q?=EA=B4=80=20=EC=97=86=EB=8A=94=20=EB=B3=80=EA=B2=BD=20=EB=82=B4?=
 =?UTF-8?q?=EC=97=AD=20=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

diff --git a/src/components/Toast/Toast.stories.tsx b/src/components/Toast/Toast.stories.tsx
index 16c14735..908e589f 100644
--- a/src/components/Toast/Toast.stories.tsx
+++ b/src/components/Toast/Toast.stories.tsx
@@ -7,7 +7,7 @@ import { useToast } from '@/src/stores/toastStore';
 import Toast from './Toast';
 
 const meta: Meta<typeof Toast> = {
-  title: 'Modals/Toast',
+  title: 'Toast',
   component: Toast,
   decorators: [
     (Story) => (

From 2e9e503d34e1170c88ed7f609c323c27bde9fcc2 Mon Sep 17 00:00:00 2001
From: wonjin-dev <fsdjin159@gmail.com>
Date: Sat, 6 Jan 2024 16:19:11 +0900
Subject: [PATCH 25/31] =?UTF-8?q?fix:=20input=20height=20=EB=A1=9C?=
 =?UTF-8?q?=EC=A7=81=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Input/TextArea/TextArea.tsx | 71 ++++++++++++++++------
 src/components/Input/TextArea/style.css.ts |  5 +-
 2 files changed, 56 insertions(+), 20 deletions(-)

diff --git a/src/components/Input/TextArea/TextArea.tsx b/src/components/Input/TextArea/TextArea.tsx
index 0cb2f0c4..a323ce71 100644
--- a/src/components/Input/TextArea/TextArea.tsx
+++ b/src/components/Input/TextArea/TextArea.tsx
@@ -1,6 +1,6 @@
 import Image from 'next/image';
 import type { HTMLAttributes } from 'react';
-import { Fragment, useEffect, useMemo, useRef, useState } from 'react';
+import { Fragment, useMemo, useRef, useState } from 'react';
 import { assignInlineVars } from '@vanilla-extract/dynamic';
 
 import { MAIN_INPUT_MAX_LENGTH } from '@/src/constants/config';
@@ -30,7 +30,46 @@ const TextArea = ({
 }: TextAreaProps) => {
   const { id, value } = inputProps;
   const inputRef = useRef<HTMLTextAreaElement | null>(null);
-  const [height, setHeight] = useState(27);
+  const [textareaHeight, setTextareaHeight] = useState({
+    row: 1,
+    lineBreak: {},
+  });
+
+  const resizeTextarea = (e) => {
+    const { scrollHeight, clientHeight, value } = e.target;
+
+    if (value.length === 0) {
+      setTextareaHeight((prev) => ({
+        row: 1,
+        lineBreak: { ...prev.lineBreak, [e.target.value.length]: false },
+      }));
+    }
+
+    // 줄바꿈이 일어날 때
+    if (scrollHeight > clientHeight) {
+      setTextareaHeight((prev) => ({
+        row: prev.row + 1,
+        lineBreak: { ...prev.lineBreak, [value.length - 1]: true },
+      }));
+    }
+
+    // 텍스트 지워서 줄바꿈 지점에 도달했을 때
+    if (textareaHeight.lineBreak[value.length]) {
+      setTextareaHeight((prev) => ({
+        row: prev.row - 1,
+        lineBreak: { ...prev.lineBreak, [value.length]: false },
+      }));
+    }
+  };
+
+  const onKeyEnter = (e) => {
+    if (e.code === 'Enter') {
+      setTextareaHeight((prev) => ({
+        row: prev.row + 1,
+        lineBreak: { ...prev.lineBreak, [e.target.value.length]: true },
+      }));
+    }
+  };
 
   const alertIconUrl = useMemo(
     () => (type: AlertType) => {
@@ -50,44 +89,41 @@ const TextArea = ({
     return '/icons/submit.svg';
   }, [value.length]);
 
-  useEffect(() => {
-    if (inputRef.current) {
-      setHeight(inputRef.current.scrollHeight);
-    }
-
-    // TODO: scroll height로 높이를 줄이기 때문에 이미 스크롤된 값에 대해 인지하는 방법을 확인해야 함. @원진
-    if (value.length === 0) {
-      setHeight(27);
-    }
-  }, [height, value]);
-
   return (
     <Fragment>
       <div className={style.conatiner({ error: alertType === 'error' })}>
         <div
           className={style.contentWrapper}
-          style={assignInlineVars({ [inputHeight]: `${height}px` })}
+          style={assignInlineVars({
+            [inputHeight]: `${textareaHeight.row * 27}px`,
+          })}
         >
           <label htmlFor={id} className={style.label}>
             <textarea
               {...inputProps}
               ref={inputRef}
-              style={assignInlineVars({ [inputHeight]: `${height}px` })}
+              autoComplete="off"
+              rows={textareaHeight.row}
               className={style.input}
               placeholder={placeholder}
               maxLength={maxLength}
+              onInput={resizeTextarea}
+              onKeyDown={onKeyEnter}
             />
           </label>
 
           {showPostFix && (
-            <div className={style.submitWrapper({ hasValue: height > 27 })}>
+            <div
+              className={style.submitWrapper({
+                multirow: textareaHeight.row > 1,
+              })}
+            >
               <div className={style.submit}>
                 <span className={style.textCount}>
                   <span className={style.currentTextCount}>{value.length}</span>
                   &nbsp;/&nbsp;500자
                 </span>
                 <button disabled={value.length < 1}>
-                  {/* TODO: Svg 공용 아이콘 제작 후 변경 @원진 */}
                   <Image
                     src={submitButton}
                     alt={'제출 버튼'}
@@ -103,7 +139,6 @@ const TextArea = ({
 
       {alertMsg && (
         <div className={style.alert}>
-          {/* TODO: Svg 공용 아이콘 제작 후 변경 @원진 */}
           {alertType && (
             <Image
               src={alertIconUrl(alertType)}
diff --git a/src/components/Input/TextArea/style.css.ts b/src/components/Input/TextArea/style.css.ts
index 055dcde4..a530a80c 100644
--- a/src/components/Input/TextArea/style.css.ts
+++ b/src/components/Input/TextArea/style.css.ts
@@ -31,6 +31,7 @@ export const contentWrapper = style({
   alignItems: 'center',
   width: '100%',
   height: inputHeight,
+  minHeight: '27px',
   maxHeight: '260px',
 });
 
@@ -41,12 +42,12 @@ export const label = style({
 export const input = style({
   padding: '0',
   width: '100%',
-  height: inputHeight,
   maxHeight: '216px',
   resize: 'none',
   color: COLORS['Grey/900'],
   fontSize: '17px',
   lineHeight: '27px',
+  overflowWrap: 'break-word',
   '::placeholder': {
     color: COLORS['Grey/250'],
   },
@@ -61,7 +62,7 @@ export const submitWrapper = recipe({
     },
   ],
   variants: {
-    hasValue: {
+    multirow: {
       true: {
         height: '100%',
       },

From 0f8efd3816e6aecbd7d155f56b77adf293ee9c6b Mon Sep 17 00:00:00 2001
From: wonjin-dev <fsdjin159@gmail.com>
Date: Sat, 6 Jan 2024 16:28:45 +0900
Subject: [PATCH 26/31] =?UTF-8?q?refactor:=20=EB=84=A4=EC=9D=B4=EB=B0=8D?=
 =?UTF-8?q?=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/index.tsx                               |  10 +-
 src/components/Input/TextArea/TextArea.tsx    | 157 ------------------
 .../Input/WriteInput/WriteInput.stories.tsx   |  17 ++
 src/components/Input/WriteInput/index.tsx     | 122 ++++++++++++++
 .../{TextArea => WriteInput}/style.css.ts     |  27 +--
 5 files changed, 148 insertions(+), 185 deletions(-)
 delete mode 100644 src/components/Input/TextArea/TextArea.tsx
 create mode 100644 src/components/Input/WriteInput/WriteInput.stories.tsx
 create mode 100644 src/components/Input/WriteInput/index.tsx
 rename src/components/Input/{TextArea => WriteInput}/style.css.ts (79%)

diff --git a/pages/index.tsx b/pages/index.tsx
index 9c40988b..0271c9a6 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,6 +1,6 @@
 import type { NextPage } from 'next';
 
-import TextArea from '@/src/components/Input/TextArea/TextArea';
+import WriteInput from '@/src/components/Input/WriteInput';
 import { useInput } from '@/src/hooks/useInput';
 
 const HomePage: NextPage = () => {
@@ -10,13 +10,7 @@ const HomePage: NextPage = () => {
   });
 
   return (
-    <TextArea
-      inputProps={testInputProps}
-      placeholder="메모를 끄적여보세요"
-      alertType={'error'}
-      alertMsg="에러 메시지"
-      showPostFix
-    />
+    <WriteInput inputProps={testInputProps} placeholder="메모를 끄적여보세요" />
   );
 };
 
diff --git a/src/components/Input/TextArea/TextArea.tsx b/src/components/Input/TextArea/TextArea.tsx
deleted file mode 100644
index a323ce71..00000000
--- a/src/components/Input/TextArea/TextArea.tsx
+++ /dev/null
@@ -1,157 +0,0 @@
-import Image from 'next/image';
-import type { HTMLAttributes } from 'react';
-import { Fragment, useMemo, useRef, useState } from 'react';
-import { assignInlineVars } from '@vanilla-extract/dynamic';
-
-import { MAIN_INPUT_MAX_LENGTH } from '@/src/constants/config';
-import type { UseInputReturn } from '@/src/hooks/useInput';
-
-import * as style from './style.css';
-import { inputHeight } from './style.css';
-
-type AlertType = 'error' | 'warn';
-
-interface TextAreaProps extends HTMLAttributes<HTMLTextAreaElement> {
-  inputProps: UseInputReturn;
-  placeholder?: string;
-  maxLength?: number;
-  alertType?: AlertType;
-  alertMsg?: string;
-  showPostFix?: boolean;
-}
-
-const TextArea = ({
-  inputProps,
-  placeholder,
-  maxLength = MAIN_INPUT_MAX_LENGTH,
-  alertType,
-  alertMsg,
-  showPostFix = false,
-}: TextAreaProps) => {
-  const { id, value } = inputProps;
-  const inputRef = useRef<HTMLTextAreaElement | null>(null);
-  const [textareaHeight, setTextareaHeight] = useState({
-    row: 1,
-    lineBreak: {},
-  });
-
-  const resizeTextarea = (e) => {
-    const { scrollHeight, clientHeight, value } = e.target;
-
-    if (value.length === 0) {
-      setTextareaHeight((prev) => ({
-        row: 1,
-        lineBreak: { ...prev.lineBreak, [e.target.value.length]: false },
-      }));
-    }
-
-    // 줄바꿈이 일어날 때
-    if (scrollHeight > clientHeight) {
-      setTextareaHeight((prev) => ({
-        row: prev.row + 1,
-        lineBreak: { ...prev.lineBreak, [value.length - 1]: true },
-      }));
-    }
-
-    // 텍스트 지워서 줄바꿈 지점에 도달했을 때
-    if (textareaHeight.lineBreak[value.length]) {
-      setTextareaHeight((prev) => ({
-        row: prev.row - 1,
-        lineBreak: { ...prev.lineBreak, [value.length]: false },
-      }));
-    }
-  };
-
-  const onKeyEnter = (e) => {
-    if (e.code === 'Enter') {
-      setTextareaHeight((prev) => ({
-        row: prev.row + 1,
-        lineBreak: { ...prev.lineBreak, [e.target.value.length]: true },
-      }));
-    }
-  };
-
-  const alertIconUrl = useMemo(
-    () => (type: AlertType) => {
-      if (type === 'error') {
-        return '/icons/error.svg';
-      }
-
-      return '/icons/warn.svg';
-    },
-    [],
-  );
-
-  const submitButton = useMemo(() => {
-    if (value.length > 0) {
-      return '/icons/submit-active.svg';
-    }
-    return '/icons/submit.svg';
-  }, [value.length]);
-
-  return (
-    <Fragment>
-      <div className={style.conatiner({ error: alertType === 'error' })}>
-        <div
-          className={style.contentWrapper}
-          style={assignInlineVars({
-            [inputHeight]: `${textareaHeight.row * 27}px`,
-          })}
-        >
-          <label htmlFor={id} className={style.label}>
-            <textarea
-              {...inputProps}
-              ref={inputRef}
-              autoComplete="off"
-              rows={textareaHeight.row}
-              className={style.input}
-              placeholder={placeholder}
-              maxLength={maxLength}
-              onInput={resizeTextarea}
-              onKeyDown={onKeyEnter}
-            />
-          </label>
-
-          {showPostFix && (
-            <div
-              className={style.submitWrapper({
-                multirow: textareaHeight.row > 1,
-              })}
-            >
-              <div className={style.submit}>
-                <span className={style.textCount}>
-                  <span className={style.currentTextCount}>{value.length}</span>
-                  &nbsp;/&nbsp;500자
-                </span>
-                <button disabled={value.length < 1}>
-                  <Image
-                    src={submitButton}
-                    alt={'제출 버튼'}
-                    width={48}
-                    height={48}
-                  />
-                </button>
-              </div>
-            </div>
-          )}
-        </div>
-      </div>
-
-      {alertMsg && (
-        <div className={style.alert}>
-          {alertType && (
-            <Image
-              src={alertIconUrl(alertType)}
-              alt="alert 메시지 타입 아이콘"
-              width={20}
-              height={20}
-            />
-          )}
-          <p className={style.alertMsg}>{alertMsg}</p>
-        </div>
-      )}
-    </Fragment>
-  );
-};
-
-export default TextArea;
diff --git a/src/components/Input/WriteInput/WriteInput.stories.tsx b/src/components/Input/WriteInput/WriteInput.stories.tsx
new file mode 100644
index 00000000..5e0383a6
--- /dev/null
+++ b/src/components/Input/WriteInput/WriteInput.stories.tsx
@@ -0,0 +1,17 @@
+import type { Meta } from '@storybook/react';
+
+import WriteInput from '.';
+
+const meta: Meta<typeof WriteInput> = {
+  title: 'WriteInput',
+  component: WriteInput,
+  decorators: [
+    (Story) => (
+      <div style={{ height: '500px' }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
diff --git a/src/components/Input/WriteInput/index.tsx b/src/components/Input/WriteInput/index.tsx
new file mode 100644
index 00000000..38d1db78
--- /dev/null
+++ b/src/components/Input/WriteInput/index.tsx
@@ -0,0 +1,122 @@
+import Image from 'next/image';
+import type { HTMLAttributes } from 'react';
+import { useMemo, useRef, useState } from 'react';
+import { assignInlineVars } from '@vanilla-extract/dynamic';
+
+import { MAIN_INPUT_MAX_LENGTH } from '@/src/constants/config';
+import type { UseInputReturn } from '@/src/hooks/useInput';
+
+import * as style from './style.css';
+import { inputHeight } from './style.css';
+
+interface WriteInputProps extends HTMLAttributes<HTMLTextAreaElement> {
+  inputProps: UseInputReturn;
+  placeholder?: string;
+  maxLength?: number;
+}
+
+const WriteInput = ({
+  inputProps,
+  placeholder,
+  maxLength = MAIN_INPUT_MAX_LENGTH,
+}: WriteInputProps) => {
+  const { id, value } = inputProps;
+  const inputRef = useRef<HTMLTextAreaElement | null>(null);
+  const [textareaHeight, setTextareaHeight] = useState({
+    row: 1,
+    lineBreak: {},
+  });
+
+  const handleResize = (e) => {
+    const { scrollHeight, clientHeight, value } = e.target;
+
+    if (value.length === 0) {
+      setTextareaHeight((prev) => ({
+        row: 1,
+        lineBreak: { ...prev.lineBreak, [e.target.value.length]: false },
+      }));
+    }
+
+    // 줄바꿈이 일어날 때
+    if (scrollHeight > clientHeight) {
+      setTextareaHeight((prev) => ({
+        row: prev.row + 1,
+        lineBreak: { ...prev.lineBreak, [value.length - 1]: true },
+      }));
+    }
+
+    // 텍스트 지워서 줄바꿈 지점에 도달했을 때
+    if (textareaHeight.lineBreak[value.length]) {
+      setTextareaHeight((prev) => ({
+        row: prev.row - 1,
+        lineBreak: { ...prev.lineBreak, [value.length]: false },
+      }));
+    }
+  };
+
+  const onKeyEnter = (e) => {
+    if (e.code === 'Enter') {
+      setTextareaHeight((prev) => ({
+        row: prev.row + 1,
+        lineBreak: { ...prev.lineBreak, [e.target.value.length]: true },
+      }));
+    }
+  };
+
+  const submitButton = useMemo(() => {
+    if (value.length > 0) {
+      return '/icons/submit-active.svg';
+    }
+    return '/icons/submit.svg';
+  }, [value.length]);
+
+  return (
+    <div className={style.conatiner}>
+      <div
+        className={style.contentWrapper}
+        style={assignInlineVars({
+          [inputHeight]: `${textareaHeight.row * 27}px`,
+        })}
+      >
+        <label htmlFor={id} className={style.label}>
+          <textarea
+            {...inputProps}
+            ref={inputRef}
+            autoComplete="off"
+            rows={textareaHeight.row}
+            className={style.input}
+            placeholder={placeholder}
+            maxLength={maxLength}
+            onInput={handleResize}
+            onKeyDown={onKeyEnter}
+          />
+        </label>
+
+        <div
+          className={style.submitWrapper({
+            multirow: textareaHeight.row > 1,
+          })}
+        >
+          <div className={style.submit}>
+            {value.length > 0 && (
+              <span className={style.textCount}>
+                <span className={style.currentTextCount}>{value.length}</span>
+                &nbsp;/&nbsp;500자
+              </span>
+            )}
+            <button disabled={value.length < 1}>
+              <Image
+                src={submitButton}
+                alt={'제출 버튼'}
+                width={48}
+                height={48}
+              />
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default WriteInput;
diff --git a/src/components/Input/TextArea/style.css.ts b/src/components/Input/WriteInput/style.css.ts
similarity index 79%
rename from src/components/Input/TextArea/style.css.ts
rename to src/components/Input/WriteInput/style.css.ts
index a530a80c..975b6392 100644
--- a/src/components/Input/TextArea/style.css.ts
+++ b/src/components/Input/WriteInput/style.css.ts
@@ -3,26 +3,13 @@ import { recipe } from '@vanilla-extract/recipes';
 
 import { COLORS } from '@/src/styles/tokens';
 
-export const conatiner = recipe({
-  base: [
-    {
-      display: 'flex',
-      justifyContent: 'space-between',
-      borderRadius: '16px',
-      width: '100%',
-      padding: '22px 12px 22px 24px',
-    },
-  ],
-  variants: {
-    type: {
-      primary: { border: `2px solid ${COLORS['Blue/Gradient']}` },
-    },
-    error: {
-      true: {
-        border: `1.5px solid ${COLORS['Red']}`,
-      },
-    },
-  },
+export const conatiner = style({
+  display: 'flex',
+  justifyContent: 'space-between',
+  borderRadius: '16px',
+  width: '100%',
+  padding: '22px 12px 22px 24px',
+  border: `2px solid ${COLORS['Blue/Gradient']}`,
 });
 
 export const inputHeight = createVar();

From a9939e129d55328de560ccce7dffe7393332289c Mon Sep 17 00:00:00 2001
From: wonjin-dev <fsdjin159@gmail.com>
Date: Sat, 6 Jan 2024 16:54:12 +0900
Subject: [PATCH 27/31] =?UTF-8?q?refactor:=20svg=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/icons/error.svg                    |  4 ----
 public/icons/submit-active.svg            |  3 ---
 public/icons/warn.svg                     |  5 -----
 {public => src/assets}/icons/submit.svg   |  0
 src/components/Input/WriteInput/index.tsx | 18 +++++++-----------
 src/components/SvgIcon.tsx                | 18 ++++++------------
 src/constants/icon.ts                     | 10 +++++-----
 7 files changed, 18 insertions(+), 40 deletions(-)
 delete mode 100644 public/icons/error.svg
 delete mode 100644 public/icons/submit-active.svg
 delete mode 100644 public/icons/warn.svg
 rename {public => src/assets}/icons/submit.svg (100%)

diff --git a/public/icons/error.svg b/public/icons/error.svg
deleted file mode 100644
index 6f41dc8b..00000000
--- a/public/icons/error.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<circle cx="10" cy="10" r="9.16667" fill="#F9594F"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M13.9226 7.25592C14.2481 6.93049 14.2481 6.40285 13.9226 6.07741C13.5972 5.75198 13.0696 5.75198 12.7441 6.07741L10 8.82149L7.25596 6.07741C6.93053 5.75198 6.40289 5.75198 6.07745 6.07741C5.75201 6.40285 5.75201 6.93049 6.07745 7.25592L8.82153 10L6.07745 12.7441C5.75201 13.0695 5.75201 13.5972 6.07745 13.9226C6.40289 14.248 6.93053 14.248 7.25596 13.9226L10 11.1785L12.7441 13.9226C13.0696 14.248 13.5972 14.248 13.9226 13.9226C14.2481 13.5972 14.2481 13.0695 13.9226 12.7441L11.1786 10L13.9226 7.25592Z" fill="white"/>
-</svg>
diff --git a/public/icons/submit-active.svg b/public/icons/submit-active.svg
deleted file mode 100644
index 6608ead1..00000000
--- a/public/icons/submit-active.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M44 24C44 35.0457 35.0457 44 24 44C12.9543 44 4 35.0457 4 24C4 12.9543 12.9543 4 24 4C35.0457 4 44 12.9543 44 24ZM14.9393 22.9393L22.9393 14.9393C23.5251 14.3536 24.4749 14.3536 25.0607 14.9393L33.0607 22.9393C33.6464 23.5251 33.6464 24.4749 33.0607 25.0607C32.4749 25.6464 31.5251 25.6464 30.9393 25.0607L25.5 19.6213V32C25.5 32.8284 24.8284 33.5 24 33.5C23.1716 33.5 22.5 32.8284 22.5 32V19.6213L17.0607 25.0607C16.4749 25.6464 15.5251 25.6464 14.9393 25.0607C14.3536 24.4749 14.3536 23.5251 14.9393 22.9393Z" fill="#4C94FF"/>
-</svg>
diff --git a/public/icons/warn.svg b/public/icons/warn.svg
deleted file mode 100644
index 8bf657c9..00000000
--- a/public/icons/warn.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M9.99985 1.58102C9.57018 1.58102 9.14777 1.69176 8.77336 1.90256C8.39895 2.11335 8.08518 2.41708 7.86234 2.78445L0.801632 14.5718L0.794863 14.5833C0.576573 14.9613 0.461071 15.3899 0.459849 15.8264C0.458626 16.2629 0.571726 16.6922 0.787896 17.0714C1.00406 17.4507 1.31577 17.7667 1.692 17.9881C2.06822 18.2095 2.49586 18.3285 2.93236 18.3333L17.0582 18.3334L17.0673 18.3333C17.5038 18.3285 17.9315 18.2095 18.3077 17.9881C18.6839 17.7667 18.9956 17.4507 19.2118 17.0714C19.428 16.6922 19.5411 16.2629 19.5399 15.8264C19.5386 15.3899 19.4231 14.9613 19.2048 14.5833L19.1981 14.5718L12.1398 2.78841L12.1374 2.78445C11.9145 2.41709 11.6008 2.11335 11.2263 1.90256C10.8519 1.69176 10.4295 1.58102 9.99985 1.58102Z" fill="#FFC633"/>
-<path d="M10.8334 7.50002C10.8334 7.03978 10.4603 6.66669 10.0001 6.66669C9.53984 6.66669 9.16675 7.03978 9.16675 7.50002V10.8334C9.16675 11.2936 9.53984 11.6667 10.0001 11.6667C10.4603 11.6667 10.8334 11.2936 10.8334 10.8334V7.50002Z" fill="white"/>
-<path d="M10.0001 13.3334C9.53984 13.3334 9.16675 13.7064 9.16675 14.1667C9.16675 14.6269 9.53984 15 10.0001 15H10.0084C10.4687 15 10.8417 14.6269 10.8417 14.1667C10.8417 13.7064 10.4687 13.3334 10.0084 13.3334H10.0001Z" fill="white"/>
-</svg>
diff --git a/public/icons/submit.svg b/src/assets/icons/submit.svg
similarity index 100%
rename from public/icons/submit.svg
rename to src/assets/icons/submit.svg
diff --git a/src/components/Input/WriteInput/index.tsx b/src/components/Input/WriteInput/index.tsx
index 38d1db78..f8473c44 100644
--- a/src/components/Input/WriteInput/index.tsx
+++ b/src/components/Input/WriteInput/index.tsx
@@ -1,11 +1,12 @@
-import Image from 'next/image';
 import type { HTMLAttributes } from 'react';
 import { useMemo, useRef, useState } from 'react';
 import { assignInlineVars } from '@vanilla-extract/dynamic';
 
 import { MAIN_INPUT_MAX_LENGTH } from '@/src/constants/config';
 import type { UseInputReturn } from '@/src/hooks/useInput';
+import { COLORS } from '@/src/styles/tokens';
 
+import Icon from '../../SvgIcon';
 import * as style from './style.css';
 import { inputHeight } from './style.css';
 
@@ -63,12 +64,7 @@ const WriteInput = ({
     }
   };
 
-  const submitButton = useMemo(() => {
-    if (value.length > 0) {
-      return '/icons/submit-active.svg';
-    }
-    return '/icons/submit.svg';
-  }, [value.length]);
+  const isValid = useMemo(() => value.length > 0, [value.length]);
 
   return (
     <div className={style.conatiner}>
@@ -104,12 +100,12 @@ const WriteInput = ({
                 &nbsp;/&nbsp;500자
               </span>
             )}
-            <button disabled={value.length < 1}>
-              <Image
-                src={submitButton}
-                alt={'제출 버튼'}
+            <button disabled={!isValid}>
+              <Icon
+                icon={'submit'}
                 width={48}
                 height={48}
+                fill={isValid ? COLORS['Blue/Default'] : undefined}
               />
             </button>
           </div>
diff --git a/src/components/SvgIcon.tsx b/src/components/SvgIcon.tsx
index 72283873..55201b4e 100644
--- a/src/components/SvgIcon.tsx
+++ b/src/components/SvgIcon.tsx
@@ -1,23 +1,17 @@
-import { Icon as icon } from '../constants/icon';
+import type { Icons } from '../constants/icon';
+import { iconFactory } from '../constants/icon';
 
 interface IconProps {
-  icon: keyof typeof icon;
+  icon: Icons;
   fill?: string;
-  stroke?: string;
   width?: number;
   height?: number;
 }
 
-const Icon = ({
-  icon: iconKey,
-  fill,
-  stroke,
-  width = 24,
-  height = 24,
-}: IconProps) => {
-  const SvgIcon = icon[iconKey];
+const Icon = ({ icon, fill, width = 24, height = 24 }: IconProps) => {
+  const SvgIcon = iconFactory[icon];
 
-  return <SvgIcon fill={fill} stroke={stroke} width={width} height={height} />;
+  return <SvgIcon fill={fill} width={width} height={height} />;
 };
 
 export default Icon;
diff --git a/src/constants/icon.ts b/src/constants/icon.ts
index 50685d54..ba37141d 100644
--- a/src/constants/icon.ts
+++ b/src/constants/icon.ts
@@ -1,11 +1,11 @@
 import type { FC, SVGProps } from 'react';
 
 import Profle from '@/src/assets/icons/profile.svg';
+import Submit from '@/src/assets/icons/submit.svg';
 
-export type IconFactory = {
-  [key: string]: FC<SVGProps<SVGSVGElement>>;
-};
-
-export const Icon: IconFactory = {
+export const iconFactory: Record<string, FC<SVGProps<SVGSVGElement>>> = {
+  submit: Submit,
   profile: Profle,
 };
+
+export type Icons = keyof typeof iconFactory;

From 2ec34378d022aaa4ee8ac6b443e8caf75d08fda5 Mon Sep 17 00:00:00 2001
From: wonjin-dev <fsdjin159@gmail.com>
Date: Sat, 6 Jan 2024 17:38:00 +0900
Subject: [PATCH 28/31] =?UTF-8?q?fix:=20=ED=83=80=EC=9E=85=EB=AC=B8?=
 =?UTF-8?q?=EC=A0=9C=20=ED=95=B4=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/icons/submit.svg                     |  5 +++--
 .../Input/WriteInput/WriteInput.stories.tsx     | 17 -----------------
 src/components/Input/WriteInput/index.tsx       | 16 +++++++---------
 src/components/SvgIcon.tsx                      |  9 ++++-----
 src/constants/icon.ts                           |  6 ++----
 5 files changed, 16 insertions(+), 37 deletions(-)
 delete mode 100644 src/components/Input/WriteInput/WriteInput.stories.tsx

diff --git a/src/assets/icons/submit.svg b/src/assets/icons/submit.svg
index d4b36f84..039b1dea 100644
--- a/src/assets/icons/submit.svg
+++ b/src/assets/icons/submit.svg
@@ -1,3 +1,4 @@
-<svg width="48" height="48" viewBox="0 0 48 48" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M44 24C44 35.0457 35.0457 44 24 44C12.9543 44 4 35.0457 4 24C4 12.9543 12.9543 4 24 4C35.0457 4 44 12.9543 44 24ZM14.9393 22.9393L22.9393 14.9393C23.5251 14.3536 24.4749 14.3536 25.0607 14.9393L33.0607 22.9393C33.6464 23.5251 33.6464 24.4749 33.0607 25.0607C32.4749 25.6464 31.5251 25.6464 30.9393 25.0607L25.5 19.6213V32C25.5 32.8284 24.8284 33.5 24 33.5C23.1716 33.5 22.5 32.8284 22.5 32V19.6213L17.0607 25.0607C16.4749 25.6464 15.5251 25.6464 14.9393 25.0607C14.3536 24.4749 14.3536 23.5251 14.9393 22.9393Z" fill="#D1D2D7"/>
+<svg width="100%" height="100%" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M24 44C35.0457 44 44 35.0457 44 24C44 12.9543 35.0457 4 24 4C12.9543 4 4 12.9543 4 24C4 35.0457 12.9543 44 24 44Z" fill="currentColor"/>
+<path d="M23.4258 14.6138C23.2489 14.687 23.0832 14.7955 22.9393 14.9393L14.9393 22.9393C14.3536 23.5251 14.3536 24.4749 14.9393 25.0607C15.5251 25.6464 16.4749 25.6464 17.0607 25.0607L22.5 19.6213V32C22.5 32.8284 23.1716 33.5 24 33.5C24.8284 33.5 25.5 32.8284 25.5 32V19.6213L30.9393 25.0607C31.5251 25.6464 32.4749 25.6464 33.0607 25.0607C33.6464 24.4749 33.6464 23.5251 33.0607 22.9393L25.0607 14.9393C24.7678 14.6464 24.3839 14.5 24 14.5C23.7966 14.5 23.6027 14.5405 23.4258 14.6138Z" fill="white"/>
 </svg>
diff --git a/src/components/Input/WriteInput/WriteInput.stories.tsx b/src/components/Input/WriteInput/WriteInput.stories.tsx
deleted file mode 100644
index 5e0383a6..00000000
--- a/src/components/Input/WriteInput/WriteInput.stories.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import type { Meta } from '@storybook/react';
-
-import WriteInput from '.';
-
-const meta: Meta<typeof WriteInput> = {
-  title: 'WriteInput',
-  component: WriteInput,
-  decorators: [
-    (Story) => (
-      <div style={{ height: '500px' }}>
-        <Story />
-      </div>
-    ),
-  ],
-};
-
-export default meta;
diff --git a/src/components/Input/WriteInput/index.tsx b/src/components/Input/WriteInput/index.tsx
index f8473c44..0425a96e 100644
--- a/src/components/Input/WriteInput/index.tsx
+++ b/src/components/Input/WriteInput/index.tsx
@@ -1,4 +1,4 @@
-import type { HTMLAttributes } from 'react';
+import type { ChangeEvent, HTMLAttributes, KeyboardEvent } from 'react';
 import { useMemo, useRef, useState } from 'react';
 import { assignInlineVars } from '@vanilla-extract/dynamic';
 
@@ -28,7 +28,7 @@ const WriteInput = ({
     lineBreak: {},
   });
 
-  const handleResize = (e) => {
+  const handleResize = (e: ChangeEvent<HTMLTextAreaElement>) => {
     const { scrollHeight, clientHeight, value } = e.target;
 
     if (value.length === 0) {
@@ -38,7 +38,6 @@ const WriteInput = ({
       }));
     }
 
-    // 줄바꿈이 일어날 때
     if (scrollHeight > clientHeight) {
       setTextareaHeight((prev) => ({
         row: prev.row + 1,
@@ -46,7 +45,6 @@ const WriteInput = ({
       }));
     }
 
-    // 텍스트 지워서 줄바꿈 지점에 도달했을 때
     if (textareaHeight.lineBreak[value.length]) {
       setTextareaHeight((prev) => ({
         row: prev.row - 1,
@@ -55,11 +53,11 @@ const WriteInput = ({
     }
   };
 
-  const onKeyEnter = (e) => {
+  const onKeydownEnter = (e: KeyboardEvent<HTMLTextAreaElement>) => {
     if (e.code === 'Enter') {
       setTextareaHeight((prev) => ({
         row: prev.row + 1,
-        lineBreak: { ...prev.lineBreak, [e.target.value.length]: true },
+        lineBreak: { ...prev.lineBreak, [value.length]: true },
       }));
     }
   };
@@ -84,7 +82,7 @@ const WriteInput = ({
             placeholder={placeholder}
             maxLength={maxLength}
             onInput={handleResize}
-            onKeyDown={onKeyEnter}
+            onKeyDown={onKeydownEnter}
           />
         </label>
 
@@ -102,10 +100,10 @@ const WriteInput = ({
             )}
             <button disabled={!isValid}>
               <Icon
-                icon={'submit'}
+                icon="submit"
                 width={48}
                 height={48}
-                fill={isValid ? COLORS['Blue/Default'] : undefined}
+                color={isValid ? COLORS['Blue/Default'] : undefined}
               />
             </button>
           </div>
diff --git a/src/components/SvgIcon.tsx b/src/components/SvgIcon.tsx
index 55201b4e..a8b23852 100644
--- a/src/components/SvgIcon.tsx
+++ b/src/components/SvgIcon.tsx
@@ -1,17 +1,16 @@
-import type { Icons } from '../constants/icon';
-import { iconFactory } from '../constants/icon';
+import { iconFactory, type Icons } from '../constants/icon';
 
 interface IconProps {
   icon: Icons;
-  fill?: string;
+  color?: string;
   width?: number;
   height?: number;
 }
 
-const Icon = ({ icon, fill, width = 24, height = 24 }: IconProps) => {
+const Icon = ({ icon, color, width = 24, height = 24 }: IconProps) => {
   const SvgIcon = iconFactory[icon];
 
-  return <SvgIcon fill={fill} width={width} height={height} />;
+  return <SvgIcon color={color} width={width} height={height} />;
 };
 
 export default Icon;
diff --git a/src/constants/icon.ts b/src/constants/icon.ts
index ba37141d..1d81236f 100644
--- a/src/constants/icon.ts
+++ b/src/constants/icon.ts
@@ -1,11 +1,9 @@
-import type { FC, SVGProps } from 'react';
-
 import Profle from '@/src/assets/icons/profile.svg';
 import Submit from '@/src/assets/icons/submit.svg';
 
-export const iconFactory: Record<string, FC<SVGProps<SVGSVGElement>>> = {
-  submit: Submit,
+export const iconFactory = {
   profile: Profle,
+  submit: Submit,
 };
 
 export type Icons = keyof typeof iconFactory;

From 68852c8998b5596735671127c51ef5a05932b335 Mon Sep 17 00:00:00 2001
From: wonjin-dev <fsdjin159@gmail.com>
Date: Sat, 6 Jan 2024 17:54:20 +0900
Subject: [PATCH 29/31] =?UTF-8?q?fix:=20=EC=BB=A8=EB=B2=A4=EC=85=98=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/components/Input/WriteInput/index.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/Input/WriteInput/index.tsx b/src/components/Input/WriteInput/index.tsx
index 0425a96e..25a09b76 100644
--- a/src/components/Input/WriteInput/index.tsx
+++ b/src/components/Input/WriteInput/index.tsx
@@ -8,7 +8,6 @@ import { COLORS } from '@/src/styles/tokens';
 
 import Icon from '../../SvgIcon';
 import * as style from './style.css';
-import { inputHeight } from './style.css';
 
 interface WriteInputProps extends HTMLAttributes<HTMLTextAreaElement> {
   inputProps: UseInputReturn;
@@ -69,7 +68,7 @@ const WriteInput = ({
       <div
         className={style.contentWrapper}
         style={assignInlineVars({
-          [inputHeight]: `${textareaHeight.row * 27}px`,
+          [style.inputHeight]: `${textareaHeight.row * 27}px`,
         })}
       >
         <label htmlFor={id} className={style.label}>

From 3ca0569f57f92913ae023913e433f50d87a83d0a Mon Sep 17 00:00:00 2001
From: wonjin-dev <fsdjin159@gmail.com>
Date: Wed, 10 Jan 2024 22:02:03 +0900
Subject: [PATCH 30/31] =?UTF-8?q?refactor:=20=EB=A6=AC=EB=B7=B0=EB=B0=98?=
 =?UTF-8?q?=EC=98=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Input/WriteInput/index.tsx    |  5 +++--
 src/components/Input/WriteInput/style.css.ts | 12 +++++-------
 src/hooks/useInput.ts                        |  2 +-
 3 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/src/components/Input/WriteInput/index.tsx b/src/components/Input/WriteInput/index.tsx
index 25a09b76..238bcc12 100644
--- a/src/components/Input/WriteInput/index.tsx
+++ b/src/components/Input/WriteInput/index.tsx
@@ -44,6 +44,7 @@ const WriteInput = ({
       }));
     }
 
+    //@ts-ignore 올바르지 않은 타입 에러 발생하여 추가 (24.01.10)
     if (textareaHeight.lineBreak[value.length]) {
       setTextareaHeight((prev) => ({
         row: prev.row - 1,
@@ -52,7 +53,7 @@ const WriteInput = ({
     }
   };
 
-  const onKeydownEnter = (e: KeyboardEvent<HTMLTextAreaElement>) => {
+  const handleKeydownEnter = (e: KeyboardEvent<HTMLTextAreaElement>) => {
     if (e.code === 'Enter') {
       setTextareaHeight((prev) => ({
         row: prev.row + 1,
@@ -81,7 +82,7 @@ const WriteInput = ({
             placeholder={placeholder}
             maxLength={maxLength}
             onInput={handleResize}
-            onKeyDown={onKeydownEnter}
+            onKeyDown={handleKeydownEnter}
           />
         </label>
 
diff --git a/src/components/Input/WriteInput/style.css.ts b/src/components/Input/WriteInput/style.css.ts
index 975b6392..1f2fe392 100644
--- a/src/components/Input/WriteInput/style.css.ts
+++ b/src/components/Input/WriteInput/style.css.ts
@@ -41,13 +41,11 @@ export const input = style({
 });
 
 export const submitWrapper = recipe({
-  base: [
-    {
-      display: 'flex',
-      alignItems: 'flex-end',
-      paddingLeft: '20px',
-    },
-  ],
+  base: {
+    display: 'flex',
+    alignItems: 'flex-end',
+    paddingLeft: '20px',
+  },
   variants: {
     multirow: {
       true: {
diff --git a/src/hooks/useInput.ts b/src/hooks/useInput.ts
index a4637380..4fe895de 100644
--- a/src/hooks/useInput.ts
+++ b/src/hooks/useInput.ts
@@ -7,7 +7,7 @@ interface UseInputArgs {
 }
 
 export const useInput = ({ id, defaultValue = '' }: UseInputArgs) => {
-  const [value, setValue] = useState<string>(defaultValue);
+  const [value, setValue] = useState(defaultValue);
 
   const onChange = (e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
     setValue(e.currentTarget.value);

From cf1bb6854403960fd459d10504afc5c531d4cfca Mon Sep 17 00:00:00 2001
From: wonjin-dev <fsdjin159@gmail.com>
Date: Wed, 10 Jan 2024 22:03:07 +0900
Subject: [PATCH 31/31] =?UTF-8?q?fix:=20ignore=20=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Input/WriteInput/index.tsx | 1 -
 tsconfig.json                             | 2 +-
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/Input/WriteInput/index.tsx b/src/components/Input/WriteInput/index.tsx
index 238bcc12..20c40fef 100644
--- a/src/components/Input/WriteInput/index.tsx
+++ b/src/components/Input/WriteInput/index.tsx
@@ -44,7 +44,6 @@ const WriteInput = ({
       }));
     }
 
-    //@ts-ignore 올바르지 않은 타입 에러 발생하여 추가 (24.01.10)
     if (textareaHeight.lineBreak[value.length]) {
       setTextareaHeight((prev) => ({
         row: prev.row - 1,
diff --git a/tsconfig.json b/tsconfig.json
index 19fff78a..91e21029 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "strict": true,
+    "strict": false,
     "target": "es5",
     "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,