feat(post): 펼친 게시물 본문을 다시 눌러도 접히게

[coldbrow]

0. 링크

• NOOK-213 게시물 상세 > 본문 간소화 인터랙션 추가

1. 요약

• 본문을 펼치면 "접기" 버튼이 화면 아래로 밀려나 읽던 자리에서 접을 수 없었습니다. 펼친 본문 자체를 눌러도 접히게 했습니다.
• 본문을 드래그하거나 길게 눌러 텍스트를 고르는 중에는 접히지 않습니다 — 선택을 마치고 손을 떼면 click 이 따라오는데, 복사하려던 것뿐인데 접히면 안 되니 본문 안에 잡힌 선택이 있으면 넘깁니다.
• 접힌 본문은 그대로 텍스트로 뒀습니다 — 펼치는 건 "더보기" 뿐입니다. 티켓 범위가 "펼쳐진 상태에서 접기"여서 양방향으로 만들지 않았습니다.

2. 작업 내용

• features/post/components/ExpandableCaption 신설. 접힘은 <p class="line-clamp-1">, 펼침은 <button> 으로 렌더해 클릭을 받고, window.getSelection() 이 본문 안을 가리키면 접기를 건너뜁니다.
• 접는 본문 버튼은 tabIndex={-1} 입니다 — 바로 아래 "접기" 버튼이 키보드·보조기기 경로를 이미 담당해서 탭 정지점을 둘로 만들 이유가 없습니다.
• PostDetailPage, SharedPostDetailPage 가 이 컴포넌트를 쓰도록 교체하고 각자 들고 있던 expanded 상태를 제거. 두 화면에 글자까지 똑같이 복사돼 있던 블록이라 하나로 합쳤습니다.
• 개발용 쇼케이스(/dev/ui)에 ExpandableCaption 항목 추가 — 로그인 없이 동작을 눌러볼 수 있습니다.
• 테스트: ExpandableCaption.test.tsx 4건(접힘 상태엔 본문 버튼 없음 / 본문 탭으로 접힘 / 텍스트 선택 중엔 안 접힘 / "접기"로도 접힘), PostDetailPage.test.tsx 에 화면 배선 1건 추가.
• pnpm check 성공(391개). 개발 서버를 띄워 접힘 → 더보기 → 본문 탭 → 접힘까지 실제 브라우저에서 확인했습니다.

성공 기준 대비

• 본문 탭으로 접기 / 접기 버튼 유지 / 텍스트 선택 중 안 접힘: 충족, 각각 테스트가 있습니다.
• 링크·해시태그 구분: 지금은 해당 사항이 없습니다. 본문은 순수 텍스트로 렌더되고 #해시태그 도 링크가 아닙니다. 나중에 링크화하면 그때 <a> 클릭을 걸러야 합니다.
• 전환 애니메이션: 기존에도 즉시 전환이라 그대로 뒀습니다(추가 없음).
• 접힌 뒤 스크롤: 본문 위 콘텐츠 높이가 변하지 않아 본문은 제자리에 있습니다. 다만 문서가 짧아지며 브라우저가 스크롤을 당기는 경우까지는 실화면으로 못 봤습니다.
• iOS·Android 실기기 확인은 못 했습니다. 특히 iOS 롱프레스 선택은 브라우저(jsdom·데스크톱 Chrome)와 거동이 달라 리뷰 때 실기기로 한 번 봐주시면 좋겠습니다. 공유 게시물 상세는 유효한 공유 토큰이 필요해 화면 확인은 못 했고, 같은 컴포넌트라 동작은 동일합니다.

남은 것

• SavedPostCard(지도 장소 상세의 "저장된 게시물")에도 같은 본문 접기 코드가 남아 있습니다. 2줄 클램프에 버튼 정렬·굵기가 달라 이번엔 건드리지 않았습니다.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
nook-client-web	Ready	Preview	Aug 18, 2026 3:22pm