Skip to content

Commit

Permalink
feat(web/components): Error, react-query가 포함된 ErrorBoundary 컴포넌트 추가 (#42
Browse files Browse the repository at this point in the history
)

* chore(eslint-config-favolink): 함수 호출 간의 공백 규칙 추가

* feat(web/components): react-query를 감싸는 ErrorBoundary 추가

* feat(web/components): 임시 Error 컴포넌트 추가
  • Loading branch information
sukvvon authored Feb 15, 2024
1 parent 5655771 commit 5856938
Show file tree
Hide file tree
Showing 4 changed files with 92 additions and 0 deletions.
26 changes: 26 additions & 0 deletions apps/web/src/components/Error/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
import type { AxiosError } from 'axios';
import type { FallbackProps } from 'react-error-boundary';
import * as styles from './styles.css';

type ErrorProps = Omit<FallbackProps, 'error'> & {
error: AxiosError;
};

export default function Error(props: ErrorProps) {
const { resetErrorBoundary, error } = props;

return (
<div className={styles.center}>
<h1 className={styles.title}>{error.response?.status}</h1>
<p className={styles.description}>{error.message}</p>
<button
className={styles.button}
onClick={() => {
resetErrorBoundary();
}}
>
다시 시도
</button>
</div>
);
}
46 changes: 46 additions & 0 deletions apps/web/src/components/Error/styles.css.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
import { style } from '@vanilla-extract/css';

export const container = style({
height: '100vh',
});

export const h1 = style({
fontWeight: 'bold',
fontSize: 28,
lineHeight: '39px',
});

export const normalFont = style({
color: 'black',
fontSize: 'medium',
});

export const center = style([
container,
{
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
gap: 10,
},
]);

export const baseButton = style({
padding: '0.5rem',
outline: 'none',
border: 'unset',
borderRadius: 10,
backgroundColor: 'lightgray',
});

export const title = style([
h1,
{
color: 'black',
},
]);

export const button = style([baseButton, normalFont]);

export const description = style([normalFont]);
19 changes: 19 additions & 0 deletions apps/web/src/components/ErrorBoundary.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
import { QueryErrorResetBoundary } from '@tanstack/react-query';
import {
ErrorBoundary as ReactErrorBoundary,
type ErrorBoundaryProps as ReactErrorBoundaryProps,
} from 'react-error-boundary';

export default function ErrorBoundary(props: ReactErrorBoundaryProps) {
const { children, ...restProps } = props;

return (
<QueryErrorResetBoundary>
{({ reset }) => (
<ReactErrorBoundary {...restProps} onReset={reset}>
{children}
</ReactErrorBoundary>
)}
</QueryErrorResetBoundary>
);
}
1 change: 1 addition & 0 deletions packages/eslint-config-favolink/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,7 @@ module.exports = {
'@stylistic/padding-line-between-statements': [
'error',
{ blankLine: 'always', prev: '*', next: '*' },
{ blankLine: 'any', prev: 'expression', next: 'expression' },
{
blankLine: 'any',
prev: ['const', 'let', 'var'],
Expand Down

0 comments on commit 5856938

Please sign in to comment.