[Enhancement] Tailwind + inline style 중복 사용 정리

[seorinn]

배경

동일한 스타일을 Tailwind 클래스와 inline style 양쪽에서 중복 정의하는 곳이 있습니다.

문제 1: scroll-snap 중복 정의

// src/components/MorePhotographerInfo/EnlargeImage/index.tsx
<div
  className="flex overflow-x-auto overflow-y-hidden snap-x snap-mandatory" // Tailwind
  style={{
    scrollSnapType: "x mandatory",  // 동일한 스타일을 inline으로도!
    scrollBehavior: "smooth",        // scroll-smooth Tailwind 클래스로 대체 가능
  }}
>

문제 2: 반복되는 gradient overlay 하드코딩

// src/components/PhotographerBox/index.tsx
<div className="absolute bottom-0 left-0 w-full h-[40%]
  bg-gradient-to-b from-[rgba(0,0,0,0)] to-[rgba(0,0,0,0.25)]
  pointer-events-none" />

// src/components/PromotionBox/index.tsx (유사 패턴 반복)

개선 방향

1. inline style 제거 (Tailwind로 통일)

<div className="flex overflow-x-auto overflow-y-hidden snap-x snap-mandatory scroll-smooth">

2. 반복 gradient를 tailwind.config.js에 정의

// tailwind.config.js
theme: {
  extend: {
    backgroundImage: {
      'card-overlay': 'linear-gradient(to bottom, transparent, rgba(0,0,0,0.25))',
    }
  }
}

<div className="absolute bottom-0 left-0 w-full h-[40%] bg-card-overlay pointer-events-none" />

관련 파일

• src/components/MorePhotographerInfo/EnlargeImage/index.tsx
• src/components/PhotographerBox/index.tsx
• src/components/PromotionBox/index.tsx
• tailwind.config.js