# 211208 TIL ([React, tsx] type 마다 컴포넌트 내용 변경하기)

장기현장실습

PLSnote 이슈

#2678 노트작성 버튼이 나타나는 곳을 더 확대하고자 합니다 이슈 진행중 

• 맵/전략/세부전략에서 새 노트 작성시 나올 프로젝트 리스트 중 하나의 오류가 있었다. Detailed_strategy_id=300 일 때 프로젝트 리스트가 5개가 나오는데 plan에서 간단히 보기로 확인해보면 7가지가 나오는 것이었다. 수정님께 여쭤보니까 페이지네이션할 때의 쿼리가 문제가 되어 잘못 나오는 거라고 하셔서 현재 코드의 문제는 없었다. 

 

SNU 성문분석 이슈

#50 N:N 분석(시각화) 기능 추가 이슈 진행중 

• N:N 분석 컴포넌트 type 수정 
  • relations: string 이라는 타입을 주어 타입에 따라 컴포넌트가 다르게 나오도록 코드를 작성했었다. 그런데 기존에 analysisType: string도 있고, multiple?: boolean도 있어서 헷갈릴 수 있다. 그래서 모든 analysisType으로 통일하기로 하여 해당 부분이 사용된 코드를 모두 수정했다.

    // ex) SelectedVoiceCard.tsx
    
    type Props = {
      className?: string,
      analysisType: string,
      voices: Voice[]
    }
    
    export default function SelectedVoiceCard({ className, analysisType, voices } : Props): JSX.Element {
        return (<>
        <Card className={ `shadow ${className}` }>
            <Card.Header className="py-3">
              <h6 className="m-0 font-weight-bold text-primary">선택된 음성{
                analysisType === '1toN' || analysisType === 'NtoN' ? <div className="float-right">총 {voices.length}개</div> : null
              }</h6>
            </Card.Header>
            <Card.Body className={analysisType === '1toN' || analysisType === 'NtoN' ? 'h-20-scrollable' : ''}>
                { analysisType === "1to1" && <>
                  <Row>
                      <Col className="font-weight-bold">이름</Col>
                      <Col className="text-right">{ voices.length > 0 ? voices[0].name : '음성 없음' }</Col>
                  </Row>
                  
                  ...
                  
                  중략

    
    
  • 1:1 분석, 1:N 분석, N:N 분석 파일 이름을 통일 시키고자 기존의 single, multiple 대신 OneToOne, OneToMany, ManyToMany를 사용하기로 했다. Route 관련 파일을 수정하고 모듈을 import, export 하는 부분도 수정했다.