second: open camera

src/lib/Firebase/config.js

@@ -1,28 +1,59 @@
-
-// we get all our firebase config from the .env file, not included in the repo, so we don't share our API keys. 
-// then we initialize the app and export the database and storage so we can use them in other files  
-
-import { initializeApp } from 'firebase/app';
+import { browser } from '$app/environment';
+import { initializeApp, getApps } from 'firebase/app';
 import { getFirestore } from 'firebase/firestore';
 import { getStorage } from 'firebase/storage';
-import {
-  PUBLIC_FIREBASE_API_KEY,
-  PUBLIC_FIREBASE_AUTH_DOMAIN,
-  PUBLIC_FIREBASE_PROJECT_ID,
-  PUBLIC_FIREBASE_STORAGE_BUCKET,
-  PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
-  PUBLIC_FIREBASE_APP_ID
-} from '$env/static/public';
+import { env } from '$env/dynamic/public';
 
-const firebaseConfig = {
-  apiKey: PUBLIC_FIREBASE_API_KEY,
-  authDomain: PUBLIC_FIREBASE_AUTH_DOMAIN,
-  projectId: PUBLIC_FIREBASE_PROJECT_ID,
-  storageBucket: PUBLIC_FIREBASE_STORAGE_BUCKET,
-  messagingSenderId: PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
-  appId: PUBLIC_FIREBASE_APP_ID
-};
+/** Firebase 환경 변수가 모두 설정됐는지 확인 */
+export function isFirebaseConfigured() {
+	return Boolean(
+		env.PUBLIC_FIREBASE_API_KEY &&
+			env.PUBLIC_FIREBASE_AUTH_DOMAIN &&
+			env.PUBLIC_FIREBASE_PROJECT_ID &&
+			env.PUBLIC_FIREBASE_STORAGE_BUCKET &&
+			env.PUBLIC_FIREBASE_MESSAGING_SENDER_ID &&
+			env.PUBLIC_FIREBASE_APP_ID
+	);
+}
 
-const app = initializeApp(firebaseConfig);
-export const db = getFirestore(app);
-export const storage = getStorage(app);
+function getFirebaseConfig() {
+	return {
+		apiKey: env.PUBLIC_FIREBASE_API_KEY,
+		authDomain: env.PUBLIC_FIREBASE_AUTH_DOMAIN,
+		projectId: env.PUBLIC_FIREBASE_PROJECT_ID,
+		storageBucket: env.PUBLIC_FIREBASE_STORAGE_BUCKET,
+		messagingSenderId: env.PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
+		appId: env.PUBLIC_FIREBASE_APP_ID
+	};
+}
+
+let app;
+let db;
+let storage;
+
+/** Firebase 앱을 지연 초기화하고 Firestore 인스턴스를 반환 */
+export function getDb() {
+	if (!browser) {
+		throw new Error('Firestore는 브라우저에서만 사용할 수 있습니다.');
+	}
+
+	if (!isFirebaseConfigured()) {
+		throw new Error(
+			'Firebase 환경 변수가 설정되지 않았습니다. .env.example을 참고해 .env 파일을 만드세요.'
+		);
+	}
+
+	if (!app) {
+		app = getApps().length ? getApps()[0] : initializeApp(getFirebaseConfig());
+		db = getFirestore(app);
+		storage = getStorage(app);
+	}
+
+	return db;
+}
+
+/** Firebase Storage 인스턴스 반환 */
+export function getStorageInstance() {
+	getDb();
+	return storage;
+}

src/lib/Firebase/messages.js

@@ -1,16 +1,24 @@
-import { collection, query, where, getDocs } from 'firebase/firestore'; // tools for building and running db queries
-import { db } from './config'; // database connection
-import { getQueryPrefix } from '$lib/utils/geohash'; // convert coordinates into geohash string 
+import { collection, query, where, getDocs } from 'firebase/firestore';
+import { getDb, isFirebaseConfigured } from './config.js';
+import { getQueryPrefix } from '$lib/utils/geohash.js';
 
 export async function getNearbyMessages(lat, lng) {
-    const prefix = getQueryPrefix(lat, lng);
+	if (!isFirebaseConfigured()) {
+		console.warn(
+			'Firebase가 설정되지 않아 메시지를 불러오지 못했습니다. 프로젝트 루트에 .env 파일을 추가하세요.'
+		);
+		return [];
+	}
 
-    const q = query(
-        collection(db, 'messages'),
-        where('geohash', '>=', prefix),
-        where('geohash', '<', prefix + 'z')
-    );
+	const prefix = getQueryPrefix(lat, lng);
+	const db = getDb();
 
-    const snapshot = await getDocs(q);
-    return snapshot.docs.map(doc => ({ id: doc.id, ...doc.data() }));
-}
+	const q = query(
+		collection(db, 'messages'),
+		where('geohash', '>=', prefix),
+		where('geohash', '<', prefix + 'z')
+	);
+
+	const snapshot = await getDocs(q);
+	return snapshot.docs.map((doc) => ({ id: doc.id, ...doc.data() }));
+}

