[TIL] 내일배움캠프 React 과정 2023.02.20

Today I Learned

• 오후 3시에 원장님께 기본 기능 시연하고 피드백받기
• 로그인 모달, 회원가입 페이지 UI 구현

 

---

typescript에서 styled-components에 여러 개의 props를 넘길 경우

처음에는 props의 타입을 이렇게 지정해 줬었는데 CategoryBtn 하단으로 새로운 스타일 컴포넌트를 작성해도 폰트 색상이 원래대로 적용이 안 돼서 뭔가 이상한가 하는 생각에 문제를 찾다가 타입 지정을 뭔가 잘못해 준 거 같다는 것을 발견했다.

 

interface CategoryBtnStyledProps {
  bg: string;
  text: string;
  border: string;
}

export const CategoryBtn = styled.button<CategoryBtnStyledProps>`
  padding: 0 17px;
  height: 35px;
  background-color: ${(props) => props.bg};
  border: 2px solid ${(props) => props.border};
  border-radius: 10px;
  cursor: pointer;
  font-weight: 500;
  font-size: 15px;
  color: ${(props) => props.text};
  margin-bottom: 12px;
  margin-right: 13px;
`;

그래서 구글링을 하다가 styled-components의 타입을 지정할 때 interface를 사용할 수 있다는 것도 알게 됐다. (지금 생각해 보면 당연히 가능할 거 같다...) 이렇게 하니 문제가 해결되었다. 근데 이게 에러까지는 아닌 거 같고 그냥 코드 치는 데 색깔이 안 먹으니까 불편해서 수정했다.

 

참고 https://thsd-stjd.tistory.com/134

 

---

회고

이제 필수 기능 구현은 거의 마치고 본격적인 UI 구현에 들어갔다. 디자이너가 작업한 피그마를 토대로 UI 구현을 하는 건 처음이라 뭔가 재밌다. 내가 UI를 고민하지 않아도 된다는 게 너무 좋음!

 

그리고 자료조사 중에 '분양모아'라는 실제 서비스되고 있는 사이트를 발견했기 때문에 우리의 프로젝트명을 변경하기로 했다.... 지금 팀원들과 열심히 아이디어 모으고 있는 중~~