feat: 인권신고게시판 글 목록 뷰 #212
feat: 인권신고게시판 글 목록 뷰 #212
Conversation
Notion, Figma에 `/human-rights`로 엔드포인트를 지정하여 해당 코드에도 적용하였습니다.
백엔드에서 작업한 엔드포인트가 존재하지 않아 기존 데이터를 참고한 Mock 데이터로 작업하였습니다. 추후 실제 스키마가 정해지면 변경할 예정입니다. 현재 백엔드 테스트가 불가능해 글쓰기 버튼 표시가 설계대로 되었는지 확인하지 않았습니다. 또한 공통 컴포넌트인 `BodyLayout`의 변경이 필요해 추후 논의가 필요합니다.
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
| {/* 잘못된 tailwind.config.js: `min-`, `max-` prefix로 range가 지원되는데 왜 이렇게 breakpoint를 짰을까요?? | ||
| * Reference: https://tailwindcss.com/docs/responsive-design#targeting-mobile-screens | ||
| */} | ||
| <div className="flex basis-full justify-between gap-5 xs:flex-col sm:flex-col"> |
There was a problem hiding this comment.
현재 tailwindcss 설정이 이상하여 breakpoint 관련 유틸리티를 쓸 때 과도하게 클래스가 길어지고 있습니다.
theme: {
screens: { // range로 주지 말고 `389px`처럼 일반 값으로 주어야 tailwind에서 사용하는 `min-{breakpoint}`, `max-{breakpoint}` 유틸리티를 사용할 수 있습니다.
xs: { max: '389px' },
sm: { min: '390px', max: '719px' },
md: { min: '720px', max: '1079px' },
lg: { min: '1080px', max: '1439px' },
xl: { min: '1440px', max: '1919px' },
xxl: { min: '1920px' },
},
...breakpoint 관련 문서 확인하시고 range로 되어있는 설정을 일반 value로 변경할 필요가 있어 보입니다.
만약 range 형태로 사용할 경우 여기 참고하시면 될 듯합니다(min-sm:max:lg:uppercase) 이런 식으로 사용하면 됩니다.
이미 해당 방식을 통해 작성된 코드가 많아 임의로 변경하지 않았고, 변경하게 된다면 관련 코드들을 전부 리팩토링 해야 할 것 같습니다...
There was a problem hiding this comment.
해당 의견 동의합니다. 2차 배포 이후 기존 부원과 신입 부원이 짝을 이루어 리팩토링 하는 과정도 있으면 좋을거 같습니다!
|
추가로 현재 develop 머지하게 되면 백엔드도 없는 미완성의 인권신고게시판이 실수로 배포될 가능성도 있어 보여서, 현재 WBS 작업 단위로 쪼개진 이슈들을 병합하는 관련해서 의견 부탁드립니다~ |
이 문제 해결될 때까지 PR은 Draft로 유지하겠습니다! |
1️⃣ 작업 내용 Summary
기존 코드에 영향을 미치지 않는 변경사항
pages/human-rights/page.tsx에 구현했습니다.components/PostContent/PostContent.tsx에 구현했습니다.기존 코드에 영향을 미치는 변경사항
common/Header/const/pathData.tsx에 인권신고게시판 메뉴 항목을 추가했습니다.pages/router.tsx에 인권신고게시판 path를 추가했습니다.버그 픽스
✚ 피그마
#189 참고바랍니다.
✚ 관련 문서
2️⃣ 리뷰어에게..
3️⃣ 추후 작업할 내용
4️⃣ 체크리스트
develop브랜치의 최신 코드를pull받았나요?