Skip to content

Commit

Permalink
feat: modify Calendar design
Browse files Browse the repository at this point in the history
  • Loading branch information
ChaeyeonAhn committed Jan 2, 2025
1 parent c4a06d7 commit 2ae3556
Show file tree
Hide file tree
Showing 5 changed files with 177 additions and 187 deletions.
74 changes: 50 additions & 24 deletions packages/web/src/common/components/Calendar/Calendar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -24,25 +24,34 @@ interface CalendarProps extends CalendarSizeProps {
eventPeriods?: EventPeriod[];
selectedDates: Date[];
onDateClick?: (date: Date) => void;
width?: number;
width?: string;
height?: string;
title?: string;
small?: boolean;
}

const CalendarWrapper = styled.div<{
width?: CalendarProps["width"];
height?: CalendarProps["height"];
}>`
width: ${({ width }) => (width ? `${width}px` : "100%")};
display: flex;
flex-direction: column;
width: ${({ width }) => width || "100%"};
height: ${({ height }) => height || "100%"};
`;

const CalendarContentWrapper = styled.div<{
title?: CalendarProps["title"];
small?: CalendarProps["small"];
}>`
display: flex;
padding: 30px;
height: ${({ small }) => (small ? "calc(100% - 28px)" : "calc(100% - 40px)")};
height: ${({ title }) => title === "" && "100%"};
padding: ${({ small }) => (small ? "20px 18px" : "30px")};
flex-direction: column;
align-items: flex-end;
gap: 30px;
align-self: stretch;
gap: 12px;
flex-shrink: 0;
border-radius: ${({ title }) => (title !== "" ? "0px 0px 4px 4px" : "4px")};
${({ title, theme }) =>
title === ""
Expand All @@ -52,31 +61,38 @@ const CalendarContentWrapper = styled.div<{
border-bottom: 2px solid ${theme.colors.GRAY[100]};`};
`;

const WeekWrapper = styled.div`
const WeekWrapper = styled.div<{
small?: CalendarProps["small"];
}>`
display: flex;
flex-direction: column;
gap: 20px;
gap: auto;
justify-content: space-between;
align-items: flex-end;
align-items: flex-start;
align-self: stretch;
flex: 1 0 0;
height: 100%;
`;

