v1.0 변경 기록의 이어지는 부분이다. 같은 검증 ID 

80ecac4c1e6496d6e943de486bfc4c44a368a4d57254d5a8d2c03a13d2f80e7e

커밋 7b66574 — init: 보안 강화 + 환경변수 분리 + GCP VM 배포 자료

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

    className="bg-ink-800 border-cream-200/15 text-cream-200 placeholder:text-cream-200/30"
  />
</Field>

{/* 생년월일 */}
<Field label={<span className="text-cream-200/70">생년월일</span>}>
  <div className="flex gap-2">
    <Input
      name="birthdate"
      type="text"
      placeholder="2000"
      maxLength={4}
      inputMode="numeric"
      className="flex-[1.5] bg-ink-800 border-cream-200/15 text-cream-200 placeholder:text-cream-200/30"
    />
    <select
      aria-label="월"
      className="h-11 w-20 rounded-md px-2 bg-ink-800 border border-cream-200/15 text-cream-200 text-sm text-center focus:outline-none focus-visible:ring-2 focus-visible:ring-ring"
    >
      <option className="bg-ink-800 text-cream-200">월</option>
      {[...Array(12)].map((_, i) => (
        <option key={i} className="bg-ink-800 text-cream-200">
          {i + 1}
        </option>
      ))}
    </select>
    <Input
      type="text"
      placeholder="일"
      maxLength={2}
      inputMode="numeric"
      className="flex-1 text-center bg-ink-800 border-cream-200/15 text-cream-200 placeholder:text-cream-200/30"
    />
  </div>
</Field>

{/* 성별 — 토글 */}
<Field label={<span className="text-cream-200/70">성별</span>}>
  <div

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

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

    className="inline-flex w-full rounded-md overflow-hidden border border-cream-200/15 bg-ink-800"
    role="radiogroup"
    aria-label="성별"
  >
    {[
      { v: "M", label: "남자" },
      { v: "F", label: "여자" },
    ].map((g) => {
      const active = formData.gender === g.v;
      return (
        <button
          key={g.v}
          type="button"
          role="radio"
          aria-checked={active}
          onClick={() => setFormData({ ...formData, gender: g.v })}
          className={`flex-1 h-11 text-sm font-medium transition-colors ${
            active
              ? "bg-lime-300 text-ink-900 font-semibold"
              : "text-cream-200/60 hover:text-cream-200"
          }`}
        >
          {g.label}
        </button>
      );
    })}
  </div>
</Field>

{/* 휴대전화 */}
<Field
  label={<span className="text-cream-200/70">휴대전화</span>}
  error={
    formData.phoneNumber.length > 0 && !isValidPhone ? (
      <span className="flex items-center gap-1">
        <XCircle className="size-3" /> 010으로 시작하는 11자리 숫자만 입력 가능합니다.
      </span>
    ) : undefined
  }
  helper={
    formData.phoneNumber.length > 0 && isValidPhone ? (
      <span className="flex items-center gap-1 text-success">

        <CheckCircle2 className="size-3" /> 올바른 전화번호 형식입니다.
      </span>
    ) : undefined
  }
>
  <Input
    name="phoneNumber"
    type="text"
    placeholder="01012345678 (- 제외)"
    value={formData.phoneNumber}
    onChange={handleChange}
    invalid={formData.phoneNumber.length > 0 && !isValidPhone}
    inputMode="numeric"
    maxLength={11}
    autoComplete="tel"
    className="bg-ink-800 border-cream-200/15 text-cream-200 placeholder:text-cream-200/30"
  />
</Field>

