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

lydiacho · 2024-03-21T12:56:36Z

Summary

closed [SP0] 404, 500 에러페이지 제작 #376
404, 500 에러페이지 퍼블리싱
framer-motion으로 애니메이션 구현
반응형 대응
공통 컴포넌트 RoundButton 수정 후 사용

Screenshot

500

2024-03-21.15.14.08.mov

404

2024-03-21.15.14.57.mov

모바일뷰 (애니메이션없음)

Comment

🚀 구조

views 
    ㄴ ErrorPage
            ㄴ assets : 에러페이지에서 사용하는 svg들
            ㄴ components : SVG들을 에러코드 / 뷰포트에 따라 조건부 렌더링하는 ErrorCode.tsx 컴포넌트 
            ㄴ constants : 에러페이지 버튼 라이팅 (errorButton.ts), 에러 메시지 라이팅 (errorMessage.ts) 
    ㄴ ErrorPage.tsx : 에러페이지 UI 구현 
    ㄴ index.tsx : Page404, Page500 컴포넌트 re-export 
    ㄴ styles.ts

🚀 ErrorPage.tsx

interface ErrorPageProps {
  code: 404 | 500;
}

function ErrorPage({ code }: ErrorPageProps) {
  ...
  return (
      ...
  );
}

export const Page404 = () => <ErrorPage code={404} />;
export const Page500 = () => <ErrorPage code={500} />;

이런식으로 ErrorPage 파일 내에서 공통된 컴포넌트로 에러페이지 UI를 구현한 뒤,
props로 404인지, 500인지를 구분해서 각각의 컴포넌트를 export 시켜주었습니다.

🚀 pages
라우트 페이지인 404.tsx, 500.tsx에서는 ErrorPage > index.tsx에서 re-export 시켜준 컴포넌트를 각각 불러와서 사용합니다

import { Page404 } from '@src/views/ErrorPage';

export default Page404;

import { Page500 } from '@src/views/ErrorPage';

export default Page500;

🚀 asset
에러페이지에 쓰이는 asset (SVG)들은 views > ErrorPage > assets 디렉토리에 넣어놓았습니다.

🚀 constants
404, 500 페이지 UI가 유사하다보니 하나의 ErrorPage로 관리하기 위해 에러 케이스에 따라 달라지는 UX라이팅과 아이콘을 상수 객체로 만들어서 코드에 따라 값을 넣어주도록 구현했습니당

🚀 공통컴포넌트 RoundButton
기존에 쓰이던 404페이지에서만 RoundButton 공통 컴포넌트를 사용해주고 있는 것을 확인하고,
이번 디자인에 맞게 RoundButton을 약간 수정해서 에러페이지에서 사용했습니다.

RoundButton은 배경 흰색, 텍스트 검정색, radius 99짜리 버튼입니다!

🚀 반응형 구현 사항

에러 메시지 폰트 크기 view width에 의존
font-size: calc(24px + 1vw);
500에러페이지 문의하기 버튼 아래 마진 view height에 의존
bottom: 17vh;
이외에 브레이크포인트 428 이하일 경우 (모바일 뷰일 경우) media query 사용하여 버튼 크기 조정
SVG 이미지 크기 view width에 의존 (코멘트로 추가 설명)

🚀 애니메이션
400, 500 에러코드 이미지는 반 쪼개져서 두개의 svg로 관리합니다
그 두개의 svg 를 감싸는 div를 motion.div로 지정해주고,
가운데 튀어나와야하는 아이콘 svg를 별도의 motion.div로 감싸줬습니다

framer-motion 사용법 참고해서
jsx 부분의 가독성을 최대한 살리기 위해 애니메이션 속성을 담은 variant 객체를 따로 만들어서 사용했습니다!

에러코드 반쪼갱이 두개는 gap: 6px -> 159px 로 변화해서 벌어지는 애니메이션 줬고,
가운데 등장하는 아이콘은 opacity : 0 -> 1 로 변화해서 나타나는 애니메이션 줬습니당

export default function ErrorCode({ code }: ErrorCodeProps) {
  ...
  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}>
        ...
        <S.ErrorIcon {...animationProps} variants = { iconVariant }>
          ...
        </S.ErrorIcon>
      ...
    </S.ErrorCode>
  );
}

추가로 자잘한 부연설명은 코멘트로 추가해놓겠습니다!

height · 2024-03-21T12:56:38Z

Link Height tasks by mentioning a task ID in the pull request title or commit messages, or description and comments with the keyword link (e.g. "Link T-123").

💡Tip: You can also use "Close T-X" to automatically close a task when the pull request is merged.

eonseok-jeon

깔끔하네요~
고생하셨습니다 :)

eonseok-jeon · 2024-03-23T04:56:33Z

src/views/ErrorPage/ErrorPage.tsx

+      <Header />
+      <S.Root>
+        <S.TopSection>
+            <ErrorCode code={code}/>


