feat: width를 style로 넘기는 방식이 한 틱 늦게 반영되므로 제거

woowacourse-teams · Aug 20, 2024 · abe2782 · abe2782
1 parent 4d98f72
commit abe2782
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 15 deletions.
diff --git a/HDesign/src/components/EditableItem/EditableItem.Input.style.ts b/HDesign/src/components/EditableItem/EditableItem.Input.style.ts
@@ -14,19 +14,17 @@ type InputSizeStyleProps = {
   textSize: TextSize;
 };
 
-type InputBaseStyleProps = {
-  width: string;
-};
+type InputBaseStyleProps = {};
 
 type InputStyleProps = InputBaseStyleProps & InputSizeStyleProps;
 
 export const inputWrapperStyle = css({
   display: 'inline-block',
 });
 
-export const inputStyle = ({theme, textSize, width}: WithTheme<InputStyleProps>) => [
+export const inputStyle = ({theme, textSize}: WithTheme<InputStyleProps>) => [
   inputSizeStyle({textSize}),
-  inputBaseStyle({theme, width}),
+  inputBaseStyle({theme}),
 ];
 
 const inputSizeStyle = ({textSize}: InputSizeStyleProps) => {
@@ -46,7 +44,7 @@ const inputSizeStyle = ({textSize}: InputSizeStyleProps) => {
   return [style[textSize]];
 };
 
-const inputBaseStyle = ({theme, width}: WithTheme<InputBaseStyleProps>) =>
+const inputBaseStyle = ({theme}: WithTheme<InputBaseStyleProps>) =>
   css({
     border: 'none',
     outline: 'none',
@@ -57,8 +55,6 @@ const inputBaseStyle = ({theme, width}: WithTheme<InputBaseStyleProps>) =>
     '&:placeholder': {
       color: theme.colors.darkGray,
     },
-
-    width,
   });
 
 export const editingContainerStyle = css({

diff --git a/HDesign/src/components/EditableItem/EditableItem.Input.tsx b/HDesign/src/components/EditableItem/EditableItem.Input.tsx
@@ -1,5 +1,5 @@
 /** @jsxImportSource @emotion/react */
-import {forwardRef, useEffect, useImperativeHandle, useRef} from 'react';
+import {forwardRef, useEffect, useImperativeHandle, useRef, useState} from 'react';
 
 import Flex from '@components/Flex/Flex';
 import Text from '@components/Text/Text';
@@ -17,7 +17,7 @@ import {InputProps} from './EditableItem.Input.type';
 import useEditableItemInput from './useEditableItemInput';
 
 export const EditableItemInput = forwardRef<HTMLInputElement, InputProps>(function Input(
-  {isFixed = false, textSize = 'body', value = '', hasError = false, readOnly = false, ...htmlProps},
+  {isFixed = false, textSize = 'body', hasError = false, readOnly = false, ...htmlProps},
   ref,
 ) {
   const {theme} = useTheme();
@@ -28,32 +28,29 @@ export const EditableItemInput = forwardRef<HTMLInputElement, InputProps>(functi
 
   useEffect(() => {
     if (shadowRef.current && inputRef.current) {
-      // 보이지는 않지만 존재하며 value가 담겨있는 Shadow div의 크기를 기준으로 input의 너비를 설정
       inputRef.current.style.width = `${shadowRef.current.offsetWidth}px`;
     }
-  }, [value]);
+  }, [htmlProps.value]);
 
   return (
     <div css={inputWrapperStyle}>
       <Flex flexDirection="row">
         <div ref={shadowRef} css={editingContainerStyle}>
-          <Text size={textSize}>{value || htmlProps.placeholder}</Text>
+          <Text size={textSize}>{htmlProps.value || htmlProps.placeholder}</Text>
         </div>
         {isFixed && <div css={isFixedIconStyle({theme})}>*</div>}
         <div css={underlineStyle({theme, hasError, hasFocus})}>
           <input
             css={inputStyle({
               theme,
               textSize,
-              width: `${shadowRef.current?.offsetWidth}px`,
             })}
             ref={inputRef}
             autoFocus
             readOnly={readOnly}
             disabled={readOnly}
             {...htmlProps}
             placeholder={htmlProps.placeholder}
-            value={value}
           />
         </div>
       </Flex>