[Project] React 컴포넌트 만들기 및 github issue & projects

Project

팀 프로젝트 컴포넌트 만들기

React 팀 프로젝트

github issue & projects

github issue에 필요한 작업들 모두 생성한다.

label은 high priority와 low priority만 일단 생성하고, 기본적으로 하는 작업에는 따로 label을 달지 않는다.

projects와 연동하여 todo -> in progress -> review -> done으로 관리한다.

컴포넌트 만들기

Input Components

• TextInput

    id: PropTypes.string,
    placeholder: PropTypes.string,
    onChange: PropTypes.func.isRequired,
    value: PropTypes.string.isRequired,
  

  id: 사용 컴포넌트의 편의성을 위해 (e.target.id로 사용) 추가
  placeholder: input 안내
  onChange: input value를 감지하는 함수
  value: input의 value

• SelectInput

  const SelectInput = ({ id, defaultOption, onChange, value, options }) => (
    <Select id={id} onChange={onChange} value={value}>
      <option value="">{defaultOption}</option>
      {options.map((option) => (
        <option key={option} value={option}>
          {option}
        </option>
      ))}
    </Select>
  );
  

  기본 옵션을 defaultOption으로 받고, 선택 옵션들을 options 배열로 받는다.

• StarsInput

  • 사용 컴포넌트

    function App() {
      const [currentStars, setCurrentStars] = useState(0);
    
      const handleStarClick = (star) => setCurrentStars(star);
    
      return (
        <div className="App">
          <StarsInput
            placeholder="별점을 입력하세요"
            currentValue={currentStars}
            onClick={handleStarClick}
          />
        </div>
      );
    }
    

    StarsInput을 사용하는 컴포넌트에서 현재 선택된 별점 점수 state를 관리해야한다.

  • StarsInput 컴포넌트

    const starsArr = [1, 2, 3, 4, 5];
    
    const StarsInput = ({ placeholder, currentValue, onClick }) => {
      return (
        <Container>
          <Stars>
            {starsArr.map((star) => (
              <Star
                key={star}
                src={star > currentValue ? grayStar : blueStar}
                alt={`별점 ${star}점 선택`}
                onClick={() => onClick(star)}
              />
            ))}
            <span>{currentValue}</span>
          </Stars>
          <p>{placeholder}</p>
        </Container>
      );
    };
    

    별점 선택할 때에는 이미지를 하나씩 5개로 나타냈다. 상위 컴포넌트에서 set되는 currentValue가 map 돌고 있는 star(숫자)보다 작은 경우에만 선택된 것으로 간주하여 blueStar로 나타낸다.

Input 컴포넌트는 일단 모두 만들었다.

하지만, FileInput은 실제 파일을 프론트에서 S3에 등록하고 url만 백엔드로 넘겨주는 것이므로 실제 파일을 어떻게 상위 폴더로 가져갈 수 있는지에 대해 아직 알지 못한다.

file 입력 구현할 때 수정이 필요할 수도 있을 듯 하다.