step3-kakao-tech-campus/team18_fe

[카카오테크캠퍼스 3단계 18조- FE] 함께 피워내는 한국어 교육 플랫폼 Garden 입니다.

team18_fe's Issues

README.md 파일 작성

Description

README.md 파일 수정 및 작성

TO-DO

• 목차 수정
• 실행 방법
• 라이브러리 선택 이유
• 주요 기능
• 디렉토리 구조

ETC

개발이 진행 됨에 따라 지속적으로 내용이 수정 될 수 있음

멘토링 기능 구현

Description

멘토링 기능을 구현

TO-DO

• List 페이지 구현
• List 상세 페이지 구현
• 작성 페이지 구현
• 수정 페이지 구현
• 대시보드 구현
• 프로필 모달 구현

ETC

Refactoring

Description

멘토님 코드리뷰 기반 및 후순위 리팩토링

TO-DO

• 버튼 컴포넌트 hover 적용
• 개인정보 수정 페이지에서 사용자 프로필 이미지 등록
• 미들웨어로 서버에 사용자 정보(이름, 이메일, 프로필 이미지) 요청을 전역 상태로 관리
• 로그인 실패 에러 처리 -> UI
• GNB 반응형 구현
• 회원 가입 성공 페이지 생성
• profile fix page-> 라우터 자체에 접근 할 순 없도록 -> information form 으로 리다이렉트 하거나, 모달 띄우기

ETC

1. token, auth의 전역 상태 로컬 스토리지에서 꺼내오는 값으로 초기화 -> 2번의 동작이 발생해서 전역상태로 관리하는 것보다 바로 로컬스토리지에서 꺼내 쓰는 것이 효율적
2. 사용자 정보의 경우 전역 상태로 관리하면 새로 고침 시 초기화되고, 로컬 스토리지에 저장하는 것은 보안적으로 좋지 않음 -> 필요할 때마다 백앤드에 getUser/ api 요청으로 사용자의 이름, 이메일, 프로필 이미지 정보를 받음

-> 전역 상태가 사용되지 않고 있음. 제거하거나 미들웨어로 서버에 사용자 정보 요청을 전역 상태로 관리 !

공통 컴포넌트 구현

Description

공통 컴포넌트 구현

TO-DO

• tailwind 색상 커스텀
• Noto Sans 폰트 적용
• Button 컴포넌트 구현
• Label 컴포넌트 구현
• Dropdown 컴포넌트 구현
• 외부 클릭 감지 Hook 구현

ETC

Dropdown option 변경 시 실행되는 handle 함수는 api 연결 시 수정이 필요함

사용자 정보 및 인가 api 통신

Description

사용자 정보 및 인증 api 통신

• 사용자 정보의 경우, userAtom 전역 상태로 관리 하려 했으나
  (1) 새로고침 시 초기화 됨 -> 다른 페이지에서 정보 활용 불가
  (2) 로컬 스토리지에 저장 -> 명시적으로 로그아웃 하지 않은 경우 삭제 불가, 보안 문제

사용자 식별(정보)api에 정보가 필요한 페이지에서 그때 그때 GET 요청 으로 받아서 사용하기로 함

• 현재까지 필요한 사용자 식별 정보 : 이름, 이메일, 프로필 이미지

TO-DO

• Backend api axios로 통신
• 회원가입 시 사용자 정보 POST 요청(이름, 이메일, 비번, 나이, 연락처, 역할 , 관심사, 국가 / 소개말, 프로필 이미지 null)
• 회원 가입 시 이메일 중복 체크 기능 구현
• 회원 가입 폼 수정 : 사용자 정보 입력란 추가 (age, phone) , 관심사 선택 컴포넌트 추가
• 로그인 시 요청 이메일, 패스워드 / 응답 토큰 - 로컬 스토리지에 저장

ETC

레이아웃 구현

Description

GNB와 Footer로 구성된 레이아웃을 구현

TO-DO

• 레이아웃 구조 작성
• 레이아웃 로직 구현
• 레이아웃 CSS 적용
• 계정 관련 로직 적용

