틴데이터는 Tinder와 Gather의 합성어로, 게더친을 만날 수 있는
"틴더 투 게더"라는 컨셉으로 제작한 사이트입니다.
모바일 환경에 맞춰 가로 768px부터 320px까지 고려하여 제작하였습니다.
🔥 2022년 8월 25일 배포 완료하였습니다.(28일 close예정)
http://dusunax.s3-website.ap-northeast-2.amazonaws.com/
클론코딩, Tinder
2022년 8월 19일~25일
Front-end 박준수, 유지완, 두선아
Back-end 이재철, 전지원, 김민선
- 어플리케이션 배포에 S3 사용
- 이미지 업로드에 S3 사용
- 서버 배포에 EC2 사용
https://global-giraffe-ef7.notion.site/SA-6-3618638bd1a3409c8828a027faa3772a
https://www.notion.so/SA-6-3618638bd1a3409c8828a027faa3772a#0aecad27ccb743f5a72c3f16a3520888
https://global-giraffe-ef7.notion.site/f8b375aeae2044208f81b349e6eadff1
https://global-giraffe-ef7.notion.site/49b8d99f9f60408292540d94f52543a7
- 작업 기간: 2022년 8월 19일 ~ 8월 25일
- 소통: 게더 내에서 9시 ~ 9시, 수시로 소통하기
- 회의: PM 4시~
- AWS-sdk 라이브러리 사용
- src\s3\FileUpload.js에 관련 설정 정리
- 카카오맵 API 사용
- 추후 부가기능: 태그를 사용한 필터
- 매 번 새로운 유저
- 좋아요 또는 싫어요 이벤트하면 요청
- 접속했을 때 DM
- 접속하지 않았을 때 DM
📌 [https://docs.aws.amazon.com/ko_kr/sdk-for-javascript/v3/developer-guide/s3-example-configuring-buckets.html](https://docs.aws.amazon.com/ko_kr/sdk-for-javascript/v3/developer-guide/s3-example-configuring-buckets.html)
- AWS의 S3 버켓
- 서버에 전송할 이미지를 업로드 하기 위해 사용할 것
- 버킷 CORS 구성
- 유저 로그인: 토큰 ⇒ 쿠키에 저장
- 유저 정보 submit
- react hook form사용
- 이미지 저장(aws sdk), imageURL post
- input종류별 조건부 랜더링
- 태그 정보는 다음과 같이 구성
- [0,1,0,0,0,0,1,0]
- 받은 유저 데이터를 랜더링
- 좋아요와 싫어요 클릭 시 API 명세에 따라 요청 보냄
- 받은 유저 데이터를 리랜더링
- 받은 유저 데이터와 좋아요 매치 시, 매치 페이지로 이동
- 내가 좋아요한 사람 리스트(간략) 출력
- 카드를 클릭하면 해당 사람의 마이페이지로 이동
- 매치된 사람의 카드는 다른 카드와 구분되는 스타일 적용
- 마이 페이지 / 프로필 페이지
- 받아온 유저의 정보를 랜더링
- (조건부 랜더링) 유저 아이디와 로그인한 유저의 아이디가 같다면, 프로필 수정 버튼 보여주기
- 받아온 유저의 정보를 랜더링
- 회원가입 페이지를 수정하여 만듦
- 좋아요 페이지로 가는 버튼 만들기
- 스와이프 페이지으로 가기 버튼
페이지명 | 담당 | 초안 완성 | 기능 구현 | 최종 완성 |
---|---|---|---|---|
회원가입 페이지 | 박준수 | 8월 21일 | 8월 21일 | 8월 25일 |
로그인 페이지 | 박준수 | 8월 21일 | 8월 21일 | 8월 25일 |
스와이프 페이지 | 두선아 | 8월 20일 | 8월 22일 | 8월 25일 |
내가 좋아요한 페이지 | 유지완 | 8월 22일 | 8월 22일 | 8월 24일 |
유저 상세 페이지 | 두선아 | 8월 22일 | 8월 22일 | 8월 24일 |
프로필 수정 페이지 | 박준수 | 8월 22일 | 8월 22일 | 8월 25일 |
매치 페이지 | 두선아 | 8월 21일 | 8월 21일 | 8월 23일 |
404 페이지 | 유지완 | 8월 20일 | 8월 21일 | 8월 22일 |
- 모바일 클라이언트 환경에 적합한 모바일 웹 페이지 레이아웃 구성하기
- header, footer 컴포넌트 제작 후 router에 연결하기
📌 틴데이터 로고
- 카카오맵 API (feat React)
- Geolocation API 사용하기
- 거리 구하기
- getLength
- (A.x - B.x)^2 + (A.y-B.y)^2
페이지 | 안되는 기능 / 내용 | 작업자 | 완료 |
---|---|---|---|
Swipe | 더이상 보여줄 유저가 없을 때, 예외처리 하기 | 선아 | 완료 |
전체 | 이미지 출력 url 전부 확인하기 ⇒ center / cover로 | 선아 | 완료 |
전체 | 새 리액트 앱을 생성하고, react-router-dom을 새로 설치 후 | ||
router를 작성하던 중 발생한 에러 TinDater#4 | 선아 | 완료 | |
Swipe | • API 서버 URL 연결 후, people/:userId/like 요청에 실패함 | ||
TinDater#17 | 선아 | 완료 | |
logIn | 로그인 회원가입 관련 버그 | ||
TinDater#19 | 준수 | 완료 | |
swipe/detail | 유저 상세 페이지 출력 이슈 | ||
TinDater#20 | 선아 | 완료 | |
env | .env 파일 특정 환경에서 작동하지 않는 이슈 | ||
TinDater#30 | 준수 | 완료 | |
전체 | token & userId 관련, 새로고침시 상대유저 날라가는 이슈 | 준수 | 완료 |
profile | Profile 페이지가 정상적으로 열리지 않는 이슈 | ||
TinDater#37 | 선아 | 완료 | |
swipe | 좋아요 싫어요 누를시 바로 유저없음 뜨는 이슈 | ||
TinDater#44 | 선아 | 완료 | |
전체 | 스토어 데이터 흐름 변경 | ||
TinDater#47 | 선아 | 완료 | |
User | 맵 좌표가 한번씩 undefined으로 출력됨 | ||
TinDater#49 | 선아 | 완료 | |
SignUp/progress | 프로그레스바 컴포넌트 기능 추가후 무한로딩 에러 | ||
TinDater#40 | 지완 | 완료 | |
SignUp/styled | 프로프레스 바 움직임이 없는 오류 | ||
TinDater#40 | 지완 | 완료 | |
Map | S3 배포에서 카카오맵 에러 | ||
TinDater#52 | 선아 | 완료 | |
Map | 맵 좌표가 한번씩 undefined으로 출력됨 | ||
TinDater#49 | 선아 | 완료 | |
Mypage | 마이페이지 첫 로딩 시 좌표 0, 0 뜨는 버그 수정 | ||
TinDater#53 | 선아 | 완료 | |
signup | 회원가입시 중복확인을 눌러야만 다음단계로 넘어가게 수정 | ||
TinDater#51 | 준수 | 완료 |
- 관련 이슈 TinDater#47
- 공통 부모 컴포넌트에서 관리
- state 끌어올리기
- login
- 로그인한 유저 정보
- 취미 이름 배열
- 토큰 / 쿠키 확인, 로그인 상태 관리
- 로그인한 유저 정보
- signup
- 회원가입할 때 필요한 체크 내용
- success, checkName, checkNick, userId
- swipe
- 다른 사람 유저 정보
- 취미 이름 배열
- 다른 사람 유저 정보
- likesList
- 나를 좋아한 사람의 목록
- 평소에는 비어 있음
- 라이크 페이지에서만 필요함
- 평소에는 비어 있음
- 나를 좋아한 사람의 목록
- App 상단
- 토큰 확인
- 라우터
- 로그인 유저 확인
- Swipe.jsx
- 각 페이지 유저
- 시간상 모바일 반응형 커버리지가 완벽하진 않지만 리액트로 모바일 웹을 구현하는 좋은 경험이었습니다.