Skip to content
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

[Feature] 클라이언트 페이지 not-found, error 페이지 추가 #53

Merged
merged 10 commits into from
Aug 26, 2024
Merged

[Feature] 클라이언트 페이지 not-found, error 페이지 추가 #53

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
888d63c
feat: wowds-ui 최신 버전 설치
ghdtjgus76 Aug 23, 2024
e98b5fe
feat: client not-found 페이지 추가
ghdtjgus76 Aug 23, 2024
250486a
feat: ui 패키지 스타일 변경사항 반영
ghdtjgus76 Aug 23, 2024
2075303
feat: not-found 버튼 aria-label 추가
ghdtjgus76 Aug 23, 2024
92657e9
feat: 클라이언트 에러 페이지 추가
ghdtjgus76 Aug 24, 2024
b84cd6a
feat: 어드민 화면 에러페이지 추가
eugene028 Aug 24, 2024
48005f4
fix: 빌드에러 해결
eugene028 Aug 24, 2024
dc6b01c
chore: error html, body 태그 삭제
ghdtjgus76 Aug 26, 2024
773a595
chore: Merge branch 'dev' of https://github.com/GDSC-Hongik/wow-class…
ghdtjgus76 Aug 26, 2024
102d151
feat: pnpm lock 파일 변경사항 반영
ghdtjgus76 Aug 26, 2024
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
54 changes: 52 additions & 2 deletions apps/admin/app/error.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,56 @@
"use client";
const ErrorPage = () => {
return <div>error</div>;

import { css } from "@styled-system/css";
import { Flex } from "@styled-system/jsx";
import { Header, Text } from "@wow-class/ui";
import Image from "next/image";
import Button from "wowds-ui/Button";

const ErrorPage = ({ reset }: { reset: () => void }) => {
const handleClickResetButton = () => {
reset();
};

return (
<html lang="ko">
<body>
ghdtjgus76 marked this conversation as resolved.
Show resolved Hide resolved
<Flex direction="column" minHeight="100vh">
<Header />
<main className={errorPageContentStyle}>
<Image
alt="error"
height={344}
src="/images/error.svg"
width={358}
/>
<Text as="h2" typo="display2">
에러가 발생했어요
</Text>
<Button
aria-label="다시 시도"
style={buttonStyle}
onClick={handleClickResetButton}
>
다시 시도
</Button>
</main>
</Flex>
</body>
</html>
);
};

export default ErrorPage;

const errorPageContentStyle = css({
display: "flex",
flexDirection: "column",
justifyContent: "center",
alignItems: "center",
gap: "48px",
height: "100%",
});

const buttonStyle = {
width: 328,
};
1 change: 1 addition & 0 deletions apps/admin/app/global.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,4 +6,5 @@ body {
font-family: "SUIT" !important;
display: flex;
flex-direction: row;
min-height: 100vh;
}
55 changes: 52 additions & 3 deletions apps/admin/app/not-found.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,54 @@
const NotFound = () => {
return <div>요청하신 페이지를 찾을 수 없어요.</div>;
import { css } from "@styled-system/css";
import { Flex } from "@styled-system/jsx";
import { Header, Text } from "@wow-class/ui";
import { routerPath } from "constants/router/routerPath";
import Image from "next/image";
import Link from "next/link";
import Button from "wowds-ui/Button";

const NotFoundPage = () => {
return (
<Flex direction="column" minHeight="100vh">
<Header />
<main className={notFoundPageContentStyle}>
<Image
alt="not-found"
height={344}
src="/images/not-found.svg"
width={358}
/>
<Flex direction="column" gap="md">
<Text as="h2" typo="display2">
오류가 발생했어요
</Text>
<Text color="sub" typo="body0">
요청하신 페이지를 찾을 수 없어요
</Text>
</Flex>
<Button
aria-label="홈으로 이동"
asProp={Link}
href={routerPath.root.href}
style={buttonStyle}
>
홈으로 이동
</Button>
</main>
</Flex>
);
};

export default NotFound;
export default NotFoundPage;

const notFoundPageContentStyle = css({
display: "flex",
flexDirection: "column",
justifyContent: "center",
alignItems: "center",
gap: "48px",
height: "100%",
});

const buttonStyle = {
width: 328,
};
29 changes: 29 additions & 0 deletions apps/admin/public/images/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.
34 changes: 34 additions & 0 deletions apps/admin/public/images/not-found.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.
54 changes: 52 additions & 2 deletions apps/client/app/error.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,56 @@
"use client";
const ErrorPage = () => {
return <div>error</div>;

import { css } from "@styled-system/css";
import { Flex } from "@styled-system/jsx";
import { Header, Text } from "@wow-class/ui";
import Image from "next/image";
import Button from "wowds-ui/Button";

const ErrorPage = ({ reset }: { reset: () => void }) => {
const handleClickResetButton = () => {
reset();
};

return (
<html lang="ko">
<body>
<Flex direction="column" minHeight="100vh">
<Header />
<main className={errorPageContentStyle}>
<Image
alt="error"
height={344}
src="/images/error.svg"
width={358}
/>
<Text as="h2" typo="display2">
에러가 발생했어요
</Text>
<Button
aria-label="다시 시도"
style={buttonStyle}
onClick={handleClickResetButton}
>
다시 시도
</Button>
</main>
</Flex>
</body>
</html>
);
};

export default ErrorPage;

const errorPageContentStyle = css({
display: "flex",
flexDirection: "column",
justifyContent: "center",
alignItems: "center",
gap: "48px",
height: "100%",
});

const buttonStyle = {
width: 328,
};
1 change: 1 addition & 0 deletions apps/client/app/global.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,4 +6,5 @@ body {
font-family: "SUIT" !important;
display: flex;
flex-direction: row;
min-height: 100vh;
}
54 changes: 54 additions & 0 deletions apps/client/app/not-found.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
import { css } from "@styled-system/css";
import { Flex } from "@styled-system/jsx";
import { Header, Text } from "@wow-class/ui";
import { routePath } from "constants/routePath";
import Image from "next/image";
import Link from "next/link";
import Button from "wowds-ui/Button";

const NotFoundPage = () => {
return (
<Flex direction="column" minHeight="100vh">
<Header />
<main className={notFoundPageContentStyle}>
<Image
alt="not-found"
height={344}
src="/images/not-found.svg"
width={358}
/>
<Flex direction="column" gap="md">
<Text as="h2" typo="display2">
오류가 발생했어요
</Text>
<Text color="sub" typo="body0">
요청하신 페이지를 찾을 수 없어요
</Text>
</Flex>
<Button
aria-label="홈으로 이동"
asProp={Link}
href={routePath.landing}
style={buttonStyle}
>
홈으로 이동
</Button>
</main>
</Flex>
);
};

export default NotFoundPage;

const notFoundPageContentStyle = css({
display: "flex",
flexDirection: "column",
justifyContent: "center",
alignItems: "center",
gap: "48px",
height: "100%",
});

const buttonStyle = {
width: 328,
};
2 changes: 1 addition & 1 deletion apps/client/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
"react-dom": "^18.3.1",
"wowds-icons": "^0.1.3",
"wowds-tokens": "^0.1.1",
"wowds-ui": "^0.1.8"
"wowds-ui": "^0.1.14"
},
"devDependencies": {
"@types/node": "^20",
Expand Down
Loading
Loading