Merge branch 'feat/COT-163_implement_cs_introudce_page' into release

IT-Cotato · Feb 6, 2025 · 9db6776 · 9db6776
2 parents 0a178d1 + 2dba6ae
commit 9db6776
Show file tree

Hide file tree

Showing 5 changed files with 54 additions and 13 deletions.
diff --git 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<ButtonWrapperProps>`
     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
@@ -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<CotatoEducationCountResponse>(
@@ -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
@@ -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<BrowserBoardProps>`
     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
@@ -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,15 +72,25 @@ 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;
 
     > 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
@@ -0,0 +1 @@
+export const DESKTOP_HEIGHT = '800px';