틴데이터는 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 사용
  • http://dusunax.s3-website.ap-northeast-2.amazonaws.com/
• 이미지 업로드에 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

• AWS의 S3 버켓
  • 서버에 전송할 이미지를 업로드 하기 위해 사용할 것
  • 버킷 CORS 구성

• 유저 로그인: 토큰 ⇒ 쿠키에 저장

• 유저 정보 submit
  • react hook form사용
• 이미지 저장(aws sdk), imageURL post
• input종류별 조건부 랜더링
• 태그 정보는 다음과 같이 구성
  • [0,1,0,0,0,0,1,0]

• 받은 유저 데이터를 랜더링
• 좋아요와 싫어요 클릭 시 API 명세에 따라 요청 보냄
  • 받은 유저 데이터를 리랜더링
  • 받은 유저 데이터와 좋아요 매치 시, 매치 페이지로 이동

• 내가 좋아요한 사람 리스트(간략) 출력
  • 카드를 클릭하면 해당 사람의 마이페이지로 이동
• 매치된 사람의 카드는 다른 카드와 구분되는 스타일 적용

1. 마이 페이지 / 프로필 페이지
   • 받아온 유저의 정보를 랜더링
     • (조건부 랜더링) 유저 아이디와 로그인한 유저의 아이디가 같다면, 프로필 수정 버튼 보여주기

• 회원가입 페이지를 수정하여 만듦

• 좋아요 페이지로 가는 버튼 만들기

• 스와이프 페이지으로 가기 버튼

• 모바일 클라이언트 환경에 적합한 모바일 웹 페이지 레이아웃 구성하기

• header, footer 컴포넌트 제작 후 router에 연결하기

• react icon ⇒ material design

• 카카오맵 API (feat React)
  • 기본 https://developers.kakao.com/docs/latest/ko/local/common
  • 마커 이미지 https://apis.map.kakao.com/web/sample/multipleMarkerImage/
• Geolocation API 사용하기
  • geolocation 객체 사용
  • https://developer.mozilla.org/ko/docs/Web/API/Geolocation_API/Using_the_Geolocation_API
• 거리 구하기
  • getLength
  • (A.x - B.x)^2 + (A.y-B.y)^2

• https://github.com/TinDater/TinDater-frontend/issues

• 관련 이슈 TinDater#47
• 공통 부모 컴포넌트에서 관리
• state 끌어올리기

• login
  • 로그인한 유저 정보
    • 취미 이름 배열
  • 토큰 / 쿠키 확인, 로그인 상태 관리
• signup
  • 회원가입할 때 필요한 체크 내용
  • success, checkName, checkNick, userId
• swipe
  • 다른 사람 유저 정보
    • 취미 이름 배열
• likesList
  • 나를 좋아한 사람의 목록
    • 평소에는 비어 있음
      • 라이크 페이지에서만 필요함

• App 상단
  • 토큰 확인
• 라우터
  • 로그인 유저 확인
• Swipe.jsx
  • 각 페이지 유저

• 시간상 모바일 반응형 커버리지가 완벽하진 않지만 리액트로 모바일 웹을 구현하는 좋은 경험이었습니다.