토이프로젝트2_3조_sweety #7
Conversation
선언되었지만 사용하지 않는 변수 error -> warning
채팅 섹션 내에 Header 추가
채팅 페이지 레이아웃을 구현한다
…ion-bar 네비게이션바 아이콘 활성화 기능을 수정한다.
…Modal 공통 유저 프로필 상세보기 모달을 구현한다.
홈레이아웃 수정을 완료한다.
파이어베이스 설정 및 환경변수 설정을 분리한다.
feature/layout 브랜치를 dev 브랜치에 병합시킨다.
sh: line 1: +: command not found
채팅방 미선택 시 버튼(대화상대, 채팅방 나가기)을 비활성화한다
…2--feature/deploy/community
홈 화면에서의 버그를 수정한다.
Kan 52 feature/deploy/community
…7--feature/deploy
README.md를 업데이트한다.
Feat: 유저 목록 불러오기 및 간단한 css
게임 방 생성, 게임 방 입장, 게임 방 내 4명 입장 시 block 처리
|
|
||
| useEffect(() => { | ||
| checkLoginStatus(); | ||
| }); |
There was a problem hiding this comment.
의존성 배열은 추가하는게 좋습니다. 로그인 status 검사는 최초 렌더링시에만 확인하면 될 것이라고 생각됩니다. 빈배열을 의존성 배열로 추가하면 좋을 것 같습니다.
| updatedAt: Date; | ||
| } | ||
|
|
||
| interface User { |
There was a problem hiding this comment.
User는 위에 타입이 지정되어있는데 추가로 지정하신 이유가 궁금합니다 .
| setShowToastMsg: (value: boolean) => void; | ||
| setToastMsg: (content: string) => void; | ||
| }) => { | ||
| const [userModal, setUserModal] = useState(false); |
There was a problem hiding this comment.
타입스크립트를 조금 더 타이트하게 사용하려면 useState에도 타입을 지정해주는게 좋습니다.
ex. useState<boolean>(false)
| }; | ||
|
|
||
| const response = await axios.post<MakeChattingResponse>( | ||
| "https://fastcampus-chat.net/chat", |
There was a problem hiding this comment.
url은 상수로 두어 재사용하는게 좋습니다. 엔드포인트 같은 경우는 은닉하는것도 좋습니다.
| navigate("/community"); | ||
| }; | ||
|
|
||
| const fetchData = async () => { |
| createdAt: 0, | ||
| }); | ||
|
|
||
| const handleChange = (e: React.ChangeEvent) => { |
There was a problem hiding this comment.
React.ChangeEvent 타입지정을 조금 더 타이트하게 해볼 수 있습니다.
|
|
||
| return ( | ||
| <Container> | ||
| <SweetLogo onClick={() => navigate("/")} style={{ cursor: "pointer" }} /> |
There was a problem hiding this comment.
inline javascript, inline style은 사용을 지양하는 것이 좋습니다.
최대한 모듈화하여 재사용할 수 있는지 생각해보면 좋을 것 같습니다.
| /> | ||
| {id ? ( | ||
| isIdentificationValid(id) === true && isIdDuplicated === true ? ( | ||
| <WarnText>이미 사용중인 아이디 입니다😢</WarnText> |
There was a problem hiding this comment.
WarnText 해당 컴포넌트를 재사용하는 것은 좋아보입니다.
그런데 <WarnText>{ text }</WarnText> 방식으로 여러번 사용되고 있습니다.
const renderWarnText = (text: string) => {
return <WarnText>{text}</WarnText>
}이런식으로 함수로 만들어서 사용하면 좋을 것 같습니다.
| } | ||
| }; | ||
|
|
||
| useEffect(() => { |
| const [showToast, setShowToast] = useState(false); | ||
| const id = sessionStorage.getItem("id"); | ||
|
|
||
| const getUserInformation = async (): Promise<void> => { |
There was a problem hiding this comment.
async await에는 try/catch로 에러핸들링을 해주는 것이 좋습니다.
🍭 Sweety
make your day more sweet!
프라이빗 채팅 서비스, "Sweety"
안녕하세요, 달콤한 만남을 통해 더 행복한 하루를 만드는 Sweety입니다 :)
Sweety는 원하는 상대와 1:1 채팅, 관심사가 같은 사람들과의 그룹 채팅 서비스를 제공합니다.
🔗 배포 링크
테스트 계정
ID: admin123PW: admin123!👩💻 역할 분담 👨💻
회원가입・로그인 페이지(API 연동), 소개 페이지 구현, 피그마 디자인, 궁합점수 계산 함수 제작
채팅 페이지(API 연동 & 소켓 통신) 구현, 프로젝트 초기 설정, 문서 정리 (팀장님)
커뮤니티 페이지(API 연동) 구현, 피그마 디자인, firebase util 함수 제작, 노션 정리
네비게이션 바, 마이 페이지(API 연동) 구현, 피그마 디자인, 회의록 정리, 리드미 작성
홈 페이지・유저 상세 프로필 모달(API 연동) 구현, 피그마 디자인, 유저 랜덤 정렬 함수 제작
✨ 구현 내용
회원가입, 로그인
[ 담당 개발자: 박성후 ]
회원가입 시 유저 유효성 검사 (아이디 중복, 탈퇴 여부) 및 유저 정보 DB 등록
회원가입 시 데이터 유효 검사 (데이터 형식)
로그인 시 유저 유효성 검사 (데이터 유효성 검사)
JWT를 이용한 유저 인증
로그아웃
홈
[ 담당 개발자: 채민석 ]
유저 프로필 리스트 조회 (이성 프로필만 조회 가능, 새로고침 시 랜덤 정렬)
유저 상세 정보 프로필 조회
유저 상세 정보를 바탕으로 클릭한 유저와의 궁합 점수 조회
1:1 채팅 생성 및 채팅방으로 이동 (채팅 기록이 있는 경우 바로 이동)
커뮤니티
[ 담당 개발자: 김다빈 ]
커뮤니티 글 리스트 조회 (최신순 정렬)
커뮤니티 글 작성
커뮤니티 글 수정・삭제 (작성한 유저만 가능)
커뮤니티 글 클릭 시 글 내용 및 유저 상세 정보 조회
그룹 채팅 생성 및 채팅방으로 이동 (채팅 기록이 있는 경우 바로 이동)
채팅
[ 담당 개발자: 윤석민 ]
채팅방 리스트 조회 시 마지막 메세지 및 수신 시간 조회
새로운 유저 입장 시 입장한 유저 알림, 채팅방 퇴장 시 퇴장한 유저 알림
채팅방에 속한 유저들의 온라인/오프라인 상태 조회
실시간 1:1 채팅 및 그룹 채팅 (소켓 통신)
채팅방 나가기
마이페이지
[ 담당 개발자: 정서현 ]
자기소개, 관심사 정보 등록
유저 프로필 정보 수정 시 유효성 검사 (회원가입과 동일)
유저 프로필 정보 수정 시 업데이트 가능 (변경사항 없을 시 disabled)
유저 프로필 정보 업데이트 (firebase, 기본 DB)
조건 만족 시 회원 탈퇴
반응형
유저 플로우
💪 필수 구현 사항
✅
useState,recoil를 활용한 상태 관리 구현✅
styled-component를 활용한 스타일 구현✅
react상태를 통한 CRUD 구현✅ 상태에 따라 달라지는 스타일 구현
✅
firebase custom hook을 통한 비동기 처리 구현✅ 유저 인증 시스템(로그인, 회원가입) 구현
✅
jwt를 이용한 유저 인증 시스템 (로그인, 회원가입)✅ 소켓을 이용한 채팅 구현
🛠️ 기술 스택
Enviroment & Config
Development (FrontEnd)
DB
Deploy
Communication