diff --git a/uniro_frontend/src/App.tsx b/uniro_frontend/src/App.tsx index b3066ba..d1b21e6 100644 --- a/uniro_frontend/src/App.tsx +++ b/uniro_frontend/src/App.tsx @@ -24,8 +24,8 @@ function App() { } /> } /> } /> - } /> - } /> + } /> + } /> ); diff --git a/uniro_frontend/src/assets/error/error.svg b/uniro_frontend/src/assets/error/error.svg new file mode 100644 index 0000000..57cbfe9 --- /dev/null +++ b/uniro_frontend/src/assets/error/error.svg @@ -0,0 +1,3 @@ + + + diff --git a/uniro_frontend/src/assets/error/offline.svg b/uniro_frontend/src/assets/error/offline.svg new file mode 100644 index 0000000..d21a411 --- /dev/null +++ b/uniro_frontend/src/assets/error/offline.svg @@ -0,0 +1,4 @@ + + + + diff --git a/uniro_frontend/src/assets/error/search-null.svg b/uniro_frontend/src/assets/error/search-null.svg new file mode 100644 index 0000000..2d8aa38 --- /dev/null +++ b/uniro_frontend/src/assets/error/search-null.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/uniro_frontend/src/components/error/Error.tsx b/uniro_frontend/src/components/error/Error.tsx new file mode 100644 index 0000000..d2dfb1b --- /dev/null +++ b/uniro_frontend/src/components/error/Error.tsx @@ -0,0 +1,15 @@ +import ErrorIcon from "../../assets/error/error.svg?react"; + +export default function Error() { + return ( +
+ +
+

+ 일시적인 오류로
데이터를 불러올 수 없습니다. +

+

잠시 후 다시 시도해 주세요.

+
+
+ ); +} diff --git a/uniro_frontend/src/components/error/Offline.tsx b/uniro_frontend/src/components/error/Offline.tsx new file mode 100644 index 0000000..e48ec8a --- /dev/null +++ b/uniro_frontend/src/components/error/Offline.tsx @@ -0,0 +1,13 @@ +import OfflineIcon from "../../assets/error/offline.svg?react"; + +export default function Offline() { + return ( +
+ +
+

오프라인 상태입니다.

+

네트워크에 연결됐는지 확인해 주세요.

+
+
+ ); +} diff --git a/uniro_frontend/src/components/error/SearchNull.tsx b/uniro_frontend/src/components/error/SearchNull.tsx new file mode 100644 index 0000000..fbf5772 --- /dev/null +++ b/uniro_frontend/src/components/error/SearchNull.tsx @@ -0,0 +1,13 @@ +import NullIcon from "../../assets/error/search-null.svg?react"; + +export default function SearchNull({ message }: { message: string }) { + return ( +
+ +
+

검색 결과가 없습니다.

+

{message}

+
+
+ ); +} diff --git a/uniro_frontend/src/pages/demo.tsx b/uniro_frontend/src/pages/demo.tsx index 2ee40b0..0113732 100644 --- a/uniro_frontend/src/pages/demo.tsx +++ b/uniro_frontend/src/pages/demo.tsx @@ -11,6 +11,9 @@ import ReportButton from "../components/map/reportButton"; import { CautionToggleButton, DangerToggleButton } from "../components/map/floatingButtons"; import { useMutation, useQuery } from "@tanstack/react-query"; import { getFetch, postFetch, putFetch } from "../utils/fetch/fetch"; +import SearchNull from "../components/error/SearchNull"; +import Offline from "../components/error/Offline"; +import Error from "../components/error/Error"; const getTest = () => { /** https://jsonplaceholder.typicode.com/comments?postId=1 */ @@ -51,8 +54,8 @@ export default function Demo() { return ( <> -
-
+
+
-
+
- { }} isActive={false} /> - { }} isActive={true} /> + {}} isActive={false} /> + {}} isActive={true} />
- { }} isActive={false} /> - { }} isActive={true} /> + {}} isActive={false} /> + {}} isActive={true} />
-
+
{ }} + handleVoiceInput={() => {}} onLengthChange={(e: string) => { console.log(e); }} /> - { }} placeholder="출발지를 입력하세요"> + {}} placeholder="출발지를 입력하세요"> { }} + onClick={() => {}} placeholder="도착지를 입력하세요" value={destination} onCancel={() => setDestination("")} @@ -96,14 +99,6 @@ export default function Demo() {
-
- - -

불편한 길 제보가 완료되었습니다!

@@ -122,9 +117,25 @@ export default function Demo() {

다른 건물을 시도해주세요.

-
-
- +
+ +
+
+ + +
+ + +
+
+ + +
+

Click on the Vite and React logos to learn more