diff --git a/web/.env b/web/.env
new file mode 100644
index 0000000..f420b94
--- /dev/null
+++ b/web/.env
@@ -0,0 +1 @@
+NEXT_PUBLIC_API_BASE_URL=http://127.0.0.1:3001
\ No newline at end of file
diff --git a/web/.gitignore b/web/.gitignore
index 5ef6a52..1b7a73a 100644
--- a/web/.gitignore
+++ b/web/.gitignore
@@ -31,7 +31,7 @@ yarn-error.log*
 .pnpm-debug.log*
 
 # env files (can opt-in for committing if needed)
-.env*
+# .env*
 
 # vercel
 .vercel
diff --git a/web/.vscode/launch.json b/web/.vscode/launch.json
index 9244737..bcc891d 100644
--- a/web/.vscode/launch.json
+++ b/web/.vscode/launch.json
@@ -1,15 +1,26 @@
 {
-  // IntelliSense를 사용하여 가능한 특성에 대해 알아보세요.
-  // 기존 특성에 대한 설명을 보려면 가리킵니다.
-  // 자세한 내용을 보려면 https://go.microsoft.com/fwlink/?linkid=830387을(를) 방문하세요.
   "version": "0.2.0",
   "configurations": [
     {
       "type": "chrome",
       "request": "launch",
-      "name": "Next.js cliend debug",
-      "url": "http://localhost:3000",
-      "webRoot": "${workspaceFolder}"
+      "name": "Next.js client debug (Chrome)",
+      "url": "http://127.0.0.1:3000",
+      "webRoot": "${workspaceFolder}",
+      "sourceMaps": true,
+      "trace": true,
+      "timeout": 20000
+    },
+    {
+      "type": "chrome",
+      "request": "launch",
+      "name": "Next.js client debug (Whale)",
+      "url": "http://127.0.0.1:3000",
+      "webRoot": "${workspaceFolder}",
+      "runtimeExecutable": "C:\\Program Files\\Naver\\Naver Whale\\Application\\whale.exe",
+      "sourceMaps": true,
+      "trace": true,
+      "timeout": 20000
     }
   ]
 }
diff --git a/web/src/app/sensor-groups/[groupId]/page.tsx b/web/src/app/sensor-groups/[groupId]/page.tsx
index 3726872..d6d9451 100644
--- a/web/src/app/sensor-groups/[groupId]/page.tsx
+++ b/web/src/app/sensor-groups/[groupId]/page.tsx
@@ -1,5 +1,6 @@
 'use client';
 
