[Fix/BAR-260] EditInput 초기 rows 값 수정 (#86)

* style(Tooltip): 간격 및 화살표 위치 수정 * style: 긴 단어인 경우, width에 따라 강제 줄바꿈 * fix(Modal): 수정 사항 없는 경우, 저장하기 버튼 비활성화 * fix(MakeFolderModal): 저장하기 버튼을 눌렀을 때만 폴더명 유효성 검사 트리거되도록 수정 * fix(EditInput): 초기 rows 값 수정
YAPP-Github · Feb 24, 2024 · 8e35ae7 · 8e35ae7
1 parent a8ab9f7
commit 8e35ae7
Show file tree

Hide file tree

Showing 8 changed files with 18 additions and 19 deletions.
diff --git a/src/components/Card/style.css.ts b/src/components/Card/style.css.ts
@@ -60,15 +60,15 @@ export const header = style([
     display: 'flex',
     gap: '8px',
     color: COLORS['Grey/400'],
-    wordBreak: 'keep-all',
+    wordBreak: 'break-all',
   },
 ]);
 
 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
@@ -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
@@ -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
@@ -81,22 +81,23 @@ export const button = style([
     backgroundColor: buttonBackgroundColor,
     padding: '16px 40px',
     borderRadius: '8px',
+
     selectors: {
       '& + &': {
         marginLeft: '8px',
       },
     },
+
+    ':disabled': {
+      opacity: '0.5',
+    },
   },
 ]);
 
 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
@@ -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
@@ -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/끄적이는/components/EditInput.tsx b/src/domain/끄적이는/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/끄적이는/components/editInput.css.ts b/src/domain/끄적이는/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',
   },
 ]);