전남대_12조_픽업셔틀_7-8주차

[rktdnjs]

PR 타입(하나 이상의 PR 타입을 선택해주세요)

• 기능 추가
• 기능 삭제
• 버그 수정
• CSS등 UI 수정
• 의존성, 환경 변수, 빌드 관련 코드 업데이트

전달 사항

안녕하십니까 멘토님! 이번 7-8주차 개발 진행 사항을 모아 PR 드립니다!
이번주차 멘토링 사전질문 & 개발 내용과 관련된 질문은 멘토링 전까지 하단 링크에 별도로 정리해놓도록 하겠습니다😊

링크 : https://www.notion.so/FE-9-e6576fd038914581ae7f810362587261

작업 사항

7주차 개발사항

• 공고 작성 페이지 일부 버그 fix
• 로그인 & 접근권한 체크 컴포넌트 ProtectedRoute.jsx 구현
  • 로그인 유무는 localStorage의 accessToken을 통해 확인
  • 접근권한 체크는 localStorage의 grade를 통해 확인
  • 접근권한은 해당 컴포넌트로 감싼곳에서 ProtectedRoute에 props로 requiredAuth 값을 배열형태로 제공하면 적용
  • 접근권한을 따로 제공하지 않으면 로그인 유무만 판단한다고 생각하면 됨
  • 로그인 + 접근권한을 둘 다 체크해야하는 곳에서는 로그인(1순위) - 접근권한(2순위)로 적용됨
  • 로그인 x 인 경우에는 로그인 경고 메시지와 함께 로그인페이지로 이동
  • 접근권한 x 인 경우에는 접근 거부 메시지와 함께 마이페이지로 이동(학생증 인증 권유)

8주차 개발사항

• 공고상세페이지
  • 공고상세페이지 내용을 조회할 수 있도록 API 처리 함수 추가
  • 백엔드 API로부터 유저 = 공고글 작성자 여부에 따라 공고상세페이지를 달리 보여주는 부분은 개발 진행중
• 마이페이지
  • 로그인한 유저의 등급에 따라 Admin, Student, Guest 페이지를 보여줄 수 있도록 분기 처리

  레이아웃 참고 : https://github.com/Step3-kakao-tech-campus/Team12_FE/pull/57
  

• 관리자 페이지
  • /components/organisms/AuthRequest.jsx
  • /pages/AdminPage.jsx
  • AdminPage에서 데이터 불러오기 → 하위 AuthRequest.jsx에 뿌림
  • 추후 무한스크롤 구현 예정
• 관리자 학생 인증 상세 페이지
  • /components/organisms/AuthDetail.jsx
  • /pages/AdminAuthPage.jsx
  • AdminAuthPage에서 데이터 불러오기→ 하위 AuthDetail.jsx에 뿌림
  • msw로 id를 params로 불러오는 부분이 구현이 안됨
• 공고글 작성 페이지
  • PostWritePage.jsx
    • 저번주차 피드백에 따라 switch → IIFE로 분기
    • 특정 input에 에러메시지가 안뜨는 문제 발생 → 해결 중
    • alert창 utils로
• 회원가입(계좌 정보 입력 페이지)
  • 계좌 정보 입력 페이지 : RegisterBankPage.jsx
  • 계좌 정보 입력 컴포넌트(Molecules) : BankForm.jsx 구현
  • 은행은 토글 버튼을 통해 선택 & 계좌 번호는 직접 입력하는 형태
  • 계좌 정보 미 입력시 경고 문구 계좌 정보 입력란 하단 출력 & Swal로 경고 alert 띄움
  • 회원 가입 버튼 하단의 로그인 텍스트 클릭을 통해 로그인 화면으로 이동 가능
  • 백엔드 API or 모킹을 통해 POST 테스트 필요함

  레이아웃 참고 : https://github.com/Step3-kakao-tech-campus/Team12_FE/pull/64
  

• msw 라이브러리 적용

  📦mocks
   ┣ 📂data
   ┃ ┗ 📜adminData.js
   ┣ 📂handlers
   ┃ ┣ 📜admin.js
   ┃ ┗ 📜index.js
   ┗ 📜browser.js
  

  • mocks/data/: 임시 데이터 넣어둠
  • mocks/handlers/admin.js: 관리자 페이지 관련 get 요청 정의
  • mocks/handlers/index.js: 핸들러 모아서 export / 추후 다른 핸들러가 더 생긴다면 추가 가능
  • mocks/brower.js: worker 정의
  • 참고한 레퍼런스 (공식문서)
    • describing rest api
    • query parameters
    • 라이브러리 동적 import

관련 이슈

• Feature : 카카오 소셜 로그인 페이지 구현 #10
• Feature: 공고 작성 페이지 기능 구현 #45
• Fix: 공고 작성 페이지 필수항목 #55
• Feature: 공고 상세 페이지 기능 구현 #58
• Feature: 관리자 페이지 목록 #61
• Feature: 관리자 페이지 상세 #62