혹시 prettier가 적용이 안 되나요?
ErrorCode에 space가 2칸 더 들어가 있네용~

eonseok-jeon · 2024-03-23T05:04:53Z

src/views/ErrorPage/styles.ts

+export const ContactLink = styled(Link)`
+  position: fixed;
+  bottom: 17vh;
+


bottom: 17vh 이렇게 하니까
웹 창 크기가 작아지면 사진처럼 텍스트가 겹치게 되네요

이전 페이지로 가기 버튼과 문의하기 사이 gap이나 margin 등을 주거나 길이 고정하고 스크롤 생기게 하는 등으로 그 둘 사이가 겹치지 않게 해주면 좋을 거 같아요~

두 콘텐츠 사이의 gap을 잡아주는 것이 아닌, 위 아래 마진을 기준으로 콘텐츠를 배치했던 것은 디자이너분께서 요청주신 부분이었습니다!! 그래서 bottom 값을 pixel 값이 아닌 viewheight 비율로 주어 최대한 문의하기 버튼이 겹칠 가능성을 줄이는 것 정도로 타협을 봤었습니다 ㅎ ㅎ

모쪼록 저도 찝찝했던 부분이라 해당 부분

문의하기 버튼 position: fixed -> absolute (최상위 Wrapper에 종속되도록)

최상위 Wrapper에 min-height 추가 (문의하기 버튼이 겹치기 직전 값으로)

최상위 Wrapper에 overflow : scroll 추가

요 방법으로 대응했습니다! 👍

eonseok-jeon · 2024-03-23T05:05:59Z

src/views/ErrorPage/styles.ts

+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%;
+`;


ErrorCode.tsx에서 사용되는 css 코드인 거 같은데 여기에 넣으신 이유가 따로 있으실까요?
기존의 다른 component 요소들을 보니 각각의 style.ts를 가지고 있는 거 같아서요

너무 작은 컴포넌트를 위한 스타일 파일을 별도로 만들어주기 싫고, 그렇다고 한 파일 내에 스타일을 정의해주고 싶지는 않아서 선택한 방식인데, 일관성을 위해 기존의 컨벤션에 맞춰서 파일분리하겠습니다!

오프라인으로 논의한 것처럼 컴포넌트명.style.ts 파일 생성해서 분리해주겠습니다 👍

lydiacho · 2024-03-21T13:16:21Z

src/views/ErrorPage/components/ErrorCode.tsx

