-
Notifications
You must be signed in to change notification settings - Fork 4
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
인증/인가에 따른 라우팅 구현, API 통신 실패 및 존재하지 않는 페이지(Not Found)에 대한 Fallback UI …
…구현 (#343) * chore: (#183) 불필요한 모듈 삭제 * refactor: (#183) 의존성 배열 추가 * feat: (#253) NotFound 컴포넌트 구현 * feat: (#183) PrivateRoute 구현 및 필요한 페이지에 적용 * feat: (#253) 헤더 및 로고 추가 * feat: (#325) Error 컴포넌트 구현 및 소셜 로그인 요청 실패 케이스에 적용 * refactor: (#325) 다시 시도 라는 문구로 수정 * chore: (#325) 불필요한 코드 삭제 * feat: (#325) Error 컴포넌트 구현 및 get 요청 실패 케이스에 적용 * feat: (#325) IconButton에 retry 아이콘 추가 및 Error 컴포넌트 디자인 수정 * refactor: (#325) Redirection 페이지에 로그인 요청에 대한 로딩 및 에러 컴포넌트 적용, errorElement 삭제 * refactor: (#183) 전역 상태 대신 cookie 유무로 navigate하도록 수정 * refactor: (#183) navigate 대신 Navigate로 수정, 권한 관련 props 추가 * feat: (#183) 작성자인 경우에만 글 수정, 투표 통계 페이지 접근하도록 라우팅 설정 * refactor: (#183) Navigate 불필요한 속성 제거, 페이지 접근 불가능한 경우 alert 구현 * refactor: (#183) props에 할당한 값에 대한 타입 단언 대신, 조건부로 대체 컴포넌트 렌더링하도록 수정 * refactor: (#183) Error 컴포넌트 이름 ErrorMessage로 수정, Error 페이지 및 ErrorMessage 컴포넌트 텍스트 수정
- Loading branch information
1 parent
0fd54a2
commit 62daeb6
Showing
20 changed files
with
413 additions
and
27 deletions.
There are no files selected for viewing
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
14 changes: 14 additions & 0 deletions
14
frontend/src/components/common/ErrorMessage/ErrorMessage.stories.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,14 @@ | ||
import type { Meta, StoryObj } from '@storybook/react'; | ||
|
||
import ErrorMessage from '.'; | ||
|
||
const meta: Meta<typeof ErrorMessage> = { | ||
component: ErrorMessage, | ||
}; | ||
|
||
export default meta; | ||
type Story = StoryObj<typeof ErrorMessage>; | ||
|
||
export const Default: Story = { | ||
render: () => <ErrorMessage errorHandler={() => {}} />, | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,21 @@ | ||
import IconButton from '../IconButton'; | ||
import SquareButton from '../SquareButton'; | ||
|
||
import * as S from './style'; | ||
|
||
export default function ErrorMessage({ errorHandler }: { errorHandler: () => void }) { | ||
return ( | ||
<S.Wrapper> | ||
<S.Title>⚠ 잠시 후 다시 시도해주세요.</S.Title> | ||
<S.Description>요청하신 데이터를 불러오는데 실패했습니다.</S.Description> | ||
<S.Direction> | ||
<SquareButton onClick={errorHandler} aria-label="다시 시도" theme="blank"> | ||
<S.RetryText> | ||
<IconButton category="retry" /> | ||
다시 시도 | ||
</S.RetryText> | ||
</SquareButton> | ||
</S.Direction> | ||
</S.Wrapper> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,67 @@ | ||
import { styled } from 'styled-components'; | ||
|
||
import { theme } from '@styles/theme'; | ||
|
||
export const Wrapper = styled.div` | ||
display: flex; | ||
flex-direction: column; | ||
justify-content: center; | ||
align-items: center; | ||
gap: 10px; | ||
position: relative; | ||
`; | ||
|
||
export const HeaderWrapper = styled.div` | ||
width: 100%; | ||
position: fixed; | ||
z-index: ${theme.zIndex.header}; | ||
@media (min-width: ${theme.breakpoint.md}) { | ||
display: none; | ||
} | ||
`; | ||
|
||
export const Title = styled.h1` | ||
width: 90%; | ||
margin-top: 60px; | ||
font-size: 20px; | ||
font-weight: bold; | ||
text-align: center; | ||
`; | ||
|
||
export const Description = styled.p` | ||
width: 90%; | ||
margin: 20px 0; | ||
font: var(--text-body); | ||
text-align: center; | ||
`; | ||
|
||
export const Direction = styled.div` | ||
display: flex; | ||
flex-direction: column; | ||
justify-content: center; | ||
align-items: center; | ||
gap: 10px; | ||
`; | ||
|
||
export const RetryText = styled.p` | ||
display: flex; | ||
justify-content: space-around; | ||
gap: 10px; | ||
padding: 12px; | ||
font: var(--text-body); | ||
font-weight: bold; | ||
`; | ||
|
||
export const ButtonWrapper = styled.div` | ||
width: 120px; | ||
height: 50px; | ||
`; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,14 @@ | ||
import type { Meta, StoryObj } from '@storybook/react'; | ||
|
||
import Error from '.'; | ||
|
||
const meta: Meta<typeof Error> = { | ||
component: Error, | ||
}; | ||
|
||
export default meta; | ||
type Story = StoryObj<typeof Error>; | ||
|
||
export const Default: Story = { | ||
render: () => <Error />, | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,36 @@ | ||
import { useNavigate } from 'react-router-dom'; | ||
|
||
import Layout from '@components/common/Layout'; | ||
import SquareButton from '@components/common/SquareButton'; | ||
|
||
import * as S from './style'; | ||
|
||
export default function Error({ message }: { message?: string }) { | ||
const navigate = useNavigate(); | ||
|
||
return ( | ||
<Layout isSidebarVisible={false}> | ||
<S.Wrapper> | ||
<S.Description>{message ? message : '요청 중 오류가 발생했습니다.'}</S.Description> | ||
<S.ButtonWrapper> | ||
<SquareButton | ||
theme="fill" | ||
onClick={() => { | ||
navigate('/'); | ||
}} | ||
> | ||
홈으로 가기 | ||
</SquareButton> | ||
<SquareButton | ||
theme="gray" | ||
onClick={() => { | ||
window.location.reload(); | ||
}} | ||
> | ||
새로 고침 | ||
</SquareButton> | ||
</S.ButtonWrapper> | ||
</S.Wrapper> | ||
</Layout> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,38 @@ | ||
import { styled } from 'styled-components'; | ||
|
||
import { theme } from '@styles/theme'; | ||
|
||
export const Wrapper = styled.div` | ||
display: flex; | ||
flex-direction: column; | ||
justify-content: center; | ||
align-items: center; | ||
gap: 40px; | ||
position: relative; | ||
`; | ||
|
||
export const HeaderWrapper = styled.div` | ||
width: 100%; | ||
position: fixed; | ||
z-index: ${theme.zIndex.header}; | ||
`; | ||
|
||
export const Description = styled.p` | ||
width: 90%; | ||
margin-top: 60px; | ||
font: var(--text-title); | ||
text-align: center; | ||
`; | ||
|
||
export const ButtonWrapper = styled.div` | ||
display: flex; | ||
justify-content: space-between; | ||
gap: 20px; | ||
width: 280px; | ||
height: 50px; | ||
`; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,14 @@ | ||
import type { Meta, StoryObj } from '@storybook/react'; | ||
|
||
import NotFound from '.'; | ||
|
||
const meta: Meta<typeof NotFound> = { | ||
component: NotFound, | ||
}; | ||
|
||
export default meta; | ||
type Story = StoryObj<typeof NotFound>; | ||
|
||
export const Default: Story = { | ||
render: () => <NotFound />, | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,42 @@ | ||
import { useNavigate } from 'react-router-dom'; | ||
|
||
import IconButton from '@components/common/IconButton'; | ||
import Layout from '@components/common/Layout'; | ||
import LogoButton from '@components/common/LogoButton'; | ||
import NarrowTemplateHeader from '@components/common/NarrowTemplateHeader'; | ||
import SquareButton from '@components/common/SquareButton'; | ||
|
||
import * as S from './style'; | ||
|
||
export default function NotFound() { | ||
const navigate = useNavigate(); | ||
return ( | ||
<Layout isSidebarVisible={false}> | ||
<S.Wrapper> | ||
<S.HeaderWrapper> | ||
<NarrowTemplateHeader> | ||
<IconButton | ||
category="back" | ||
onClick={() => { | ||
navigate(-1); | ||
}} | ||
/> | ||
</NarrowTemplateHeader> | ||
</S.HeaderWrapper> | ||
<S.Title>404</S.Title> | ||
<LogoButton content="icon" style={{ width: '150px', height: '150px' }} /> | ||
<S.Description>요청하신 페이지를 찾을 수 없어요.</S.Description> | ||
<S.ButtonWrapper> | ||
<SquareButton | ||
theme="fill" | ||
onClick={() => { | ||
navigate('/'); | ||
}} | ||
> | ||
홈으로 가기 | ||
</SquareButton> | ||
</S.ButtonWrapper> | ||
</S.Wrapper> | ||
</Layout> | ||
); | ||
} |
Oops, something went wrong.