View Code? Open in Web Editor
NEW
mood catcher
Home Page: https://moodcatch.link/
HTML 1.17%
JavaScript 95.95%
CSS 2.88%
front-end's People
Contributors
front-end's Issues
09/10
- 기존에는 jwt-decode를 활용하지 않았기에 토큰이 없을시 그냥 /login으로 보내는 것이 가능했으나
- 이제는 jwt-decode를 활용해서 userId를 navigationBar에서 쓰기때문에 기존방식으로는 token이 invalid하다고 error가 자꾸 남
- 문제의 원인은 navBar에서의 토큰이 decode한 토큰이 아니라는 점
![error](https://user-images.githubusercontent.com/87622597/189466608-60b2a3fa-265e-4c95-a4ad-91e04b423a10.PNG)
토큰 값을 세션 스토리지에 저장하는 방식으로 로그인 로직을 구현한 초안입니다.
=> 토큰을 주지 않고 쿠키에 세션 ID를 저장하는 방식으로 바뀌었습니다
고려사항
08/31
- 게시물 작성에서
- 사진 미리보기
- formdata에 사진 포함해서 백에게 보내기
- 상품 등록에서
- 백으로부터 무신사 크롤링 정보 받아오고
- 유저가 무신사 정보를 선택하면 그 정보를 다시 백에게 보내주기
왜?
- 유저가 사진을 미리봐야 자신이 잘 첨부한건지 확인할 수 있고
- formdata를 사용하기로 백과 약속했으며
- 무신사 정보를 미리받아서 제공해야 유저가 더 큰 편의성을 얻고
- 다시 백에게 넘겨야 옷장 서비스를 잘 구축할 수 있기 때문에
아이콘을 변경시 새로고침을 해야 아이콘이 바뀌었으나 useCallback 사용하여 수정함
[merge/develop] develop브랜치에 merge
08/29
왜?
- 서비스에서 우선 create가 되어야 다른 기능들을 수월하게 확인 할 수 있으니까
09/26
- 대댓글 누를 시 그 유저의 마이페이지로 갈 수 있게 구현
- 대댓글 길이 제한
- pwa설치버튼 로그인으로 이동
- 메인페이지 규격 맞춤
- 인기게시물 게시되고 삭제되었을때 클릭시 알림
- 무신사 선택 totop구현
- 게시물 수정하기 전체적인 버그픽스
09/21
- 전반적으로 코드 리팩토링을 합니다.
- 코드의 가독성을 높입니다.
- 주석을 답니다.
09/04
- IAM 만들기
- github actions의 secret설정
- s3 bucket 생성
- main.yml 생성
09/25
- 무한스크롤 끝까지 안내려가는 이슈 해결
- 무신사 아이템 선택시 선택후 다른 아이템 검색할 수 있게 로직 변경
- 무한스크롤 페이지들에 toTop 기능 구현
- refresh token 기능 구현 및 작동 확인
09/05
- 무한스크롤을 구현합니다.
- 전체적인 뷰를 완성합니다.
- 따로 컴포넌트폴더를 만들어 관리합니다.
- 마이페이지
- mood Point 물음표 오른쪽 맨 아래쪽으로 O
- 닉네임 컬러 #2D273F 로 변경 O
- my closet 위치 정가운데로 O
- 검색페이지에서 선택부분을 네모 체크박스로 O
- 검색페이지에서 폰트 맞춰서 O
- 아이콘 알람 컬러 뒤로가기 컬러 등 전체적인 아이콘 컬러 맞춰주세요
- 푸터 부분들도 조금 차이가 있고
- 검색 부분의 색깔도 차이가 있고 헤더에 있는 아이콘들도 차이가 있음
- 메인페이지에 mycloset의 폰트를 변경 O
- 메인페이지와 로그인 페이지에서 뒤로가기 부분이 없었으면 O→ 로그인, 회원가입 페이지에서만 제거
- 검색페이지에서는 헤더에서 mood catcher → search로 변경되도록 O
- 메인페이지에서의 디자인 수정 O
- 내비게이션 바에서 클릭시 그 부분 위쪽에 검정색 부분 생겼으면 O
- 사진에 있는 그림자들은 모두 제거 되었으면 O
09/10
- 백으로 받은 포스트 배열데이터를 map함수 돌려서 다른 컴포넌트를 그려주니
- 그 컴포넌트에서 배열의 객체들이 undefined가 뜨는 이슈
- 무한스크롤로 다른 데이터를 받으면 잘 받아짐
![errre1](https://user-images.githubusercontent.com/87622597/189471497-5224ca70-61ed-4f61-a92b-a76e8536e5d9.PNG)
- 스크롤해서 받으면 item이 나오니 우선 item?.imgUrl을 하자
- 데이터는 나오지만 밑에 계속 더미데이터가 보임
- 처음에 주는 page를 1페이지를 주자
![error2](https://user-images.githubusercontent.com/87622597/189471502-42a68b57-5e31-4d7d-beb5-84bc5f7615da.PNG)
- 밑에 쓸데없이 EachPost가 하나 더 있는것을 발견 지우고 나니 정상적으로 작동
10/01 css 2.0
- css reset 도입
- 이용약관 전면 개편
- 로그인, 회원가입, 닉네임, 성별 css 전면 개편
- open페이지 css 수정
[merge/develop] develop브랜치에 merge
08/29
왜?
- 시작할때 같은 폴더 구조에서 라이브러리충돌을 최소화하며 시작하기 위해서
09/11
- 새로 고침을 눌렀을 경우 쿠키에 있던 토큰이 사라지는 이슈가 발생했습니다.
- 검색에서 setCookie를 검색해서 import 해오던 부분을 모두 삭제했습니다.
- 추가로 확인해야 할 부분들이 있습니다.
09/15
- 예전 버전을 그대로 보여주는 캐시가 남아서 새로운 버전을 보여주지 못하는 것으로 파악
- aws -> cloudfront -> 무효화 -> /* 를 생성
- 위의 방법으로 해당 이슈 해결
- 관련 링크
09/06
- LoginForm에서 password를 .toString으로 고쳤습니다.
- SignupForm에서 password, confirmPw를 .toString으로 고쳤습니다.
- SignupGenderAge에서 window.location.href.slice()를 이용해 백으로 쿼리로 받은 토큰을 쿠키에 저장합니다.
- URL들중 ? 앞에 / 가 붙은 경우 다 제거했습니다. ex)
/comments/?${payload.postId}
-> /comments?${payload.postId}
- loginSlice에서 __login이 되면 백으로부터 body로 토큰이 쿼리로 담긴 URL을 받는데 이 주소를 window.location.href를 이용해 SignupGenderAge 로 이동시킵니다.
- Cookie에 setCookie에서 opt속성의 기본값을 null로 변경했습니다.
09/05
- 무한스크롤을 구현합니다.
- main 페이지를 모듈화 합니다.
09/13
- 기존의 like페이지의 조회기능을 uploadSlice에서 likeSlice로 변경
- like페이지에서 totop기능 구현
- like페이지에서 쓰로틀 적용
09/10
- App.js에서 이동할때 parameter로 postId와 userId를 받게 변경
- item_detail에서 포스트이미지와 무신사데이터, 유저정보, 댓글정보 받아오게 추가
- item_detail에서 댓글 추가기능 추가
- DetailCommentList의 전체적인 css 변경 및 댓글 출력기능 추가
- uploadSlice에서는 게시물 상세 조회 함수, commentSlice에서는 댓글 추가 및 댓글 조회 함수 수정 업데이트
- EachPost에서 item_detail로 갈때 postId와 userId를 파라미터로 제공하게 수정
09/27
- a태그 기본적으로 커서를 디폴트로, 카카오맵관련 href로 경로방법 변경
- 대댓글 채팅아이콘 클릭해도 해당유저 옷장으로 이동할 수 있게
- 카카오맵 근처 유저 500km로 변경
- 카카오맵 프로필사진 사이징변경
09/26
- 댓글에서 대댓글 갯수 보여주기
- 댓글, 대댓글도 드롭다운 적용
- 댓글, 대댓글 폰트변경
- 시작페이지 css, 위의 여백 제거
- 상세페이지 모바일에서 규격맞게 수정
09/17
- 무신사 아이템 이름 상자 삐져나옴(준수) O
- 디테일페이지에서 점점점의 크기를 줄여야 하는 이슈(준수) O
- 디테일페이지에서 댓글 적는 란에 이미지를 나오게 해야함(준수) O
- 전체적으로 어플의 배경을 밑에서부터 하얗게 (피그마와 똑같게)(준수) O
- 뒤로가기 화살표 변경해야함(준수) O
- 디테일 페이지에서 제목도 볼 수 있게(준수) O
- 메인페이지에서 대표게시물사진양식을 밑에 올포스트에 적용해야함(프레임을 없애고 사진을 라운드하거나 아니면 프레임 둔 상태에서 사진만 라운드)(준수) O
- 대표게시물에서 작성시간 작게하고 상단부로 올리게 하기(준수) O
- 대댓글 보는 부분의 배경을 하얀색으로 하고 작대기를 보라색으로(준수) O
09/25
- 서비스의 유저 분석을 위해 구글 애널리틱스 적용
- index의 head에 관련 코드 구현
- og카드 구현
10/04
0911
- route53 이용 DNS 적용
- CloudFront 이용 SSL 인증서를 이용한 HTTPS 호스팅을 지원
- ACM을 이용하여 인증서를 받은 후 Elastic Load Balancer, Amazon CloudFront 배포
09/04
- 지금까지의 과정들을 main에 merge합니다.
[merge/develop] develop브랜치에 merge 09/11
09/20
- async & modules 나누기
- comment, like, rank, upload 를 async 폴더로 모듈화 완료
- api에 instance를 따로 모듈화해서 export 하기(ex userAPI, voteAPI)
- rank, like, comment, upload 완료
- 에러처리!!! reject랑 fullfilled, pending 신경쓰기
- comment, like, rank, upload 를 async 폴더로 모듈화 완료
- 추가로 user가 로그인 되어있는지 체크하는 api있으면 좋을 것 같음
09/25
- index.html에 카카오맵 관련 sdk 코드 삽입
- 카카오맵 관련 redux slice 구현
- 카카오맵 css 수정
0923
- 모든 페이지를 처음부터 불러올 필요가 없기 때문에 지금 사용하는 코드가 아닌 코드는 나중에 불러와 사용할 수 있는 코드스플리팅 도입
- 최적화 싱글페이지 어플리케이션에서 번들 사이즈가 커지면 로딩속도나 성능면에서 문제가 생길 수 있음
- 1안) React 내장의 lazy와 Suspense를 사용
- 2안) 페이스북 권장의 loadable components를 사용
-
- SSR을 지원하지 않는다.
-
- SSR을 지원하고, 분할된 파일을 미리 불러올 수 있는 preload라는 기능이 있다.
- 우리는 SSR을 하고 있고, preload라는 기능도 사용할 것이기에 loadable components를 사용
09/13
- 메인에서 대표게시물을 클릭하면 옷장페이지로 넘어갑니다.
- 디테일페이지에서 드롭다운으로 게시물 수정,삭제, 대표게시물 지정을 할 수 있습니다.
- 게시물 수정페이지를 따로 만들었습니다.
- 대댓글기능을 추가했습니다.
- 아직 css 많이 부족하고, 새로고침이슈가 있으며, 대댓글 수정 및 삭제는 안됩니다.
0904
- json-server를 이용해서 get으로 데이터를 잘 받아오는 지 테스트 할 수 있는 환경 구성
- 전체적으로 css 1차 완성 (upload, upload_select, main, header, navigationBar)
- 전체적인 코드들에서 필요없는 css코드 제거(ex. container)
- 전체적으로 주석을 달고, css의 코드를 컨벤션의 순서로 맞춤
- jsx의 코드와 css의 코드의 순서를 맞춤
0902
- 로그인
- 회원가입
- 메인
- 업로드
- 프로필 수정 페이지
를 매끄럽게 연결합니다.
09/16
- 게시글 작성시 기본이미지가 호박머리(준수)
- 글자수 제한 기능 만들기(업로드 시)(input에 max Length)(준수) O → 더 유저 친화적으로 만들어야함
- 디테일 페이지에서 자신이 아니면 점 세개 안보이게 하기(준수) O
- 다른 사람의 댓글 수정&삭제 안보이게 하기(준수) O (좀 더 꼼꼼한 확인 필요)
- hotPosts에서 누르면 걔네의 상세페이지로 갈 수 있게 하기(준수) → hotPosts get할시에 userId받아오기 → api 수정시 완료 O
- 댓글 달았을때 바로 보이게 하기(준수) → 댓글 작성 API에서 댓글 작성과 댓글조회가 같은 양식으로 나올 수 있게 해야함 → 댓글 새로고침을 그 리스트 부분만 할 수 있는지(전체말고) → api 수정시 완료 O
- 무신사 선택시 선택된거 알 수 있게 색깔을 넣는다던지 알려줘야함(준수) O
- 무신사 다 선택하면 다시 사진창으로 가는 버튼 만들기(완료버튼)(준수) O
- 무신사 선택시 뺄수 있는 기능(준수) O
- 다른 유저 이름이나 동그란 이미지 누르면 그사람 옷장으로 갈 수있게 하기(준수) O
- 대표게시물 지정 눌렀을 때 뭔가 반응이 있으면 좋을 것 같다(준수) O
확인해야할 부분
- 상세페이지에서 내가 쓴 글이 아닌데 내가 쓴것처럼 보이는 이슈(준수) ??? 확인안됨 다시 확인해야합니다 → 처음에는 내가 쓴것처럼 보였다가 시간지나면 상대방이 쓴것처럼 보임(모바일에서는 시간이 지나도 내가쓴걸로 보임)
- 메인페이지로 돌아가면 제가 작성한 글만 보이고 다른사람들 글이 없음 무한스크롤이 안된다.(준수) → 좀 더 명확한 확인이 필요
- 댓글에서 누르면 그 댓글이 다 보이게 만들기, 대댓글 포함(준수)
- 댓글부분 1분이상 지나도 방금전 으로 뜨는 부분(준수) → 요청후 응답이 방금전에서 변하지 않음