+  code: 404 | 500;
+}
+export default function ErrorCode({ code }: ErrorCodeProps) {
+  const isMobile = useIsMobile('428px');


모바일 뷰를 대응해야 하는데 다른 컴포넌트들 처럼 css로 스타일링하는게 아닌 svg 컴포넌트를 조건부로 렌더링해야 하는 케이스이기 때문에 media-query를 사용하기 부적절해서 기존에 만들어져있던 공통 훅인 useDevice를 활용해보았습니당

useIsMobile 안에 브레이크포인트를 넣어주면 isMobile boolean 값으로 브레이크포인트 이상 / 이하에 따라 조건부 렌더링을 해줄 수 있어요!

lydiacho · 2024-03-21T13:20:28Z

src/views/ErrorPage/components/ErrorCode.tsx

+  const SIZE = {
+    height: 92,
+    icon: 150,
+  };


이친구들은 굳이 왜 상수화를 했냐... 하는 의문이 드실텐데

기존에는 768px 이상 / 이하에 따라 모든 svg들의 크기를 조절해야했어요.
그러기 위해 모든 svg 파일 내부에 width, height 값을 지워주고 viewBox만 남겨놓고 (width, height 안지워주면 직접 설정해줄 경우 아이콘이 축소되는게 아니라 잘리게 됨)
이곳에서 svg 불러올때 width, height 값을 반응형에 따라 설정해주려고 이렇게 따로 분리시켜놨었어요

근데 이후에 모바일뷰를 제외하고는 아이콘 사이즈를 모두 통일하는 것으로 디자인이 바뀌어서
쓸모없어졌지만,, 추후 브레이크 포인트가 추가될 가능성을 열어놓고 그냥 냅두었습니다

해당 커밋 보시면 isTablet 값에 따라 사이즈를 조정해준 방식 확인하실 수 있습니다 !

lydiacho · 2024-03-23T10:00:20Z

src/views/ErrorPage/styles.ts

+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%;
+`;


너무 작은 컴포넌트를 위한 스타일 파일을 별도로 만들어주기 싫고, 그렇다고 한 파일 내에 스타일을 정의해주고 싶지는 않아서 선택한 방식인데, 일관성을 위해 기존의 컨벤션에 맞춰서 파일분리하겠습니다!

오프라인으로 논의한 것처럼 컴포넌트명.style.ts 파일 생성해서 분리해주겠습니다 👍

lydiacho · 2024-03-23T16:39:49Z

src/views/ErrorPage/styles.ts

+export const ContactLink = styled(Link)`
+  position: fixed;
+  bottom: 17vh;
+


두 콘텐츠 사이의 gap을 잡아주는 것이 아닌, 위 아래 마진을 기준으로 콘텐츠를 배치했던 것은 디자이너분께서 요청주신 부분이었습니다!! 그래서 bottom 값을 pixel 값이 아닌 viewheight 비율로 주어 최대한 문의하기 버튼이 겹칠 가능성을 줄이는 것 정도로 타협을 봤었습니다 ㅎ ㅎ

모쪼록 저도 찝찝했던 부분이라 해당 부분

문의하기 버튼 position: fixed -> absolute (최상위 Wrapper에 종속되도록)

최상위 Wrapper에 min-height 추가 (문의하기 버튼이 겹치기 직전 값으로)

최상위 Wrapper에 overflow : scroll 추가

요 방법으로 대응했습니다! 👍

eonseok-jeon · 2024-08-30T04:59:22Z

음? 방금 수정하신 건가요?

lydiacho added 16 commits March 20, 2024 20:50

fix: Roundbutton에서 사용하지 않는 isReverse prop 삭제

e9d9368

fix: RoundButton 공통컴포넌트 수정

3e1c365

feat: 404 페이지 퍼블리싱

ca02867

feat: 에러페이지 에셋 상수화

4e9bf13

feat: 에러페이지 라이팅 상수화

090fbd3

feat: 에러코드 상수 분리

919f0ee

feat: ErrorPage로 404, 500 재사용

35d4b9e

design: 문의하기 버튼 추가

4773b42

feat: 문의하기 next/link로 수정 및 링크 연결

6881ab1

feat: 에러코드svg 상수파일 -> 컴포넌트로 변경

7098f14

feat: 에러페이지 assets 반응형 대비

b9da14c

feat: 에러페이지 반응형 작업

6df42d2

feat: 에러코드 컴포넌트 반응형 작업

778c9d5

chore: 에러코드 Wrapper를 ErrorPage->ErrorCode로 이동

4b75d5f

feat: 에러페이지 애니메이션 작업

e06df57

design: 반응형 기준 수정 및 ErrorCode 코드 정리

7a357b6

lydiacho requested a review from eonseok-jeon March 21, 2024 12:56

lydiacho self-assigned this Mar 21, 2024

pull-request-size bot added the size/L label Mar 21, 2024

fix: 모바일뷰에서 아이콘 애니메이션 해제

2cdb9f4

eonseok-jeon approved these changes Mar 23, 2024

View reviewed changes

lydiacho added 4 commits March 24, 2024 01:31

fix: 문의하기 버튼 겹치지 않도록 min-height 추가

2755c54

fix: ErrorCode 컴포넌트에 쓰이는 스타일 파일 분리

418429a

style: code formatter prettier 적용

a76cd00

chore: 34기 모집배너 컴포넌트 제거

eecee68

lydiacho merged commit c56d3e9 into develop Mar 23, 2024
1 check passed

lydiacho deleted the feat/#376_error branch March 23, 2024 17:09

lydiacho added this to the 4기 milestone Mar 24, 2024

lydiacho commented Aug 30, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

lydiacho commented Mar 21, 2024 •

edited

Loading

height bot commented Mar 21, 2024

eonseok-jeon left a comment

eonseok-jeon Mar 23, 2024 •

edited

Loading

eonseok-jeon Mar 23, 2024 •

edited

Loading

lydiacho Mar 23, 2024

eonseok-jeon Mar 23, 2024

lydiacho Mar 23, 2024

lydiacho Mar 21, 2024

lydiacho Mar 21, 2024

lydiacho Mar 23, 2024

lydiacho Mar 23, 2024

eonseok-jeon commented Aug 30, 2024

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

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

Conversation

lydiacho commented Mar 21, 2024 • edited Loading

Summary

Screenshot

Comment

height bot commented Mar 21, 2024

eonseok-jeon left a comment

Choose a reason for hiding this comment

eonseok-jeon Mar 23, 2024 • edited Loading

Choose a reason for hiding this comment

eonseok-jeon Mar 23, 2024 • edited Loading

Choose a reason for hiding this comment

lydiacho Mar 23, 2024

Choose a reason for hiding this comment

eonseok-jeon Mar 23, 2024

Choose a reason for hiding this comment

lydiacho Mar 23, 2024

Choose a reason for hiding this comment

lydiacho Mar 21, 2024

Choose a reason for hiding this comment

lydiacho Mar 21, 2024

Choose a reason for hiding this comment

lydiacho Mar 23, 2024

Choose a reason for hiding this comment

lydiacho Mar 23, 2024

Choose a reason for hiding this comment

eonseok-jeon commented Aug 30, 2024

lydiacho commented Mar 21, 2024 •

edited

Loading

eonseok-jeon Mar 23, 2024 •

edited

Loading

eonseok-jeon Mar 23, 2024 •

edited

Loading