From 4fbb153f0814fcc5354b43996e0456e7c6b53c6d Mon Sep 17 00:00:00 2001
From: steven-yn <ssungyeon94@gmail.com>
Date: Tue, 13 Feb 2024 23:51:37 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20main=20project=20=EC=BB=B4=ED=8F=AC?=
 =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EC=9E=91=EC=97=85=20=EC=99=84=EB=A3=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/MainProject/MainProject.css.ts | 57 +++++++++++++++++++
 src/components/Project/Project.css.ts         |  7 +++
 2 files changed, 64 insertions(+)

diff --git a/src/components/MainProject/MainProject.css.ts b/src/components/MainProject/MainProject.css.ts
index 1b6a24c..60f7fe1 100644
--- a/src/components/MainProject/MainProject.css.ts
+++ b/src/components/MainProject/MainProject.css.ts
@@ -20,6 +20,10 @@ export const wrapStyle = style([
       [ODSBreakpointTokenVariables['breakpoint-m']]: {
         padding: '0 0.69rem',
       },
+      [ODSBreakpointTokenVariables['breakpoint-s']]: {
+        flexDirection: 'column',
+        padding: '0',
+      },
     },
   },
 ]);
@@ -35,6 +39,11 @@ export const wrapVariants = styleVariants({
       [ODSBreakpointTokenVariables['breakpoint-l']]: {
         height: '20rem',
       },
+      [ODSBreakpointTokenVariables['breakpoint-s']]: {
+        gap: '4rem',
+        height: '100%',
+        paddingTop: '1.37rem',
+      },
     },
   },
   MOBILE: {
@@ -46,6 +55,11 @@ export const wrapVariants = styleVariants({
         gap: '3rem',
         height: '19.5rem',
       },
+      [ODSBreakpointTokenVariables['breakpoint-s']]: {
+        gap: '1.25rem',
+        height: 'auto',
+        paddingTop: '1.25rem',
+      },
     },
   },
 });
@@ -68,10 +82,19 @@ export const mockWrapVariants = styleVariants({
       [ODSBreakpointTokenVariables['breakpoint-m']]: {
         minWidth: '15.5625rem',
       },
+      [ODSBreakpointTokenVariables['breakpoint-s']]: {
+        gap: '0',
+        height: '20rem',
+      },
     },
   },
   MOBILE: {
     width: '100%',
+    '@media': {
+      [ODSBreakpointTokenVariables['breakpoint-s']]: {
+        justifyContent: 'center',
+      },
+    },
   },
 });
 
@@ -104,6 +127,11 @@ export const mockVariants = styleVariants({
         width: '11.25rem',
         height: '19.5rem',
       },
+      [ODSBreakpointTokenVariables['breakpoint-s']]: {
+        position: 'initial',
+        width: '15rem',
+        height: '26rem',
+      },
     },
   },
 });
@@ -119,12 +147,24 @@ export const contentWrapStyle = style({
     [ODSBreakpointTokenVariables['breakpoint-l']]: {
       rowGap: '1rem',
     },
+    [ODSBreakpointTokenVariables['breakpoint-s']]: {
+      gridTemplateColumns: 'auto 1fr',
+      alignItems: 'center',
+      rowGap: '0.5rem',
+      columnGap: '0.5rem',
+    },
   },
 });
 
 export const titleStyle = style([
   colorVariants['gray-scale-02'],
   fontVariants['title-l-bold'],
+  {
+    '@media': {
+      [ODSBreakpointTokenVariables['breakpoint-s']]:
+        ODSTextTokenVariables['GNB-l-bold'],
+    },
+  },
 ]);
 
 export const periodStyle = style([
@@ -134,6 +174,12 @@ export const periodStyle = style([
     '@media': {
       [ODSBreakpointTokenVariables['breakpoint-m']]:
         ODSTextTokenVariables['paragraph-m-bold'],
+      [ODSBreakpointTokenVariables['breakpoint-s']]: {
+        fontSize: '0.75rem',
+        fontWeight: '700',
+        lineHeight: '1.125rem',
+        letterSpacing: '-0.00625rem',
+      },
     },
   },
 ]);
@@ -145,6 +191,10 @@ export const descriptionStyle = style([
     '@media': {
       [ODSBreakpointTokenVariables['breakpoint-m']]:
         ODSTextTokenVariables['paragraph-l-semibold'],
+      [ODSBreakpointTokenVariables['breakpoint-s']]: {
+        ...ODSTextTokenVariables['paragraph-m-medium'],
+        gridColumn: '1/3',
+      },
     },
   },
 ]);
@@ -154,5 +204,12 @@ export const buttonStyle = style([
   fontVariants['display-s-medium'],
   {
     width: '15rem',
+    '@media': {
+      [ODSBreakpointTokenVariables['breakpoint-s']]: {
+        gridColumn: '1/3',
+        width: 'fit-content',
+        padding: '0.5rem 2.44rem !important',
+      },
+    },
   },
 ]);
diff --git a/src/components/Project/Project.css.ts b/src/components/Project/Project.css.ts
index f153361..c1a7d32 100644
--- a/src/components/Project/Project.css.ts
+++ b/src/components/Project/Project.css.ts
@@ -1,8 +1,15 @@
 import { style } from '@vanilla-extract/css';
+import { ODSBreakpointTokenVariables } from '@/const/breakpoints';
 
 export const wrapStyle = style({
   display: 'flex',
   flexDirection: 'column',
   justifyContent: 'center',
   gap: '5rem',
+
+  '@media': {
+    [ODSBreakpointTokenVariables['breakpoint-s']]: {
+      gap: '0',
+    },
+  },
 });