src/lib/components/ARView.svelte

@@ -0,0 +1,165 @@
+<script>
+  import { onMount, onDestroy } from 'svelte';
+  import { arStore } from '$lib/stores/arStore.js';
+
+  let { lat, lng } = $props();
+
+  let videoElement;
+  let cameraStream = null;
+  let cameraError = '';
+
+  async function startCamera() {
+    try {
+      cameraStream = await navigator.mediaDevices.getUserMedia({
+        video: {
+          facingMode: { ideal: 'environment' }
+        },
+        audio: false
+      });
+
+      if (videoElement) {
+        videoElement.srcObject = cameraStream;
+        await videoElement.play();
+      }
+    } catch (error) {
+      console.error('Camera error:', error);
+      cameraError = 'Camera could not be started.';
+    }
+  }
+
+  function stopCamera() {
+    if (cameraStream) {
+      cameraStream.getTracks().forEach((track) => track.stop());
+      cameraStream = null;
+    }
+  }
+
+  function exitARMode() {
+    stopCamera();
+
+    arStore.update((state) => ({
+      ...state,
+      isARMode: false,
+      selectedScreenPoint: null,
+      composing: false,
+      focusedMessage: null
+    }));
+  }
+
+  onMount(() => {
+    startCamera();
+  });
+
+  onDestroy(() => {
+    stopCamera();
+  });
+</script>
+
+<div class="ar-view">
+  <video
+    bind:this={videoElement}
+    class="camera-video"
+    autoplay
+    playsinline
+    muted
+  ></video>
+
+  <div class="ar-overlay">
+    <button class="back-button" onclick={exitARMode}>
+      Back
+    </button>
+
+    {#if cameraError}
+      <div class="camera-error">
+        <p>{cameraError}</p>
+        <p class="small">Please check camera permission in your browser.</p>
+      </div>
+    {:else}
+      <div class="ar-status">
+        <p>AR Mode</p>
+        <p class="small">Move your camera slowly.</p>
+      </div>
+    {/if}
+  </div>
+</div>
+
+<style>
+  .ar-view {
+    position: fixed;
+    inset: 0;
+    background: #000;
+    color: white;
+    z-index: 1000;
+    overflow: hidden;
+  }
+
+  .camera-video {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    background: #000;
+  }
+
+  .ar-overlay {
+    position: absolute;
+    inset: 0;
+    z-index: 2;
+    pointer-events: none;
+  }
+
+  .back-button {
+    position: absolute;
+    top: 20px;
+    left: 16px;
+    z-index: 10;
+    padding: 10px 14px;
+    border: none;
+    border-radius: 999px;
+    background: rgba(255, 255, 255, 0.9);
+    color: #111;
+    font-weight: 600;
+    pointer-events: auto;
+  }
+
+  .ar-status {
+    position: absolute;
+    left: 50%;
+    bottom: 36px;
+    transform: translateX(-50%);
+    padding: 12px 18px;
+    border-radius: 999px;
+    background: rgba(0, 0, 0, 0.45);
+    backdrop-filter: blur(8px);
+    text-align: center;
+  }
+
+  .ar-status p {
+    margin: 0;
+    font-size: 14px;
+  }
+
+  .small {
+    margin-top: 4px;
+    font-size: 12px;
+    opacity: 0.75;
+  }
+
+  .camera-error {
+    position: absolute;
+    left: 20px;
+    right: 20px;
+    top: 50%;
+    transform: translateY(-50%);
+    padding: 20px;
+    border-radius: 18px;
+    background: rgba(255, 255, 255, 0.94);
+    color: #111;
+    text-align: center;
+  }
+
+  .camera-error p {
+    margin: 0;
+  }
+</style>

src/lib/components/MapView.Svelte

@@ -10,9 +10,28 @@
     let { lat, lng } = $props();
 
     let mapDiv;
+    let userMarker = null;
 
     let markers = []; // keep track of pins on map
 
+    /** 내 위치 마커 (메시지 핀과 구분되는 파란 점) */
+    function addUserLocationMarker(map, centerLat, centerLng) {
+        userMarker = new google.maps.Marker({
+            position: { lat: centerLat, lng: centerLng },
+            map,
+            title: 'Your location',
+            zIndex: 1000,
+            icon: {
+                path: google.maps.SymbolPath.CIRCLE,
+                scale: 10,
+                fillColor: '#4285F4',
+                fillOpacity: 1,
+                strokeColor: '#ffffff',
+                strokeWeight: 3
+            }
+        });
+    }
+
     onMount (async () => {
         const centerLat = Number(lat);
         const centerLng = Number(lng);
@@ -31,6 +50,8 @@
             disableDefaultUI: true,
             gestureHandling: 'greedy'
         });
+
+        addUserLocationMarker(mapDiv, centerLat, centerLng);
     });
 
     // function to rended pins

