[Feat/#93] 홈 화면 뷰 구현

[sangrae2325]

#️⃣연관된 이슈

• Closes 홈 화면 #93

🎯 해결하려는 문제가 무엇인가요?

홈(/)이 준비 중 문구와 챗봇 버튼뿐이다. Figma 홈 3종 — 대여·신청 행사 2건 이하(3147:146240), 3건 이상(3147:146297), empty(3562:163866) — 의 뷰를 옮긴다.

❓ 왜 해결해야 하나요?

홈은 앱을 열면 처음 보는 화면이고 공지·행사·빌릴게·사물함·학생회비로 들어가는 입구다. 화면 이동은 다른 화면들이 갖춰진 뒤 별도 이슈에서 한 번에 연결하기로 하고, 이번엔 뷰를 먼저 맞춘다.

실제뷰

⭐ 어떻게 해결했나요?

목데이터 3상태 — constants/homeMock.ts의 MOCK_HOME_STATE를 "few"·"many"·"empty"로 바꾸면 Figma 3종을 볼 수 있다.

헤더 — stream 로고, 설정·검색·알림, 알림 있을 때 점(WDS PushBadge). Figma Top Navigation의 State=Home이라 ScreenHeader display variant의 title이 글자 대신 로고도 받게 넓혔다.

• Figma는 헤더 배경이 없어 배너 그림자가 헤더까지 번진다. 레이아웃 헤더 슬롯에 두면 경계에서 그림자가 잘려 선이 생겨서, 홈만 헤더를 스크롤 영역 안 sticky로 두고 스크롤하면 배경을 깐다.

공지 배너 (화면설계서 반영)

• 템플릿 6종: 일반공지·행사·제휴·사물함·간식·의견(3562:163869). 공지마다 그림을 받지 않고 종류별 그림·배경색을 쓴다(NOTICE_TEMPLATES 표 하나)
• 템플릿 그림은 Figma의 그림·그라데이션 배치를 카드 폭(335×206) 한 장으로 합친 JPEG다(3배, 장당 약 50KB). 그림 위치·크기를 코드에서 숫자로 맞추지 않는다
• 5초마다 자동으로 넘어가고, 마지막 카드 오른쪽에 첫 카드가 이어진다(복제본을 두고 멈추면 진짜 첫 카드로 순간 이동). 누르는 동안은 멈춘다
• 카드 폭 = 화면 폭 - 40(Figma 375 기준 335). 카드 사이를 40px 띄워 이전·다음 카드는 화면에 보이지 않는다(Figma는 다음 카드가 12px 보이지만 팀 논의로 숨김)
• 1개면 슬라이드·스와이프 없음, 0개면 기본 배너 1장

섹션

• 신청 안내 카드: 모집 중인 행사·사물함마다 한 장, 없으면 안 그림
• 대여 중인 물품: 2건까지 + n건 더보기, 기한 지나면 빨간 부제목. 물품 줄은 BililgeItemCard 재사용(surface={false}, subtitleTone="negative" 추가, 기본값은 기존 그대로)
• 신청한 행사: 2건까지 + n건 더보기
• 대여·신청 행사 빈 상태: HomeEmptyState(그림은 빌릴게·행사 폴더의 같은 도형 재사용)
• 내 정보: 학생회비 → 열린피드백 → 사물함 순서 고정. 학생회비 미납이면 배지 대신 학생회비 납부하기 + ↗, 나머지는 상태 배지(ContentBadge)
• 아카이빙 둘러보기 배너

px 임의값 규칙 적용 — component-convention.md에 "크기·위치·그림자" 규칙을 새로 넣고 홈부터 적용했다

• 정수 px는 Tailwind 단계(size-10.5, top-3.75, -my-15), 기준 크기·그림자는 @theme 토큰(h-notice-banner, shadow-spread-small, drop-shadow-chatbot-fab), 그라데이션은 이름 붙인 유틸(bg-archive-cta)
• 그림 위치는 에셋에 반영했다 — 배너는 합친 그림, 아카이빙 폴더는 회전을 SVG에 넣음
• 홈의 px 임의값 41곳 → 1곳(배너 테두리 0.5px, 주석 있음). 나머지 화면은 별도 이슈로 정리한다

🧩 이 PR의 한계 & 트레이드오프

• 버튼·카드 동작이 없다. 화면 이동은 별도 이슈에서 한 번에 연결한다.
  • 더보기 목적지(확정): 대여 중인 물품 → 빌릴게 반납 탭, 신청한 행사 → 행사 신청내역 탭. 두 화면 모두 탭이 화면 안 상태라 주소로 탭을 고를 수 있게 손봐야 한다
• 목데이터다. API 연동 전까지 homeMock.ts 하나로 그린다
• 배너 비활성 카드 높이 변화(설계서)는 없다. Figma에 값이 없어 디자이너 확인 후 추가한다
• 배너 0개일 때 기본 배너 문구는 임시다("stream에 오신 것을 환영해요")
• 배너 그림은 Figma 배치를 합친 그림이다. 디자인에서 템플릿 그림 위치가 바뀌면 그림을 다시 만들어야 한다(6장 합계 약 290KB)
• 배너 제목 줄바꿈이 Figma와 다를 수 있다. Figma는 디자이너가 직접 줄을 끊었고, 코드는 단어 단위 자동 줄바꿈(최대 2줄)이다
• 챗봇 버튼이 맨 아래 아카이빙 배너 오른쪽을 가린다. Figma도 챗봇 버튼이 내용 위에 겹친다

⛓️ 기존 기능에 미치는 영향

• ScreenHeader: display variant title이 문자열·토글 외에 요소도 받는다. 토글 판별을 "문자열이 아니면"에서 options·activeIndex 유무로 바꿨다. 빌릴게·행사·공지·피드백 헤더는 그대로다
• BililgeItemCard: surface·subtitleTone prop 추가, 기본값이 기존 모양이라 빌릴게 화면은 그대로다
• 홈은 이제 레이아웃 헤더 슬롯(useScreenHeader)을 쓰지 않는다
• index.css에 크기·그림자 토큰(--spacing-notice-banner, --shadow-spread-small, --drop-shadow-chatbot-fab)과 bg-archive-cta 유틸을 추가했다
• 컨벤션 문서: component-convention.md에 크기·위치·그림자 규칙, coding-style.md에 홈 헤더 예외를 적었다

🔀 Edge Case & 실패 시나리오

• 공지 0개 → 기본 배너, 1개 → 슬라이드·카운터 없음
• 공지 수가 줄어 스크롤이 복제본 자리에 걸리면 첫 카드로 옮긴 뒤 넘긴다
• 기기 '동작 줄이기'가 켜져 있으면 자동으로 넘기지 않는다
• 내용이 화면보다 길면 섹션이 줄지 않고 스크롤된다(스크롤 영역과 쌓는 영역을 분리)
• 신청 카드·대여·신청 행사가 비면 각각 숨김 또는 빈 상태로 바뀐다

📋 검토한 대안과 선택 이유

• 헤더를 레이아웃 슬롯에 두고 그대로 쓰기 — 헤더와 배너 사이에 그림자 경계선이 생겨서 홈만 스크롤 영역 안 sticky 헤더로 바꿨다
• 배너 카드 폭 고정(335) — 넓은 화면에서 옆 카드가 크게 보여서 화면 폭에 맞췄다
• 템플릿마다 카드 컴포넌트 — 구조가 같고 값만 달라 표 하나 + 카드 하나로 했다
• 대여 물품 줄을 홈 전용으로 새로 만들기 — 빌릴게와 값이 같아 BililgeItemCard에 prop 2개를 더해 재사용했다

💬 리뷰 포인트

• [c] 공지 배너 자동 슬라이드(HomeNoticeBanner.tsx) — 복제본 순간 이동, 누르는 동안 정지 처리
• [c] ScreenHeader title을 요소까지 받게 넓힌 것 — 로고 전용 prop으로 좁히는 게 나을지
• [a] 홈만 헤더를 스크롤 영역 안에 두는 구조

[coderabbitai]

Important

• 🔍 Trigger review

This repository does not receive automatic reviews because it has fewer than 10 stars.

⚙️ Run configuration

• Configuration used: defaults
• Review profile: CHILL
• Plan: Advanced
• Run ID: 7ebd14f9-9aad-49ad-aefb-8f7918cc2ee0

• Autopilot · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}