From 4f5682561ba850bef9797c15180551f685f661c6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9D=B4=ED=83=9C=EB=9E=91?=
 <106226701+TaerangLee@users.noreply.github.com>
Date: Wed, 6 Sep 2023 01:13:10 +0900
Subject: [PATCH 01/13] Add titleInput

---
 .../src/components/TitleInput/index.stories.ts     | 14 ++++++++++++++
 projects/admin/src/components/TitleInput/index.tsx |  7 +++++++
 projects/admin/src/components/TitleInput/style.ts  | 14 ++++++++++++++
 3 files changed, 35 insertions(+)
 create mode 100644 projects/admin/src/components/TitleInput/index.stories.ts
 create mode 100644 projects/admin/src/components/TitleInput/index.tsx
 create mode 100644 projects/admin/src/components/TitleInput/style.ts

diff --git a/projects/admin/src/components/TitleInput/index.stories.ts b/projects/admin/src/components/TitleInput/index.stories.ts
new file mode 100644
index 00000000..eeefa31b
--- /dev/null
+++ b/projects/admin/src/components/TitleInput/index.stories.ts
@@ -0,0 +1,14 @@
+'use client';
+
+import TitleInput from '.';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+export default {
+  title: 'admin/TitleInput',
+  component: TitleInput,
+} as Meta<typeof TitleInput>;
+
+type Story = StoryObj<typeof TitleInput>;
+
+export const Primary: Story = {};
diff --git a/projects/admin/src/components/TitleInput/index.tsx b/projects/admin/src/components/TitleInput/index.tsx
new file mode 100644
index 00000000..786183f3
--- /dev/null
+++ b/projects/admin/src/components/TitleInput/index.tsx
@@ -0,0 +1,7 @@
+`use client`;
+
+import * as S from './style';
+
+const TitleInput = () => <S.TitleInput />;
+
+export default TitleInput;
diff --git a/projects/admin/src/components/TitleInput/style.ts b/projects/admin/src/components/TitleInput/style.ts
new file mode 100644
index 00000000..be0d923a
--- /dev/null
+++ b/projects/admin/src/components/TitleInput/style.ts
@@ -0,0 +1,14 @@
+import styled from '@emotion/styled';
+
+export const TitleInput = styled.input`
+  width: 950px;
+  height: 100px;
+  border-radius: 10px;
+
+  outline: none;
+  text-indent: 18px;
+  border: 0;
+
+  background: ${({ theme }) => theme.color.gray['010']};
+  box-shadow: 3px 3px 4px 0px rgba(120, 120, 120, 0.25);
+`;

From b74b85d458294bebe95f8ac4287f90eb46a4217a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9D=B4=ED=83=9C=EB=9E=91?=
 <106226701+TaerangLee@users.noreply.github.com>
Date: Wed, 6 Sep 2023 20:45:48 +0900
Subject: [PATCH 02/13] Update unit change px -> rem

---
 projects/admin/src/components/TitleInput/style.ts | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/projects/admin/src/components/TitleInput/style.ts b/projects/admin/src/components/TitleInput/style.ts
index be0d923a..d82d0ca2 100644
--- a/projects/admin/src/components/TitleInput/style.ts
+++ b/projects/admin/src/components/TitleInput/style.ts
@@ -1,14 +1,14 @@
 import styled from '@emotion/styled';
 
 export const TitleInput = styled.input`
-  width: 950px;
-  height: 100px;
-  border-radius: 10px;
+  width: 59.375rem;
+  height: 6.25rem;
+  border-radius: 0.625rem;
 
   outline: none;
-  text-indent: 18px;
+  text-indent: 1.125rem;
   border: 0;
 
   background: ${({ theme }) => theme.color.gray['010']};
-  box-shadow: 3px 3px 4px 0px rgba(120, 120, 120, 0.25);
+  box-shadow: 0.1875rem 0.1875rem 0.25rem 0rem rgba(120, 120, 120, 0.25);
 `;

From 56b2b8d59351214740a4620d9e3f321fb8445cbf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9D=B4=ED=83=9C=EB=9E=91?=
 <106226701+TaerangLee@users.noreply.github.com>
Date: Fri, 8 Sep 2023 01:04:13 +0900
Subject: [PATCH 03/13] Update font-size appoint

---
 projects/admin/src/components/TitleInput/index.tsx | 4 +++-
 projects/admin/src/components/TitleInput/style.ts  | 5 ++---
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/projects/admin/src/components/TitleInput/index.tsx b/projects/admin/src/components/TitleInput/index.tsx
index 786183f3..5939c71c 100644
--- a/projects/admin/src/components/TitleInput/index.tsx
+++ b/projects/admin/src/components/TitleInput/index.tsx
@@ -2,6 +2,8 @@
 
 import * as S from './style';
 
