feat(UI): 반응형 디자인 구현 및 스타일 개선

src/commons/components/features/Common/RemoteControl/RemoteControl.css.ts

@@ -1,11 +1,17 @@
 import { vars } from '@/commons/styles/globalStyles.css';
+import { mediaQueries } from '@/commons/utils/ui/mediaQueries/mediaQueries';
 import { style } from '@vanilla-extract/css';
 
 export const wrapper = style({
   position: 'fixed',
   bottom: '100px',
   right: '60px',
 
+  ...mediaQueries({
+    tablet: { right: '20px', bottom: '40px' },
+    mobile: { right: '10px', bottom: '20px' },
+  }),
+
   display: 'flex',
   flexDirection: 'column',
 

src/commons/components/features/Common/Slider/Slider.css.ts

@@ -8,6 +8,8 @@ export const wrapper = style({
 
   flex: 1,
   height: '100%',
+
+  zIndex: 1000,
 });
 
 export const Bar = style({

src/commons/components/features/Inputs/ExpandedSearch/ExpandedSearch.css.ts

@@ -1,4 +1,5 @@
 import { vars } from '@/commons/styles/globalStyles.css';
+import { mediaQueries } from '@/commons/utils/ui/mediaQueries/mediaQueries';
 import { style } from '@vanilla-extract/css';
 
 export const OutExpandedWrapper = style({
@@ -17,7 +18,6 @@ export const OutExpandedWrapper = style({
   padding: '80px 54px',
 
   zIndex: '1000',
-  // backgroundColor: 'rgba(0, 0, 0, 0.65)',
 
   backdropFilter: 'blur(10px)',
 });
@@ -32,9 +32,14 @@ export const expandedWrapper = style({
   display: 'flex',
   flexDirection: 'column',
 
-  width: '37rem',
+  width: '27rem',
   height: 'fit-content',
 
+  ...mediaQueries({
+    tablet: { width: '20rem' },
+    mobile: { width: '15rem' },
+  }),
+
   backgroundColor: `${vars.themeColor.color.searchBarBackground}`,
 
   borderRadius: '25px',

src/commons/components/features/Inputs/Search/Search.css.ts

@@ -1,4 +1,5 @@
 import { vars } from '@/commons/styles/globalStyles.css';
+import { mediaQueries } from '@/commons/utils/ui/mediaQueries/mediaQueries';
 import { style } from '@vanilla-extract/css';
 
 export const wrapper = style({
@@ -14,4 +15,9 @@ export const wrapper = style({
   borderRadius: '50px',
 
   cursor: 'pointer',
+
+  ...mediaQueries({
+    tablet: { width: '20rem' },
+    mobile: { width: '15rem' },
+  }),
 });

src/commons/components/features/Items/Card/Card.css.ts

@@ -1,24 +1,53 @@
 import { vars } from '@/commons/styles/globalStyles.css';
+import { mediaQueries } from '@/commons/utils/ui/mediaQueries/mediaQueries';
 import { style } from '@vanilla-extract/css';
 
 export const wrapper = style({
-  display: 'flex',
-  flexWrap: 'wrap',
-  justifyContent: 'center',
+  display: 'grid',
+  gridTemplateColumns: 'repeat(4, 1fr)',
 
   marginTop: '60px',
   maxWidth: '1200px',
+
   gap: '30px',
+
+  ...mediaQueries({
+    tabletLarge: {
+      gridTemplateColumns: 'repeat(3, 1fr)',
+    },
+    tablet: {
+      gridTemplateColumns: 'repeat(3, 1fr)',
+    },
+    tabletSmall: {
+      gridTemplateColumns: 'repeat(2, 1fr)',
+    },
+    mobile: {
+      gridTemplateColumns: '1fr',
+    },
+  }),
 });
 
 export const cardWrapper = style({
   display: 'flex',
   flexDirection: 'column',
 
-  width: '250px',
-  height: '320px',
+  width: '15.6rem',
+  height: '19.9rem',
   borderRadius: '12px',
 
+  overflow: 'hidden',
+
+  ...mediaQueries({
+    tablet: {
+      width: '20rem',
+      height: '19.9rem',
+    },
+    mobile: {
+      width: '100%',
+      height: '19.9rem',
+    },
+  }),
+
   backgroundColor: `${vars.themeColor.color.secondary}`,
 
   transition: 'transform 0.5s ease-in-out',
@@ -28,6 +57,12 @@ export const cardWrapper = style({
   },
 });
 
+export const imageWrapper = style({
+  position: 'relative',
+  width: '100%',
+  height: '130px',
+});
+
 export const cardImageWrapper = style({
   width: '250px',
   height: '130px',
@@ -38,24 +73,7 @@ export const bottomWrapper = style({
   flexDirection: 'column',
   flex: 1,
 
-  padding: '20px',
-});
-
-export const tagWrapper = style({
-  display: 'flex',
-  flexWrap: 'wrap',
-
-  gap: '10px',
-});
-
-export const tag = style({
-  padding: '4px 8px',
-
-  borderRadius: '50px',
-  fontSize: '12px',
-
-  backgroundColor: '#fff',
-  color: '#000',
+  padding: '6px 12px 12px',
 });
 
 export const title = style({

src/commons/components/features/Items/Card/Card.tsx

@@ -1,7 +1,8 @@
 import Image from 'next/image';
 import * as styles from './Card.css';
+import { TagList } from '../../Lists/TagList/TagList';
 
-const data = Array.from({ length: 20 }, (_, index) => ({
+const data = Array.from({ length: 22 }, (_, index) => ({
   id: index,
   title: '이벤트 루프는 무엇인가..? 넌 알고 있었니?',
   tags: ['react', 'type', 'next.js', 'javascript', '리액트'],
@@ -14,15 +15,11 @@ export default function Card() {
     <section className={styles.wrapper}>
       {data.map((item) => (
         <article key={item.id} className={styles.cardWrapper}>
-          <Image src="/images/example/image1.png" alt="card" width={250} height={130} />
+          <div className={styles.imageWrapper}>
+            <Image src="/images/example/image1.png" alt="card" layout="fill" objectFit="cover" />
+          </div>
           <div className={styles.bottomWrapper}>
-            <div className={styles.tagWrapper}>
-              {item.tags.map((tag) => (
-                <span key={tag} className={styles.tag}>
-                  {tag}
-                </span>
-              ))}
-            </div>
+            <TagList tags={item.tags} />
             <h2 className={styles.title}>{item.title}</h2>
             <footer className={styles.infoWrapper}>
               <div className={styles.textWrapper}>

src/commons/components/widgets/Header/header.css.ts

@@ -1,4 +1,5 @@
 import { vars } from '@/commons/styles/globalStyles.css';
+import { mediaQueries } from '@/commons/utils/ui/mediaQueries/mediaQueries';
 import { style } from '@vanilla-extract/css';
 
 export const wrapper = style({
@@ -10,12 +11,22 @@ export const wrapper = style({
   width: '100dvw',
   height: '80px',
   maxWidth: '1200px',
+
+  ...mediaQueries({
+    tablet: { padding: '0 20px' },
+    mobile: { padding: '0 10px' },
+  }),
 });
 
 export const title = style({
   fontSize: '35px',
 
   color: `${vars.themeColor.color.mainFontColor}`,
+
+  ...mediaQueries({
+    mobile: { fontSize: '16px' },
+    tablet: { fontSize: '24px' },
+  }),
 });
 
 export const left = style({

src/commons/styles/globalStyles.css.ts

@@ -32,13 +32,13 @@ const themeColor = createThemeContract({
 export const lightTheme = createTheme(themeColor, {
   color: {
     primary: '#000000',
-    secondary: '#E9E9E9',
+    secondary: '#d9d9d9',
     mainBackground: '#ffffff',
     contentBackground: '#ffffff',
     mainFontColor: '#000000',
     secondaryFontColor: '#ffffff',
-    searchBarBackground: '#E9E9E9',
-    cardBackground: '#E9E9E9',
+    searchBarBackground: '#d9d9d9',
+    cardBackground: '#d9d9d9',
     tagIconBackground: '#ffffff',
   },
 });

src/commons/utils/ui/mediaQueries/mediaQueries.ts

@@ -0,0 +1,26 @@
+import { StyleRule } from '@vanilla-extract/css';
+
+type BreakpointKey = keyof typeof breakpoints;
+
+export const breakpoints = {
+  mobileSmall: 480,
+  mobile: 768,
+  mobileLarge: 896,
+  tabletSmall: 960,
+  tablet: 1024,
+  tabletLarge: 1148,
+  desktop: 1280,
+};
+
+export const mediaQuery = (breakpoint: BreakpointKey, rules: StyleRule) => ({
+  [`@media (max-width: ${breakpoints[breakpoint]}px)`]: rules,
+});
+
+export const mediaQueries = (queries: Partial<Record<BreakpointKey, StyleRule>>) =>
+  Object.entries(queries).reduce(
+    (acc, [key, value]) => ({
+      ...acc,
+      ...mediaQuery(key as BreakpointKey, value),
+    }),
+    {},
+  );