diff --git a/package-lock.json b/package-lock.json
index 54fa5c4d..3d5e0b4a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -22,7 +22,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"
       },
@@ -60,6 +59,7 @@
         "typescript": "~5.6.2",
         "typescript-eslint": "^8.18.2",
         "vite": "^6.0.5",
+        "vite-plugin-compression": "^0.5.1",
         "vitest": "^2.1.8"
       },
       "optionalDependencies": {
@@ -584,6 +584,7 @@
       "cpu": [
         "ppc64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -600,6 +601,7 @@
       "cpu": [
         "arm"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -616,6 +618,7 @@
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -632,6 +635,7 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -648,6 +652,7 @@
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -664,6 +669,7 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -680,6 +686,7 @@
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -696,6 +703,7 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -712,6 +720,7 @@
       "cpu": [
         "arm"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -728,6 +737,7 @@
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -744,6 +754,7 @@
       "cpu": [
         "ia32"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -760,6 +771,7 @@
       "cpu": [
         "loong64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -776,6 +788,7 @@
       "cpu": [
         "mips64el"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -792,6 +805,7 @@
       "cpu": [
         "ppc64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -808,6 +822,7 @@
       "cpu": [
         "riscv64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -824,6 +839,7 @@
       "cpu": [
         "s390x"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -840,6 +856,7 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -856,6 +873,7 @@
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -872,6 +890,7 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -888,6 +907,7 @@
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -904,6 +924,7 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -920,6 +941,7 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -936,6 +958,7 @@
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -952,6 +975,7 @@
       "cpu": [
         "ia32"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -968,6 +992,7 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1528,6 +1553,7 @@
       "cpu": [
         "arm"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1541,6 +1567,7 @@
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1554,6 +1581,7 @@
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1567,6 +1595,7 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1580,6 +1609,7 @@
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1593,6 +1623,7 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1606,6 +1637,7 @@
       "cpu": [
         "arm"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1619,6 +1651,7 @@
       "cpu": [
         "arm"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1632,6 +1665,7 @@
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1645,6 +1679,7 @@
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1658,6 +1693,7 @@
       "cpu": [
         "loong64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1671,6 +1707,7 @@
       "cpu": [
         "ppc64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1684,6 +1721,7 @@
       "cpu": [
         "riscv64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1697,6 +1735,7 @@
       "cpu": [
         "s390x"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1710,6 +1749,7 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1723,6 +1763,7 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1736,6 +1777,7 @@
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1749,6 +1791,7 @@
       "cpu": [
         "ia32"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2952,7 +2995,7 @@
       "version": "22.10.10",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-22.10.10.tgz",
       "integrity": "sha512-X47y/mPNzxviAGY5TcYPtYL8JsY3kAq2n8fMmKoRCxq/c4v4pyGNCzM2R6+M5/umG4ZfHuT+sgqDYqWc9rJ6ww==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "peer": true,
       "dependencies": {
@@ -3648,6 +3691,7 @@
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
       "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "color-convert": "^2.0.1"
@@ -4166,6 +4210,7 @@
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
       "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "ansi-styles": "^4.1.0",
@@ -4312,6 +4357,7 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
       "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "color-name": "~1.1.4"
@@ -4324,6 +4370,7 @@
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/combined-stream": {
@@ -4922,6 +4969,7 @@
       "version": "0.24.2",
       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.24.2.tgz",
       "integrity": "sha512-+9egpBW8I3CD5XPe0n6BfT5fxLzxrlDzqydF3aviG+9ni1lDC/OvMHcxqEFV0+LANZG5R1bFMWfUrjVsdwxJvA==",
+      "dev": true,
       "hasInstallScript": true,
       "license": "MIT",
       "bin": {
@@ -5658,6 +5706,7 @@
       "version": "10.1.0",
       "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-10.1.0.tgz",
       "integrity": "sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "graceful-fs": "^4.2.0",
@@ -5672,6 +5721,7 @@
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
       "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+      "dev": true,
       "hasInstallScript": true,
       "license": "MIT",
       "optional": true,
@@ -5866,6 +5916,7 @@
       "version": "4.2.11",
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
       "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
+      "dev": true,
       "license": "ISC"
     },
     "node_modules/graphemer": {
@@ -5902,6 +5953,7 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
       "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=8"
@@ -7055,6 +7107,7 @@
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
       "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "universalify": "^2.0.0"
@@ -9509,6 +9562,7 @@
       "version": "4.32.0",
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.32.0.tgz",
       "integrity": "sha512-JmrhfQR31Q4AuNBjjAX4s+a/Pu/Q8Q9iwjWBsjRH1q52SPFE2NqRMK6fUZKKnvKO6id+h7JIRf0oYsph53eATg==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@types/estree": "1.0.6"
@@ -10239,6 +10293,7 @@
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
       "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "has-flag": "^4.0.0"
@@ -10643,7 +10698,7 @@
       "version": "6.20.0",
       "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.20.0.tgz",
       "integrity": "sha512-Ny6QZ2Nju20vw1SRHe3d9jVu6gJ+4e3+MMpqu7pqE5HT6WsTSlce++GQmK5UXS8mzV8DSYHrQH+Xrf2jVcuKNg==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "peer": true
     },
@@ -10749,6 +10804,7 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz",
       "integrity": "sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 10.0.0"
@@ -10939,6 +10995,7 @@
       "version": "6.0.11",
       "resolved": "https://registry.npmjs.org/vite/-/vite-6.0.11.tgz",
       "integrity": "sha512-4VL9mQPKoHy4+FE0NnRE/kbY51TOfaknxAjt3fJbGJxhIpBZiqVzlZDEesWWsuREXHwNdAoOFZ9MkPEVXczHwg==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "esbuild": "^0.24.2",
@@ -11552,6 +11609,7 @@
       "version": "0.5.1",
       "resolved": "https://registry.npmjs.org/vite-plugin-compression/-/vite-plugin-compression-0.5.1.tgz",
       "integrity": "sha512-5QJKBDc+gNYVqL/skgFAP81Yuzo9R+EAf19d+EtsMF/i8kFUpNi3J/H01QD3Oo8zBQn+NzoCIFkpPLynoOzaJg==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "chalk": "^4.1.2",
@@ -11566,6 +11624,7 @@
       "version": "8.5.1",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.1.tgz",
       "integrity": "sha512-6oz2beyjc5VMn/KV1pPw8fliQkhBXrVn1Z3TVyqZxU8kZpzEKhBdmCFqI6ZbmGtamQvQGuU1sgPTk8ZrXDD7jQ==",
+      "dev": true,
       "funding": [
         {
           "type": "opencollective",
diff --git a/package.json b/package.json
index fdaaa5fb..91a939b8 100644
--- 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
index 50d83819..7b0b3637 100644
--- 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
index a7e4afb4..54954218 100644
--- 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
index 474f8335..99200d9e 100644
--- 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
index 12cc247a..6614a1f1 100644
--- 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
index abec4fd1..009e62d3 100644
--- 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
index 3ac8507c..637b4a5b 100644
--- 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
index 5f157f11..bacb339e 100644
--- 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
index 65f32d58..60852409 100644
--- 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
index 882d0c4c..bfef85d5 100644
--- 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
index 02a2f4a4..54488cf3 100644
--- 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
index cfc5685d..378f2bc2 100644
--- 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
index 32078e2b..c933b8f0 100644
--- 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
index 032cef94..dbdad14e 100644
--- 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
index 22899963..1dc2fb14 100644
--- 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
index bfb83f6f..f20ae36d 100644
--- a/src/components/home/searchFiltering/filteringContents/FilteringContents.styled.ts
+++ b/src/components/home/searchFiltering/filteringContents/FilteringContents.styled.ts
@@ -20,7 +20,7 @@ export const Container = styled.div`
     width: 1rem;
   }
 
-  @media screen and ${({ theme }) => theme.mediaQuery.mobile} {
+  @media ${({ theme }) => theme.mediaQuery.mobile} {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(45%, auto));
     gap: 0.5rem;
@@ -52,7 +52,7 @@ export const SkillTagBoxWrapper = styled.div`
   position: absolute;
   top: 3rem;
 
-  @media screen and ${({ theme }) => theme.mediaQuery.mobile} {
+  @media ${({ theme }) => theme.mediaQuery.mobile} {
     top: 2.5rem;
   }
 `;
@@ -74,7 +74,7 @@ export const BeginnerButton = styled.button<{ $toggle: boolean | null }>`
   color: ${({ theme, $toggle }) => ($toggle ? theme.color.navy : 'initial')};
   font-weight: ${({ $toggle }) => ($toggle ? 'bold' : 'initial')};
 
-  @media screen and ${({ theme }) => theme.mediaQuery.mobile} {
+  @media ${({ theme }) => theme.mediaQuery.mobile} {
     padding: 0 1rem;
   }
 `;
diff --git a/src/components/home/searchFiltering/filteringContents/filtering/Filtering.styled.ts b/src/components/home/searchFiltering/filteringContents/filtering/Filtering.styled.ts
index 8cd20c61..47edbe94 100644
--- a/src/components/home/searchFiltering/filteringContents/filtering/Filtering.styled.ts
+++ b/src/components/home/searchFiltering/filteringContents/filtering/Filtering.styled.ts
@@ -36,7 +36,7 @@ export const SelectWrapper = styled.div`
   overflow: hidden;
   background-color: ${({ theme }) => theme.color.white};
 
-  @media screen and ${({ theme }) => theme.mediaQuery.mobile} {
+  @media ${({ theme }) => theme.mediaQuery.mobile} {
     top: 2.2rem;
   }
 `;
@@ -53,7 +53,7 @@ export const SelectButton = styled.button`
     color: ${({ theme }) => theme.color.white};
   }
 
-  @media screen and ${({ theme }) => theme.mediaQuery.mobile} {
+  @media ${({ theme }) => theme.mediaQuery.mobile} {
     font-size: 0.9rem;
   }
 `;
diff --git a/src/components/home/searchFiltering/search/Search.styled.ts b/src/components/home/searchFiltering/search/Search.styled.ts
index 9fc65348..21067699 100644
--- a/src/components/home/searchFiltering/search/Search.styled.ts
+++ b/src/components/home/searchFiltering/search/Search.styled.ts
@@ -8,11 +8,11 @@ export const Container = styled.div`
   border: 1px solid ${({ theme }) => theme.color.border};
   border-radius: 1.5rem;
 
-  @media screen and ${({ theme }) => theme.mediaQuery.tablet} {
+  @media ${({ theme }) => theme.mediaQuery.tablet} {
     width: 50vw;
   }
 
-  @media screen and ${({ theme }) => theme.mediaQuery.mobile} {
+  @media ${({ theme }) => theme.mediaQuery.mobile} {
     padding: 0.4rem 0;
     width: 100%;
   }
@@ -30,7 +30,7 @@ export const SearchForm = styled.form`
   justify-content: space-between;
   padding: 0 1.2rem;
 
-  @media screen and ${({ theme }) => theme.mediaQuery.mobile} {
+  @media ${({ theme }) => theme.mediaQuery.mobile} {
     padding: 0 1rem;
   }
 `;
@@ -49,7 +49,7 @@ export const SearchButton = styled.button`
     width: 1.6rem;
   }
 
-  @media screen and ${({ theme }) => theme.mediaQuery.mobile} {
+  @media ${({ theme }) => theme.mediaQuery.mobile} {
     svg {
       width: 1.2rem;
     }
diff --git a/src/pages/home/Home.styled.ts b/src/pages/home/Home.styled.ts
index e885261e..e4a2be59 100644
--- a/src/pages/home/Home.styled.ts
+++ b/src/pages/home/Home.styled.ts
@@ -5,7 +5,7 @@ export const Container = styled.main`
 `;
 
 export const Wrapper = styled.div`
-  @media screen and ${({ theme }) => theme.mediaQuery.mobile} {
+  @media ${({ theme }) => theme.mediaQuery.mobile} {
     padding: 0 20px;
   }
 `;