src/lib/components/SidePanel.svelte

@@ -72,7 +72,7 @@
 
     .letgo-button {
         flex: 1;
-        padding: 0..75rem;
+        padding: 0.75rem;
         background: transparent;
         color: #111;
         border: 1.5px solid #ddd;

src/lib/stores/arStore.js

@@ -0,0 +1,9 @@
+import { writable } from 'svelte/store';
+
+export const arStore = writable({
+  isARMode: false,
+  currentHeading: null,
+  selectedScreenPoint: null,
+  composing: false,
+  focusedMessage: null
+});

src/routes/+page.svelte

@@ -1,10 +1,13 @@
 <script>
+    
     import { onMount } from 'svelte';
     import MapView from '$lib/components/MapView.svelte';
+    import ARView from '$lib/components/ARView.svelte';
 
     import { getNearbyMessages } from '$lib/firebase/messages.js';
     import { messagesStore } from '$lib/stores/messagesStore.js';
     import { mapStore } from '$lib/stores/mapStore.js';
+    import { arStore } from '$lib/stores/arStore.js';
 
     import BottomSheet from '$lib/components/BottomSheet.svelte';
     import SidePanel from '$lib/components/SidePanel.svelte';
@@ -17,28 +20,36 @@
 
     let isMobile = $derived(windowWidth < 768);
 
-    onMount(() => {
+    async function loadLocation() {
         if (!navigator.geolocation) {
             error = "Your browser doesn't support geolocation :(";
-            return; // do nothing
+            return;
         }
-        navigator.geolocation.getCurrentPosition(
-            (position) => {
-                lat = position.coords.latitude;
-                lng = position.coords.longitude;
-            },
-            () => {
-                error = "Location access denied. Please enable location to use Overheard.";
-            }
-        );
-        // populate the messages store 
+
         navigator.geolocation.getCurrentPosition(
             async (position) => {
-                const messages = await getNearbyMessages(position.coords.latitude, position.coords.longitude);
+                lat = position.coords.latitude;
+                lng = position.coords.longitude;
+
+                const messages = await getNearbyMessages(lat, lng);
                 messagesStore.set(messages);
-                console.log('messages loaded:', $messagesStore);
-            }
+            },
+            (geoError) => {
+                if (geoError.code === geoError.PERMISSION_DENIED) {
+                    error =
+                        'Location access is blocked. In Chrome, click the tune icon next to the URL, open Site settings, and set Location to Allow. Then refresh this page.';
+                } else if (geoError.code === geoError.POSITION_UNAVAILABLE) {
+                    error = 'Location unavailable. Check that location services are enabled on your device.';
+                } else {
+                    error = 'Could not get your location. Please try again.';
+                }
+            },
+            { enableHighAccuracy: true, timeout: 10000 }
         );
+    }
+
+    onMount(() => {
+        loadLocation();
     });
 
     
@@ -47,16 +58,28 @@
 <svelte:window bind:innerWidth={windowWidth} /> <!--this sends the windowWidth to our mobile checker -->
 
 {#if error}
-    <p class="error">{error}</p>
+  <div class="error">
+    <p>{error}</p>
+    <button class="retry-button" onclick={loadLocation}>Try again</button>
+  </div>
 {:else if lat && lng}
+  {#if $arStore.isARMode}
+    <ARView {lat} {lng} />
+  {:else}
     <MapView {lat} {lng} />
+  {/if}
 {:else}
-    <p class="loading">Looking for you...</p>
+  <p class="loading">Looking for you...</p>
 {/if}
 
-<!-- map must fill the whole screen-->
- {#if lat && lng}
-    <MapView {lat} {lng} />
+<!--showing AR button only in mapview-->
+{#if lat && lng && !$arStore.isARMode}
+  <button
+    class="ar-button"
+    onclick={() => arStore.update((state) => ({ ...state, isARMode: true }))}
+  >
+    AR
+  </button>
 {/if}
 
 <!-- show the right panel based on mobile or desktop-->
@@ -75,11 +98,47 @@
 
 .error, .loading {
     display: flex;
+    flex-direction: column;
     align-items: center;
     justify-content: center;
+    gap: 1rem;
     height: 100vh;
+    padding: 0 1.5rem;
+    text-align: center;
     font-family: Georgia, 'Times New Roman', Times, serif;
     color: #666;
-
 }
+
+.retry-button {
+    padding: 0.75rem 1.25rem;
+    border: none;
+    border-radius: 10px;
+    background: #111;
+    color: white;
+    font-size: 0.95rem;
+    cursor: pointer;
+}
+
+.ar-button {
+    position: fixed;
+    right: 20px;
+    bottom: 28px;
+    z-index: 20;
+
+    width: 64px;
+    height: 64px;
+    border-radius: 50%;
+    border: none;
+
+    background: #111;
+    color: white;
+    font-size: 18px;
+    font-weight: 700;
+
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
+  }
+
+  .ar-button:active {
+    transform: scale(0.96);
+  }
 </style>