From 4e5d997776f8a44fbce6a979ac29a974fadbd9a3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9D=B4=EC=84=B8=EB=AF=BC?=
 <89172499+semnil5202@users.noreply.github.com>
Date: Thu, 6 Jun 2024 16:32:55 +0900
Subject: [PATCH] =?UTF-8?q?Refactor/#162:=20=EA=B8=80=EC=93=B0=EA=B8=B0=20?=
 =?UTF-8?q?=EC=A0=9C=EB=AA=A9=20=EC=A0=9C=ED=95=9C=2020=EA=B8=80=EC=9E=90?=
 =?UTF-8?q?=EC=97=90=EC=84=9C=2040=EA=B8=80=EC=9E=90=EB=A1=9C=20=EB=B3=80?=
 =?UTF-8?q?=EA=B2=BD=20(#163)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* refactor: 아이디어 본문 제목을 20글자 -> 40글자로 변경

* design: 두 줄 제목 line-height 조정
---
 src/pages/FeedDetail/FeedDetail.page.tsx                 | 9 +++++++--
 src/pages/Write/components/TitleAndIntroduceSection.tsx  | 4 ++--
 .../WriteEdit/components/TitleAndIntroduceSection.tsx    | 2 +-
 .../components/NewIdeaCard/compound/Content/Content.tsx  | 6 +++++-
 4 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/src/pages/FeedDetail/FeedDetail.page.tsx b/src/pages/FeedDetail/FeedDetail.page.tsx
index bf4a3f4e..0d84af5e 100644
--- a/src/pages/FeedDetail/FeedDetail.page.tsx
+++ b/src/pages/FeedDetail/FeedDetail.page.tsx
@@ -1,3 +1,4 @@
+import styled from '@emotion/styled';
 import { Badge, Divider, Header, Spacer, Text, TextDivider, Flex, Box } from 'concept-be-design-system';
 import { useNavigate, useParams } from 'react-router-dom';
 
@@ -73,9 +74,9 @@ const FeedDetailPage = () => {
               {branchList.join(' / ')}
             </Text>
             <Spacer size={8} />
-            <Text font="suit18sb" color="b4">
+            <LineHeightText font="suit18sb" color="b4">
               {title}
-            </Text>
+            </LineHeightText>
             <Spacer size={8} />
             <Flex alignItems="center">
               <Text font="suit12r" color="b9">
@@ -178,3 +179,7 @@ const FeedDetailPage = () => {
 };
 
 export default FeedDetailPage;
+
+const LineHeightText = styled(Text)`
+  line-height: 20px;
+`;
diff --git a/src/pages/Write/components/TitleAndIntroduceSection.tsx b/src/pages/Write/components/TitleAndIntroduceSection.tsx
index 73af240a..21cbdd89 100644
--- a/src/pages/Write/components/TitleAndIntroduceSection.tsx
+++ b/src/pages/Write/components/TitleAndIntroduceSection.tsx
@@ -15,7 +15,7 @@ type Props = {
 const TitleAndIntroduceSection = ({ title, introduce, onTitleChange, onIntroduceChange }: Props) => {
   const handleChangeTitle = (e: ChangeEvent<HTMLInputElement>) => {
     const newTitle = e.target.value;
-    if (newTitle.length > 20) return; // 제목 길이 제한
+    if (newTitle.length > 40) return; // 제목 길이 제한
 
     onTitleChange(newTitle);
   };
@@ -30,7 +30,7 @@ const TitleAndIntroduceSection = ({ title, introduce, onTitleChange, onIntroduce
   return (
     <>
       <HeaderInput
-        placeholder="제목을 입력해 주세요. (최대20자)"
+        placeholder="제목을 입력해 주세요. (최대 40자)"
         value={title}
         onChange={handleChangeTitle}
         autoFocus
diff --git a/src/pages/WriteEdit/components/TitleAndIntroduceSection.tsx b/src/pages/WriteEdit/components/TitleAndIntroduceSection.tsx
index 97dd8b61..55e276e1 100644
--- a/src/pages/WriteEdit/components/TitleAndIntroduceSection.tsx
+++ b/src/pages/WriteEdit/components/TitleAndIntroduceSection.tsx
@@ -15,7 +15,7 @@ type Props = {
 const TitleAndIntroduceSection = ({ title, introduce, onTitleChange, onIntroduceChange }: Props) => {
   const handleChangeTitle = (e: ChangeEvent<HTMLInputElement>) => {
     const newTitle = e.target.value;
-    if (newTitle.length > 20) return; // 제목 길이 제한
+    if (newTitle.length > 40) return; // 제목 길이 제한
 
     onTitleChange(newTitle);
   };
diff --git a/src/pages/components/NewIdeaCard/compound/Content/Content.tsx b/src/pages/components/NewIdeaCard/compound/Content/Content.tsx
index c936fd0f..eecb457f 100644
--- a/src/pages/components/NewIdeaCard/compound/Content/Content.tsx
+++ b/src/pages/components/NewIdeaCard/compound/Content/Content.tsx
@@ -47,7 +47,7 @@ const Content = ({ onClickDelete }: Props) => {
           </Text>
           <Spacer size={7} />
 
-          <Text font="suit16sb">{title}</Text>
+          <LineHeightText font="suit16sb">{title}</LineHeightText>
         </Flex>
 
         {canEdit && (
@@ -97,3 +97,7 @@ const ContentText = styled.div`
 const TagWrapper = styled.div`
   padding: 0;
 `;
+
+const LineHeightText = styled(Text)`
+  line-height: 20px;
+`;