feat: main project 컴포넌트 그라디언트 까지 완료

Ocean-Portfolio · Feb 13, 2024 · c4e36e0 · c4e36e0
1 parent 4fbb153
commit c4e36e0
Show file tree

Hide file tree

Showing 3 changed files with 72 additions and 24 deletions.
diff --git a/src/components/MainProject/MainProject.css.ts b/src/components/MainProject/MainProject.css.ts
@@ -64,38 +64,78 @@ export const wrapVariants = styleVariants({
   },
 });
 
-export const mockWrapStyle = style({
+const mockWrapStyle = style({
   position: 'relative',
   display: 'flex',
   alignItems: 'center',
   height: '100%',
 });
 
 export const mockWrapVariants = styleVariants({
-  DESKTOP: {
-    minWidth: '24.375rem',
+  DESKTOP: [
+    mockWrapStyle,
+    {
+      minWidth: '24.375rem',
 
-    '@media': {
-      [ODSBreakpointTokenVariables['breakpoint-xl']]: {
-        minWidth: '16.5625rem',
+      '@media': {
+        [ODSBreakpointTokenVariables['breakpoint-xl']]: {
+          minWidth: '16.5625rem',
+        },
+        [ODSBreakpointTokenVariables['breakpoint-m']]: {
+          minWidth: '15.5625rem',
+        },
+        [ODSBreakpointTokenVariables['breakpoint-s']]: {
+          gap: '0',
+          height: '20rem',
+        },
       },
-      [ODSBreakpointTokenVariables['breakpoint-m']]: {
-        minWidth: '15.5625rem',
-      },
-      [ODSBreakpointTokenVariables['breakpoint-s']]: {
-        gap: '0',
-        height: '20rem',
+    },
+  ],
+  MOBILE: [
+    mockWrapStyle,
+    {
+      overflow: 'hidden',
+      minWidth: '19.375rem',
+      '@media': {
+        [ODSBreakpointTokenVariables['breakpoint-l']]: {
+          width: '11.25rem',
+        },
+        [ODSBreakpointTokenVariables['breakpoint-s']]: {
+          width: '15rem',
+          justifyContent: 'center',
+        },
       },
     },
-  },
-  MOBILE: {
-    width: '100%',
-    '@media': {
-      [ODSBreakpointTokenVariables['breakpoint-s']]: {
-        justifyContent: 'center',
+  ],
+});
+
+const backgroundGradientStyle = style({
+  position: 'absolute',
+  right: '0',
+  zIndex: '10',
+});
+
+export const backgroundGradientVariants = styleVariants({
+  DESKTOP: [
+    backgroundGradientStyle,
+    {
+      background:
+        'linear-gradient(270deg, transparent 0%, rgba(1, 65, 124, 0.00) 76.5%, #276196 100%)',
+    },
+  ],
+  MOBILE: [
+    backgroundGradientStyle,
+    {
+      bottom: '-50%',
+      background:
+        'linear-gradient(0deg, #276196 54.16%, rgba(1, 65, 124, 0.00) 100%, #276196 100%)',
+      '@media': {
+        [ODSBreakpointTokenVariables['breakpoint-s']]: {
+          right: 'initial',
+        },
       },
     },
-  },
+  ],
 });
 
 export const mockStyle = style({
@@ -107,7 +147,6 @@ export const mockVariants = styleVariants({
   DESKTOP: {
     width: '54.875rem',
     height: '31.25rem',
-
     '@media': {
       [ODSBreakpointTokenVariables['breakpoint-xl']]: {
         height: '31.61455rem',
@@ -128,9 +167,12 @@ export const mockVariants = styleVariants({
         height: '19.5rem',
       },
       [ODSBreakpointTokenVariables['breakpoint-s']]: {
-        position: 'initial',
         width: '15rem',
         height: '26rem',
+
+        '&:not(div)': {
+          position: 'initial',
+        },
       },
     },
   },

diff --git a/src/components/MainProject/MainProject.tsx b/src/components/MainProject/MainProject.tsx
@@ -3,12 +3,12 @@ import React from 'react';
 import Button from '@/composable/Button/Button';
 import Mock from '@/composable/Mock/Mock';
 import {
+  backgroundGradientVariants,
   buttonStyle,
   contentWrapStyle,
   descriptionStyle,
   mockStyle,
   mockVariants,
-  mockWrapStyle,
   mockWrapVariants,
   periodStyle,
   titleStyle,
@@ -27,7 +27,13 @@ interface Props {
 const MainProject = ({ src, device, title, period, description }: Props) => {
   return (
     <article className={classNames(wrapStyle, wrapVariants[device])}>
-      <div className={classNames(mockWrapStyle, mockWrapVariants[device])}>
+      <div className={classNames(mockWrapVariants[device])}>
+        <div
+          className={classNames(
+            backgroundGradientVariants[device],
+            mockVariants[device],
+          )}
+        />
         <Mock
           className={classNames(mockStyle, mockVariants[device])}
           src={src}

diff --git a/src/components/Project/Project.tsx b/src/components/Project/Project.tsx
@@ -46,7 +46,7 @@ const Main = () => {
   return (
     <MainProject
       src={mainProject?.image?.storage_url || ''}
-      device={mainProject?.mockup || 'MOBILE'}
+      device={'MOBILE'}
       title={mainProject?.name || ''}
       period={period}
       description={mainProject?.content || ''}