Refactor/styles and structure

[spde3289]

개요

close #80

카테고리

• Bug fix (not modifying existing features)
• New feature (not modifying existing features)
• Changing feature (modifying existing feature or fixing bug)
• Docs updated required
• Chore

상세 내용

디자인 공통화 작업

• ArrowButton 컴포넌트
  • $size, $isTablet, $isLeft props를 받아 미리 정의된 값에 따라 스타일이 달라지도록 구성했습니다.
  • 페이지마다 위치·크기가 달라 중복되는 스타일을 하나의 공통 로직으로 합쳤습니다.
• HighlightButton 컴포넌트
  • $customStyle props를 통해 기존 스타일 위에 원하는 스타일을 덮어쓸 수 있도록 구현했습니다.
  • HighlightButton이 여러 곳에서 다양한 스타일로 사용되어 유연성을 확보하기 위해 추가했습니다.
• IdolCircleImage 컴포넌트
  • $size 값(sm, md, lg)에 따라 원형 이미지의 크기가 자동으로 결정됩니다.

---

색상 시스템 개선 — hexToRgba 함수 확장

• hex 값과 opacity를 전달하면 rgba로 변환하는 기능을 추가했습니다.
• CSS 변수(--color-bg-dark)는 JS 단계에서 바로 해석할 수 없어 변환이 어려웠습니다.
• 이를 해결하기 위해 COLOR_VAR_MAP 객체를 생성하여 CSS 변수를 JS 내부에서 hex 값으로 매핑하도록 개선했습니다.

---

폰트 디자인 시스템 정리

• 자주 사용되는 텍스트 스타일을 TYPO 객체에 모아두어
• 각 컴포넌트에서 일관된 폰트 스타일을 쉽게 적용할 수 있도록 했습니다.

---

반응형 공통화 — 미디어 쿼리 개선

• "이달의 차트" 영역의 반응형 로직을 모바일 퍼스트 기준으로 재구성했습니다.
• 반복적으로 사용되는 구문을 media 변수로 통일해 관리성을 높였습니다.

---

폴더 구조 개선

• 페이지 단위로 사용하는 컴포넌트를 src/page/{page}/components/ 경로로 이동하여 탐색성을 개선했습니다.
• src/component 폴더는 공통 컴포넌트만 관리하도록 역할을 분리했습니다.

[vercel]

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

1 Skipped Deployment

Project	Deployment	Preview	Comments	Updated (UTC)
fandom-k	Ignored			Nov 18, 2025 5:50am