Pages

1. 로그인(Login.jsx)
2. 회원가입(SignUp.jsx)- Modal(이름, 이메일, 패스워드, 패스워드 확인, 생일, 성별)
3. 메인페이지(Home.jsx)
   1. 왼쪽 - 친구 검색 목록 보여주기
   2. 중앙 - 게시물 보여주기, 게시물 작성(수정, 삭제) 모달, 친구추가,
      1. 이름 hover 시 친구 추가 모달
      2. 게시글(좋아요) 버튼
   3. 오른쪽 - 친구 목록 보여주기(온오프라인 구분 x )
4. 채팅창(Chat.jsx) - 채팅창
5. 레이아웃

(1)1, 2, 3 - 무한스크롤 / (2) 3.a, 3.c, 4 / (3) 3.b

유리 = (메인페이지 중앙)

영은 = (로그인, 회원가입, 메인페이지 무한스크롤)

수진 = (친구검색목록(추가),내친구,채팅창)

Common Component

1. 레이아웃(Layout)
2. 헤더(Header)
3. 푸터(Footer)
4. 이외 각 페이지 별 컴포넌트

1. token - session 저장(refresh, access token) - backend 분들이랑 상의
2. preitter, esLint(https://poiemaweb.com/eslint) - 보류
   • esLint 설정 방식 - https://backend-intro.vlpt.us/1/01.html

Commit Convention

⭐️ 작은 기능마다 커밋하기 ⭐️

Redux ( 추후 정리)

1. —

역할분담

패키지

• [ ] 스타일 메인) - tailwind(유지보수가 힘듬..?)
• [ ] 스타일 서브) - styled-components
• [ ] axios
• [ ] react-icon
• [ ] react-tool-kit
• [ ] react query
• [ ] yarn add react-router-dom
• [ ] react-dom
• [ ] react-redux
• [ ] redux

폴더 구조

root/ .env

public/ - asset폴더 - image 이름 예시 → [board(page이름)-detail(컴포넌트이름)-highfive(사진이름).png]

src/

1. api
2. assets(svg)
3. components/페이지 이름/ 컴포넌트명 (추가로 components/layout/header,footer/… , isLoading.jsx)
4. hooks
5. pages
6. redux/config, redux/modules
7. shared/router

공통

수정/제 : 내 게시글 인지 true, false확인해서 true일 경우에만 보여주기 (…아이콘)

게시글 상세조회 - 클릭 했을때 크게보이는거 x , 해당유저가 작성한 게시글 조회 (마이페이지 )

유저정보조회

토큰

**쿠키에만 의존해서 빠른 리프레쉬를 갖고 해킹이 되면 그게 진짜 그사람인지 알 수 없음

긴쿠키에 대한 토큰내용을 데이터베이스에 저장해놓음

탈취되었다는게 발견되면 리프레쉬토큰을 지워버려서 엑세스 토큰을 지워버린다.

서버에서 토큰을 검사할때 리프레쉬토큰을 먼저 검토한다. 없으면 다시 로그인하라고한다.

리프레쉬토큰이 있는데 엑세스토큰이 없으면 엑세스 토큰을 재발급해서 클라로 넘겨준다.

쿠키든 뭐든 둘다 저장해주고 우리는 둘다 보내줘야한다.

우리방식 -> 바디에 토큰이 담겨서 온다.

만료시간이 지났을때 아예 사라진다.**