-const TitleInput = () => <S.TitleInput />;
+const TitleInput = () => (
+  <S.TitleInput placeholder='제목을 작성해 주시기 바랍니다.' />
+);
 
 export default TitleInput;
diff --git a/projects/admin/src/components/TitleInput/style.ts b/projects/admin/src/components/TitleInput/style.ts
index d82d0ca2..4feb920b 100644
--- a/projects/admin/src/components/TitleInput/style.ts
+++ b/projects/admin/src/components/TitleInput/style.ts
@@ -1,14 +1,13 @@
 import styled from '@emotion/styled';
 
 export const TitleInput = styled.input`
+  ${({ theme }) => theme.typo.body1};
+  background: ${({ theme }) => theme.color.gray['010']};
   width: 59.375rem;
   height: 6.25rem;
   border-radius: 0.625rem;
-
   outline: none;
   text-indent: 1.125rem;
   border: 0;
-
-  background: ${({ theme }) => theme.color.gray['010']};
   box-shadow: 0.1875rem 0.1875rem 0.25rem 0rem rgba(120, 120, 120, 0.25);
 `;

From 388afefd67c97bf23fc1cab96016f809210aea58 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9D=B4=ED=83=9C=EB=9E=91?=
 <106226701+TaerangLee@users.noreply.github.com>
Date: Fri, 8 Sep 2023 01:07:03 +0900
Subject: [PATCH 04/13] Update appoint titleInput maxLength

---
 projects/admin/src/components/TitleInput/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/projects/admin/src/components/TitleInput/index.tsx b/projects/admin/src/components/TitleInput/index.tsx
index 5939c71c..48db3818 100644
--- a/projects/admin/src/components/TitleInput/index.tsx
+++ b/projects/admin/src/components/TitleInput/index.tsx
@@ -3,7 +3,7 @@
 import * as S from './style';
 
 const TitleInput = () => (
-  <S.TitleInput placeholder='제목을 작성해 주시기 바랍니다.' />
+  <S.TitleInput placeholder='제목을 작성해 주시기 바랍니다.' maxLength={20} />
 );
 
 export default TitleInput;

From 1c5cabc092376ceaba9b115c1f1f6a0fde3a8898 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9D=B4=ED=83=9C=EB=9E=91?=
 <106226701+TaerangLee@users.noreply.github.com>
Date: Sun, 10 Sep 2023 16:55:16 +0900
Subject: [PATCH 05/13] Update inputLength, style maxlength fontColor

---
 .../admin/src/components/TitleInput/index.tsx | 23 ++++++++++++++++---
 .../admin/src/components/TitleInput/style.ts  | 21 +++++++++++++++--
 2 files changed, 39 insertions(+), 5 deletions(-)

diff --git a/projects/admin/src/components/TitleInput/index.tsx b/projects/admin/src/components/TitleInput/index.tsx
index 48db3818..d5252032 100644
--- a/projects/admin/src/components/TitleInput/index.tsx
+++ b/projects/admin/src/components/TitleInput/index.tsx
@@ -1,9 +1,26 @@
 `use client`;
 
+import { useState } from 'react';
 import * as S from './style';
 
-const TitleInput = () => (
-  <S.TitleInput placeholder='제목을 작성해 주시기 바랍니다.' maxLength={20} />
-);
+const TitleInput = () => {
+  const [inputCount, setInputCount] = useState<number>(0);
+
+  const onInputHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const inputValue = e.target.value;
+    setInputCount(inputValue.length <= 20 ? inputValue.length : 20);
+  };
+
+  return (
+    <S.TitleInputWrapper inputContent={inputCount}>
+      <S.TitleInput
+        placeholder='제목을 작성해 주시기 바랍니다.'
+        maxLength={20}
+        onChange={onInputHandler}
+      />
+      <span>{inputCount} / 20</span>
+    </S.TitleInputWrapper>
+  );
+};
 
 export default TitleInput;
diff --git a/projects/admin/src/components/TitleInput/style.ts b/projects/admin/src/components/TitleInput/style.ts
index 4feb920b..f890850a 100644
--- a/projects/admin/src/components/TitleInput/style.ts
+++ b/projects/admin/src/components/TitleInput/style.ts
@@ -1,13 +1,30 @@
 import styled from '@emotion/styled';
 
