Skip to content

Commit

Permalink
feature: NotFoundPage 제작 (#102)
Browse files Browse the repository at this point in the history 
* refactor: font-family를 동적으로 변경하도록 수정
- 600 미만이면 'Pretendard-Regular'
- 600 이상이면 'Pretendard'

* feature: NotFound 페이지 제작
- NotFoundIcon 추가

* fix: GradationBackground 에 isDarkMode props 추가

---------

Co-authored-by: wukddang <[email protected]>
  • Loading branch information
@wukdddang
wukdddang and wukdddang authored Nov 8, 2023
1 parent a20bc13 commit 462d656
Show file tree
Hide file tree
Showing 4 changed files with 393 additions and 36 deletions.
256 changes: 256 additions & 0 deletions src/assets/icons/NotFoundIcon.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,256 @@
import { IconProps } from './ExitIcon'

/**
* @param isDarkMode - 다크모드 여부
*/

const NotFoundIcon = ({ isDarkMode }: Pick<IconProps, 'isDarkMode'>) => {
return (
<span
style={{
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
flex: '1',
}}
>
{!isDarkMode ? (
<svg
width={'227'}
height={'281'}
viewBox={'0 0 227 281'}
fill={'none'}
xmlns={'http://www.w3.org/2000/svg'}
>
<path
d={
'M105.716 1.90625C102.35 2.97726 97.607 4.96625 95.006 6.19025C86.438 10.7802 75.881 24.5503 75.881 31.2823C75.881 33.4243 74.81 33.5773 69.761 32.8123C61.499 31.5883 53.849 35.5663 44.975 45.6643C30.593 62.0352 13.304 97.0723 4.42999 127.213C-0.925012 145.573 -1.53701 164.851 3.20599 169.288C4.88899 170.971 30.746 186.883 60.581 204.631C110.153 234.313 115.355 237.067 121.016 236.608L127.136 236.149L132.491 252.367C138.611 271.033 141.977 276.694 146.414 276.694C149.474 276.694 149.627 276.082 148.709 268.585C148.25 264.301 147.332 258.028 146.873 254.815C146.108 249.766 146.261 249.154 149.015 249.154C152.381 249.154 160.031 257.263 160.031 260.629C160.031 264.301 171.812 277.612 176.861 279.754C181.298 281.59 181.91 281.437 184.97 278.377L188.336 275.164L184.664 268.432C181.145 261.7 166.457 246.706 148.709 231.406L139.835 223.756L148.403 211.057C178.85 166.534 203.636 90.9523 194.762 69.8383C192.314 64.1772 190.784 63.2592 173.189 58.8223C172.424 58.6693 171.965 53.7733 172.118 47.8063C172.424 36.1783 170.588 30.2113 163.397 20.2663C151.922 4.50726 124.841 -4.06076 105.716 1.90625ZM140.294 10.3213C150.698 15.2173 157.736 21.7963 162.173 30.6703C166.763 39.8503 167.375 51.0193 163.856 57.9043L161.561 62.3412L167.222 63.8712C170.435 64.7892 173.954 65.5543 175.025 65.5543C178.085 65.5543 177.32 67.0843 168.905 76.2643C162.02 83.6082 154.217 94.6243 155.747 94.6243C156.053 94.6243 159.572 90.3403 163.703 84.9853C175.637 69.8383 181.91 65.5543 186.806 69.2263C189.407 71.0623 189.866 73.2043 189.713 83.4552C189.56 100.591 184.052 122.317 172.424 151.54C160.337 181.987 136.775 221.767 133.103 218.095C132.644 217.636 134.939 213.658 138.305 209.068C161.714 177.703 186.041 115.279 186.041 86.6683C186.041 78.1003 185.582 76.1113 183.134 74.8873C166.763 66.0133 116.12 167.758 115.508 210.598C115.355 219.166 115.814 220.849 119.333 224.521C124.076 229.417 124.229 230.794 120.404 230.794C115.355 230.794 113.366 226.51 113.519 214.882C113.672 202.489 115.814 191.167 121.169 172.807C126.524 155.212 124.535 155.212 119.027 172.96C112.907 192.238 110.612 203.407 110.459 216.412L110.306 227.275L99.596 220.849C93.782 217.177 70.832 203.56 48.8 190.402C26.615 177.244 7.79599 165.004 6.87799 163.168C-1.23101 148.021 27.839 72.4393 51.095 48.2653C59.357 39.5443 63.947 37.5553 70.985 39.5443C79.4 41.8392 80.012 41.5332 81.236 35.4133C83.684 21.9492 92.252 12.3102 105.257 8.02625C114.284 5.11926 131.573 6.19025 140.294 10.3213Z'
}
fill={'black'}
/>
<path
d={
'M125.912 13.6873C140.294 16.4413 152.381 23.9383 158.654 34.1893C160.337 36.6373 161.561 38.0143 161.561 37.0963C161.561 36.3313 159.572 32.3533 157.124 28.5283C151.463 19.5013 137.081 11.8513 126.524 12.1573L119.486 12.3103L125.912 13.6873Z'
}
fill={'black'}
/>
<path
d={
'M101.126 20.8783C93.6289 24.3973 87.2029 31.5883 85.8259 38.0143C85.2139 40.7683 85.0609 43.0633 85.3669 43.2163C85.5199 43.5223 100.667 47.1943 118.721 51.6313C136.775 55.9153 153.146 59.8933 154.982 60.3523C157.889 61.1173 158.501 60.5053 159.419 55.6093C161.561 43.6753 152.993 29.7523 139.223 22.7143C129.125 17.5123 110.153 16.7473 101.126 20.8783ZM134.633 27.4573C142.742 31.4353 146.873 34.8013 150.698 41.2273C153.911 46.2763 154.982 53.3143 152.84 53.3143C148.556 53.6203 92.7109 38.4733 92.7109 37.0963C92.7109 33.2713 99.4429 27.1513 106.175 25.0093C114.896 22.2553 125.759 23.1733 134.633 27.4573Z'
}
fill={'black'}
/>
<path
d={
'M63.9471 47.9592C43.9041 64.7892 20.1891 114.82 14.2221 152.764C12.9981 160.108 14.6811 155.824 21.4131 134.863C32.7351 99.3672 46.5051 71.5212 61.4991 53.9262C70.5261 43.3692 70.9851 41.9922 63.9471 47.9592Z'
}
fill={'black'}
/>
<path
d={
'M86.2853 52.8552C87.3563 53.3142 88.7333 53.1612 89.1923 52.7022C89.8043 52.2432 88.8863 51.7842 87.2033 51.9372C85.5203 51.9372 85.0613 52.3962 86.2853 52.8552Z'
}
fill={'black'}
/>
<path
d={
'M92.4054 54.3852C93.4764 54.8442 94.8534 54.6912 95.3124 54.2322C95.9244 53.7732 95.0064 53.3142 93.3234 53.4672C91.6404 53.4672 91.1814 53.9262 92.4054 54.3852Z'
}
fill={'black'}
/>
<path
d={
'M98.5245 55.9152C99.5955 56.3742 100.973 56.2212 101.432 55.7622C102.044 55.3032 101.126 54.8442 99.4425 54.9972C97.7595 54.9972 97.3005 55.4562 98.5245 55.9152Z'
}
fill={'black'}
/>
<path
d={
'M104.645 57.4452C105.716 57.9042 107.093 57.7512 107.552 57.2922C108.164 56.8332 107.246 56.3742 105.563 56.5272C103.88 56.5272 103.421 56.9862 104.645 57.4452Z'
}
fill={'black'}
/>
<path
d={
'M110.765 58.9753C111.836 59.4343 113.213 59.2813 113.672 58.8223C114.284 58.3633 113.366 57.9043 111.683 58.0573C110 58.0573 109.541 58.5163 110.765 58.9753Z'
}
fill={'black'}
/>
<path
d={
'M122.546 61.8822C126.83 62.9532 131.267 63.8712 132.491 63.8712C133.715 63.8712 131.42 62.8002 127.136 61.5762C123.005 60.5052 118.415 59.5872 117.191 59.5872C115.967 59.5872 118.415 60.6582 122.546 61.8822Z'
}
fill={'black'}
/>
<path
d={
'M136.775 65.0952C137.846 65.5542 139.223 65.4012 139.682 64.9422C140.294 64.4832 139.376 64.0242 137.693 64.1772C136.01 64.1772 135.551 64.6362 136.775 65.0952Z'
}
fill={'black'}
/>
<path
d={
'M25.3915 165.004C33.9595 171.583 82.4605 199.276 94.2415 204.172C109.235 210.598 82.1545 193.309 46.0465 173.572C24.9325 162.097 17.8945 159.19 25.3915 165.004Z'
}
fill={'black'}
/>
<path
d={
'M151.463 222.379C149.933 226.204 152.075 229.264 156.053 229.264C158.042 229.264 160.031 228.193 160.643 226.969C162.02 223.144 159.878 220.084 156.053 220.084C153.911 220.084 151.922 221.155 151.463 222.379Z'
}
fill={'black'}
/>
<path
d={
'M160.949 233.701C160.337 234.466 160.643 235.537 161.408 235.996C162.173 236.608 163.244 236.302 163.703 235.537C164.315 234.772 164.009 233.701 163.244 233.242C162.479 232.63 161.408 232.936 160.949 233.701Z'
}
fill={'black'}
/>
<path
d={
'M172.271 241.504C172.271 244.258 190.325 256.498 198.281 259.099C207.767 262.312 212.663 261.7 213.275 257.416C213.887 253.285 205.319 248.848 186.347 243.646C170.894 239.362 172.271 239.515 172.271 241.504Z'
}
fill={'black'}
/>
<path
d={
'M215.111 242.422C215.111 243.646 215.876 244.258 216.641 243.799C217.559 243.34 218.171 242.269 218.171 241.351C218.171 240.586 217.559 239.974 216.641 239.974C215.876 239.974 215.111 241.045 215.111 242.422Z'
}
fill={'black'}
/>
<path
d={
'M114.131 247.624C114.131 248.389 114.896 249.154 115.661 249.154C116.579 249.154 117.191 248.389 117.191 247.624C117.191 246.706 116.579 246.094 115.661 246.094C114.896 246.094 114.131 246.706 114.131 247.624Z'
}
fill={'black'}
/>
<path
d={
'M221.384 261.394C218.783 262.924 220.313 267.514 223.373 267.514C224.444 267.514 225.821 266.596 226.28 265.372C227.504 262.465 223.985 259.711 221.384 261.394Z'
}
fill={'black'}
/>
</svg>
) : (
<svg
width={'227'}
height={'281'}
viewBox={'0 0 227 281'}
fill={'none'}
xmlns={'http://www.w3.org/2000/svg'}
>
<path
d={
'M105.716 1.90625C102.35 2.97726 97.607 4.96625 95.006 6.19025C86.438 10.7802 75.881 24.5503 75.881 31.2823C75.881 33.4243 74.81 33.5773 69.761 32.8123C61.499 31.5883 53.849 35.5663 44.975 45.6643C30.593 62.0352 13.304 97.0723 4.42999 127.213C-0.925012 145.573 -1.53701 164.851 3.20599 169.288C4.88899 170.971 30.746 186.883 60.581 204.631C110.153 234.313 115.355 237.067 121.016 236.608L127.136 236.149L132.491 252.367C138.611 271.033 141.977 276.694 146.414 276.694C149.474 276.694 149.627 276.082 148.709 268.585C148.25 264.301 147.332 258.028 146.873 254.815C146.108 249.766 146.261 249.154 149.015 249.154C152.381 249.154 160.031 257.263 160.031 260.629C160.031 264.301 171.812 277.612 176.861 279.754C181.298 281.59 181.91 281.437 184.97 278.377L188.336 275.164L184.664 268.432C181.145 261.7 166.457 246.706 148.709 231.406L139.835 223.756L148.403 211.057C178.85 166.534 203.636 90.9523 194.762 69.8383C192.314 64.1772 190.784 63.2592 173.189 58.8223C172.424 58.6693 171.965 53.7733 172.118 47.8063C172.424 36.1783 170.588 30.2113 163.397 20.2663C151.922 4.50726 124.841 -4.06076 105.716 1.90625ZM140.294 10.3213C150.698 15.2173 157.736 21.7963 162.173 30.6703C166.763 39.8503 167.375 51.0193 163.856 57.9043L161.561 62.3412L167.222 63.8712C170.435 64.7892 173.954 65.5543 175.025 65.5543C178.085 65.5543 177.32 67.0843 168.905 76.2643C162.02 83.6082 154.217 94.6243 155.747 94.6243C156.053 94.6243 159.572 90.3403 163.703 84.9853C175.637 69.8383 181.91 65.5543 186.806 69.2263C189.407 71.0623 189.866 73.2043 189.713 83.4552C189.56 100.591 184.052 122.317 172.424 151.54C160.337 181.987 136.775 221.767 133.103 218.095C132.644 217.636 134.939 213.658 138.305 209.068C161.714 177.703 186.041 115.279 186.041 86.6683C186.041 78.1003 185.582 76.1113 183.134 74.8873C166.763 66.0133 116.12 167.758 115.508 210.598C115.355 219.166 115.814 220.849 119.333 224.521C124.076 229.417 124.229 230.794 120.404 230.794C115.355 230.794 113.366 226.51 113.519 214.882C113.672 202.489 115.814 191.167 121.169 172.807C126.524 155.212 124.535 155.212 119.027 172.96C112.907 192.238 110.612 203.407 110.459 216.412L110.306 227.275L99.596 220.849C93.782 217.177 70.832 203.56 48.8 190.402C26.615 177.244 7.79599 165.004 6.87799 163.168C-1.23101 148.021 27.839 72.4393 51.095 48.2653C59.357 39.5443 63.947 37.5553 70.985 39.5443C79.4 41.8392 80.012 41.5332 81.236 35.4133C83.684 21.9492 92.252 12.3102 105.257 8.02625C114.284 5.11926 131.573 6.19025 140.294 10.3213Z'
}
fill={'#FDFDFD'}
/>
<path
d={
'M125.912 13.6873C140.294 16.4413 152.381 23.9383 158.654 34.1893C160.337 36.6373 161.561 38.0143 161.561 37.0963C161.561 36.3313 159.572 32.3533 157.124 28.5283C151.463 19.5013 137.081 11.8513 126.524 12.1573L119.486 12.3103L125.912 13.6873Z'
}
fill={'#FDFDFD'}
/>
<path
d={
'M101.126 20.8783C93.6289 24.3973 87.2029 31.5883 85.8259 38.0143C85.2139 40.7683 85.0609 43.0633 85.3669 43.2163C85.5199 43.5223 100.667 47.1943 118.721 51.6313C136.775 55.9153 153.146 59.8933 154.982 60.3523C157.889 61.1173 158.501 60.5053 159.419 55.6093C161.561 43.6753 152.993 29.7523 139.223 22.7143C129.125 17.5123 110.153 16.7473 101.126 20.8783ZM134.633 27.4573C142.742 31.4353 146.873 34.8013 150.698 41.2273C153.911 46.2763 154.982 53.3143 152.84 53.3143C148.556 53.6203 92.7109 38.4733 92.7109 37.0963C92.7109 33.2713 99.4429 27.1513 106.175 25.0093C114.896 22.2553 125.759 23.1733 134.633 27.4573Z'
}
fill={'#FDFDFD'}
/>
<path
d={
'M63.9471 47.9592C43.9041 64.7892 20.1891 114.82 14.2221 152.764C12.9981 160.108 14.6811 155.824 21.4131 134.863C32.7351 99.3672 46.5051 71.5212 61.4991 53.9262C70.5261 43.3692 70.9851 41.9922 63.9471 47.9592Z'
}
fill={'#FDFDFD'}
/>
<path
d={
'M86.2853 52.8552C87.3563 53.3142 88.7333 53.1612 89.1923 52.7022C89.8043 52.2432 88.8863 51.7842 87.2033 51.9372C85.5203 51.9372 85.0613 52.3962 86.2853 52.8552Z'
}
fill={'#FDFDFD'}
/>
<path
d={
'M92.4054 54.3852C93.4764 54.8442 94.8534 54.6912 95.3124 54.2322C95.9244 53.7732 95.0064 53.3142 93.3234 53.4672C91.6404 53.4672 91.1814 53.9262 92.4054 54.3852Z'
}
fill={'#FDFDFD'}
/>
<path
d={
'M98.5245 55.9152C99.5955 56.3742 100.973 56.2212 101.432 55.7622C102.044 55.3032 101.126 54.8442 99.4425 54.9972C97.7595 54.9972 97.3005 55.4562 98.5245 55.9152Z'
}
fill={'#FDFDFD'}
/>
<path
d={
'M104.645 57.4452C105.716 57.9042 107.093 57.7512 107.552 57.2922C108.164 56.8332 107.246 56.3742 105.563 56.5272C103.88 56.5272 103.421 56.9862 104.645 57.4452Z'
}
fill={'#FDFDFD'}
/>
<path
d={
'M110.765 58.9753C111.836 59.4343 113.213 59.2813 113.672 58.8223C114.284 58.3633 113.366 57.9043 111.683 58.0573C110 58.0573 109.541 58.5163 110.765 58.9753Z'
}
fill={'#FDFDFD'}
/>
<path
d={
'M122.546 61.8822C126.83 62.9532 131.267 63.8712 132.491 63.8712C133.715 63.8712 131.42 62.8002 127.136 61.5762C123.005 60.5052 118.415 59.5872 117.191 59.5872C115.967 59.5872 118.415 60.6582 122.546 61.8822Z'
}
fill={'#FDFDFD'}
/>
<path
d={
'M136.775 65.0952C137.846 65.5542 139.223 65.4012 139.682 64.9422C140.294 64.4832 139.376 64.0242 137.693 64.1772C136.01 64.1772 135.551 64.6362 136.775 65.0952Z'
}
fill={'#FDFDFD'}
/>
<path
d={
'M25.3915 165.004C33.9595 171.583 82.4605 199.276 94.2415 204.172C109.235 210.598 82.1545 193.309 46.0465 173.572C24.9325 162.097 17.8945 159.19 25.3915 165.004Z'
}
fill={'#FDFDFD'}
/>
<path
d={
'M151.463 222.379C149.933 226.204 152.075 229.264 156.053 229.264C158.042 229.264 160.031 228.193 160.643 226.969C162.02 223.144 159.878 220.084 156.053 220.084C153.911 220.084 151.922 221.155 151.463 222.379Z'
}
fill={'#FDFDFD'}
/>
<path
d={
'M160.949 233.701C160.337 234.466 160.643 235.537 161.408 235.996C162.173 236.608 163.244 236.302 163.703 235.537C164.315 234.772 164.009 233.701 163.244 233.242C162.479 232.63 161.408 232.936 160.949 233.701Z'
}
fill={'#FDFDFD'}
/>
<path
d={
'M172.271 241.504C172.271 244.258 190.325 256.498 198.281 259.099C207.767 262.312 212.663 261.7 213.275 257.416C213.887 253.285 205.319 248.848 186.347 243.646C170.894 239.362 172.271 239.515 172.271 241.504Z'
}
fill={'#FDFDFD'}
/>
<path
d={
'M215.111 242.422C215.111 243.646 215.876 244.258 216.641 243.799C217.559 243.34 218.171 242.269 218.171 241.351C218.171 240.586 217.559 239.974 216.641 239.974C215.876 239.974 215.111 241.045 215.111 242.422Z'
}
fill={'#FDFDFD'}
/>
<path
d={
'M114.131 247.624C114.131 248.389 114.896 249.154 115.661 249.154C116.579 249.154 117.191 248.389 117.191 247.624C117.191 246.706 116.579 246.094 115.661 246.094C114.896 246.094 114.131 246.706 114.131 247.624Z'
}
fill={'#FDFDFD'}
/>
<path
d={
'M221.384 261.394C218.783 262.924 220.313 267.514 223.373 267.514C224.444 267.514 225.821 266.596 226.28 265.372C227.504 262.465 223.985 259.711 221.384 261.394Z'
}
fill={'#FDFDFD'}
/>
</svg>
)}
</span>
)
}

export default NotFoundIcon
26 changes: 13 additions & 13 deletions src/components/common/GradationBackground/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 <StyledGradationBackground isDarkMode={isDarkMode}>{children}</StyledGradationBackground>
}

const StyledGradationBackground = styled.div<{
isDarkMode: boolean
}>`
Expand All @@ -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 <StyledGradationBackground isDarkMode={isDarkMode}>{children}</StyledGradationBackground>
}

export default GradationBackground
Loading

0 comments on commit 462d656

Please sign in to comment.