ETC

로그인/로그아웃 버튼, 프로필 사진, Auth 확인 등은 Account와 연계되므로
Account 확립 전에는 Mock 객체를 사용하거나 임시 로직으로 대체해야 함

채팅 기능 구현

Description

채널 리스트 기능 구현
채널 생성 기능 구현
채팅 메세지 기능 구현

{이슈 설명}

TO-DO

• 채널 리스트 기능 구현
  • 채널 리스트 Item 컴포넌트 구현
    • 채널 이름, 이미지, 설명, 참여자 수 렌더링
  • Public 채널 리스트 구현
    • 모든 채널
  • Public 채널 참여 클릭 시 해당 채널에 참여
  • Joined 채널 리스트 구현
    • 유저가 참여한 채널
  • Joined 채널 trash icon 클릭 시 해당 채널 나가기
  • Joined 채널 아이템 클릭 시 해당 채널 채팅방 페이지로 이동
• 채널 생성 기능 구현
  • 채널 생성 모달창 컴포넌트 구현
  • 이름, 이미지, 설명 입력 후 버튼 클릭 시 채널 생성
• 채팅 메세지 기능 구현
  • 해당 채널 메세지 조회 기능 구현
  • Sent 컴포넌트
    • 현재 유저가 보낸 메세지 / 이미지 렌더링 ❌
  • Received 컴포넌트 구현
    • 다른 유저가 보낸 메세지 / 이미지 렌더링 ✅
  • 메세지 보내기 기능 구현

ETC

사용자 관심사 선택(categoryList) 방식 수정

Problem

1. 기존의 코드는 회원 가입 시 categoryList 값을 null로 하여, 사용자가 로그인 시 categoryList 값이 null인 유저에 한하여 interestPage로 이동하여 관심사를 선택하도록 하는 선호 카테고리 선택 모달 방식으로 구현하고자 했음
2. 그런데 이 플로우보다 사용자 경험 관점에서 회원 가입 시 선택이 좋을 것이라는 의견이 나옴

Goal

회원 가입 페이지에서 관심사를 선택 하되, 다른 컴포넌트보다 UI를 강조하여, 관심사가 중심 키워드임을 나타내도록 구현

• interest page 삭제 (Router.jsx도 수정)
• 회원 가입 page에 interest 선택 컴포넌트 추가
• 회원 가입 POST : categoryList 값 추가

Related Issue

#43

레이아웃 개선

Description

개발이 진행됨에 따라 로그인 및 api 기능이 구체화되므로,
임시로 설정했던 데이터에 대해 실제 구현을 진행함

TO-DO

• GNB 계정 상태 관련 로직 수정
• AuthCheck 계정 상태 관련 로직 수정
• TEST 버튼 제거
• 프로필 이미지 API 구현

ETC

채팅 세부 기능 구현

Description

채팅 세부 기능을 구현한다.

TO-DO

• Public Channel List Item 클릭 시 Channel Detail 모달 출력
• Channel Detail 페이지 구현
• 태그 기능 구현
• 페이지 수정 기능 구현 (Channel Owner만 가능)
• 로그인 기능 연결
• 에러 코드 상수화
• 채널 리스트 무한스크롤 적용
• 채팅 메세지 무한스크롤 적용
• 검색 기능 구현

ETC

백앤드 api 연결

Description

백앤드 api 연결

TO-DO

• 개인 정보 수정 시 password check/ api 요청(post+ token) 로 사용자 인증
• videos/main api 작성 (url param :categoryid, page)
• 액세스 토큰 만료 오류 -> users/refresh 요청

api 연결

• videos/main (응답 데이터 페이지별로 오도록 수정 확인 필요)
• videos/interest (토큰 만료 시 오류 메세지 수정 확인 필요)
• videos/history
• videos/:id
• profiles/simple
• profiles/fix

마이 페이지 구현

Description

사용자 정보를 확인 및 수정 하는 마이페이지를 구현한다.

TO-DO

