[FE] feat #91: BEST상품 표시, 초기 화면 구현 #95
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Closed
2 tasks
silvertae
added a commit
that referenced
this pull request
Jul 1, 2023
* [FE] chore #1: 개발환경 세팅 (#2) * [#1] feat: CRA 세팅 * [#1] chore: lint 세팅 * [#1] chore: eslint 세팅 * [#1] chore: prettier 세팅 * [FE] feat #1: main 상단탭 구현 (#20) * [#15] design: 메인화면 레이아웃 구성 * [#15] design: 상단 탭 메뉴 레이아웃 구성 * [#17] feat: 상단 탭메뉴 구현중 * [#17] fix: 탭메뉴 버그 해결 - 드래그가 안되던 문제 해결 - css 너비 조정 * [#15] design: reset css적용 * [#15] design: 폰트 세팅 * [#15] design: 상단 탭 메뉴 레이아웃 구성 * [FE] feat #5:상단탭 & 메인화면 UI 및 기능 작업 (#27) * design: 메인화면의 메인영역 UI 구현 * design: 메인영역 카드 컴포넌트들 디자인 수정 및 간단한 호버 효과 추가 * feat: 상단탭에서 클릭된 탭 배경색 변경 기능 추가 - TabContainer에 activeTabIndex state 추가 - key를 props를 사용해서 발생한 오류 해결 * feat: 각 메뉴 클릭시 해당하는 상품들 렌더링 기능 추가 - 더미 데이터 menuList를 만들어서 구현 * feat: MSW 설치 후 mock server에서 데이터를 받아오는 기능 구현 - MSW 패키지 설치 - mock server와 API 명세서에 맞는 mock data 구성 - 서버에서 fetch한 데이터로 렌더링하도록 컴포넌트 수정 - 상품 이미지 assets에 추가 * fix: MSW 관련 오류 해결 - 처음 페이지 로드될 떄 뜨는 에러 해결 - msw 패키지 1.2.1로 다운그레이드 - msw 패키지 다운그레이드를 하기 위해서 typescript 5.0.4로 다운그레이드 * design: 상단 탭메뉴 활성화 시 테두리 색상이 변경되도록 수정 * [FE] feat #23: 메뉴 담기 화면 모달 구현 (#29) * [#23] chore: 메뉴 담기 화면 라우팅 세팅 * [#24] design: 메뉴 담기 모달창 UI 구현 및 임시 기능 구현 - 더미 메뉴 카드 클릭시 모달창 띄우기 구현 - 수량 조절 기능 구현 - 수량은 1에서 내려가지 않음 * [#28] feat: 메뉴 담기 모달창 기능 추가 구현 - 사이즈, 온도, 수량 조정 기능 --------- Co-authored-by: silvertae <[email protected]> * [FE] feat : 메인화면과 모달이 연동되는 기능 구현 (#30) * chore: 불필요한 index.html 주석 제거 및 titel 변경 * feat: 각 상품 클릭시 모달 컴포넌트 띄워주는 기능 추가 - 각자 개발한 부분에서 중복되는 부분 제거 - 상품 클릭시 주문담기 모달창이 띄워지도록 수정 - TestBtnForModal 컴포넌트 삭제 * feat: 모달 렌더링 시 클릭된 상품의 데이터를 전달 기능 추가 - Link 컴포넌트에서 state로 필요한 데이터들을 전달하도록 구현 - AddMenu 컴포넌트에서 받아온 데이터를 가지고 각 상품 정보 렌더링 * [FE] refactor #23: 메인화면과 모달이 연동되는 기능 (#42) * [#28] refactor: 메뉴 담기 모달창 기능 추가 구현 - msw, useEffect를 사용하여 렌더링한다 * [#28] feat: 메뉴 담기 모달창 기능 추가 구현 - 서버로 전송 기능 추가 - TODO 장바구니 렌더용 데이터, 로직 필요 * [#28] feat: 메뉴 담기 모달창 기능 추가 구현 - 리팩터링중 * [FE] feat #44: 장바구니 영역 UI 작업 (#47) * design: 장바구니 작업 전 메인화면 css 수정 - 메인화면 height, padding, border 관련 css 수정 - 한 화면에 여러 상품들이 있을때 스크롤 추가 * refactor: 불필요한 css 중복 제거 - 이전 작업한 부분에서 불필요한 css 코드와 주석을 제거함 * refactor: Tab 컴포넌트 렌더링 부분 리팩터링 - 마스터 피드백 이후 if문에서 삼항연산자로 좀 더 간결하게 수정 * design: 장바구니 화면 레이아웃 구현 * design: 장바구니 목록들 CartItem 컴포넌트로 분리 - CartItem 컴포넌트 생성 - 불필요한 Button 컴포넌트 삭제 * feat: props로 받은 데이터로 CardItem을 렌더링 하는 기능 추가 * [FE] feat #23: 라우터 제거 및 가격 렌더링 버그 픽스 (#48) * [#28] refactor: 라우팅 제거 - 라우터를 제거하고 isModalOpen상태에 따라 모달 띄움 * [#28] fix: 가격 변동 버그 수정 * [FE] feat #23: 장바구니 메뉴 추가 (#50) * [FE] feat #49: 장바구니에 메뉴 추가 기능 * [FE] feat #49: 장바구니에 메뉴 추가 기능 - 담기 버튼 클릭시 담은 메뉴 장바구니에 렌더링 * [FE] design #23: 장바구니 오른쪽 UI (#52) * [FE] feat #49: 장바구니에 메뉴 추가 기능 * [FE] feat #49: 장바구니에 메뉴 추가 기능 - 담기 버튼 클릭시 담은 메뉴 장바구니에 렌더링 * [#49] design : 장바구니 오른쪽 UI * [FE] feat #44: 주문담기 모달 및 장바구니 연결되는 기능 구현 (#56) * chore: 컴포넌트 폴더 구조 변경 - 컴포넌트가 늘어나면서 각 파일들 위치를 바로 찾기가 어려워서 영역별로 구분해서 폴더로 나눴다. * chore: mock server와 data 관련 수정 - API 명세서에 맞는 포맷으로 데이터와 uri 수정 - 커피 메뉴 상품별 이미지 추가 - public 폴더 불필요한 파일들 제서 * refactor: 옵션에 따른 표시가격 수정 기능 리팩터링 - 기존에 FE에서 추가요금을 정하던 것을 서버에서 받아온 추가요금 데이터로 처리하도록 변경 - Index, Id 헷갈리는 parameter 이름 변경 * feat: 주문담기 완료시 모달이 닫히는 기능 추가 * refactor: 주문담기 모달에서 각 menuId와 일치하는 데이터를 불러오도록 리팩터링 - Mock data 수정 - menuCardClickHandler 에서 인자로 받은 menuId에 맞는 데이터를 selectedProduct로 설정하는 로직 추가 * fix: MSW에서 브라우저 콘솔에 출력해주던 경고 메세지 해결 * feat: 주문담기 시 장바구니에 담긴 상품인지 비교 기능 추가 - setOrderList 시 새로운 아이템으로 추가하기 전 이미 장바구니에 담긴 옵션인지 검증하는 로직 추가 - 이미 같은 옵션 상품이 있을 때는 수량만 증가 - 새로운 상품일 시 새로운 아이템으로 추가 * feat: 장바구니 각 아이템 삭제 기능 추가 - 각 아이템 삭제하기 버튼 클릭시 setOrderList로 필터링된 새 배열로 orderList를 바꾼다. - 바뀐 orderList로 장바구니 목록을 재렌더링한다. * design: 장바구니 아이템 목록에 css 스타일 추가 * feat: 장바구니 담길때 모달 이미지가 이동하는 애니메이션 추가 - css transform, transition으로 클래스명 바꿔서 애니메이션 적용 - 애니메이션이 끝난 후 이후 동작이 일어나도록 딜레이를 걸어주는 useSleep 이라는 커스텀 훅 추가 * feat: 장바구니 목록 fadeIn 애니메이션 작업중 * [FE] feat #44: 장바구니 전체 취소 및 결제, 타이머 (#57) * [#51] feat: 장바구니의 결제버튼 클릭시 결제 방식 선택 모달창을 띄운다 - 모달을 재사용한다 - 장바구니 결제버튼은 totalPrice가 0 보다 클때 활성화된다 * [#51] feat: 장바구니의 전체 취소 버튼 클릭시 담긴 상품과 총 가격을 초기화 하는 기능 * [#51] feat: 주문이 담길때 타이머를 실행하고 0이 되면 주문내역을 초기화 하는 기능 * [#51] feat: 상품 담기 클릭시 해당 모달이 닫히는 기능 * [#51] feat: 결제 진행시 타이머 멈추는 기능 - TODO 결제중 닫히면 초기화 시키는 기능 추가해야함 * [#51] feat: 각 결제 버튼 클릭시 해당하는 종류의 모달창 content 띄우기 --------- Co-authored-by: silvertae <[email protected]> * fix: PR 합치고 난 후에 오류 수정 (#58) - PR 합치고 난 후에 오류 수정 - 모달 관련 오류 발생해서 원인 파악중 * [#51] feat: 오류 해결 (#62) * [FE] feat #68: 결제 기능 - 카드 (#82) * [#68] chore: msw핸들러 추가 * [#68] chore: 로고 파일 추가 * [#68] design: 로딩인디케이터, 결제 실패사유 ui * [#68] feat: 카드 결제 진행시 번호 입력할 인풋 렌더링 * [#68] feat: 카드 결제 진행 - 결제 실패 상황 구현 * [#44] fix: 모달창을 닫으면 시간이 멈추던 장바구니 타이머 버그 수정 - 모달창을 닫으면 시간이 초기화된 후 다시 타이머가 흐른다 * [#68] feat: timer컴포넌트 분리 * [#68] comment: 주석추가 * [FE] feat #72: 현금 결제창 기능 구현과 영수증 화면 UI 작업 (#79) * fix: PR 합치고 난 후에 오류 수정 - PR 합치고 난 후에 오류 수정 - 모달 관련 오류 발생해서 원인 파악중 * fix: 모달 관련 에러 해결중 * refactor: Modal 관련 전반적인 리팩터링 - App에서 관리하던 모달 관련 상태들 없애고 각 모달이 열리는 컴포넌트로 이동 - Modal 컴포넌트에 표시해 줄 컴포넌트를 감싸서 children으로 전달하도록 변경 - 닫을 때 사용하는 closeHandler 수정 * feat: 현금 입력창 투입금액 버튼 기능 추가 - 각 버튼을 눌렀을 때 해당하는 금액이 투입되도록 구현 - 투입금액이 총 주문금액보다 같거나 클 때 결제 버튼이 활성화 되도록 구현 * feat: 영수증 페이지를 띄우기 위해 Router, Link 컴포넌트 추가 * design: 영수증 화면 UI 구현 * fix: 각자 개발한 PR 합친 후 오류 수정 (#83) 짱 * [FE] refactor : App 상태 관련 전반적인 리팩터링 및 바뀐 API에 따른 수정 (#88) * fix: 각자 개발한 PR 합친 후 오류 수정 * refactor: 바뀐 API에 명세서에 맞게 각 메뉴 데이터 수정 - 각 상품을 클릭했을 때 열리는 주문담기 모달에 필요한 데이터의 형식이 변경됨에 따라서 handler.ts 파일에 있던 mock data를 수정했다. * refactor: 변경된 메뉴 데이터에 맞게 AddMenu 리팩터링 * refactor: 카테고리가 바뀔때마다 App 전체가 리렌더링 되는 오류 수정 - App에서 관리하던 상태들을 필요로 하는 각 컴포넌트들로 분리 - App에 있던 useEffect 하위 컴포넌트들로 이동 - 카테고리 전환시 화면 깜빡이는 새로운 오류 발생 - categoryId를 activeTab index에서 +1 해서 사용하도록 변수 추가 * fix: 카테고리 전환시 화면 깜빡이는 오류 수정 * chore: MainArea 변수 위치 조정 * [FE] feat #85: 카드결제 성공시 영수증 연결, 영수증 타이머 구현 (#89) * [#85] chore: 목서버 핸들러 딜레이 삭제 * [#85] feat: 랜덤 딜레이 함수 추가 * [#85] comment: 주석 제거 * [#85] design: 그림자 ui 수정 * [#85] feat: timer 컴포넌트의 orderlist의존성 제거 * [#85] feat: 영수증 타이머 구현 * [#85] fix: export default 삭제에 따른 import방식 변경 * [#85] rename: 불필요한 컴포넌트 삭제 * [#85] feat: 카드결제 실패결과창 구현 * [#85] comment: cartItem에 있던 주석 제거 * [#85] feat: 카드 결제 구현 - 실패시 실패 결과창을, 성공시 라우팅된 영수증 컴포넌트를 띄운다 * [#85] feat: 타이머 수정 * [FE] feat : 현금결제 창 기능 관련 작업 진행중 (#90) * feat: 서버에 필요한 형식으로 데이터를 가공해주는 함수 추가 - orderList 배열에서 price 프로퍼티만 제외해서 반환해주는 modifyOrderList() 함수 추가 * feat: 현금결제 버튼 클릭시 서버와 통신하는 기능 추가 - 현금결제 버튼 클릭시 서버에 필요한 데이터를 가공해서 post 요청 - 서버에서 받아온 응답을 가지고 영수증 화면에 보여줄 수 있는 기능 추가 예정 * [FE] feat #91: BEST상품 표시, 초기 화면 구현 (#95) * [#91] feat: best상품 배지 렌더링 추가 * [#91] feat: 초기 화면 및 클릭시 home경로 이동 구현 * [#91] fix: 변수이름 변경 * [FE] feat #80:현금 결제창 및 영수증 화면 기능 작업 (#96) * feat: 서버에 필요한 형식으로 데이터를 가공해주는 함수 추가 - orderList 배열에서 price 프로퍼티만 제외해서 반환해주는 modifyOrderList() 함수 추가 * feat: 현금결제 버튼 클릭시 서버와 통신하는 기능 추가 - 현금결제 버튼 클릭시 서버에 필요한 데이터를 가공해서 post 요청 - 서버에서 받아온 응답을 가지고 영수증 화면에 보여줄 수 있는 기능 추가 예정 * feat: 현금결제 버튼 클릭후 영수증 화면으로 넘어갈때 데이터를 전달하는 기능 추가 - window.history.state를 이용해서 서버에서 받은 데이터를 영수증 페이지로 넘겨주도록 구현 - 불필요한 Link 컴포넌트 삭제 * feat: 받아온 데이터로 영수증을 렌더링하는 기능 추가 - 결제창에서 받아온 데이터와 영수증 화면에서 받아온 데이터를 이용해 영수증 렌더링 --------- Co-authored-by: gunoc <[email protected]> * fix: 서버랑 연동후 오류 수정 * fix: 카드 결제에서 orderList 수정하는 부분 추가 * Hotfix (#104) * fix: Receip에서 orderId를 orderNumber로 수정 * fix: 장바구니 메뉴 이름 표시 기능 수정 * chore: 간단한 css 수정 --------- Co-authored-by: gunoc <[email protected]>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
No description provided.