Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[FE]: 날짜를 선택할 수 있는 캘린더 UI 구현 #68

Merged
merged 12 commits into from
Jul 25, 2024
Merged

[FE]: 날짜를 선택할 수 있는 캘린더 UI 구현 #68

Changes from 1 commit
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
323e276
chore: global button color 스타일 삭제
hwinkr Jul 24, 2024
4d5bc7b
feat(useCalendarInfo): 날짜 정보를 알려주는 커스텀 훅 구현
hwinkr Jul 24, 2024
bb5f018
feat(Calendar): 달력 컴포넌트 구현
hwinkr Jul 24, 2024
abf8706
chore: 스토리북 preview 설정 수정
hwinkr Jul 24, 2024
a556f84
test(Calendar): 달력 컴포넌트 UI 테스트 구현
hwinkr Jul 24, 2024
2658bb7
chore(useTimePick): 함수 시그니쳐를 표현식으로 통일
hwinkr Jul 24, 2024
5a8159f
Merge branch 'develop' into feat/60-create-calendar
hwinkr Jul 24, 2024
9a0c5fa
chore: px단위를 rem단위로 수정
hwinkr Jul 24, 2024
e7e3d9f
refactor: 빈 칸으로 표시되어야 하는 날짜인 경우, div 태그로 감싸도록 수정
hwinkr Jul 24, 2024
b29ca25
refactor: getDayInfo 함수의 인자를 객체 형태로 변경
hwinkr Jul 24, 2024
f95069b
chore(useCalendarInfo): 의미있는 변수명을 사용하도록 수정
hwinkr Jul 24, 2024
16308cc
Merge branch 'develop' into feat/60-create-calendar
hwinkr Jul 25, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 10 additions & 10 deletions frontend/src/components/_common/Calendar/Calendar.styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ export const s_calendarContainer = css`

export const s_calendarContent = css`
display: grid;
grid-auto-rows: 40px;
grid-auto-rows: 4rem;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍👍👍 💯💯💯

grid-template-columns: repeat(7, 1fr);
width: 100%;
`;
Expand All @@ -23,9 +23,9 @@ export const s_dayOfWeek = css`
justify-content: center;

width: 100%;
min-width: 40px;
height: 40px;
min-height: 40px;
min-width: 4rem;
height: 4rem;
min-height: 4rem;

font-size: 1.2rem;
font-weight: normal;
Expand All @@ -38,8 +38,8 @@ export const s_monthHeader = css`
justify-content: space-between;

width: 100%;
margin-bottom: 20px;
padding: 0 10px;
margin-bottom: 2rem;
padding: 0 1rem;

font-size: 1.5rem;
font-weight: bold;
Expand All @@ -55,8 +55,8 @@ export const s_daySlotButton = css`
justify-content: center;

width: 100%;
min-width: 36px;
height: 36px;
min-width: 3.6rem;
height: 3.6rem;

background-color: transparent;
border: none;
Expand All @@ -75,8 +75,8 @@ export const s_selectedDaySlot = (isSelected: boolean) => css`
align-items: center;
justify-content: center;

width: 36px;
height: 36px;
width: 3.6rem;
height: 3.6rem;

${isSelected &&
css`
Expand Down