fix: empty ui margin

Ocean-Portfolio · Jun 22, 2024 · 5f6c046 · 5f6c046
1 parent dc8e9a8
commit 5f6c046
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 32 deletions.
diff --git a/src/components/Card/History/Detail/HistoryDetailCard.css.ts b/src/components/Card/History/Detail/HistoryDetailCard.css.ts
@@ -193,11 +193,7 @@ globalStyle(`${contentVariants.SMALL} > ol > li::marker`, {
   ...ODSTextTokenVariables['paragraph-s-regular'],
 });
 
-export const emptyContentStyle = style([
-  {
-    gap: '0.25rem',
-  },
-]);
+export const emptyStyle = style({});
 
 export const emptyTitleStyle = style([
   colorVariants['tertiary-variant'],

diff --git a/src/components/Card/History/Detail/HistoryDetailCard.tsx b/src/components/Card/History/Detail/HistoryDetailCard.tsx
@@ -11,7 +11,6 @@ import {
   contentSelector,
   contentStyle,
   contentVariants,
-  emptyContentStyle,
   emptyParagraphStyle,
   emptyTitleStyle,
   headStyle,
@@ -120,12 +119,8 @@ const Empty = () => {
   return (
     <>
       <CommonIcon variant="WARNING" width={92} height={80} />
-      <div className={emptyContentStyle}>
-        <h4 className={emptyTitleStyle}>
-          프로젝트 세부 사항이 존재하지 않아요.
-        </h4>
-        <p className={emptyParagraphStyle}>저의 이력을 더 참고해보시겠어요?</p>
-      </div>
+      <h4 className={emptyTitleStyle}>프로젝트 세부 사항이 존재하지 않아요.</h4>
+      <p className={emptyParagraphStyle}>저의 이력을 더 참고해보시겠어요?</p>
     </>
   );
 };

diff --git a/src/components/History/History.css.ts b/src/components/History/History.css.ts
@@ -8,16 +8,12 @@ export const wrapStyle = style({
   display: 'grid',
   gridAutoRows: 'auto',
   columnGap: '1rem',
-  rowGap: '5rem',
   width: '100%',
 
   '@media': {
     [ODSBreakpointTokenVariables['breakpoint-xxl']]: {
       columnGap: '2.5rem',
     },
-    [ODSBreakpointTokenVariables['breakpoint-l']]: {
-      rowGap: '0',
-    },
     [ODSBreakpointTokenVariables['breakpoint-s']]: {
       display: 'flex',
       flexDirection: 'column',

diff --git a/src/containers/HistoryCarouselContainer.tsx b/src/containers/HistoryCarouselContainer.tsx
@@ -7,12 +7,14 @@ import HistoryDetailCard from '@/components/Card/History/Detail/HistoryDetailCar
 import { ValueContextHistory } from '@/components/History/History.context';
 import HistoryCarousel from '@/components/HistoryCarousel/HistoryCarousel';
 import Button from '@/composable/Button/Button';
+import Spacer from '@/composable/Spacer/Spacer';
 import { GET_HISTORY_ITEM_BY_HISTORY_ID } from '@/gql/queries/history_item';
 import { GET_SNS_BY_USER_ID } from '@/gql/queries/sns_link';
 import {
   backgroundColorVariants,
   colorVariants,
 } from '@/styles/common/color.css';
+import { marginTopVariants } from '@/styles/common/margin.css';
 import {
   GetHistoryItemByHistoryIdQuery,
   GetHistoryItemByHistoryIdQueryVariables,
@@ -67,22 +69,24 @@ const HistoryCarouselContainer = () => {
 
   if (!data.length)
     return (
-      <HistoryDetailCard>
-        <HistoryDetailCard.Empty />
-        <Button
-          className={classNames(
-            backgroundColorVariants['primary-variant'],
-            colorVariants['secondary-variant'],
-          )}
-          as="a"
-          width="12.5rem"
-          href={userSNSData.data.getSNSByUserId[0].link}
-          target="_blank"
-          rel="noreferrer noopener"
-        >
-          더보기
-        </Button>
-      </HistoryDetailCard>
+      <>
+        <HistoryDetailCard className={marginTopVariants[275]}>
+          <HistoryDetailCard.Empty />
+          <Button
+            className={classNames(
+              backgroundColorVariants['primary-variant'],
+              colorVariants['secondary-variant'],
+            )}
+            as="a"
+            width="12.5rem"
+            href={userSNSData.data.getSNSByUserId[0].link}
+            target="_blank"
+            rel="noreferrer noopener"
+          >
+            더보기
+          </Button>
+        </HistoryDetailCard>
+      </>
     );
 
   return <HistoryCarousel data={data} />;

diff --git a/src/styles/common/margin.css.ts b/src/styles/common/margin.css.ts
@@ -0,0 +1,7 @@
+import { styleVariants } from '@vanilla-extract/css';
+
+export const marginTopVariants = styleVariants({
+  '275': {
+    marginTop: '2.75rem',
+  },
+});