diff --git a/src/app/login/KakaoLoginRedirection.tsx b/src/app/login/KakaoLoginRedirection.tsx index 1db0c861..07390ffc 100644 --- a/src/app/login/KakaoLoginRedirection.tsx +++ b/src/app/login/KakaoLoginRedirection.tsx @@ -13,7 +13,7 @@ const KaKaoRedirection = () => { // FIXME: 백엔드 API에 따라 주소 수정 필요 api .post(`kakaoLogin${code}`) - .then((r: Response) => { + .then((_: Response) => { // FIXME: 받은걸 어디에 저장할지 논의 필요 (로그인 저장 방식에 따라 달리짐) // => 로그인 성공 시 로직 추가 // FIXME: 완료 후 이동 (프로세스에 따라 페이지 URL 변경) diff --git a/src/layout/default.tsx b/src/layout/default.tsx index 8cbfe590..7b4b783c 100644 --- a/src/layout/default.tsx +++ b/src/layout/default.tsx @@ -1,8 +1,16 @@ import {Outlet} from "react-router-dom"; +import {css} from "@emotion/react"; export function DefaultLayout() { return ( - <main> + <main css={css` + width: 100vw; + max-width: 480px; + min-height: 100dvh; + box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); + margin: 0 auto; + padding: 0 16px; + `}> <Outlet/> </main> ) diff --git a/src/style/global.css b/src/style/global.css index d80a7496..03afaff8 100644 --- a/src/style/global.css +++ b/src/style/global.css @@ -1,112 +1,4 @@ -:root { - font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; - line-height: 1.5; - font-weight: 400; - - color-scheme: light dark; - color: rgba(255, 255, 255, 0.87); - background-color: #242424; - - font-synthesis: none; - text-rendering: optimizeLegibility; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -a { - font-weight: 500; - color: #646cff; - text-decoration: inherit; -} -a:hover { - color: #535bf2; -} - body { margin: 0; - display: flex; - place-items: center; - min-width: 320px; - min-height: 100vh; -} - -h1 { - font-size: 3.2em; - line-height: 1.1; -} - -button { - border-radius: 8px; - border: 1px solid transparent; - padding: 0.6em 1.2em; - font-size: 1em; - font-weight: 500; - font-family: inherit; - background-color: #1a1a1a; - cursor: pointer; - transition: border-color 0.25s; -} -button:hover { - border-color: #646cff; -} -button:focus, -button:focus-visible { - outline: 4px auto -webkit-focus-ring-color; -} - -@media (prefers-color-scheme: light) { - :root { - color: #213547; - background-color: #ffffff; - } - a:hover { - color: #747bff; - } - button { - background-color: #f9f9f9; - } -} - - -#root { - max-width: 1280px; - margin: 0 auto; - padding: 2rem; - text-align: center; -} - -.logo { - height: 6em; - padding: 1.5em; - will-change: filter; - transition: filter 300ms; -} -.logo:hover { - filter: drop-shadow(0 0 2em #646cffaa); -} -.logo.react:hover { - filter: drop-shadow(0 0 2em #61dafbaa); -} - -@keyframes logo-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } -} - -@media (prefers-reduced-motion: no-preference) { - a:nth-of-type(2) .logo { - animation: logo-spin infinite 20s linear; - } -} - -.card { - padding: 2em; -} - -.read-the-docs { - color: #888; -} + padding: 0; +} \ No newline at end of file