README.md

⭕️ 반반 투표 서비스 OXOX ❌

• 기간 : 2024.07.03 ~ 2024.08.04
• 배포 URL : oxox-one.vercel.app
• Test email : test@email.com
• Test pwd : test password

👉🏻 프로젝트 소개

• OXOX는 조그만 고민들을 해결하기 위한 찬반투표 서비스입니다.
• 사진과 함께 자신의 고민을 공유하고 이에 대한 투표 및 의견을 받을 수 있습니다.
• 댓글 작성 및 해당 댓글에 리액션을 통해 고민에 공감할 수 있습니다.
• 개인의 프로필 페이지에서 작성 / 참가한 투표들을 볼 수 있습니다.

💁 팀원 구성

김민호	홍유진
@klaus9267 백엔드 개발	@ujeans 프런트엔드 개발

🛠️ 기술 스택

Front-End

🏞️ 페이지별 기능

[로그인]

• 소셜 구글 로그인
• Email, Password를 사용한 로그인
  • 회원가입된 정보와 다를 경우 경고창을 띄워주기

로그인

[회원가입]

• 소셜 로그인
• Email, Password를 사용한 회원가입
  • 유효성 검사
    • 이메일 주소의 형식
    • 비밀번호 알파벳,숫자 포함 최소 6자
    • 닉네임 20자 제한
  • 유효성 검사가 통과된 다음 버튼 활성화

회원가입

[초기화면]

• 무한스크롤이 적용된 게시글 리스트
  • 진행중인 게시글만 보여주기
• 로그인을 하지 않을 경우에는 로그인 이동 모달창 띄워주기

로그인 한 경우	로그인 안한 경우

[게시글 작성]

• 제목, 내용, 사진을 입력하여 게시글을 작성
  • 제목, 내용 둘 다 작성되어야 공유 가능
  • 사진은 파일 선택 및 드래그 앤 드롭으로 업로드 가능

게시글 작성

[상세 게시글]

• 해당 게시글에 대한 정보 보여주기
  • 게시글의 찬/반 투표 비율을 보여주기
  • 투표 종료 타이머를 보여주기 (24시간이 지나면 투표는 마감)
• 투표하기 버튼을 클릭하면 투표를 할 수 있는 모달창이 띄워주기
• 로그인을 했을 경우 댓글 목록을 볼 수 있음

상세 게시글

[투표]

• 찬성 또는 반대에 투표하기
• 이미 투표 했을 경우에도 재투표 가능

투표

[댓글]

• 댓글을 작성하기
• 댓글에 대한 리액션을 작성 및 수정
  • 리액션 종류에 따른 공감 횟수 볼 수 있음
  • 내 리액션은 강조돼서 표현

댓글

[프로필]

• 사용자의 정보를 보여주기
  • 닉네임을 수정할 수 있고 20글자를 초과할 수 없음
• 탭 메뉴를 통해 사용자가 작성한 게시글 또는 투표한 게시글 목록을 다르게 보여주기
• 로그아웃 아이콘을 클릭시 로그아웃

프로필 수정	게시글이 있을 경우	게시글이 없을 경우