-
Notifications
You must be signed in to change notification settings - Fork 0
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat(member): 관리페이지 Aside TOC Panel
추가
#248
Conversation
🦋 Changeset detectedLatest commit: 6541697 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
@@ -29,7 +29,9 @@ const Header = ({ children, title, description }: SectionHeaderProps) => { | |||
return ( | |||
<div className="flex items-center justify-between"> | |||
<div> | |||
<h2 className="text-xl font-bold text-black">{title}</h2> | |||
<h2 id={encodeURI(title)} className="text-xl font-bold text-black"> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
섹션의 ID가 겹칠 수 있는 유스 케이스가 있다고 생각해요, 동일한 ID가 있을 경우 어떻게 되나요?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
해당 ID를 조금 더 구체화 하는 방법을 사용하겠습니다. useId
훅을 사용하면 될 것 같네요
|
||
return ( | ||
<> | ||
{location.pathname === '/manage' && ( |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
{location.pathname === '/manage' && ( | |
{location.pathname === PATH.MANAGE && ( |
apps/member/src/components/panels/ShortcutPanel/ShortcutPanel.tsx
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
수고하셨어요!! :)
Summary
Tasks
scroll padding
을 적용했습니다. 이는 현재 바로가기로 이동 시nav
의 세로 크기 만큼 영역이 가려지기 때문입니다.scroll-behavior
를smooth
로 적용했습니다.Section.Header
의h2
컴포넌트에id
값을 부여했습니다. (바로가기 이동을 위함)/manage
경로에서만 표시됩니다.ETC
Section.Header
의h2
를 감지하고 이를 반영합니다. 따라서 관리페이지에서 TOC에 항목을 추가하고싶으시다면Section.Header
를 사용하시면 됩니다.Screenshot