From 8e35ae7ce48473493cf36a7d4884d05ec7136175 Mon Sep 17 00:00:00 2001
From: cje <chej098t@gmail.com>
Date: Sat, 24 Feb 2024 12:53:53 +0900
Subject: [PATCH] =?UTF-8?q?[Fix/BAR-260]=20EditInput=20=EC=B4=88=EA=B8=B0?=
 =?UTF-8?q?=20rows=20=EA=B0=92=20=EC=88=98=EC=A0=95=20(#86)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* style(Tooltip): 간격 및 화살표 위치 수정

* style: 긴 단어인 경우, width에 따라 강제 줄바꿈

* fix(Modal): 수정 사항 없는 경우, 저장하기 버튼 비활성화

* fix(MakeFolderModal): 저장하기 버튼을 눌렀을 때만 폴더명 유효성 검사 트리거되도록 수정

* fix(EditInput): 초기 rows 값 수정
---
 src/components/Card/style.css.ts                      |  4 ++--
 src/components/Modal/modals/EditFolder.tsx            |  4 ++--
 src/components/Modal/modals/MakeFolder.tsx            |  3 +--
 src/components/Modal/style.css.ts                     |  9 +++++----
 src/components/Tooltip/style.css.ts                   | 11 +++++------
 src/domain/landing/style.css.ts                       |  2 +-
 .../components/EditInput.tsx"                         |  2 +-
 .../components/editInput.css.ts"                      |  2 +-
 8 files changed, 18 insertions(+), 19 deletions(-)

diff --git a/src/components/Card/style.css.ts b/src/components/Card/style.css.ts
index 55fffe0b..a79f0c9a 100644
--- a/src/components/Card/style.css.ts
+++ b/src/components/Card/style.css.ts
@@ -60,7 +60,7 @@ export const header = style([
     display: 'flex',
     gap: '8px',
     color: COLORS['Grey/400'],
-    wordBreak: 'keep-all',
+    wordBreak: 'break-all',
   },
 ]);
 
@@ -68,7 +68,7 @@ export const body = style([
   sprinkles({ typography: '15/Body/Regular' }),
   {
     whiteSpace: 'pre-wrap',
-    wordBreak: 'keep-all',
+    wordBreak: 'break-all',
   },
 ]);
 
