Day26

오늘 할 일

• 마이페이지 mock up ✔️
• 게시글 조회 이미지 수정 ✔️
• 등급 아이콘 변경 ✔️

issue

마이페이지 CSS가 내 컴퓨터에서는 잘 적용되어 보이는데 다른 분들 컴퓨터에서는 이상하게 적용이 안 되어서 원인을 찾게 되었다.
일단 다른 데서 사용한 스타일을 그대로 사용하다보니 클래스 이름을 바꾸지 않고 그대로 가져와서 import 하지 않은 스타일이기 때문에 그런 것 같았다. (그런데 왜 내 화면에서는 잘 보였지?)
그래서 따로 스타일 파일을 만들어 import 시켜주었다.

게시글 작성을 누르고 발급된 post id로 작성된 빈 게시물이 게시글 목록에서는 삭제되는데 마이페이지에서는 삭제되어 보이지 않는 issue 발생

작업 목록

게시글 조회 이미지 수정

이미지 기본 값이 ["", "", "", ""] 이렇게 네 개의 값을 받는 배열로 되어있어서 url이 없는 자리는 이미지 오류가 난다.
그래서 filter 함수를 사용해 배열이 있는 곳만 출력할 수 있게 수정했다.

게시글 카드 컴포넌트화

게시글 카드가 동일한 CSS를 사용해서 계속 똑같은 코드를 반복해서 쓰는 것이 너무 비효율적이라 컴포넌트화 시켜서 사용하기로 했다.
조금씩 다르게 CSS를 주어야 하는 곳은 styeld-components를 활용해 props를 활용해 스타일을 다르게 주었다.

버튼 컴포넌트화

한 곳에서만 쓸 줄 알고 스타일을 하나하나 주었는데 마이페이지에서도 사용해야할 것 같은 버튼을 컴포넌트화 시켜서 적용했다.

마이페이지 mock up

컴포넌트화 시킨 버튼과 게시글 카드를 사용해 비밀번호 변경, 내가 쓴 게시글, 좋아요 한 게시글 페이지 mock up 완료!

등급 이미지 삽입

레벨 1부터 레벨 5까지 해당하는 등급의 이미지를 넣었다!

마이페이지와 헤더에서 확인할 수 있다.