const TitleWrapper = styled.div`
const TitleWrapper = styled.div<{
small?: CalendarProps["small"];
}>`
display: flex;
height: ${({ small }) => (small ? "28px" : "40px")};
border-radius: 4px 4px 0px 0px;
background: ${({ theme }) => theme.colors.GREEN[600]};
display: flex;
height: 40px;
padding: 8px 20px;
padding: ${({ small }) => (small ? "8px 12px" : "10px 20px")};
align-items: center;
gap: 20px;
align-self: stretch;
border-radius: 4px 4px 0px 0px;
background: ${({ theme }) => theme.colors.GREEN[600]};
`;

const Calendar: React.FC<CalendarProps> = ({
title = "",
width = undefined,
size = "md",
height = undefined,
small = false,
existDates,
eventPeriods = [],
selectedDates,
Expand Down Expand Up @@ -123,7 +139,7 @@ const Calendar: React.FC<CalendarProps> = ({
} else {
eventPeriods.forEach(period => {
if (
isSameDay(period.start, period.end) && // 2 eventPeriod 기간이 시작과 끝이 같을 때 처리 완료!
isSameDay(period.start, period.end) &&
isSameDay(day, period.start)
) {
type = "Selected";
Expand All @@ -145,21 +161,31 @@ const Calendar: React.FC<CalendarProps> = ({
});

return (
<CalendarWrapper width={width}>
<CalendarWrapper width={width} height={height}>
{title !== "" && (
<TitleWrapper>
<Typography color="WHITE" fs={20} fw="BOLD" lh={20}>
{title}
</Typography>
<TitleWrapper small={small}>
{small ? (
<Typography color="WHITE" fs={16} fw="SEMIBOLD" lh={20}>
{title}
</Typography>
) : (
<Typography color="WHITE" fs={18} fw="SEMIBOLD" lh={20}>
{title}
</Typography>
)}
</TitleWrapper>
)}
<CalendarContentWrapper title={title}>
<MonthNavigator currentDate={currentDate} onChange={setCurrentDate} />
<WeekWrapper>
<CalendarContentWrapper title={title} small={small}>
<MonthNavigator
currentDate={currentDate}
onChange={setCurrentDate}
small={small}
/>
<WeekWrapper small={small}>
{weeks.map((weekStart: Date) => (
<CalendarWeek
week={getWeekData(weekStart)}
size={size}
small={small}
key={weekStart.toISOString()}
onDateClick={handleDateClick}
/>
Expand Down
133 changes: 47 additions & 86 deletions packages/web/src/common/components/Calendar/_atomic/CalendarDate.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -14,15 +14,21 @@ export interface CalendarDateProps {
| "End"
| "Selected"
| "Past/Future";
size?: "lg" | "md" | "sm";
onDateClick?: (date: Date) => void;
}

const getBackgroundColor = (
theme: DefaultTheme,
type?: CalendarDateProps["type"],
) => {
if (type === "Default" || type === "Saturday" || type === "Sunday")
if (
type === "Default" ||
type === "Saturday" ||
type === "Sunday" ||
type === "Start" ||
type === "End" ||
type === "Pass"
)
return theme.colors.PRIMARY;
if (type === "Past/Future") return theme.colors.GREEN[100];
return theme.colors.WHITE;
Expand All @@ -33,24 +39,21 @@ const ExistWrapper = styled.div<{
type?: CalendarDateProps["type"];
}>`
display: flex;
flex: 1 0 0;
flex-wrap: wrap;
position: relative;
height: 24px;
width: 20px;
height: 20px;
align-items: center;
align-content: center;
justify-content: center;
padding: 0px 2px;
gap: 10px;
flex-direction: column;
${({ exist, type, theme }) =>
exist &&
css`
&::after {
content: "";
position: absolute;
right: 5px;
top: 2px;
right: -4px;
top: -1px;
width: 4px;
height: 4px;
background-color: ${getBackgroundColor(theme, type)};
Expand All @@ -62,105 +65,63 @@ const ExistWrapper = styled.div<{

const DateContainer = styled.div<CalendarDateProps>`
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
font-size: 20px;
align-items: center;
align-content: center;
align-self: stretch;
font-size: 16px;
text-align: center;
font-weight: ${({ theme }) => theme.fonts.WEIGHT.BOLD};
font-weight: ${({ theme }) => theme.fonts.WEIGHT.REGULAR};
line-height: 20px;
font-family: ${({ theme }) => theme.fonts.FAMILY.PRETENDARD};
${({ size }) => {
switch (size) {
case "sm":
return css`
width: 32px;
height: 32px;
`;
case "md":
return css`
width: 40px;
height: 40px;
`;
case "lg":
default:
return css`
width: 48px;
height: 48px;
`;
}
}}
background-color: ${({ type, theme }) => {
if (
type === "Past/Future" ||
type === "Default" ||
type === "Saturday" ||
type === "Sunday"
)
return "transparent";
if (type === "Pass") return theme.colors.GREEN[300];
return theme.colors.PRIMARY;
}};
gap: 10px;
flex: 1 0 0;
flex-wrap: wrap;
color: ${({ type, theme }) => {
if (type === "Default") return theme.colors.GRAY[900];
if (type === "Saturday") return theme.colors.GREEN[700];
if (type === "Sunday") return theme.colors.RED[700];
if (type === "Past/Future") return theme.colors.GRAY[100];
return theme.colors.WHITE;
return theme.colors.BLACK;
}};
`;

const DateWrapper = styled.div<{
type?: CalendarDateProps["type"];
size?: CalendarDateProps["size"];
}>`
display: flex;
align-items: center;
justify-content: center;
flex: 1;
align-items: center;
align-content: center;
flex: 1 0 0;
align-self: stretch;
flex-wrap: wrap;
padding: 2px 0px;
height: fit-content;
cursor: ${({ onClick }) => (onClick ? "pointer" : "default")};
width: 100%;
${({ size }) => {
switch (size) {
case "sm":
return css`
height: 32px;
`;
case "md":
return css`
height: 40px;
`;
case "lg":
default:
return css`
height: 48px;
`;
}
}}
background: ${({ type, theme }) => {
switch (type) {
case "End":
return `linear-gradient(to left, rgba(255, 255, 255, 0) 50%, ${theme.colors.GREEN[300]} 50%)`;
case "Start":
return `linear-gradient(to right, rgba(255, 255, 255, 0) 50%, ${theme.colors.GREEN[300]} 50%)`;
case "Pass":
return `${theme.colors.GREEN[300]}`;
default:
return "transparent";
}
background-color: ${({ type, theme }) => {
if (
type === "Past/Future" ||
type === "Default" ||
type === "Saturday" ||
type === "Sunday"
)
return "transparent";
if (type === "Pass") return theme.colors.GREEN[100];
return theme.colors.GREEN[300];
}};
border-radius: ${({ type }) => {
if (type === "Start") return "2px 0px 0px 2px";
if (type === "End") return "0px 2px 2px 0px";
if (type === "Pass") return "0px";
return "2px";
}};
width: 28px;
/* height: 24px; */ // CHACHA: 이것 때문에 기간 선택할 때 날짜 하이라이트랑 기간 표시 연두색의 높이차가 생깁니다. 아직 이것에 대한 디자인이 없어서 css 수정을 안 했어요..!
padding: 0px 2px;
gap: 10px;
`;

const CalendarDate: React.FC<CalendarDateProps> = ({
date,
exist,
type = "Default",
size = "lg",
onDateClick = () => {},
}) => {
const handleClick = () => {
Expand All @@ -169,8 +130,8 @@ const CalendarDate: React.FC<CalendarDateProps> = ({
}
};
return (
<DateWrapper type={type} onClick={handleClick} size={size}>
<DateContainer date={date} exist={exist} type={type} size={size}>
<DateWrapper type={type} onClick={handleClick}>
<DateContainer date={date} exist={exist} type={type}>
<ExistWrapper exist={exist} type={type}>
{date.getDate()}
</ExistWrapper>
Expand Down
Loading

0 comments on commit 2ae3556

Please sign in to comment.