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[#99] 마이페이지/예약현황 모달창 구현 #214

Merged
merged 18 commits into from
Mar 29, 2024
Merged

Feat[#99] 마이페이지/예약현황 모달창 구현 #214

merged 18 commits into from
Mar 29, 2024

Conversation

CheeseB
Copy link
Contributor

@CheeseB CheeseB commented Mar 28, 2024 •
edited
Loading

관련 문서

유형

  • 기능 구현
  • UI 구현
  • 리팩토링
  • 버그 해결
  • 문서 업데이트
  • 기타( )

작업 내용

  • [마이페이지] 예약현황 상세 모달 구현

설명

📌 기능

  • 예약 현황이 있는 날짜 클릭 시 해당 날짜에 대한 예약 현황 모달창 뜨도록 구현
  • 해당 날짜에 존재하는 예약 시간들 Dropdown 으로 선택 가능하도록 구현
  • 선택된 예약 시간별로 신청/거절/승인 상태의 예약 현황 리스트 표시

📌 UI

  • commonModal 컴포넌트 사용해서 모달 UI 구현
  • 신청/거절/승인 탭 별로 카드 컴포넌트 다르게 표시
  • 카드 리스트가 모달창 크기를 넘어가면 스크롤되도록 구현

🔧 추가 수정사항

  • 예약 내역 없으면 EmptyCard 작은버전으로 보이게 하기
  • 예약 내역 2개 이상 넘어가면 스크롤 보이도록 하기
  • 예약 거절/승인 버튼 누르면 confirm 모달 나오게 하기
  • 예약 내역 모달창 태블릿 이하 버전에서 화면에 꽉 차게 나오도록 하기 (CommonModal 수정)
  • Dropdown 선택값 길어지면 ellipse (...) 효과 적용

남은 작업 (리팩토링때 할것)

  • 모달창 캘린더 안에서 열리도록 수정
  • 태블릿 이하에서 모달 예약 리스트 더 많이 보이게 하기
  • 캘린더 클릭하면 활성화 상태로 유지시키기

스크린샷

📸 디바이스별 스크린샷

image

image

image

image

image

@CheeseB CheeseB added 기능 구현 기능 구현 UI 구현 UI 구현 🏃🏻💨 수정 중 수정 중 labels Mar 28, 2024
@CheeseB CheeseB linked an issue Mar 28, 2024 that may be closed by this pull request
Feat: 내 체험 예약 팝업 구현 #19
Closed
4 tasks
@CheeseB CheeseB force-pushed the feat/mypage/seongyeon branch 2 times, most recently from 9f5c569 to 6569737 Compare March 28, 2024 14:56
@CheeseB CheeseB added 🎉 수정 완료 수정 완료 and removed 🏃🏻💨 수정 중 수정 중 labels Mar 28, 2024
@CheeseB
feat: 예약 현황 모달에 CommonModal, useMultiState 적용 및 게임ID와 클릭한 날짜 Prop 전달
f4314b2
@CheeseB
feat: 예약현황 모달에 탭 추가
e40831f
@CheeseB
refactor: 예약 현황 response 타입명 더 명확하게 변경
aa26529
@CheeseB
feat: 모달에 일별 스케줄 정보 표시하는 기능 구현 (mock데이터)
ba6e9c7
@CheeseB
feat: 모달창 스타일 추가
34b80b1
@CheeseB
feat: 예약 상세데이터 테스트를 위한 mock데이터 추가
50fba75
@CheeseB
feat: 예약 내역 카드 컴포넌트 추가
48ccdcb
@CheeseB
feat: 모달 카드 스크롤 기능 추가
9243217
@CheeseB
feat: 이벤트 핸들러를 함수로 분리
6b1e192
@CheeseB
feat: 예약 카드 컴포넌트 리스트 렌더링 구현 (mock데이터)
a103f4d
@CheeseB
feat: 예약 데이터 없을때 EmptyCard 보이도록 수정
d49c1e1
@CheeseB
feat: 모달 데이터 2개 넘으면 스크롤 보이도록 수정
63a477c
@CheeseB
feat: 드롭다운 텍스트 넘치면 ellipse(...) 처리
c9258dd
@CheeseB
feat: 예약 승인/거절 누르면 confirmModal 열리도록 구현
1919145
@CheeseB
feat: 예약 현황 모달 태블릿 사이즈에서 꽉 차게 구현 (CommonModal 수정)
5d907fb
@CheeseB
feat: 태블릿 이하에서 닫기 버튼 large 사이즈로 키우기
ceef9e3
@CheeseB CheeseB added the 🚨ASAP As Soon As Possible label Mar 29, 2024
grapefruit13
grapefruit13 approved these changes Mar 29, 2024
View reviewed changes
Copy link
Contributor

@grapefruit13 grapefruit13 left a comment

Choose a reason for hiding this comment

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

LGTM

@CheeseB CheeseB merged commit 57d50d3 into dev Mar 29, 2024
@CheeseB CheeseB deleted the feat/mypage/seongyeon branch March 29, 2024 04:32
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@ccwnc ccwnc ccwnc approved these changes

@grapefruit13 grapefruit13 grapefruit13 approved these changes

@designsoo designsoo designsoo approved these changes

Assignees

@CheeseB CheeseB

Labels
UI 구현 UI 구현 기능 구현 기능 구현 🎉 수정 완료 수정 완료 🚨ASAP As Soon As Possible
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Feat: 내 예약 현황 페이지 UI 개발 Feat: 내 체험 예약 팝업 구현
4 participants
@CheeseB @designsoo @grapefruit13 @ccwnc