📣 프로젝트 소개

최근 양자택일을 하는 밸런스 게임이 유행하며, 다양한 커뮤니티에서 해당 주제에 대해 토론하고 의견을 나누는 모습을 종종 볼 수 있었습니다. 이러한 사용자층을 타겟으로 공식적인 밸런스 게임 토론 플랫폼을 제공하자는 취지에서 프로젝트를 제작하게 되었습니다.

🔗 배포 링크

https://balancetalk.kro.kr/

🔎 Back-end repository link

https://github.com/CHZZK-Study/Balance-Talk-Backend

👥 팀원 소개

강준우

김성현

유희선

⚙️ 기술 스택

Cowork Tools

Development

Styling

State Management

Deploy

ETC

🛠️ 주요 기능

✅ 회원가입

이메일 인증, 인증번호 확인, 닉네임 중복 확인, 비밀번호 형식 확인, 프로필 이미지 크기 확인 절차를 거쳐서 회원가입을 진행할 수 있어요.

✅ 로그인

로그인을 통해 회원이 사용할 수 있는 여러 기능들을 사용할 수 있어요.

✅ 비밀번호 찾기

비밀번호를 잊었다면 비밀번호 찾기를 통해 임시 비밀번호를 발급받을 수 있어요.

✅ 마이페이지

마이페이지에서는 활동내역 조회, 회원정보 수정, 회원 탈퇴 기능을 제공하고 있어요.

활동내역은 크게 내가 작성한 게시글 조회 및 삭제, 내가 작성한 댓글 조회, 내가 투표한 게시글 조회, 내가 북마크한 게시글 조회 및 북마크 해제 기능을 사용할 수 있어요.

✅ 투표 기능

밸런스게임 본문 페이지에서 원하는 선택지에 투표할 수 있어요.

투표 후 바로 투표 결과를 확인할 수 있어요.

✅ 좋아요 기능

마음에 드는 게시물 또는 댓글에 좋아요를 누를 수 있어요

✅ 북마크 기능

흥미있는 게시물을 북마크할 수 있어요

✅ 댓글 목록 조회 기능

페이지네이션 형식으로 댓글을 조회할 수 있어요

✅ 댓글 / 답글 작성 기능

투표를 한 회원은 댓글 및 답글을 작성할 수 있어요

댓글 작성	답글 작성

✅ 댓글 / 답글 수정, 삭제 기능

본인이 작성한 댓글 / 답글을 수정 삭제할 수 있어요

댓글/답글 수정	댓글/답글 삭제

✅ 프로필 조회 기능

프로필 이미지를 클릭하여 게시물 및 댓글 작성자의 프로필을 확인할 수 있어요

📚 아키텍쳐

Balance-Talks-frontend
├── .github                         # Feature, PR, Bug template
├── public                          # public
└── src
    ├── api                         # api 호출 Function
    ├── assets                      # fonts, images, svg resoucres
    ├── components                  # 페이지를 구성하는 components           
    ├── constants                   # api, message, pagination 및 공통적으로 사용되는 constants
    ├── hooks                       # custom hooks                        
    ├── layout                      # 프로젝트 뼈대를 구성하는 layout                         
    ├─- mocks                       # MSW를 활용한 mock data, handler                         
    ├── pages                       # Pages     
    ├── providers                   # Query Provider                                                  
    ├── store                       # Redux-toolkit을 사용한 전역 Store                         
    ├── styles                      # Global Style                         
    ├── types                       # 프로젝트 전반에 걸쳐 사용되는 Type 정의                         
    ├── utils                       # date, validator 관련 util 함수