diff --git a/public/mockServiceWorker.js~Stashed changes b/public/mockServiceWorker.js~Stashed changes new file mode 100644 index 0000000..8ee70b3 --- /dev/null +++ b/public/mockServiceWorker.js~Stashed changes @@ -0,0 +1,303 @@ +/* eslint-disable */ +/* tslint:disable */ + +/** + * Mock Service Worker (1.2.2). + * @see https://github.com/mswjs/msw + * - Please do NOT modify this file. + * - Please do NOT serve this file on production. + */ + +const INTEGRITY_CHECKSUM = '3d6b9f06410d179a7f7404d4bf4c3c70' +const activeClientIds = new Set() + +self.addEventListener('install', function () { + self.skipWaiting() +}) + +self.addEventListener('activate', function (event) { + event.waitUntil(self.clients.claim()) +}) + +self.addEventListener('message', async function (event) { + const clientId = event.source.id + + if (!clientId || !self.clients) { + return + } + + const client = await self.clients.get(clientId) + + if (!client) { + return + } + + const allClients = await self.clients.matchAll({ + type: 'window', + }) + + switch (event.data) { + case 'KEEPALIVE_REQUEST': { + sendToClient(client, { + type: 'KEEPALIVE_RESPONSE', + }) + break + } + + case 'INTEGRITY_CHECK_REQUEST': { + sendToClient(client, { + type: 'INTEGRITY_CHECK_RESPONSE', + payload: INTEGRITY_CHECKSUM, + }) + break + } + + case 'MOCK_ACTIVATE': { + activeClientIds.add(clientId) + + sendToClient(client, { + type: 'MOCKING_ENABLED', + payload: true, + }) + break + } + + case 'MOCK_DEACTIVATE': { + activeClientIds.delete(clientId) + break + } + + case 'CLIENT_CLOSED': { + activeClientIds.delete(clientId) + + const remainingClients = allClients.filter((client) => { + return client.id !== clientId + }) + + // Unregister itself when there are no more clients + if (remainingClients.length === 0) { + self.registration.unregister() + } + + break + } + } +}) + +self.addEventListener('fetch', function (event) { + const { request } = event + const accept = request.headers.get('accept') || '' + + // Bypass server-sent events. + if (accept.includes('text/event-stream')) { + return + } + + // Bypass navigation requests. + if (request.mode === 'navigate') { + return + } + + // Opening the DevTools triggers the "only-if-cached" request + // that cannot be handled by the worker. Bypass such requests. + if (request.cache === 'only-if-cached' && request.mode !== 'same-origin') { + return + } + + // Bypass all requests when there are no active clients. + // Prevents the self-unregistered worked from handling requests + // after it's been deleted (still remains active until the next reload). + if (activeClientIds.size === 0) { + return + } + + // Generate unique request ID. + const requestId = Math.random().toString(16).slice(2) + + event.respondWith( + handleRequest(event, requestId).catch((error) => { + if (error.name === 'NetworkError') { + console.warn( + '[MSW] Successfully emulated a network error for the "%s %s" request.', + request.method, + request.url, + ) + return + } + + // At this point, any exception indicates an issue with the original request/response. + console.error( + `\ +[MSW] Caught an exception from the "%s %s" request (%s). This is probably not a problem with Mock Service Worker. There is likely an additional logging output above.`, + request.method, + request.url, + `${error.name}: ${error.message}`, + ) + }), + ) +}) + +async function handleRequest(event, requestId) { + const client = await resolveMainClient(event) + const response = await getResponse(event, client, requestId) + + // Send back the response clone for the "response:*" life-cycle events. + // Ensure MSW is active and ready to handle the message, otherwise + // this message will pend indefinitely. + if (client && activeClientIds.has(client.id)) { + ;(async function () { + const clonedResponse = response.clone() + sendToClient(client, { + type: 'RESPONSE', + payload: { + requestId, + type: clonedResponse.type, + ok: clonedResponse.ok, + status: clonedResponse.status, + statusText: clonedResponse.statusText, + body: + clonedResponse.body === null ? null : await clonedResponse.text(), + headers: Object.fromEntries(clonedResponse.headers.entries()), + redirected: clonedResponse.redirected, + }, + }) + })() + } + + return response +} + +// Resolve the main client for the given event. +// Client that issues a request doesn't necessarily equal the client +// that registered the worker. It's with the latter the worker should +// communicate with during the response resolving phase. +async function resolveMainClient(event) { + const client = await self.clients.get(event.clientId) + + if (client?.frameType === 'top-level') { + return client + } + + const allClients = await self.clients.matchAll({ + type: 'window', + }) + + return allClients + .filter((client) => { + // Get only those clients that are currently visible. + return client.visibilityState === 'visible' + }) + .find((client) => { + // Find the client ID that's recorded in the + // set of clients that have registered the worker. + return activeClientIds.has(client.id) + }) +} + +async function getResponse(event, client, requestId) { + const { request } = event + const clonedRequest = request.clone() + + function passthrough() { + // Clone the request because it might've been already used + // (i.e. its body has been read and sent to the client). + const headers = Object.fromEntries(clonedRequest.headers.entries()) + + // Remove MSW-specific request headers so the bypassed requests + // comply with the server's CORS preflight check. + // Operate with the headers as an object because request "Headers" + // are immutable. + delete headers['x-msw-bypass'] + + return fetch(clonedRequest, { headers }) + } + + // Bypass mocking when the client is not active. + if (!client) { + return passthrough() + } + + // Bypass initial page load requests (i.e. static assets). + // The absence of the immediate/parent client in the map of the active clients + // means that MSW hasn't dispatched the "MOCK_ACTIVATE" event yet + // and is not ready to handle requests. + if (!activeClientIds.has(client.id)) { + return passthrough() + } + + // Bypass requests with the explicit bypass header. + // Such requests can be issued by "ctx.fetch()". + if (request.headers.get('x-msw-bypass') === 'true') { + return passthrough() + } + + // Notify the client that a request has been intercepted. + const clientMessage = await sendToClient(client, { + type: 'REQUEST', + payload: { + id: requestId, + url: request.url, + method: request.method, + headers: Object.fromEntries(request.headers.entries()), + cache: request.cache, + mode: request.mode, + credentials: request.credentials, + destination: request.destination, + integrity: request.integrity, + redirect: request.redirect, + referrer: request.referrer, + referrerPolicy: request.referrerPolicy, + body: await request.text(), + bodyUsed: request.bodyUsed, + keepalive: request.keepalive, + }, + }) + + switch (clientMessage.type) { + case 'MOCK_RESPONSE': { + return respondWithMock(clientMessage.data) + } + + case 'MOCK_NOT_FOUND': { + return passthrough() + } + + case 'NETWORK_ERROR': { + const { name, message } = clientMessage.data + const networkError = new Error(message) + networkError.name = name + + // Rejecting a "respondWith" promise emulates a network error. + throw networkError + } + } + + return passthrough() +} + +function sendToClient(client, message) { + return new Promise((resolve, reject) => { + const channel = new MessageChannel() + + channel.port1.onmessage = (event) => { + if (event.data && event.data.error) { + return reject(event.data.error) + } + + resolve(event.data) + } + + client.postMessage(message, [channel.port2]) + }) +} + +function sleep(timeMs) { + return new Promise((resolve) => { + setTimeout(resolve, timeMs) + }) +} + +async function respondWithMock(response) { + await sleep(response.delay) + return new Response(response.body, response) +} diff --git a/src/assets/BottomLeftImg.png b/src/assets/BottomLeftImg.png new file mode 100644 index 0000000..47010af Binary files /dev/null and b/src/assets/BottomLeftImg.png differ diff --git a/src/assets/BottomRightImg.png b/src/assets/BottomRightImg.png new file mode 100644 index 0000000..12b5292 Binary files /dev/null and b/src/assets/BottomRightImg.png differ diff --git "a/src/assets/D\355\214\200.png" "b/src/assets/D\355\214\200.png" new file mode 100644 index 0000000..09c022f Binary files /dev/null and "b/src/assets/D\355\214\200.png" differ diff --git a/src/assets/TopLeftImg.png b/src/assets/TopLeftImg.png new file mode 100644 index 0000000..bdd1475 Binary files /dev/null and b/src/assets/TopLeftImg.png differ diff --git a/src/assets/TopRightImg.png b/src/assets/TopRightImg.png new file mode 100644 index 0000000..8b9d2f0 Binary files /dev/null and b/src/assets/TopRightImg.png differ diff --git a/src/common/DrawingHeader /index.tsx b/src/common/DrawingHeader /index.tsx deleted file mode 100644 index 79473b7..0000000 --- a/src/common/DrawingHeader /index.tsx +++ /dev/null @@ -1,66 +0,0 @@ -import { styled } from 'styled-components'; -import Exit from '@/assets/Exit.png'; -import { CircleText } from '@/constants/circleText'; -import { motion } from 'framer-motion'; -const DrawingHeader = () => { - return ( - - - - - 돌아가기 - - - {CircleText.map((text) => ( - {text} - ))} - - ); -}; - -export default DrawingHeader; - -const WrapBtn = styled.div` - position: absolute; - left: 5rem; - top: 4rem; -`; -const ExitBtn = styled(motion.button)` - position: relative; - cursor: pointer; - background-color: transparent; -`; - -const ExitImg = styled.img` - width: 14rem; - height: 9rem; -`; -const Text = styled.span` - position: absolute; - top: 55%; - left: 50%; - transform: translate(-50%, -50%); - font-size: 3rem; - font-weight: bold; - color: #000000; -`; -const PageHeader = styled.div` - display: flex; - justify-content: center; - align-items: center; - height: 180px; - width: 100%; -`; -const CircleWrap = styled.div` - width: 8rem; - height: 8rem; - margin-left: 3rem; - background-color: #fff; - border: 0 solid; - border-radius: 50%; - text-align: center; - line-height: 8.5rem; - font-size: 5rem; - text-shadow: 1px 1px 2px #b8b8b8; - box-shadow: 4px 4px 3px -1px #a6a6a6; -`; diff --git a/src/common/Header/index.tsx b/src/common/Header/index.tsx index 1ac1670..aac9b76 100644 --- a/src/common/Header/index.tsx +++ b/src/common/Header/index.tsx @@ -1,7 +1,7 @@ import { styled } from 'styled-components'; import KoreanFlag from '@/assets/KoreanFlag.png'; import Clock from '@/assets/WallClock.png'; - +import HeaderResponse from '@/constants/HeaderResponsive'; const Header = () => { return ( @@ -47,11 +47,41 @@ const ClassMotto = styled.div` :last-child { font-size: 3.5rem; } + @media ${HeaderResponse.HeaderTheme.SemiSmallSmall} { + width: 14vw; + height: 12vh; + :first-child { + font-size: 3rem; + } + :last-child { + font-size: 2.5rem; + } + } + @media ${HeaderResponse.HeaderTheme.TabletSemiSmall} { + width: 13vw; + height: 10vh; + :first-child { + font-size: 2.5rem; + } + :last-child { + font-size: 2.2rem; + } + } `; const WallClockImg = styled.img` height: 7rem; margin-right: 7vw; + + @media ${HeaderResponse.HeaderTheme.SmallMedium} { + height: 6rem; + } + @media ${HeaderResponse.HeaderTheme.SemiSmallSmall} { + height: 5rem; + } + @media ${HeaderResponse.HeaderTheme.TabletSemiSmall} { + height: 4.5rem; + } `; const KoreanFlagImg = styled.img` @@ -59,4 +89,19 @@ const KoreanFlagImg = styled.img` height: 12vh; background: #ffffff; border: 0.7rem solid #734200; + + @media ${HeaderResponse.HeaderTheme.SmallMedium} { + width: 10vw; + height: 12vh; + } + + @media ${HeaderResponse.HeaderTheme.SemiSmallSmall} { + width: 9vw; + height: 11vh; + } + + @media ${HeaderResponse.HeaderTheme.TabletSemiSmall} { + width: 8vw; + height: 10vh; + } `; diff --git a/src/components/Entrance/EntranceLabel/index.tsx b/src/components/Entrance/EntranceLabel/index.tsx index 875cb59..ef5ee8b 100644 --- a/src/components/Entrance/EntranceLabel/index.tsx +++ b/src/components/Entrance/EntranceLabel/index.tsx @@ -15,4 +15,16 @@ const LabelName = styled.label` font-size: 4rem; margin: 3rem 0 1.5rem 0; color: #fff; + @media screen and (min-width: 1200px) and (max-width: 1350px) { + font-size: 3.5rem; + } + @media screen and (min-width: 1000px) and (max-width: 1200px) { + font-size: 3rem; + } + @media screen and (min-width: 850px) and (max-width: 1000px) { + font-size: 2.6rem; + } + @media screen and (min-width: 768px) and (max-width: 850px) { + font-size: 2.2rem; + } `; diff --git a/src/constants/CreatingResponsive.ts b/src/constants/CreatingResponsive.ts new file mode 100644 index 0000000..1bd1c7a --- /dev/null +++ b/src/constants/CreatingResponsive.ts @@ -0,0 +1,27 @@ +import HeaderResponse from './HeaderResponsive'; +const VariousValues = { + Tablet: 768, + Tiny: 850, + SEMIS: 900, + S: 1000, + SEMIM: 1200, + M: 1250, + L: 1350, +}; + +const CreatingRoomTheme = { + TabletTiny: `screen and (min-width: ${VariousValues.Tablet}px) and (max-width: ${VariousValues.Tiny}px)`, + TabletSEMIS: `screen and (min-width: ${VariousValues.Tablet}px) and (max-width: ${VariousValues.SEMIS}px)`, + TabletS: `screen and (min-width: ${VariousValues.Tablet}px) and (max-width: ${VariousValues.S}px)`, + TinyS: `screen and (min-width: ${VariousValues.Tiny}px) and (max-width: ${VariousValues.S}px)`, + SEMISS: `screen and (min-width: ${VariousValues.SEMIS}px) and (max-width: ${VariousValues.S}px)`, + SSEMIM: `screen and (min-width: ${VariousValues.S}px) and (max-width: ${VariousValues.SEMIM}px)`, + SM: `screen and (min-width: ${VariousValues.S}px) and (max-width: ${VariousValues.M}px)`, + SEMIML: `screen and (min-width: ${VariousValues.SEMIM}px) and (max-width: ${VariousValues.L}px)`, +}; + +const CreatingResponse = { + CreatingRoomTheme, + HeaderResponse, +}; +export default CreatingResponse; diff --git a/src/constants/HeaderResponsive.ts b/src/constants/HeaderResponsive.ts new file mode 100644 index 0000000..013fe1c --- /dev/null +++ b/src/constants/HeaderResponsive.ts @@ -0,0 +1,18 @@ +const VariousValues = { + Tablet: 768, + SEMIS: 1000, + S: 1150, + SEMIM: 1250, + M: 1350, +}; + +const HeaderTheme = { + TabletSemiSmall: `screen and (min-width: ${VariousValues.Tablet}px) and (max-width: ${VariousValues.SEMIS}px)`, + SemiSmallSmall: `screen and (min-width: ${VariousValues.SEMIS}px) and (max-width: ${VariousValues.S}px)`, + SmallMedium: `screen and (min-width: ${VariousValues.S}px) and (max-width: ${VariousValues.M}px)`, +}; +const HeaderResponse = { + HeaderTheme, +}; + +export default HeaderResponse; diff --git a/src/constants/MainResponsive.tsx b/src/constants/MainResponsive.tsx new file mode 100644 index 0000000..97f91b9 --- /dev/null +++ b/src/constants/MainResponsive.tsx @@ -0,0 +1,25 @@ +import HeaderResponse from './HeaderResponsive'; + +const VariousValues = { + Tablet: 768, + SEMIS: 1000, + S: 1150, + SEMIM: 1250, + M: 1350, + L: 1400, + XL: 1550, +}; + +const MainPageTheme = { + TabletSemiSmall: `screen and (min-width: ${VariousValues.Tablet}px) and (max-width: ${VariousValues.SEMIS}px)`, + SemiSmallSmall: `screen and (min-width: ${VariousValues.SEMIS}px) and (max-width: ${VariousValues.S}px)`, + SemiSmallSemiMedium: `screen and (min-width: ${VariousValues.SEMIS}px) and (max-width: ${VariousValues.SEMIM}px)`, + SemiMediumLarge: `screen and (min-width: ${VariousValues.SEMIM}px) and (max-width: ${VariousValues.L}px)`, + LargeXLarge: `screen and (min-width: ${VariousValues.L}px) and (max-width: ${VariousValues.XL}px)`, +}; + +const Theme = { + HeaderResponse, + MainPageTheme, +}; +export default Theme; diff --git a/src/pages/CreatingSpecificRooms/index.tsx b/src/pages/CreatingSpecificRooms/index.tsx index ac68072..0382425 100644 --- a/src/pages/CreatingSpecificRooms/index.tsx +++ b/src/pages/CreatingSpecificRooms/index.tsx @@ -13,7 +13,7 @@ import { GameInfoProps, MakeRoomType } from '@/types/creatingSpecificRooms'; import { makeRoomAPI } from '@/apis/creatingSpecificRooms'; import { useMutation } from '@tanstack/react-query'; import { AxiosError } from 'axios'; - +import CreatingResponse from '@/constants/CreatingResponsive'; const CreatingRooms = () => { const navigate = useNavigate(); @@ -86,6 +86,7 @@ const CreatingRooms = () => { alt="함수낙서" /> 컴퍼스낙서 + 떠든 사람 {roomElement.map((item, index) => ( @@ -143,7 +144,6 @@ const CreatingRooms = () => { - ); @@ -161,9 +161,55 @@ const Admissions = styled.div` width: 100vw; position: relative; `; + +const Blackboard = styled.div` + box-sizing: border-box; + width: 70vw; + height: 65vh; + background: #1c3b3e; + border: 15px solid #8e5501; + box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); + border-radius: 20px; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; + + .CreatingRoomButton { + width: 13rem; + height: 5rem; + margin-top: 2rem; + margin-bottom: 5rem; + border-radius: 20rem; + border: 0.05rem solid #fff; + background-color: transparent; + color: #fff; + font-size: 3rem; + &::placeholder { + color: #fff; + } + + &:hover { + background-color: rgba(255, 255, 255, 0.18); + cursor: pointer; + transform: scale(1.1); + } + @media ${CreatingResponse.CreatingRoomTheme.SM} { + width: 11rem; + height: 4.5rem; + } + @media ${CreatingResponse.CreatingRoomTheme.TabletS} { + width: 9.8rem; + height: 4rem; + font-size: 2.5rem; + } + } +`; const DoodleContainer = styled.div` z-index: 2; top: 10em; + margin-bottom: 4rem; > img { position: absolute; } @@ -177,6 +223,44 @@ const DoodleContainer = styled.div` top: 2rem; width: 6rem; } + > .Chatter { + right: 2rem; + bottom: 3rem; + width: 10rem; + } + @media ${CreatingResponse.CreatingRoomTheme.SEMIML} { + > .FunctionMathImg { + width: 9rem; + } + > .CompassImg { + width: 5rem; + } + > .Chatter { + width: 9rem; + } + } + @media ${CreatingResponse.CreatingRoomTheme.SSEMIM} { + > .FunctionMathImg { + width: 8rem; + } + > .CompassImg { + width: 4.5rem; + } + > .Chatter { + width: 8rem; + } + } + @media ${CreatingResponse.CreatingRoomTheme.TabletS} { + > .FunctionMathImg { + width: 7.5rem; + } + > .CompassImg { + width: 4.2rem; + } + > .Chatter { + width: 7.5rem; + } + } `; const CategoryContainer = styled.div` display: flex; @@ -200,16 +284,56 @@ const CategoryContainer = styled.div` background-color: rgba(255, 255, 255, 0.18); transform: scale(1.1); } + @media ${CreatingResponse.CreatingRoomTheme.SEMIML} { + width: 10rem; + height: 10rem; + } + @media ${CreatingResponse.CreatingRoomTheme.SSEMIM} { + width: 9rem; + height: 9rem; + margin: 1.5rem; + } + @media ${CreatingResponse.CreatingRoomTheme.SEMISS} { + width: 8.4rem; + height: 8.4rem; + margin: 1.1rem; + } + @media ${CreatingResponse.CreatingRoomTheme.TabletSEMIS} { + width: 7.5rem; + height: 7.5rem; + margin: 1.1rem; + } } > div > img { height: 12rem; width: 12rem; + @media ${CreatingResponse.CreatingRoomTheme.SEMIML} { + width: 10rem; + height: 10rem; + } + @media ${CreatingResponse.CreatingRoomTheme.SSEMIM} { + width: 9rem; + height: 9rem; + } + @media ${CreatingResponse.CreatingRoomTheme.TabletS} { + width: 8.8rem; + height: 8.8rem; + } } > div > label { font-size: 2.5rem; color: #fff; position: absolute; bottom: 2rem; + @media ${CreatingResponse.CreatingRoomTheme.SSEMIM} { + bottom: 1.2rem; + } + @media ${CreatingResponse.CreatingRoomTheme.SEMISS} { + bottom: 1rem; + } + @media ${CreatingResponse.CreatingRoomTheme.TabletSEMIS} { + bottom: 0.5rem; + } } > div:hover { background-color: rgba(255, 255, 255, 0.2); @@ -236,6 +360,18 @@ const UIContainer = styled.div` position: relative; top: -0.4em; } + @media screen and (min-width: 1060px) and (max-width: 1250px) { + width: 21rem; + } + @media screen and (min-width: 940px) and (max-width: 1060px) { + width: 18rem; + } + @media screen and (min-width: 850px) and (max-width: 940px) { + width: 15rem; + } + @media ${CreatingResponse.CreatingRoomTheme.TabletTiny} { + width: 13rem; + } } > div:nth-child(1) { position: relative; @@ -260,7 +396,18 @@ const UIContainer = styled.div` padding: 0.3em; margin-right: 2rem; margin-left: 2rem; + @media ${CreatingResponse.CreatingRoomTheme.SM} { + height: 1.3em; + margin-right: 1rem; + margin-left: 1rem; + } + @media ${CreatingResponse.CreatingRoomTheme.TabletS} { + height: 1.3em; + margin-right: 1rem; + margin-left: 1rem; + } } + > .Personnels { width: 4vw; font-size: 5rem; @@ -269,6 +416,14 @@ const UIContainer = styled.div` bottom: 0.1em; color: white; text-align: center; + @media ${CreatingResponse.CreatingRoomTheme.SM} { + font-size: 4rem; + top: 0.2rem; + } + @media ${CreatingResponse.CreatingRoomTheme.TabletS} { + font-size: 3.3rem; + top: 0.7rem; + } } } > div:nth-child(2) > .NickName { @@ -322,8 +477,23 @@ const UIContainer = styled.div` background-color: transparent; border-radius: 50%; padding: 0.3em; - margin-right: 1rem; - margin-left: 1rem; + margin-right: 2rem; + margin-left: 2rem; + @media ${CreatingResponse.CreatingRoomTheme.SM} { + height: 1.3em; + margin-right: 1rem; + margin-left: 1rem; + } + @media ${CreatingResponse.CreatingRoomTheme.SEMISS} { + height: 1.3em; + margin-right: 1rem; + margin-left: 1rem; + } + @media ${CreatingResponse.CreatingRoomTheme.TabletSEMIS} { + height: 1.3em; + margin-right: 0.7rem; + margin-left: 0.7rem; + } } .Seconds { width: 4vw; @@ -333,44 +503,22 @@ const UIContainer = styled.div` bottom: 0.7rem; color: white; text-align: center; + @media ${CreatingResponse.CreatingRoomTheme.SM} { + font-size: 4rem; + top: 0.2rem; + } + @media ${CreatingResponse.CreatingRoomTheme.TinyS} { + font-size: 3.6rem; + top: 0.7rem; + } + @media ${CreatingResponse.CreatingRoomTheme.TabletTiny} { + font-size: 3rem; + top: 1rem; + } } } } `; -const Blackboard = styled.div` - box-sizing: border-box; - width: 70vw; - height: 65vh; - background: #1c3b3e; - border: 15px solid #8e5501; - box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); - border-radius: 20px; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - position: relative; - - .CreatingRoomButton { - width: 13rem; - height: 5rem; - margin-top: 5rem; - border-radius: 20rem; - border: 0.05rem solid #fff; - background-color: transparent; - color: #fff; - font-size: 3rem; - &::placeholder { - color: #fff; - } - - &:hover { - background-color: rgba(255, 255, 255, 0.18); - cursor: pointer; - transform: scale(1.1); - } - } -`; const NickNameInput = styled.input` text-align: center; @@ -388,18 +536,20 @@ const NickNameInput = styled.input` &::placeholder { color: rgba(255, 255, 255, 0.8); } + @media ${CreatingResponse.CreatingRoomTheme.SM} { + width: 20rem; + font-size: 2.1rem; + } + @media ${CreatingResponse.CreatingRoomTheme.TabletS} { + width: 18rem; + font-size: 1.7rem; + } `; -const ChatterImg = styled.img` - position: absolute; - right: 2rem; - bottom: 3rem; - width: 10rem; -`; const TeachingImg = styled.img` position: absolute; bottom: 0; - width: 45rem; + width: 35rem; z-index: 1; `; const FireExtinguisherImg = styled.img` diff --git a/src/pages/Main/index.tsx b/src/pages/Main/index.tsx index 23000f5..652db98 100644 --- a/src/pages/Main/index.tsx +++ b/src/pages/Main/index.tsx @@ -2,9 +2,14 @@ import React from 'react'; import { styled } from 'styled-components'; import Header from '@/common/Header'; import BlackboardDecoInMainPage from '@/assets/BlackboardDecoInMainPage.png'; +import BlackBoadrdBottomLeftImg from '@/assets/BottomLeftImg.png'; +import BlackBoadrdBottomRightImg from '@/assets/BottomRightImg.png'; +import BlackBoadrdTopLeftImg from '@/assets/TopLeftImg.png'; +import BlackBoadrdTopRightImg from '@/assets/TopRightImg.png'; import FireExtinguisher from '@/assets/FireExtinguisher.png'; import { useNavigate } from 'react-router-dom'; import { motion } from 'framer-motion'; +import Theme from '@/constants/MainResponsive'; const Main = () => { const navigate = useNavigate(); const goToEntryRoom = () => navigate('/entryRoom'); @@ -21,21 +26,41 @@ const Main = () => {
- + > + 칠판 왼쪽 상단이미지 + 칠판 오른쪽 상단이미지 + 칠판 왼쪽 하단이미지 + 칠판 오른쪽 하단이미지 +
- 핑고빙고 - +
@@ -69,15 +94,52 @@ const Mains = styled.div` right: 2rem; bottom: 0; width: 30rem; + @media ${Theme.MainPageTheme.SemiSmallSemiMedium} { + width: 23rem; + } + @media ${Theme.MainPageTheme.TabletSemiSmall} { + width: 20rem; + } } `; -const BlackboardImg = styled(motion.img)` +const AppName = styled(motion.span)` + font-size: 13rem; + @media ${Theme.MainPageTheme.SemiSmallSemiMedium} { + font-size: 10rem; + } + @media ${Theme.MainPageTheme.TabletSemiSmall} { + font-size: 7rem; + } +`; +const BlackboardGridImg = styled(motion.div)` width: 100%; height: 100%; - object-fit: cover; position: absolute; + display: grid; + grid-template-columns: repeat(2, 1fr); + row-gap: 6rem; + + @media screen and (min-width: 768px) and (max-width: 1530px) { + row-gap: calc(2rem + ((100vw - 768px) / 170) * 10); + } + + > .LeftTop { + width: 20%; + } + > .LeftBottom { + width: 40%; + } + > .RightTop { + width: 30%; + justify-self: end; + } + > .RightBottom { + justify-self: end; + width: 35%; + } `; + const Blackboard = styled.div` position: relative; background-size: 70vw 65vh; @@ -106,7 +168,6 @@ const Buttons = styled(motion.button)` color: white; background-color: #1c3b3e; border: 0.2rem solid #ffffff; - filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25)); border-radius: 3rem; margin: 3rem 5rem; position: relative; @@ -116,4 +177,14 @@ const Buttons = styled(motion.button)` transform: scale(1.1); cursor: pointer; } + @media ${Theme.MainPageTheme.SemiSmallSmall} { + width: 13rem; + height: 4rem; + font-size: 3rem; + } + @media ${Theme.MainPageTheme.TabletSemiSmall} { + width: 10rem; + height: 3rem; + font-size: 2.8rem; + } `;