[Feat] Route Nav 컴포넌트 구현 및 레이아웃 반영 #294
Conversation
| @@ -20,6 +20,7 @@ | |||
| "@tanstack/react-query": "^5.49.2", | |||
| "@tanstack/react-query-devtools": "^5.49.2", | |||
| "axios": "^1.7.2", | |||
| "framer-motion": "^11.11.9", | |||
|
|
||
| if (!teamId) throw new Error('has no teamId'); | ||
| const teamId = localStorage.getItem('teamId'); | ||
|
|
||
| const { ref, currentYear, selectedMonth, handlePrevYear, handleNextYear, endDay, handleMonthClick } = useDate(teamId); | ||
| const { ref, currentYear, selectedMonth, handlePrevYear, handleNextYear, endDay, handleMonthClick } = useDate( | ||
| teamId! | ||
| ); |
There was a problem hiding this comment.
teamId!라고 해줌으로써 undefined 값이 아니라고 명시해주는 걸 최근에 알게됐는데 역시 주용님은 알고 계셨군요 👍🏻
| @@ -20,6 +20,7 @@ | |||
| "@tanstack/react-query": "^5.49.2", | |||
| "@tanstack/react-query-devtools": "^5.49.2", | |||
| "axios": "^1.7.2", | |||
| "framer-motion": "^11.11.9", | |||
| const teamId = new URLSearchParams(location.search).get('teamId'); | ||
|
|
||
| if (!teamId) throw new Error('has no teamId'); | ||
| const teamId = localStorage.getItem('teamId'); |
|
|
||
| const { data } = useGetTimeBlockQuery(+teamId, 'executive', currentYear, currentMonth); | ||
| const { data } = useGetTimeBlockQuery(+teamId!, 'executive', currentYear, currentMonth); |
There was a problem hiding this comment.
위에 Error 던지는 코드가 없어져서 요 ! 를 해준건가요?
There was a problem hiding this comment.
error라기 보다는 teamId가 null일 때의 분기처리를 안하기 위해서 !를 붙혀줬습니다. !는 undefined 혹은 null이 될 수 있는 값이 있을 때, 해당 변수가 null이나 undefined가 되는 것을 무시한다! 라는 의미에용
| <nav> | ||
| <ul css={navListStyle}> | ||
| <li css={{ position: 'relative' }}> | ||
| <Link css={itemStyle(isDrivePage)} to={PATH.DRIVE}> |
There was a problem hiding this comment.
Link 컴포넌트를 클릭하면 to 에 지정된 경로로 이동한다는 것은 알겠습니다.
그런데 이동하고 랜더링 되는 컴포넌트의 위치는 어디서 잡는거죠?
찾아본 바로는 Route 컴포넌트가 위치한 곳으로 잡힌다고 했는데 Route 컴포넌트가 안보여서 질문드립니다!
There was a problem hiding this comment.
Link 태그는 react-router-dom에서 제공하는 요소로, 말씀하신대로 지정한 router 내에 라우트 이동을 담당합니다 ! Route 컴포넌트로 라우트를 정의하기도 하는데, 저희는 createBrowserRouter로 객체 형식으로 라우터를 생성했어요 ! 만약 규홍님이 말씀하신대로 구현한다면 아래와 같아요 !
// router.tsx
return (
<BrowserRouter>
<Route path="..." element={<Home />} />
</BrowserRouter>
)리액트 라우터에서 제공하는 브라우저라우터라는 태그 하위에 각각의 라우트 요소로 path와 element를 정의해주면 됩니다 ! 거의 동일한 방법이긴 하나, 저는 createBrowserRouter를 통해 객체 형식으로 선언하는 것을 선호해서 저렇게 한거에용
해당 이슈 번호
closed #292
체크리스트
shared로 분리했어요.💎 PR Point
새롭게 GUI에 추가된 헤더에
Route이동을 담당하는 Nav 컴포넌트를 추가하였습니다. GUI와 동일하게 "파일", "타임라인", "인수인계 노트" 페이지를 해당 Nav로 이동할 수 있도록 구현하였고,framer-motion을 도입하여 좀 더 UX 적으로 트렌디(?)하게 느껴지도록 애니메이션을 적용하였어요 !추가적으로
Archiving페이지에 헤더랑 Nav 추가해두었고, 지금documentBar는 임시로 다시absolute로 바꾼 상태입니다.. 레이아웃이 도큐먼트바 때문에 조금은 어지럽게 되었는데, 이 부분은 카톡에서 말씀드렸다시피 디자이너분들과 다시 논의하여 오버레이로 바꿀려고 계획하고 있습니다 ..📌스크린샷 (선택)
2024-10-25.4.10.24.mov