From fac27bd6a49f161bdc616c29bf55b167ac6278c7 Mon Sep 17 00:00:00 2001 From: yunho Date: Mon, 23 Feb 2026 19:29:41 +0900 Subject: [PATCH 1/2] =?UTF-8?q?=EB=A6=AC=EC=8A=A4=ED=8A=B8=20=EC=A0=95?= =?UTF-8?q?=EB=A0=AC=20=EC=B6=94=EA=B0=80,=20=EC=9D=B4=EB=A6=84=20?= =?UTF-8?q?=EB=A1=9C=EC=BB=AC=EC=8A=A4=ED=86=A0=EB=A6=AC=EC=A7=80=EC=97=90?= =?UTF-8?q?=20=EC=A0=80=EC=9E=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/DeviceCardItem.tsx | 2 +- src/hooks/useDeviceData.ts | 44 ++++++++++++++++++++++--------- src/pages/home/home.tsx | 16 ++++++----- 3 files changed, 41 insertions(+), 21 deletions(-) diff --git a/src/components/DeviceCardItem.tsx b/src/components/DeviceCardItem.tsx index b13e656..4205fa1 100644 --- a/src/components/DeviceCardItem.tsx +++ b/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; diff --git a/src/hooks/useDeviceData.ts b/src/hooks/useDeviceData.ts index 4694314..6e3307f 100644 --- a/src/hooks/useDeviceData.ts +++ b/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(createDevices); + const [devices, setDevices] = useState(() => { + 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,8 +46,18 @@ 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, @@ -48,5 +65,6 @@ export default function useDeviceData() { checkWarning, deleteDevice, updateDeviceName, + warningDevices, }; } diff --git a/src/pages/home/home.tsx b/src/pages/home/home.tsx index 3f076d4..e2f19c8 100644 --- a/src/pages/home/home.tsx +++ b/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() { toggleAddMode()} /> - {devices.map((device) => ( + {warningDevices.map((device) => ( ))} - {devices.some((device) => device.warning) && ( + {warningDevices.some((device) => device.warning) && ( 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 && setIsAddMode(false)} addDevice={addDevice} deviceCount={devices.length} />} + {isAddMode && ( + setIsAddMode(false)} addDevice={addDevice} deviceCount={devices.length} /> + )} {selectedItems.length > 0 && ( { From c14b68cd3f4eb43a4466d23fc008136e82945151 Mon Sep 17 00:00:00 2001 From: yunho Date: Tue, 24 Feb 2026 14:18:31 +0900 Subject: [PATCH 2/2] =?UTF-8?q?=EA=B8=B0=EA=B8=B0=20=EC=B6=94=EA=B0=80=20?= =?UTF-8?q?=EB=A1=9C=EC=A7=81=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/apis/devices.ts | 39 ++++++++++---------- src/components/modal/DeviceRegisterModal.tsx | 4 +- 2 files changed, 21 insertions(+), 22 deletions(-) diff --git a/src/apis/devices.ts b/src/apis/devices.ts index 438877f..338bb99 100644 --- a/src/apis/devices.ts +++ b/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("장치 등록 중 오류가 발생했습니다."); } }, diff --git a/src/components/modal/DeviceRegisterModal.tsx b/src/components/modal/DeviceRegisterModal.tsx index e5d42eb..47eafac 100644 --- a/src/components/modal/DeviceRegisterModal.tsx +++ b/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) => {