+export const TitleInputWrapper = styled.div<{ inputContent: number }>`
+  background: ${({ theme }) => theme.color.gray['010']};
+  width: 59.375rem;
+  height: 6.25rem;
+  display: flex;
+  border-radius: 0.625rem;
+  align-items: center;
+  box-shadow: 0.1875rem 0.1875rem 0.25rem 0rem rgba(120, 120, 120, 0.25);
+
+  span {
+    color: ${(props) =>
+      props.inputContent === 20
+        ? 'var(--maincolor, #FFA927)'
+        : 'var(--darkgray_3, #6c6c6c)'};
+  }
+`;
+
 export const TitleInput = styled.input`
   ${({ theme }) => theme.typo.body1};
   background: ${({ theme }) => theme.color.gray['010']};
-  width: 59.375rem;
+  color: ${({ theme }) => theme.color.black};
+  width: 54.25rem;
   height: 6.25rem;
   border-radius: 0.625rem;
   outline: none;
   text-indent: 1.125rem;
   border: 0;
-  box-shadow: 0.1875rem 0.1875rem 0.25rem 0rem rgba(120, 120, 120, 0.25);
 `;

From a5834954e83203b7744873720761d67fe917ec27 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9D=B4=ED=83=9C=EB=9E=91?=
 <106226701+TaerangLee@users.noreply.github.com>
Date: Sun, 10 Sep 2023 17:08:22 +0900
Subject: [PATCH 06/13] Update inputValue maxLength appoint

---
 projects/admin/src/components/TitleInput/index.tsx | 14 +++++++-------
 projects/admin/src/components/TitleInput/style.ts  | 12 ++++++------
 2 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/projects/admin/src/components/TitleInput/index.tsx b/projects/admin/src/components/TitleInput/index.tsx
index d5252032..f49f1f39 100644
--- a/projects/admin/src/components/TitleInput/index.tsx
+++ b/projects/admin/src/components/TitleInput/index.tsx
@@ -1,24 +1,24 @@
-`use client`;
-
 import { useState } from 'react';
 import * as S from './style';
 
 const TitleInput = () => {
-  const [inputCount, setInputCount] = useState<number>(0);
+  const [inputValue, setInputValue] = useState<string>('');
 
   const onInputHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
     const inputValue = e.target.value;
-    setInputCount(inputValue.length <= 20 ? inputValue.length : 20);
+    if (inputValue.length <= 20) {
+      setInputValue(inputValue);
+    }
   };
 
   return (
-    <S.TitleInputWrapper inputContent={inputCount}>
+    <S.TitleInputWrapper>
       <S.TitleInput
         placeholder='제목을 작성해 주시기 바랍니다.'
-        maxLength={20}
         onChange={onInputHandler}
+        value={inputValue}
       />
-      <span>{inputCount} / 20</span>
+      <span>{inputValue.length} / 20</span>
     </S.TitleInputWrapper>
   );
 };
diff --git a/projects/admin/src/components/TitleInput/style.ts b/projects/admin/src/components/TitleInput/style.ts
index f890850a..7464dd1b 100644
--- a/projects/admin/src/components/TitleInput/style.ts
+++ b/projects/admin/src/components/TitleInput/style.ts
@@ -1,6 +1,6 @@
 import styled from '@emotion/styled';
 
-export const TitleInputWrapper = styled.div<{ inputContent: number }>`
+export const TitleInputWrapper = styled.div`
   background: ${({ theme }) => theme.color.gray['010']};
   width: 59.375rem;
   height: 6.25rem;
