diff --git a/src/assets/icons/NotFoundIcon.tsx b/src/assets/icons/NotFoundIcon.tsx new file mode 100644 index 00000000..e421b0a6 --- /dev/null +++ b/src/assets/icons/NotFoundIcon.tsx @@ -0,0 +1,256 @@ +import { IconProps } from './ExitIcon' + +/** + * @param isDarkMode - 다크모드 여부 + */ + +const NotFoundIcon = ({ isDarkMode }: Pick) => { + return ( + + {!isDarkMode ? ( + + + + + + + + + + + + + + + + + + + + + ) : ( + + + + + + + + + + + + + + + + + + + + + )} + + ) +} + +export default NotFoundIcon diff --git a/src/components/common/GradationBackground/index.tsx b/src/components/common/GradationBackground/index.tsx index 5b4069ec..97820692 100644 --- a/src/components/common/GradationBackground/index.tsx +++ b/src/components/common/GradationBackground/index.tsx @@ -2,6 +2,19 @@ import styled from '@emotion/styled' import { palette } from '@/styles/palette' +type GradationBackgroundProps = { + children: React.ReactNode + isDarkMode: boolean +} + +/** + * @param children - 렌더링 할 하위 컴포넌트 + * @param isDarkMode - 다크모드 여부 + */ +const GradationBackground = ({ children, isDarkMode }: GradationBackgroundProps) => { + return {children} +} + const StyledGradationBackground = styled.div<{ isDarkMode: boolean }>` @@ -15,17 +28,4 @@ const StyledGradationBackground = styled.div<{ flex-direction: column; ` -type GradationBackgroundProps = { - children: React.ReactNode - isDarkMode: boolean -} - -/** - * @param children - 자식 컴포넌트 - * @param isDarkMode - 다크모드 여부 - */ -const GradationBackground = ({ children, isDarkMode }: GradationBackgroundProps) => { - return {children} -} - export default GradationBackground diff --git a/src/pages/notFound/NotFound.tsx b/src/pages/notFound/NotFound.tsx index 5ad5d5ce..46518bd1 100644 --- a/src/pages/notFound/NotFound.tsx +++ b/src/pages/notFound/NotFound.tsx @@ -1,5 +1,100 @@ +import styled from '@emotion/styled' + +import NotFoundIcon from '@/assets/icons/NotFoundIcon' +import NormalButton from '@/components/common/Buttons/NormalButton' +import GradationBackground from '@/components/common/GradationBackground' +import Spacing from '@/components/common/Spacing' +import { Text } from '@/components/common/Text' +import { palette } from '@/styles/palette' + const NotFoundPage = () => { - return
{'NotFoundPage'}
+ // TODO: zustand로 darkMode 상태 받기 + const isDarkMode = true + + return ( + + + + + + + {'404'} + + {'앗, 현재 페이지를 찾을 수 없어요! 😭'} + + + + + + {'홈으로 돌아가기'} + + + + + + + ) } +const StyledNotFoundPage = styled.div` + display: flex; + flex-direction: column; +` + +const StyledNotFoundPageBackground = styled.div<{ + isDarkMode: boolean +}>` + background-color: ${({ isDarkMode }) => (isDarkMode ? palette.GRAY700 : palette.WHITE)}; + height: 100%; + border-top-right-radius: 20px; + border-top-left-radius: 20px; + display: flex; + flex-direction: column; + justify-content: space-between; +` + +const StyledNotFoundPageHeaderContent = styled(Text)<{ isDarkMode: boolean }>` + text-align: center; + color: ${({ isDarkMode }) => (isDarkMode ? palette.DARK_WHITE : palette.BLACK)}; + + @media (max-width: 280px) { + font-size: 4rem; + } +` + +const StyledNotFoundPageMainContent = styled.div` + text-align: center; + flex: 1; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + + @media (max-width: 280px) { + font-size: 0.875rem; + } +` + +const StyledNotFoundIconWrapper = styled.div` + display: flex; + flex: 1; + flex-direction: column; + justify-content: center; + align-items: center; +` + export default NotFoundPage diff --git a/src/styles/typo.ts b/src/styles/typo.ts index 9dabead3..64a06477 100644 --- a/src/styles/typo.ts +++ b/src/styles/typo.ts @@ -2,69 +2,75 @@ import { css } from '@emotion/react' export const calcRem = (px: number) => `${px / 16}rem` export const typo = { - Body_32: (fontWeight: number = 600, letterSpacing?: number) => css` - font-family: 'Pretendard-Regular'; + Body_72: (fontWeight = 600, letterSpacing?: number) => css` + font-family: ${fontWeight >= 600 ? 'Pretendard' : 'Pretendard-Regular'}; + font-size: ${calcRem(72)}; + font-weight: ${fontWeight}; + letter-spacing: ${letterSpacing}px; + `, + Body_32: (fontWeight = 600, letterSpacing?: number) => css` + font-family: ${fontWeight >= 600 ? 'Pretendard' : 'Pretendard-Regular'}; font-size: ${calcRem(32)}; font-weight: ${fontWeight}; letter-spacing: ${letterSpacing}px; `, - Body_24: (fontWeight: number = 500, letterSpacing?: number) => css` - font-family: 'Pretendard-Regular'; + Body_24: (fontWeight = 500, letterSpacing?: number) => css` + font-family: ${fontWeight >= 600 ? 'Pretendard' : 'Pretendard-Regular'}; font-size: ${calcRem(24)}; font-weight: ${fontWeight}; letter-spacing: ${letterSpacing}px; `, - Body_22: (fontWeight: number = 500, letterSpacing?: number) => css` - font-family: 'Pretendard-Regular'; + Body_22: (fontWeight = 500, letterSpacing?: number) => css` + font-family: ${fontWeight >= 600 ? 'Pretendard' : 'Pretendard-Regular'}; font-size: ${calcRem(22)}; font-weight: ${fontWeight}; letter-spacing: ${letterSpacing}px; `, - Body_20: (fontWeight: number = 500, letterSpacing?: number) => css` - font-family: 'Pretendard-Regular'; + Body_20: (fontWeight = 500, letterSpacing?: number) => css` + font-family: ${fontWeight >= 600 ? 'Pretendard' : 'Pretendard-Regular'}; font-size: ${calcRem(20)}; font-weight: ${fontWeight}; letter-spacing: ${letterSpacing}px; `, - Body_18: (fontWeight: number = 500, letterSpacing?: number) => css` - font-family: 'Pretendard-Regular'; + Body_18: (fontWeight = 500, letterSpacing?: number) => css` + font-family: ${fontWeight >= 600 ? 'Pretendard' : 'Pretendard-Regular'}; font-size: ${calcRem(18)}; font-weight: ${fontWeight}; letter-spacing: ${letterSpacing}px; `, - Body_16: (fontWeight: number = 400, letterSpacing?: number) => css` - font-family: 'Pretendard-Regular'; + Body_16: (fontWeight = 400, letterSpacing?: number) => css` + font-family: ${fontWeight >= 600 ? 'Pretendard' : 'Pretendard-Regular'}; font-size: ${calcRem(16)}; font-weight: ${fontWeight}; letter-spacing: ${letterSpacing}px; `, - Body_14: (fontWeight: number = 400, letterSpacing?: number) => css` - font-family: 'Pretendard-Regular'; + Body_14: (fontWeight = 400, letterSpacing?: number) => css` + font-family: ${fontWeight >= 600 ? 'Pretendard' : 'Pretendard-Regular'}; font-size: ${calcRem(14)}; font-weight: ${fontWeight}; letter-spacing: ${letterSpacing}px; `, - Body_12: (fontWeight: number = 400, letterSpacing?: number) => css` - font-family: 'Pretendard-Regular'; + Body_12: (fontWeight = 400, letterSpacing?: number) => css` + font-family: ${fontWeight >= 600 ? 'Pretendard' : 'Pretendard-Regular'}; font-size: ${calcRem(12)}; font-weight: ${fontWeight}; letter-spacing: ${letterSpacing}px; `, - Body_10: (fontWeight: number = 400, letterSpacing?: number) => css` - font-family: 'Pretendard-Regular'; + Body_10: (fontWeight = 400, letterSpacing?: number) => css` + font-family: ${fontWeight >= 600 ? 'Pretendard' : 'Pretendard-Regular'}; font-size: ${calcRem(10)}; font-weight: ${fontWeight}; letter-spacing: ${letterSpacing}px; `, - Caption_11: (fontWeight: number = 400, letterSpacing?: number) => css` - font-family: 'Pretendard-Regular'; + Caption_11: (fontWeight = 400, letterSpacing?: number) => css` + font-family: ${fontWeight >= 600 ? 'Pretendard' : 'Pretendard-Regular'}; font-size: ${calcRem(11)}; font-weight: ${fontWeight}; letter-spacing: ${letterSpacing}px; `, - Caption_9: (fontWeight: number = 500, letterSpacing?: number) => css` - font-family: 'Pretendard-Regular'; + Caption_9: (fontWeight = 500, letterSpacing?: number) => css` + font-family: ${fontWeight >= 600 ? 'Pretendard' : 'Pretendard-Regular'}; font-size: ${calcRem(9)}; font-weight: ${fontWeight}; letter-spacing: ${letterSpacing}px;