FAQ 섹션 제목과 아코디언 폭을 공통 컨테이너에 맞춤 - #13
Conversation
| </section> | ||
|
|
||
| <section className="prose-section" style={{ padding: "72px 20px 8px" }}> | ||
| <section className="container" style={{ padding: "72px 0 8px" }}> |
There was a problem hiding this comment.
요기 20px 빼신 이유가 있으신가요? 다른 곳은 모두 좌우 20px를 명시하는 걸로 보입니다.
There was a problem hiding this comment.
위쪽의 "우리가 만든 오픈소스" 라인과 일치시키는 것을 고려하여 뺐습니다.
다만 아래 후원하기 컨테이너도 20px 제거하거나 해당 아코디언도 넣는 것으로 통일시키는 것이 좋아보입니다.
There was a problem hiding this comment.
해당 부분은 "우리가 만든 오픈소스" 라인에 맞춰서 후원하기 컨테이너도 길이를 맞추는 편이 좋을까요?
There was a problem hiding this comment.
정확하게 보셨습니다. 오히려 제 질문의 전제가 틀렸던 것 같습니다. "우리가 만든 오픈소스" 섹션은 말씀하신 대로 좌우 패딩이 0이 맞고, 제가 그 부분을 놓치고 여쭤봤네요. 😅
좌우 패딩을 아예 지정하지 않는 방법은 어떨까요?
<section className="container section" style={{ paddingBlock: "72px 8px" }}>paddingBlock은 위아래만 지정하는 속성이라 좌우는 건드리지 않습니다. 이렇게 하면 이 PR의 목적이 달성될 뿐만 아니라 #4 수정 후 .section이 어떻게 바뀌든 자동으로 따라갈 것 같습니다.
"후원하기 컨테이너도 20px을 빼거나, 아코디언에 넣거나 통일하자"고 하신 것도 맞는 방향입니다. 그런데 9군데를 모두 손봐야 해서 본 PR의 범위에서 벗어나므로 전체 통일은 #4에서 다루는 게 리뷰하기도 수월할 것 같습니다.
There was a problem hiding this comment.
이해했습니다. 추가로 손봐야할 곳이 생기는군요. 제 생각에도 #4 에서 다루는 편이 좋을 것 같습니다. 감사합니다.
DaleSeo
left a comment
DaleSeo
left a comment
There was a problem hiding this comment.
이슈에서 FAQ 전체를 .container 폭으로 넓히는 안을 대안으로 적으면서 "가독성이 떨어질 수 있어 확인이 필요합니다"라고 남겨뒀는데요. 혹시 이 두 가지 방안을 확인해보시고 결정하셨는지 듣고 싶습니다.
|
데스크탑에서는 폭이 길어져도 |
7004a8b to
1731f49
Compare
Keep the accordion in the narrow prose container while moving only its heading onto the shared homepage alignment line. Constraint: Preserve the readable 720px accordion width Confidence: high Scope-risk: narrow Reversibility: clean Tested: typecheck, vp check, production build, KO/EN desktop and mobile alignment, FAQ disclosure interaction Related: DaleStudy#6
Let FAQ rows and separators span the shared homepage container while capping expanded answer copy at 720px for readable Korean and English line lengths. Constraint: Keep expanded answer text within a readable 720px measure Rejected: Let answers span the full 1120px row | line lengths became too long for comfortable reading Confidence: high Scope-risk: narrow Reversibility: clean Tested: typecheck, vp check, production build, desktop and mobile geometry, disclosure interaction, dual visual review Related: 9a94b1b Related: DaleStudy#6
1731f49 to
fbe9d04
Compare
DaleSeo
left a comment
DaleSeo
left a comment
There was a problem hiding this comment.
남은 피드백은 마이너한 부분이라서 승인합니다. 기여 감사드립니다.
2 participants
당신이 부재할 때 이 PR이 배포되어도 괜찮나요?
bun run typecheck,bunx vp check,bun run build를 모두 통과했고 전체 페이지 prerender도 성공했어요.변경 내용
680px에서1120px로 넓어져요.1120px로 길어지면 읽기 어려워서 답변 텍스트는 최대720px로 제한했어요.<details>와<summary>구조, FAQ 카피, chevron 동작은 변경하지 않았어요.화면 비교
제목만 정렬한 상태
아코디언까지 확장한 최종 상태
검증
bun run typecheckbunx vp checkbun run build1120px, 답변 최대720px확인관련 이슈
기타 공유하고픈 내용 (선택 사항)