Merge pull request #189 from D3vPals/feat/#187

YouD0313 · web-flow · commit dea771dc651c · 2025-02-03T02:03:21.000+09:00
fix: emptyLoadingPage styled-component props $추가, 미디어쿼리 경고로 인한 screen…
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -29,7 +29,6 @@
     "react-textarea-autosize": "^8.5.7",
     "sanitize.css": "^13.0.0",
     "styled-components": "^6.1.13",
-    "vite-plugin-compression": "^0.5.1",
     "zod": "^3.24.1",
     "zustand": "^5.0.2"
   },
@@ -67,6 +66,7 @@
     "typescript": "~5.6.2",
     "typescript-eslint": "^8.18.2",
     "vite": "^6.0.5",
+    "vite-plugin-compression": "^0.5.1",
     "vitest": "^2.1.8"
   },
   "eslintConfig": {
diff --git a/src/components/common/emptyLoadingPage/EmptyLoadingPage.styled.ts b/src/components/common/emptyLoadingPage/EmptyLoadingPage.styled.ts
@@ -5,11 +5,11 @@ export const Container = styled.div<EmptyLoadingPageProps>`
   width: 100%;
   height: ${({ height }) => height};
 
-  @media screen ${({ theme }) => theme.mediaQuery.tablet} {
-    height: ${({ tHeight }) => tHeight};
+  @media ${({ theme }) => theme.mediaQuery.tablet} {
+    height: ${({ $tHeight }) => $tHeight};
   }
 
-  @media screen ${({ theme }) => theme.mediaQuery.mobile} {
-    height: ${({ mHeight }) => mHeight};
+  @media ${({ theme }) => theme.mediaQuery.mobile} {
+    height: ${({ $mHeight }) => $mHeight};
   }
 `;
diff --git a/src/components/common/emptyLoadingPage/EmptyLoadingPage.tsx b/src/components/common/emptyLoadingPage/EmptyLoadingPage.tsx
@@ -2,20 +2,20 @@ import * as S from './EmptyLoadingPage.styled';
 
 export interface EmptyLoadingPageProps {
   height: string;
-  tHeight: string;
-  mHeight: string;
+  $tHeight: string;
+  $mHeight: string;
 }
 
 export default function EmptyLoadingPage({
   height,
-  tHeight,
-  mHeight,
+  $tHeight,
+  $mHeight,
 }: EmptyLoadingPageProps) {
   return (
     <S.Container
       height={height}
-      tHeight={tHeight}
-      mHeight={mHeight}
+      $tHeight={$tHeight}
+      $mHeight={$mHeight}
     ></S.Container>
   );
 }
diff --git a/src/components/common/layout/Layout.styled.ts b/src/components/common/layout/Layout.styled.ts
@@ -6,11 +6,11 @@ export const LayoutContainer = styled.div`
   max-width: ${({ theme }) => theme.layout.width.desktop};
   padding: 0 120px;
 
-  @media screen and ${({ theme }) => theme.mediaQuery.tablet} {
+  @media ${({ theme }) => theme.mediaQuery.tablet} {
     padding: 0 60px;
   }
 
-  @media screen and ${({ theme }) => theme.mediaQuery.mobile} {
+  @media ${({ theme }) => theme.mediaQuery.mobile} {
     padding: 0;
   }
 `;
diff --git a/src/components/common/noResultPage/NoResultPage.styled.ts b/src/components/common/noResultPage/NoResultPage.styled.ts
@@ -8,7 +8,7 @@ export const Container = styled.div<Pick<NoResultPageProps, 'height'>>`
   justify-content: center;
   align-items: center;
 
-  @media screen and ${({ theme }) => theme.mediaQuery.mobile} {
+  @media ${({ theme }) => theme.mediaQuery.mobile} {
     height: ${({ height }) => `calc(${height}*0.5)`};
   }
 `;
@@ -25,7 +25,7 @@ export const Wrapper = styled.div`
 export const Title = styled.span`
   font-size: 1.5rem;
 
-  @media screen and ${({ theme }) => theme.mediaQuery.mobile} {
+  @media ${({ theme }) => theme.mediaQuery.mobile} {
     font-size: 1rem;
   }
 `;
diff --git a/src/components/common/skillTagBox/SkillTagBox.styled.ts b/src/components/common/skillTagBox/SkillTagBox.styled.ts
@@ -8,11 +8,11 @@ export const Container = styled.div<Pick<SkillTagBoxProps, 'width'>>`
   background-color: ${({ theme }) => theme.color.white};
   padding: 2rem;
 
-  @media screen and ${({ theme }) => theme.mediaQuery.tablet} {
+  @media ${({ theme }) => theme.mediaQuery.tablet} {
     padding: 1.5rem;
   }
 
-  @media screen and ${({ theme }) => theme.mediaQuery.mobile} {
+  @media ${({ theme }) => theme.mediaQuery.mobile} {
     border-radius: ${({ theme }) => theme.borderRadius.primary};
     padding: 1rem;
   }
@@ -55,7 +55,7 @@ export const ResetButton = styled.button`
     transition: all 100ms ease-in;
   }
 
-  @media screen and ${({ theme }) => theme.mediaQuery.tablet} {
+  @media ${({ theme }) => theme.mediaQuery.tablet} {
     padding: 0.4rem;
     gap: 0.4rem;
     svg {
@@ -67,7 +67,7 @@ export const ResetButton = styled.button`
     }
   }
 
-  @media screen and ${({ theme }) => theme.mediaQuery.mobile} {
+  @media ${({ theme }) => theme.mediaQuery.mobile} {
     padding: 0.2rem;
     gap: 0.2rem;
     svg {
@@ -79,11 +79,11 @@ export const ResetButton = styled.button`
 export const ResetSpan = styled.span`
   font-size: 1rem;
 
-  @media screen and ${({ theme }) => theme.mediaQuery.tablet} {
+  @media ${({ theme }) => theme.mediaQuery.tablet} {
     font-size: 0.9rem;
   }
 
-  @media screen and ${({ theme }) => theme.mediaQuery.mobile} {
+  @media ${({ theme }) => theme.mediaQuery.mobile} {
     font-size: 0.7rem;
   }
 `;
diff --git a/src/components/common/skillTagBox/skillTag/SkillTag.styled.ts b/src/components/common/skillTagBox/skillTag/SkillTag.styled.ts
@@ -21,7 +21,7 @@ export const Wrapper = styled.div<{ $select: boolean }>`
     transition: all 100ms ease-in-out;
   }
 
-  @media screen and ${({ theme }) => theme.mediaQuery.tablet} {
+  @media ${({ theme }) => theme.mediaQuery.tablet} {
     padding: 0.4rem;
     gap: 0.4rem;
     font-size: 0.9rem;
@@ -31,7 +31,7 @@ export const Wrapper = styled.div<{ $select: boolean }>`
     }
   }
 
-  @media screen and ${({ theme }) => theme.mediaQuery.mobile} {
+  @media ${({ theme }) => theme.mediaQuery.mobile} {
     padding: 0.2rem;
     gap: 0.2rem;
     font-size: 0.8rem;
diff --git a/src/components/common/skillTagBox/skillTag/skillTagImg/SkillTagImg.styled.ts b/src/components/common/skillTagBox/skillTag/skillTagImg/SkillTagImg.styled.ts
@@ -12,11 +12,11 @@ export const SkillImg = styled.img<Pick<SkillTagImgProps, '$select'>>`
   border: 1px solid
     ${({ theme, $select }) => ($select ? 'none' : theme.color.border)};
 
-  @media screen and ${({ theme }) => theme.mediaQuery.tablet} {
+  @media ${({ theme }) => theme.mediaQuery.tablet} {
     width: 2rem;
   }
 
-  @media screen and ${({ theme }) => theme.mediaQuery.mobile} {
+  @media ${({ theme }) => theme.mediaQuery.mobile} {
     width: 1.5rem;
   }
 `;
diff --git a/src/components/home/projectCardLists/ProjectCardLists.styled.ts b/src/components/home/projectCardLists/ProjectCardLists.styled.ts
@@ -9,11 +9,11 @@ export const CardListTitleWrapper = styled.div``;
 export const CardListTitle = styled.h1`
   padding: 6rem 0 2rem 0;
 
-  @media screen and ${({ theme }) => theme.mediaQuery.tablet} {
+  @media ${({ theme }) => theme.mediaQuery.tablet} {
     padding: 4rem 0 2rem 0;
   }
 
-  @media screen and ${({ theme }) => theme.mediaQuery.mobile} {
+  @media ${({ theme }) => theme.mediaQuery.mobile} {
     padding: 2rem 0 2rem 0;
     font-size: 1.5rem;
   }
@@ -32,13 +32,13 @@ export const Wrapper = styled.div<{ $flex: boolean }>`
     width: 100%;
   }
 
-  @media screen and ${({ theme }) => theme.mediaQuery.tablet} {
+  @media ${({ theme }) => theme.mediaQuery.tablet} {
     grid-template-columns: ${({ $flex }) =>
       $flex ? '' : 'repeat(auto-fit, minmax(40%, 1fr))'};
     gap: 2rem;
   }
 
-  @media screen and ${({ theme }) => theme.mediaQuery.mobile} {
+  @media ${({ theme }) => theme.mediaQuery.mobile} {
     width: 100%;
     grid-template-columns: ${({ $flex }) =>
       $flex ? '' : 'repeat(auto-fit, minmax(50%, 1fr))'};
diff --git a/src/components/home/projectCardLists/ProjectCardLists.tsx b/src/components/home/projectCardLists/ProjectCardLists.tsx
@@ -22,7 +22,7 @@ export default function ProjectCardLists() {
 
   if (isLoading)
     return (
-      <EmptyLoadingPage height='115.2rem' tHeight='142rem' mHeight='275rem' />
+      <EmptyLoadingPage height='115.2rem' $tHeight='142rem' $mHeight='275rem' />
     );
 
   return (
diff --git a/src/components/home/projectCardLists/cardList/CardList.styled.ts b/src/components/home/projectCardLists/cardList/CardList.styled.ts
@@ -14,7 +14,7 @@ export const Container = styled.article`
   flex-direction: column;
   gap: 1rem;
 
-  @media screen and ${({ theme }) => theme.mediaQuery.mobile} {
+  @media ${({ theme }) => theme.mediaQuery.mobile} {
     padding: 1.5rem;
     gap: 0.5rem;
     height: 18rem;
@@ -105,7 +105,7 @@ export const StatusWrapper = styled.div`
 export const BeginnerImg = styled.img`
   width: 2rem;
 
-  @media screen and ${({ theme }) => theme.mediaQuery.mobile} {
+  @media ${({ theme }) => theme.mediaQuery.mobile} {
     width: 1.5rem;
   }
 `;
@@ -119,7 +119,7 @@ export const ViewWrapper = styled.div`
     color: #5f5f5f;
   }
 
-  @media screen and ${({ theme }) => theme.mediaQuery.mobile} {
+  @media ${({ theme }) => theme.mediaQuery.mobile} {
     svg {
       width: 1rem;
     }
@@ -130,7 +130,7 @@ export const ViewCount = styled.span`
   flex-direction: row;
   color: #5f5f5f;
 
-  @media screen and ${({ theme }) => theme.mediaQuery.mobile} {
+  @media ${({ theme }) => theme.mediaQuery.mobile} {
     align-items: end;
     font-size: 0.9rem;
   }
diff --git a/src/components/home/projectCardLists/pagination/Pagination.styled.ts b/src/components/home/projectCardLists/pagination/Pagination.styled.ts
@@ -15,7 +15,7 @@ export const Wrapper = styled.div`
     width: 1.5rem;
   }
 
-  @media screen and ${({ theme }) => theme.mediaQuery.mobile} {
+  @media ${({ theme }) => theme.mediaQuery.mobile} {
     gap: 0.8rem;
     svg {
       width: 1rem;
@@ -38,7 +38,7 @@ export const Pagination = styled.button<{ $select: boolean }>`
     $select ? theme.color.navy : 'initial'};
   color: ${({ $select, theme }) => ($select ? theme.color.white : 'initial')};
 
-  @media screen and ${({ theme }) => theme.mediaQuery.mobile} {
+  @media ${({ theme }) => theme.mediaQuery.mobile} {
     width: 1rem;
     height: 1rem;
     font-size: 1rem;
@@ -51,7 +51,7 @@ export const PaginationDoubleButton = styled.button`
   font-size: 1.1rem;
   font-weight: 500;
 
-  @media screen and ${({ theme }) => theme.mediaQuery.mobile} {
+  @media ${({ theme }) => theme.mediaQuery.mobile} {
     font-size: 1rem;
   }
 `;
diff --git a/src/components/home/projectStats/ProjectStats.styled.ts b/src/components/home/projectStats/ProjectStats.styled.ts
@@ -3,25 +3,25 @@ import styled from 'styled-components';
 export const Container = styled.section`
   padding: 8rem 0;
 
-  @media screen and ${({ theme }) => theme.mediaQuery.tablet} {
+  @media ${({ theme }) => theme.mediaQuery.tablet} {
     padding: 3rem 0;
   }
 
-  @media screen and ${({ theme }) => theme.mediaQuery.mobile} {
+  @media ${({ theme }) => theme.mediaQuery.mobile} {
     padding: 2rem 0;
   }
 `;
 export const Wrapper = styled.div`
   width: 100%;
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(30%, auto));
+  grid-template-columns: repeat(auto-fit, minmax(30%, auto));
   justify-content: space-evenly;
 
-  @media screen and ${({ theme }) => theme.mediaQuery.tablet} {
+  @media ${({ theme }) => theme.mediaQuery.tablet} {
   }
 
-  @media screen and ${({ theme }) => theme.mediaQuery.mobile} {
-    grid-template-columns: repeat(auto-fill, minmax(30%, auto));
+  @media ${({ theme }) => theme.mediaQuery.mobile} {
+    grid-template-columns: repeat(auto-fit, minmax(30%, auto));
     gap: 1rem;
     padding: 0;
   }
diff --git a/src/components/home/projectStats/projectStat/ProjectStat.styled.ts b/src/components/home/projectStats/projectStat/ProjectStat.styled.ts
@@ -6,11 +6,11 @@ export const Container = styled.div`
   align-items: center;
   gap: 1rem;
 
-  @media screen and ${({ theme }) => theme.mediaQuery.tablet} {
+  @media ${({ theme }) => theme.mediaQuery.tablet} {
     gap: 0.5rem;
   }
 
-  @media screen and ${({ theme }) => theme.mediaQuery.mobile} {
+  @media ${({ theme }) => theme.mediaQuery.mobile} {
     padding-left: 1rem;
     gap: 0.3rem;
     align-items: start;
@@ -22,11 +22,11 @@ export const Border = styled.div`
   height: 4rem;
   background-color: ${({ theme }) => theme.color.navy};
 
-  @media screen and ${({ theme }) => theme.mediaQuery.tablet} {
+  @media ${({ theme }) => theme.mediaQuery.tablet} {
     height: 3rem;
   }
 
-  @media screen and ${({ theme }) => theme.mediaQuery.mobile} {
+  @media ${({ theme }) => theme.mediaQuery.mobile} {
     width: 0.1rem;
   }
 `;
@@ -37,11 +37,11 @@ export const StatNumber = styled.div`
   font-size: 2rem;
   font-weight: bold;
 
-  @media screen and ${({ theme }) => theme.mediaQuery.tablet} {
+  @media ${({ theme }) => theme.mediaQuery.tablet} {
     font-size: 1.5rem;
   }
 
-  @media screen and ${({ theme }) => theme.mediaQuery.mobile} {
+  @media ${({ theme }) => theme.mediaQuery.mobile} {
     font-size: 1rem;
   }
 `;
@@ -50,10 +50,10 @@ export const StatTitle = styled.div`
   font-size: 1.25rem;
   font-weight: 500;
 
-  @media screen and ${({ theme }) => theme.mediaQuery.tablet} {
+  @media ${({ theme }) => theme.mediaQuery.tablet} {
     font-size: 1rem;
   }
-  @media screen and ${({ theme }) => theme.mediaQuery.mobile} {
+  @media ${({ theme }) => theme.mediaQuery.mobile} {
     font-size: 0.8rem;
   }
 `;
diff --git a/src/components/home/searchFiltering/SearchFiltering.styled.ts b/src/components/home/searchFiltering/SearchFiltering.styled.ts
@@ -8,13 +8,13 @@ export const Wrapper = styled.div`
   align-items: center;
   position: relative;
 
-  @media screen and ${({ theme }) => theme.mediaQuery.tablet} {
+  @media ${({ theme }) => theme.mediaQuery.tablet} {
     flex-direction: column;
     align-items: flex-end;
     gap: 1.5rem;
   }
 
-  @media screen and ${({ theme }) => theme.mediaQuery.mobile} {
+  @media ${({ theme }) => theme.mediaQuery.mobile} {
     gap: 1rem;
   }
 `;
diff --git a/src/components/home/searchFiltering/filteringContents/FilteringContents.styled.ts b/src/components/home/searchFiltering/filteringContents/FilteringContents.styled.ts
diff --git a/src/components/home/searchFiltering/filteringContents/filtering/Filtering.styled.ts b/src/components/home/searchFiltering/filteringContents/filtering/Filtering.styled.ts
diff --git a/src/components/home/searchFiltering/search/Search.styled.ts b/src/components/home/searchFiltering/search/Search.styled.ts
diff --git a/src/pages/home/Home.styled.ts b/src/pages/home/Home.styled.ts

Original file line number	Diff line number	Diff line change
@@ -5,11 +5,11 @@ export const Container = styled.div<EmptyLoadingPageProps>`
`5`	`5`	`width: 100%;`
`6`	`6`	`height: ${({ height }) => height};`
`7`	`7`
`8`		`- @media screen ${({ theme }) => theme.mediaQuery.tablet} {`
`9`		`- height: ${({ tHeight }) => tHeight};`
	`8`	`+ @media ${({ theme }) => theme.mediaQuery.tablet} {`
	`9`	`+ height: ${({ $tHeight }) => $tHeight};`
`10`	`10`	`}`
`11`	`11`
`12`		`- @media screen ${({ theme }) => theme.mediaQuery.mobile} {`
`13`		`- height: ${({ mHeight }) => mHeight};`
	`12`	`+ @media ${({ theme }) => theme.mediaQuery.mobile} {`
	`13`	`+ height: ${({ $mHeight }) => $mHeight};`
`14`	`14`	`}`
`15`	`15`	`;
Original file line number	Diff line number	Diff line change
@@ -6,11 +6,11 @@ export const LayoutContainer = styled.div`
`6`	`6`	`max-width: ${({ theme }) => theme.layout.width.desktop};`
`7`	`7`	`padding: 0 120px;`
`8`	`8`
`9`		`- @media screen and ${({ theme }) => theme.mediaQuery.tablet} {`
	`9`	`+ @media ${({ theme }) => theme.mediaQuery.tablet} {`
`10`	`10`	`padding: 0 60px;`
`11`	`11`	`}`
`12`	`12`
`13`		`- @media screen and ${({ theme }) => theme.mediaQuery.mobile} {`
	`13`	`+ @media ${({ theme }) => theme.mediaQuery.mobile} {`
`14`	`14`	`padding: 0;`
`15`	`15`	`}`
`16`	`16`	`;
Original file line number	Diff line number	Diff line change
@@ -8,11 +8,11 @@ export const Container = styled.div<Pick<SkillTagBoxProps, 'width'>>`
`8`	`8`	`background-color: ${({ theme }) => theme.color.white};`
`9`	`9`	`padding: 2rem;`
`10`	`10`
`11`		`- @media screen and ${({ theme }) => theme.mediaQuery.tablet} {`
	`11`	`+ @media ${({ theme }) => theme.mediaQuery.tablet} {`
`12`	`12`	`padding: 1.5rem;`
`13`	`13`	`}`
`14`	`14`
`15`		`- @media screen and ${({ theme }) => theme.mediaQuery.mobile} {`
	`15`	`+ @media ${({ theme }) => theme.mediaQuery.mobile} {`
`16`	`16`	`border-radius: ${({ theme }) => theme.borderRadius.primary};`
`17`	`17`	`padding: 1rem;`
`18`	`18`	`}`
@@ -55,7 +55,7 @@ export const ResetButton = styled.button`
`55`	`55`	`transition: all 100ms ease-in;`
`56`	`56`	`}`
`57`	`57`
`58`		`- @media screen and ${({ theme }) => theme.mediaQuery.tablet} {`
	`58`	`+ @media ${({ theme }) => theme.mediaQuery.tablet} {`
`59`	`59`	`padding: 0.4rem;`
`60`	`60`	`gap: 0.4rem;`
`61`	`61`	`svg {`
@@ -67,7 +67,7 @@ export const ResetButton = styled.button`
`67`	`67`	`}`
`68`	`68`	`}`
`69`	`69`
`70`		`- @media screen and ${({ theme }) => theme.mediaQuery.mobile} {`
	`70`	`+ @media ${({ theme }) => theme.mediaQuery.mobile} {`
`71`	`71`	`padding: 0.2rem;`
`72`	`72`	`gap: 0.2rem;`
`73`	`73`	`svg {`
@@ -79,11 +79,11 @@ export const ResetButton = styled.button`
`79`	`79`	export const ResetSpan = styled.span`
`80`	`80`	`font-size: 1rem;`
`81`	`81`
`82`		`- @media screen and ${({ theme }) => theme.mediaQuery.tablet} {`
	`82`	`+ @media ${({ theme }) => theme.mediaQuery.tablet} {`
`83`	`83`	`font-size: 0.9rem;`
`84`	`84`	`}`
`85`	`85`
`86`		`- @media screen and ${({ theme }) => theme.mediaQuery.mobile} {`
	`86`	`+ @media ${({ theme }) => theme.mediaQuery.mobile} {`
`87`	`87`	`font-size: 0.7rem;`
`88`	`88`	`}`
`89`	`89`	`;
Original file line number	Diff line number	Diff line change
@@ -21,7 +21,7 @@ export const Wrapper = styled.div<{ $select: boolean }>`
`21`	`21`	`transition: all 100ms ease-in-out;`
`22`	`22`	`}`
`23`	`23`
`24`		`- @media screen and ${({ theme }) => theme.mediaQuery.tablet} {`
	`24`	`+ @media ${({ theme }) => theme.mediaQuery.tablet} {`
`25`	`25`	`padding: 0.4rem;`
`26`	`26`	`gap: 0.4rem;`
`27`	`27`	`font-size: 0.9rem;`
@@ -31,7 +31,7 @@ export const Wrapper = styled.div<{ $select: boolean }>`
`31`	`31`	`}`
`32`	`32`	`}`
`33`	`33`
`34`		`- @media screen and ${({ theme }) => theme.mediaQuery.mobile} {`
	`34`	`+ @media ${({ theme }) => theme.mediaQuery.mobile} {`
`35`	`35`	`padding: 0.2rem;`
`36`	`36`	`gap: 0.2rem;`
`37`	`37`	`font-size: 0.8rem;`
Original file line number	Diff line number	Diff line change
@@ -12,11 +12,11 @@ export const SkillImg = styled.img<Pick<SkillTagImgProps, '$select'>>`
`12`	`12`	`border: 1px solid`
`13`	`13`	`${({ theme, $select }) => ($select ? 'none' : theme.color.border)};`
`14`	`14`
`15`		`- @media screen and ${({ theme }) => theme.mediaQuery.tablet} {`
	`15`	`+ @media ${({ theme }) => theme.mediaQuery.tablet} {`
`16`	`16`	`width: 2rem;`
`17`	`17`	`}`
`18`	`18`
`19`		`- @media screen and ${({ theme }) => theme.mediaQuery.mobile} {`
	`19`	`+ @media ${({ theme }) => theme.mediaQuery.mobile} {`
`20`	`20`	`width: 1.5rem;`
`21`	`21`	`}`
`22`	`22`	`;