feat: 컴포넌트 문서 페이지 공통 레이아웃 구현 - #109
Open
hyoseong1994 wants to merge 5 commits into
Open
Conversation
5 tasks
Deploying with
|
| Status | Name | Latest Commit | Preview URL | Updated (UTC) |
|---|---|---|---|---|
| ✅ Ready View logs |
daleui | 82803a6 | Commit Preview URL | Jul 29 2026, 05:34 AM |
hyoseong1994
force-pushed
the
22-docs-layout
branch
from
July 28, 2026 05:16
8038e28 to
72c6ce7
Compare
Highlight the toc entry matching the scroll position, scroll smoothly to the clicked entry and move focus to its heading. The active item is computed from heading positions instead of IntersectionObserver, because sections taller than the viewport leave gaps where no heading intersects. Positions are read once per frame and cached so React's snapshot checks do not force synchronous layout. Anchor scrolling is performed by react-router's ScrollRestoration after commit, so scroll-behavior stays smooth until the scroll settles. While it settles the destination stays highlighted instead of sweeping through the sections in between.
hyoseong1994
marked this pull request as ready for review
July 29, 2026 06:19
SimYunSup
reviewed
Aug 4, 2026
| const [pinnedTocId, setPinnedTocId] = useState<string>(); | ||
| const closeDrawer = () => setIsDrawerOpen(false); | ||
| const styles = docsLayout(); | ||
| const isTocVisible = useMediaQuery(TOC_MEDIA_QUERY); |
Member
There was a problem hiding this comment.
별로 필요없는 코드라고 생각됩니다.
이유: 모바일에서의 계산하지 않는 것이 주 요인인데 과도한 측정이라고 생각됩니다.
| } | ||
| } | ||
|
|
||
| /** 해시가 가리키는 요소로 포커스를 옮겨, 다음 Tab이 링크 목록에 머물지 않게 합니다. */ |
Member
There was a problem hiding this comment.
native hash를 사용하지 않는 이유라도 있을까요?
Comment on lines
+82
to
+92
| {isDrawerOpen && ( | ||
| <Box className={styles.drawerRoot} onClick={closeDrawer}> | ||
| <Box className={styles.drawerScrim} /> | ||
| <Box | ||
| as="aside" | ||
| role="dialog" | ||
| aria-modal="true" | ||
| aria-label="문서 목차" | ||
| onClick={(event) => event.stopPropagation()} | ||
| className={styles.drawer} | ||
| > |
Member
There was a problem hiding this comment.
drawer open 되면 본 내용이 스크롤 안되게 해야 할 것 같습니다.
|
|
||
| describe("DOCS_SEARCH_INDEX", () => { | ||
| it("모든 문서에 카테고리를 채운다", () => { | ||
| expect(DOCS_SEARCH_INDEX).toHaveLength(DOCS_FLAT_ITEMS.length); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
DS-04 시안을 기반으로 컴포넌트 문서 페이지의 공통 레이아웃 골격을 구현했습니다. 모든 문서 페이지가 동일한 3단 레이아웃(사이드바 · 본문 · 목차)을 공유하도록, 페이지마다 레이아웃을 반복 구현하지 않게 했습니다.
본문 콘텐츠(Props 표 · 라이브 데모 · 사용 가이드 등)는 플레이스홀더로 두었고, 실제 콘텐츠는
children슬롯으로 주입하는 후속 작업에서 채웁니다.테스팅
docsNav,DocsToc,useActiveTocId,useHashFocus,useMediaQuery,scrollSmoothly단위 테스트 추가 —vitest전체 통과체크 리스트