@@ -9,12 +9,12 @@ export const TitleInputWrapper = styled.div<{ inputContent: number }>`
   align-items: center;
   box-shadow: 0.1875rem 0.1875rem 0.25rem 0rem rgba(120, 120, 120, 0.25);
 
-  span {
+  /* span {
     color: ${(props) =>
-      props.inputContent === 20
-        ? 'var(--maincolor, #FFA927)'
-        : 'var(--darkgray_3, #6c6c6c)'};
-  }
+    props.inputContent === 20
+      ? 'var(--maincolor, #FFA927)'
+      : 'var(--darkgray_3, #6c6c6c)'};
+  } */
 `;
 
 export const TitleInput = styled.input`

From 47782617c91612e59980216b3022cbd63b781698 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9D=B4=ED=83=9C=EB=9E=91?=
 <106226701+TaerangLee@users.noreply.github.com>
Date: Sun, 10 Sep 2023 17:12:32 +0900
Subject: [PATCH 07/13] Update maxLength style font-color

---
 projects/admin/src/components/TitleInput/index.tsx |  2 +-
 projects/admin/src/components/TitleInput/style.ts  | 12 ++++++------
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/projects/admin/src/components/TitleInput/index.tsx b/projects/admin/src/components/TitleInput/index.tsx
index f49f1f39..6e941f66 100644
--- a/projects/admin/src/components/TitleInput/index.tsx
+++ b/projects/admin/src/components/TitleInput/index.tsx
@@ -12,7 +12,7 @@ const TitleInput = () => {
   };
 
   return (
-    <S.TitleInputWrapper>
+    <S.TitleInputWrapper inputValue={inputValue.length}>
       <S.TitleInput
         placeholder='제목을 작성해 주시기 바랍니다.'
         onChange={onInputHandler}
diff --git a/projects/admin/src/components/TitleInput/style.ts b/projects/admin/src/components/TitleInput/style.ts
index 7464dd1b..035eddd4 100644
--- a/projects/admin/src/components/TitleInput/style.ts
+++ b/projects/admin/src/components/TitleInput/style.ts
@@ -1,6 +1,6 @@
 import styled from '@emotion/styled';
 
-export const TitleInputWrapper = styled.div`
+export const TitleInputWrapper = styled.div<{ inputValue: number }>`
   background: ${({ theme }) => theme.color.gray['010']};
   width: 59.375rem;
   height: 6.25rem;
@@ -9,12 +9,12 @@ export const TitleInputWrapper = styled.div`
   align-items: center;
   box-shadow: 0.1875rem 0.1875rem 0.25rem 0rem rgba(120, 120, 120, 0.25);
 
-  /* span {
+  span {
     color: ${(props) =>
-    props.inputContent === 20
-      ? 'var(--maincolor, #FFA927)'
-      : 'var(--darkgray_3, #6c6c6c)'};
-  } */
+      props.inputValue === 20
+        ? 'var(--maincolor, #FFA927)'
+        : 'var(--darkgray_3, #6c6c6c)'};
+  }
 `;
 
 export const TitleInput = styled.input`

From 82ec5c2d05fd02f5c81aaf198d4462d1219f9e8d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9D=B4=ED=83=9C=EB=9E=91?=
 <106226701+TaerangLee@users.noreply.github.com>
Date: Sun, 10 Sep 2023 22:07:18 +0900
Subject: [PATCH 08/13] Update inputValue style length

---
 projects/admin/src/components/TitleInput/index.tsx | 4 ++--
 projects/admin/src/components/TitleInput/style.ts  | 6 ++----
 2 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/projects/admin/src/components/TitleInput/index.tsx b/projects/admin/src/components/TitleInput/index.tsx
index 6e941f66..87c8ea48 100644
--- a/projects/admin/src/components/TitleInput/index.tsx
+++ b/projects/admin/src/components/TitleInput/index.tsx
@@ -6,7 +6,7 @@ const TitleInput = () => {
 
   const onInputHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
     const inputValue = e.target.value;
-    if (inputValue.length <= 20) {
+    if (inputValue.length <= 50) {
       setInputValue(inputValue);
     }
   };
@@ -18,7 +18,7 @@ const TitleInput = () => {
         onChange={onInputHandler}
         value={inputValue}
       />
-      <span>{inputValue.length} / 20</span>
+      <span>{inputValue.length} / 50</span>
     </S.TitleInputWrapper>
   );
 };
diff --git a/projects/admin/src/components/TitleInput/style.ts b/projects/admin/src/components/TitleInput/style.ts
index 035eddd4..9ec36d02 100644
--- a/projects/admin/src/components/TitleInput/style.ts
+++ b/projects/admin/src/components/TitleInput/style.ts
@@ -10,10 +10,8 @@ export const TitleInputWrapper = styled.div<{ inputValue: number }>`
   box-shadow: 0.1875rem 0.1875rem 0.25rem 0rem rgba(120, 120, 120, 0.25);
 
   span {
-    color: ${(props) =>
-      props.inputValue === 20
-        ? 'var(--maincolor, #FFA927)'
-        : 'var(--darkgray_3, #6c6c6c)'};
+    color: ${({ inputValue, theme }) =>
+      inputValue === 50 ? theme.color.primary : theme.color.gray['050']};
   }
 `;
 

From 0d6f6ef209c0d5839546e623a632e16d19e6280e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9D=B4=ED=83=9C=EB=9E=91?=
 <106226701+TaerangLee@users.noreply.github.com>
Date: Sun, 10 Sep 2023 22:12:00 +0900
Subject: [PATCH 09/13] Update appoint MAXLENGTH

