coffee-meet / frontend Goto Github PK

✨ 어떤 Style 작업인가요?

회원가입페이지와 매칭대기,성공화면에 쓰일 AlertText 공통 컴포넌트 제작.

스타일 작업 브랜치

style/AlertText

☑ Style TODO

• AlertText 제작

✨ 어떤 Style 작업인가요?

배경화면으로 사용될 GradationBackground 컴포넌트를 제작합니다.

스타일 작업 브랜치

style/Card-component에서 병행 작업중

☑ Style TODO

• GradationBackground 컴포넌트 제작

✨ 어떤 Style 작업인가요?

CountNumber, AlertText 공통 컴포넌트 수정

스타일 작업 브랜치

style/CommonComponentsRE

☑ Style TODO

• CountNumber, AlertText 공통 컴포넌트 수정

🚀 어떤 기능을 만드나요?

매칭 이후에 이동할 채팅 페이지에서 실시간 채팅 기능을 구현합니다.

작업 중인 브랜치

feature/chatting

☑ Implement TODO

• 채팅 페이지 퍼블리싱을 완료합니다.
• 채팅 페이지에서 실시간 채팅 기능을 구현합니다.

✨ 어떤 Style 작업인가요?

이메일 인증코드를 받는 인풋속의 타이머 공통 컴포넌트 입니다.

스타일 작업 브랜치

style/InputTimer

☑ Style TODO

• InputTimer 작업

🚀 어떤 기능을 만드나요?

채팅방 목록 페이지(이전 대화방 페이지)를 생성합니다.

작업 중인 브랜치

feature/ChatListPage

☑ Implement TODO

• 이전 대화방 페이지를 생성합니다.

✨ 어떤 Style 작업인가요?

컴포넌트 간의 공간을 나눌 수 있도록 만들어 주는 컴포넌트를 제작합니다.

스타일 작업 브랜치

style/spacing

☑ Style TODO

• size 값을 통하여 여백 값을 받습니다.

✨ 어떤 Style 작업인가요?

모든 페이지의 Header 부분에서 사용될 수 있는 컴포넌트입니다.

• 가운데 텍스트와 왼쪽, 오른쪽에 각각 아이콘이 올 수 있습니다.

style/PageHeader-component

스타일 작업 브랜치

☑ Style TODO

• PageHeader 컴포넌트 제작

🛠️ 리팩토링이 필요한 부분

• 현재 main 브랜치에 push할 때만 빌드 테스트가 동작합니다.
• dev 브랜치에 push할 때도 빌드 테스트가 동작하도록 CI / CD 파이프라인을 수정하려고 합니다.

리팩토링 작업 브랜치

refactor/build-test-ci-cd

☑ Refactoring TODO

• build-test.yml 파일 수정

✨ 어떤 Style 작업인가요?

회사명함 이미지 업로드 공통 컴포넌트 제작

스타일 작업 브랜치

style/businessCardContainer

☑ Style TODO

• businessCardContainer

🛠️ 리팩토링이 필요한 부분

SelectorButton 공통 컴포넌트 수정

리팩토링 작업 브랜치

style/SelectorButtonRe

☑ Refactoring TODO

• SelectorButton 공통 컴포넌트 수정

✨ 어떤 Style 작업인가요?

Input의 종류를 3가지로 나누었습니다 (일반 Input, NicknameInput, VerificationInput)
이 중 Input 구현 진행

스타일 작업 브랜치

style/Input

☑ Style TODO

• Input

✨ 어떤 Style 작업인가요?

속지가 존재하는 디자인 특성상, 속지의 역할을 하는 PageContainer 컴포넌트가 필요합니다.

스타일 작업 브랜치

style/Card-component 브랜치에서 병행 작업중

☑ Style TODO

• PageContainer 컴포넌트 제작

✨ 어떤 Style 작업인가요?

채팅창에 입력하였을 때 나타나는 말풍선 컴포넌트를 제작합니다.

스타일 작업 브랜치

