👻 팀 소개

안녕하세요, TEAM NXLL입니다.

팀장 FE.

팀원 FE.

팀원 FE.

팀원 FE.

팀원 FE.

팀원 FE.

• Project-NXLL (Demo)

• ❗관리자
  • ID : [email protected]
  • PW : 12345678
• ❗사용자
  • ID : [email protected] ...
  • PW : 12345678

• 프로젝트를 진행하면서 작성한 기록들은 여기서 보실 수 있습니다.
• 프로젝트 팀 레포는 여기서 보실 수 있습니다.
  
  
  

📆 과제 기간 및 담당 업무

과제 기간: 2022. 11. 28 ~ 2022. 12. 21

• 조민정 : <사용자 페이지> FOOTER 퍼블리싱, 계좌 연결, 결제 페이지, 구매 내역 페이지
  
• 강현주 : <관리자 페이지> 상품 추가 삭제 수정 | <사용자 페이지> 카테고리 기능
  
• 김상현 : <사용자 페이지> 로그인, 로그아웃, 메인 페이지, 장바구니
  
• 배현수 : <사용자 페이지> 마이쇼핑 페이지 퍼블리싱, 마이오더 페이지 퍼블리싱, 상세 페이지, 장바구니
  
• 오혜성 : <관리자 페이지> 제품, 구매 내역 목록 조회 페이지, 구매 내역 확정, 취소 | <사용자 페이지> 결제 페이지
  
• 한혜림 :<사용자 페이지> 메인 페이지, 검색 기능 | <관리자 페이지> UI/UX | 총괄 퍼블리싱
  
  
  

🪄 기술 스택

⌨️ 레퍼런스

기능 개발에 우선적인 초점을 두고 프로젝트를 진행하여 디자인과 판매 상품들은 엑토몰을 참고하여 진행하였습니다.

🖥️ 주요 구현 기능

인증 - 사용자

1. 회원 가입

• 회원 가입 api로 가입 정보를 보냄

2. 로그인

• 로그인 성공 시 : 토큰 값을 받아서 LocalStorage에 저장
• 로그인 유지 : 토큰 값이 LocalStorage에서 삭제되지 않는 이상 계속 유지됨
• 로그아웃 시 LocalStorage AccessToken 삭제되면서 메인 화면으로 전환
• 관리자 계정으로 로그인하면 관리자 페이지로 갈 수 있는 버튼이 활성화 됨

메인 홈 - 사용자

1. 홈

• keyboard, mouse, new Item 별로 메인 상품 출력
• 각 섹션별로 등록된 제품이 없을 때 '상품준비중' 배너 구현
• 매진된 제품은 제품 가격 대신 'sold out' 아이콘으로 대체
• 상품 검색 가능
• nav 탭을 누르면 해당 종류별로 품목 출력
• 장바구니 페이지로 넘어가지 않고 바로 확인 가능
• 스크롤에 반응하는 nav영역

2. 결제 - 제품 거래 (구매) 신청

3. MY-SHOP (내정보)

• 사용자 정보 수정 (회원 정보 → 조회)
  • 사용자 정보 수정
  • 계좌
    • 선택가능한 은행 목록 조회
    • 계좌 목록 및 잔액 조회
    • 계좌 연결
    • 계좌 해지
  • 주문내역 조회 (주문내역 조회 → 조회) + 제품 전체 거래 (구매) 내역 - 주문 취소 - 제품 거래 (구매) 취소 + 주문 확정 - 제품 거래 (구매) 확정
    
    

4. 제품검색

• 품명으로 상품 검색
• 검색 내용이 없을 때 검색결과 없음 화면 출력
  
  
  

ETC. - 사용자

1. 장바구니

2. 상품 탭 ex)홀리데이 특가

3. 제품 상세 보기

제품 - 관리자

1. 모든 제품 조회

• 제품수정, 제품 삭제
  • 제품수정 (모든 제품 조회 → 수정)
  • 제품삭제 (모든 제품 조회 → 삭제)

2. 전체 거래 내역

• 거래(판매) 내역 완료/취소 및 해제

