Skip to content

Commit

Permalink
fix: history gradient & detail view 이슈
Browse files Browse the repository at this point in the history
  • Loading branch information
@steven-yn
steven-yn committed Apr 21, 2024
1 parent a562ab4 commit 1e4ebe6
Show file tree
Hide file tree
Showing 15 changed files with 173 additions and 125 deletions.
8 changes: 4 additions & 4 deletions src/components/History/History.context.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,17 +20,17 @@ export const StaticContextHistory =
});

export interface ValueContextHistoryProps {
page: number;
menuPage: number;
isSelected: boolean;
state: {
id: string;
historyItemId: string;
summary_id: string;
index: number;
historyItemIndex: number;
}[];
}

export const ValueContextHistory = createContext<ValueContextHistoryProps>({
page: 0,
menuPage: 0,
isSelected: false,
state: [],
});
Expand Down
5 changes: 5 additions & 0 deletions src/components/History/History.css.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,15 +8,20 @@ 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',
gap: '1.25rem',
},
},
});
Expand Down
23 changes: 12 additions & 11 deletions src/components/History/History.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import React, { Suspense, useContext, useState } from 'react';
import UAParser from 'ua-parser-js';
import StandaloneSkeleton from '@/components/StandaloneSkeleton/StandaloneSkeleton';
import Button from '@/composable/Button/Button';
import HistorySummaryContainer from '@/containers/HistorySummary';
import HistorySummaryContainer from '@/containers/HistorySummaryContainer';
import { useReactiveLayout } from '@/hook/useReactiveLayout';
import UserInfoProvider from '@/Provider/UserInfoProvider';
import { getStaticContext } from '@/utils/context/StaticContext';
Expand All @@ -35,12 +35,12 @@ interface Props extends HistorySectionContextProps {
const History = ({ summary, userAgent }: Props) => {
const { isMobile } = useReactiveLayout(userAgent);
const [value, setValue] = useState<ValueContextHistoryProps>({
page: 0,
menuPage: 0,
isSelected: false,
state: Array.from({ length: summary.length }, () => ({
id: '',
summary_id: '',
index: -1,
state: summary.map((summaryItem) => ({
historyItemId: '',
summary_id: summaryItem.id,
historyItemIndex: -1,
})),
});

Expand All @@ -66,7 +66,7 @@ const History = ({ summary, userAgent }: Props) => {
suppressHydrationWarning
>
{!isMobile && value.isSelected && <History.Menu />}
<History.SummaryContainer isMobile={isMobile} />
{<History.SummaryContainer isMobile={isMobile} />}
{!isMobile && value.isSelected && (
<Suspense fallback={<StandaloneSkeleton />}>
<History.CarouselContainer />
Expand All @@ -83,14 +83,14 @@ const History = ({ summary, userAgent }: Props) => {

const Menu = () => {
const { summary } = getStaticContext(StaticContextHistory);
const { page } = useContext(ValueContextHistory);
const { menuPage } = useContext(ValueContextHistory);
const { dispatcher } = useContext(DispatcherContextHistory);

const handleClick = (pageIndex: number) => {
dispatcher((prev) => {
return {
...prev,
page: pageIndex,
menuPage: pageIndex,
isSelected: true,
};
});
Expand All @@ -99,11 +99,12 @@ const Menu = () => {
return (
<div className={menuStyle}>
{summary.map((historySummary, index) => {
if (!historySummary.histories.length) return null;
return (
<Button
className={classNames(
menuButtonStyle,
page === index ? menuButtonSelectedStyle : null,
menuPage === index ? menuButtonSelectedStyle : null,
)}
key={historySummary.id}
as="button"
Expand All @@ -121,7 +122,7 @@ const Menu = () => {

History.SummaryContainer = HistorySummaryContainer;
History.CarouselContainer = dynamic(
() => import('@/containers/HistoryCarousel'),
() => import('@/containers/HistoryCarouselContainer'),
{
ssr: false,
},
Expand Down
26 changes: 18 additions & 8 deletions src/components/HistorySummary/HistorySummary.css.ts
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { style, styleVariants } from '@vanilla-extract/css';
import { globalStyle, style, styleVariants } from '@vanilla-extract/css';
import { ODSBreakpointTokenVariables } from '@/const/breakpoints';
import { ODSTextTokenVariables } from '@/const/fonts';
import { colorVariants } from '@/styles/common/color.css';
Expand Down Expand Up @@ -29,21 +29,31 @@ export const swiperTitleStyle = style([
colorVariants['gray-scale-06'],
{
...ODSTextTokenVariables['title-m-bold'],
paddingBottom: '1rem',
'@media': {
[ODSBreakpointTokenVariables['breakpoint-xxl']]: {
paddingBottom: '1.5rem',
},
[ODSBreakpointTokenVariables['breakpoint-xxl']]: {},
[ODSBreakpointTokenVariables['breakpoint-l']]:
ODSTextTokenVariables['title-s-medium'],
[ODSBreakpointTokenVariables['breakpoint-m']]: {
paddingBottom: '0.75rem',
...ODSTextTokenVariables['title-s-semibold'],
},
},
},
]);
// transition: 'all 0.3s ease-in-out',

export const oceanSwiperWrapperStyle = style({});

globalStyle(`${oceanSwiperWrapperStyle} > .swiper-wrapper`, {
paddingTop: '1rem',

'@media': {
[ODSBreakpointTokenVariables['breakpoint-xxl']]: {
paddingTop: '1.5rem',
},
[ODSBreakpointTokenVariables['breakpoint-m']]: {
paddingTop: '0.75rem',
},
},
});

export const swiperItemStyle = style({
display: 'inline-flex !important',
Expand All @@ -62,7 +72,7 @@ export const listWrapStyle = style([

export const listWrapGradientStyle = style({
WebkitMaskImage:
'linear-gradient(to bottom, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 100%)',
'linear-gradient(to bottom, rgba(0,0,0,1) 60%, rgba(0,0,0,0) 100%)',
});

export const listTitleStyle = style([
Expand Down
134 changes: 58 additions & 76 deletions src/components/HistorySummary/HistorySummary.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,12 +18,10 @@ import CommonIcon from '@/composable/Icon/CommonIcon';
import Pagination from '@/composable/Pagination/Pagination';
import Spacer from '@/composable/Spacer/Spacer';
import { useODSBreakPoints } from '@/hook/useODSBreakPoints';
import { W100 } from '@/styles/common/layout.css';
import { W100, positionRelative } from '@/styles/common/layout.css';
import { getStaticContext } from '@/utils/context/StaticContext';
import OceanSwiper from '../OceanSwiper/OceanSwiper';
import {
ContextDispatcherHistorySummary,
ContextValueHistorySummary,
HistorySummaryContextProps,
StaticContextHistorySummary,
} from './HistorySummary.context';
Expand All @@ -38,6 +36,7 @@ import {
barWidthStyle,
swiperWrapStyleVariants,
listWrapGradientStyle,
oceanSwiperWrapperStyle,
} from './HistorySummary.css';
export interface HistoryCardData extends HistoryCardContextProps {
id: string;
Expand All @@ -54,7 +53,6 @@ const HistorySummary = ({
selectIndex,
handleClick,
}: PropsWithChildren<HistorySummaryProps>) => {
const [isOpen, setIsOpen] = useState(isDetailView || false);
return (
<StaticContextHistorySummary.Provider
value={{
Expand All @@ -66,86 +64,67 @@ const HistorySummary = ({
handleClick,
}}
>
<ContextDispatcherHistorySummary.Provider
value={{
setIsOpen,
}}
>
<ContextValueHistorySummary.Provider
value={{
isOpen,
}}
>
{children}
</ContextValueHistorySummary.Provider>
</ContextDispatcherHistorySummary.Provider>
{children}
</StaticContextHistorySummary.Provider>
);
};

const List = ({ children }: PropsWithChildren) => {
const { title, data, selectIndex, summary_id, handleClick } =
const { title, data, selectIndex, summary_id, isDetailView, handleClick } =
getStaticContext(StaticContextHistorySummary);
const { isOpen } = useContext(ContextValueHistorySummary);
const [isOpen, setIsOpen] = useState(isDetailView || false);
const displayData = !isOpen ? data.slice(0, 2) : data;
return (
<div
className={classNames(
listWrapStyle,
data.length > 2 && !isOpen && listWrapGradientStyle,
)}
suppressHydrationWarning
>
<h2 className={listTitleStyle}>{title}</h2>
{displayData.map((history, idx) => {
return (
<Fragment key={history.id}>
<HistoryCard
companyName={history.companyName}
period={history.period}
onClick={() => {
if (handleClick) handleClick(history.id, summary_id, idx);
}}
>
<HistoryCard.Company />
<HistoryCard.Period />
</HistoryCard>
{selectIndex === idx && children}
</Fragment>
);
})}
{isOpen && <Spacer direction="horizontal" spacing="spacer-075" />}
{isOpen && <Spacer direction="horizontal" spacing="spacer-15" />}
</div>
);
};

const OpenButton = () => {
const { data } = getStaticContext(StaticContextHistorySummary);
const { isOpen } = useContext(ContextValueHistorySummary);
const { setIsOpen } = useContext(ContextDispatcherHistorySummary);

if (data.length <= 2) return null;

return (
<Button
className={buttonStyle}
as="button"
type="button"
onClick={() => {
setIsOpen(!isOpen);
}}
>
<CommonIcon
<div className={positionRelative}>
<div
className={classNames(
iconStyle,
iconStyleVariants[isOpen ? 'OPEN' : 'CLOSE'],
listWrapStyle,
data.length > 2 && !isOpen && listWrapGradientStyle,
)}
variant="LEFT_ARROW_SECONDARY_VARIANT"
width={21.33333}
height={24}
/>
</Button>
suppressHydrationWarning
>
<h2 className={listTitleStyle}>{title}</h2>
{displayData.map((history, idx) => {
return (
<Fragment key={history.id}>
<HistoryCard
companyName={history.companyName}
period={history.period}
onClick={() => {
if (handleClick) handleClick(history.id, summary_id, idx);
}}
>
<HistoryCard.Company />
<HistoryCard.Period />
</HistoryCard>
{selectIndex === idx && children}
</Fragment>
);
})}
{isOpen && <Spacer direction="horizontal" spacing="spacer-075" />}
{isOpen && <Spacer direction="horizontal" spacing="spacer-15" />}
</div>
{data.length > 2 && (
<Button
className={buttonStyle}
as="button"
type="button"
onClick={() => {
setIsOpen(!isOpen);
}}
>
<CommonIcon
className={classNames(
iconStyle,
iconStyleVariants[isOpen ? 'OPEN' : 'CLOSE'],
)}
variant="LEFT_ARROW_SECONDARY_VARIANT"
width={21.33333}
height={24}
/>
</Button>
)}
</div>
);
};

Expand All @@ -168,7 +147,11 @@ const Swipe = () => {
)}
</OceanSwiper.Top>

<OceanSwiper.Main className={W100} perView={'auto'}>
<OceanSwiper.Main
className={W100}
wrapperClassName={isDetailView ? '' : oceanSwiperWrapperStyle}
blur
>
{data.map((history, idx) => {
return (
<OceanSwiper.Slide key={history.id} className={swiperItemStyle}>
Expand Down Expand Up @@ -216,6 +199,5 @@ const Swipe = () => {

HistorySummary.List = List;
HistorySummary.Swipe = Swipe;
HistorySummary.OpenButton = OpenButton;

export default HistorySummary;
18 changes: 18 additions & 0 deletions src/components/OceanSwiper/OceanSwiper.css.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,24 @@ export const oceanSwiperGradient = style({
},
});

export const oceanSwiperWrapperGradient = style({
WebkitMaskImage:
'linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0) calc(0.25rem + 1.5rem + 1rem)), linear-gradient(to right, rgba(0,0,0,1) 0%, rgba(0,0,0,0.25) 100%)',

'@media': {
[ODSBreakpointTokenVariables['breakpoint-xxl']]: {
WebkitMaskImage:
'linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0) calc(0.25rem + 1.5rem + 1.5rem)), linear-gradient(to right, rgba(0,0,0,1) 0%, rgba(0,0,0,0.25) 100%)',
},
[ODSBreakpointTokenVariables['breakpoint-m']]: {
WebkitMaskImage:
'linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0) calc(0.25rem + 0.75rem + 0.75rem)), linear-gradient(to right, rgba(0,0,0,1) 0%, rgba(0,0,0,0.25) 100%)',
},
},
});

globalStyle(`${oceanSwiperWrapperGradient} > .swiper-wrapper`, {});

export const swiperVisibleSelector = style({});

globalStyle(`${swiperVisibleSelector} > .swiper`, {
Expand Down
Loading

0 comments on commit 1e4ebe6

Please sign in to comment.