1주차의 공통 컴포넌트 구현에 이어 2주차에는 프로필 페이지의 UI를 구현해 보았다. Next.js의 app router를 이용하다보니 라우팅에 대한 이점이 있었고 최대한 활용을 해보려고 했다.
폴더 구조는?
프로필 페이지를 맡다 보니 폴더명을 profile로 지정했고, profile이라는 폴더명으로 url에 접근할 수가 있게 되었다. 리팩토링 하기 전에는 profile 폴더 안에 [userId]를 추가하여 라우팅을 활용하고, userId에 따라 다른 유저의 프로필 페이지에 접근할 수 있도록 구현하였다.
- profile/[userId]/page.tsx (다른 유저 프로필)
- profile/page.tsx (나의 프로필)
위와 같은 구조로 가져갔었다. 이렇게 하니 분리된 두 page.tsx의 역할이 명확하지가 않는다는 느낌이 있었고, 나의 프로필과 다른 유저의 프로필을 나누고 싶다면 확실하게 myprofile/page.tsx와 profile/page.tsx 이런식으로 나누거나, 아예 하나로 통합하는 게 나을거라는 의견들이 나왔다. (모아모아파/쪼개쪼개파) 취향 차이라고 한다.
의견을 듣고, 나는 폴더 구조는 깔끔하게 하나로 가져가는게 좋을 것 같다고 판단을 했다. 코드의 길이가 길어지고 중복되는 현상이 보였기 때문이다. 또한, 리액트 쿼리의 프리패치 기능도 활용할 예정이었기 때문에 해당 코드 역시 두 파일 모두 적용시켜줘야 했다. 결론은 profile/page.tsx 하나로 가기로!
💪 본격적인 구현 시작!
결과물을 먼저 살펴보자.
크게 세 개의 영역을 나눠봤다.
1. 프로필 컴포넌트
2. 활동 내역 컴포넌트
3. 상품 영역 컴포넌트
프로필 컴포넌트와 활동 내역 컴포넌트는 어렵지 않게 구현해 나갔다. flex에 익숙하고 자신이 있었기 때문에, flex를 적극 사용했다. 카드는 그리드가 적합해 보여 그리드로!
😂 순조로울 리가 없지..
역시 예상치 못한 곳에서 에러가 튀어나오는 것이 개발의 매력이 아닐까..? 문제는 브라우저 너비를 줄일 때 카드 컴포넌트가 말썽이었다. 심지어 카드 컴포넌트는 다른 팀원도 사용해야 했기 때문에 구현을 더 신경써서 해야했다.
브라우저가 태블릿 너비로 갈 수록 카드의 이미지, 텍스트, 박스 크기 등이 중구난방이 되었다. 먼저 이미지는 비율의 유지가 되지 않아 잘리는 현상이 일어났다.
이미지 깨짐 해결 과정
'w-full aspect-[284/200] rounded-lg overflow-hidden object-cover'
다행히 aspect-ratio 라는 속성이 존재했던 것이다. aspect-ratio는 컨테이너가 특정 비율을 유지하면서 크기를 조정할 수 있도록 해주는 특징이 있다. 284:200의 비율을 유지하기 위해 테일윈드 스타일에 맞게 aspect-[284/200]으로 지정을 해줬다. 또한, 너비를 100%로 줌으로써 부모 태그인 div태그의 패딩으로 스타일이 좌우되도록 했다.
텍스트 길이로 인한 카드 깨짐 해결과정
'찜' 개수 텍스트와 별 아이콘의 부분이 맞닿기 직전이다. 이미지 상에서는 찜 개수가 4이니 다행이지 999가 되면 평점 부분이 박스 밖으로 튀어나오고 난리가 났다.
결론은 flex-wrap을 사용했다. 딱 맞닿게 되면 평점 부분이 리뷰 텍스트 아래로 넘어오게 된다. 근데, 맞닿기 바로 직전에 wrap이 되어도 UI상 보기 좋지 않았다. 결국에는 맞닿기 직전도 보이게 될 테니까. 이는 gap으로 어느정도 여유 공간을 줬고, wrap이 됐을 때에도 리뷰와 간격이 있도록 column-gap을 추가했다.
이번 주차에서는 새로운 CSS 속성들을 많이 배우게 되었다. 보통 gap만 써봤지 row-gap column-gap이 있는 줄 사실 처음알았다. UI는 이 정도로 마치고 다음 API에서 많은 트러블 슈팅들이 있으니 자세하게 다뤄보자.
