Barbelic devdocs

Appearance

피드 세션 상세 오버레이 — 바텀시트에서 일지 동일 슬라이드 전환까지 + 홈 피드 잔존 코드 철거 (2026-08-31) ​

  • 기간: 2026-08-31 (세션 1, 오너 지시 "자세히 누르면 세션 상세 오→왼으로 오버레이 슬라이드 · 반대로 스와이프해서 닫기 · 하단탭바는 오버레이가 덮도록" + "일지에서 세션 상세 누르는거랑 동일하게" + "홈탭 낡은코드도 고쳐줘" + 제약 "일지탭으로 옮겨져서 열리는게 아니라 독립적으로")
  • 랜딩: PR #989(1e778041, Phase 1~2) — 마이그레이션 없음, Vercel 자동 배포
  • 설계서: 없음(이슈 #985 본문의 Phase 계획이 정본, "예상 효과·개선사항" 표 포함 — 구 Phase 2(홈 피드 카드 경유)는 오너 지적으로 정정·삭제)
  • 정본: src/react/ui/mobile/lib/slideBack.ts(useSlideBack — 탭 진입 오버레이 공용 스와이프 판정) · FeedScreen.tsx의 FdSessionOverlay · docs/contracts/feed-props.md 세션 상세 절
  • 도구: 없음
  • 게이트: tests/react/feedSessionOverlay.test.mjs(렌더·소스 계약 5 — 오버레이 문법·바텀시트 회귀 방지·공용 훅·철거 고정)
  • 버그리포트: 없음(결함 수리 아님 — 화면 전환 문법 통일 + 코드 철거)
  • 계약: feed-props.md 세션 상세 표면 절 개정(드로어 → 오버레이), desktop-screens-props.md 무관

Phase 현황 ​

Phase내용상태
Phase 1피드 세션 상세를 일지와 동일한 슬라이드 오버레이로✅ PR #989 (1e778041)
Phase 2홈탭 피드 잔존 코드 철거✅ PR #989 (1e778041)

1. 배경 ​

피드의 "자세히 →"는 세션 상세를 아래에서 올라오는 바텀시트로 띄웠다(2026-07-30 문법). 그 사이 일지(8/27)·그룹(8/26)은 "우→좌 슬라이드 진입, 좌→우 스와이프 퇴장" 오버레이 문법으로 옮겨 갔고, 피드만 구 문법으로 남아 화면 전환이 표면마다 달랐다. 홈탭에는 8/11 지시로 꺼둔 피드 카드 코드가 "부활 대비"로 보존돼 있었다.

2. 문제 제기 ​

같은 세션 상세가 진입 경로마다 다른 화면 전환으로 열렸다 ​

일지·그룹 = 슬라이드 오버레이(탭바 덮음), 피드 = 바텀시트(탭바 위에서 멈춤, 끌어내려 닫기). 유저 입장에서 같은 화면이 다르게 움직였다.

홈탭에 죽은 피드 코드가 계속 실려 있었다 ​

HOME_FEED_UI = false 뒤의 카드 마크업·무한스크롤·댓글 시트·세션 상세 다리 + 컨테이너의 피드 투영·소셜 props 배선 — 유저에게 보이지 않는 채로 유지 비용(테스트 앵커·매퍼 키·CSS)만 발생. 계획 수립 때 이 죽은 코드를 산 경로로 잘못 읽는 실수까지 유발했다(오너 지적으로 정정).

3. 해결 방안 ​

원칙 (오너 결정, 2026-08-31) ​

  • D1 "오→왼 슬라이드 · 반대 스와이프 닫기 · 탭바 덮기" + "일지와 동일하게 작동" — 새 문법 발명 없이 일지 문법 재사용.
  • D2 "홈탭 낡은코드도 고쳐줘" — 8/11 보존 결정 폐기, 철거.
  • D3 "일지탭으로 옮겨져서 열리는게 아니라 독립적으로" — 탭 유지(기존 keepMobileOrigin 계약이 이미 보장, 표면만 교체).
  • D4 "그냥 머지해줘" — GitHub Actions 결제 블로커로 CI 미실행 상태에서 로컬 검증 근거 admin 머지.

접근 ​

  • 새 컴포넌트/CSS를 만들지 않고 일지·그룹의 공용 문법(pg-slidein/pg-overlay/.sj-mo z46) 그대로 재사용 — "동일하게"의 가장 강한 형태. 그룹 내부에 있던 스와이프 판정 훅을 lib로 승격(중복 구현 기각).
  • 홈 철거 범위 = 피드 카드 블록 + 그것 때문에만 존재하던 배선 전부(화면·컨테이너·투영·CSS·design 마커). 하루 드로어의 세션 스와프(daySess)는 실사용이라 유지.

4. 적용한 내용 ​

Phase 1 — 피드 오버레이 (#989) ​

  • lib/slideBack.ts 신설: useGpSlideBack(GroupScreen 내부, "탭 진입 오버레이 전면 공통") → useSlideBack 승격, 그룹 호출부 3곳 재조준. 판정 불변(dx>45·가로 우세, animationend+320ms 타이머 이중, reduced-motion 즉시).
  • FeedScreen.tsx: 바텀시트(UiDaySheet) → FdSessionOverlay(일지 세션 오버레이와 같은 마크업: sj-mo pg-slidein pg-overlay + 워드마크 행 + 뒤로 버튼 + .sj-mo-sb 본문). 훅 수명 = 오버레이 컴포넌트 수명(useSlideBack의 once 잠금이 인스턴스 단위라 화면 레벨 호출 금지 — 주석 명문화). 세션이 열린 채 재마운트(수정 복귀)면 pg-restore로 진입 애니 억제(일지 8/28 문법 동조). 친구 스코프 피드도 같은 컴포넌트라 자동 동일.

Phase 2 — 홈 철거 (#989) ​

  • HomeScreen.tsx: HOME_FEED_UI 게이트 블록·posts/sentinel 효과·댓글 시트·selectedSession 다리·관련 props 제거. mobileApp.tsx: homeFeedItems·homeFeedSocialProps·homeSelectedSession·홈 피드 props 배선 제거. mobileHomeViewMappers.ts: supplement의 feed/feedHasMore/feedLoading 키 제거(친구 홈 호출부 동반 정리). 고아 CSS 5클래스(hm2-feed·hm2-empty·hm2-more·hm2-retry·hm2-startcta)와 design 마커 2종(homeFeedError·homeFeedLoading) 제거.

주요 결정과 그 근거 ​

  • 탭 이동 로직은 손대지 않음 — sessionDetailStore.keepMobileOrigin(origin "feed"면 탭 유지)이 이미 D3를 보장. origin "home"은 호출자가 사라졌지만 스토어 분기는 존치(무해, 최소 수술).
  • 홈의 "부활 대비" 보존 마크업을 지키던 테스트(homeBootLoadingOrder)는 철거 지시로 제거 — 철거 고정은 신설 테스트가 담당.

작업 중 드러난 것 ​

  • 계획 단계에서 홈의 보존 마크업을 산 경로로 잘못 읽어 Phase를 하나 잘못 세웠다 — 오너 지적("홈탭에 피드카드는 없어진지 오래")으로 정정. 게이트 플래그 뒤 보존 코드는 계획 수립 때 플래그 값부터 실측할 것.
  • 죽은 코드가 지탱하던 단언이 6개 테스트 파일에 퍼져 있었다(마지막-훅 앵커·supplement 피드 키·HOME_FEED_UI import 단언·인라인 시작 CTA 슬라이스) — sourceSliceAnchors 게이트가 앵커 소실을 정확히 적발.
  • GitHub Actions 결제 실패로 CI 잡이 시작 불가("recent account payments have failed or your spending limit needs to be increased") — 오너 결정으로 admin 머지. eslint는 이 PR에서 미검증(로컬 eslint 파손 + CI 미실행), 나머지는 로컬 게이트로 검증.

5. 적용 결과 ​

항목결과
피드 세션 상세 화면 전환바텀시트(탭바 위 멈춤·끌어내려 닫기) → 일지 동일 슬라이드 오버레이(탭바 덮음·스와이프 백)
세션 상세 전환 문법표면별 상이(시트/오버레이) → 탭 진입 = 오버레이 단일 규칙(일지·그룹·피드)
스와이프 판정 구현그룹 내부 1벌 → 공용 lib 1벌(3표면 공유)
홈 죽은 코드화면 블록+배선+CSS 5클래스+마커 2종 → 0 (하루 드로어 실사용 경로 불변)
테스트전체 2,224건 통과(신규 5건, 낡은 단언 6곳 재조준) · tsc·dead-css·ts-boundary·manifest 통과
eslint미검증 — 로컬 파손 + CI 결제 블로커(오너 D4로 admin 머지). Actions 복구 후 다음 PR CI에서 자연 판정
실기기 제스처 체감판정 상수가 일지·그룹과 동일 — 시각 정보 항목(§14, 게이트 아님)

6. 이번 개선으로 향상된 것 ​

세션 상세가 어디서 열려도 같은 손맛 ​

유저가 피드에서 친구 세션을 열든 일지에서 내 세션을 열든, 같은 슬라이드 진입·같은 스와이프 백. 구조적으로 남는 것: "탭 진입형 상세 = pg-slidein 오버레이" 단일 규칙 + 공용 useSlideBack.

홈탭이 실제 렌더하는 것만 싣는다 ​

죽은 분기·투영·CSS가 사라져 홈 관련 변경 시 읽고 지켜야 할 표면이 줄었다 — 이번 계획 실수 같은 "죽은 코드를 산 것으로 읽는" 사고의 재발 여지 제거.

남은 것 ​

  • GitHub Actions 결제/한도 복구 — 오너 계정 설정(Settings → Billing & plans). 복구 전까지 모든 PR의 CI가 같은 사유로 시작 불가.