style: 타이틀 및 카드 썸네일 모바일 반응형

sopt-makers · Oct 28, 2023 · f30231e · f30231e
1 parent fd70426
commit f30231e
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 3 deletions.
diff --git a/src/views/ProjectPage/ProjectPage.tsx b/src/views/ProjectPage/ProjectPage.tsx
@@ -2,6 +2,7 @@ import { css } from '@emotion/react';
 import { useState } from 'react';
 import PageLayout from '@src/components/common/PageLayout';
 import Select from '@src/components/common/Select';
+import { useIsMobile } from '@src/hooks/useDevice';
 import {
   activeProjectCategoryList,
   activeProjectPlatformList,
@@ -19,6 +20,7 @@ function Projects() {
   const [selectedPlatform, setPlatform] = useState<ProjectPlatformType>(ProjectPlatformType.ALL);
 
   const state = useFetch(selectedCategory, selectedPlatform);
+  const isMobile = useIsMobile('899px');
 
   return (
     <PageLayout
@@ -31,7 +33,7 @@ function Projects() {
         <S.ContentWrapper>
           <RecentProjectList />
           <S.Spacing />
-          <S.SectionTitle>SOPT에서 진행된 프로젝트 둘러보기</S.SectionTitle>
+          <S.SectionTitle>SOPT{!isMobile && '에서 진행된'} 프로젝트 둘러보기</S.SectionTitle>
           <S.FilterWrapper>
             <Select
               options={activeProjectCategoryList}

diff --git a/src/views/ProjectPage/components/project/ProjectCard/index.tsx b/src/views/ProjectPage/components/project/ProjectCard/index.tsx
@@ -1,10 +1,10 @@
 import { track } from '@amplitude/analytics-browser';
-import { useIsMobile } from '@src/hooks/useDevice';
+import { useMediaQuery } from 'react-responsive';
 import { ProjectType } from '@src/lib/types/project';
 import * as S from './style';
 
 export default function ProjectCard({ project }: { project: ProjectType }) {
-  const isMobile = useIsMobile('899px');
+  const isMobile = useMediaQuery({ query: '(max-width: 899px)' });
 
   return (
     <S.ProjectCard href={`/project/${project.id}`} onClick={() => track('click_project_detail')}>