feat: normal project 반응형 디자인 구현

Ocean-Portfolio · Feb 20, 2024 · 22f5ccc · 22f5ccc
1 parent d159c15
commit 22f5ccc
Show file tree

Hide file tree

Showing 16 changed files with 329 additions and 89 deletions.
diff --git a/src/components/Card/Project/ProjectCard.context.ts b/src/components/Card/Project/ProjectCard.context.ts
@@ -1,7 +1,7 @@
 import { createStaticContext } from '@/utils/context/StaticContext';
 
 export interface ProjectCardContextProps {
-  sizeToken: SizeToken;
+  sizeToken?: SizeToken;
   name: string;
   content?: string;
   period: string;
@@ -10,7 +10,6 @@ export interface ProjectCardContextProps {
 }
 
 const StaticContextProjectCard = createStaticContext<ProjectCardContextProps>({
-  sizeToken: 'LARGE',
   name: '',
   content: '',
   period: '',

diff --git a/src/components/Card/Project/ProjectCard.css.ts b/src/components/Card/Project/ProjectCard.css.ts
@@ -1,15 +1,46 @@
 import { style, styleVariants } from '@vanilla-extract/css';
+import { ODSBreakpointTokenVariables } from '@/const/breakpoints';
+import { ODSTextTokenVariables } from '@/const/fonts';
 import { fontVariants } from '@/styles/common/font.css';
 import { textPreStyle } from '@/styles/common/text.css';
 
-const wrapStyle = style({
+export const wrapStyle = style({
   borderRadius: '0.75rem',
+
+  paddingTop: '1.5rem',
+
+  '@media': {
+    [ODSBreakpointTokenVariables['breakpoint-l']]: {
+      paddingTop: '1.32rem',
+    },
+
+    [ODSBreakpointTokenVariables['breakpoint-m']]: {
+      paddingTop: '1.25rem',
+    },
+  },
 });
 
 export const wrapVariants = styleVariants({
-  LARGE: [wrapStyle, { paddingTop: '1.5rem' }],
-  MEDIUM: [wrapStyle, { paddingTop: '1.32rem' }],
-  SMALL: [wrapStyle, { paddingTop: '1.25rem' }],
+  LARGE: { paddingTop: '1.5rem' },
+  MEDIUM: { paddingTop: '1.32rem' },
+  SMALL: { paddingTop: '1.25rem' },
+});
+
+export const sizeStyle = style({
+  width: '25.5rem',
+  height: '25.5rem',
+
+  '@media': {
+    [ODSBreakpointTokenVariables['breakpoint-l']]: {
+      width: '22.5rem',
+      height: '22.5rem',
+    },
+
+    [ODSBreakpointTokenVariables['breakpoint-m']]: {
+      width: '17.5rem',
+      height: '22.5rem',
+    },
+  },
 });
 
 export const sizeVariants = styleVariants({
@@ -27,6 +58,20 @@ export const sizeVariants = styleVariants({
   },
 });
 
+export const gapStyle = style({
+  gap: '1rem',
+
+  '@media': {
+    [ODSBreakpointTokenVariables['breakpoint-l']]: {
+      gap: '0.88238rem',
+    },
+
+    [ODSBreakpointTokenVariables['breakpoint-m']]: {
+      gap: '1rem',
+    },
+  },
+});
+
 export const gapVariants = styleVariants({
   LARGE: {
     gap: '1rem',
@@ -39,42 +84,92 @@ export const gapVariants = styleVariants({
   },
 });
 
-const nameStyle = style([textPreStyle]);
+export const nameStyle = style([
+  textPreStyle,
+  {
+    padding: '0 1.5rem',
+    ...ODSTextTokenVariables['title-m-bold'],
+
+    '@media': {
+      [ODSBreakpointTokenVariables['breakpoint-l']]: {
+        padding: '0 1.32rem',
+        ...ODSTextTokenVariables['title-s-semibold'],
+      },
 
-const descriptionStyle = style([textPreStyle]);
+      [ODSBreakpointTokenVariables['breakpoint-m']]: {
+        padding: '0 1.25rem',
+        ...ODSTextTokenVariables['paragraph-l-bold'],
+      },
+    },
+  },
+]);
 
 export const nameVariants = styleVariants({
-  LARGE: [nameStyle, fontVariants['title-m-bold'], { padding: '0 1.5rem' }],
+  LARGE: [textPreStyle, fontVariants['title-m-bold'], { padding: '0 1.5rem' }],
   MEDIUM: [
-    nameStyle,
+    textPreStyle,
     fontVariants['title-s-semibold'],
     { padding: '0 1.32rem' },
   ],
   SMALL: [
-    nameStyle,
+    textPreStyle,
     fontVariants['paragraph-l-bold'],
     { padding: '0 1.25rem' },
   ],
 });
 
+export const descriptionStyle = style([
+  textPreStyle,
+  {
+    padding: '0 1.5rem',
+    ...ODSTextTokenVariables['paragraph-s-regular'],
+
+    '@media': {
+      [ODSBreakpointTokenVariables['breakpoint-l']]: {
+        padding: '0 1.32rem',
+        ...ODSTextTokenVariables['paragraph-s-regular'],
+      },
+
+      [ODSBreakpointTokenVariables['breakpoint-m']]: {
+        padding: '0 1.25rem',
+        ...ODSTextTokenVariables['paragraph-m-medium'],
+      },
+    },
+  },
+]);
+
 export const descriptionVariants = styleVariants({
   LARGE: [
-    descriptionStyle,
+    textPreStyle,
     fontVariants['paragraph-s-regular'],
     { padding: '0 1.5rem' },
   ],
   MEDIUM: [
-    descriptionStyle,
+    textPreStyle,
     fontVariants['paragraph-s-regular'],
     { padding: '0 1.32rem' },
   ],
   SMALL: [
-    descriptionStyle,
+    textPreStyle,
     fontVariants['paragraph-m-medium'],
     { padding: '0 1.25rem' },
   ],
 });
 
+export const periodStyle = style({
+  marginLeft: '1.5rem',
+
+  '@media': {
+    [ODSBreakpointTokenVariables['breakpoint-l']]: {
+      marginLeft: '1.32rem',
+    },
+
+    [ODSBreakpointTokenVariables['breakpoint-m']]: {
+      marginLeft: '1.25rem',
+    },
+  },
+});
+
 export const periodVariants = styleVariants({
   LARGE: { marginLeft: '1.5rem' },
   MEDIUM: { marginLeft: '1.32rem' },

diff --git a/src/components/Card/Project/ProjectCard.test.tsx b/src/components/Card/Project/ProjectCard.test.tsx
@@ -5,8 +5,6 @@ describe('ProjectCard 컴포넌트', () => {
   const mockProps: ProjectCardProps = {
     visible_status: 'VISIBLE',
     sizeToken: 'LARGE',
-    projectMode: 'MAIN',
-    projectStatus: 'CURRENT',
     name: '프로젝트 이름',
     content: '프로젝트 설명',
     period: '2021-2022',

diff --git a/src/components/Card/Project/ProjectCard.tsx b/src/components/Card/Project/ProjectCard.tsx
@@ -3,6 +3,7 @@ import React, { PropsWithChildren } from 'react';
 import Chip from '@/composable/Chip/Chip';
 import Grid from '@/composable/Grid/Grid';
 import ODSNextImage from '@/composable/Image/ODSNextImage';
+import { ODSImageTokenVariables } from '@/const/images';
 import {
   backgroundColorVariants,
   colorVariants,
@@ -12,28 +13,30 @@ import StaticContextProjectCard, {
   ProjectCardContextProps,
 } from './ProjectCard.context';
 import {
+  descriptionStyle,
   descriptionVariants,
+  gapStyle,
   gapVariants,
   imageStyle,
+  nameStyle,
   nameVariants,
+  periodStyle,
   periodVariants,
+  sizeStyle,
   sizeVariants,
+  wrapStyle,
   wrapVariants,
 } from './ProjectCard.css';
 
 export interface ProjectCardProps extends ProjectCardContextProps {
   className?: string;
   visible_status: VisibleStatusToken;
-  projectMode: ProjectModeToken;
-  projectStatus: EndTimeToken;
 }
 
 const ProjectCard = ({
-  className,
   children,
+  className,
   visible_status,
-  // projectMode,
-  // projectStatus,
   sizeToken,
   name,
   content,
@@ -57,10 +60,13 @@ const ProjectCard = ({
       <Grid
         className={classNames(
           className,
-          wrapVariants[sizeToken],
+          wrapStyle,
+          sizeToken && wrapVariants[sizeToken],
           backgroundColorVariants['tertiary-variant'],
-          sizeVariants[sizeToken],
-          gapVariants[sizeToken],
+          sizeStyle,
+          sizeToken && sizeVariants[sizeToken],
+          gapStyle,
+          sizeToken && gapVariants[sizeToken],
         )}
         templateRows="repeat(3, fit-content) 1fr"
       >
@@ -76,7 +82,8 @@ const Name = () => {
   return (
     <p
       className={classNames(
-        nameVariants[sizeToken],
+        nameStyle,
+        sizeToken && nameVariants[sizeToken],
         colorVariants['gray-scale-00'],
       )}
     >
@@ -91,7 +98,8 @@ const Description = () => {
   return (
     <p
       className={classNames(
-        descriptionVariants[sizeToken],
+        descriptionStyle,
+        sizeToken && descriptionVariants[sizeToken],
         colorVariants['gray-scale-01'],
       )}
     >
@@ -104,31 +112,62 @@ const Period = () => {
   const { sizeToken, period } = getStaticContext(StaticContextProjectCard);
   return (
     <Chip
-      className={classNames(periodVariants[sizeToken])}
+      className={classNames(
+        periodStyle,
+        sizeToken && periodVariants[sizeToken],
+      )}
       bgColorToken="tertiary"
     >
       {period}
     </Chip>
   );
 };
 
-const Image = () => {
+interface ImageProps {
+  breakPointsToken?: BreakPointsToken;
+}
+
+const Image = ({ breakPointsToken }: ImageProps) => {
   const { sizeToken, src, alt } = getStaticContext(StaticContextProjectCard);
 
-  const getImageSize = (sizeToken: SizeToken): ImageSizeToken => {
+  const getImageSizeWithSizeToken = (sizeToken: SizeToken): ImageSizeToken => {
     switch (sizeToken) {
       case 'LARGE':
         return 'image-100';
       default:
         return 'image-75';
     }
   };
+
+  const getImageSizeWithBreakPointsToken = (
+    breakPointsToken: BreakPointsToken,
+  ): ImageSizeToken => {
+    switch (breakPointsToken) {
+      case 'breakpoint-l':
+        return 'image-75';
+      case 'breakpoint-m':
+        return 'image-75';
+      case 'breakpoint-s':
+        return 'image-75';
+      default:
+        return 'image-100';
+    }
+  };
+
+  const sizeTokenValue = ((sizeToken && getImageSizeWithSizeToken(sizeToken)) ||
+    (breakPointsToken &&
+      getImageSizeWithBreakPointsToken(breakPointsToken))) as ImageSizeToken;
+
   return (
     <ODSNextImage
       className={imageStyle}
+      style={{
+        width: ODSImageTokenVariables[sizeTokenValue].width,
+        height: ODSImageTokenVariables[sizeTokenValue].height,
+      }}
       src={src}
       alt={alt}
-      sizeToken={getImageSize(sizeToken)}
+      sizeToken={sizeTokenValue}
     />
   );
 };

diff --git a/src/components/MainProject/MainProject.css.ts b/src/components/MainProject/MainProject.css.ts
@@ -21,8 +21,13 @@ export const wrapStyle = style([
         padding: '0 0.69rem',
       },
       [ODSBreakpointTokenVariables['breakpoint-s']]: {
-        flexDirection: 'column',
+        position: 'initial',
+        display: 'grid',
+        gridTemplateRows: '20rem auto',
+        rowGap: '4rem',
         padding: '0',
+        paddingTop: '1.38rem',
+        paddingBottom: '2rem',
       },
     },
   },
@@ -40,9 +45,8 @@ export const wrapVariants = styleVariants({
         minHeight: '20rem',
       },
       [ODSBreakpointTokenVariables['breakpoint-s']]: {
-        gap: '4rem',
         height: '100%',
-        paddingTop: '1.37rem',
+        minHeight: 'initial',
       },
     },
   },
@@ -87,7 +91,8 @@ export const mockWrapVariants = styleVariants({
         [ODSBreakpointTokenVariables['breakpoint-s']]: {
           gap: '0',
           minWidth: '20rem',
-          height: '20rem',
+          minHeight: '20rem',
+          // height: '20rem',
         },
       },
     },
@@ -195,6 +200,8 @@ export const contentWrapStyle = style({
       alignItems: 'center',
       rowGap: '0.5rem',
       columnGap: '0.5rem',
+
+      height: 'fit-content',
     },
   },
 });