# 211221 TIL ([React, tsx] 부트스트랩 UI 수정)

장기현장실습

SNU 성문분석 이슈

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

• card header의 버튼 크기 때문에 컴포넌트마다 header height가 맞지 않는 문제가 있었다. 부트스트랩을 사용하고 있기 때문에 상세 조절을 할 수 없었기 때문이다. 그래서 결국 card header의 높이를 모두 넓혀 맞추기로 했다. padding x값을 3에서 4로 바꿔주었다.

  <Card.Header className="py-4"> 
    <h6 className="m-0 font-weight-bold text-primary">분석 결과</h6> 
  </Card.Header>

  

• 음성 등록 페이지의 전반적인 UI를 수정했다. 삭제 수정 버튼의 text를 제거하고 outline design으로 바꿨다. 그리고 음성 재생 버튼도 outline으로 통일감을 주었다.

  

• 모든 페이지의 버튼 컬러를 일치시켰다. 기본 값인 primary로 모두 바꾸고 분석하기만 info 값을 주어 다른 색으로 변경했다.