3. 제품 추가

📚 개발 문서

1. 코드 문서
   html을 작성하면서 생긴 선택자명을 공유하기 위해서 작성하였고, 테스트 하면서 사용되는 ID/PW를 공유하였습니다. SPA 방식으로 프로젝트를 진행하면서 저희는 Hash Change 이벤트를 사용하여 페이지 전화를 하였는데 이때 hash값을 공유하였습니다.
2. 에러 핸들링 문서
   과제를 진행하면서 막혔던 부분들을 공유하고 해결한 기록들입니다.
   
   
   

🔔 어려웠던 점 및 부족한 점

1. 아직 DOM 요소로 렌더되기 전이라서 존재하지 않는 div를 쿼리셀렉터로 선택하고 싶을 때, 이벤트 위임 외에 어떤 방법이 있는지 궁금합니다. 이벤트 위임으로 처리하니 원하는 기능으로 구현되지 않았습니다. 여러 번 반복적으로 이벤트가 실행되기도 하였습니다.

2. 콘솔창에 에러 자체가 안 뜨게 하는 법이 어려웠다. (현재도 작동은 잘 되어도 콘솔창에 오류가 뜨는 것이 많다.) try catch로 잡고 싶은데 fetch 방식으로 status 상태 코드를 제어하는 것을 잘 몰라서인지 생각한 코드가 잘 실행이 되지 않았다. 그래서 API에서 에러가 났을 때 반환하는 문구들로 에러 처리를 시도했었다.

3. API의 문제인 건지 계좌의 금액이 300만 원 이상(계좌 최초 금액은 300만 원)으로 찍힌 적이 있었습니다.

4. 모듈 상호 참조, 중복 코드 없이 toast 기능을 사용할 수 있는 방법이 있을까요?
   현재
   
   1-1. 관리자 페이지의 제품 추가/수정/삭제 후 정상적으로 수행되었는지 알리기 위한 toast 기능
   1-2. 상품 수정 페이지에서 토스트 팝업을 window.confirm 대신 사용하기 위해 특정 메시지를 인수로 받아 confirm 기능 추가
   1-3. 상품 수정 버튼 클릭 시 toast 함수를 호출하는 코드
   1-4. toast 함수 해당 함수는 toast.js에서도 볼 수 있습니다.
   1-5. window.confrim 으로 확인 클릭 시 아이템 삭제 함수를 실행하거나, 취소 클릭 시 동작이 취소된다는 알림을 toast로 띄움

현재 아이템 삭제버튼 클릭 시에도 toast로 confirm기능을 수행하도록 구현하는 방법 (제대로 해결되지 않음)

1-6. 통일성을 위해서 window.confirm 말고 작성해 둔 toast를 사용하고 싶은데 삭제 기능이 있는 delete.js 에서 이미 toast를 import 한 상황이라 상호 참조가 발생됨 상호 참조 없이 사용할 수 있는 방법이 궁금하고, 토스트를 활용하는 방법을 찾았다고 할 때, 1-5 사진처럼 취소 버튼 클릭 시 다시 toast가 뜨도록 해야 하는데 재귀 용법으로 사용해도 괜찮을지 궁금합니다.

5. main.js로 import 해서 사용하던 도중 사용하지 않는 import에서 오류가 발생하였습니다. 참고할 커밋 내역입니다. 해당 커밋 내역까지는 main.js의 13번 줄에서 아무 오류도 없었는데 어느 순간 해당 import 파일에서 값을 못 찾아서 null이 되는 현상이 발생하였습니다. 그 후 13번 코드 자체는 사용하지 않기 때문에 삭제하여서 오류는 해결하였지만 정확한 오류 발생 원인을 찾지 못했습니다. 혹시 뭐가 문제인 건지 알 수 있을까요?

❌ 발생하고 있는 문제

• 회원가입 직후 로그인을 하려고 하면 회원가입 페이지로 이동하는 현상 다시 로그인 페이지에서 로그인을 하면 잘 작동하지만, 첫 시도 시에 회원가입 페이지로 이동하게 됨