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

c3a51f342b932f6033a2f876d70594c82f94587d563436d56b44a73677604c10

커밋 3ebd224 — feat(security): v2.40 보안 하드닝 — 엔티티 노출·IDOR·결제 무결성·토큰 폐기 + 신뢰성·CI

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

@@ -1161,63 +1340,130 @@ export default function Home() {

{/* 핀 1 — 성수 */}
<div className="absolute top-[18%] left-[15%] flex items-center gap-1.5">
    <span className="w-3 h-3 rounded-full bg-lime-300 ring-2 ring-ink-900" />
    <span className="text-[10px] font-semibold text-cream-200 bg-ink-900/80 px-1.5 py-0.5 rounded">성수</span>
</div>

{/* 핀 2 — 한남 (현재 편집 중인 위치) */}
<div className="absolute top-[44%] left-[48%] flex items-center gap-1.5">
    <span className="relative flex items-center justify-center">
        <span className="absolute w-5 h-5 rounded-full bg-hot-400/40 animate-ping" />
        <span className="relative w-3 h-3 rounded-full bg-hot-400 ring-2 ring-ink-900" />
    </span>
    <span className="text-[10px] font-semibold text-cream-200 bg-ink-900/80 px-1.5 py-0.5 rounded">한남</span>
</div>

{/* 핀 3 — 압구정 */}
<div className="absolute bottom-[12%] right-[8%] flex items-center gap-1.5">
    <span className="text-[10px] font-semibold text-cream-200 bg-ink-900/80 px-1.5 py-0.5 rounded">압구정</span>

<div className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-pill bg-lime-300/15 border border-lime-300/40 text-lime-300 text-[10px] lg:text-xs font-semibold tracking-wide mb-4 lg:mb-6">
  <Users size={12} className="lg:w-4 lg:h-4" /> 실시간 협업 기능
</div>
<h2 className="text-2xl md:text-4xl lg:text-5xl font-black mb-4 lg:mb-6 leading-tight">
  친구와 함께 그리는
  <br />
  <span className="text-lime-300">서울 작전지도</span>
</h2>
<p className="text-gray-400 text-xs lg:text-lg mb-6 lg:mb-8 leading-relaxed max-w-lg mx-auto lg:mx-0">
  &ldquo;거기 어때?&rdquo; 링크 공유는 그만.
  <br />
  같은 화면을 보며 실시간으로 마커를 찍고 동선을 계획하세요.
  <br className="hidden lg:block" />
</p>
<button
  onClick={handleCreateRoom}
  className="group relative inline-flex items-center justify-center px-6 py-3 lg:px-8 lg:py-4 font-semibold text-ink-900 transition-colors bg-lime-300 hover:bg-lime-400 rounded-pill focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 text-sm lg:text-base w-full lg:w-auto"
>
  <span className="mr-2">작전 회의실 만들기</span>
  <ArrowRight className="w-4 h-4 lg:w-5 lg:h-5 transition-transform group-hover:translate-x-1" />

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

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

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

        <span className="w-3 h-3 rounded-full bg-cream-200 ring-2 ring-ink-900" />
    </div>

    {/* 친구의 동시 편집 커서 */}
    <div className="absolute top-[35%] left-[55%] pointer-events-none">
        <svg width="14" height="18" viewBox="0 0 14 18" fill="none" className="drop-shadow-md">
            <path d="M0 0 L 0 14 L 4 11 L 7 17 L 9 16 L 6 10 L 11 10 Z" fill="#FFC107" stroke="#0a0a0a" strokeWidth="0.8" strokeLinejoin="round" />
        </svg>
        <div className="ml-3 mt-0 px-1.5 py-0.5 bg-amber-400 text-ink-900 text-[9px] font-bold rounded whitespace-nowrap">민지</div>
    </div>
</div>

{/* 하단: 다음 후보지 메타 */}
<div className="mt-4 flex items-center justify-between gap-3 px-1">
    <div className="flex items-center gap-2">
        <span className="w-2 h-2 rounded-full bg-lime-300 animate-pulse" />
        <span className="text-[11px] text-cream-200/70">2명 함께 편집 중</span>
    </div>
    <span className="text-[10px] font-mono uppercase tracking-wider text-cream-200/40">3 stops · 1.2km</span>
</div>

{/* 핀 1 — 성수 */}
<div className="absolute top-[18%] left-[15%] flex items-center gap-1.5">
  <span className="w-3 h-3 rounded-full bg-lime-300 ring-2 ring-ink-900" />
  <span className="text-[10px] font-semibold text-cream-200 bg-ink-900/80 px-1.5 py-0.5 rounded">
    성수
  </span>
</div>

{/* 핀 2 — 한남 (현재 편집 중인 위치) */}
<div className="absolute top-[44%] left-[48%] flex items-center gap-1.5">
  <span className="relative flex items-center justify-center">
    <span className="absolute w-5 h-5 rounded-full bg-hot-400/40 animate-ping" />
    <span className="relative w-3 h-3 rounded-full bg-hot-400 ring-2 ring-ink-900" />
  </span>
  <span className="text-[10px] font-semibold text-cream-200 bg-ink-900/80 px-1.5 py-0.5 rounded">
    한남
  </span>
</div>

{/* 핀 3 — 압구정 */}
<div className="absolute bottom-[12%] right-[8%] flex items-center gap-1.5">
  <span className="text-[10px] font-semibold text-cream-200 bg-ink-900/80 px-1.5 py-0.5 rounded">
    압구정
  </span>
  <span className="w-3 h-3 rounded-full bg-cream-200 ring-2 ring-ink-900" />
</div>

{/* 친구의 동시 편집 커서 */}
<div className="absolute top-[35%] left-[55%] pointer-events-none">
  <svg
    width="14"
    height="18"
    viewBox="0 0 14 18"
    fill="none"
    className="drop-shadow-md"
  >
    <path
      d="M0 0 L 0 14 L 4 11 L 7 17 L 9 16 L 6 10 L 11 10 Z"
      fill="#FFC107"
      stroke="#0a0a0a"
      strokeWidth="0.8"
      strokeLinejoin="round"
    />
  </svg>
  <div className="ml-3 mt-0 px-1.5 py-0.5 bg-amber-400 text-ink-900 text-[9px] font-bold rounded whitespace-nowrap">
    민지

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

@@ -1224,0 +1471 @@ export default function Home() {

@@ -1226 +1472,0 @@ export default function Home() {

 같은 값과 기능을 사용해 처리했다. 변경 후에는 이 구간의 코드를 제거했다.

@@ -1228 +1474,15 @@ export default function Home() {

          {/* 하단: 다음 후보지 메타 */}
          <div className="mt-4 flex items-center justify-between gap-3 px-1">
            <div className="flex items-center gap-2">
              <span className="w-2 h-2 rounded-full bg-lime-300 animate-pulse" />
              <span className="text-[11px] text-cream-200/70">2명 함께 편집 중</span>
            </div>
            <span className="text-[10px] font-mono uppercase tracking-wider text-cream-200/40">
              3 stops · 1.2km
            </span>
          </div>
        </div>
      </div>
    </div>
  </motion.section>
</motion.div>

@@ -1232,6 +1492,11 @@ export default function Home() {

{currentTab === "PASSPORT" && (
    <motion.section aria-label="Digital Passport" initial={{ opacity: 0, scale: 0.95 }} animate={{ opacity: 1, scale: 1 }} exit={{ opacity: 0 }}
                className="min-h-[60vh] rounded-xl border border-[var(--color-border)] bg-surface text-surface-foreground mb-16 shadow-md">
      {/* 여권은 게스트/비로그인도 열람 가능(빈 여권으로). 스탬프 적립은 방문 인증 시 로그인 유도. */}
      <PassportView />
    </motion.section>

{currentTab === 'PASSPORT' && (
  <motion.section
    aria-label="Digital Passport"
    initial={{ opacity: 0, scale: 0.95 }}
    animate={{ opacity: 1, scale: 1 }}
    exit={{ opacity: 0 }}
    className="min-h-[60vh] rounded-xl border border-[var(--color-border)] bg-surface text-surface-foreground mb-16 shadow-md"
  >
    {/* 여권은 게스트/비로그인도 열람 가능(빈 여권으로). 스탬프 적립은 방문 인증 시 로그인 유도. */}
    <PassportView />
  </motion.section>

@@ -1241,12 +1506,15 @@ export default function Home() {

{currentTab === "MUSIC" && (
    <motion.section
        aria-label="Music to Popup"
        initial={{ opacity: 0, y: 12 }}
        animate={{ opacity: 1, y: 0 }}
        className="mb-16 rounded-xl border border-[var(--color-border)] bg-surface p-4 lg:p-6"
    >
        <MusicTab
            popups={allPopups}
            onOpenPopup={(id) => { handleTabChange("MAP"); router.push(`/popup/${id}`); }}
        />
    </motion.section>

{currentTab === 'MUSIC' && (
  <motion.section
    aria-label="Music to Popup"
    initial={{ opacity: 0, y: 12 }}
    animate={{ opacity: 1, y: 0 }}
    className="mb-16 rounded-xl border border-[var(--color-border)] bg-surface p-4 lg:p-6"
  >
    <MusicTab
      popups={allPopups}
      onOpenPopup={(id) => {
        handleTabChange('MAP');
        router.push(`/popup/${id}`);
      }}
    />
  </motion.section>

POP-SPOT v2.40 (5/16) — v2.40 보안 하드닝 — 엔티티 노출·IDOR·결제 무결성·토큰 폐기 + 신뢰성·CI

Public

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

POP-SPOT v2.40 (4/16) — v2.40 보안 하드닝 — 엔티티 노출·IDOR·결제 무결성·토큰 폐기 + 신뢰성·CI

이어 읽을 기록

댓글