fix: HistoryDetailCard 반응형 디자인 버그 수정 및 HistoryCarousel Tab 부분 반응형 디자인 구현

Ocean-Portfolio · Mar 9, 2024 · 683b023 · 683b023
1 parent 5d8d6a8
commit 683b023
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 7 deletions.
diff --git a/src/components/Card/History/Detail/HistoryDetailCard.css.ts b/src/components/Card/History/Detail/HistoryDetailCard.css.ts
@@ -5,7 +5,12 @@ import { colorVariants } from '@/styles/common/color.css';
 import { flexColumn } from '@/styles/common/flex.css';
 import { fontVariants } from '@/styles/common/font.css';
 import { textPreStyle } from '@/styles/common/text.css';
-import { commonColorThemeVars } from '@/styles/theme/index.css';
+import {
+  commonColorThemeVars,
+  userColorThemeVars,
+} from '@/styles/theme/index.css';
+
+// TODO : 반응형 디자인 재확인하기
 
 export const wrapStyle = style([
   {
@@ -72,9 +77,9 @@ export const headVariants = styleVariants({
 });
 
 export const titleStyle = style([
-  colorVariants['tertiary-variant'],
-  fontVariants['title-m-bold'],
   {
+    ...ODSTextTokenVariables['title-m-bold'],
+    color: userColorThemeVars.token['tertiary-variant'],
     '@media': {
       [ODSBreakpointTokenVariables['breakpoint-s']]: {
         ...ODSTextTokenVariables['paragraph-m-bold'],
@@ -91,8 +96,9 @@ export const titleVariants = styleVariants({
 
 export const periodStyle = style([
   colorVariants['primary-variant'],
-  fontVariants['paragraph-l-semibold'],
   {
+    ...ODSTextTokenVariables['paragraph-l-semibold'],
+
     '@media': {
       [ODSBreakpointTokenVariables['breakpoint-s']]:
         ODSTextTokenVariables['caption-m-semibold'],
@@ -110,8 +116,9 @@ export const periodVariants = styleVariants({
 
 export const positionStyle = style([
   colorVariants['gray-scale-06'],
-  fontVariants['paragraph-l-medium'],
   {
+    ...ODSTextTokenVariables['paragraph-l-medium'],
+
     '@media': {
       [ODSBreakpointTokenVariables['breakpoint-s']]:
         ODSTextTokenVariables['paragraph-s-medium'],
@@ -126,9 +133,9 @@ export const positionVariants = styleVariants({
 
 export const contentStyle = style([
   textPreStyle,
-  fontVariants['paragraph-m-medium'],
+  colorVariants['gray-scale-06'],
   {
-    color: commonColorThemeVars.token['gray-scale-06'],
+    ...ODSTextTokenVariables['paragraph-m-medium'],
 
     '@media': {
       [ODSBreakpointTokenVariables['breakpoint-s']]: {

diff --git a/src/components/History/Carousel/HistoryCarousel.css.ts b/src/components/History/Carousel/HistoryCarousel.css.ts
@@ -8,7 +8,10 @@ export const topStyle = style({
 
   '@media': {
     [ODSBreakpointTokenVariables['breakpoint-s']]: {
+      justifyContent: 'center',
+      alignItems: 'flex-end',
       height: '2.25rem',
+      paddingBottom: '0.625rem',
     },
   },
 });

diff --git a/src/composable/Tab/Tab.css.ts b/src/composable/Tab/Tab.css.ts
@@ -1,10 +1,17 @@
 import { style, styleVariants } from '@vanilla-extract/css';
+import { ODSBreakpointTokenVariables } from '@/const/breakpoints';
 import { backgroundColorVariants } from '@/styles/common/color.css';
 import { flexCenter } from '@/styles/common/flex.css';
 
 export const wrapStyle = style({
   display: 'flex',
   gap: '0.25rem',
+
+  '@media': {
+    [ODSBreakpointTokenVariables['breakpoint-s']]: {
+      width: '15rem',
+    },
+  },
 });
 
 const buttonAnchorCommonStyle = style([
@@ -27,6 +34,12 @@ export const buttonAnchorStyleVariant = styleVariants({
       ':hover': {
         opacity: 0.8,
       },
+
+      '@media': {
+        [ODSBreakpointTokenVariables['breakpoint-s']]: {
+          width: '100%',
+        },
+      },
     },
   ],
   DEFAULT: [
@@ -37,6 +50,12 @@ export const buttonAnchorStyleVariant = styleVariants({
       ':hover': {
         opacity: 0.2,
       },
+
+      '@media': {
+        [ODSBreakpointTokenVariables['breakpoint-s']]: {
+          width: '100%',
+        },
+      },
     },
   ],
 });