Skip to content

[UNI-95] feat : 공통 에러 컴포넌트(SearchNull, Error, Offline) 컴포넌트 생성 #41

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
dgfh0450 merged 4 commits into from
Feb 4, 2025
Merged

[UNI-95] feat : 공통 에러 컴포넌트(SearchNull, Error, Offline) 컴포넌트 생성 #41

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
4f8fa92
[UNI-95] feat : 검색 결과 없음 컴포넌트 생성
dgfh0450 Feb 4, 2025
52fae0c
[UNI-95] feat : 오프라인 컴포넌트 생성
dgfh0450 Feb 4, 2025
d3ab3e0
[UNI-95] feat : 에러 컴포넌트 생성
dgfh0450 Feb 4, 2025
8998d2b
[UNI-95] chore : Lint 적용
dgfh0450 Feb 4, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions uniro_frontend/src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,8 +24,8 @@ function App() {
<Route path="/map" element={<MapPage />} />
<Route path="/form" element={<ReportForm />} />
<Route path="/result" element={<NavigationResultPage />} />
<Route path="/report/route" element={<ReportRoutePage />} />
<Route path="/report/hazard" element={<ReportHazardPage />} />
<Route path="/report/route" element={<ReportRoutePage />} />
<Route path="/report/hazard" element={<ReportHazardPage />} />
</Routes>
</QueryClientProvider>
);
Expand Down
3 changes: 3 additions & 0 deletions uniro_frontend/src/assets/error/error.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 4 additions & 0 deletions uniro_frontend/src/assets/error/offline.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
5 changes: 5 additions & 0 deletions uniro_frontend/src/assets/error/search-null.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
15 changes: 15 additions & 0 deletions uniro_frontend/src/components/error/Error.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
import ErrorIcon from "../../assets/error/error.svg?react";

export default function Error() {
return (
<div className="w-[285px] h-[198px] flex flex-col items-center py-2 space-y-[14px]">
<ErrorIcon />
<div className="space-y-[6px]">
<h3 className="text-kor-heading2 font-semibold text-gray-900">
일시적인 오류로 <br /> 데이터를 불러올 수 없습니다.
</h3>
<p className="text-kor-body2 font-medium text-gray-700">잠시 후 다시 시도해 주세요.</p>
</div>
</div>
);
}
13 changes: 13 additions & 0 deletions uniro_frontend/src/components/error/Offline.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import OfflineIcon from "../../assets/error/offline.svg?react";

export default function Offline() {
return (
<div className="w-[285px] h-[198px] flex flex-col items-center px-[18px] py-2 space-y-5">
<OfflineIcon />
<div className="space-y-[6px]">
<h3 className="text-kor-heading2 font-semibold text-gray-900">오프라인 상태입니다.</h3>
<p className="text-kor-body2 font-medium text-gray-700">네트워크에 연결됐는지 확인해 주세요.</p>
</div>
</div>
);
}
13 changes: 13 additions & 0 deletions uniro_frontend/src/components/error/SearchNull.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import NullIcon from "../../assets/error/search-null.svg?react";

