diff --git a/src/components/Card/History/Detail/HistoryDetailCard.css.ts b/src/components/Card/History/Detail/HistoryDetailCard.css.ts index aee7884..dddd98a 100644 --- 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 index 1814d0c..0ebd2fd 100644 --- 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 ( <> -
-

- 프로젝트 세부 사항이 존재하지 않아요. -

-

저의 이력을 더 참고해보시겠어요?

-
+

프로젝트 세부 사항이 존재하지 않아요.

+

저의 이력을 더 참고해보시겠어요?

); }; diff --git a/src/components/History/History.css.ts b/src/components/History/History.css.ts index bb5e24f..d2bc830 100644 --- 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 index 6e8c262..3ee274a 100644 --- 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 ( - - - - + <> + + + + + ); return ; diff --git a/src/styles/common/margin.css.ts b/src/styles/common/margin.css.ts new file mode 100644 index 0000000..541038f --- /dev/null +++ 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', + }, +});