style/chattingBubble

☑ Style TODO

• 말풍선 컴포넌트 디자인
• props로 데이터 받기

✨ 어떤 Style 작업인가요?

관리자 페이지, 마이페이지에서 사용되는 공통 컴포넌트인 ListRow 컴포넌트를 제작합니다.

스타일 작업 브랜치

style/ListRow-component

☑ Style TODO

• ListRow 작업

✨ 어떤 Style 작업인가요?

토글 컨테이너, 닉네임 인풋의 숫자를 나타내는 공통 컴포넌트 입니다.

스타일 작업 브랜치

style/CountNumber

☑ Style TODO

• CountNumber

🚀 어떤 기능을 만드나요?

Button 공통 컴포넌트 개발에 필요한 TS 타입을 추가하려고 합니다.

• NormalButton 공통 컴포넌트
• IconButton 공통 컴포넌트
• MultiTextButton 공통 컴포넌트

작업 중인 브랜치

• feature/Button-components-type

☑ Implement TODO

• Button 공통 컴포넌트 관련 타입 추가

🚀 어떤 기능을 만드나요?

• 현재 프론트엔드 배포를 AWS S3 + CloudFront로 구성했습니다.
• github actions를 설정해서 main 브랜치에 push할 때, 자동으로 배포할 수 있도록 CI / CD 파이프라인을 구축하려고 합니다.

작업 중인 브랜치

feature/aws-s3-cloudfront-ci-cd

☑ Implement TODO

• deploy.yml 파일 생성

✨ 어떤 Style 작업인가요?

공통 컴포넌트 개발 전 디자인 시스템을 세팅합니다.

스타일 작업 브랜치

style/settingDesign

☑ Style TODO

• typo, palette 상수화 및 브라우저 기본 디자인 reset 작업

🚀 홈 페이지 레이아웃(다크모드) + Card 컴포넌트 커스텀 훅 분리

• AppHeader 부분에서 다크모드 적용에 따른 전역상태 변화가 필요합니다.
• 현재 Card 컴포넌트에서 타이머가 돌아가는데, 다른 탭에 접속해서 라우팅이 변경되면 타이머가 종료되어 전역으로 타이머를 관리해야합니다.
  • 사용자가 직접 취소 버튼을 누르거나, 어플리케이션을 종료할 때만 타이머가 중지되어야 합니다.

작업 중인 브랜치

feature/Homepage

☑ Implement TODO

• 홈페이지 레이아웃 + Card 컴포넌트 커스텀 훅 분리

🚀 어떤 기능을 만드나요?

• 404 NotFound 페이지를 제작합니다.

작업 중인 브랜치

feature/NotFoundPage

☑ Implement TODO

• NotFoundPage 제작

🛠️ 어떤 버그를 고치나요?

• 백엔드와 REST API 통신을 수행하기 위해 입력한 테스트 코드를 수정합니다.

버그 작업 브랜치

fix/rest-api-test

☑ Bug Fix TODOS

• rest-api-test 코드 수정

✨ 어떤 Style 작업인가요?

CustomSelectorButton 공통 컴포넌트

스타일 작업 브랜치

style/CustomSelectorButton

☑ Style TODO

• CustomSelectorButton 공통 컴포넌트

✨ 어떤 Style 작업인가요?

원하는 페이지로 빠르게 이동할 수 있게 해주는 네비게이션 컴포넌트를 제작합니다.

스타일 작업 브랜치

style/navigationBar

☑ Style TODO

• 네비게이션바 디자인
• 라우팅 작업

✨ 어떤 Style 작업인가요?

Signup1 페이지 레이아웃

스타일 작업 브랜치

style/Signup1Page

☑ Style TODO

• Signup1 페이지 레이아웃

🛠️ 리팩토링이 필요한 부분

Input 공통 컴포넌트

리팩토링 작업 브랜치

refactor/Input

☑ Refactoring TODO

• Input ref, onchange 속성 추가

