fix

backend/src/sensors/sensors.controller.ts

@@ -12,7 +12,6 @@ import {
 } from '@nestjs/common';
 import { SensorsService } from './sensors.service';
 import { ApiBearerAuth, ApiOkResponse, ApiOperation, ApiQuery, ApiTags } from '@nestjs/swagger';
-import { Sensor } from './entities/sensor.entity';
 import { JwtAuthGuard } from 'src/auth/jwt-auth.guard';
 import { SensorGroupResponseDto } from './dto/sensor-group-response.dto';
 import { AuthRequest } from 'src/common/interfaces/auth-request.interface';

web/next.config.ts

@@ -2,6 +2,7 @@ import type { NextConfig } from 'next';
 
 const nextConfig: NextConfig = {
   /* config options here */
+  output: 'export',
 };
 
 export default nextConfig;

web/src/app/layout.tsx

@@ -19,7 +19,7 @@ export default function RootLayout({
         <Providers>
           <div className="flex min-h-screen flex-col">
             <AppHeader />
-            <main className="flex flex-1 flex-col items-center justify-center">{children}</main>
+            <main className="flex w-full flex-1 flex-col px-6 py-8">{children}</main>
           </div>
         </Providers>
       </body>

web/src/app/login/page.tsx

@@ -70,8 +70,8 @@ export default function LoginPage() {
   };
 
   return (
-    <div className="mx-auto my-auto w-full max-w-sm">
+    <div className="flex h-full w-full flex-1 flex-col items-center justify-center space-y-10">
-      <Card className="shadow-lg">
+      <Card className="min-w-sm shadow-lg">
         <CardHeader>
           <CardTitle>로그인</CardTitle>
         </CardHeader>

web/src/app/me/page.tsx

@@ -9,31 +9,33 @@ export default function MePage() {
 
   return (
     <Guard>
-      {isLoading && <p>불러오는 중…</p>}
+      <div className="flex h-full w-full flex-1 flex-col items-center justify-center space-y-10">
-      {error && <p className="text-red-600">조회 실패</p>}
+        {isLoading && <p>불러오는 중…</p>}
+        {error && <p className="text-red-600">조회 실패</p>}
 
-      {!isLoading && !error && data && (
+        {!isLoading && !error && data && (
-        <Card className="w-full max-w-sm shadow-lg">
+          <Card className="w-full max-w-sm shadow-lg">
-          <CardHeader className="flex flex-row items-center gap-4">
+            <CardHeader className="flex flex-row items-center gap-4">
-            <div className="flex h-12 w-12 items-center justify-center rounded-full bg-gray-300 text-xl font-bold text-gray-500">
+              <div className="flex h-12 w-12 items-center justify-center rounded-full bg-gray-300 text-xl font-bold text-gray-500">
-              {data.name?.[0]}
+                {data.name?.[0]}
-            </div>
+              </div>
-            <div>
+              <div>
-              <CardTitle>{data.name ?? '이름 없음'}</CardTitle>
+                <CardTitle>{data.name ?? '이름 없음'}</CardTitle>
-              <div className="text-xs text-gray-400">ID: {data.id}</div>
+                <div className="text-xs text-gray-400">ID: {data.id}</div>
-            </div>
-          </CardHeader>
-
-          <CardContent className="space-y-3">
-            {data.email && (
-              <div className="flex items-center gap-2 text-gray-700">
-                <span className="font-medium">이메일</span>
-                <span className="truncate">{data.email}</span>
               </div>
-            )}
+            </CardHeader>
-          </CardContent>
+
-        </Card>
+            <CardContent className="space-y-3">
-      )}
+              {data.email && (
+                <div className="flex items-center gap-2 text-gray-700">
+                  <span className="font-medium">이메일</span>
+                  <span className="truncate">{data.email}</span>
+                </div>
+              )}
+            </CardContent>
+          </Card>
+        )}
+      </div>
     </Guard>
   );
 }

web/src/app/page.tsx

@@ -31,7 +31,7 @@ export default function Home() {
   const localNow = timezone ? now.setZone(timezone) : now;
 
   return (
-    <div className="space-y-10">
+    <div className="flex h-full w-full flex-1 flex-col items-center justify-center space-y-10">
       <Card className="w-full max-w-md">
         <CardHeader className="flex justify-center">
           <CardTitle className="text-3xl font-bold">DateTime UI Sample</CardTitle>

web/src/app/sensor-groups/page.tsx

@@ -18,49 +18,53 @@ export default function SensorGroupPage() {
 
   return (
     <Guard>
-      <div className="mb-4 flex items-center justify-between">
+      <div className="flex h-full flex-col">
-        <h1 className="text-xl font-semibold">센서 그룹</h1>
+        <div className="mb-4 flex items-center justify-between">
-        <Button onClick={() => refetch()}>새로고침</Button>
+          <h1 className="text-xl font-semibold">센서 그룹 리스트</h1>
-      </div>
+          <Button onClick={() => refetch()}>새로고침</Button>
+        </div>
 
-      {isLoading && <p className="text-gray-500">불러오는 중...</p>}
+        {isLoading && <p className="text-gray-500">불러오는 중...</p>}
-      {isError && <p className="text-red-600">불러오지 못했습니다.</p>}
+        {isError && <p className="text-red-600">불러오지 못했습니다.</p>}
-      {!isLoading && !isError && (
+        {!isLoading && !isError && (
-        <div className="overflow-x-auto rounded border">
+          <div className="overflow-x-auto rounded border">
-          <Table>
+            <Table>
-            <TableHeader>
+              <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>
-                ))
-              ) : (
                 <TableRow>
-                  <TableCell colSpan={4} className="px-4 py-6 text-center text-gray-500">
+                  <TableHead className="px-4 py-2 text-center">ID</TableHead>
-                    데이터가 없습니다.
+                  <TableHead className="px-4 py-2 text-center">이름</TableHead>
-                  </TableCell>
+                  <TableHead className="px-4 py-2 text-center">설명</TableHead>
+                  <TableHead className="px-4 py-2 text-center">상세</TableHead>
                 </TableRow>
-              )}
+              </TableHeader>
-            </TableBody>
+              <TableBody>
-          </Table>
+                {data && data.length > 0 ? (
-        </div>
+                  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/sensors?groupId=${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>
+        )}
+      </div>
     </Guard>
   );
 }

web/src/app/sensor-groups/sensor/innerPage.tsx

@@ -0,0 +1,74 @@
+'use client';
+
+import Guard from '@/components/guard';
+import { Button } from '@/components/ui/button';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import { useSensorData } from '@/hooks/useSensorData';
+import { useRouter, useSearchParams } from 'next/navigation';
+
+export default function InnerSensorDataPage() {
+  const searchParams = useSearchParams();
+  const rawSensorId = searchParams.get('sensorId');
+  const router = useRouter();
+
+  const sensorId = (() => {
+    if (!rawSensorId) return 0;
+    const n = Number(rawSensorId);
+    return Number.isNaN(n) || !Number.isFinite(n) || !Number.isInteger(n) || n <= 0 ? 0 : n;
+  })();
+  const { data, isLoading, isError, refetch } = useSensorData(sensorId);
+
+  return (
+    <Guard>
+      <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">센서{sensorId} 데이터</h1>
+        </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>
+              </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.value}</TableCell>
+                    <TableCell className="px-4 py-2 text-center">{s.recordedAt ?? '-'}</TableCell>
+                  </TableRow>
+                ))
+              ) : (
+                <TableRow>
+                  <TableCell colSpan={4} className="px-4 py-6 text-center text-gray-500">
+                    데이터가 없습니다.
+                  </TableCell>
+                </TableRow>
+              )}
+            </TableBody>
+          </Table>
+        </div>
+      )}
+    </Guard>
+  );
+}