export default function SearchNull({ message }: { message: string }) {
return (
<div className="w-fit flex flex-col items-center px-[11px] py-[26px] space-y-2">
<NullIcon />
<div className="space-y-1 ">
<h3 className="text-kor-body1 font-medium text-gray-900">검색 결과가 없습니다.</h3>
<p className="text-kor-body3 font-medium text-gray-700">{message}</p>
</div>
</div>
);
}
55 changes: 33 additions & 22 deletions uniro_frontend/src/pages/demo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 */
Expand Down Expand Up @@ -51,8 +54,8 @@ export default function Demo() {

return (
<>
<div className="flex flex-row">
<div className="w-1/4 flex flex-col justify-start space-y-5 p-5 mb-5 rounded-sm border border-dashed border-[#9747FF] ">
<div className="flex flex-row flex-wrap">
<div className="w-1/3 flex flex-col justify-start space-y-5 p-5 mb-5 rounded-sm border border-dashed border-[#9747FF] ">
<Button onClick={openFail}>버튼</Button>
<Button onClick={openSuccess} variant="secondary">
버튼
Expand All @@ -62,48 +65,40 @@ export default function Demo() {
<LandingButton />
</div>

<div className="w-1/4 flex flex-col justify-start space-y-5 p-5 mb-5 rounded-sm border border-dashed border-[#9747FF] ">
<div className="w-1/3 flex flex-col justify-start space-y-5 p-5 mb-5 rounded-sm border border-dashed border-[#9747FF] ">
<ReportButton />
<div className="flex space-x-3 rounded-sm border border-dashed border-[#9747FF] p-3">
<DangerToggleButton onClick={() => { }} isActive={false} />
<DangerToggleButton onClick={() => { }} isActive={true} />
<DangerToggleButton onClick={() => {}} isActive={false} />
<DangerToggleButton onClick={() => {}} isActive={true} />
</div>

<div className="flex space-x-3 rounded-sm border border-dashed border-[#9747FF] p-3">
<CautionToggleButton onClick={() => { }} isActive={false} />
<CautionToggleButton onClick={() => { }} isActive={true} />
<CautionToggleButton onClick={() => {}} isActive={false} />
<CautionToggleButton onClick={() => {}} isActive={true} />
</div>
</div>

<div className="w-1/4 rounded-sm border border-dashed border-[#9747FF] flex flex-col justify-start space-y-5 p-5">
<div className="w-1/3 rounded-sm border border-dashed border-[#9747FF] flex flex-col justify-start space-y-5 p-5">
<Input
placeholder="우리 학교를 검색해보세요"
handleVoiceInput={() => { }}
handleVoiceInput={() => {}}
onLengthChange={(e: string) => {
console.log(e);
}}
/>
<RouteInput onClick={() => { }} placeholder="출발지를 입력하세요">
<RouteInput onClick={() => {}} placeholder="출발지를 입력하세요">
<OriginIcon />
</RouteInput>

<RouteInput
onClick={() => { }}
onClick={() => {}}
placeholder="도착지를 입력하세요"
value={destination}
onCancel={() => setDestination("")}
>
<DestinationIcon />
</RouteInput>
</div>
<div className="w-1/4 rounded-sm border border-dashed border-[#9747FF] flex flex-col justify-start space-y-5 p-5">
<Button onClick={() => mutatePost()}>
{postData?.id ? `${postData.id} : 테스트 결과` : "POST 테스트"}
</Button>
<Button onClick={() => mutatePut()}>
{putData?.id ? `${putData.id} : 테스트 결과` : "PUT 테스트"}
</Button>
</div>
<SuccessModal>
<p className="text-kor-body1 font-bold text-primary-500">불편한 길 제보가 완료되었습니다!</p>
<div className="space-y-0">
Expand All @@ -122,9 +117,25 @@ export default function Demo() {
<p className="text-kor-body3 font-regular text-gray-700">다른 건물을 시도해주세요.</p>
</div>
</FailModal>
</div>
<div className="h-[500px] w-[500px]">
<Map />
<div className="w-1/2 h-[500px] rounded-sm border border-dashed border-[#9747FF]">
<Map />
</div>
<div className="w-1/2 rounded-sm border border-dashed border-[#9747FF] flex flex-row flex-wrap justify-start space-y-5 p-5">
<Button onClick={() => mutatePost()}>
{postData?.id ? `${postData.id} : 테스트 결과` : "POST 테스트"}
</Button>
<Button onClick={() => mutatePut()}>
{putData?.id ? `${putData.id} : 테스트 결과` : "PUT 테스트"}
</Button>
<div className="w-fit h-fit rounded-sm border border-dashed border-[#9747FF] p-5">
<SearchNull message="캠퍼스 내 건물명을 입력해 보세요." />
<SearchNull message="캠퍼스 리스트를 확인해 보세요." />
</div>
<div className="w-fit h-fit rounded-sm border border-dashed border-[#9747FF] p-5 space-y-5">
<Offline />
<Error />
</div>
</div>
</div>
<p className="read-the-docs">Click on the Vite and React logos to learn more</p>
</>
Expand Down