24‐08‐25(일) 프론트엔드 회의록

👥참여 인원

우석, 우승찬, 윤예솔

⏰회의 시간

오후 9:00 ~ 오후 11:05

👨‍💻백엔드 팀과 의견 공유

1️⃣Access Token, Refresh Token 만료일자

• Access Token: 1일 1시간 15분
• Refresh Token: 7일
• Acceess Token 만료 시, HTTP status 코드(401)로 응답

2️⃣Refresh Token 조기 만료 API 요청

🤔해당 요청을 하게 된 계기

• 동일한 기기나 브라우저에서 로그아웃을 하고, 다른 사용자가 로그인 한다면, 이전에 접속한 사용자에 대한 Refresh Token은 어떻게 되는가에 대한 의문
• Chat GPT의 대답: 보안을 위하여 Refresh Token을 만료하는 작업이 필요함.

🔐보안을 위해서는 Refresh Token의 만료가 필요

• PC를 공용으로 사용하는 경우를 생각해 보았을 때, 보안적인 문제를 생각하면 로그아웃을 했을 때 Refresh Token이 브라우저에서 삭제되도록 하는 로직 필요
• 현재 Refresh Token은 서버 단에서 http-only 옵션으로 내려주고 있으므로 프론트 단에서는 Refresh Token에 접근이 불가
• 따라서 위의 로직을 구현하기 위해서는 로그아웃 할 시 서버에서 Refresh Token 무효화를 진행해 주어야 함

🙂구현

1. 로그아웃 시 서버에 요청
2. 서버에서 클라이언트에 응답을 보내어 브라우저의 Refresh Token 쿠키를 만료

👨‍🎨프론트 팀 회의 내용

1️⃣프로젝트 최적화 (by 우석님)

• 프론트엔드 코드 최적화 필요: 처음 로딩이 너무 길다... FCP를 높이기 위해 캘린더, 칸반보드와 같은 무거운 라이브러리를 사용하는 부분이 스플리팅이 필요함.
• 마크다운 언어 모듈 처리 문제: 코드 블록에서 언어를 구문 분석하려면, 언어 모듈이 설치가 되어 있어야 한다. 문제는 블로그와 같이 원하는 언어만 추가하면 사전에 정제하여 추가할 수 있지만, 현재 프로젝트는 다양한 사용자에 따라 다양한 언어가 지원되어야 해야한다. 그렇다고 초반부터 모든 언어 모듈을 받아오는 것은 초기 로딩을 느리게 할 뿐만 아니라, 불필요한 모듈도 너무 많이 다운로드 해야한다. 그래서 필요에 따라 동적 모듈로 추가하는 방식을 진행해야할 것으로 판단된다.
• 코드 스플리팅을 위해서 lazy loading과 Suspense를 사용하여 로딩 속도를 줄여볼 생각
• 번들러의 트리 쉐이킹 이슈로 동적 import 모듈을 제대로 명시하지 않으면 번들 패키지에 포함되어 있지 않는 문제가 있는 것 같음.
• 최적화 방법에 대해 더 알아볼 예정

2️⃣팀 설정 페이지 UI

• 팀 관리의 팀 설명을 모두 보여주려면 UI가 깨지는 문제점이 존재
• 정해진 width를 넘어가는 경우 말줄임표(...)로 처리하고, 수락/거부 버튼 아래 상세 보기 버튼 추가
• 상세 보기 버튼을 클릭하면 팀의 정보를 모두 열람할 수 있다. 팀원들의 소개도 추가적으로 보여줄 수 있음

3️⃣회원탈퇴 추가 필요 ⇒ 추후 구현하기로

• 유저 정보 설정 사이드 바에 회원 탈퇴 메뉴 추가 + 회원탈퇴 페이지 추가 생성
• 회원탈퇴 시, 팀 생성자의 권한을 팀 멤버에게 위임하는 로직이 필요함. 서버 단의 구현도 필요하므로 해당 로직에 대해서는 추가적인 의논이 필요.
• 우선은 우선순위가 높은 기능들을 먼저 구현하고, 회원탈퇴 기능 구현은 나중에 생각해 보는 걸로 결정

4️⃣일정 확인 모달

• 일정확인 모달 수정 버튼 클릭 시, 새로운 모달(수정 모달)로 넘어가야 함
• 모달 전환을 어떻게 구현해야 유연한 처리가 가능할지 고민 중🤔

5️⃣할 일 등록 모달 첨부파일 수정

모달 안에서 파일 삭제 및 수정 처리를 모두 끝낸 뒤, 수정 버튼을 누르면 모달 내에서 정리된 데이터를 서버에 요청하는 방식으로 진행할 예정

6️⃣인증

• 보안 문제로 인해 Access Token 관리를 쿠키 ⇒ zustand를 이용한 전역 관리로 변경
• 로그인 API 호출 후, 유저 데이터 호출 API 호출을 통해 유저 데이터를 불러와서 zustand store에 저장
• 로그인 + 유저 정보 fetch 및 store 저장까지 한번에 작업해서 PR 올리기

7️⃣디자이너분 모집

• 프로젝트의 규모가 앞으로 더 커질 것을 생각하면 디자이너 분을 새로 뽑는 게 좋을 것 같습니다.
• 다만 1차적으로 배포를 마친 뒤에 모집을 할지, 아니면 그 이전에 구인해서 디자인 진행할 시간적 여유를 드리는 게 나을지는 고민해 볼 예정

📆작업 일정 공유 (~9.15)

9월 15일이 데드라인입니다... 그 안에 맡은 부분 작업 마무리하기😊

팀원별 작업 계획

예솔

• 자잘한 시맨틱 태그 / 디자인
• 로그인 로직 (5일)
• 로그아웃 로직 (1일)
• 아이디 찾기 로직 (0.5일)
• 패스워드 찾기 로직 (0.5일)
• 이메일 인증 로직 (3일)
• 닉네임 중복확인 로직 (1일)
• 폼 제출 로직 (로그인 폼, 회원가입폼, 아이디 찾기, 패스워드 찾기, 비밀번호 변경, 개인정보수정) (7일)
• 유저 설정 페이지 리다이렉션 로직 (3일) = 21일

승찬

• 팀 생성 / 수정 UI (3일)
• 프로젝트 생성 / 수정 UI (4일)
• 팀 설정하기, 삭제하기 버튼 추가
• 권한에 따른 로직 분기 (7일)
• 팀 생성 로직 포함 (팀 생성 작업하면서 같이할 예정이라 추가 시간 없음)
• 팀 수정 로직(1일)
• 프로젝트 생성 로직 프로젝트 생성 작업하면서 같이할 예정이라 추가 시간 없음)
• 프로젝트 수정 로직(1일)
• 가입하기 로직 (1일)
• 거부하기 로직 (1일)
• 탈퇴하기 로직 (1일)
• 팀 삭제 로직 (1일)
• 팀 설정 로직 (1일) = 21일

우석

• 파일 DND 업로드 (1일)
• 할일 상세 보기 모달 (2일)
• 할일 수정 모달 (2일)
• 할일 생성 네트워크 로직 (1일)
• 할일 수정 네트워크 로직 (1일)
• 파일 다운로드 네트워크 로직 (1일)
• 파일 삭제 네트워크 로직 (1일)
• 할일 순서 변경 (1일)
• 상태 추가 네트워크 로직 (1일)
• 상태 변경 네트워크 로직 (1일)
• 칸반보드 DND 하이라이팅 (2일)