v1.7.2 릴리즈에 포함된 Git 기록을 빠짐없이 펼친 기술 기록이다. 전문 용어는 바로 풀어 쓰고, 바뀐 모든 코드 줄을 Before → After로 비교했다.

v1.7.2 Hero 전면 재작업 — DU70주년 outline + Greencar 큰 한글 + HM Group 폴라로이드 콜라주 작업이 중심이다. 이 릴리즈는 눈에 보이는 결과뿐 아니라 그 결과를 만든 파일과 코드까지 모두 추적했다.

‘해당 코드 없음’은 새로 추가했거나 완전히 지운 구간이라는 뜻이다.

영상·이미지처럼 글자로 비교할 수 없는 파일은 Git의 추가·수정·삭제 상태로 기록했다.

4125b333bf1917270a655955b60d19b2dbda42b5d02b2cbd06e45a69885d869b

커밋 9df948c — feat(intro): v1.7.2 Hero 전면 재작업 — DU70주년 outline + Greencar 큰 한글 + HM Group 폴라로이드 콜라주

: v1.7.2 Hero 전면 재작업 — DU70주년 outline + Greencar 큰 한글 + HM Group 폴라로이드 콜라주 작업이다.

: 커밋 제목에 적힌 문제를 해결하기 위해 코드를 바꿨다.

사용자가 보는 화면과 화면 동작을 만드는 코드이다.

/**
 * 폴라로이드 스타일 카드 — HM Group 의 사진 콜라주 + Greencar 의 회전된 사진 배치를 흉내.
 * 실제 사진 자산이 없어 그라데이션 + 카테고리 라벨로 대체. 살짝 회전해 손으로 흩뿌린 느낌.
 */
const HERO_POLAROIDS: Array<{
  label: string;
  gradient: string;
  rotate: string;
  position: string;
}> = [
  {
    label: "성수동 카페",
    gradient: "from-hot-400/80 to-hot-300/60",
    rotate: "-rotate-6",
    position: "left-[5%] top-[12%]",
  },
  {
    label: "한남 패션",
    gradient: "from-lime-300/80 to-lime-200/50",
    rotate: "rotate-3",
    position: "right-[8%] top-[18%]",
  },
  {
    label: "압구정 캐릭터",
    gradient: "from-blue-400/70 to-violet-300/50",
    rotate: "-rotate-3",
    position: "left-[10%] bottom-[10%]",
  },
  {
    label: "코엑스 굿즈",
    gradient: "from-amber-300/80 to-hot-300/40",
    rotate: "rotate-6",
    position: "right-[6%] bottom-[14%]",
  },
];

: 사용자가 보는 화면과 화면 동작을 만드는 코드이다. 변경 전에는 이 구간에 대응하는 코드가 없었다. 변경 후 코드는 

 같은 값과 기능을 사용해 처리한다.

