diff --git a/typing-app/package.json b/typing-app/package.json index c8ee3338..202126f5 100644 --- a/typing-app/package.json +++ b/typing-app/package.json @@ -47,6 +47,7 @@ "jest-environment-jsdom": "^29.7.0", "openapi-typescript": "6.7.6", "postcss": "^8.4.49", + "sass": "^1.85.0", "tailwindcss": "^3.4.16", "typescript": "^5.7.2" }, diff --git a/typing-app/src/assets/images/background.png b/typing-app/public/img/background.png similarity index 100% rename from typing-app/src/assets/images/background.png rename to typing-app/public/img/background.png diff --git a/typing-app/public/img/user_default.png b/typing-app/public/img/user_default.png new file mode 100644 index 00000000..698ec1f6 Binary files /dev/null and b/typing-app/public/img/user_default.png differ diff --git a/typing-app/src/app/globals.css b/typing-app/src/app/globals.css index a75cdd73..607fd30a 100644 --- a/typing-app/src/app/globals.css +++ b/typing-app/src/app/globals.css @@ -5,7 +5,10 @@ } * { + margin: 0; + padding: 0; font-family: "メイリオ", "Meiryo", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "ＭＳ Ｐゴシック", sans-serif; + box-sizing: border-box; } body { @@ -13,3 +16,14 @@ body { background: rgb(var(--background-start-rgb)); overflow-y: hidden; } + +.children { + width: 100%; + height: calc(100% - 130px); + position: fixed; + left: 0; + top: 70px; + background-image: url("/img/background.png"); + background-size: cover; + background-position: center bottom; +} diff --git a/typing-app/src/app/layout.tsx b/typing-app/src/app/layout.tsx index e374430f..62f92028 100644 --- a/typing-app/src/app/layout.tsx +++ b/typing-app/src/app/layout.tsx @@ -2,8 +2,6 @@ import type { Metadata } from "next"; import Header from "../components/organism/Header"; import Footer from "../components/organism/Footer"; import "./globals.css"; -import { Box, ChakraProvider } from "@chakra-ui/react"; -import background from "@/assets/images/background.png"; export const metadata: Metadata = { title: "TYPE MASTER", @@ -15,17 +13,11 @@ export default async function RootLayout({ children: React.ReactNode; }>) { return ( - + - - -
- - {children} - -