+import Guard from '@/components/guard';
 import { Button } from '@/components/ui/button';
 import {
   Table,
@@ -20,55 +21,57 @@ export default function GroupSensorsPage() {
   const { data, isLoading, isError, refetch } = useGroupSensors(groupId);
 
   return (
-    <main className="mx-auto max-w-full px-4 py-6">
-      <div className="mb-4 flex items-center justify-between">
-        <div className="flex items-center gap-2">
-          <Button variant="ghost" onClick={() => router.back()}>
-            〈
-          </Button>
-          <h1 className="text-xl font-semibold">센서 그룹</h1>
+    <Guard>
+      <main className="mx-auto max-w-full px-4 py-6">
+        <div className="mb-4 flex items-center justify-between">
+          <div className="flex items-center gap-2">
+            <Button variant="ghost" onClick={() => router.back()}>
+              〈
+            </Button>
+            <h1 className="text-xl font-semibold">센서 그룹</h1>
+          </div>
+          <Button onClick={() => refetch()}>새로고침</Button>
         </div>
-        <Button onClick={() => refetch()}>새로고침</Button>
-      </div>
 
-      {isLoading && <p className="text-gray-500">불러오는 중...</p>}
-      {isError && <p className="text-red-600">불러오지 못했습니다.</p>}
-      {!isLoading && !isError && (
-        <div className="overflow-x-auto rounded border">
-          <Table>
-            <TableHeader>
-              <TableRow>
-                <TableHead className="px-4 py-2 text-center">ID</TableHead>
-                <TableHead className="px-4 py-2 text-center">이름</TableHead>
-                <TableHead className="px-4 py-2 text-center">단위</TableHead>
-                <TableHead className="px-4 py-2 text-center">데이터</TableHead>
-              </TableRow>
-            </TableHeader>
-            <TableBody>
-              {data && data.length > 0 ? (
-                data.map((s) => (
-                  <TableRow key={s.id}>
-                    <TableCell className="px-4 py-2 text-center">{s.id}</TableCell>
-                    <TableCell className="px-4 py-2 text-center">{s.name}</TableCell>
-                    <TableCell className="px-4 py-2 text-center">{s.unit ?? '-'}</TableCell>
-                    <TableCell className="flex items-center justify-center px-4 py-2 text-center">
-                      <Button asChild variant="outline">
-                        <Link href={`/sensors/${s.id}`}>센서보기</Link>
-                      </Button>
-                    </TableCell>
-                  </TableRow>
-                ))
-              ) : (
+        {isLoading && <p className="text-gray-500">불러오는 중...</p>}
+        {isError && <p className="text-red-600">불러오지 못했습니다.</p>}
+        {!isLoading && !isError && (
+          <div className="overflow-x-auto rounded border">
+            <Table>
+              <TableHeader>
                 <TableRow>
-                  <TableCell colSpan={4} className="px-4 py-6 text-center text-gray-500">
-                    데이터가 없습니다.
-                  </TableCell>
+                  <TableHead className="px-4 py-2 text-center">ID</TableHead>
+                  <TableHead className="px-4 py-2 text-center">이름</TableHead>
+                  <TableHead className="px-4 py-2 text-center">단위</TableHead>
+                  <TableHead className="px-4 py-2 text-center">데이터</TableHead>
                 </TableRow>
-              )}
-            </TableBody>
-          </Table>
-        </div>
-      )}
-    </main>
+              </TableHeader>
+              <TableBody>
+                {data && data.length > 0 ? (
+                  data.map((s) => (
+                    <TableRow key={s.id}>
+                      <TableCell className="px-4 py-2 text-center">{s.id}</TableCell>
+                      <TableCell className="px-4 py-2 text-center">{s.name}</TableCell>
+                      <TableCell className="px-4 py-2 text-center">{s.unit ?? '-'}</TableCell>
+                      <TableCell className="flex items-center justify-center px-4 py-2 text-center">
+                        <Button asChild variant="outline">
+                          <Link href={`/sensors/${s.id}`}>센서보기</Link>
+                        </Button>
+                      </TableCell>
+                    </TableRow>
+                  ))
+                ) : (
+                  <TableRow>
+                    <TableCell colSpan={4} className="px-4 py-6 text-center text-gray-500">
+                      데이터가 없습니다.
+                    </TableCell>
+                  </TableRow>
+                )}
+              </TableBody>
+            </Table>
+          </div>
+        )}
+      </main>
+    </Guard>
   );
 }
diff --git a/web/src/app/sensor-groups/page.tsx b/web/src/app/sensor-groups/page.tsx
index faf1628..8c66d8b 100644
--- a/web/src/app/sensor-groups/page.tsx
+++ b/web/src/app/sensor-groups/page.tsx
@@ -1,5 +1,6 @@
 'use client';
 
+import Guard from '@/components/guard';
 import { Button } from '@/components/ui/button';
 import {
   Table,
@@ -16,50 +17,54 @@ export default function SensorGroupPage() {
   const { data, isLoading, isError, refetch } = useSensorGroups();
 
   return (
-    <main className="mx-auto px-4 py-6">
-      <div className="mb-4 flex items-center justify-between">
-        <h1 className="text-xl font-semibold">센서 그룹</h1>
-        <Button onClick={() => refetch()}>새로고침</Button>
-      </div>
+    <Guard>
+      <main className="mx-auto px-4 py-6">
+        <div className="mb-4 flex items-center justify-between">
+          <h1 className="text-xl font-semibold">센서 그룹</h1>
+          <Button onClick={() => refetch()}>새로고침</Button>
+        </div>
 
-      {isLoading && <p className="text-gray-500">불러오는 중...</p>}
-      {isError && <p className="text-red-600">불러오지 못했습니다.</p>}
-      {!isLoading && !isError && (
-        <div className="overflow-x-auto rounded border">
-          <Table>
-            <TableHeader>
-              <TableRow>
-                <TableHead className="px-4 py-2 text-center">ID</TableHead>
-                <TableHead className="px-4 py-2 text-center">이름</TableHead>
-                <TableHead className="px-4 py-2 text-center">설명</TableHead>
-                <TableHead className="px-4 py-2 text-center">상세</TableHead>
-              </TableRow>
-            </TableHeader>
-            <TableBody>
-              {data && data.length > 0 ? (
-                data.map((g) => (
-                  <TableRow key={g.id}>
-                    <TableCell className="px-4 py-2 text-center">{g.id}</TableCell>
-                    <TableCell className="px-4 py-2 text-center">{g.name}</TableCell>
-                    <TableCell className="px-4 py-2 text-center">{g.description ?? '-'}</TableCell>
-                    <TableCell className="flex items-center justify-center px-4 py-2">
-                      <Button asChild variant="outline">
-                        <Link href={`/sensor-groups/${g.id}`}>센서보기</Link>
-                      </Button>
-                    </TableCell>
-                  </TableRow>
-                ))
-              ) : (
+        {isLoading && <p className="text-gray-500">불러오는 중...</p>}
+        {isError && <p className="text-red-600">불러오지 못했습니다.</p>}
+        {!isLoading && !isError && (
+          <div className="overflow-x-auto rounded border">
+            <Table>
+              <TableHeader>
                 <TableRow>
-                  <TableCell colSpan={4} className="px-4 py-6 text-center text-gray-500">
-                    데이터가 없습니다.
-                  </TableCell>
+                  <TableHead className="px-4 py-2 text-center">ID</TableHead>
+                  <TableHead className="px-4 py-2 text-center">이름</TableHead>
+                  <TableHead className="px-4 py-2 text-center">설명</TableHead>
+                  <TableHead className="px-4 py-2 text-center">상세</TableHead>
                 </TableRow>
-              )}
-            </TableBody>
-          </Table>
-        </div>
-      )}
-    </main>
+              </TableHeader>
+              <TableBody>
+                {data && data.length > 0 ? (
+                  data.map((g) => (
+                    <TableRow key={g.id}>
+                      <TableCell className="px-4 py-2 text-center">{g.id}</TableCell>
+                      <TableCell className="px-4 py-2 text-center">{g.name}</TableCell>
+                      <TableCell className="px-4 py-2 text-center">
+                        {g.description ?? '-'}
+                      </TableCell>
+                      <TableCell className="flex items-center justify-center px-4 py-2">
+                        <Button asChild variant="outline">
+                          <Link href={`/sensor-groups/${g.id}`}>센서보기</Link>
+                        </Button>
+                      </TableCell>
+                    </TableRow>
+                  ))
+                ) : (
+                  <TableRow>
+                    <TableCell colSpan={4} className="px-4 py-6 text-center text-gray-500">
+                      데이터가 없습니다.
+                    </TableCell>
+                  </TableRow>
+                )}
+              </TableBody>
+            </Table>
+          </div>
+        )}
+      </main>
+    </Guard>
   );
 }
diff --git a/web/src/app/sensors/[sensorId]/page.tsx b/web/src/app/sensors/[sensorId]/page.tsx
index 49583c7..6f5acaa 100644
--- a/web/src/app/sensors/[sensorId]/page.tsx
+++ b/web/src/app/sensors/[sensorId]/page.tsx
@@ -1,5 +1,6 @@
 'use client';
 
+import Guard from '@/components/guard';
 import { useParams, useRouter, useSearchParams } from 'next/navigation';
 
 export default function SensorDetailPage() {
@@ -11,8 +12,10 @@ export default function SensorDetailPage() {
   const limit = search.get('limit') ? Number(search.get('limit')) : undefined;
 
   return (
-    <main>
-      <div></div>
-    </main>
+    <Guard>
+      <main>
+        <div></div>
+      </main>
+    </Guard>
   );
 }