jsx import { css , jsx } from "@emotion/core" ; import { useCallback } from "react" ; import { useHistory } from "react-router-dom" ; import { OutlineButton } from "../common/OutlineButton" ; export const Logo404 = ( props ) => ( < svg width = "461" height = "366" viewBox = "0 0 461 366" fill = "none" xmlns = "http://www.w3.org/2000/svg" { ... props } > < g clip - path = "url(#clip0)" > < path d = "M246.332 77.535c16.713 0 30.262-13.55 30.262-30.265 0-16.716-13.549-30.266-30.262-30.266s-30.261 13.55-30.261 30.265 13.548 30.266 30.261 30.266z" fill = "#FF6584" / > < path d = "M155.215 192.927c0 58.455-34.746 78.865-77.608 78.865C34.746 271.792 0 251.382 0 192.927 0 134.473 77.607 60.11 77.607 60.11s77.608 74.363 77.608 132.817z" fill = "#F2F2F2" / > < path d = "M74.78 262.85l.795-48.921 33.078-60.522L75.7 206.255l.357-21.997 22.797-43.788-22.703 37.967.643-39.563 24.412-34.86-24.311 28.639.401-72.543-2.523 96.034.208-3.962-24.82-37.995 24.422 45.601-2.313 44.184-.069-1.173-28.613-39.984 28.527 44.127-.29 5.526-.051.083.023.454-5.867 112.099h7.84l.94-57.901 28.456-44.02-28.385 39.667z" fill = "#3F3D56" / > < path d = "M385.195 162.26c0 71.413-42.448 96.347-94.811 96.347-52.363 0-94.811-24.934-94.811-96.347C195.573 90.848 290.384 0 290.384 0s94.811 90.848 94.811 162.26z" fill = "#F2F2F2" / > < path d = "M286.93 247.683l.971-59.765 40.411-73.939-40.259 64.563.437-26.873 27.851-53.494-27.736 46.383.785-48.333 29.824-42.588-29.7 34.988.49-88.625-3.083 117.323.254-4.84-30.322-46.418 29.836 55.709-2.826 53.979-.084-1.432-34.955-48.849 34.85 53.91-.354 6.75-.063.102.029.554-7.168 136.95h9.576l1.15-70.737 34.764-53.778-34.678 48.46z" fill = "#3F3D56" / > < path d = "M189.119 329.114c80.431 0 145.634-2.329 145.634-5.202 0-2.872-65.203-5.201-145.634-5.201-80.431 0-145.634 2.329-145.634 5.201 0 2.873 65.203 5.202 145.634 5.202zM393.857 366c37.082 0 67.143-2.858 67.143-6.384 0-3.526-30.061-6.384-67.143-6.384s-67.143 2.858-67.143 6.384c0 3.526 30.061 6.384 67.143 6.384z" fill = "#3F3D56" / > < path d = "M197.63 164.074h-17.022v159.838h17.022V164.074z" fill = "#2F2E41" / > < path d = "M267.137 200.487H162.64v-29.319h104.497l30.262 14.659-30.262 14.66z" fill = "#3F3D56" / > < path opacity = ".1" d = "M267.137 198.123H162.64v2.364h104.497l30.262-14.66-2.441-1.182-27.821 13.478z" fill = "#000" / > < path d = "M111.574 239.264h104.497v-29.319H111.574l-30.262 14.66 30.262 14.659z" fill = "#3F3D56" / > < path opacity = ".1" d = "M83.753 223.423l-2.44 1.182 30.261 14.659h104.497V236.9H111.574l-27.821-13.477z" fill = "#000" / > < path d = "M239.24 176.842h-17.968v17.97h17.968v-17.97zM148.928 233.59a8.985 8.985 0 008.984-8.985 8.984 8.984 0 10-17.968 0 8.985 8.985 0 008.984 8.985z" fill = "#6C63FF" / > < path d = "M189.119 190.083a5.201 5.201 0 100-10.404 5.201 5.201 0 000 10.404zM189.119 228.861a5.201 5.201 0 005.201-5.202 5.201 5.201 0 10-10.402 0 5.202 5.202 0 005.201 5.202z" fill = "#2F2E41" / > < path d = "M154.129 306.101c0 10.626-6.315 14.336-14.106 14.336a24.328 24.328 0 01-1.613-.055c-7.031-.498-12.494-4.399-12.494-14.281 0-10.226 13.067-23.13 14.048-24.085l.002-.002.057-.055s14.106 13.517 14.106 24.142z" fill = "#6C63FF" / > < path d = "M139.509 318.811l5.159-7.21-5.172 8.002-.014.828a23.482 23.482 0 01-1.072-.049l.556-10.631-.004-.082.009-.016.053-1.004-5.185-8.021 5.201 7.268.012.213.42-8.032-4.439-8.288 4.494 6.879.437-16.652.002-.057v.055l-.073 13.131 4.419-5.205-4.437 6.336-.117 7.192 4.126-6.902-4.143 7.96-.066 3.998 5.991-9.606-6.013 11.001-.144 8.892z" fill = "#3F3D56" / > < path d = "M372.126 347.989s-6.695 5.639-10.219 5.286c-3.523-.352-10.218-.352-7.399 3.525 2.818 3.876 14.446 5.99 19.38 6.343 4.933.352 15.856.705 15.151-1.41-.704-2.114-1.409-11.982-4.228-12.686-2.819-.705-12.685-1.058-12.685-1.058zM410.551 342.453s-4.933 7.231-8.422 7.839c-3.489.607-9.937 2.407-6.181 5.383 3.757 2.976 15.526 1.887 20.372.901 4.846-.987 15.462-3.583 14.215-5.431-1.247-1.847-4.577-11.162-7.482-11.083-2.904.079-12.502 2.391-12.502 2.391z" fill = "#575A89" / > < path d = "M368.204 239.046s-4.535 31.061-3.478 36.7c1.057 5.638 1.762 14.449 1.762 14.449s-.705 7.4 0 10.924c.705 3.524 4.933 37.003 4.933 37.708 0 .705-.705 2.819 0 4.581.705 1.762 2.114.352 0 3.172-2.114 2.819-.705 3.524-.352 3.524.352 0 14.094 1.409 14.799 0 .705-1.41-.352-1.762 0-3.524s.705-2.115 1.409-2.467c.705-.353 2.115.352 1.057-1.41-1.057-1.762-3.523-3.876-2.818-4.933.704-1.058-.353-8.811-.353-8.811s-.705-17.268-1.057-27.84 3.171-21.497 3.171-21.497a40.327 40.327 0 009.162 23.612c9.161 10.924 13.742 31.364 13.742 31.364s2.114 3.172 1.057 5.991c-1.057 2.819-4.228 1.057-1.057 2.819s14.095-.705 15.152-1.762c1.057-1.057-1.41-2.467-.705-5.286.705-2.819 3.524-2.115 1.057-3.524-2.466-1.41-3.171-1.057-3.171-2.467 0-1.41-6.343-32.069-16.209-40.879l-.705-32.069s8.809-22.554-.352-24.669c-9.162-2.114-37.044 6.294-37.044 6.294z" fill = "#2F2E41" / > < path d = "M374.592 155.575s5.99 14.801 4.581 16.916c-1.409 2.114 17.266-7.048 17.266-7.048s-5.99-14.802-5.99-16.564c0-1.762-15.857 6.696-15.857 6.696z" fill = "#A0616A" / > < path d = "M378.997 159.275c7.2 0 13.037-5.837 13.037-13.039 0-7.201-5.837-13.039-13.037-13.039-7.201 0-13.038 5.838-13.038 13.039 0 7.202 5.837 13.039 13.038 13.039z" fill = "#A0616A" / > < path d = "M396.439 159.452s-9.162-1.058-13.742 4.581c-4.581 5.638-5.286 7.048-5.286 7.048s-10.923 17.62-8.809 26.431c.515.795.986 1.619 1.409 2.466.705 1.41.705 21.145 0 24.317-.704 3.171-1.409 4.228-.704 8.81.704 4.581-5.638 11.982 1.762 13.391 7.399 1.41 13.037.353 15.504-2.819 2.466-3.172.352-5.286 8.104-5.286 7.752 0 12.685-5.286 12.685-5.286s-3.876-4.229-2.466-4.934c1.409-.705 0-2.467-.705-4.229s-.705-3.172.352-3.172.353-.704-.352-2.466c-.705-1.762 12.333-32.069 4.581-40.88-7.752-8.81-11.628-13.743-11.628-13.743s1.409-5.287-.705-4.229z" fill = "#6C63FF" / > < path d = "M376.354 192.93v15.506l-11.276 37.355s-7.399 19.383 0 19.383c7.4 0 7.004-18.5 7.004-18.5l15.9-28.018s6.343-22.202 5.638-23.964c-.705-1.762-17.266-1.762-17.266-1.762z" fill = "#A0616A" / > < path d = "M382.344 170.024s-10.571 4.229-7.752 15.506c2.819 11.277 0 10.924 0 10.924s14.447-1.409 19.028 1.762l1.057-4.228s4.228-24.317-12.333-23.964z" fill = "#6C63FF" / > < path d = "M374.545 136.448a5.206 5.206 0 01-4.886-.761c-1.329-1.094-1.892-3.114-1.111-4.647.675-1.324 2.118-2.051 3.502-2.593a32.567 32.567 0 019.537-2.154c1.559-.111 3.196-.093 4.587.619.689.353 1.286.861 1.968 1.226 1.253.671 2.712.821 4.066 1.253a10.17 10.17 0 016.221 5.718c.368.912.625 1.865.766 2.839.405 2.665.122 5.39-.822 7.915-1.502 3.999-4.653 7.496-4.83 11.765-1.929-1.399-2.644-3.924-4.189-5.738a7.798 7.798 0 00-4.453-2.583 2.493 2.493 0 01-1.328-.484 2.139 2.139 0 01-.485-1.132l-1.319-6.23c-.269-1.268-.608-2.65-1.65-3.42a4.992 4.992 0 00-2.15-.758 33.699 33.699 0 00-5.509-.502" fill = "#2F2E41" / > < /g> < defs > < clipPath id = "clip0" > < path fill = "#fff" d = "M0 0h461v366H0z" / > < /clipPath> < /defs> < /svg>); export const NotFound = ( ) => { const history = useHistory ( ) ; const onClick = useCallback ( ( ) => { history . push ( "/" ) ; } , [ history ] ) ; return ( < div css = { css `
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-top: 74px;
      ` } > < Logo404 css = { css `
          padding-bottom: 55px;
        ` } /> < div css = { css `
          padding-bottom: 19px;
          font-style: normal;
          font-weight: 300;
          font-size: 36px;
          line-height: 48px;
          letter-spacing: -0.04em;

          color: #6c63ff;
        ` } > 찾을 수 없는 페이지입니다 . < /div> < div css = { css `
          display: flex;
          flex-direction: column;
          align-items: center;
          font-style: normal;
          font-weight: normal;
          font-size: 18px;
          line-height: 24px;
          text-align: center;
          letter-spacing: -0.04em;

          padding-bottom: 54px;

          color: #3f3d56;
        ` } > < div > 요청하신 페이지가 사라졌거나 , < /div> < div > 잘못된 경로로 접근하신 것 같습니다 . < /div> < /div> < OutlineButton onClick = { onClick } css = { css `
          padding: 9px 33px;
          color: #6c63ff;
          border-color: #6c63ff;
          border-radius: 8px;
        ` } > 처음으로 < /OutlineButton> < /div>); } ;