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

80ecac4c1e6496d6e943de486bfc4c44a368a4d57254d5a8d2c03a13d2f80e7e

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

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

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

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

  if (cachedCongestion) {
      setCongestionData(JSON.parse(cachedCongestion));
  }

  apiFetch('/api/congestion')
    .then(res => res.json())
    .then(data => { 
        if (data && data.level) {
            setCongestionData(data); 
            localStorage.setItem("cached_congestion", JSON.stringify(data)); 
        }
    })
    .catch(err => console.error("혼잡도 데이터 실패:", err));

  const cachedOotd = localStorage.getItem("cached_ootd");
  if (cachedOotd) {
      setOotd(JSON.parse(cachedOotd));
  }

  apiFetch('/api/trends/ootd')
      .then(res => res.json())
      .then(data => {
          setOotd(data);
          localStorage.setItem("cached_ootd", JSON.stringify(data)); 
      })
      .catch(err => console.error("OOTD 로딩 실패:", err));
}, []);

useEffect(() => {
  const storedUser = localStorage.getItem("user");

  if (storedUser) {
      const parsedUser = JSON.parse(storedUser);
      setUser(parsedUser);
       
      fetchMyCourses(parsedUser.userId, true);
      fetchWishlist(parsedUser.userId);

      if (sessionStorage.getItem("lastTab") === "MY") {
          fetchMyPageData(parsedUser.userId);
      }
  }

  const savedCourse = sessionStorage.getItem("aiCourseData");
  if (savedCourse) {
    const parsed = JSON.parse(savedCourse);
    setAiCourse(parsed.course);
    setSelectedVibe(parsed.vibe);
  }
    
  const lastTab = sessionStorage.getItem("lastTab");
  if (lastTab) setCurrentTab(lastTab);
}, []);

/* Utilities */
const sectionVariants: Variants = {

  hidden: { opacity: 0, y: 50 },
  visible: { opacity: 1, y: 0, transition: { duration: 0.8, ease: "easeOut" } }
};

const renderRankChange = (change: number | undefined) => {
    if (!change || change === 0) return <Minus size={10} className="text-gray-500"/>;
    if (change > 0) return <span className="flex items-center text-red-500 text-[10px]"><ArrowUp size={10}/> {change}</span>;
    return <span className="flex items-center text-blue-500 text-[10px]"><ArrowDown size={10}/> {Math.abs(change)}</span>;
};

const getCongestionColor = (level: string) => {
    switch (level) {
        case "여유": return "text-green-500";
        case "보통": return "text-yellow-500";
        case "약간 붐빔": return "text-orange-500";
        case "붐빔": return "text-red-500";
        default: return "text-gray-400";
    }
};

const getDday = (dateStr: string | null) => {
    if (!dateStr) return null;
    const expiry = new Date(dateStr);
    const now = new Date();
    const diff = expiry.getTime() - now.getTime();
    const days = Math.ceil(diff / (1000 * 60 * 60 * 24));
    return days > 0 ? days : 0;
};

const isAdmin = user?.role?.includes('ADMIN');

