[Feat/#65] 커뮤니티 뷰 구현 #86
Conversation
Leeyoonji23
requested review from
ocahs9,
minjeoong and
yarimu
and removed request for
ocahs9 and
minjeoong
| { id: "/community/category?symptom", label: "증상·질병", path: "/community/category?type=symptom", svg: IcShape }, | ||
| { id: "/community/category?hospital", label: "병원고민", path: "/community/category?type=hospital", svg: IcShape }, | ||
| { id: "/community/category?healing", label: "일상·치유", path: "/community/category?type=healing", svg: IcShape }, | ||
| { | ||
| id: "/community/category?magazine", | ||
| label: "코코스매거진", | ||
| path: "/community/category?type=magazine", | ||
| svg: IcShape, | ||
| }, |
There was a problem hiding this comment.
p3) id 를 이렇게 지정한 이유가 있을까요????
쿼리파라미터 기본 형식과 다른 것 같아서요!
There was a problem hiding this comment.
ㅎ..ㅎ 옆에거 복붙하다가 잘못들어갔나봐요.. 수정했습니다 -!
| {isActive && ( | ||
| <IcUnderline | ||
| style={{ | ||
| position: "absolute", | ||
| bottom: "-1.2rem", | ||
| left: "50%", | ||
| transform: "translateX(-50%)", | ||
| width: "2.4rem", | ||
| }} | ||
| /> | ||
| )} |
There was a problem hiding this comment.
p4) 이거 inline 스타일 준 이유가 있을까유
There was a problem hiding this comment.
p3) 이 정도의 양이라면 차라리 겉에 span으로 감싸고, 해당 span에 className을 주는게 더 나아보여요!
There was a problem hiding this comment.
준혁오빠 의견 동의합니다 ! className으로 뺐어요!
| @@ -28,7 +34,7 @@ const Nav = () => { | |||
|
|
|||
| return ( | |||
| <div className={styles.container}> | |||
| {NAV_CONTENT.map((item) => { | |||
| {content.map((item) => { | |||
| const SvgComponent = item.svg; | |||
|
|
|||
| return ( | |||
There was a problem hiding this comment.
p2) 쿼리 스트링 관련해서 코멘트 남깁니다.
세팅 방법은 여러가지 입니다.
제가 남긴 방법 말고도 여러가지 방법이 있으니까, 한번 검색해서 찾아보는 것도 좋을 것 같아요!
- 🎱 useSearchParams Hook 사용
import { useSearchParams } from "react-router-dom";
const MyComponent = () => {
const [searchParams, setSearchParams] = useSearchParams();
// 쿼리 스트링에서 페이지 type 가져옴
const id = searchParams.get("type"); // ?id=123 => "123"
// 쿼리 스트링 세팅
const updateQuery = () => {
setSearchParams({ type: "symptom" }); // URL: ?type=symptom
};- 🎱 React Router의 useNavigate 사용
import { useNavigate } from "react-router-dom";
// 쿼리 스트링 세팅
const params = new URLSearchParams();
params.set("type", "symptom");
navigate({
pathname: "/",
search: `?${params.toString()}`,
});
// 가져올 때는
const pagetype = searchParams.get("type"); // ?type=symptom
[ 참고자료 :
https://developer.mozilla.org/ko/docs/Web/API/URL/searchParams ]
There was a problem hiding this comment.
레전드 코리다.... 참고자료 공유까지 감사합니도🥹❤️👍
There was a problem hiding this comment.
p3) 민정이가 너무 잘 남겨줬네요! 저거 잘 참고하고, 제가 구두로 설명했던 내용들 잊지 말고 구현하면 좋을 것 같아요!
- category?type = 타입내용 을 쿼리로 잘 받아와서, 타입에 따라 적절한 화면 렌더링 구현하기
- 만약 없는 타입이 입력되었다면 빈 화면 렌더링하거나, 센스 있게 "해당 타입은 존재하지 않습니다" 텍스트가 써진 화면 렌더링
또 이해 안되면 물어봐주세요 ~!
…35-APPJAM-WEB-COCOS into feat/#65/communityView
…35-APPJAM-WEB-COCOS into feat/#65/communityView
🔥 Related Issues
✅ 작업 리스트
🔧 작업 내용
커뮤니티 메인 뷰 구현했어용
Nav 바 활용해서
요로코롬
변경사항 커밋했습니다.
position:"sticky"값 줘서 더 스크롤 될 때 더 올라가지 않게 했습니다bandicam.2025-01-17.06-59-48-406.mp4
😵💫 잘 모르겠어요
커뮤니티 대분류 아이콘 들어갈 부분 누르면 그 분류 페이지로 들어가야되는데 쿼리 파라미터를 어디서 어떻게 세팅해야할지 감이 잡히질 않아서 의견 주시면 감사하겠습니다 -!
📸 스크린샷 / GIF / Link
bandicam.2025-01-17.06-47-30-245.mp4