refactor: 코드 정리

YAPP-Github · Jan 5, 2024 · 554abd9 · 554abd9
1 parent 7d74f95
commit 554abd9
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 101 deletions.
diff --git a/pages/index.tsx b/pages/index.tsx
@@ -1,6 +1,6 @@
 import type { NextPage } from 'next';
 
-import ControlledInput from '@/src/components/Input/ControlledInput';
+import TextArea from '@/src/components/Input/TextArea/TextArea';
 import { useInput } from '@/src/hooks/useInput';
 
 const HomePage: NextPage = () => {
@@ -10,8 +10,7 @@ const HomePage: NextPage = () => {
   });
 
   return (
-    <ControlledInput
-      type={'primary'}
+    <TextArea
       inputProps={testInputProps}
       placeholder="메모를 끄적여보세요"
       alertType={'error'}

diff --git a/src/components/Input/ControlledInput.stories.tsx b/src/components/Input/ControlledInput.stories.tsx
diff --git a/src/components/Input/ControlledInput.tsx → src/components/Input/TextArea/TextArea.tsx b/src/components/Input/ControlledInput.tsx → src/components/Input/TextArea/TextArea.tsx
@@ -9,11 +9,9 @@ import type { UseInputReturn } from '@/src/hooks/useInput';
 import * as style from './style.css';
 import { inputHeight } from './style.css';
 
-type InputType = 'primary' | 'secondary';
 type AlertType = 'error' | 'warn';
 
-interface ControlledInputProps extends HTMLAttributes<HTMLTextAreaElement> {
-  type: InputType;
+interface TextAreaProps extends HTMLAttributes<HTMLTextAreaElement> {
   inputProps: UseInputReturn;
   placeholder?: string;
   maxLength?: number;
@@ -22,18 +20,17 @@ interface ControlledInputProps extends HTMLAttributes<HTMLTextAreaElement> {
   showPostFix?: boolean;
 }
 
-const ControlledInput = ({
-  type,
+const TextArea = ({
   inputProps,
   placeholder,
   maxLength = MAIN_INPUT_MAX_LENGTH,
   alertType,
   alertMsg,
   showPostFix = false,
-}: ControlledInputProps) => {
+}: TextAreaProps) => {
   const { id, value } = inputProps;
   const inputRef = useRef<HTMLTextAreaElement | null>(null);
-  const [height, setHeight] = useState(0);
+  const [height, setHeight] = useState(27);
 
   const alertIconUrl = useMemo(
     () => (type: AlertType) => {
@@ -57,11 +54,16 @@ const ControlledInput = ({
     if (inputRef.current) {
       setHeight(inputRef.current.scrollHeight);
     }
+
+    // TODO: scroll height로 높이를 줄이기 때문에 이미 스크롤된 값에 대해 인지하는 방법을 확인해야 함. @원진
+    if (value.length === 0) {
+      setHeight(27);
+    }
   }, [height, value]);
 
   return (
     <Fragment>
-      <div className={style.conatiner({ type, error: alertType === 'error' })}>
+      <div className={style.conatiner({ error: alertType === 'error' })}>
         <div
           className={style.contentWrapper}
           style={assignInlineVars({ [inputHeight]: `${height}px` })}
@@ -71,17 +73,18 @@ const ControlledInput = ({
               {...inputProps}
               ref={inputRef}
               style={assignInlineVars({ [inputHeight]: `${height}px` })}
-              className={style.input()}
+              className={style.input}
               placeholder={placeholder}
               maxLength={maxLength}
             />
           </label>
 
           {showPostFix && (
-            <div className={style.submitWrapper}>
+            <div className={style.submitWrapper({ hasValue: height > 27 })}>
               <div className={style.submit}>
                 <span className={style.textCount}>
-                  <span className={style.currentTextCount}>500</span> / 500자
+                  <span className={style.currentTextCount}>{value.length}</span>
+                  &nbsp;/&nbsp;500자
                 </span>
                 <button disabled={value.length < 1}>
                   {/* TODO: Svg 공용 아이콘 제작 후 변경 @원진 */}
@@ -99,7 +102,7 @@ const ControlledInput = ({
       </div>
 
       {alertMsg && (
-        <div className={style.alert()}>
+        <div className={style.alert}>
           {/* TODO: Svg 공용 아이콘 제작 후 변경 @원진 */}
           {alertType && (
             <Image
@@ -109,11 +112,11 @@ const ControlledInput = ({
               height={20}
             />
           )}
-          <p className={style.alertMsg()}>{alertMsg}</p>
+          <p className={style.alertMsg}>{alertMsg}</p>
         </div>
       )}
     </Fragment>
   );
 };
 
-export default ControlledInput;
+export default TextArea;
diff --git a/src/components/Input/style.css.ts → src/components/Input/TextArea/style.css.ts b/src/components/Input/style.css.ts → src/components/Input/TextArea/style.css.ts
@@ -3,8 +3,6 @@ import { recipe } from '@vanilla-extract/recipes';
 
 import { COLORS } from '@/src/styles/tokens';
 
-export const inputHeight = createVar();
-
 export const conatiner = recipe({
   base: [
     {
@@ -18,9 +16,6 @@ export const conatiner = recipe({
   variants: {
     type: {
       primary: { border: `2px solid ${COLORS['Blue/Gradient']}` },
-      secondary: {
-        backgroundColor: COLORS['Grey/100'],
-      },
     },
     error: {
       true: {
@@ -30,60 +25,48 @@ export const conatiner = recipe({
   },
 });
 
+export const inputHeight = createVar();
 export const contentWrapper = style({
   display: 'flex',
   alignItems: 'center',
   width: '100%',
   height: inputHeight,
+  maxHeight: '260px',
 });
 
 export const label = style({
   width: '100%',
 });
 
-export const input = recipe({
-  base: [
-    {
-      width: '100%',
-      height: inputHeight,
-      resize: 'none',
-      color: COLORS['Grey/900'],
-      fontSize: '17px',
-      lineHeight: '27px',
-      '::placeholder': {
-        color: COLORS['Grey/250'],
-      },
-    },
-  ],
+export const input = style({
+  padding: '0',
+  width: '100%',
+  height: inputHeight,
+  maxHeight: '216px',
+  resize: 'none',
+  color: COLORS['Grey/900'],
+  fontSize: '17px',
+  lineHeight: '27px',
+  '::placeholder': {
+    color: COLORS['Grey/250'],
+  },
 });
 
-export const alert = recipe({
+export const submitWrapper = recipe({
   base: [
     {
       display: 'flex',
-      alignItems: 'center',
-      marginTop: '12px',
+      alignItems: 'flex-end',
+      paddingLeft: '20px',
     },
   ],
-});
-
-export const alertMsg = recipe({
-  base: [
-    {
-      marginLeft: '6px',
-      color: COLORS['Grey/600'],
-      fontSize: '13px',
-      fontWeight: '600',
-      lineHeight: '17px',
+  variants: {
+    hasValue: {
+      true: {
+        height: '100%',
+      },
     },
-  ],
-});
-
-export const submitWrapper = style({
-  display: 'flex',
-  alignItems: 'flex-end',
-  paddingLeft: '20px',
-  height: '100%',
+  },
 });
 
 export const submit = style({
@@ -105,3 +88,17 @@ export const currentTextCount = style({
   fontSize: '14px',
   fontWeight: '700',
 });
+
+export const alert = style({
+  display: 'flex',
+  alignItems: 'center',
+  marginTop: '12px',
+});
+
+export const alertMsg = style({
+  marginLeft: '6px',
+  color: COLORS['Grey/600'],
+  fontSize: '13px',
+  fontWeight: '600',
+  lineHeight: '17px',
+});