카테켐 | [STEP2 clone coding] 6주차 과제 (배포 완료 !!)

과제명

1. 카카오 클라우드 배포

 

과제 설명

1. 통합테스트를 구현하시오. ☑️
2. API문서를 구현하시오. (swagger, restdoc, word로 직접 작성, 공책에 적어서 제출 등 모든 방법이 다 가능합니다)  ☑️
3. 프론트앤드에 입장을 생각해본뒤 어떤 문서를 가장 원할지 생각해본뒤 API문서를 작성하시오. >> 솔직히 과제 클리어하느라 이 부분까지 신경쓰지는 못한 것 같다 ㅠ
4. 카카오 클라우드에 배포하시오. ☑️

 

과제 상세 : 수강생들이 과제를 진행할 때, 유념해야할 것

아래 항목은 반드시 포함하여 과제 수행해주세요!

 

• 통합테스트가 구현되었는가?
• API문서가 구현되었는가?
• 배포가 정상적으로 되었는가?
• 프로그램이 정상 작동되고 있는가?
• API 문서에 실패 예시가 작성되었는가?

 

---

정말 x 1000 힘들었던 이번 주차 과제도 드디어 끝이 났다.

 

빌드하다가 에러뜨고, intellij 자체에서도 오류 때문에 맞는 문법 에러표시하고, 경로 상 한글 폴더 이슈 등등 에러 잡는데만 10시간  + a로 쓴 것 같고 너무 머리 아팠다. 후하

 

그렇게 완성된 나의 과제물 

 

1. API 문서

들어가서 보는 게 안되는 것 같다 ..

 

2. 카카오 쇼핑하기 클론코딩

https://user-app.krampoline.com/kc65fd4f0cdb3a/

React App

 

📋 웹사이트 구현 내용

 

웹 사이트 구현 내용을 이미지와 함께 살펴보고 추가할 기능 또는 수정사항들을 고찰해보고자 한다.

1) 메인 화면 - 전체 상품 보기

 

메인 화면 - 1

메인 화면 -2

다음과 같이 메인화면이 구성되어 있다.

본 화면에서는 전체 상품을 확인할 수 있고, 장바구니와 로그인 UI를 통해 각 서비스에 접근 가능하다. 

 

유저의 접근성을 위해 메인 화면에서도 바로 회원가입 창으로 접근할 수 있는 UI가 추가되면 좋을 것 같다.

 

2) 유저 서비스 - 로그인 및 회원가입

 

로그인, 회원가입 기능 구현

 

다음으로는 유저 서비스인 로그인과 회원가입 화면이다. 회원가입 기능의 경우 중복 이메일 체크 기능이 있으며, 확인을 통해 회원가입하고, 로그인 할 수 있다.

 

구현 중 실수로 비밀번호가 8~40자 사이인데 이름을 8~40자 사이로 지어야 하게 만들어버렸다. 이 부분은 추후 수정사항에 해당한다.
또한, 로그인 성공 시에는 로그인 완료 창을 띄우지만, 로그인을 실패했을 때 알림창이 뜨지 않는다. 이 부분도 개선이 필요하다.

 

3) 상세 상품 보기

 

상세 상품 보기

 

메인창에서 제품을 클릭하여 상세 제품을 확인할 수 있고 로그인이 되었다면, 옵션을 클릭해 장바구니에 담을 수 있다. 톡딜가로 구매하기 기능은 요구사항에 없기 때문에 구현되지 않은 기능이다.

 

4) 주문하기 - 주문 수정

 

 

장바구니를 눌러 주문한다. 이때, 수량을 추가하거나 줄이는 등의 주문 수량을 수정할 수 있고, 다른 상품을 추가로 장바구니에 담으면 함께 장바구니에 담긴다.

 

5) 결제하기

 

 

배송지 정보를 수정하고 결제를 진행한다. 

 

배송지 정보를 입력받고 저장할 수 있는 기능을 추가한다면 유저에게 더욱 편리한 서비스를 제공할 수 있을 것 같다. 

 

6) 주문 확인하기

 

 

결제 후 주문을 확인한다.

 

이 화면의 경우 주문상품 정보가 나타나지 않고 있는데 수정을 해야할 부분으로 확인된다. 

 

+) 주문이 완료된 후에는 다음과 같이, 장바구니가 비워진다.

---

 

ps. 나의 우당탕탕 일지

https://www.notion.so/6-28b2d90e25ae4a6cb6187322529cc057