modern-agile-team / 4term-mini-front Goto Github PK

목적

로그인 & 회원 가입

구현

• 로그인 화면에 카카오 로그인하기 버튼 추가
• 카카오 로그인하기 버튼 클릭 시 카카오 카카오 Oauth API 실행
  • 로그인 시 동의 구하기
• 토큰 발급 & 이메일, 닉네임 가공해서 보내기
• 백엔드 토큰 response 받기
• 회원 가입 창으로 리다이렉트
  • useNaviagate
  • useSearchParams
• 회원 가입 필요한 값 요청
• 메인 페이지 창으로 리다이렉트
• 로그인 & 회원 가입 컴포넌트 폴더 구조 변경 및 폴더명 변경
• 퍼블리싱 피드백 받고 수정

목적
유저 - 리코일을 이용하여 userNo 중앙 상태 관리하고 유저 검색 기능에서 userNo 가져와서 사용하기

기능

• userNo 리코일 이용해서 중앙 상태 관리 코드 수정
• 유저 검색 comboBox 구현 만들기

메인페이지

• 퍼블리싱

사진 업로드(모달)

• Navigation.jsx style분리, 파일 구조 변경
• Navigation Link 연결
• 네비게이션 버튼 이벤트 => 누르면 모달창 나오게
• file 선택 시 포스팅 화면으로

퍼블리싱

• 사진 선택 전 화면(+선택 기능)
• 사진 선택 후 화면

리팩

• style 분리
• component 분리

목적

유저 프로필 페이지 구현

기능

• 유저 헤더에 프로필 사진, 닉네임 보여주기
• 본인이 올린 게시글 썸네일 보여주기, 댓글 창 링크

이슈 사항

• 첫 렌더링 직후 axios 요청 시 헤더에 토큰 못담는 이슈 수정(node와 브라우저 환경 간 sync 문제로 예상)
• 데이터를 받아오고 나서 전체 페이지 렌더링 하게 수정

사항

사진 수정 없이 변경 사항 제출 시 서버에 null로 patch 요청되어
프로필 사진을 저장 못하고 삭제한 것과 같은 상황이 되어버리는 이슈

해결 방법

1. 사진 변동 없음
2. 사진 변경,
3. 사진 삭제
   서버에 보낼 데이터 헤더에 세 가지 상태 정보를
   상황에 맞게 보내고 서버단에서 처리

할 일

• patch 데이터 헤더에 status 추가

사항

유저 프로필 페이지 URL path nickname으로 수정,
nickname path를 사용해야 하는 파일 수정

할 일

• App.js Route 경로 /:userNo -> /:nickname 수정
• Nav bar에 프로필 이미지 Link 경로
• 프로필 편집 후 리다이렉트 경로

목적: DB에 저장된 파일 수정, 삭제

목적: 테스트 용으로 작성되었던 문자열 삭제, 실제 데이터로 변경

• 테스트 코드 삭제
• 프로필 출력

목적 : 본인이 아닌 다른 사람 댓글이 지워지는 이슈를 해결 및 카카오 초기화 이슈 해결

• 본인 댓글만 삭제 가능하게 코드 수정
• 카카오 key 환경 변수로 저장

목적: 댓글 UI 컴포넌트 생성 및 게시글 불러오기 병합

• 검색 스타일 분리
• 댓글 컴포넌트 분리
• 댓글 UI 구현
• 메인 게시글 pull 받고 충돌 해결

목적: 메인 페이지 게시물의 사용자 이름, 프로필 사진 클릭 시 타인 페이지로 이동

• 게시물 헤더(프로필 사진, 닉네임)
• 게시물 바디(닉네임)
• 댓글 닉네임

목적 : build 전 사용하지 않는 코드 정리 하기 위해서

목적: 댓글 CRUD 구현

• 댓글 생성
• 댓글 수정
• 댓글 삭제

퍼블리싱

/username URL의 유저 프로필 페이지

유저 프로필 헤더

• 프로필 사진
• 섹션

바디

• 포스트

목적: Post 기능 추가, axios 요청 인스턴스화

기능

• 업로드 시 리다이렉트
• 네비에서 프로필 보이게(네비 안에 업로드)
• 업로드 화면에서 프로필 사진 보이게

이슈

• 랜덤 게시물 페이지에서 업로드 모달 띄울 경우 CSS오류
• 업로드 모달에서 이미지가 클 경우 제출 버튼이 위치가 아래로 붙지 않음

• 전체적인 코드 개선(렌더링 성능 개선)
• 불필요한 코드 삭제(ex. remove console.log)

목적

닉네임 검색 후 해당 닉네임 콤보 박스 보여지고 유저 넘버로 페이지 리다이렉트

기능

• 유저 닉네임 화면에 보여지게 수정
• 유저 프로필 이미지 콤보 박스 추가
• 클릭시 페이지 리다이렉트

목적

타인 프로필 페이지 구현

할 일

로그인된 유저 닉네임과 url parameter 닉네임이 다를 경우

• userNo 검색 요청
• 받은 userNo로 타인 데이터, 타인 게시물 정보 요청
• 프로필 편집 버튼 없애기

• 검색
• 메인 페이지
• 로그인
• 회원가입

목적

유저 페이지-헤더에 보여주거나 서버에 저장할 데이터 처리

기능

• 프로필 편집 페이지 로드 시 기존 유저 데이터 보여주기
• 입력받은 form데이터 서버에 저장

퍼블리싱

컴포넌트

• 편집 항목 메뉴바
• 세부 사항 Form 컴포넌트

페이지

• 컨테이너 스타일링

목적: 서버에 저장된 게시물 렌더링

기능

1. 전체 게시물 가져와서 렌더링
2. 무한 스크롤
3. 리코일, 토큰 적용

렌더링

• get 요청 보내기
• 전체 렌더링 하기
• 이미지 비율 유지하면서 렌더링
• hover

목적: 사용자 로컬 사진을 이용한 게시물 생성 및 요청

할 일

• 복수 사진 선택 (현재 하나만 가능)
• input 값 받아오기 (content)
• 백엔드 요청 ( axios, form-data, token )

구현

• 중앙 상태 관리 recoil에서 redux로 변경

목적: 서버에 저장된 정보를 가져와서 메인 페이지에 렌더링

• get요청
• 렌더링

목적: 사진을 고르고 포스팅 하기 전에 다시 사진 선택창으로 이동

• 버튼 만들기
• 뒤로 이동
• 적어놓은 본문 보관(redux?)