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

feat-fe: Date Picker 이벤트 발생 컴포넌트 변경 #442

Merged
merged 3 commits into from
Aug 15, 2024
Merged

feat-fe: Date Picker 이벤트 발생 컴포넌트 변경 #442

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
0b59169
Create draft PR for #441
github-actions[bot] Aug 14, 2024
7a633a1
feat: DateInput 클릭 이벤트 변경
lurgi Aug 14, 2024
7f464a1
chore: IconButton의 기본값 button 설정
lurgi Aug 14, 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
3 changes: 1 addition & 2 deletions frontend/src/components/common/DateInput/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ export default function DateInput({ label, innerText, ...props }: DateInputProps
};

return (
<S.Container>
<S.Container onClick={handleIconClick}>
Copy link
Contributor

Choose a reason for hiding this comment

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

버블링 이용 SMART 👍

Copy link
Contributor

Choose a reason for hiding this comment

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

오 이벤트 버블링을 사용하셨군요! 멋집니다 👍

<S.Wrapper>
<S.Label>{label}</S.Label>
<S.Text>{innerText}</S.Text>
Expand All @@ -33,7 +33,6 @@ export default function DateInput({ label, innerText, ...props }: DateInputProps
outline={false}
size="sm"
color="white"
Comment on lines 33 to 35
Copy link
Contributor

Choose a reason for hiding this comment

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

button 요소의 type를 button으로 지정해주면 의도치 않은 이벤트 발생으로부터 조금 더 안전하지 않을까 싶습니다.

Suggested change
outline={false}
size="sm"
color="white"
outline={false}
size="sm"
color="white"
type="button"

Copy link
Contributor

Choose a reason for hiding this comment

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

중요한 부분 짚어주셨네용!! 감사합니다~

onClick={handleIconClick}
>
<S.Icon>
<MdCalendarMonth size="2rem" />
Expand Down
5 changes: 3 additions & 2 deletions frontend/src/components/common/DateInput/style.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ const Container = styled.div`
width: 100%;

position: relative;
cursor: pointer;
`;

const Wrapper = styled.div`
Expand All @@ -31,8 +32,8 @@ const Text = styled.span`
const Input = styled.input`
${hiddenStyles}
position: absolute;
top: 3rem;
right: 3rem;
top: 3.5rem;
right: 22rem;
`;

const Icon = styled.div`
Expand Down
Loading