✨ 어떤 Style 작업인가요?

DarkSelectorButton 공통 컴포넌트

스타일 작업 브랜치

style/DarkSelectorButton

☑ Style TODO

• DarkSelectorButton 공통 컴포넌트

✨ 어떤 Style 작업인가요?

Login 페이지 레이아웃 작업

스타일 작업 브랜치

style/LoginPage

☑ Style TODO

• Login 페이지 레이아웃 작업

✨ 어떤 Style 작업인가요?

관리자 페이지 - 승인 대기 목록
관리자 페이지 - 사용자 신고 내역
-> 페이지 레이아웃 작업

스타일 작업 브랜치

style/AdiminWatingList

☑ Style TODO

• 관리자 페이지 - '승인 대기 목록' 페이지 레이아웃 작업
• 관리자 페이지 - '사용자 신고 내역' 페이지 레이아웃 작업

🚀 어떤 기능을 만드나요?

매칭이 완료되었을 때 푸시 알림을 보내줄 수 있는 FCM(Firebase Cloud Messaging) 알림 적용 및 채팅방 이동 로직을 구현합니다.

작업 중인 브랜치

feature/fcm-matching-home

☑ Implement TODO

• 홈페이지에서 매칭 시작 요청을 보내고, 매칭되었을 때 FCM을 통해 웹 푸시 메시지를 받을 수 있도록 합니다.
• 매칭 완료시 매칭이 완료되었다는 뷰를 보여주고, 채팅방으로 바로 이동합니다.
• 유저의 알림 허용 액션 -> 환경변수에 저장하고 있는 토큰을 가져와 서버에 알림 허용 상태를 저장하도록 요청을 보냅니다.
• 유저의 알림 거부 액션 -> 알림 거부 상태를 저장하도록 요청을 보냅니다.

✨ 어떤 Style 작업인가요?

화면이 렌더링 되기 전 보여줄 로딩 컴포넌트를 제작합니다.

스타일 작업 브랜치

style/loading

☑ Style TODO

• 로딩 컴포넌트 디자인

🚀 어떤 기능을 만드나요?

• Mock Service Worker를 설치하여 백엔드 API 작업 마무리 전에도 개발을 지속할 수 있도록 프로젝트를 설정합니다.

작업 중인 브랜치

• feature/mock-service-worker-settings

☑ Implement TODO

• msw 설치
• msw 폴더 구조 설정 (ex. src/mocks)

✨ 어떤 Style 작업인가요?

정렬에 필요한 Flexbox 컴포넌트를 제작합니다.

스타일 작업 브랜치

style/flexbox

☑ Style TODO

• 정렬에 관련된 속성 값을 props로 받아 재사용 할 수 있게 하기

✨ 어떤 Style 작업인가요?

홈페이지에서 매칭 참가, 채팅방에서 상대방 프로필을 클릭했을 때 하단에서 올라오는 모달을 제작합니다.

스타일 작업 브랜치

style/BottomSheet-component

☑ Style TODO

• BottomSheet 컴포넌트 제작

✨ 어떤 Style 작업인가요?

상단에 고정되어 있는 마이프로필, 다크모드 토글 버튼을 담고 있는 Appbar 컴포넌트를 제작합니다.

스타일 작업 브랜치

style/Card-component 브랜치에서 병행 작업중

☑ Style TODO

• Appbar 컴포넌트 제작

🚀 어떤 기능을 만드나요?

로그인 후 유저 정보와 회사 정보를 등록하는 페이지를 구현합니다.

작업 중인 브랜치

feature/register

☑ Implement TODO

• 유저 정보 서버에 post 기능
• 유저의 회사 정보 post 기능

✨ 어떤 Style 작업인가요?

홈화면에서 매칭 시 필요한 버튼과 타이머를 담고 있는 컴포넌트입니다.

스타일 작업 브랜치

style/Card-component

☑ Style TODO

• Card 컴포넌트 제작

✨ 어떤 Style 작업인가요?