return (
  <main className="min-h-screen font-sans relative pb-32 overflow-x-hidden transition-colors duration-500 bg-gray-50 text-gray-900 dark:bg-black dark:text-white">
    
    <div className="fixed inset-0 z-0 overflow-hidden pointer-events-none">
      <video autoPlay loop muted playsInline className="absolute min-w-full min-h-full object-cover">

    <source src="/bg.mp4" type="video/mp4" />
  </video>
  <div className="absolute inset-0 transition-colors duration-500 bg-white/80 dark:bg-black/80 backdrop-blur-[2px]"></div>
</div>

<div className="relative z-10 px-4 md:px-6 py-4 md:py-6 max-w-[1600px] mx-auto">
  
  <Header
    user={user}
    onLogout={handleLogout}
    onLogoClick={() => handleTabChange("MAP")}
    onReportClick={() => setIsReportPopupOpen(true)}
    className="mb-6 md:mb-10"
  />

  {/* TAB: MAP */}
  {currentTab === "MAP" && (
      <motion.div initial="hidden" whileInView="visible" viewport={{ once: true }} variants={sectionVariants}>
          
          {/* User Greeting Section */}
          <section aria-label="Welcome Banner" className="mb-6">
              {user ? (
                  <div className="w-full border rounded-xl p-5 md:p-8 relative overflow-hidden flex flex-col md:flex-row items-center justify-between gap-4 bg-ink-900 text-cream-200 border-ink-900 dark:bg-cream-200 dark:text-ink-900 dark:border-cream-200">
                       <div className="relative z-10 text-center md:text-left">
                          <h2 className="text-xl md:text-3xl font-bold mb-1 md:mb-2">반가워요, <span className="text-lime-300 dark:text-lime-700">{user.nickname}</span>님!</h2>
                          <p className="text-xs md:text-base opacity-70">오늘 서울에 <span className="font-bold text-lime-300">{allPopups.length}개</span>의 팝업이 열려있어요.</p>

         </div>
         <button onClick={() => handleTabChange("PASSPORT")} className="relative z-10 w-full md:w-auto inline-flex px-5 py-3 bg-lime-300 hover:bg-lime-400 text-ink-900 font-semibold rounded-pill items-center justify-center gap-2 transition-colors text-sm md:text-base">
            <Ticket size={18}/> 내 여권 확인
         </button>
    </div>
) : (
    <div className="w-full border rounded-xl p-6 md:p-10 relative overflow-hidden text-center md:text-left flex flex-col md:flex-row items-center justify-between gap-6 transition-colors bg-white/60 border-gray-200 backdrop-blur-md dark:bg-white/5 dark:border-white/10">
        <div className="relative z-10">
            <div className="inline-block px-3 py-1 mb-3 md:mb-4 text-[10px] md:text-xs font-bold tracking-[0.2em] uppercase rounded-pill bg-lime-300 text-ink-900">
                Welcome to POP-SPOT
            </div>
            <h2 className="text-2xl md:text-5xl font-black mb-3 md:mb-4 leading-tight text-gray-900 dark:text-white">
                Find Your <span className="text-hot-400">Vibe</span><br className="hidden md:block"/>
                in Seoul.
            </h2>
            <p className="text-xs md:text-base text-gray-600 dark:text-white/70 max-w-md">

                    지금 로그인하고 나만의 팝업 지도를 만들어보세요.<br/>
                    친구와 함께하는 실시간 동선 계획부터 스탬프 적립까지.
                </p>
            </div>
            <div className="flex flex-col sm:flex-row gap-3 relative z-10 w-full md:w-auto">
                <Link href="/login" className="flex-1 md:flex-none">
                    <button className="w-full md:w-auto px-6 py-3 md:px-8 md:py-4 bg-lime-300 hover:bg-lime-400 text-ink-900 font-semibold rounded-pill transition-colors inline-flex items-center justify-center gap-2 text-sm md:text-base">
                        시작하기 <ArrowRight size={16} className="md:w-[18px] md:h-[18px]"/>
                    </button>
                </Link>
                <Link href="/signup" className="flex-1 md:flex-none">
                    <button className="w-full md:w-auto px-6 py-3 md:px-8 md:py-4 font-bold rounded-xl transition-all border bg-white text-gray-900 border-gray-300 hover:bg-gray-100 dark:bg-white/10 dark:text-white dark:border-white/20 dark:hover:bg-white/20 text-sm md:text-base">
                        회원가입
                    </button>
                </Link>
            </div>
        </div>
    )}
</section>

{/* Dashboard Main Grid */}

<section aria-label="Dashboard Layout" className="grid grid-cols-1 lg:grid-cols-12 md:grid-rows-6 gap-4 min-h-[80vh] mb-16">
    
    {/* Search Zone */}
    <div className="col-span-1 lg:col-span-5 md:row-span-2 relative z-50 order-1 lg:order-none">
        <SearchZone />
    </div>
    
    {/* Map Zone */}
    <div className="col-span-1 lg:col-span-7 md:row-span-4 rounded-[2rem] relative overflow-hidden border border-gray-200 dark:border-white/5 group bg-gray-100 dark:bg-[#111]/80 backdrop-blur-md min-h-[400px] md:min-h-0 order-2 lg:order-none">
        <InteractiveMap onMarkerClick={handleMarkerClickToDetail} />
        <div className="absolute bottom-4 md:bottom-6 left-4 md:left-6 flex gap-2 z-20">
            <span className="backdrop-blur px-3 py-1.5 md:px-4 md:py-2 rounded-full border text-[10px] md:text-xs font-bold flex items-center gap-1.5 md:gap-2 bg-white/80 border-gray-200 text-gray-900 dark:bg-black/60 dark:border-white/10 dark:text-white">
            <span className="w-1.5 h-1.5 md:w-2 md:h-2 bg-green-500 rounded-full animate-pulse"/> LIVE DATA
            </span>
        </div>
    </div>

    {/* Real-time Ranking Zone */}

<div className="col-span-1 lg:col-span-5 md:row-span-4 rounded-[2rem] p-5 md:p-6 border flex flex-col backdrop-blur-md transition-colors bg-white/80 border-gray-200 dark:bg-[#111]/80 dark:border-white/5 order-3 lg:order-none h-[300px] md:h-auto">
    <header className="flex items-center justify-between mb-4 md:mb-6 pb-3 md:pb-4 border-b border-gray-200 dark:border-white/5">
        <div className="flex items-center gap-2">
            <Flame size={18} className="text-secondary animate-pulse md:w-5 md:h-5"/>
            <h3 className="font-bold text-base md:text-lg text-gray-900 dark:text-white">REAL-TIME RANKING</h3>
        </div>
        <button onClick={handleOpenModal} aria-label="전체 트렌딩 보기" className="p-1.5 md:p-2 hover:bg-gray-100 dark:hover:bg-white/10 rounded-full transition-colors group">
            <Plus size={18} className="md:w-5 md:h-5 text-gray-500 dark:text-white/60 group-hover:text-primary transition-colors"/>
        </button>
    </header>
    <div className="flex-1 space-y-2 overflow-y-auto custom-scrollbar pr-1 md:pr-2">
        {hotPopups.length > 0 ? (
        <AnimatePresence>
            {hotPopups.map((popup, idx) => (
            <motion.a
                href={`/popup/${popup.id}`}
                key={popup.id}

onClick={(e) => { e.preventDefault(); handleTabChange("MAP"); router.push(`/popup/${popup.id}`); }} layout initial={{ opacity: 0, scale: 0.9 }} animate={{ opacity: 1, scale: 1 }} transition={{ duration: 0.3 }} 
            className="flex items-center justify-between p-3 md:p-4 mb-2 rounded-xl md:rounded-2xl transition-colors cursor-pointer group border bg-white hover:bg-gray-50 border-gray-100 hover:border-gray-300 dark:bg-white/5 dark:hover:bg-white/10 dark:border-transparent dark:hover:border-white/10">
<div className="flex items-center gap-2 md:gap-3">
        <div className="flex flex-col items-center w-5 md:w-6">
            <span className={`text-xs md:text-sm font-black ${idx === 0 ? 'text-primary' : 'text-gray-400 dark:text-white/30'}`}>{idx + 1}</span>
            {renderRankChange(popup.rankChange)}
        </div>
        <div>
            <strong className="font-bold block text-xs md:text-sm text-gray-900 dark:text-white truncate max-w-[120px] md:max-w-[180px]">{popup.name}</strong>
            <span className="text-[9px] md:text-[10px] text-gray-500 dark:text-white/60 truncate max-w-[120px] md:max-w-full block">{popup.location}</span>
        </div>

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

Public

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

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

이어 읽을 기록

댓글