instagram-clone-coding / react_instagram_clone Goto Github PK
View Code? Open in Web Editor NEWInstagram Clone Coding - Frontend using React
Home Page: http://ec2-52-79-71-191.ap-northeast-2.compute.amazonaws.com
Instagram Clone Coding - Frontend using React
Home Page: http://ec2-52-79-71-191.ap-northeast-2.compute.amazonaws.com
/accounts/login/recovery
에서 /login/recovery
로 수정되었습니다검색(/topsearch)
채팅방 생성(/chat/rooms)
DM 목록이 보이지 않는 오류입니다.
hasManyPosts → hasManyPostImages
http://ec2-3-36-185-121.ap-northeast-2.compute.amazonaws.com:8080/swagger-ui.html#/
백엔드에서 member 관련 리팩토링을 진행하여 수정 사항이 몇가지 있습니다 !
[]
또는 빈 페이지를 반환하도록 수정했습니다{
"status": 200,
"code": "MP002",
"message": "회원의 게시물 조회 성공",
"data": {
"content": [],
"pageable": "INSTANCE",
"last": true,
"totalPages": 1,
"totalElements": 0,
"size": 0,
"number": 0,
"sort": {
"unsorted": true,
"sorted": false,
"empty": true
},
"first": true,
"numberOfElements": 0,
"empty": true
}
}
{
"status": 200,
"code": "MP001",
"message": "회원의 최근 게시물 15개 조회 성공",
"data": []
}
{
"postId": 6,
"postImageUrl": "https://bluetifulc-spring-bucket.s3.ap-northeast-2.amazonaws.com/post/74839aa8-4be4-4e5c-882b-b264949b3915_KakaoTalk_20210702_030753284.JPG",
"hasManyPosts": true,
"postCommentsCount": 0,
"postLikesCount": 0
}
{
"postId": 7,
"postImageDTO": {
"id": 7,
"postImageUrl": "https://bluetifulc-spring-bucket.s3.ap-northeast-2.amazonaws.com/post/2f0630e7-02d8-45f0-9416-81b6427bcc9c_ai.PNG",
"altText": "aaa",
"postTagDTOs": []
},
"hasManyPosts": false,
"postCommentsCount": 0,
"postLikesCount": 0
}
/menu/profile
에서 /accounts/profile
로 변경했습니다./accounts/logined/device
-> /accounts/login/device
로 변경했습니다./accounts/{username}/posts/saved
에서 /accounts/posts/saved
로 변경했습니다.저장한 게시물은 자신만 볼 수 있기때문에 username정보를 받을 필요가 없어서 삭제했습니다.
TODO 목록 모두 적용 시 Issue 닫아주시면 됩니다 !
1개 가져오는 api를 4번 요청하기 or 기존 api 수정 or 새로운 api (여러 개 가져오는) 추가
프로필 정보 변경 버튼(제출)을 누르면 이벤트가 나타나지 않아 변경되었는지/변경실패인지 확인하기가 어렵습니다.
비밀번호 재설정 메일 클릭 시, 백엔드에서 url 변경하기때문에 현재 코드(비밀번호 재설정 메일 보내는 폼 작업완료)머지 후 작업가능
description
게시물 내용 작성 과정에서 해시태그나 멘션 기호를 입력한 다음에 단어를 입력하는데, 중간에 엔터를 누르면 아래 영상과 같이 동작하는 것을 발견하였습니다.
실제 인스타에서 게시물을 업로드하면, 홈에 업로드한 게시물이 일시적으로 올라오는데, 새로고침을 하거나 다시 로그인하면 사라지는 형태입니다.
아마 본인이 올린 게시물은 홈에서 조회하지 않되, 업로드 시점에 정상적으로 업로드가 되었다는 것을 확인시키기 위해, 업로드가 완료되면 해당 게시물을 홈에 추가해주는 것 같습니다.
FOLLOW_FAIL(200, "F006", "팔로우할 수 없는 대상입니다.")
를 반환게시물 업로드 Form
�Redux를 도입하여 모달이 띄워질 때 바닥 부분의 scroll 방지 관련 css를 추가하여 해결해야 할 듯
게시물/저장됨/태그됨 최하단으로 내려가면 아래 동영상과 같이 본인 프로필 사진(?)이 크게 배치되는 문제입니다.
내가 좋아요한 글이 아니어도, 좋아요를 그 글에 누군가 했으면
"좋아요 취소" 모달로 변경되어 해당 글에 좋아요가 불가능해지는 에러
FollowingModal.tsx (components > home > modals)
UnFollowModal.tsx (components > profile > modal)
두 파일의 코드가 많은 부분 겹침 -> 하나의 파일로 합치기
Direct page 퍼블리싱
/**/without
형태의 엔드포인트를 갖습니다.@seonpilKim @bluetifulc @ChanhyukPark-Tech @live-small
처음에 DM 페이지로 접속하면 /sub/dlwlrma
으로 구독이 잘 됩니다.
따라서 메시지를 전송하면 웹소켓을 통해 바로 메시지를 받을 수 있습니다.
그러나 DM 페이지에서 새로고침을 누르면 /sub/undefined
으로 잘못 구독이 되어, 메시지를 전송해도 웹소켓을 통해 메시지를 받을 수 없게 되는 현상을 발견했습니다.
@seonpilKim @bluetifulc @ChanhyukPark-Tech
아래와 같이 웹소켓으로 메시지 전송을 하지 않습니다.
또한, 서버에 어떠한 로그도 찍히지 않습니다. (서버에서 정상적으로 요청을 받으면, HTTP, DB 등의 로그가 남습니다.)
p.s) 서버에서 정상적으로 요청을 받은 경우 아래와 같이 로그가 찍히게 됩니다.
참고로 웹소켓 통신은 헤더가 없어서 인증처리가 따로 없습니다.
프론트단에서도 코드 수정이 없다고 하셨지만, 서버도 마찬가지로 비즈니스 로직 수정을 한 게 없어서 어느 부분이 문제인지 파악하기가 어렵네요.. 일단 다같이 원인을 찾아봐야 할 것 같습니다.
게시물 좋아요나 저장을 누르면 아래와 같이 동작합니다.
Home Route 남은 기능
로그인, 회원가입, 비밀번호 재설정 완료 후, 라우터 변경처리 안해서 home으로 가지 않는 버그 존재..!
useState로만 관리중. redux 적용하면 연결될 듯
로그인 화면 퍼블리싱 완료
작업 브랜치 : feature/login
언젠간 해야하는 작업,,,
onChange 이벤트 핸들러에서, 공백처리를 추가해 isValid를 제어하도록 개선하려고 한다.
개선 이유는 게시글 댓글입력 input, DM input에서 공백만 입력할 경우엔
제출버튼
을 활성화시키지 않도록 하기 위함이다.
onChange 이벤트 발생시, trim으로 공백인지 체크해 isValid를 false로 두고, isValid 값으로 버튼 활성화에 이용하면 된다.
description
followingMemberFollow
가 특정 상황에 정상적으로 반환되지 않던 경우를 수정했습니다.followingMemberFollow
가 3명 이상인 경우 "aaa님, bbb님 외 *명이 팔로우 중입니다."식으로 출력이 되는데 현재 검색 API에선 followingMemberFollow
에 해당하는 모든 username을 반환합니다. 이 부분은 종강 후 수정할 예정입니다.HASHTAG
, MEMBER
를 넣어주시면 되고 EntityName엔 각각 해시태그 이름, 유저이름을 적어주시면 됩니다."#만두"검색 기록을 삭제한다면 API요청시
entityName
에 "만두"를 입력하면됩니다. "#만두"를 입력하는게 프론트에서 처리하기 더 편할까요 ? 이 부분은 의견 주시면 수정하겠습니다.
followingMemberFollowCount
를 반환하는 형태로 변경FollowingMemberFollow
에 반환 되고 남은 인원은 followingMemberFollowCount
로 반환유저프로필/검색은 최대 3명 미니프로필은 최대 1명만 반환
{
"status": 200,
"code": "M004",
"message": "회원 프로필을 조회하였습니다.",
"data": {
"memberUsername": "dlwlrma",
"memberName": "이지금",
"memberWebsite": "http://localhost:8080",
"memberImage": {
"imageUrl": "https://bluetifulc-spring-bucket.s3.ap-northeast-2.amazonaws.com/member/d23cfc3a-35a2-4e65-bee8-5106b1be4917_KakaoTalk_20210912_091605600.JPG",
"imageType": "JPG",
"imageName": "KakaoTalk_20210912_091605600",
"imageUUID": "d23cfc3a-35a2-4e65-bee8-5106b1be4917"
},
"memberIntroduce": "안녕하세요ㅇㅁㅇㅁ",
"memberPostsCount": 14,
"memberFollowingsCount": 4,
"memberFollowersCount": 2,
"followingMemberFollow": [
{
"memberUsername": "dlwlrma1"
},
{
"memberUsername": "dlwlrma2"
},
{
"memberUsername": "dlwlrma3"
}
],
"followingMemberFollowCount": 1,
"hasStory": false,
"following": false,
"follower": false,
"blocked": false,
"me": true,
"blocking": false
}
}
/topsearch/mark
API와 최근검색기록 삭제 API 요청 시 entityType
이 HASHTAG인 경우 entityName에 #만두
의 형태로 앞에 #을 붙여서 요청해야 하도록 바꿨습니다.Todo 완료시 Issue 닫아주시면 됩니다 !
description
기존 설정했던 비밀번호 재설정 할 수 있음
현재 해당 url 그대로 로그인 됨
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.