섹션에 id를 부여해 URL 앵커로 이동할 수 있게 한다 - #28
Open
1005hoon wants to merge 1 commit into
Open
Conversation
Deploying with
|
| Status | Name | Latest Commit | Preview URL | Updated (UTC) |
|---|---|---|---|---|
| ✅ Deployment successful! View logs |
dalestudy | 20f9fd4 | Commit Preview URL Branch Preview URL |
Aug 10 2026, 04:44 AM |
1005hoon
force-pushed
the
feat/section-anchors
branch
3 times, most recently
from
August 10, 2026 03:55
a6a8135 to
dd59413
Compare
1005hoon
marked this pull request as ready for review
August 10, 2026 04:11
각 페이지의 섹션 제목 스무 개에 로케일과 무관한 영어 슬러그를 id로 부여하고, 제목 옆에 그 섹션을 가리키는 permalink를 노출한다. 링크 하나로 "소개 페이지의 운영진 부분"처럼 특정 위치를 가리킬 수 있다. - SectionHeading 컴포넌트를 추가하고 제목 스무 개를 교체한다. id는 감싸는 section에 두고, 컴포넌트는 anchor로 같은 값을 받아 링크를 만든다. - 슬러그는 src/anchors.ts의 ANCHORS에 모아 두고 section과 컴포넌트가 함께 참조한다. 외부 링크가 이 값에 의존하므로 한번 공개하면 바꾸지 않는다. - 미션과 비전, 커피챗과 모각코는 각자 h2를 가진 절이라 div를 section으로 바꾼다. 관련 CSS가 자식 태그 선택자를 쓰지 않아 화면은 그대로다. - CTA 배너 제목 세 개는 링크로 가리킬 목적지가 아니라 제외한다. - #reviews 개별 규칙을 section[id]로 일반화하고, 헤더 높이를 --header-height로 상수화해 scroll-margin-top이 이를 참조하게 한다. - 경로에서 로케일을 읽는 useLocale 훅을 추가하면서 __root와 NotFoundPage에 중복돼 있던 두 줄도 정리한다. permalink 아이콘은 daleui에 링크 아이콘이 없어 우선 # 문자를 쓴다. Closes #22
1005hoon
force-pushed
the
feat/section-anchors
branch
from
August 10, 2026 04:44
dd59413 to
20f9fd4
Compare
DaleSeo
reviewed
Aug 16, 2026
Comment on lines
+22
to
+28
| <h2 className={className} style={style}> | ||
| <span className="heading-text">{title}</span> | ||
| {/* TODO: daleui에 링크 아이콘이 추가되면 Icon으로 교체한다 */} | ||
| <a className="heading-anchor" href={`#${anchor}`} aria-label={ANCHOR_LABEL[locale](title)}> | ||
| # | ||
| </a> | ||
| </h2> |
Member
There was a problem hiding this comment.
#22 (comment) 에서 Vercel 블로그처럼 heading을 왼쪽 여백에 배치하면 콘텐츠 영역을 직접 차지하지 않으면서 부가 기능의 시각적 우선순위를 낮게 유지할 수 있다고 제안해 주셨고 제가 동의를 했던 것 같은데요. 현재 구현은 제목 오른쪽 인라인으로 되어 있고 콘텐츠 영역 안에 들어와 있습니다. 혹시 구현 과정에서 배치 방식을 변경하게 된 이유가 있었을까요?
| )} | ||
|
|
||
| <section className="detail-container" style={{ paddingBlock: "48px 72px" }}> | ||
| <section className="detail-container" id={anchors.join} style={{ paddingBlock: "48px 72px" }}> |
Member
There was a problem hiding this comment.
AGENTS.md 에 "CTA 배너 제목처럼 링크로 가리킬 이유가 없는 제목은 예외"라고 적어두셨는데, 정작 같은 .join-cta 배너를 쓰는 다른 곳은 <h2> 그대로인데 여기만 앵커가 붙었습니다. 예외로 두지 않을 만한 이유가 따로 있었을까요?
Comment on lines
+11
to
+12
| /** 감싸는 섹션의 id와 같은 값. 외부 링크가 의존하므로 한번 공개하면 바꾸지 않는다. */ | ||
| anchor: string; |
Member
There was a problem hiding this comment.
같은 슬러그를 <section id={anchors.x}>와 <SectionHeading anchor={anchors.x} /> 두 군데에 따로 적어야 하고, 둘이 어긋나도 타입 검사나 빌드에서 잡아내지 못한 채 클릭해도 아무 반응이 없는 링크만 남게 됩니다. 지금은 AGENTS.md의 가이드로만 강제하고 있는데, 이 둘을 코드 차원에서 묶어둘 방법이 있을까요?
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.
Closes #22
변경 사항
섹션 헤더에 고정된
id를 부여해 URL 앵커로 직접 이동할 수 있게 합니다.SectionHeading으로 통일한다<section>에 로케일과 무관한 slug를id로 지정한다리뷰 요청
아래 두 가지에 대해 의견을 구하고 싶습니다.
#으로 표시했는데, 별도 링크 아이콘을 추가하는 편이 나을지앵커 동작은 prerender된 HTML에서 확인했습니다.