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

v1.7.1 다크/라이트 모드 지원 + SK 스타일 파스텔 blob 그라데이션 (라이트 모드) 작업이 중심이다. 이 릴리즈는 눈에 보이는 결과뿐 아니라 그 결과를 만든 파일과 코드까지 모두 추적했다.

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

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

a34ec7117672c0712b466e0a33edab6ca122325a332dd88a24c3cea34822b8a1

커밋 8b90888 — feat(intro): v1.7.1 다크/라이트 모드 지원 + SK 스타일 파스텔 blob 그라데이션 (라이트 모드)

: v1.7.1 다크/라이트 모드 지원 + SK 스타일 파스텔 blob 그라데이션 (라이트 모드) 작업이다.

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

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

@@ -4,0 +5 @@ import { motion } from "framer-motion";

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

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

@@ -23,0 +27,14 @@ import { useEffect, useState } from "react";

/**
 * 라이트 모드 배경 — SK 스타일 파스텔 그라데이션 blob 3개를 겹쳐서 부드러운 3D 무드.
 * filter:blur 로 외부 자산 없이 흐릿한 색 덩어리를 만든다.
 */
function LightModeBackground() {
  return (
    <div className="absolute inset-0 overflow-hidden bg-gradient-to-br from-cream-100 via-cream-200/60 to-white">
      <div className="pointer-events-none absolute right-[-10%] top-[10%] h-[500px] w-[500px] rounded-full bg-hot-300/40 blur-3xl" />
      <div className="pointer-events-none absolute left-[-10%] top-[40%] h-[450px] w-[450px] rounded-full bg-lime-300/35 blur-3xl" />
      <div className="pointer-events-none absolute right-[20%] bottom-[10%] h-[380px] w-[380px] rounded-full bg-blue-300/30 blur-3xl" />
    </div>
  );
}

@@ -87,0 +105,2 @@ export default function IntroPage() {

const { resolvedTheme, setTheme } = useTheme();
const [mounted, setMounted] = useState(false);

@@ -92,0 +112,4 @@ export default function IntroPage() {

// SSR 시점엔 테마 미정. mount 후에만 실제 테마 반영해서 hydration mismatch 회피.
useEffect(() => setMounted(true), []);
const isDark = mounted && resolvedTheme === "dark";

@@ -142,16 +165,20 @@ export default function IntroPage() {

{/* 페이지 전체 고정 배경 비디오 — pointer-events-none 으로 클릭 흡수 차단 */}
<div className="pointer-events-none fixed inset-0 z-0 bg-ink-900">
  {motionOn ? (
    <video
      autoPlay
      loop
      muted
      playsInline
      preload="auto"
      onCanPlay={() => setVideoReady(true)}
      className={`h-full w-full object-cover transition-opacity duration-700 ${
        videoReady ? "opacity-100" : "opacity-0"
      }`}
    >
      <source src={VIDEO_SRC} type="video/mp4" />
    </video>

{/* 페이지 전체 고정 배경 — 다크일 땐 영상 (또는 정적 다크 그라데이션), 라이트일 땐 파스텔 blob. */}
<div className="pointer-events-none fixed inset-0 z-0">
  {isDark ? (
    motionOn ? (
      <video
        autoPlay
        loop
        muted
        playsInline
        preload="auto"
        onCanPlay={() => setVideoReady(true)}
        className={`h-full w-full object-cover bg-ink-900 transition-opacity duration-700 ${
          videoReady ? "opacity-100" : "opacity-0"
        }`}
      >
        <source src={VIDEO_SRC} type="video/mp4" />
      </video>
    ) : (
      <div className="h-full w-full bg-gradient-to-br from-ink-900 via-ink-800 to-hot-900/30" />
    )

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

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

@@ -159,2 +186 @@ export default function IntroPage() {

/* 모션 OFF 모드 — 정지 이미지 톤의 그라데이션으로 영상 대체. */
<div className="h-full w-full bg-gradient-to-br from-ink-900 via-ink-800 to-hot-900/30" />

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

Public

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

POP-SPOT v1.7.1 — v1.7.1 다크/라이트 모드 지원 + SK 스타일 파스텔 blob 그라데이션 (라이트 모드)

POP-SPOT v1.7.1 — v1.7.1 다크/라이트 모드 지원 + SK 스타일 파스텔 blob 그라데이션 (라이트 모드)

먼저 쉽게 설명하면

읽는 법

Git 기준 범위

댓글

먼저 쉽게 설명하면

읽는 법

Git 기준 범위

이어 읽을 기록

댓글