search

moofarm / ssuckssuck-frontend

0 stars 2 forks source link

Feat: 모달 4개 구현, Calendar 컴포넌트 구현 #14

Closed alex-koko closed 7 months ago

alex-koko commented 7 months ago

📝 작업 내용

모달의 Props

모달은 (title, contents, setModal, state, leftLabel, rightLabel) 를 props로 보내도록 구현하였습니다.
- type: 모달의 유형을 지정합니다. 기본값은 "short"이며, "long"과 "wide" 유형도 가능합니다. 유형에 따라 모달의 너비와 높이가 달라집니다.
- setModal: 모달의 상태를 제어하는 함수입니다. 이 함수를 호출하여 모달을 열거나 닫을 수 있습니다. isRequired로 필수 값입니다.
- state: 모달의 열림/닫힘 상태를 나타냅니다. true이면 모달이 열려 있는 상태이고, false이면 닫혀 있는 상태입니다. isRequired로 필수 값입니다.
- title: 모달의 제목을 지정합니다. 기본값은 "모달 제목"입니다.
- contents: 모달의 내용을 지정합니다. 기본값은 "모달 내용"입니다.
- leftLabel: 왼쪽 버튼의 라벨을 지정합니다. 기본값은 "아니오"입니다.
- rightLabel: 오른쪽 버튼의 라벨을 지정합니다. 기본값은 "네"입니다.

- children: 모달 내부에 추가로 렌더링할 내용을 지정합니다.

모달 예시사진

Modal.jsx에서 내부에 요소를 넣으면 자동으로 modal의 크기가 조정되도록 구현하였습니다.

기본 모달 (Modal.jsx) image

캘린더

캘린더 컴포넌트 (Calendar.jsx) image React Datepicker 를 사용해서 구현했습니다!

🔗 연관 이슈

7

✅ 리뷰 요구사항

ramrami-B commented 7 months ago

고생하셨습니다!! 몇 가지 디자인 피드백 드리자면

  1. 모달 제목은 bold 사용하는 것 어떨까요?
  2. 완료일의 input 태그 끝과 미정 글자 끝 부분을 일직선으로 맞추는게 더 예쁠 것 같습니다! image

    여기 이 부분!

피그마 상에서는

image

이렇게 끝부분이 붙어 있어요 :)

  1. input 태그의 border와 outline을 없애거나 연하게 하는 것 어떨까요?

    image

    이렇게 검은색으로 border 처리가 되어 있는 것 같은데 (아마 1px?) 버튼의 경우 gray 0.5px만 줬는데 통일하거나 없애도 배경이 초록색이라 괜찮을 것 같습니다! 그리고 outline(클릭 했을 때 border) 속성은 none으로 되어 있는 지 궁금 합니다!

  2. 버튼 컴포턴트를 사이즈 small로 통일 하신 것 같은데 기본 모달 제외 롱이나 와이드는 medium, large 등 버튼 사이즈를 더 큰 걸 사용하는 것이 좋을 것 같습니다!

감사합니다 :)