공통 컴포넌트 - NicknameInput.jsx PR 피드백 수정

저번 포스팅에서는 Example.jsx 에서 props의 status 값을 제어했는데, 이렇게 한다면 개발 중 또는 유지보수 시 상태값의 종류나 네이밍이 수정될 경우 이를 모든 곳에서 수정이 필요하기 때문에 번거로울 것이고, 상태값에 대한 명시가 헷갈릴 수 있을 것 같다는 팀원의 피드백이 있었다. 있었다.d

 

NicknameInput 컴포넌트 내부에서 value를 기반으로 status를 결정하도록 코드를 수정했다.

 

NicknameInput.jsx

import styled from "styled-components";

const NicknameInput = ({ type, placeholder, value, onChange }) => {
    // value 값(사용자 입력값)을 기반으로 status를 결정

    const status =
        value === "test"
            ? "duplicate"
            : value.length > 0
              ? "typing"
              : "default";

    return (
        <Input
            type={type}
            placeholder={placeholder}
            value={value}
            onChange={onChange}
            $status={status} // styled-components에 상태 전달, transient props
        />
    );
};

const Input = styled.input`
    background-color: transparent; // 기본 배경색 제거 (투명하게 설정)
    border: none; // 기본 테두리 제거
    outline: none; // 클릭했을 때 outline 제거
    width: 350px;
    height: 40px;

    // status prop에 따른 스타일 적용
    border-bottom: 1px solid
        ${({ $status, theme }) =>
            $status === "typing"
                ? theme.colors.main
                : $status === "duplicate"
                  ? theme.colors.sub
                  : theme.colors.gray_500};

    color: ${({ $status, theme }) =>
        $status === "typing"
            ? theme.colors.main
            : $status === "duplicate"
              ? theme.colors.sub
              : theme.colors.gray_400};

    &::placeholder {
        color: ${({ $status, theme }) =>
            $status === "typing"
                ? theme.colors.main
                : $status === "duplicate"
                  ? theme.colors.sub
                  : theme.colors.gray_400};
    }
`;

export default NicknameInput;

 

Example.jsx

여기서는 더 이상 status를 관리할 필요가 없다.  

value와 onChange 핸들러만 NicknameInput에 전달하면 된다.

import styled from "styled-components";
import { NicknameInput } from "../components/common";
import { useState } from "react";
// 상태관리는 NicknameInput.jsx 에서
function Example() {
    const [value, setValue] = useState("");

    const onChange = (event) => {
        setValue(event.target.value);
    };

    return (
        <InputConatiner>
            <NicknameInput
                type="text"
                placeholder="id를 입력하세요."
                value={value}
                onChange={onChange}
            />
        </InputConatiner>
    );
}

const InputConatiner = styled.div`
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
`;

export default Example;

---

JSDoc을 추가하자.

JSDoc을 사용하여 컴포넌트에 대한 문서를 추가하는 것은 코드의 가독성과 유지보수성을 높이는 데 도움이 된다.
JSDoc을 컴포넌트에 추가하려면 각 컴포넌트 파일의 최상단에 주석을 추가하면 된다.

- NicknameInput 컴포넌트
props에 대한 정보(props 타입과 기능) 제공하는 JSDoc을 추가한다.

- Example 컴포넌트
테스트 코드로, 컴포넌트가 어떤 역할을 하는지 주요 기능을 설명하는 주석을 추가한다.

 

Example 컴포넌트의 JSDoc

import styled from "styled-components";

import { NicknameInput } from "../components/common";

import { useState } from "react";

/**

 * Example 컴포넌트

 *

 * `NicknameInput` 컴포넌트를 사용하여 사용자로부터 입력을 받고 상태를 관리합니다.

 */

function Example() {

    const [value, setValue] = useState("");

    const onChange = (event) => {

        setValue(event.target.value);

    };

    return (

        <InputContainer>

            <NicknameInput

                type="text"

                placeholder="id를 입력하세요."

                value={value}

                onChange={onChange}

            />

        </InputContainer>

    );

}

const InputContainer = styled.div`

    height: 100%;

    display: flex;

    justify-content: center;

    align-items: center;

`;

export default Example;

 

NicknameInput 컴포넌트의 JSDoc

import styled from "styled-components";

/**

 *

 * @param {string} type - 입력 필드의 타입입니다.

 * @param {string} placeholder - 입력 필드에 표시되는 플레이스홀더 텍스트입니다.

 * @param {string} value - 입력 필드의 현재 값을 나타내는 문자열입니다.

 * @param {function} onChange - 입력 필드의 값이 변경될 때 호출되는 함수입니다.

 */

const NicknameInput = ({ type, placeholder, value, onChange }) => {

    // value 값(사용자 입력값)을 기반으로 status를 결정

    const status =

        value === "test"

            ? "duplicate"

            : value.length > 0

              ? "typing"

              : "default";

    return (

        <Input

            type={type}

            placeholder={placeholder}

            value={value}

            onChange={onChange}

            $status={status} // styled-components에 상태 전달, transient props

        />

    );

};

const Input = styled.input`

    background-color: transparent; // 기본 배경색 제거 (투명하게 설정)

    border: none; // 기본 테두리 제거

    outline: none; // 클릭했을 때 outline 제거

    width: 350px;

    height: 40px;

    // status prop에 따른 스타일 적용

    border-bottom: 1px solid

        ${({ $status, theme }) =>

            $status === "typing"

                ? theme.colors.main

                : $status === "duplicate"

                  ? theme.colors.sub

                  : theme.colors.gray_500};

    color: ${({ $status, theme }) =>

        $status === "typing"

            ? theme.colors.main

            : $status === "duplicate"

              ? theme.colors.sub

              : theme.colors.gray_400};

    &::placeholder {

        color: ${({ $status, theme }) =>

            $status === "typing"

                ? theme.colors.main

                : $status === "duplicate"

                  ? theme.colors.sub

                  : theme.colors.gray_400};

    }

`;

export default NicknameInput;