chore: 외부 스타일 주입 로직 수정

components/molecules/TextField/text-field-wrapper.tsx

@@ -1,4 +1,4 @@
-import { css, cva } from '@/styled-system/css';
+import { css, cva, cx } from '@/styled-system/css';
 
 import { TextFieldWrapperProps } from './type';
 
@@ -14,11 +14,11 @@ export function TextFieldWrapper({
   isRequired,
   label,
   changeLabelColor = false,
-  addStyles,
+  className,
   children,
 }: TextFieldWrapperProps) {
   return (
-    <section className={css(textFieldWrapperStyles, addStyles)}>
+    <section className={cx(textFieldWrapperStyles, className)}>
       {/* span 컴포넌트 생성시 교체 필요 */}
       <span
         className={css(
@@ -34,7 +34,7 @@ export function TextFieldWrapper({
     </section>
   );
 }
-const textFieldWrapperStyles = css.raw({
+const textFieldWrapperStyles = css({
   position: 'relative',
 });
 

components/molecules/TextField/text-field.tsx

@@ -3,7 +3,7 @@
 import { ChangeEvent } from 'react';
 
 import { DownArrowIcon } from '@/components/atoms';
-import { css, cva } from '@/styled-system/css';
+import { css, cva, cx } from '@/styled-system/css';
 
 import { TextFieldWrapper } from './text-field-wrapper';
 import { TextFieldProps } from './type';
@@ -21,10 +21,10 @@ import { UseTextField } from './useTextField';
  * @param placeholder placeholder 값
  * @param unit variant==='type' 일 때 입력값 단위
  * @param maxLength input의 최대길이
- * @param addStyles input태그 추가 스타일
- * @param addWrapperStyles text-field-wrapper 컴포넌트 추가 스타일 부여
- * @param addAbsoluteStyles 화살표 icon / unit 문자 추가 스타일 부여
- * @param addSubTextStyles 추가 설명 텍스트 추가 스타일
+ * @param className input태그 추가 스타일
+ * @param wrapperClassName text-field-wrapper 컴포넌트 추가 스타일 부여
+ * @param absoluteClassName 화살표 icon / unit 문자 추가 스타일 부여
+ * @param subTextClassName 추가 설명 텍스트 추가 스타일
  * @param onClick variant==='select' 일 때 click 이벤트
  * @param onChange variant==='text' 일 때 change 이벤트
  */
@@ -39,10 +39,10 @@ export function TextField({
   placeholder,
   unit,
   maxLength,
-  addStyles,
-  addWrapperStyles,
-  addAbsoluteStyles,
-  addSubTextStyles,
+  className,
+  wrapperClassName,
+  absoluteClassName,
+  subTextClassName,
   onClick,
   onChange,
 }: TextFieldProps) {
@@ -59,9 +59,9 @@ export function TextField({
       isRequired={isRequired}
       label={label}
       changeLabelColor={(variant === 'text' && isWritten) || focused}
-      addStyles={addWrapperStyles}
+      className={wrapperClassName}
     >
-      <div className={css(inputWrapperStyles)}>
+      <div className={cx(inputWrapperStyles)}>
         <input
           readOnly={variant === 'select'}
           type={inputType}
@@ -75,26 +75,28 @@ export function TextField({
           onBlur={
             variant === 'text' ? () => handlers.changeFocus(false) : undefined
           }
-          className={css(
-            (variant === 'text' && isWritten) || focused
-              ? inputStyles.raw({ isWritten: true })
-              : inputStyles.raw({ isWritten: false }),
-            addStyles,
+          className={cx(
+            css(
+              (variant === 'text' && isWritten) || focused
+                ? inputStyles.raw({ isWritten: true })
+                : inputStyles.raw({ isWritten: false }),
+            ),
+            className,
           )}
           onClick={onClick}
         />
         {/* span태그 컴포넌트로 공통 생성 시 수정 */}
-        <span className={css(absoluteStyles, addAbsoluteStyles)}>
+        <span className={cx(absoluteStyles, absoluteClassName)}>
           {variant === 'select' && hasDownArrow && <DownArrowIcon />}
           {unit}
         </span>
       </div>
-      <span className={css(subTextStyles, addSubTextStyles)}>{subText}</span>
+      <span className={cx(subTextStyles, subTextClassName)}>{subText}</span>
     </TextFieldWrapper>
   );
 }
 
-const inputWrapperStyles = css.raw({
+const inputWrapperStyles = css({
   position: 'relative',
   width: '100%',
   display: 'flex',
@@ -124,14 +126,14 @@ const inputStyles = cva({
   },
 });
 
-const absoluteStyles = css.raw({
+const absoluteStyles = css({
   position: 'absolute',
   right: 0,
   textStyle: 'heading4',
   fontWeight: '500',
 });
 
-const subTextStyles = css.raw({
+const subTextStyles = css({
   color: 'text.alternative',
   textStyle: 'label1.normal',
   fontWeight: '500',

components/molecules/TextField/type.ts

@@ -11,17 +11,17 @@ export interface TextFieldProps {
   hasDownArrow?: boolean;
   placeholder?: string;
   maxLength?: number;
-  addStyles?: object;
-  addWrapperStyles?: object;
-  addAbsoluteStyles?: object;
-  addSubTextStyles?: object;
+  className?: string;
+  wrapperClassName?: string;
+  absoluteClassName?: string;
+  subTextClassName?: string;
   onClick?: () => void;
   onChange?: (text: string) => void;
 }
 
 export interface TextFieldWrapperProps
   extends Pick<TextFieldProps, 'label' | 'isRequired'> {
   changeLabelColor?: boolean;
-  addStyles?: object;
+  className?: string;
   children: ReactNode;
 }

components/molecules/TextField/useTextField.tsx

@@ -1,9 +1,7 @@
 import { useEffect, useState } from 'react';
 
 /**
- * text-field 컴포넌트 관리 용도의 custom-hook.
- * @param value 초기 값
- * @returns input의 text값, focus 여부, input에 값이 있는지 여부, text와 focus를 관리하는 handlers
+ * @description text-field 컴포넌트의 세부적인 데이터 관리 용도의 custom-hook
  */
 export function UseTextField(value?: string) {
   const [text, setText] = useState('');