Claude-51124 22557e7132 docs: 오래된 트러블슈팅 아카이브 및 구조 정리

- 7-8월 초기 구축 문서 12개를 _archive/troubleshooting/2025_07-08_initial_setup/로 이동
- book/300_architecture/390_human_in_the_loop_intent_learning.md를 journey/research/intent_classification/로 이동 (개발 여정 문서)
- 빈 폴더 제거 (journey/assets/*)

2025-11-17 14:06:05 +09:00

2.3 KiB

Raw Blame History

Tailwind CSS 도입 및 모바일 반응형 문제 해결

문제

Space Times 홈페이지 모바일(375px)에서 TabSection 등 컴포넌트들이 가로로 넘침
사용자가 의도하지 않은 가로 스크롤 발생

시도한 해결책들

1차: 개별 컴포넌트 CSS 수정

TabSection.css에 미디어 쿼리 추가
width: 100%, overflow-x: hidden 적용
문제: 일시적으로 해결됐다가 다시 발생

2차: 전역 CSS 해결

index.css에 전역 스타일 추가

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body, html {
  overflow-x: hidden !important;
  max-width: 100% !important;
}

문제: CSS 우선순위 충돌로 불완전한 해결

최종 해결: Tailwind CSS v3 도입

설치

npm install -D tailwindcss@^3 autoprefixer postcss

설정 파일

tailwind.config.js: content 경로 설정
postcss.config.js: tailwindcss, autoprefixer 플러그인 설정
index.css: @tailwind 디렉티브 추가

주요 변경사항

모든 컴포넌트를 Tailwind 버전(TW suffix)으로 재작성
- TabSection → TabSectionTW
- ServiceCards → ServiceCardsTW
- ContentSection → ContentSectionTW
- Sidebar → SidebarTW
- HeroCarousel → HeroCarouselTW
- SearchSection → SearchSectionTW
CSS 파일 제거, 유틸리티 클래스로 대체
- 반응형: sm:, md:, lg: 프리픽스 사용
- 그리드: grid grid-cols-1 sm:grid-cols-3
- 플렉스박스: flex flex-col sm:flex-row

Tailwind v4 → v3 다운그레이드

초기 Tailwind v4 설치 시 PostCSS 플러그인 호환 문제 발생
v3로 다운그레이드하여 안정성 확보

카카오톡: #FEE500 (공식 노란색)
인스타그램: gradient from-[#833ab4] via-[#fd1d1d] to-[#fcb045]
유튜브: #FF0000 (공식 빨간색)

결과

375px 모바일 화면에서 가로 스크롤 완전 제거
모든 컴포넌트가 뷰포트 내에 정상 표시
깔끔한 유틸리티 클래스 기반 스타일링

교훈

CSS 충돌 문제는 근본적인 해결책(Tailwind 같은 유틸리티 프레임워크)이 효과적
Tailwind v4는 아직 불안정, 프로덕션은 v3 사용 권장
브랜드 색상은 hex 코드로 직접 지정 ([#색상코드] 형식)

2.3 KiB Raw Blame History

Tailwind CSS 도입 및 모바일 반응형 문제 해결

문제

시도한 해결책들

1차: 개별 컴포넌트 CSS 수정

2차: 전역 CSS 해결

최종 해결: Tailwind CSS v3 도입

설치

설정 파일

주요 변경사항

Tailwind v4 → v3 다운그레이드

SNS 버튼 브랜드 색상 적용

결과

교훈

2.3 KiB

Raw Blame History