From 2dba6ae0fb7c740956fae11aacb90838cee58376 Mon Sep 17 00:00:00 2001 From: WONYOUNG-HC Date: Thu, 6 Feb 2025 23:53:10 +0900 Subject: [PATCH] fix: resolve small height style --- .../CSFirstSection/CSFirstSectionButton.tsx | 19 ++++++++++++++----- .../CSFirstSection/CSFirstSectionContent.tsx | 13 +++++++++++-- .../components/CSFirstSectionContentBoard.tsx | 17 ++++++++++++++--- .../CSFirstSectionContentStatus.tsx | 17 ++++++++++++++--- .../CS/CSFirstSection/constants/index.ts | 1 + 5 files changed, 54 insertions(+), 13 deletions(-) create mode 100644 src/pages/CS/CSFirstSection/constants/index.ts diff --git a/src/pages/CS/CSFirstSection/CSFirstSectionButton.tsx b/src/pages/CS/CSFirstSection/CSFirstSectionButton.tsx index 871e002a..b92511f5 100644 --- a/src/pages/CS/CSFirstSection/CSFirstSectionButton.tsx +++ b/src/pages/CS/CSFirstSection/CSFirstSectionButton.tsx @@ -3,8 +3,10 @@ import CotatoPixelButton from '@components/CotatoPixelButton'; import { ReactComponent as GoQuizTextImage } from '@assets/cs_go_quiz_text.svg'; import { ReactComponent as VVIcon } from '@assets/vv.svg'; import { styled } from 'styled-components'; -import { media } from '@theme/media'; +import { media, device } from '@theme/media'; import { useBreakpoints } from '@/hooks/useBreakpoints'; +import { useMediaQuery } from '@mui/material'; +import { DESKTOP_HEIGHT } from './constants'; // // @@ -22,10 +24,11 @@ const CSFirstSectionButton = () => { const [isHover, setIsHover] = React.useState(false); const { isDesktopOrSmaller, isTabletOrSmaller } = useBreakpoints(); + const isDesktopHeightOrSmaller = useMediaQuery(`(max-height:${DESKTOP_HEIGHT})`); const handleButtonClick = () => { const slideContainer = document.querySelector('#cs-slide-container'); - console.log(slideContainer); + if (slideContainer) { slideContainer.scrollTo({ top: slideContainer.clientHeight, @@ -37,7 +40,7 @@ const CSFirstSectionButton = () => { const getButtonWidth = () => { if (isTabletOrSmaller) { return '7rem'; - } else if (isDesktopOrSmaller) { + } else if (isDesktopOrSmaller || isDesktopHeightOrSmaller) { return '8.5rem'; } else { return '10rem'; @@ -76,11 +79,17 @@ const ButtonWrapper = styled.div` top: ${({ $isHover }) => ($isHover ? '-5.5rem' : '-4.5rem')}; } - ${media.desktop` + /* ${media.desktop` > svg { top: ${({ $isHover }: { $isHover: boolean }) => ($isHover ? '-4.75rem' : '-3.75rem')}; } - `} + `} */ + + @media (max-width: ${device.desktop}), (max-height: 800px) { + > svg { + top: ${({ $isHover }: { $isHover: boolean }) => ($isHover ? '-4.75rem' : '-3.75rem')}; + } + } ${media.tablet` > svg { diff --git a/src/pages/CS/CSFirstSection/CSFirstSectionContent.tsx b/src/pages/CS/CSFirstSection/CSFirstSectionContent.tsx index 1bbef40e..df5eb459 100644 --- a/src/pages/CS/CSFirstSection/CSFirstSectionContent.tsx +++ b/src/pages/CS/CSFirstSection/CSFirstSectionContent.tsx @@ -5,11 +5,12 @@ import styled, { useTheme } from 'styled-components'; import CSFirstSectionContentStatus from './components/CSFirstSectionContentStatus'; import { ReactComponent as BulletListSolidIcon } from '@assets/bullet_list_solid.svg'; import { ReactComponent as CSIcon } from '@assets/cs_icon.svg'; -import { media } from '@theme/media'; +import { media, device } from '@theme/media'; import { useBreakpoints } from '@/hooks/useBreakpoints'; import fetcher from '@utils/fetcher'; import useSWRImmutable from 'swr/immutable'; import { CotatoEducationCountResponse } from 'cotato-openapi-clients'; +import { DESKTOP_HEIGHT } from './constants'; const CSFirstSectionContent = () => { const { data: statusValue } = useSWRImmutable( @@ -67,11 +68,19 @@ export default CSFirstSectionContent; const ContentWrapper = styled.div` display: flex; - justify-content: center; + justify-content: space-around; gap: 2.5rem; margin-bottom: -3rem; + width: 100%; + max-width: ${device.wide}; + + @media (max-height: ${DESKTOP_HEIGHT}) { + justify-content: center; + gap: 4rem; + } ${media.desktop` + justify-content: center; gap: 1.5rem; `} diff --git a/src/pages/CS/CSFirstSection/components/CSFirstSectionContentBoard.tsx b/src/pages/CS/CSFirstSection/components/CSFirstSectionContentBoard.tsx index 4154aebc..312750b0 100644 --- a/src/pages/CS/CSFirstSection/components/CSFirstSectionContentBoard.tsx +++ b/src/pages/CS/CSFirstSection/components/CSFirstSectionContentBoard.tsx @@ -3,7 +3,8 @@ import { Stack } from '@mui/material'; import { ReactComponent as BrowserBoardBackground } from '@assets/cs_browswer_board.svg'; import { styled } from 'styled-components'; import { ReactComponent as EducationCharacter } from '@assets/cotato_character_education_ground.svg'; -import { media } from '@theme/media'; +import { media, device } from '@theme/media'; +import { DESKTOP_HEIGHT } from '../constants'; // // @@ -108,14 +109,24 @@ const BrowserBoard = styled.div` transform: ${({ $flip }) => ($flip ? 'scaleX(-1)' : 'none')}; } - ${media.desktop` + /* ${media.desktop` width: ${BOARD_WIDTH_MEDIUM}rem; height: ${BOARD_HEIGHT_MEDIUM}rem; > p { font-size: 1rem; padding: ${({ $flip }: { $flip: boolean }) => ($flip ? '3.75rem 1rem 0 2.25rem' : '3.75rem 2rem 0 1.125rem')}; - `} + `} */ + + @media (max-width: ${device.desktop}), (max-height: ${DESKTOP_HEIGHT}) { + width: ${BOARD_WIDTH_MEDIUM}rem; + height: ${BOARD_HEIGHT_MEDIUM}rem; + + > p { + font-size: 1rem; + padding: ${({ $flip }) => ($flip ? '3.75rem 1rem 0 2.25rem' : '3.75rem 2rem 0 1.125rem')}; + } + } ${media.tablet` width: ${BOARD_WIDTH_SMALL}rem; diff --git a/src/pages/CS/CSFirstSection/components/CSFirstSectionContentStatus.tsx b/src/pages/CS/CSFirstSection/components/CSFirstSectionContentStatus.tsx index 09e13aa2..2d09c13a 100644 --- a/src/pages/CS/CSFirstSection/components/CSFirstSectionContentStatus.tsx +++ b/src/pages/CS/CSFirstSection/components/CSFirstSectionContentStatus.tsx @@ -2,8 +2,9 @@ import React from 'react'; import { styled } from 'styled-components'; import status_background from '@assets/cs_status_background.svg'; import { Box } from '@mui/material'; -import { media } from '@theme/media'; +import { media, device } from '@theme/media'; import { useBreakpoints } from '@/hooks/useBreakpoints'; +import { DESKTOP_HEIGHT } from '../constants'; // // @@ -71,7 +72,7 @@ const StatusBox = styled.div` font-weight: 700; } - ${media.desktop` + /* ${media.desktop` width: ${BOX_WIDTH_MEDIUM}rem; height: ${BOX_HEIGHT_MEDIUM}rem; padding-bottom: 0.375rem; @@ -79,7 +80,17 @@ const StatusBox = styled.div` > span { font-size: 1.25rem; } - `} + `} */ + + @media (max-width: ${device.desktop}), (max-height: ${DESKTOP_HEIGHT}) { + width: ${BOX_WIDTH_MEDIUM}rem; + height: ${BOX_HEIGHT_MEDIUM}rem; + padding-bottom: 0.375rem; + + > span { + font-size: 1.25rem; + } + } ${media.tablet` width: ${BOX_WIDTH_SMALL}rem; diff --git a/src/pages/CS/CSFirstSection/constants/index.ts b/src/pages/CS/CSFirstSection/constants/index.ts new file mode 100644 index 00000000..6543dcf3 --- /dev/null +++ b/src/pages/CS/CSFirstSection/constants/index.ts @@ -0,0 +1 @@ +export const DESKTOP_HEIGHT = '800px';