[테일윈드 클래스 변경] - 개인 프로젝트 (LOL) #리팩토링 ⚙️

간단한 프로젝트 소개

• Riot API를 사용하여 롤 도감 사이트 제작
• 챔피언 목록, 챔피언 상세 정보, 로테이션 정보, 아이템 정보 등을 확인할 수 있다. 
• 사용기술: `Next.js`, `React`, `TypeScript` . . .

챔피언

• 챔피언 목록 (+로테이션)
  • 전체 챔피언의 목록을 확인할 수 있다. (전체 목록, 역할군 별 목록)
• 챔피언 상세
  • 챔피언의 상세 정보를 확인할 수 있다. (챔피언 정보, 스킬, 스킨 등)
• 아이템 목록
  • 전체 아이템 목록을 볼 수 있다.
  • 특정 아이템을 선택하면 상세 정보, 상위 아이템, 하위 아이템을 확인할 수 있다.

챔피언 목록

 

챔피언 상세

아이템 정보

 

로테이션 목록

---

🚨 변경 내용

이번 리팩토링은 매우매우 간단한 문제여서 기분이 좋았다. 테일윈드를 사용해본적이 별로 없어서 생긴 아주 조그마한 이슈였다. 테일윈드에서 기본적으로 제공해주지 않는 클래스에 대해서는 `[] ` 를 사용해서 지정하곤 한다. (ex: `w-[100px]`) 

그래서 `width: 100%` 속성도 왠지 없을 것 같아서 `w-[100%]` 로 사용했는데 `w-full` 을 사용했으면 되었던 것 .. 

 

사실 `w-full`이 있는건 알고 있었는데 `100vw` 인줄 알고 사용을 안했었다. ㅋ.ㅋ 쨋든 변경 끝