web/src/app/sensor-groups/sensor/page.tsx

@@ -0,0 +1,12 @@
+import { Suspense } from 'react';
+import InnerSensorDataPage from './innerPage';
+
+export default function SensorDataPage() {
+  return (
+    <Suspense
+      fallback={<div className="mb-4 flex items-center justify-between">불러오는 중...</div>}
+    >
+      <InnerSensorDataPage />
+    </Suspense>
+  );
+}

web/src/app/sensor-groups/sensors/innerPage.tsx

@@ -12,22 +12,30 @@ import {
 } from '@/components/ui/table';
 import { useGroupSensors } from '@/hooks/useGroupSensor';
 import Link from 'next/link';
-import { useParams, useRouter } from 'next/navigation';
+import { useRouter, useSearchParams } from 'next/navigation';
+import { Suspense } from 'react';
 
-export default function GroupSensorsPage() {
+export default function InnerGroupSensorsPage() {
-  const params = useParams();
+  const searchParams = useSearchParams();
-  const groupId = Number(params.groupId);
+  const rawGroupId = searchParams.get('groupId');
   const router = useRouter();
+
+  const groupId = (() => {
+    if (!rawGroupId) return 0;
+    const n = Number(rawGroupId);
+    return Number.isNaN(n) || !Number.isFinite(n) || !Number.isInteger(n) || n <= 0 ? 0 : n;
+  })();
   const { data, isLoading, isError, refetch } = useGroupSensors(groupId);
 
   return (
     <Guard>
+      <Suspense fallback={<div>불러오는 중...</div>}></Suspense>
       <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>
+          <h1 className="text-xl font-semibold">그룹{groupId} 센서 리스트</h1>
         </div>
         <Button onClick={() => refetch()}>새로고침</Button>
       </div>
@@ -54,7 +62,7 @@ export default function GroupSensorsPage() {
                     <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>
+                        <Link href={`/sensor-groups/sensor?sensorId=${s.id}`}>데이터보기</Link>
                       </Button>
                     </TableCell>
                   </TableRow>

web/src/app/sensor-groups/sensors/page.tsx

@@ -0,0 +1,12 @@
+import { Suspense } from 'react';
+import InnerGroupSensorsPage from './innerPage';
+
+export default function GroupSensorsPage() {
+  return (
+    <Suspense
+      fallback={<div className="mb-4 flex items-center justify-between">불러오는 중...</div>}
+    >
+      <InnerGroupSensorsPage />
+    </Suspense>
+  );
+}

web/src/app/sensors/[sensorId]/page.tsx

@@ -1,21 +0,0 @@
-'use client';
-
-import Guard from '@/components/guard';
-import { useParams, useRouter, useSearchParams } from 'next/navigation';
-
-export default function SensorDetailPage() {
-  const params = useParams();
-  const router = useRouter();
-  const search = useSearchParams();
-  const sensorId = Number(params?.sensorId);
-
-  const limit = search.get('limit') ? Number(search.get('limit')) : undefined;
-
-  return (
-    <Guard>
-      <main>
-        <div></div>
-      </main>
-    </Guard>
-  );
-}

web/src/app/shadcn/alert-dialog/page.tsx

@@ -26,7 +26,7 @@ export default function AlertDialogPage() {
   }
 
   return (
-    <>
+    <div className="flex h-full w-full flex-1 flex-col items-center justify-center space-y-10">
       <AlertDialog>
         <AlertDialogTrigger asChild>
           <Button variant="outline">다이얼로그 출력</Button>
@@ -45,6 +45,6 @@ export default function AlertDialogPage() {
         </AlertDialogContent>
       </AlertDialog>
       {dialogResult && <p className="mt-4 text-blue-500">{dialogResult}</p>}
-    </>
+    </div>
   );
 }

web/src/app/shadcn/badge/page.tsx

@@ -5,7 +5,7 @@ import { BadgeCheckIcon } from 'lucide-react';
 
 export default function BadgePage() {
   return (
-    <>
+    <div className="flex h-full w-full flex-1 flex-col items-center justify-center space-y-10">
       <div className="flex items-center justify-center space-x-3">
         <div className="flex flex-col items-center gap-2 rounded p-3 shadow-lg">
           <Badge>Badge</Badge>
@@ -26,6 +26,6 @@ export default function BadgePage() {
           </Badge>
         </div>
       </div>
-    </>
+    </div>
   );
 }

web/src/app/shadcn/calendar/page.tsx

@@ -9,7 +9,7 @@ export default function CalendarPage() {
   const [luxonDate, setLuxonDate] = useState<DateTime | undefined>(DateTime.now());
 
   return (
-    <>
+    <div className="flex h-full w-full flex-1 flex-col items-center justify-center space-y-10">
       <div className="flex items-center justify-center space-x-4">
         <div>
           <Calendar
@@ -35,6 +35,6 @@ export default function CalendarPage() {
           </p>
         </div>
       </div>
-    </>
+    </div>
   );
 }

web/src/app/signup/page.tsx

@@ -73,8 +73,8 @@ export default function SignupPage() {
   };
 
   return (
-    <div className="mx-auto w-full max-w-sm">
+    <div className="flex h-full w-full flex-1 flex-col items-center justify-center space-y-10">
-      <Card className="shadow-lg">
+      <Card className="min-w-sm shadow-lg">
         <CardHeader>
           <CardTitle>회원가입</CardTitle>
         </CardHeader>

web/src/components/app-header.tsx

@@ -109,12 +109,12 @@ export default function AppHeader() {
                   <div className="h-4 w-28 animate-pulse rounded bg-white/20" />
                 </div>
               ) : (
-                <div>
+                <div className="flex items-center gap-2">
                   <Link href="/me" className="flex items-center gap-2">
                     <Avatar className="h-8 w-8">
                       <AvatarFallback>{initial}</AvatarFallback>
                     </Avatar>
-                    <span className="max-w-[140px] truncate">{displayName}</span>
+                    <span className="max-w-[150px] truncate">{displayName}</span>
                   </Link>
                   <Button onClick={onLogout} variant="secondary">
                     로그아웃

web/src/hooks/useSensorData.ts

@@ -25,7 +25,7 @@ export function useSensorData(sensorId: number, opt?: SensorDataOptions) {
   return useQuery({
     queryKey: ['sensor-data', sensorId, opt],
     queryFn: async (): Promise<SensorDataDto[]> => {
-      const res = await api.get(`/sensors/sensor/${sensorId}/data`, { params });
+      const res = await api.get(`/sensors/sensors/${sensorId}/data`, { params });
       return res.data;
     },
     enabled: Number.isFinite(sensorId) && sensorId > 0,