From e9d936883c045a3e3ad8dafe262d3f86658c8423 Mon Sep 17 00:00:00 2001 From: lydiacho Date: Wed, 20 Mar 2024 20:50:07 +0900 Subject: [PATCH 01/21] =?UTF-8?q?fix:=20Roundbutton=EC=97=90=EC=84=9C=20?= =?UTF-8?q?=EC=82=AC=EC=9A=A9=ED=95=98=EC=A7=80=20=EC=95=8A=EB=8A=94=20isR?= =?UTF-8?q?everse=20prop=20=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common/RoundButton/RoundButton.tsx | 5 ++--- src/pages/404.tsx | 2 +- 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/src/components/common/RoundButton/RoundButton.tsx b/src/components/common/RoundButton/RoundButton.tsx index 74206f36..c2706d7b 100644 --- a/src/components/common/RoundButton/RoundButton.tsx +++ b/src/components/common/RoundButton/RoundButton.tsx @@ -4,12 +4,11 @@ import * as S from './RoundButton.style'; interface ButtonProps extends DetailedHTMLProps, HTMLButtonElement> { children: string | ReactElement; - isReverse?: boolean; } -function RoundButton({ children, isReverse = false, ...props }: ButtonProps) { +function RoundButton({ children, ...props }: ButtonProps) { return ( - + {children} ); diff --git a/src/pages/404.tsx b/src/pages/404.tsx index 74e72c06..a27ab8a5 100644 --- a/src/pages/404.tsx +++ b/src/pages/404.tsx @@ -16,7 +16,7 @@ function Wrong() {
잘못된 경로예요 - + 홈으로 가기 From 3e1c3654651755fe7b6138f73784e59b89bd1880 Mon Sep 17 00:00:00 2001 From: lydiacho Date: Wed, 20 Mar 2024 21:13:32 +0900 Subject: [PATCH 02/21] =?UTF-8?q?fix:=20RoundButton=20=EA=B3=B5=ED=86=B5?= =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common/RoundButton/RoundButton.tsx | 4 ++-- .../RoundButton/{RoundButton.style.tsx => style.ts} | 10 +++------- 2 files changed, 5 insertions(+), 9 deletions(-) rename src/components/common/RoundButton/{RoundButton.style.tsx => style.ts} (71%) diff --git a/src/components/common/RoundButton/RoundButton.tsx b/src/components/common/RoundButton/RoundButton.tsx index c2706d7b..3aadf54c 100644 --- a/src/components/common/RoundButton/RoundButton.tsx +++ b/src/components/common/RoundButton/RoundButton.tsx @@ -1,5 +1,5 @@ import { DetailedHTMLProps, HTMLAttributes, ReactElement } from 'react'; -import * as S from './RoundButton.style'; +import * as S from './style'; interface ButtonProps extends DetailedHTMLProps, HTMLButtonElement> { @@ -8,7 +8,7 @@ interface ButtonProps function RoundButton({ children, ...props }: ButtonProps) { return ( - + {children} ); diff --git a/src/components/common/RoundButton/RoundButton.style.tsx b/src/components/common/RoundButton/style.ts similarity index 71% rename from src/components/common/RoundButton/RoundButton.style.tsx rename to src/components/common/RoundButton/style.ts index 78dca264..8bf7e253 100644 --- a/src/components/common/RoundButton/RoundButton.style.tsx +++ b/src/components/common/RoundButton/style.ts @@ -1,16 +1,12 @@ import styled from '@emotion/styled'; import { colors } from '@sopt-makers/colors'; -interface StyleProps { - isReverse?: boolean; -} - -export const Root = styled.button` +export const Root = styled.button` display: flex; align-items: center; - height: 50px; - padding: 10px 30px; + height: 60px; + padding: 12px 28px; border-radius: 99px; background: ${colors.gray10}; From ca02867ab41c8bd8c65d626e5b62c9b01db42c88 Mon Sep 17 00:00:00 2001 From: lydiacho Date: Wed, 20 Mar 2024 21:27:48 +0900 Subject: [PATCH 03/21] =?UTF-8?q?feat:=20404=20=ED=8E=98=EC=9D=B4=EC=A7=80?= =?UTF-8?q?=20=ED=8D=BC=EB=B8=94=EB=A6=AC=EC=8B=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/404.tsx | 50 +-------------------- src/views/ErrorPage/404Page.tsx | 34 ++++++++++++++ src/views/ErrorPage/assets/ic_404_back.svg | 4 ++ src/views/ErrorPage/assets/ic_404_front.svg | 4 ++ src/views/ErrorPage/assets/ic_404_ghost.svg | 3 ++ src/views/ErrorPage/index.tsx | 1 + src/views/ErrorPage/styles.ts | 26 +++++++++++ 7 files changed, 73 insertions(+), 49 deletions(-) create mode 100644 src/views/ErrorPage/404Page.tsx create mode 100644 src/views/ErrorPage/assets/ic_404_back.svg create mode 100644 src/views/ErrorPage/assets/ic_404_front.svg create mode 100644 src/views/ErrorPage/assets/ic_404_ghost.svg create mode 100644 src/views/ErrorPage/index.tsx create mode 100644 src/views/ErrorPage/styles.ts diff --git a/src/pages/404.tsx b/src/pages/404.tsx index a27ab8a5..69d8822e 100644 --- a/src/pages/404.tsx +++ b/src/pages/404.tsx @@ -1,49 +1 @@ -import styled from '@emotion/styled'; -import { colors } from '@sopt-makers/colors'; -import { useRouter } from 'next/router'; -import { Header } from '@src/components'; -import RoundButton from '@src/components/common/RoundButton'; - -function Wrong() { - const router = useRouter(); - - const handleButtonClick = () => { - router.push('/'); - }; - - return ( - <> -
- - 잘못된 경로예요 - - 홈으로 가기 - - - - ); -} - -export default Wrong; - -const Styled = { - Root: styled.section` - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - gap: 48px; - - width: 100%; - height: 100vh; - - & span { - color: ${colors.gray10}; - - font-size: 48px; - font-weight: 600; - line-height: 150%; /* 72px */ - letter-spacing: -0.96px; - } - `, -}; +export { default } from '@src/views/ErrorPage'; diff --git a/src/views/ErrorPage/404Page.tsx b/src/views/ErrorPage/404Page.tsx new file mode 100644 index 00000000..e11bc28d --- /dev/null +++ b/src/views/ErrorPage/404Page.tsx @@ -0,0 +1,34 @@ +import { useRouter } from 'next/router'; +import { Header } from '@src/components'; +import RoundButton from '@src/components/common/RoundButton'; +import * as S from './styles'; +import { ReactComponent as Ic404Front } from './assets/ic_404_front.svg'; +import { ReactComponent as Ic404Back } from './assets/ic_404_back.svg'; +import { ReactComponent as Ic404Ghost } from './assets/ic_404_ghost.svg'; + +function Wrong404() { + const router = useRouter(); + + const handleButtonClick = () => { + router.push('/'); + }; + + return ( + <> +
+ + + + + + + 존재하지 않는 페이지예요 + + 홈으로 가기 + + + + ); +} + +export default Wrong404; diff --git a/src/views/ErrorPage/assets/ic_404_back.svg b/src/views/ErrorPage/assets/ic_404_back.svg new file mode 100644 index 00000000..f355bdf1 --- /dev/null +++ b/src/views/ErrorPage/assets/ic_404_back.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/views/ErrorPage/assets/ic_404_front.svg b/src/views/ErrorPage/assets/ic_404_front.svg new file mode 100644 index 00000000..b6955225 --- /dev/null +++ b/src/views/ErrorPage/assets/ic_404_front.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/views/ErrorPage/assets/ic_404_ghost.svg b/src/views/ErrorPage/assets/ic_404_ghost.svg new file mode 100644 index 00000000..fc67ba47 --- /dev/null +++ b/src/views/ErrorPage/assets/ic_404_ghost.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/views/ErrorPage/index.tsx b/src/views/ErrorPage/index.tsx new file mode 100644 index 00000000..0290f9c8 --- /dev/null +++ b/src/views/ErrorPage/index.tsx @@ -0,0 +1 @@ +export { default } from './404Page'; diff --git a/src/views/ErrorPage/styles.ts b/src/views/ErrorPage/styles.ts new file mode 100644 index 00000000..118fe976 --- /dev/null +++ b/src/views/ErrorPage/styles.ts @@ -0,0 +1,26 @@ +import styled from '@emotion/styled'; + +export const Root = styled.section` + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 22px; + + width: 100%; + height: 100vh; +`; +export const ErrorText = styled.p` + margin-bottom: 26px; + + color: #FCFCFC; + + font-size: 48px; + font-weight: 600; + line-height: 150%; + letter-spacing: -0.96px; +`; +export const CodeText = styled.div` + display: flex; + align-items: center; +`; From 4e9bf137f89939c48deb9c42f963183f29baf384 Mon Sep 17 00:00:00 2001 From: lydiacho Date: Wed, 20 Mar 2024 21:53:18 +0900 Subject: [PATCH 04/21] =?UTF-8?q?feat:=20=EC=97=90=EB=9F=AC=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EC=97=90=EC=85=8B=20=EC=83=81=EC=88=98?= =?UTF-8?q?=ED=99=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/ErrorPage/404Page.tsx | 29 +++++++++++++++------ src/views/ErrorPage/assets/ic_500_back.svg | 4 +++ src/views/ErrorPage/assets/ic_500_cone.svg | 3 +++ src/views/ErrorPage/assets/ic_500_front.svg | 4 +++ src/views/ErrorPage/assets/index.ts | 8 ++++++ 5 files changed, 40 insertions(+), 8 deletions(-) create mode 100644 src/views/ErrorPage/assets/ic_500_back.svg create mode 100644 src/views/ErrorPage/assets/ic_500_cone.svg create mode 100644 src/views/ErrorPage/assets/ic_500_front.svg create mode 100644 src/views/ErrorPage/assets/index.ts diff --git a/src/views/ErrorPage/404Page.tsx b/src/views/ErrorPage/404Page.tsx index e11bc28d..186e0b2f 100644 --- a/src/views/ErrorPage/404Page.tsx +++ b/src/views/ErrorPage/404Page.tsx @@ -2,9 +2,9 @@ import { useRouter } from 'next/router'; import { Header } from '@src/components'; import RoundButton from '@src/components/common/RoundButton'; import * as S from './styles'; -import { ReactComponent as Ic404Front } from './assets/ic_404_front.svg'; -import { ReactComponent as Ic404Back } from './assets/ic_404_back.svg'; -import { ReactComponent as Ic404Ghost } from './assets/ic_404_ghost.svg'; +import ERROR_MESSAGE from './constants/errorMessage'; +import { Ic404Back, Ic404Front, Ic404Ghost, Ic500Back, Ic500Cone, Ic500Front } from './assets'; +import ERROR_BUTTON from './constants/errorButton'; function Wrong404() { const router = useRouter(); @@ -13,18 +13,31 @@ function Wrong404() { router.push('/'); }; + const CODE_IMG = { + CODE404: + <> + + + + , + CODE500: + <> + + + + , + }; + return ( <>
- - - + {CODE_IMG.CODE500} - 존재하지 않는 페이지예요 + {ERROR_MESSAGE.CODE500} - 홈으로 가기 + {ERROR_BUTTON.CODE500} diff --git a/src/views/ErrorPage/assets/ic_500_back.svg b/src/views/ErrorPage/assets/ic_500_back.svg new file mode 100644 index 00000000..6b970441 --- /dev/null +++ b/src/views/ErrorPage/assets/ic_500_back.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/views/ErrorPage/assets/ic_500_cone.svg b/src/views/ErrorPage/assets/ic_500_cone.svg new file mode 100644 index 00000000..1a7ed396 --- /dev/null +++ b/src/views/ErrorPage/assets/ic_500_cone.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/views/ErrorPage/assets/ic_500_front.svg b/src/views/ErrorPage/assets/ic_500_front.svg new file mode 100644 index 00000000..f1eb6081 --- /dev/null +++ b/src/views/ErrorPage/assets/ic_500_front.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/views/ErrorPage/assets/index.ts b/src/views/ErrorPage/assets/index.ts new file mode 100644 index 00000000..98f0adb3 --- /dev/null +++ b/src/views/ErrorPage/assets/index.ts @@ -0,0 +1,8 @@ +import { ReactComponent as Ic404Front } from './ic_404_front.svg'; +import { ReactComponent as Ic404Back } from './ic_404_back.svg'; +import { ReactComponent as Ic404Ghost } from './ic_404_ghost.svg'; +import { ReactComponent as Ic500Front } from './ic_500_front.svg'; +import { ReactComponent as Ic500Back } from './ic_500_back.svg'; +import { ReactComponent as Ic500Cone } from './ic_500_cone.svg'; + +export { Ic404Front, Ic404Back, Ic404Ghost, Ic500Cone, Ic500Back, Ic500Front }; From 090fbd3b3cd7a85e74377cc9e65d052e07766905 Mon Sep 17 00:00:00 2001 From: lydiacho Date: Wed, 20 Mar 2024 21:53:30 +0900 Subject: [PATCH 05/21] =?UTF-8?q?feat:=20=EC=97=90=EB=9F=AC=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EB=9D=BC=EC=9D=B4=ED=8C=85=20=EC=83=81?= =?UTF-8?q?=EC=88=98=ED=99=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/ErrorPage/constants/errorButton.ts | 6 ++++++ src/views/ErrorPage/constants/errorMessage.ts | 6 ++++++ 2 files changed, 12 insertions(+) create mode 100644 src/views/ErrorPage/constants/errorButton.ts create mode 100644 src/views/ErrorPage/constants/errorMessage.ts diff --git a/src/views/ErrorPage/constants/errorButton.ts b/src/views/ErrorPage/constants/errorButton.ts new file mode 100644 index 00000000..d4621b84 --- /dev/null +++ b/src/views/ErrorPage/constants/errorButton.ts @@ -0,0 +1,6 @@ +const ERROR_BUTTON = { + CODE404 : '홈으로 가기', + CODE500 : '이전 페이지로 가기', +}; + +export default ERROR_BUTTON; diff --git a/src/views/ErrorPage/constants/errorMessage.ts b/src/views/ErrorPage/constants/errorMessage.ts new file mode 100644 index 00000000..ff593514 --- /dev/null +++ b/src/views/ErrorPage/constants/errorMessage.ts @@ -0,0 +1,6 @@ +const ERROR_MESSAGE = { + CODE404 : '존재하지 않는 페이지예요', + CODE500 : '알 수 없는 오류가 발생했어요', +}; + +export default ERROR_MESSAGE; From 919f0ee45111aea246adad0d86ee9c95d73d3fd4 Mon Sep 17 00:00:00 2001 From: lydiacho Date: Wed, 20 Mar 2024 22:38:07 +0900 Subject: [PATCH 06/21] =?UTF-8?q?feat:=20=EC=97=90=EB=9F=AC=EC=BD=94?= =?UTF-8?q?=EB=93=9C=20=EC=83=81=EC=88=98=20=EB=B6=84=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/ErrorPage/404Page.tsx | 18 ++---------------- src/views/ErrorPage/constants/errorCode.tsx | 18 ++++++++++++++++++ 2 files changed, 20 insertions(+), 16 deletions(-) create mode 100644 src/views/ErrorPage/constants/errorCode.tsx diff --git a/src/views/ErrorPage/404Page.tsx b/src/views/ErrorPage/404Page.tsx index 186e0b2f..260a5dba 100644 --- a/src/views/ErrorPage/404Page.tsx +++ b/src/views/ErrorPage/404Page.tsx @@ -3,29 +3,15 @@ import { Header } from '@src/components'; import RoundButton from '@src/components/common/RoundButton'; import * as S from './styles'; import ERROR_MESSAGE from './constants/errorMessage'; -import { Ic404Back, Ic404Front, Ic404Ghost, Ic500Back, Ic500Cone, Ic500Front } from './assets'; import ERROR_BUTTON from './constants/errorButton'; +import CODE_IMG from './constants/errorCode'; function Wrong404() { const router = useRouter(); const handleButtonClick = () => { router.push('/'); - }; - - const CODE_IMG = { - CODE404: - <> - - - - , - CODE500: - <> - - - - , + router.back(); }; return ( diff --git a/src/views/ErrorPage/constants/errorCode.tsx b/src/views/ErrorPage/constants/errorCode.tsx new file mode 100644 index 00000000..ec7bef74 --- /dev/null +++ b/src/views/ErrorPage/constants/errorCode.tsx @@ -0,0 +1,18 @@ +import { Ic404Back, Ic404Front, Ic404Ghost, Ic500Back, Ic500Cone, Ic500Front } from '../assets'; + +const CODE_IMG = { + CODE404: + <> + + + + , + CODE500: + <> + + + + , +}; + +export default CODE_IMG; From 35d4b9ea3c2adcaa6634c24551b17b51f40856fa Mon Sep 17 00:00:00 2001 From: lydiacho Date: Wed, 20 Mar 2024 23:03:32 +0900 Subject: [PATCH 07/21] =?UTF-8?q?feat:=20ErrorPage=EB=A1=9C=20404,=20500?= =?UTF-8?q?=20=EC=9E=AC=EC=82=AC=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/404.tsx | 4 +++- src/pages/500.tsx | 3 +++ .../ErrorPage/{404Page.tsx => ErrorPage.tsx} | 19 ++++++++++++------- src/views/ErrorPage/index.tsx | 4 +++- 4 files changed, 21 insertions(+), 9 deletions(-) create mode 100644 src/pages/500.tsx rename src/views/ErrorPage/{404Page.tsx => ErrorPage.tsx} (57%) diff --git a/src/pages/404.tsx b/src/pages/404.tsx index 69d8822e..978c9273 100644 --- a/src/pages/404.tsx +++ b/src/pages/404.tsx @@ -1 +1,3 @@ -export { default } from '@src/views/ErrorPage'; +import { Page404 } from '@src/views/ErrorPage'; + +export default Page404; diff --git a/src/pages/500.tsx b/src/pages/500.tsx new file mode 100644 index 00000000..1f58c6e7 --- /dev/null +++ b/src/pages/500.tsx @@ -0,0 +1,3 @@ +import { Page500 } from '@src/views/ErrorPage'; + +export default Page500; diff --git a/src/views/ErrorPage/404Page.tsx b/src/views/ErrorPage/ErrorPage.tsx similarity index 57% rename from src/views/ErrorPage/404Page.tsx rename to src/views/ErrorPage/ErrorPage.tsx index 260a5dba..cce9d5e0 100644 --- a/src/views/ErrorPage/404Page.tsx +++ b/src/views/ErrorPage/ErrorPage.tsx @@ -6,12 +6,16 @@ import ERROR_MESSAGE from './constants/errorMessage'; import ERROR_BUTTON from './constants/errorButton'; import CODE_IMG from './constants/errorCode'; -function Wrong404() { +interface ErrorPageProps { + code: 404 | 500; +} + +function ErrorPage({ code } : ErrorPageProps) { const router = useRouter(); + const CODE_KEY : 'CODE404' | 'CODE500' = `CODE${code}`; const handleButtonClick = () => { - router.push('/'); - router.back(); + code===404? router.push('/') : router.back(); }; return ( @@ -19,15 +23,16 @@ function Wrong404() {
- {CODE_IMG.CODE500} + {CODE_IMG[CODE_KEY]} - {ERROR_MESSAGE.CODE500} + {ERROR_MESSAGE[CODE_KEY]} - {ERROR_BUTTON.CODE500} + {ERROR_BUTTON[CODE_KEY]} ); } -export default Wrong404; +export const Page404 = () => ; +export const Page500 = () => ; diff --git a/src/views/ErrorPage/index.tsx b/src/views/ErrorPage/index.tsx index 0290f9c8..2242b588 100644 --- a/src/views/ErrorPage/index.tsx +++ b/src/views/ErrorPage/index.tsx @@ -1 +1,3 @@ -export { default } from './404Page'; +import { Page404, Page500 } from './ErrorPage'; + +export { Page404, Page500 }; From 4773b42c13180d1aecc05e1c2cefb14c65b31079 Mon Sep 17 00:00:00 2001 From: lydiacho Date: Wed, 20 Mar 2024 23:56:58 +0900 Subject: [PATCH 08/21] =?UTF-8?q?design:=20=EB=AC=B8=EC=9D=98=ED=95=98?= =?UTF-8?q?=EA=B8=B0=20=EB=B2=84=ED=8A=BC=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/ErrorPage/styles.ts | 29 +++++++++++++++++++++++++++-- 1 file changed, 27 insertions(+), 2 deletions(-) diff --git a/src/views/ErrorPage/styles.ts b/src/views/ErrorPage/styles.ts index 118fe976..565a069f 100644 --- a/src/views/ErrorPage/styles.ts +++ b/src/views/ErrorPage/styles.ts @@ -1,15 +1,27 @@ import styled from '@emotion/styled'; -export const Root = styled.section` +export const Root = styled.main` display: flex; flex-direction: column; align-items: center; justify-content: center; - gap: 22px; + + position: relative; width: 100%; height: 100vh; `; +export const Section = styled.section` + display: flex; + flex-direction: column; + align-items: center; + gap: 22px; + + position: absolute; + top: 268px; + + width: 100%; +`; export const ErrorText = styled.p` margin-bottom: 26px; @@ -24,3 +36,16 @@ export const CodeText = styled.div` display: flex; align-items: center; `; +export const ContactButton = styled.button` + position: absolute; + bottom: 169px; + + color: #FFF; + font-size: 24px; + font-weight: 600; + line-height: 150%; /* 36px */ + letter-spacing: -0.48px; + text-decoration-line: underline; + + cursor: pointer; +`; From 6881ab1dc66fc9f44a8b3591f94a7a169e290b2f Mon Sep 17 00:00:00 2001 From: lydiacho Date: Thu, 21 Mar 2024 00:01:16 +0900 Subject: [PATCH 09/21] =?UTF-8?q?feat:=20=EB=AC=B8=EC=9D=98=ED=95=98?= =?UTF-8?q?=EA=B8=B0=20next/link=EB=A1=9C=20=EC=88=98=EC=A0=95=20=EB=B0=8F?= =?UTF-8?q?=20=EB=A7=81=ED=81=AC=20=EC=97=B0=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/ErrorPage/ErrorPage.tsx | 25 ++++++++++++++++++------- src/views/ErrorPage/styles.ts | 3 ++- 2 files changed, 20 insertions(+), 8 deletions(-) diff --git a/src/views/ErrorPage/ErrorPage.tsx b/src/views/ErrorPage/ErrorPage.tsx index cce9d5e0..34312509 100644 --- a/src/views/ErrorPage/ErrorPage.tsx +++ b/src/views/ErrorPage/ErrorPage.tsx @@ -22,13 +22,24 @@ function ErrorPage({ code } : ErrorPageProps) { <>
- - {CODE_IMG[CODE_KEY]} - - {ERROR_MESSAGE[CODE_KEY]} - - {ERROR_BUTTON[CODE_KEY]} - + + + {CODE_IMG[CODE_KEY]} + + {ERROR_MESSAGE[CODE_KEY]} + + {ERROR_BUTTON[CODE_KEY]} + + + {code === 500 && ( + + 문의하기 + + )} ); diff --git a/src/views/ErrorPage/styles.ts b/src/views/ErrorPage/styles.ts index 565a069f..4d91f8fa 100644 --- a/src/views/ErrorPage/styles.ts +++ b/src/views/ErrorPage/styles.ts @@ -1,4 +1,5 @@ import styled from '@emotion/styled'; +import Link from 'next/link'; export const Root = styled.main` display: flex; @@ -36,7 +37,7 @@ export const CodeText = styled.div` display: flex; align-items: center; `; -export const ContactButton = styled.button` +export const ContactLink = styled(Link)` position: absolute; bottom: 169px; From 7098f14c64ca1124dacfa9efe46b272f98af096a Mon Sep 17 00:00:00 2001 From: lydiacho Date: Thu, 21 Mar 2024 12:50:32 +0900 Subject: [PATCH 10/21] =?UTF-8?q?feat:=20=EC=97=90=EB=9F=AC=EC=BD=94?= =?UTF-8?q?=EB=93=9Csvg=20=EC=83=81=EC=88=98=ED=8C=8C=EC=9D=BC=20->=20?= =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=EB=A1=9C=20=EB=B3=80?= =?UTF-8?q?=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/ErrorPage/ErrorPage.tsx | 10 +++++----- src/views/ErrorPage/components/ErrorCode.tsx | 20 ++++++++++++++++++++ src/views/ErrorPage/constants/errorCode.tsx | 18 ------------------ 3 files changed, 25 insertions(+), 23 deletions(-) create mode 100644 src/views/ErrorPage/components/ErrorCode.tsx delete mode 100644 src/views/ErrorPage/constants/errorCode.tsx diff --git a/src/views/ErrorPage/ErrorPage.tsx b/src/views/ErrorPage/ErrorPage.tsx index 34312509..4f2565d3 100644 --- a/src/views/ErrorPage/ErrorPage.tsx +++ b/src/views/ErrorPage/ErrorPage.tsx @@ -4,13 +4,13 @@ import RoundButton from '@src/components/common/RoundButton'; import * as S from './styles'; import ERROR_MESSAGE from './constants/errorMessage'; import ERROR_BUTTON from './constants/errorButton'; -import CODE_IMG from './constants/errorCode'; +import ErrorCode from './components/ErrorCode'; interface ErrorPageProps { code: 404 | 500; } -function ErrorPage({ code } : ErrorPageProps) { +function ErrorPage({ code }: ErrorPageProps) { const router = useRouter(); const CODE_KEY : 'CODE404' | 'CODE500' = `CODE${code}`; @@ -22,15 +22,15 @@ function ErrorPage({ code } : ErrorPageProps) { <>
- + - {CODE_IMG[CODE_KEY]} + {ERROR_MESSAGE[CODE_KEY]} {ERROR_BUTTON[CODE_KEY]} - + {code === 500 && ( + + + + + ) : ( + <> + + + + + ); +} diff --git a/src/views/ErrorPage/constants/errorCode.tsx b/src/views/ErrorPage/constants/errorCode.tsx deleted file mode 100644 index ec7bef74..00000000 --- a/src/views/ErrorPage/constants/errorCode.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import { Ic404Back, Ic404Front, Ic404Ghost, Ic500Back, Ic500Cone, Ic500Front } from '../assets'; - -const CODE_IMG = { - CODE404: - <> - - - - , - CODE500: - <> - - - - , -}; - -export default CODE_IMG; From b9da14cb253e4ee32879dddba0cb2c5e563f887c Mon Sep 17 00:00:00 2001 From: lydiacho Date: Thu, 21 Mar 2024 13:59:54 +0900 Subject: [PATCH 11/21] =?UTF-8?q?feat:=20=EC=97=90=EB=9F=AC=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20assets=20=EB=B0=98=EC=9D=91=ED=98=95=20?= =?UTF-8?q?=EB=8C=80=EB=B9=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/ErrorPage/assets/ic_404_back.svg | 2 +- src/views/ErrorPage/assets/ic_404_front.svg | 2 +- src/views/ErrorPage/assets/ic_404_ghost.svg | 2 +- src/views/ErrorPage/assets/ic_404_ghost_dark.svg | 5 +++++ src/views/ErrorPage/assets/ic_500_back.svg | 2 +- src/views/ErrorPage/assets/ic_500_cone.svg | 2 +- src/views/ErrorPage/assets/ic_500_cone_dark.svg | 5 +++++ src/views/ErrorPage/assets/ic_500_front.svg | 2 +- src/views/ErrorPage/assets/index.ts | 4 +++- 9 files changed, 19 insertions(+), 7 deletions(-) create mode 100644 src/views/ErrorPage/assets/ic_404_ghost_dark.svg create mode 100644 src/views/ErrorPage/assets/ic_500_cone_dark.svg diff --git a/src/views/ErrorPage/assets/ic_404_back.svg b/src/views/ErrorPage/assets/ic_404_back.svg index f355bdf1..99acab14 100644 --- a/src/views/ErrorPage/assets/ic_404_back.svg +++ b/src/views/ErrorPage/assets/ic_404_back.svg @@ -1,4 +1,4 @@ - + diff --git a/src/views/ErrorPage/assets/ic_404_front.svg b/src/views/ErrorPage/assets/ic_404_front.svg index b6955225..3970b338 100644 --- a/src/views/ErrorPage/assets/ic_404_front.svg +++ b/src/views/ErrorPage/assets/ic_404_front.svg @@ -1,4 +1,4 @@ - + diff --git a/src/views/ErrorPage/assets/ic_404_ghost.svg b/src/views/ErrorPage/assets/ic_404_ghost.svg index fc67ba47..ccd241fe 100644 --- a/src/views/ErrorPage/assets/ic_404_ghost.svg +++ b/src/views/ErrorPage/assets/ic_404_ghost.svg @@ -1,3 +1,3 @@ - + diff --git a/src/views/ErrorPage/assets/ic_404_ghost_dark.svg b/src/views/ErrorPage/assets/ic_404_ghost_dark.svg new file mode 100644 index 00000000..bcecc7c4 --- /dev/null +++ b/src/views/ErrorPage/assets/ic_404_ghost_dark.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/views/ErrorPage/assets/ic_500_back.svg b/src/views/ErrorPage/assets/ic_500_back.svg index 6b970441..363002b9 100644 --- a/src/views/ErrorPage/assets/ic_500_back.svg +++ b/src/views/ErrorPage/assets/ic_500_back.svg @@ -1,4 +1,4 @@ - + diff --git a/src/views/ErrorPage/assets/ic_500_cone.svg b/src/views/ErrorPage/assets/ic_500_cone.svg index 1a7ed396..ae051e24 100644 --- a/src/views/ErrorPage/assets/ic_500_cone.svg +++ b/src/views/ErrorPage/assets/ic_500_cone.svg @@ -1,3 +1,3 @@ - + diff --git a/src/views/ErrorPage/assets/ic_500_cone_dark.svg b/src/views/ErrorPage/assets/ic_500_cone_dark.svg new file mode 100644 index 00000000..95744684 --- /dev/null +++ b/src/views/ErrorPage/assets/ic_500_cone_dark.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/views/ErrorPage/assets/ic_500_front.svg b/src/views/ErrorPage/assets/ic_500_front.svg index f1eb6081..389a120a 100644 --- a/src/views/ErrorPage/assets/ic_500_front.svg +++ b/src/views/ErrorPage/assets/ic_500_front.svg @@ -1,4 +1,4 @@ - + diff --git a/src/views/ErrorPage/assets/index.ts b/src/views/ErrorPage/assets/index.ts index 98f0adb3..1d6ac8cc 100644 --- a/src/views/ErrorPage/assets/index.ts +++ b/src/views/ErrorPage/assets/index.ts @@ -1,8 +1,10 @@ import { ReactComponent as Ic404Front } from './ic_404_front.svg'; import { ReactComponent as Ic404Back } from './ic_404_back.svg'; import { ReactComponent as Ic404Ghost } from './ic_404_ghost.svg'; +import { ReactComponent as Ic404GhostDark } from './ic_404_ghost_dark.svg'; import { ReactComponent as Ic500Front } from './ic_500_front.svg'; import { ReactComponent as Ic500Back } from './ic_500_back.svg'; import { ReactComponent as Ic500Cone } from './ic_500_cone.svg'; +import { ReactComponent as Ic500ConeDark } from './ic_500_cone_dark.svg'; -export { Ic404Front, Ic404Back, Ic404Ghost, Ic500Cone, Ic500Back, Ic500Front }; +export { Ic404Front, Ic404Back, Ic404Ghost, Ic404GhostDark, Ic500Cone, Ic500Back, Ic500Front, Ic500ConeDark }; From 6df42d25518761acfb7dfc2478737a023a0296ca Mon Sep 17 00:00:00 2001 From: lydiacho Date: Thu, 21 Mar 2024 14:00:17 +0900 Subject: [PATCH 12/21] =?UTF-8?q?feat:=20=EC=97=90=EB=9F=AC=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EB=B0=98=EC=9D=91=ED=98=95=20=EC=9E=91?= =?UTF-8?q?=EC=97=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common/RoundButton/style.ts | 8 ++++++++ src/views/ErrorPage/styles.ts | 24 +++++++++++++--------- 2 files changed, 22 insertions(+), 10 deletions(-) diff --git a/src/components/common/RoundButton/style.ts b/src/components/common/RoundButton/style.ts index 8bf7e253..f7d63f85 100644 --- a/src/components/common/RoundButton/style.ts +++ b/src/components/common/RoundButton/style.ts @@ -16,4 +16,12 @@ export const Root = styled.button` line-height: 150%; /* 36px */ letter-spacing: -0.48px; cursor: pointer; + + @media (max-width: 768px) and (min-width: 428px) { + font-size: 20px; + } + @media (max-width: 428px) { + padding: 8px 22px; + font-size: 18px; + } `; diff --git a/src/views/ErrorPage/styles.ts b/src/views/ErrorPage/styles.ts index 4d91f8fa..e0620930 100644 --- a/src/views/ErrorPage/styles.ts +++ b/src/views/ErrorPage/styles.ts @@ -11,24 +11,20 @@ export const Root = styled.main` width: 100%; height: 100vh; + padding-bottom: 20vh; `; -export const Section = styled.section` +export const TopSection = styled.section` display: flex; flex-direction: column; align-items: center; - gap: 22px; - - position: absolute; - top: 268px; + gap: 34px; width: 100%; `; export const ErrorText = styled.p` - margin-bottom: 26px; - color: #FCFCFC; - font-size: 48px; + font-size: calc(24px + 1vw); font-weight: 600; line-height: 150%; letter-spacing: -0.96px; @@ -36,10 +32,11 @@ export const ErrorText = styled.p` export const CodeText = styled.div` display: flex; align-items: center; + gap: 6px; `; export const ContactLink = styled(Link)` - position: absolute; - bottom: 169px; + position: fixed; + bottom: 17vh; color: #FFF; font-size: 24px; @@ -49,4 +46,11 @@ export const ContactLink = styled(Link)` text-decoration-line: underline; cursor: pointer; + + @media (max-width: 768px) and (min-width: 428px) { + font-size: 20px; + } + @media (max-width: 428px) { + font-size: 18px; + } `; From 778c9d523fd630317e1bcb37bb43ea6a26a69064 Mon Sep 17 00:00:00 2001 From: lydiacho Date: Thu, 21 Mar 2024 14:00:34 +0900 Subject: [PATCH 13/21] =?UTF-8?q?feat:=20=EC=97=90=EB=9F=AC=EC=BD=94?= =?UTF-8?q?=EB=93=9C=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EB=B0=98?= =?UTF-8?q?=EC=9D=91=ED=98=95=20=EC=9E=91=EC=97=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/ErrorPage/components/ErrorCode.tsx | 24 +++++++++++++------- 1 file changed, 16 insertions(+), 8 deletions(-) diff --git a/src/views/ErrorPage/components/ErrorCode.tsx b/src/views/ErrorPage/components/ErrorCode.tsx index e79005dc..521be05a 100644 --- a/src/views/ErrorPage/components/ErrorCode.tsx +++ b/src/views/ErrorPage/components/ErrorCode.tsx @@ -1,20 +1,28 @@ -import { Ic404Back, Ic404Front, Ic404Ghost, Ic500Back, Ic500Cone, Ic500Front } from '../assets'; +import { useIsMobile, useIsTablet } from '@src/hooks/useDevice'; +import { Ic404Back, Ic404Front, Ic404Ghost, Ic404GhostDark, Ic500Back, Ic500Cone, Ic500ConeDark, Ic500Front } from '../assets'; interface ErrorCodeProps { - code: number; + code: 404 | 500; } export default function ErrorCode({ code }: ErrorCodeProps) { + const isMobile = useIsMobile('428px'); + const isTablet = useIsTablet('428px', '768px'); + const SIZE = { + height: isTablet ? 89 : 101, + icon: isTablet ? 140 : 165, + }; + return code === 404 ? ( <> - - - + {!isMobile && } + {isMobile ? : } + {!isMobile && } ) : ( <> - - - + {!isMobile && } + {isMobile ? : } + {!isMobile && } ); } From 4b75d5f5e4231a231d001f42dfde5df111a39ca2 Mon Sep 17 00:00:00 2001 From: lydiacho Date: Thu, 21 Mar 2024 14:08:45 +0900 Subject: [PATCH 14/21] =?UTF-8?q?chore:=20=EC=97=90=EB=9F=AC=EC=BD=94?= =?UTF-8?q?=EB=93=9C=20Wrapper=EB=A5=BC=20ErrorPage->ErrorCode=EB=A1=9C=20?= =?UTF-8?q?=EC=9D=B4=EB=8F=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/ErrorPage/ErrorPage.tsx | 2 -- src/views/ErrorPage/components/ErrorCode.tsx | 22 ++++++++++++-------- src/views/ErrorPage/styles.ts | 11 +++++----- 3 files changed, 19 insertions(+), 16 deletions(-) diff --git a/src/views/ErrorPage/ErrorPage.tsx b/src/views/ErrorPage/ErrorPage.tsx index 4f2565d3..62ce5c75 100644 --- a/src/views/ErrorPage/ErrorPage.tsx +++ b/src/views/ErrorPage/ErrorPage.tsx @@ -23,9 +23,7 @@ function ErrorPage({ code }: ErrorPageProps) {
- - {ERROR_MESSAGE[CODE_KEY]} {ERROR_BUTTON[CODE_KEY]} diff --git a/src/views/ErrorPage/components/ErrorCode.tsx b/src/views/ErrorPage/components/ErrorCode.tsx index 521be05a..a86a4647 100644 --- a/src/views/ErrorPage/components/ErrorCode.tsx +++ b/src/views/ErrorPage/components/ErrorCode.tsx @@ -1,5 +1,6 @@ import { useIsMobile, useIsTablet } from '@src/hooks/useDevice'; import { Ic404Back, Ic404Front, Ic404Ghost, Ic404GhostDark, Ic500Back, Ic500Cone, Ic500ConeDark, Ic500Front } from '../assets'; +import * as S from '../styles'; interface ErrorCodeProps { code: 404 | 500; @@ -12,17 +13,20 @@ export default function ErrorCode({ code }: ErrorCodeProps) { icon: isTablet ? 140 : 165, }; - return code === 404 ? ( - <> - {!isMobile && } - {isMobile ? : } - {!isMobile && } - - ) : ( - <> + return ( + + {code === 404 ? ( + <> + {!isMobile && } + {isMobile ? : } + {!isMobile && } + ) : ( + <> {!isMobile && } {isMobile ? : } {!isMobile && } - + + )} + ); } diff --git a/src/views/ErrorPage/styles.ts b/src/views/ErrorPage/styles.ts index e0620930..ecee256e 100644 --- a/src/views/ErrorPage/styles.ts +++ b/src/views/ErrorPage/styles.ts @@ -1,4 +1,5 @@ import styled from '@emotion/styled'; +import { motion } from 'framer-motion'; import Link from 'next/link'; export const Root = styled.main` @@ -29,11 +30,6 @@ export const ErrorText = styled.p` line-height: 150%; letter-spacing: -0.96px; `; -export const CodeText = styled.div` - display: flex; - align-items: center; - gap: 6px; -`; export const ContactLink = styled(Link)` position: fixed; bottom: 17vh; @@ -54,3 +50,8 @@ export const ContactLink = styled(Link)` font-size: 18px; } `; +export const ErrorCode = styled(motion.div)` + display: flex; + align-items: center; + gap: 6px; +`; From e06df57964ceb530fbb8d47e9314d9815d16e5e3 Mon Sep 17 00:00:00 2001 From: lydiacho Date: Thu, 21 Mar 2024 14:40:01 +0900 Subject: [PATCH 15/21] =?UTF-8?q?feat:=20=EC=97=90=EB=9F=AC=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EC=95=A0=EB=8B=88=EB=A9=94=EC=9D=B4?= =?UTF-8?q?=EC=85=98=20=EC=9E=91=EC=97=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/ErrorPage/components/ErrorCode.tsx | 26 +++++++++++++++++--- src/views/ErrorPage/styles.ts | 8 ++++++ 2 files changed, 31 insertions(+), 3 deletions(-) diff --git a/src/views/ErrorPage/components/ErrorCode.tsx b/src/views/ErrorPage/components/ErrorCode.tsx index a86a4647..fdbe83b3 100644 --- a/src/views/ErrorPage/components/ErrorCode.tsx +++ b/src/views/ErrorPage/components/ErrorCode.tsx @@ -13,17 +13,37 @@ export default function ErrorCode({ code }: ErrorCodeProps) { icon: isTablet ? 140 : 165, }; + const codeVariant = { + initial: { gap: '6px' }, + whileHover: { gap: '159px' }, + }; + + const iconVariant = { + initial: { opacity: 0 }, + whileHover: { opacity: 1 }, + }; + + const animationProps = { + initial : 'initial', + whileHover : 'whileHover', + transition : { duration: 0.3 }, + }; + return ( - + {code === 404 ? ( <> {!isMobile && } - {isMobile ? : } + + {isMobile ? : } + {!isMobile && } ) : ( <> {!isMobile && } - {isMobile ? : } + + {isMobile ? : } + {!isMobile && } )} diff --git a/src/views/ErrorPage/styles.ts b/src/views/ErrorPage/styles.ts index ecee256e..8779dba4 100644 --- a/src/views/ErrorPage/styles.ts +++ b/src/views/ErrorPage/styles.ts @@ -54,4 +54,12 @@ export const ErrorCode = styled(motion.div)` display: flex; align-items: center; gap: 6px; + + position: relative; +`; +export const ErrorIcon = styled(motion.div)` + display: flex; + justify-content: center; + position: absolute; + width: 100%; `; From 7a357b6db76a4d6409154c6f08dbac3643e08b2d Mon Sep 17 00:00:00 2001 From: lydiacho Date: Thu, 21 Mar 2024 15:01:49 +0900 Subject: [PATCH 16/21] =?UTF-8?q?design:=20=EB=B0=98=EC=9D=91=ED=98=95=20?= =?UTF-8?q?=EA=B8=B0=EC=A4=80=20=EC=88=98=EC=A0=95=20=EB=B0=8F=20ErrorCode?= =?UTF-8?q?=20=EC=BD=94=EB=93=9C=20=EC=A0=95=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common/RoundButton/style.ts | 5 +--- src/views/ErrorPage/components/ErrorCode.tsx | 28 +++++++++++++------- src/views/ErrorPage/styles.ts | 3 --- 3 files changed, 19 insertions(+), 17 deletions(-) diff --git a/src/components/common/RoundButton/style.ts b/src/components/common/RoundButton/style.ts index f7d63f85..49ef193f 100644 --- a/src/components/common/RoundButton/style.ts +++ b/src/components/common/RoundButton/style.ts @@ -11,15 +11,12 @@ export const Root = styled.button` background: ${colors.gray10}; color: ${colors.gray950}; - font-size: 24px; + font-size: 22px; font-weight: 600; line-height: 150%; /* 36px */ letter-spacing: -0.48px; cursor: pointer; - @media (max-width: 768px) and (min-width: 428px) { - font-size: 20px; - } @media (max-width: 428px) { padding: 8px 22px; font-size: 18px; diff --git a/src/views/ErrorPage/components/ErrorCode.tsx b/src/views/ErrorPage/components/ErrorCode.tsx index fdbe83b3..df844d61 100644 --- a/src/views/ErrorPage/components/ErrorCode.tsx +++ b/src/views/ErrorPage/components/ErrorCode.tsx @@ -1,4 +1,4 @@ -import { useIsMobile, useIsTablet } from '@src/hooks/useDevice'; +import { useIsMobile } from '@src/hooks/useDevice'; import { Ic404Back, Ic404Front, Ic404Ghost, Ic404GhostDark, Ic500Back, Ic500Cone, Ic500ConeDark, Ic500Front } from '../assets'; import * as S from '../styles'; @@ -7,10 +7,9 @@ interface ErrorCodeProps { } export default function ErrorCode({ code }: ErrorCodeProps) { const isMobile = useIsMobile('428px'); - const isTablet = useIsTablet('428px', '768px'); const SIZE = { - height: isTablet ? 89 : 101, - icon: isTablet ? 140 : 165, + height: 92, + icon: 150, }; const codeVariant = { @@ -33,18 +32,27 @@ export default function ErrorCode({ code }: ErrorCodeProps) { {code === 404 ? ( <> - {!isMobile && } + {!isMobile && + <> + + + + } {isMobile ? : } - {!isMobile && } - ) : ( + + ) : ( <> - {!isMobile && } - + {!isMobile && + <> + + + + } + {isMobile ? : } - {!isMobile && } )} diff --git a/src/views/ErrorPage/styles.ts b/src/views/ErrorPage/styles.ts index 8779dba4..e2ea8555 100644 --- a/src/views/ErrorPage/styles.ts +++ b/src/views/ErrorPage/styles.ts @@ -43,9 +43,6 @@ export const ContactLink = styled(Link)` cursor: pointer; - @media (max-width: 768px) and (min-width: 428px) { - font-size: 20px; - } @media (max-width: 428px) { font-size: 18px; } From 2cdb9f4b8cbe467e7e7908736f706f023545fa8f Mon Sep 17 00:00:00 2001 From: lydiacho Date: Thu, 21 Mar 2024 22:08:45 +0900 Subject: [PATCH 17/21] =?UTF-8?q?fix:=20=EB=AA=A8=EB=B0=94=EC=9D=BC?= =?UTF-8?q?=EB=B7=B0=EC=97=90=EC=84=9C=20=EC=95=84=EC=9D=B4=EC=BD=98=20?= =?UTF-8?q?=EC=95=A0=EB=8B=88=EB=A9=94=EC=9D=B4=EC=85=98=20=ED=95=B4?= =?UTF-8?q?=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/ErrorPage/components/ErrorCode.tsx | 18 +++++++++++------- 1 file changed, 11 insertions(+), 7 deletions(-) diff --git a/src/views/ErrorPage/components/ErrorCode.tsx b/src/views/ErrorPage/components/ErrorCode.tsx index df844d61..957e472b 100644 --- a/src/views/ErrorPage/components/ErrorCode.tsx +++ b/src/views/ErrorPage/components/ErrorCode.tsx @@ -38,10 +38,12 @@ export default function ErrorCode({ code }: ErrorCodeProps) { } - - {isMobile ? : } - - + {isMobile ? : + + + + } + ) : ( <> {!isMobile && @@ -50,9 +52,11 @@ export default function ErrorCode({ code }: ErrorCodeProps) { } - - {isMobile ? : } - + {isMobile ? : + + + + } )} From 2755c5443b290d99071b1c6b6fc42c59e48053e1 Mon Sep 17 00:00:00 2001 From: lydiacho Date: Sun, 24 Mar 2024 01:31:44 +0900 Subject: [PATCH 18/21] =?UTF-8?q?fix:=20=EB=AC=B8=EC=9D=98=ED=95=98?= =?UTF-8?q?=EA=B8=B0=20=EB=B2=84=ED=8A=BC=20=EA=B2=B9=EC=B9=98=EC=A7=80=20?= =?UTF-8?q?=EC=95=8A=EB=8F=84=EB=A1=9D=20min-height=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/ErrorPage/styles.ts | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/src/views/ErrorPage/styles.ts b/src/views/ErrorPage/styles.ts index e2ea8555..c34a2f95 100644 --- a/src/views/ErrorPage/styles.ts +++ b/src/views/ErrorPage/styles.ts @@ -12,7 +12,10 @@ export const Root = styled.main` width: 100%; height: 100vh; + min-height: 400px; padding-bottom: 20vh; + + overflow: scroll; `; export const TopSection = styled.section` display: flex; @@ -23,7 +26,7 @@ export const TopSection = styled.section` width: 100%; `; export const ErrorText = styled.p` - color: #FCFCFC; + color: #fcfcfc; font-size: calc(24px + 1vw); font-weight: 600; @@ -31,10 +34,10 @@ export const ErrorText = styled.p` letter-spacing: -0.96px; `; export const ContactLink = styled(Link)` - position: fixed; + position: absolute; bottom: 17vh; - color: #FFF; + color: #fff; font-size: 24px; font-weight: 600; line-height: 150%; /* 36px */ From 418429aedb44f4fff77b32b71431299f10786f0e Mon Sep 17 00:00:00 2001 From: lydiacho Date: Sun, 24 Mar 2024 01:34:07 +0900 Subject: [PATCH 19/21] =?UTF-8?q?fix:=20ErrorCode=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=EC=97=90=20=EC=93=B0=EC=9D=B4=EB=8A=94=20?= =?UTF-8?q?=EC=8A=A4=ED=83=80=EC=9D=BC=20=ED=8C=8C=EC=9D=BC=20=EB=B6=84?= =?UTF-8?q?=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ErrorPage/components/ErrorCode.style.ts | 16 ++++ src/views/ErrorPage/components/ErrorCode.tsx | 75 +++++++++++-------- src/views/ErrorPage/styles.ts | 14 ---- 3 files changed, 60 insertions(+), 45 deletions(-) create mode 100644 src/views/ErrorPage/components/ErrorCode.style.ts diff --git a/src/views/ErrorPage/components/ErrorCode.style.ts b/src/views/ErrorPage/components/ErrorCode.style.ts new file mode 100644 index 00000000..ace7ce23 --- /dev/null +++ b/src/views/ErrorPage/components/ErrorCode.style.ts @@ -0,0 +1,16 @@ +import styled from '@emotion/styled'; +import { motion } from 'framer-motion'; + +export const ErrorCode = styled(motion.div)` + display: flex; + align-items: center; + gap: 6px; + + position: relative; +`; +export const ErrorIcon = styled(motion.div)` + display: flex; + justify-content: center; + position: absolute; + width: 100%; +`; diff --git a/src/views/ErrorPage/components/ErrorCode.tsx b/src/views/ErrorPage/components/ErrorCode.tsx index 957e472b..bef01070 100644 --- a/src/views/ErrorPage/components/ErrorCode.tsx +++ b/src/views/ErrorPage/components/ErrorCode.tsx @@ -1,6 +1,15 @@ import { useIsMobile } from '@src/hooks/useDevice'; -import { Ic404Back, Ic404Front, Ic404Ghost, Ic404GhostDark, Ic500Back, Ic500Cone, Ic500ConeDark, Ic500Front } from '../assets'; -import * as S from '../styles'; +import { + Ic404Back, + Ic404Front, + Ic404Ghost, + Ic404GhostDark, + Ic500Back, + Ic500Cone, + Ic500ConeDark, + Ic500Front, +} from '../assets'; +import * as S from './ErrorCode.style'; interface ErrorCodeProps { code: 404 | 500; @@ -23,41 +32,45 @@ export default function ErrorCode({ code }: ErrorCodeProps) { }; const animationProps = { - initial : 'initial', - whileHover : 'whileHover', - transition : { duration: 0.3 }, + initial: 'initial', + whileHover: 'whileHover', + transition: { duration: 0.3 }, }; return ( - {code === 404 ? ( - <> - {!isMobile && - <> - - - - } - {isMobile ? : - - - - } + {code === 404 ? ( + <> + {!isMobile && ( + <> + + + + )} + {isMobile ? ( + + ) : ( + + + + )} ) : ( - <> - {!isMobile && - <> - - - - } - {isMobile ? : - - - - } - + <> + {!isMobile && ( + <> + + + + )} + {isMobile ? ( + + ) : ( + + + + )} + )} ); diff --git a/src/views/ErrorPage/styles.ts b/src/views/ErrorPage/styles.ts index c34a2f95..e59197c8 100644 --- a/src/views/ErrorPage/styles.ts +++ b/src/views/ErrorPage/styles.ts @@ -1,5 +1,4 @@ import styled from '@emotion/styled'; -import { motion } from 'framer-motion'; import Link from 'next/link'; export const Root = styled.main` @@ -50,16 +49,3 @@ export const ContactLink = styled(Link)` font-size: 18px; } `; -export const ErrorCode = styled(motion.div)` - display: flex; - align-items: center; - gap: 6px; - - position: relative; -`; -export const ErrorIcon = styled(motion.div)` - display: flex; - justify-content: center; - position: absolute; - width: 100%; -`; From a76cd002ffa79dc42d932bddd48a44444770ae24 Mon Sep 17 00:00:00 2001 From: lydiacho Date: Sun, 24 Mar 2024 01:41:22 +0900 Subject: [PATCH 20/21] =?UTF-8?q?style:=20code=20formatter=20prettier=20?= =?UTF-8?q?=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/ErrorPage/ErrorPage.tsx | 16 +++++++--------- 1 file changed, 7 insertions(+), 9 deletions(-) diff --git a/src/views/ErrorPage/ErrorPage.tsx b/src/views/ErrorPage/ErrorPage.tsx index 62ce5c75..86869e16 100644 --- a/src/views/ErrorPage/ErrorPage.tsx +++ b/src/views/ErrorPage/ErrorPage.tsx @@ -1,10 +1,10 @@ import { useRouter } from 'next/router'; import { Header } from '@src/components'; import RoundButton from '@src/components/common/RoundButton'; -import * as S from './styles'; -import ERROR_MESSAGE from './constants/errorMessage'; -import ERROR_BUTTON from './constants/errorButton'; import ErrorCode from './components/ErrorCode'; +import ERROR_BUTTON from './constants/errorButton'; +import ERROR_MESSAGE from './constants/errorMessage'; +import * as S from './styles'; interface ErrorPageProps { code: 404 | 500; @@ -12,10 +12,10 @@ interface ErrorPageProps { function ErrorPage({ code }: ErrorPageProps) { const router = useRouter(); - const CODE_KEY : 'CODE404' | 'CODE500' = `CODE${code}`; + const CODE_KEY: 'CODE404' | 'CODE500' = `CODE${code}`; const handleButtonClick = () => { - code===404? router.push('/') : router.back(); + code === 404 ? router.push('/') : router.back(); }; return ( @@ -23,11 +23,9 @@ function ErrorPage({ code }: ErrorPageProps) {
- + {ERROR_MESSAGE[CODE_KEY]} - - {ERROR_BUTTON[CODE_KEY]} - + {ERROR_BUTTON[CODE_KEY]} {code === 500 && ( Date: Sun, 24 Mar 2024 01:53:55 +0900 Subject: [PATCH 21/21] =?UTF-8?q?chore:=2034=EA=B8=B0=20=EB=AA=A8=EC=A7=91?= =?UTF-8?q?=EB=B0=B0=EB=84=88=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20?= =?UTF-8?q?=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/MainPage/MainPage.tsx | 7 ------- 1 file changed, 7 deletions(-) diff --git a/src/views/MainPage/MainPage.tsx b/src/views/MainPage/MainPage.tsx index 26244846..59678d24 100644 --- a/src/views/MainPage/MainPage.tsx +++ b/src/views/MainPage/MainPage.tsx @@ -4,17 +4,10 @@ import IntroSection from '@src/views/MainPage/components/IntroSection'; import Banner from './components/Banner'; import Introduce from './components/Introduce'; import ScrollInteractiveLogo from './components/ScrollInteractiveLogo'; -import TopBanner from './components/TopBanner'; -import usePost from './hooks/usePost'; -import useCheckTime from '../../hooks/useCheckTime'; function MainPage() { - const isValid = useCheckTime(); // 모집 시작 여부 - usePost(); // 방문자 증가 - return ( - {isValid && }