[SP0] 404, 500 에러페이지 제작

src/components/common/RoundButton/RoundButton.tsx

@@ -1,15 +1,14 @@
 import { DetailedHTMLProps, HTMLAttributes, ReactElement } from 'react';
-import * as S from './RoundButton.style';
+import * as S from './style';
 
 interface ButtonProps
   extends DetailedHTMLProps<HTMLAttributes<HTMLButtonElement>, HTMLButtonElement> {
   children: string | ReactElement;
-  isReverse?: boolean;
 }
 
-function RoundButton({ children, isReverse = false, ...props }: ButtonProps) {
+function RoundButton({ children, ...props }: ButtonProps) {
   return (
-    <S.Root isReverse={isReverse} {...props}>
+    <S.Root type='button' {...props}>
       {children}
     </S.Root>
   );

src/components/common/RoundButton/RoundButton.style.tsx → src/components/common/RoundButton/style.ts

@@ -1,23 +1,24 @@
 import styled from '@emotion/styled';
 import { colors } from '@sopt-makers/colors';
 
-interface StyleProps {
-  isReverse?: boolean;
-}
-
-export const Root = styled.button<StyleProps>`
+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};
 
   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: 428px) {
+    padding: 8px 22px;
+    font-size: 18px;
+  }
 `;

src/pages/404.tsx

@@ -1,49 +1,3 @@
-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';
+import { Page404 } from '@src/views/ErrorPage';
 
-function Wrong() {
-  const router = useRouter();
-
-  const handleButtonClick = () => {
-    router.push('/');
-  };
-
-  return (
-    <>
-      <Header />
-      <Styled.Root>
-        <span>잘못된 경로예요</span>
-        <RoundButton onClick={handleButtonClick} isReverse={true}>
-          홈으로 가기
-        </RoundButton>
-      </Styled.Root>
-    </>
-  );
-}
-
-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 Page404;

src/pages/500.tsx

@@ -0,0 +1,3 @@
+import { Page500 } from '@src/views/ErrorPage';
+
+export default Page500;

src/views/ErrorPage/ErrorPage.tsx

@@ -0,0 +1,47 @@
+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';
+
+interface ErrorPageProps {
+  code: 404 | 500;
+}
+
+function ErrorPage({ code }: ErrorPageProps) {
+  const router = useRouter();
+  const CODE_KEY : 'CODE404' | 'CODE500' = `CODE${code}`;
+
+  const handleButtonClick = () => {
+    code===404? router.push('/') : router.back();
+  };
+
+  return (
+    <>
+      <Header />
+      <S.Root>
+        <S.TopSection>
+            <ErrorCode code={code}/>
+          <S.ErrorText>{ERROR_MESSAGE[CODE_KEY]}</S.ErrorText>
+          <RoundButton onClick={handleButtonClick}>
+            {ERROR_BUTTON[CODE_KEY]}
+          </RoundButton>
+        </S.TopSection>
+        {code === 500 && (
+          <S.ContactLink
+            href="https://walla.my/sopt_official"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            문의하기
+          </S.ContactLink>
+        )}
+      </S.Root>
+    </>
+  );
+}
+
+export const Page404 = () => <ErrorPage code={404} />;
+export const Page500 = () => <ErrorPage code={500} />;

src/views/ErrorPage/assets/index.ts

@@ -0,0 +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, Ic404GhostDark, Ic500Cone, Ic500Back, Ic500Front, Ic500ConeDark };

src/views/ErrorPage/components/ErrorCode.tsx

@@ -0,0 +1,64 @@
+import { useIsMobile } 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;
+}
+export default function ErrorCode({ code }: ErrorCodeProps) {
+  const isMobile = useIsMobile('428px');
+  const SIZE = {
+    height: 92,
+    icon: 150,
+  };
+
+  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 (
+    <S.ErrorCode {...animationProps} variants={codeVariant}>
+    {code === 404 ? (
+      <>
+        {!isMobile &&
+          <>
+            <Ic404Front height={SIZE.height} />
+            <Ic404Back height={SIZE.height} />
+          </>
+        }
+        {isMobile ? <Ic404GhostDark /> :
+          <S.ErrorIcon {...animationProps} variants={iconVariant}>
+            <Ic404Ghost height={SIZE.icon} />
+          </S.ErrorIcon>
+        }
+        </>
+      ) : (
+      <>
+        {!isMobile &&
+          <>
+            <Ic500Front height={SIZE.height} />
+            <Ic500Back height={SIZE.height} />
+          </>
+        }
+        {isMobile ? <Ic500ConeDark /> :
+          <S.ErrorIcon {...animationProps} variants={iconVariant}>
+            <Ic500Cone height={SIZE.icon} />
+          </S.ErrorIcon>
+        }
+      </>
+      )}
+    </S.ErrorCode>
+  );
+}

src/views/ErrorPage/constants/errorButton.ts

@@ -0,0 +1,6 @@
+const ERROR_BUTTON = {
+  CODE404 : '홈으로 가기',
+  CODE500 : '이전 페이지로 가기',
+};
+
+export default ERROR_BUTTON;

src/views/ErrorPage/constants/errorMessage.ts

@@ -0,0 +1,6 @@
+const ERROR_MESSAGE = {
+  CODE404 : '존재하지 않는 페이지예요',
+  CODE500 : '알 수 없는 오류가 발생했어요',
+};
+
+export default ERROR_MESSAGE;

src/views/ErrorPage/index.tsx

@@ -0,0 +1,3 @@
+import { Page404, Page500 } from './ErrorPage';
+
+export { Page404, Page500 };

src/views/ErrorPage/styles.ts

@@ -0,0 +1,62 @@
+import styled from '@emotion/styled';
+import { motion } from 'framer-motion';
+import Link from 'next/link';
+
+export const Root = styled.main`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+
+  position: relative;
+
+  width: 100%;
+  height: 100vh;
+  padding-bottom: 20vh;
+`;
+export const TopSection = styled.section`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 34px;
+
+  width: 100%;
+`;
+export const ErrorText = styled.p`
+  color: #FCFCFC;
+
+  font-size: calc(24px + 1vw);
+  font-weight: 600;
+  line-height: 150%;
+  letter-spacing: -0.96px;
+`;
+export const ContactLink = styled(Link)`
+  position: fixed;
+  bottom: 17vh;
+
+  color: #FFF;
+  font-size: 24px;
+  font-weight: 600;
+  line-height: 150%; /* 36px */
+  letter-spacing: -0.48px;
+  text-decoration-line: underline;
+
+  cursor: pointer;
+
+  @media (max-width: 428px) {
+    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%;
+`;