{/* 약관 동의 */}
<div className="bg-ink-800 p-4 rounded-md border border-cream-200/15 space-y-3 mt-6">
  <label className="flex items-center gap-3 cursor-pointer pb-3 border-b border-cream-200/10 select-none">
    <input
      type="checkbox"
      className="sr-only"
      checked={isAllAgreed}
      onChange={handleAgreeAll}
    />
    <span
      aria-hidden
      className={`size-5 rounded-pill border flex items-center justify-center transition-colors ${
        isAllAgreed
          ? "bg-lime-300 border-lime-300"
          : "border-cream-200/30 bg-ink-900"
      }`}
    >
      {isAllAgreed && <Check className="size-3 text-ink-900" />}
    </span>
    <span className="font-bold text-sm text-cream-200">
      전체 약관에 동의합니다
    </span>
  </label>

  {[

            { key: "terms" as const, label: "[필수] POP-SPOT 서비스 이용약관" },
            { key: "privacy" as const, label: "[필수] 개인정보 수집 및 이용" },
          ].map((item) => (
            <label
              key={item.key}
              className="flex items-center gap-3 cursor-pointer select-none"
            >
              <input
                type="checkbox"
                className="sr-only"
                checked={agreements[item.key]}
                onChange={() => handleAgreeItem(item.key)}
              />
              <span
                aria-hidden
                className={`size-4 rounded border flex items-center justify-center transition-colors ${
                  agreements[item.key]
                    ? "bg-lime-300 border-lime-300"
                    : "border-cream-200/30"
                }`}
              >
                {agreements[item.key] && (
                  <Check className="size-2.5 text-ink-900" />
                )}
              </span>
              <span className="text-xs text-cream-200/60">{item.label}</span>
            </label>
          ))}
        </div>

        {/* 가입 버튼 */}
        <Button
          variant="primary"
          size="lg"
          block
          onClick={handleSignup}
          disabled={!isFormValid}
          className="mt-6"
        >
          POP-SPOT 시작하기
        </Button>
      </div>
    </div>
  );
}

프로그램을 어떤 조건으로 실행할지 정하는 설정이다.

import { defineConfig, globalIgnores } from "eslint/config";
import nextVitals from "eslint-config-next/core-web-vitals";
import nextTs from "eslint-config-next/typescript";

const eslintConfig = defineConfig([
  ...nextVitals,
  ...nextTs,
  // Override default ignores of eslint-config-next.
  globalIgnores([
    // Default ignores of eslint-config-next:
    ".next/**",
    "out/**",
    "build/**",
    "next-env.d.ts",
  ]),
]);

export default eslintConfig;

: 프로그램을 어떤 조건으로 실행할지 정하는 설정이다. 변경 전에는 이 구간에 대응하는 코드가 없었다. 변경 후 코드는 

이 기능을 구성하는 소스 또는 설정 파일이다.

/// <reference types="next" />
/// <reference types="next/image-types/global" />
import "./.next/dev/types/routes.d.ts";

// NOTE: This file should not be edited
// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

: 이 기능을 구성하는 소스 또는 설정 파일이다. 변경 전에는 이 구간에 대응하는 코드가 없었다. 변경 후 코드는 

import type { NextConfig } from "next";
import path from "node:path";

const projectRoot = path.resolve(__dirname);

const API_URL = process.env.NEXT_PUBLIC_API_URL || "http://localhost:8080";

let backendHostname = "localhost";
try {
  backendHostname = new URL(API_URL).hostname;
} catch {
  console.warn("API_URL 형식이 올바르지 않아 이미지 호스트를 localhost로 설정합니다.");
}

const nextConfig: NextConfig = {
  // 워크스페이스 루트 명시 (부모 폴더의 yarn.lock/package.json 무시)
  turbopack: {
    root: projectRoot,
  },
  outputFileTracingRoot: projectRoot,

  images: {
    remotePatterns: [
      { protocol: "https", hostname: "images.unsplash.com" },
      { protocol: "http", hostname: "localhost" },
      { protocol: "https", hostname: "k.kakaocdn.net" },
      { protocol: "https", hostname: "ssl.pstatic.net" },
      { protocol: "https", hostname: "lh3.googleusercontent.com" },
      { protocol: "https", hostname: backendHostname },
      { protocol: "http", hostname: backendHostname },
    ],
  },

  async rewrites() {
    return [
      { source: "/api/:path*", destination: `${API_URL}/api/:path*` },
    ];
  },

  compiler: {
    removeConsole:
      process.env.NODE_ENV === "production"
        ? { exclude: ["error", "warn"] }
        : false,
  },
};

export default nextConfig;

필요한 도구와 빌드 방법을 정하는 파일이다.