diff --git a/src/components/Modal/modals/EditFolder.tsx b/src/components/Modal/modals/EditFolder.tsx
index 162fc896..6b2c56a3 100644
--- a/src/components/Modal/modals/EditFolder.tsx
+++ b/src/components/Modal/modals/EditFolder.tsx
@@ -89,8 +89,8 @@ const EditFolder = () => {
           취소
         </Button>
         <Button
-          className={clsx(styles.button, !value && styles.buttonDisabled)}
-          disabled={!value}
+          className={styles.button}
+          disabled={!value || value === folderName}
           style={assignInlineVars({
             [styles.buttonColor]: COLORS['Grey/White'],
             [styles.buttonBackgroundColor]: COLORS['Blue/Default'],
diff --git a/src/components/Modal/modals/MakeFolder.tsx b/src/components/Modal/modals/MakeFolder.tsx
index bd4c9dee..c6d34397 100644
--- a/src/components/Modal/modals/MakeFolder.tsx
+++ b/src/components/Modal/modals/MakeFolder.tsx
@@ -22,7 +22,6 @@ const MakeFolder = () => {
   const { mutate } = usePostMemoFolders();
 
   const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
-    setErrorMessage('');
     setValue(e.target.value);
   };
 
@@ -85,7 +84,7 @@ const MakeFolder = () => {
           취소
         </Button>
         <Button
-          className={clsx(styles.button, !value && styles.buttonDisabled)}
+          className={styles.button}
           disabled={!value}
           style={assignInlineVars({
             [styles.buttonColor]: COLORS['Grey/White'],
diff --git a/src/components/Modal/style.css.ts b/src/components/Modal/style.css.ts
index f904928f..6a63bb0c 100644
--- a/src/components/Modal/style.css.ts
+++ b/src/components/Modal/style.css.ts
@@ -81,11 +81,16 @@ export const button = style([
     backgroundColor: buttonBackgroundColor,
     padding: '16px 40px',
     borderRadius: '8px',
+
     selectors: {
       '& + &': {
         marginLeft: '8px',
       },
     },
+
+    ':disabled': {
+      opacity: '0.5',
+    },
   },
 ]);
 
@@ -93,10 +98,6 @@ export const buttonWrapper = style({
   marginTop: '24px',
 });
 
-export const buttonDisabled = style({
-  opacity: '0.5',
-});
-
 export const helloImage = style({
   textAlign: 'center',
 });
diff --git a/src/components/Tooltip/style.css.ts b/src/components/Tooltip/style.css.ts
index fa879470..de88afda 100644
--- a/src/components/Tooltip/style.css.ts
+++ b/src/components/Tooltip/style.css.ts
@@ -35,6 +35,7 @@ export const content = recipe({
     hasArrow: {
       false: {
         padding: '8px 12px',
+        margin: '4px 0',
       },
       true: {
         padding: '16px',
@@ -57,24 +58,22 @@ export const topArrow = style({
   marginTop: '13px',
 
   '::before': {
-    top: '-11.5px',
+    top: '-12px',
     borderBottomColor: COLORS['Dim/70'],
   },
 });
 
 export const bottomArrow = style({
-  marginBottom: '8px',
-
   '::before': {
-    bottom: '-11px',
+    bottom: '-12px',
     borderTopColor: COLORS['Dim/70'],
   },
 });
 
 export const minimalTooltipMargin = style({
-  marginTop: '-8px',
+  marginTop: '-20px',
 });
 
 export const highlightTooltipMargin = style({
-  marginTop: '-36px',
+  marginTop: '-46px',
 });
diff --git a/src/domain/landing/style.css.ts b/src/domain/landing/style.css.ts
index 95950fb8..af8bab27 100644
--- a/src/domain/landing/style.css.ts
+++ b/src/domain/landing/style.css.ts
@@ -91,7 +91,7 @@ export const rightText = style([
     display: 'inline-block',
     width: '270px',
     color: COLORS['Grey/800'],
-    wordBreak: 'keep-all',
+    wordBreak: 'break-all',
   },
 ]);
 
diff --git "a/src/domain/\353\201\204\354\240\201\354\235\264\353\212\224/components/EditInput.tsx" "b/src/domain/\353\201\204\354\240\201\354\235\264\353\212\224/components/EditInput.tsx"
index 1e5f0a58..6abf27ba 100644
--- "a/src/domain/\353\201\204\354\240\201\354\235\264\353\212\224/components/EditInput.tsx"
+++ "b/src/domain/\353\201\204\354\240\201\354\235\264\353\212\224/components/EditInput.tsx"
@@ -14,7 +14,7 @@ const EditInput = ({ inputProps }: EditInputProps) => {
     row: number;
     lineBreak: Record<number, boolean>;
   }>({
-    row: 1,
+    row: inputProps.value.split(/\r\n|\r|\n/).length,
     lineBreak: {},
   });
 
diff --git "a/src/domain/\353\201\204\354\240\201\354\235\264\353\212\224/components/editInput.css.ts" "b/src/domain/\353\201\204\354\240\201\354\235\264\353\212\224/components/editInput.css.ts"
index 3effc075..54cbf7a7 100644
--- "a/src/domain/\353\201\204\354\240\201\354\235\264\353\212\224/components/editInput.css.ts"
+++ "b/src/domain/\353\201\204\354\240\201\354\235\264\353\212\224/components/editInput.css.ts"
@@ -16,10 +16,10 @@ export const editInput = style([
   }),
   {
     width: '100%',
+    height: '100%',
     marginBottom: '8px',
     resize: 'none',
     overflowWrap: 'break-word',
-    maxHeight: '217px',
   },
 ]);