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.

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

[FEAT] 메인 세팅 모달 퍼블리싱 #334

Merged
merged 8 commits into from
Jan 12, 2025

Conversation

seong-hui
Copy link
Member

작업 내용 🧑‍💻

  • 메인 세팅 모달 퍼블리싱을 하였습니다.
  • DateBtn에 DateCorrectionModal을 연결하였습니다.
  • TimeBtn에 기존의 TimeDropDown을 연결하였습니다.

알게된 점 🚀

기록하며 개발하기!

  • onBlur를 활용해 컴포넌트 외부를 클릭했을 때 isOpen을 닫는 기능을 구현하였습니다

리뷰 요구사항 💬

리뷰어가 특별히 봐주었으면 하는 부분이 있다면 작성해주세요

  • 일단 모달 컴포넌트 내에서 상태가 수정되게는 하였으나 api붙이는 경우까지는 고려하지 않았습니다
  • 수정하면 좋을 부분 말씀해주세요!!

관련 이슈

close #325

스크린샷 (선택)

image
image image

Copy link

github-actions bot commented Jan 7, 2025

Copy link

github-actions bot commented Jan 7, 2025

Copy link
Member

@wrryu09 wrryu09 left a comment

Choose a reason for hiding this comment

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

날짜 데이트 오브젝트로 바꾸고 온블러도 잘 적용해주셨네요 ~~ 짱

<PopUp type="title" />
</MainSettingModalHeadLayout>
<MainSettingModalBodyLayout>
<DeadlineBox date={new Date()} endTime="06:00pm" label="마감 기간" />
Copy link
Member

Choose a reason for hiding this comment

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

리턴문 위에서 변수 지정해 Date 담아두고 사용하면 렌더링할 때마다 데이트 오브젝트가 새로 생기지 않게 할 수 있을 것 같아요!!

Copy link
Member Author

Choose a reason for hiding this comment

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

해당 date를 전달한 곳은 임시로 데이터를 넘겨주는 부분이라서 기능 붙이면서 수정하도록 하겠습니다!!

startTime?: string;
endTime: string;
date: Date;
setDate: (newDate: Date) => void;
Copy link
Member

Choose a reason for hiding this comment

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

사소한 부분이지만 상탸를 직접적으로 변경하는 함수랑 헷갈릴 수도 있어 핸들~ 정도로 네이밍 바꿔주면 혼란을 줄일 수 있을 것 같아용

Copy link
Member Author

Choose a reason for hiding this comment

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

앗 그러네요!! 해당 사항 수정하였습니다

</TextBox>
</DateBtnLayout>
{isOpen && (
<DropdownStyle tabIndex={-1}>
Copy link
Member

Choose a reason for hiding this comment

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

온블러 굳굳 👍

@wrryu09
Copy link
Member

wrryu09 commented Jan 9, 2025

설명 쪽 텍스트 길어질 경우도 확인해주시면 감사하겠습니당!
IMG_4678

Copy link
Contributor

@Kjiw0n Kjiw0n left a comment

Choose a reason for hiding this comment

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

확인했습니다!! 엄청 복잡한 모달인데 수고하셨어요 굳굳👍 👍

몇가지 수정요청사항만 확인 부탁드려요!

1. 요기 테두리쪽 배경색 수정 부탁드려요!!
image

2. 아이콘, 텍스트 중앙정렬 맞추면 좋을 것 같습니다!
image

스크린샷 2025-01-10 00 40 05 스크린샷 2025-01-10 00 45 53

3. DeadlineBox startTime, endTime props 띄어쓰기

Comment on lines +19 to +27
const placeholder = type === TYPE.TITLE ? '제목을 입력하세요' : '설명을 추가하세요';

return (
<PopUpContainer>
{type === TYPE.DESC && state === INPUT_STATE.DEFAULT && <Icon name="IcnDescription" size="tiny" />}
<StyledInput
type={type}
state={state}
placeholder="제목을 입력하세요"
placeholder={placeholder}
Copy link
Contributor

Choose a reason for hiding this comment

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

헉 ㅋㅋ 👍 👍

Comment on lines +31 to +35
<DeadlineBox date={new Date()} endTime="06:00pm" label="마감 기간" />
<PopUpTitleBox>
<PopUp type="description" />
</PopUpTitleBox>
<DeadlineBox date={new Date()} startTime="11:00am" endTime="06:00pm" label="진행 기간" />
Copy link
Contributor

Choose a reason for hiding this comment

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

Suggested change
<DeadlineBox date={new Date()} endTime="06:00pm" label="마감 기간" />
<PopUpTitleBox>
<PopUp type="description" />
</PopUpTitleBox>
<DeadlineBox date={new Date()} startTime="11:00am" endTime="06:00pm" label="진행 기간" />
<DeadlineBox date={new Date()} endTime="06:00 pm" label="마감 기간" />
<PopUpTitleBox>
<PopUp type="description" />
</PopUpTitleBox>
<DeadlineBox date={new Date()} startTime="11:00 am" endTime="06:00 pm" label="진행 기간" />

시간 수정할 때 정렬이 살짝 이상해서 봤더니 사이에 띄어쓰기가 업서요 수정해주세요!!

Copy link
Member Author

Choose a reason for hiding this comment

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

여기 나중에 데이터 임시로 넣어둔 부분이라서 나중에 데이터 넣으면서 수정하도록 하겠습니다!

Copy link
Member Author

Choose a reason for hiding this comment

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

위에 버튼 정렬에서 제가 보기에는 정렬이 맞게 보이는데 이상하네용 ,,ㅜ
image

Copy link

@seong-hui
Copy link
Member Author

테두리쪽 배경색은 기존 버튼 컴포넌트 자체에서 수정해야하는 부분 같아서 추후에 버튼 컴포넌트를 보는게 좋을 것 같습니다!

Copy link
Contributor

@Kjiw0n Kjiw0n left a comment

Choose a reason for hiding this comment

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

넵 확인했습니다!! 수고하셧어요~~

@seong-hui seong-hui merged commit b0213dc into develop Jan 12, 2025
4 checks passed
@seong-hui seong-hui deleted the feat/#325/main-setting-modal branch January 12, 2025 10:59
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Status: Done
Development

Successfully merging this pull request may close these issues.

[FEAT] 메인 세팅 모달 퍼블리싱
3 participants