---
 projects/admin/src/components/TitleInput/index.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/projects/admin/src/components/TitleInput/index.tsx b/projects/admin/src/components/TitleInput/index.tsx
index 87c8ea48..dc7cb413 100644
--- a/projects/admin/src/components/TitleInput/index.tsx
+++ b/projects/admin/src/components/TitleInput/index.tsx
@@ -3,6 +3,7 @@ import * as S from './style';
 
 const TitleInput = () => {
   const [inputValue, setInputValue] = useState<string>('');
+  const MAXLENGTH = 20 as const;
 
   const onInputHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
     const inputValue = e.target.value;
@@ -18,7 +19,9 @@ const TitleInput = () => {
         onChange={onInputHandler}
         value={inputValue}
       />
-      <span>{inputValue.length} / 50</span>
+      <span>
+        {inputValue.length} / {MAXLENGTH}
+      </span>
     </S.TitleInputWrapper>
   );
 };

From d95260361a144eea73e2aadc9199fc297843070d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9D=B4=ED=83=9C=EB=9E=91?=
 <106226701+TaerangLee@users.noreply.github.com>
Date: Sun, 10 Sep 2023 22:16:31 +0900
Subject: [PATCH 10/13] Update MAXLENGTH

---
 projects/admin/src/components/TitleInput/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/projects/admin/src/components/TitleInput/index.tsx b/projects/admin/src/components/TitleInput/index.tsx
index dc7cb413..51aef549 100644
--- a/projects/admin/src/components/TitleInput/index.tsx
+++ b/projects/admin/src/components/TitleInput/index.tsx
@@ -3,7 +3,7 @@ import * as S from './style';
 
 const TitleInput = () => {
   const [inputValue, setInputValue] = useState<string>('');
-  const MAXLENGTH = 20 as const;
+  const MAXLENGTH = 50 as const;
 
   const onInputHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
     const inputValue = e.target.value;

From 4931852fbbc8fcc1337ca60c26176165c24f678d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9D=B4=ED=83=9C=EB=9E=91?=
 <106226701+TaerangLee@users.noreply.github.com>
Date: Sun, 10 Sep 2023 22:17:38 +0900
Subject: [PATCH 11/13] Fix inputValue add parentheses

---
 projects/admin/src/components/TitleInput/style.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/projects/admin/src/components/TitleInput/style.ts b/projects/admin/src/components/TitleInput/style.ts
index 9ec36d02..f93d3453 100644
--- a/projects/admin/src/components/TitleInput/style.ts
+++ b/projects/admin/src/components/TitleInput/style.ts
@@ -11,7 +11,7 @@ export const TitleInputWrapper = styled.div<{ inputValue: number }>`
 
   span {
     color: ${({ inputValue, theme }) =>
-      inputValue === 50 ? theme.color.primary : theme.color.gray['050']};
+      inputValue >= 50 ? theme.color.primary : theme.color.gray['050']};
   }
 `;
 

From 87d17c72fb2577d5322be1ce9b44dae801ad0363 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9D=B4=ED=83=9C=EB=9E=91?=
 <106226701+TaerangLee@users.noreply.github.com>
Date: Sun, 10 Sep 2023 22:22:08 +0900
Subject: [PATCH 12/13] Add use client

---
 projects/admin/src/components/TitleInput/index.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/projects/admin/src/components/TitleInput/index.tsx b/projects/admin/src/components/TitleInput/index.tsx
index 51aef549..ade58595 100644
--- a/projects/admin/src/components/TitleInput/index.tsx
+++ b/projects/admin/src/components/TitleInput/index.tsx
@@ -1,3 +1,5 @@
+`use client`;
+
 import { useState } from 'react';
 import * as S from './style';
 

From f379c40b4cf5279262a8551cae262d8650414d98 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9D=B4=ED=83=9C=EB=9E=91?=
 <106226701+TaerangLee@users.noreply.github.com>
Date: Sun, 10 Sep 2023 22:31:47 +0900
Subject: [PATCH 13/13] Fix Edit with citation

---
 projects/admin/src/components/TitleInput/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/projects/admin/src/components/TitleInput/index.tsx b/projects/admin/src/components/TitleInput/index.tsx
index ade58595..28878992 100644
--- a/projects/admin/src/components/TitleInput/index.tsx
+++ b/projects/admin/src/components/TitleInput/index.tsx
@@ -1,4 +1,4 @@
-`use client`;
+'use client';
 
 import { useState } from 'react';
 import * as S from './style';