리스트 정렬 추가, 이름 로컬스토리지에 저장, 기기 추가 로직 수정

src/apis/devices.ts

@@ -1,41 +1,40 @@
-import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { useMutation } from "@tanstack/react-query";
 
-const registerDevice = async (serialNumber: string) => {
-	const baseUrl = import.meta.env.VITE_API_BASE_URL;
-  const response = await fetch(`${baseUrl}/`, {
-    method: "POST",
-    headers: {
-      "Content-Type": "application/json",
-    },
-    body: JSON.stringify({ serialNumber }),
-  });
+const checkDevice = async (serialNumber: string) => {
+  const baseUrl = import.meta.env.VITE_API_BASE_URL;
+  const response = await fetch(`${baseUrl}/devices/check?serialNumber=${serialNumber}`);
   if (!response.ok) {
     throw { status: response.status };
   }
-  return response.json();
+  const data = await response.json();
+  if (!data) {
+    throw { status: 404 };
+  }
+  return data;
 };
 
-export const useRegisterDevice = () => {
-  const queryClient = useQueryClient();
-
+export const useCheckDevice = () => {
   return useMutation({
-    mutationFn: (serialNumber: string) => registerDevice(serialNumber),
+    mutationFn: (serialNumber: string) => checkDevice(serialNumber),
     onSuccess: () => {
-			alert("장치가 성공적으로 등록되었습니다.");
-      queryClient.invalidateQueries({ queryKey: ["devices"] });
+      alert("장치가 성공적으로 등록되었습니다.");
     },
     onError: (error: { status: number }) => {
       switch (error.status) {
         case 400:
-					alert("요청이 잘못되었습니다. 일련번호를 확인해주세요.");
+          alert("요청이 잘못되었습니다. 일련번호를 확인해주세요.");
           console.error("요청이 잘못되었습니다. 일련번호를 확인해주세요.");
           break;
         case 409:
-					alert("이미 등록된 장치입니다.");
+          alert("이미 등록된 장치입니다.");
           console.error("이미 등록된 장치입니다.");
           break;
+        case 404:
+          alert("장치를 찾을 수 없습니다. 일련번호를 확인해주세요.");
+          console.error("장치를 찾을 수 없습니다. 일련번호를 확인해주세요.");
+          break;
         default:
-					alert("장치 등록 중 오류가 발생했습니다.");
+          alert("장치 등록 중 오류가 발생했습니다.");
           console.error("장치 등록 중 오류가 발생했습니다.");
       }
     },

src/components/DeviceCardItem.tsx

@@ -77,7 +77,7 @@ export default function DeviceCardItem({
   );
 }
 
-const Container = styled.button`
+const Container = styled.div`
   position: relative;
   width: 240px;
   height: 286px;

src/components/modal/DeviceRegisterModal.tsx

@@ -1,5 +1,5 @@
 import styled from "@emotion/styled";
-import { useRegisterDevice } from "../../apis/devices";
+import { useCheckDevice } from "../../apis/devices";
 import { useEffect } from "react";
 
 interface DeviceRegisterModalProps {
@@ -9,7 +9,7 @@ interface DeviceRegisterModalProps {
 }
 
 export default function DeviceRegisterModal({ onClose, addDevice, deviceCount }: DeviceRegisterModalProps) {
-  const { mutate, isPending } = useRegisterDevice();
+  const { mutate, isPending } = useCheckDevice();
 
   useEffect(() => {
     const handleKeyDown = (e: KeyboardEvent) => {

src/hooks/useDeviceData.ts

@@ -1,19 +1,26 @@
-import { useState } from "react";
+import { useState, useMemo } from "react";
 import type { Device } from "../types/device";
 
-const createDevices = (): Device[] =>
-  Array.from({ length: 5 }, (_, i) => {
-    const temp = Math.floor(Math.random() * 100);
-    return {
-      id: `device-${i + 1}`,
-      name: `기기 ${i + 1}`,
-      temperature: temp,
-      warning: temp > 70, // 70도 넘으면 경고
-    };
-  });
-
 export default function useDeviceData() {
-  const [devices, setDevices] = useState<Device[]>(createDevices);
+  const [devices, setDevices] = useState<Device[]>(() => {
+    const savedNames = JSON.parse(localStorage.getItem("deviceNames") || "{}");
+    // if (savedNames) {
+    //   return JSON.parse(savedNames);
+    // }
+    // return [];
+
+    // 더미데이터 생성
+    return Array.from({ length: 5 }, (_, i) => {
+      const id = `device-${i + 1}`;
+      const temp = Math.floor(Math.random() * 100);
+      return {
+        id,
+        name: savedNames[id] || `기기 ${i + 1}`,
+        temperature: temp,
+        warning: temp > 70, // 70도 넘으면 경고
+      };
+    });
+  });
 
   const warningDevice = devices.find((device) => device.warning);
 
@@ -39,14 +46,25 @@ export default function useDeviceData() {
 
   const updateDeviceName = (id: string, newName: string) => {
     setDevices((prev) => prev.map((device) => (device.id === id ? { ...device, name: newName } : device)));
+    localStorage.setItem(
+      "deviceNames",
+      JSON.stringify({ ...JSON.parse(localStorage.getItem("deviceNames") || "{}"), [id]: newName }),
+    );
   };
 
+  const warningDevices = useMemo(() => {
+    const warningDevices = devices.filter((device) => device.temperature > 70);
+    const normalDevices = devices.filter((device) => device.temperature <= 70);
+    return [...warningDevices, ...normalDevices];
+  }, [devices]);
+
   return {
     devices,
     warningDevice,
     addDevice,
     checkWarning,
     deleteDevice,
     updateDeviceName,
+    warningDevices,
   };
 }

src/pages/home/home.tsx

@@ -10,7 +10,7 @@ import WarningModal from "../../components/modal/WarningModal.tsx";
 import useDeviceData from "../../hooks/useDeviceData.ts";
 
 function Home() {
-  const { devices, checkWarning, deleteDevice, addDevice, updateDeviceName } = useDeviceData();
+  const { devices, checkWarning, deleteDevice, addDevice, updateDeviceName, warningDevices } = useDeviceData();
   const { isDeleteMode, selectedItems, toggleDeleteMode, toggleItemSelection, setIsDeleteMode, setSelectedItems } =
     useDeleteMode();
   const { isAddMode, toggleAddMode, setIsAddMode } = useDeviceAddMode();
@@ -26,7 +26,7 @@ function Home() {
       </Header>
       <CardGrid>
         <DeviceAddCard onClick={() => toggleAddMode()} />
-        {devices.map((device) => (
+        {warningDevices.map((device) => (
           <DeviceCardItem
             key={device.id}
             id={device.id}
@@ -40,14 +40,16 @@ function Home() {
           />
         ))}
       </CardGrid>
-      {devices.some((device) => device.warning) && (
+      {warningDevices.some((device) => device.warning) && (
         <WarningModal
-          deviceName={devices.find((device) => device.warning)?.name}
-          deviceTemp={devices.find((device) => device.warning)?.temperature}
-          checkWarning={() => checkWarning(devices.find((device) => device.warning)?.id || "")}
+          deviceName={warningDevices.find((device) => device.warning)?.name}
+          deviceTemp={warningDevices.find((device) => device.warning)?.temperature}
+          checkWarning={() => checkWarning(warningDevices.find((device) => device.warning)?.id || "")}
         />
       )}
-      {isAddMode && <DeviceRegisterModal onClose={() => setIsAddMode(false)} addDevice={addDevice} deviceCount={devices.length} />}
+      {isAddMode && (
+        <DeviceRegisterModal onClose={() => setIsAddMode(false)} addDevice={addDevice} deviceCount={devices.length} />
+      )}
       {selectedItems.length > 0 && (
         <DeleteButton
           onClick={() => {