@@ -239,2 +275,2 @@ export default function IntroPage() {

{/* Hero 전용 그라데이션 (투명 → 어두움) — 클릭 흡수 차단 */}
<div className="pointer-events-none absolute inset-0 bg-gradient-to-b from-black/30 via-black/20 to-black/60" />

{/* 다크 모드용 그라데이션 오버레이 (라이트에선 LightModeBackground 가 이미 처리) */}
<div className="pointer-events-none absolute inset-0 hidden bg-gradient-to-b from-black/30 via-black/20 to-black/60 dark:block" />

: 사용자가 보는 화면과 화면 동작을 만드는 코드이다. 변경 전 코드는 

 같은 값과 기능을 사용해 처리했다. 변경 후 코드는 

@@ -242 +278,53 @@ export default function IntroPage() {

{/* 좌측 거대 outline 영문 — DU 70주년 스타일 (라이트만 노출, 다크에선 영상이 보여야 하니 숨김) */}
<motion.div
  initial={{ opacity: 0, x: -40 }}
  animate={{ opacity: 1, x: 0 }}
  transition={{ duration: 1, delay: 0.2 }}
  className="pointer-events-none absolute left-[-2vw] top-[15%] hidden select-none sm:block dark:hidden"
  aria-hidden
>
  <span
    className="block text-[14vw] font-black leading-none tracking-tighter text-transparent"
    style={{ WebkitTextStroke: "1.5px rgba(30,30,30,0.15)" }}
  >
    POP
  </span>
</motion.div>

{/* 우측 거대 outline 영문 */}
<motion.div
  initial={{ opacity: 0, x: 40 }}
  animate={{ opacity: 1, x: 0 }}
  transition={{ duration: 1, delay: 0.4 }}
  className="pointer-events-none absolute right-[-2vw] bottom-[15%] hidden select-none sm:block dark:hidden"
  aria-hidden
>
  <span
    className="block text-[14vw] font-black leading-none tracking-tighter text-transparent"
    style={{ WebkitTextStroke: "1.5px rgba(30,30,30,0.15)" }}
  >
    SPOT
  </span>
</motion.div>

{/* 라이트 모드 — 회전된 폴라로이드 카드 콜라주 (HM Group + Greencar 풍). 다크에선 숨김. */}
<div className="pointer-events-none absolute inset-0 hidden sm:block dark:hidden">
  {HERO_POLAROIDS.map((card, idx) => (
    <motion.div
      key={card.label}

      initial={{ opacity: 0, y: 30, rotate: 0 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.8, delay: 0.6 + idx * 0.15 }}
      className={`absolute ${card.position} ${card.rotate} w-32 rounded-md bg-white p-2 shadow-xl shadow-ink-900/15 ring-1 ring-ink-900/10 md:w-40`}
    >
      <div className={`aspect-[3/4] rounded-sm bg-gradient-to-br ${card.gradient}`} />
      <div className="mt-2 px-1 pb-1 text-[10px] font-medium text-ink-900/70 md:text-xs">
        {card.label}
      </div>
    </motion.div>
  ))}
</div>

{/* 중앙 컨텐츠 — 컬러 pill + 거대 한글 슬로건 + CTA */}
<div className="relative z-10 mx-auto flex max-w-3xl flex-col items-center px-6 py-12 text-center">
  {/* DU 70주년 컬러 pill 스타일 — 위치/지역 강조 */}

@@ -244,4 +332,4 @@ export default function IntroPage() {

initial={{ opacity: 0, y: -24 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8, ease: "easeOut" }}
className="mb-3"

initial={{ opacity: 0, scale: 0.9 }}
animate={{ opacity: 1, scale: 1 }}
transition={{ duration: 0.6, delay: 0.1 }}
className="inline-flex items-center gap-2 rounded-full bg-ink-900 px-5 py-2 text-sm font-medium text-cream-100 shadow-lg dark:bg-lime-300 dark:text-ink-900"

@@ -249,6 +337,2 @@ export default function IntroPage() {

<h1 className="text-5xl font-black tracking-tight text-ink-900 dark:text-white sm:text-7xl md:text-8xl">
  POP<span className="text-lime-300">·</span>SPOT
</h1>
<p className="mt-2 text-sm text-ink-700/80 dark:text-cream-200/80 sm:text-base">
  서울 팝업스토어, 한 곳에서.
</p>

<span className="size-1.5 rounded-full bg-lime-300 dark:bg-ink-900" />
성수 · 한남 · 압구정

@@ -257,2 +341,3 @@ export default function IntroPage() {

<motion.h2
  initial={{ opacity: 0, y: 16 }}

{/* 거대 한글 메인 슬로건 — Greencar 스타일 큰 한글 타이포 */}
<motion.h1
  initial={{ opacity: 0, y: 20 }}

POP-SPOT v1.7.3 — v1.7.3 — 영상 교체(

Public

v1.7.2에 묶인 1개 커밋과 1개 파일 변경을 Git에서 전수 대조했다. 모든 변경 줄을 Before→After와 쉬운 해석으로 기록했다.

POP-SPOT v1.7.2 — v1.7.2 Hero 전면 재작업 — DU70주년 outline + Greencar 큰 한글 + HM Group 폴라로이드 콜라주

POP-SPOT v1.7.2 — v1.7.2 Hero 전면 재작업 — DU70주년 outline + Greencar 큰 한글 + HM Group 폴라로이드 콜라주

먼저 쉽게 설명하면

읽는 법

Git 기준 범위

댓글

먼저 쉽게 설명하면

읽는 법

Git 기준 범위

이어 읽을 기록

댓글