[Feat/#65] 커뮤니티 뷰/ 대분류 구현 #107
Conversation
…35-APPJAM-WEB-COCOS into feat/#65/communityView
…35-APPJAM-WEB-COCOS into feat/#65/communityView
Leeyoonji23
changed the title
Leeyoonji23
requested review from
ocahs9,
minjeoong and
yarimu
and removed request for
ocahs9
Leeyoonji23
added
🎨 design
Leeyoonji23
changed the title
| import FilterBottomSheet from "@shared/component/FilterBottomSheet/FilterBottomSheet"; | ||
| import { useFilterStore } from "@store/filter"; | ||
|
|
||
| const categoryMapping: { [key: string]: string } = { |
There was a problem hiding this comment.
p5) 오 객체 타입 정의까지 해주었네요? 혹시 그 이유가 뭔지 물어봐도 될까요?
아마 저런 타입으로 정의해두면 추후 카테고리가 확장될 때에는 좋을 것 같긴한데, 굳이 필요했나 싶긴 해서요!
(그렇다고 지울 필요는 전혀 없습니다. 작성하지 않아도 될텐데 작성한 이유가 궁금한거에요!)
There was a problem hiding this comment.
이건 기획분들에게 여쭤봤을 때 추후 스프린트 때 대분류가 늘어날 가능성이 있을 수도 있다고 하셔서 공부하는 김에 써봤습니당...ㅎㅅㅎ
| export const fetchCategories = async (type: string): Promise<CategoryItem[]> => { | ||
| try { | ||
| const response = await fetch(`/api/categories?type=${type}`); | ||
| if (!response.ok) { | ||
| throw new Error("Failed to fetch categories"); | ||
| } | ||
| const data = await response.json(); | ||
| return data.data.categories.items; | ||
| } catch (error) { | ||
| console.error("Error fetching categories:", error); | ||
| return []; | ||
| } | ||
| }; |
There was a problem hiding this comment.
p3) 이 함수는 어디에 사용하는건가요?
만약 사용하지 않는 함수라면 지워주세요! (추후 어디에 사용할거면 위에 주석이라도 간단히 달아주세요)
There was a problem hiding this comment.
쿜ㅋㅋㅋ 이거 사실 API 붙이는 형식 연습해보려고 하다가 지운 줄 알았는데 들어갔네융.... 쿜... Category.tsx 파일 하나로 통합했습니다!
| // 유효하지 않은 타입 처리 | ||
| if (!type || !validTypes.includes(type)) { | ||
| return ( | ||
| <div> | ||
| <h1>해당 카테고리는 존재하지 않습니다.</h1> | ||
| </div> | ||
| ); |
There was a problem hiding this comment.
p5) 예외처리 해두라고 말했는데 찰떡같이 알아들었구나.. 칭찬합니다
| {/* 코코스매거진이 아닐 때만 플로팅 버튼 표시 */} | ||
| {type !== "magazine" && ( | ||
| <div className={styles.floatingBtnContainer}> | ||
| <FloatingBtn /> | ||
| </div> | ||
| )} | ||
| </div> |
There was a problem hiding this comment.
p1) 코코스 매거진 아닐 때만 플로팅 버튼 표시하도록 하는 건 좋은데, 버튼에 기능이 들어가 있지 않은 것 같아요!
해당 버튼을 클릭할 시, 글 작성 페이지로 navigate 하는 로직이 필요할 것 같아요
(추가로, 그냥 navigate하는게 아니라 쿼리 파라미터를 보내면서 navigate를 하는게 좋을 것 같아요 - 어떤 타입의 쿼리 파라미터를 설정할 지는, 글 작성 페이지를 만든 민정이랑 상의해보는 게 좋을 듯!)
| const handleSearchClick = () => { | ||
| navigate(API_PATH.SEARCH); | ||
| }; |
There was a problem hiding this comment.
p2) API_PATH_SEARCH 가 아니라, 그냥 PATH.어쩌구 를 써야하는 게 아닌가요?
아마 api용 상수 path랑 저희 페이지용 상수 path를 헷갈린 것 같은데, 실수한 게 맞다면 수정 부탁드립니다~
There was a problem hiding this comment.
아핳 ㅋㅎㅋㅎ 꺽 ... 넵
| <div className={styles.btnContainer}> | ||
| <FloatingBtn /> | ||
| </div> |
There was a problem hiding this comment.
p1) 여기도 마찬가지로 버튼에 기능 붙여주세요~
아마 여기서 넘어가는 건 쿼리 파라미터 없이 넘어가서 글 작성 시 카테고리 선택 안된 상태가 되어야 할 것 같은데 이것도 민정이랑 얘기해보면 좋을 것 같아요!
| import Content from "@common/component/Content/Content"; | ||
|
|
||
| const PostList = () => { | ||
| const [isActive, setIsActive] = useState(true); // true: 최신글, false: 인기글 |
There was a problem hiding this comment.
p3) 이거 네이밍만 살짝 바꿔보면 더 상태의 의미가 명확해질 것 같아요!
isActive 대신 isRecentPost 같은 건 어떤가요?
| commentCount={post.commentCount} | ||
| createdAt={isActive ? post.createdAt : post.updatedAt} | ||
| image={post.image} | ||
| onClick={() => navigate(`/post/${post.id}`)} |
🔥 Related Issues
✅ 작업 리스트
<커뮤니티 메인 뷰>
<커뮤니티- 대분류들>
🔧 작업 내용
기존 커뮤니티 뷰는 동일한데 추가된 점은 Category 폴더입니다,
Path.ts 에
CATEGORY:"/community/category",추가,
Community.tsx 에
{ path: PATH.COMMUNITY.CATEGORY, element: <Category /> },추가했습니다.
각 페이지 별 주소는 노션 참고해주시면 될 것 같습니다 !
쿼리 파라미터 사용했습니다.
기존
width:"37.5rem"으로 고정시킨것도 반응형 고려하여 다시 스타일링 했습니다.하단 Nav 바
max-width적용 안시켰더니 반응형으로 돌렸을 때 화면에 넘쳐서maxWidth : "76.8rem"적용시켰습니다 !📣 리뷰어에게 어떠신가요?
살벌한 코리 부탁드립니도.
많관부 ~~
📸 스크린샷 / GIF / Link
커뮤니티 메인 뷰
bandicam.2025-01-19.07-46-52-941.mp4
최신글/인기글
bandicam.2025-01-19.07-48-10-826.mp4
카테고리 대분류 / 필터적용
bandicam.2025-01-19.07-49-06-973.mp4
플로팅버튼
bandicam.2025-01-19.07-50-15-049.mp4