모바일 화면에 맞게 레이아웃을 세팅합니다.

스타일 작업 브랜치

style/layout

☑ Style TODO

• 모바일 화면에 맞게 레이아웃을 세팅 및 manifest.json 설정

✨ 어떤 Style 작업인가요?

WhiteSelectorButton 공통 컴포넌트 작업

스타일 작업 브랜치

style/WhiteSelectorButton

☑ Style TODO

• WhiteSelectorButton 공통 컴포넌트

✨ 어떤 Style 작업인가요?

• 로그인, 회원가입, 리다이렉트, 프로필 수정 등 사용자에게 알려줘야하는 정보를 Toast로 제공하려고 합니다.
• react-toastify를 사용하여 Toast를 제공합니다.

스타일 작업 브랜치

style/Toast-component

☑ Style TODO

• useToast 커스텀 훅 제작

✨ 어떤 Style 작업인가요?

사용자에게 한 번 더 확인을 받는 모달 컴포넌트를 제작합니다.

스타일 작업 브랜치

style/modal

☑ Style TODO

• 모달 컴포넌트 디자인
• title과 content, button text, function을 props로 받기

🚀 어떤 기능을 만드나요?

로그인 페이지에서 카카오, 네이버로 로그인하기 버튼을 클릭하면 OAuth 화면을 보여주고 이후 회원가입 페이지로 이동합니다.

작업 중인 브랜치

feature/LoginPage-OAuth

☑ Implement TODO

• 로그인 페이지 OAuth 기능 연동

✨ 어떤 Style 작업인가요?

타이머, 확인버튼이 들어간 Input 입니다. (회사이메일 인증코드를 받는 인풋)

스타일 작업 브랜치

style/VerificationInput

☑ Style TODO

• VerificationInput 제작

✨ 어떤 Style 작업인가요?

랜딩페이지(추후에 생긴다면), 로그인, NotFound에 쓰일 HeroImage 공통컴포넌트 제작.

스타일 작업 브랜치

style/HeroImage

☑ Style TODO

• HeroImage 제작

추가사항:

• 이미지네임에 대한 prop 값을 가져오는 부분에 대한 추가적인 수정 필요. (현재 해당 컴포넌트를 로그인페이지에 대한 이미지로 사용)
• assets 폴더에 로그인페이지 이미지(svg) 추가

✨ 어떤 Style 작업인가요?

CustomSelectorButton 공통 컴포넌트

스타일 작업 브랜치

style/CustomSelectorButton

☑ Style TODO

• CustomSelectorButton 공통 컴포넌트

✨ 어떤 Style 작업인가요?

SelectorButtonContainer 공통 컴포넌트

스타일 작업 브랜치

style/SelectorButtonContainer

☑ Style TODO

• SelectorButtonContainer 공통 컴포넌트

추가사항: 여러 공통 컴포넌트를 묶고, 기능을 고려하는 관계로 시간이 비교적 많이 소요

🚀 어떤 기능을 만드나요?

• 프로필 페이지(마이 페이지)를 제작합니다

작업 중인 브랜치

feature/ProfilePage

☑ Implement TODO

• 프로필 페이지 레이아웃 제작 + MSW 모킹

✨ 어떤 Style 작업인가요?

NicknameInput 공통 컴포넌트

스타일 작업 브랜치

style/NicknameInput

☑ Style TODO

• NicknameInput

🚀 어떤 기능을 만드나요?

API Test

배포주소에서 서버와의 통신이 가능한지를 테스트하기 위해,
잠겨있지 않은 profile/edit 페이지에서 '길동이'라는 이름으로 nickname 중복체크를 합니다

작업 중인 브랜치

test/APITest

☑ Implement TODO

• API Test

✨ 어떤 Style 작업인가요?

SelectorButton(Dark,White 통합) 공통 컴포넌트

스타일 작업 브랜치

style/IntegratedSelectorButton

☑ Style TODO

• SelectorButton(Dark,White 통합) 공통 컴포넌트