Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[ Feat ] 에러페이지 변경사항 적용 #322

Merged
merged 5 commits into from
Nov 4, 2024
Merged

[ Feat ] 에러페이지 변경사항 적용 #322

Changes from 4 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
8d65814
design: 새 에러페이지 UI
yarimu Oct 29, 2024
7db492d
feat: 홈으로 클릭시 메인(join)으로 이동
yarimu Oct 29, 2024
dee05f1
chore: 함수 명 변경 및 주석 제거
yarimu Oct 29, 2024
0ba19f9
feat: 고객센터, 자주묻는질문 페이지로 이동
yarimu Oct 29, 2024
817449e
refactor: 커서 포인터 추가
yarimu Nov 2, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
53 changes: 44 additions & 9 deletions src/pages/errorPage/ErrorPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,33 @@
import styled from '@emotion/styled';
import { getRole } from '@utils/storage';
import { useNavigate } from 'react-router-dom';
import img_waring from '@assets/images/img_warning.png';
import { FullBtn } from '@components/commons/FullButton';

const URLS = {
customerCenter: 'https://tally.so/r/3XB0Wz',
askedQuestion: 'https://cumbersome-cactus-843.notion.site/f4c466a64a914980a0b2794891790505',
};

const ErrorPage = () => {
const navigate = useNavigate();
const role = getRole();
const navPath = role === 'SENIOR' ? '/promiseList' : '/juniorPromise';

const handleHomeBtn = () => {
localStorage.clear();
navigate('/');
};

const handleOpenUrl = (url: string) => window.open(url);

return (
<Wrapper>
<WarningImg src={img_waring} />
<Meta>오류가 발생했어요</Meta>
<Description onClick={() => navigate(navPath)}>홈으로</Description>
<Description>궁금한 사항이 해결되지 않으셨나요?</Description>
<LinkLayout>
<Link onClick={() => handleOpenUrl(URLS.customerCenter)}>고객센터</Link>
<Link onClick={() => handleOpenUrl(URLS.askedQuestion)}>자주 묻는 질문</Link>
</LinkLayout>
<FullBtn text="홈으로" onClick={() => handleHomeBtn()} />
</Wrapper>
);
};
Expand All @@ -34,19 +50,38 @@ const WarningImg = styled.img`
`;

const Meta = styled.p`
margin-top: 3rem;
margin-top: 2.4rem;

color: ${({ theme }) => theme.colors.grayScaleBG};

${({ theme }) => theme.fonts.Head2_SB_18};
${({ theme }) => theme.fonts.Head1_B_20};
`;

const Description = styled.p`
margin-top: 0.7rem;
margin-top: 0.8rem;

color: ${({ theme }) => theme.colors.grayScaleMG1};
text-align: center;
white-space: nowrap;

${({ theme }) => theme.fonts.Title1_SB_16};
`;

const LinkLayout = styled.div`
display: flex;
gap: 2.4rem;
justify-content: center;
align-items: center;
`;

const Link = styled.p`
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

p1) 요놈에 커서 포인터만 추가해주면 좋을 것 가타요!!

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

넵!! 반영완료 했습니다!!0!

margin-top: 1.6rem;

color: ${({ theme }) => theme.colors.grayScaleMG1};
text-align: center;
text-decoration: underline;
text-underline-offset: 0.3rem;
${({ theme }) => theme.fonts.Title2_R_16};

text-underline-offset: 0.2rem;

${({ theme }) => theme.fonts.Title1_SB_16};
`;
Loading