4term-mini-front's People
4term-mini-front's Issues
[Feature] 댓글 삭제 이슈 카카오 로그인 초기화 이슈
목적 : 본인이 아닌 다른 사람 댓글이 지워지는 이슈를 해결 및 카카오 초기화 이슈 해결
- 본인 댓글만 삭제 가능하게 코드 수정
- 카카오 key 환경 변수로 저장
[feature] 유저 프로필 페이지 기능 구현
목적
유저 프로필 페이지 구현
기능
- 유저 헤더에 프로필 사진, 닉네임 보여주기
- 본인이 올린 게시글 썸네일 보여주기, 댓글 창 링크
이슈 사항
- 첫 렌더링 직후 axios 요청 시 헤더에 토큰 못담는 이슈 수정(node와 브라우저 환경 간 sync 문제로 예상)
- 데이터를 받아오고 나서 전체 페이지 렌더링 하게 수정
[Feature] 메인 페이지, 전체 게시글, 사진 업로드 퍼블리싱
메인페이지
- 퍼블리싱
사진 업로드(모달)
- Navigation.jsx style분리, 파일 구조 변경
- Navigation Link 연결
- 네비게이션 버튼 이벤트 => 누르면 모달창 나오게
- file 선택 시 포스팅 화면으로
퍼블리싱
- 사진 선택 전 화면(+선택 기능)
- 사진 선택 후 화면
리팩
- style 분리
- component 분리
[Refactor] 담당 페이지 코드 리팩토링
- 전체적인 코드 개선(렌더링 성능 개선)
- 불필요한 코드 삭제(ex. remove console.log)
[feature] 검색 기능 구현
목적
닉네임 검색 후 해당 닉네임 콤보 박스 보여지고 유저 넘버로 페이지 리다이렉트
기능
- 유저 닉네임 화면에 보여지게 수정
- 유저 프로필 이미지 콤보 박스 추가
- 클릭시 페이지 리다이렉트
[feature] 랜덤 게시물 렌더링
목적: 서버에 저장된 게시물 렌더링
기능
- 전체 게시물 가져와서 렌더링
- 무한 스크롤
- 리코일, 토큰 적용
렌더링
- get 요청 보내기
- 전체 렌더링 하기
- 이미지 비율 유지하면서 렌더링
- hover
[Delete] 사용하지 않는 코드 삭제
목적 : build 전 사용하지 않는 코드 정리 하기 위해서
[fix] 프로필 편집 사진 데이터 송수신 관련 이슈
사항
사진 수정 없이 변경 사항 제출 시 서버에 null로 patch 요청되어
프로필 사진을 저장 못하고 삭제한 것과 같은 상황이 되어버리는 이슈
해결 방법
- 사진 변동 없음
- 사진 변경,
- 사진 삭제
서버에 보낼 데이터 헤더에 세 가지 상태 정보를
상황에 맞게 보내고 서버단에서 처리
할 일
-
patch 데이터 헤더에 status 추가
[Feature] 메인 페이지, 로그인, 회원가입, 유저 검색 퍼블리싱
- 검색
- 메인 페이지
- 로그인
- 회원가입
[feature] 메인 페이지에서 유저 페이지 링크 추가
목적: 메인 페이지 게시물의 사용자 이름, 프로필 사진 클릭 시 타인 페이지로 이동
- 게시물 헤더(프로필 사진, 닉네임)
- 게시물 바디(닉네임)
- 댓글 닉네임
[fix] 유저 프로필 페이지 Nav bar에 Linking 하기
사항
유저 프로필 페이지 URL path nickname으로 수정,
nickname path를 사용해야 하는 파일 수정
할 일
- App.js Route 경로 /:userNo -> /:nickname 수정
- Nav bar에 프로필 이미지 Link 경로
- 프로필 편집 후 리다이렉트 경로
[feature] 포스팅 시 사진 선택 후 뒤로가기 버튼 생성
목적: 사진을 고르고 포스팅 하기 전에 다시 사진 선택창으로 이동
- 버튼 만들기
- 뒤로 이동
- 적어놓은 본문 보관(redux?)
[Feature] 프로필 편집 페이지 퍼블리싱
퍼블리싱
컴포넌트
- 편집 항목 메뉴바
- 세부 사항 Form 컴포넌트
페이지
- 컨테이너 스타일링
[feature] 댓글 UI 구현
목적: 댓글 UI 컴포넌트 생성 및 게시글 불러오기 병합
- 검색 스타일 분리
- 댓글 컴포넌트 분리
- 댓글 UI 구현
- 메인 게시글 pull 받고 충돌 해결
[feature] 메인 페이지 기능 구현
목적: 서버에 저장된 정보를 가져와서 메인 페이지에 렌더링
- get요청
- 렌더링
[Feature] 댓글 기능구현
목적: 댓글 CRUD 구현
- 댓글 생성
- 댓글 수정
- 댓글 삭제
[Feature] 토큰 중앙 상태 관리
구현
- 중앙 상태 관리 recoil에서 redux로 변경
[Feature] 유저 프로필 페이지 퍼블리싱
퍼블리싱
/username URL의 유저 프로필 페이지
유저 프로필 헤더
- 프로필 사진
- 섹션
바디
- 포스트
[feature] 업로드 기능 추가, css 수정
목적: Post 기능 추가, axios 요청 인스턴스화
기능
- 업로드 시 리다이렉트
- 네비에서 프로필 보이게(네비 안에 업로드)
- 업로드 화면에서 프로필 사진 보이게
이슈
- 랜덤 게시물 페이지에서 업로드 모달 띄울 경우 CSS오류
- 업로드 모달에서 이미지가 클 경우 제출 버튼이 위치가 아래로 붙지 않음
[Feature] 프로필 편집 기능 구현
목적
유저 페이지-헤더에 보여주거나 서버에 저장할 데이터 처리
기능
- 프로필 편집 페이지 로드 시 기존 유저 데이터 보여주기
- 입력받은 form데이터 서버에 저장
[feature] 업로드 파일 수정, 삭제
목적: DB에 저장된 파일 수정, 삭제
[feature] 테스트 코드 삭제, 메인페이지 프로필 출력
목적: 테스트 용으로 작성되었던 문자열 삭제, 실제 데이터로 변경
- 테스트 코드 삭제
- 프로필 출력
[feature] 게시물 생성
목적: 사용자 로컬 사진을 이용한 게시물 생성 및 요청
할 일
- 복수 사진 선택 (현재 하나만 가능)
- input 값 받아오기 (content)
- 백엔드 요청 ( axios, form-data, token )
유저 헤더
[feature] 타인 프로필 페이지 구현
목적
타인 프로필 페이지 구현
할 일
로그인된 유저 닉네임과 url parameter 닉네임이 다를 경우
- userNo 검색 요청
- 받은 userNo로 타인 데이터, 타인 게시물 정보 요청
- 프로필 편집 버튼 없애기
[Feature] userNo을 리코일을 이용하여 중앙 상태 관리
목적
유저 - 리코일을 이용하여 userNo 중앙 상태 관리하고 유저 검색 기능에서 userNo 가져와서 사용하기
기능
- userNo 리코일 이용해서 중앙 상태 관리 코드 수정
- 유저 검색 comboBox 구현 만들기
[Feature] 카카오 로그인 구현
목적
로그인 & 회원 가입
구현
- 로그인 화면에 카카오 로그인하기 버튼 추가
- 카카오 로그인하기 버튼 클릭 시 카카오 카카오 Oauth API 실행
- 로그인 시 동의 구하기
- 토큰 발급 & 이메일, 닉네임 가공해서 보내기
- 백엔드 토큰 response 받기
- 회원 가입 창으로 리다이렉트
- useNaviagate
- useSearchParams
- 회원 가입 필요한 값 요청
- 메인 페이지 창으로 리다이렉트
- 로그인 & 회원 가입 컴포넌트 폴더 구조 변경 및 폴더명 변경
- 퍼블리싱 피드백 받고 수정
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.