• 사용자의 프로필 조회 페이지
• 사용자의 개인정보 조회 페이지
• 사용자의 개인정보 수정 페이지

ETC

1. 기존의 라우터는 모두 id 파라미터를 사용했으나 -> 프로필 페이지만 다른 사용자가 조회 가능하고 다른 페이지는 인증된 사용자만 정보 조회가 가능 해야하기에 mypage/information, mypage/information/fix 로 변경함. userInfo api 요청 도 헤더에 토큰을 담아 /profile로 요청 보냄
2. 프로필 수정 페이지와 개인정보 수정 페이지는 중복되는 기능이라 판단하여, 프로필 수정 페이지를 삭제함

회원가입 & 로그인 페이지 구현

Description

회원 가입 & 로그인 페이지 구현

TO-DO

• account 관련 필요 컴포넌트 구현
• 회원가입 폼 구현
• 로그인 폼 구현
• MUI 라이브러리 사용하여 input box 컴포넌트 UI 재구현
• react-hook-form 라이브러리로 login, sighup form 재구현
• reack-hook-form Controller로 MUI 컴포넌트 래핑

페이지 라우팅 구현

Description

사용자의 URL 요청에 따라 대응하는 페이지를 불러올 수 있도록 라우팅을 구현

TO-DO

• React Router 설치
• 라우팅 구현
• 라우팅될 임시 페이지 생성

ETC

채팅 리스트 페이지 구현

Description

현재 존재하는 채팅 리스트를 확인하고 필터링 할 수 있는 페이지를 구현한다.

TO-DO

• chatting list item 컴포넌트 구현
• chatting list 구현
• 채팅 리스트를 필터링할 수 있는 Tabs 컴포넌트 구현
• Search Input 창 구현
• 채팅 리스트 요청 구현

ETC

비디오 계정 페이지 에러 핸들링

Description

비디오 계정 페이지 에러 핸들링

TO-DO

액세스 토큰 만료 시 만료된 JWT 토큰입니다 -> refresh 요청 -> refresh 토큰 만료 시 -> 만료된 JWT 토큰입니다 -> 로그아웃 && 로그인 페이지로 리다이렉트

• account

• 1. 액세스 토큰 만료 시 에러 코드 401 에러 메시지 "만료된 JWT 토큰입니다." -> refresh 요청

• 2. 리프레쉬 토큰 만료 시 에러 코드 401 에러 메지시 " 만료된 JWT 토큰입니다" -> Toast , 로그아웃, 로그인 리다이렉트

• 3. 인증 되지 않은 사용자 에러 코드 401 에러 메시지 "인증된 사용자가 아닙니다." -> Toast

• 4. 서버 요청 에러 에러 코드 500 -> 에러 페이지 이동(errormessage : '새로고침을 하거나 잠시 후 다시 접속해 주시기 바랍니다.')

5. POST 요청 에러 시

• (1) 회원 가입 요청 에러

  • emailcheck 에러 코드 400 -> 중복된 이메일 -> 해당 메세지를 input error message로 출력
  • signup 에러 코드 400 -> 잘못된 입력 값 -> 해당 메세지를 토스트로 출력

• (2) 로그인 에러 에러 코드 400 -> 잘못된 요청 -> 해당 메세지를 input error message로 출력

• (3) 개인 정보 수정 에러 -> mutate 함수에서 onSuccess, onError 시 토스트 표출 / 리다이렉트 여부 로 판단

• watching

• 1. history page 에러 코드 404 -> 사용자가 조회한 영상 기록 없음

• 2. main 페이지 요청 페이지 비디오 정보 없을 때 -> 에러 X, Toast 로 메세지 띄우고 main 페이지로 리다이렉트

• 3. videos/:id 영상 정보 없을 때 ->

오픈채널 채팅 구현

Description

Sendbird API를 이용해 오픈 채널 채팅방을 구현한다.

TO-DO

• Open Channel 추가 기능 구현
• Open Channel List UI 수정
• 유저 이름/ 닉네임 연결 구현

ETC