{
  "name": "popspot-frontend",
  "version": "0.1.0",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "popspot-frontend",
      "version": "0.1.0",
      "dependencies": {
        "@dnd-kit/core": "^6.3.1",
        "@dnd-kit/sortable": "^10.0.0",
        "@dnd-kit/utilities": "^3.2.2",
        "@radix-ui/react-dialog": "^1.1.15",
        "@radix-ui/react-slot": "^1.2.4",
        "@stomp/stompjs": "^7.3.0",
        "algoliasearch": "^5.48.1",
        "class-variance-authority": "^0.7.1",
        "clsx": "^2.1.1",
        "firebase": "^12.8.0",
        "framer-motion": "^12.29.2",
        "lucide-react": "^0.563.0",
        "next": "16.1.6",
        "next-themes": "^0.4.6",
        "react": "19.2.3",
        "react-dom": "19.2.3",
        "react-instantsearch": "^7.23.2",
        "react-kakao-maps-sdk": "^1.2.0",
        "recharts": "^3.7.0",
        "sockjs-client": "^1.6.1",
        "sweetalert2": "^11.26.20",
        "sweetalert2-react-content": "^5.1.1",
        "tailwind-merge": "^3.4.0",
        "zustand": "^5.0.11"
      },
      "devDependencies": {
        "@tailwindcss/postcss": "^4.1.18",
        "@types/node": "^20",
        "@types/react": "^19",
        "@types/react-dom": "^19",
        "@types/sockjs-client": "^1.5.4",
        "autoprefixer": "^10.4.23",
        "eslint": "^9",
        "eslint-config-next": "16.1.6",
        "tailwindcss": "^4",
        "typescript": "^5"
      }
    },
    "node_modules/@algolia/abtesting": {
      "version": "1.14.1",

: 필요한 도구와 빌드 방법을 정하는 파일이다. 변경 전에는 이 구간에 대응하는 코드가 없었다. 변경 후 코드는 

  "resolved": "https://registry.npmjs.org/@algolia/abtesting/-/abtesting-1.14.1.tgz",
  "integrity": "sha512-Dkj0BgPiLAaim9sbQ97UKDFHJE/880wgStAM18U++NaJ/2Cws34J5731ovJifr6E3Pv4T2CqvMXf8qLCC417Ew==",
  "license": "MIT",
  "dependencies": {
    "@algolia/client-common": "5.48.1",
    "@algolia/requester-browser-xhr": "5.48.1",
    "@algolia/requester-fetch": "5.48.1",
    "@algolia/requester-node-http": "5.48.1"
  },
  "engines": {
    "node": ">= 14.0.0"
  }
},
"node_modules/@algolia/client-abtesting": {
  "version": "5.48.1",
  "resolved": "https://registry.npmjs.org/@algolia/client-abtesting/-/client-abtesting-5.48.1.tgz",
  "integrity": "sha512-LV5qCJdj+/m9I+Aj91o+glYszrzd7CX6NgKaYdTOj4+tUYfbS62pwYgUfZprYNayhkQpVFcrW8x8ZlIHpS23Vw==",
  "license": "MIT",
  "dependencies": {
    "@algolia/client-common": "5.48.1",
    "@algolia/requester-browser-xhr": "5.48.1",
    "@algolia/requester-fetch": "5.48.1",
    "@algolia/requester-node-http": "5.48.1"
  },
  "engines": {
    "node": ">= 14.0.0"
  }
},
"node_modules/@algolia/client-analytics": {
  "version": "5.48.1",
  "resolved": "https://registry.npmjs.org/@algolia/client-analytics/-/client-analytics-5.48.1.tgz",
  "integrity": "sha512-/AVoMqHhPm14CcHq7mwB+bUJbfCv+jrxlNvRjXAuO+TQa+V37N8k1b0ijaRBPdmSjULMd8KtJbQyUyabXOu6Kg==",
  "license": "MIT",
  "dependencies": {
    "@algolia/client-common": "5.48.1",
    "@algolia/requester-browser-xhr": "5.48.1",

POP-SPOT v1.0 (6/9) — 보안 강화 + 환경변수 분리 + GCP VM 배포 자료

Public

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

POP-SPOT v1.0 (5/9) — 보안 강화 + 환경변수 분리 + GCP VM 배포 자료

이어 읽을 기록

댓글