Git Product home page Git Product logo

42gg.client's Introduction


42GG_neon_logo

프로젝트 소개

42 서울 내에서 탁구 경기 매칭, 전적 서비스를 제공하는 프로젝트 입니다.

🔸 Kakao 계정으로 로그인한 유저는 매칭/전적 서비스를 이용할 수 없습니다! 🔸

🔹 42 계정으로 로그인한 유저는 모든 기능 이용 가능! 🔹


Front-end 기술 스택


프로젝트 사이트 주소

42gg.kr


멤버

1기

역할 LEAD🐰 🐻 PM 🦁 🐨 🐤
이름 배재영 @jabae 김대현 @daekim 박수정 @sujpark 박기선 @kipark 김지현 @jihyukim

2기

역할 LEAD🐱 🐬 🔥 PO🐙 🐣
이름 정래현 @rjeong 임형우 @him 김성욱 @sungwook 송문혁 @mosong 정다인 @daijeong

3기, 4기

역할 LEAD🐧 🌚 🥨 🦥
이름 윤정연 @jeyoon 박형준 @hyungjpa 박상민 @sangmipa 조효빈 @hyobicho

5기

역할 LEAD🐧 🌚 🥨
이름 김재혁 @jaehyuki 전준호 @junhjeon 박진철 @jincpark

6기

역할 LEAD🐧 Party detail room 개발 Party admin 개발
이름 정우진 @woojeong 하주영 @juha 원재윤 @jaeywon

주요 기능 소개

🔐 42 OAuth, Kakao OAuth api를 통해 로그인할 수 있습니다.

Login_main     Login_42     Login_kakao

🙋‍♂️ 출석을 통해 코인을 획득할 수 있습니다.

Attendance     Attendance_gif

🏓 메인페이지에서 Party모집, 탁구 랭킹, 최근 경기를 확인할 수 있습니다.

Main_Main     Main_Menu     Main_Noti

💃 매치페이지에서 나와 비슷한 실력의 상대와의 경기를 매칭할 수 있습니다 🕺

🏓 Play 아이콘을 클릭해 매치 페이지로 이동해 보아요! 최대 3개의 슬롯을 예약할 수 있습니다.

Match_Main     Match_1
Match_2     Match_3     Match_4

🏓 3가지 모드로 경기를 즐길 수 있어요!

Match_Both     Match_Normal     Match_Rank

📝 경기가 끝난 후 점수를 입력해서 기록을 남기고 코인을 획득하세요!

Score_Input     Score_Check     Score_Result

🥇 랭킹을 확인할 수 있습니다

Rank_PPP     Rank_VIP

🏦 상점 페이지에서 아이템을 구매하고 사용할 수 있습니다

Store_Main     Store_Inventory

🧳 프로필 변경권, ID 색깔 변경권, 확성기, EDGE 뽑기, 배경 뽑기를 사용할 수 있습니다

Item_Profile     Item_Idcolor     Item_Edge     Item_Background     Item_Megaphone

🎲 뽑기 애니메이션도 있어요

Gacha_Background     Gacha_Edge

💰 본인의 코인 내역도 확인할 수 있습니다

Store_CoinClick     Store_CoinHistory

🏓 개최된 토너먼트에 참가 신청을 할 수 있습니다

Store_CoinHistory     Store_CoinHistory

🏓 진행중인 토너먼트를 실시간으로 확인 할 수 있습니다

Store_CoinHistory

🏆 명예의 전당에서 토너먼트 우승자들을 확인 할 수 있어요!

Store_CoinHistory     Store_CoinHistory

🔥 최근 경기들을 확인할 수 있습니다

RecentGame_Both     RecentGame_Normal     RecentGame_Rank

🧑 유저페이지에서 유저 정보를 확인할 수 있습니다.

👤 나의 PPP(Ping Pong Power) 변화 그래프와 최근 경기 기록을 확인할 수 있어요!

Profile_Graph     Profile_Record

👤 상태메시지와 라켓 종류를 변경해보아요!

Profile_Edit     Profile_Edit2

👤 42 계정과 Kakao 계정을 연동할 수 있어요!

Profile_Connect_Kakao     Profile_Connect_42

⏰ 42 intra에 등록된 이메일을 통해 알림을 받을 수 있습니다

email

🧑‍🤝‍🧑 파티 리스트 페이지에서 현재 생성된 방을 한 눈에 볼 수 있습니다.

party list page

🧑‍🤝‍🧑 파티 방을 만들 때도 카테고리 선택 후 방을 생성할 수 있습니다.

party category party create room

🧑‍🤝‍🧑  누구나 쉽게 친구 또는 익명의 사용자와 Party를 맺을 수 있어요!

방장 화면 팀원 화면 유저 화면
party manager page party member page party user page


42gg.client's People

Contributors

yoouyeon avatar pearpearb avatar phjoon avatar tamagoyakii avatar hyobb109 avatar kimdae-hyun avatar su1715 avatar mike2ox avatar arkingco avatar greatsweetmango avatar 42sungwook avatar raehy19 avatar izone00 avatar contemplation-person avatar mantoing avatar wilbur0306 avatar clearsu avatar parksangmin1543 avatar hyeongwooim avatar joonho0410 avatar

Stargazers

spark2 avatar hannkim avatar Hyobum Lee avatar 신준서 avatar 신재훈 avatar jinyoung avatar Park SangHyun avatar avatar Francis Feaugas avatar avatar avatar avatar avatar yoahn avatar Bomi Kim (Blu) avatar Jaewoo Park avatar NamJun Heo avatar HIHO avatar Sion Shin avatar avatar avatar avatar avatar Nayeon Kim (Jupi) avatar Ryu(Paul) avatar nfukada avatar Devicii avatar JaehwanKim avatar avatar DongHun Ha avatar avatar

Watchers

avatar

Forkers

koreaparksh 42organization cfcf26 parksangmin1543 littletwigs 42sungwook yoouyeon yhames

42gg.client's Issues

[Feat] 랭킹 페이지

ISSUE

  • Type: feature
  • Detail: 랭킹 컴포넌트, 리스트 만들기

TODO

  • 랭킹 컴포넌트 만들기
  • 랭킹 리스트 만들기

[Feat] 매치 페이지

ISSUE

  • Type: feature

유저들의 게임을 매칭해주는 매치페이지 제작

Naming
페이지 : pages/match
매치템플릿 : MatchBoardList.tsx
매치테이블 : MatchBoard.tsx (table 로 하면 탁구테이블과 이름이 겹쳐서 Board로)
매치슬롯 : MatchItem.tsx
매치등록모달 : MatchEnrollModal.tsx
현재 매치 정보 : CurrentMatchInfo.tsx

TODO

매칭

  • 매칭 등록 모달 (MatchEnrollModal)
    • 구성
    • style
  • 매칭 테이블 리스트(MatchBoardList)
    • 구성(with dummy data)
    • API
    • style
  • 시간별 매칭 테이블(MatchBoard)
    • 구성(with dummy data)
    • style
  • 매칭 아이템 (MatchItem)
    • 구성(with dummy data)
    • style

현재 매칭 정보

  • 현재 매칭 정보
    • 구성 (with dummy data)
    • API
    • style

[Feat] 로그인 페이지 구현

ISSUE

  • Type: feature
  • Detail: 로그인 페이지 구현

TODO

  • 로그인 페이지 구현
  • 메뉴바 로그아웃 버튼 기능
  • Oauth를 통해 token 받아오기
  • axios.interceptor를 사용하여 헤더에 token 추가하여 back으로 넘겨주기

[Feat] 디자인 적용하기

ISSUE

  • Type: feature
  • Detail: 모든 페이지 디자인 적용

TODO

  • Layout

    • Header
    • Footer
    • Menubar
    • NotiBar
    • Layout
    • CurrentMatchInfo

  • index(main)

    • searchBar
    • section

  • login

  • match

    • MatchBoardList
    • MatchBoard
    • MatchItem

  • rank

    • RankList
    • RankItem
    • MyRank
    • Pagination

  • users

    • Chart
    • EditProfile
    • Profile

  • game

  • modal

    • Modal
    • InputScoreModal
    • MatchEnrollModal
    • LogoutModal
    • MatchCancelModal

[Feat] 게임 결과 페이지

ISSUE

  • Type: feature
  • Detail: 게임 결과 페이지 만들기

TODO

  • 경기 컴포넌트 리스트 페이지 만들기
  • 컴포넌트 리스트에서 props전달 받고 출력하기
  • 입력 개수만큼 리스트로 출력하기
  • 경기 컴포넌트 데이터 NextApi로 바꾸기
  • 경기 컴포넌트에 시간 추가

[Fix] 매치 관련 모달창 동작 에러 처리

ISSUE

  • Type: fix

TODO

  • 시간이 지난경우, 매칭이 완료된 경우, 5분 이내인 경우, 경기가 시작된 경우 등 에러처리
  • 매치 등록 시 새로고침을 하지 않아 발생하는 문제 해결
  • 매치 취소 시 새로고침을 하지 않아 발생하는 문제 해결

[Feat] 유저 페이지

ISSUE

  • Type: feature
  • Detail: 유저페이지
  1. 프로필
  2. 내 ppp 그래프
  3. 내 전적 리스트

TODO

  • 프로필
    • 구성
    • api 연결
    • sass
  • 프로필 수정
    • 구성
    • api 연결
    • sass
  • ppp 그래프
    • 구성
    • api 연결
    • sass
  • 내 전적 리스트
    • 구성

[Fix] 서버 API 수정사항 반영하기

ISSUE

  • Type: fix

TODO

  • Layout
    • GET /pingpong/users/live
    • data: event 추가, gameId 삭제
  • Main
    • GET /pingpong/users/searches?q=”userId”
  • Score
    • GET /pingpong/games/result
    • POST /pingpong/games/result
  • User
    • editprofile : PUT요청시 body에서 userImageUri 삭제
    • editprofile : 수정요청시 userId 없어도 됨
  • Match
    • GET /pingpong/match/tables/{tableId}/{type}
    • POST /pingpong/match/tables/{tableId}/{type}
    • DELETE /pingpong/match/slots/{slotId}

[Feat] MatchBoardList에 스크롤 추가

ISSUE

  • Type: feature
  • Detail:
    기존 : MatchBoardList 에서 시간 지난 MatchBoard 필터링해서 띄움
    수정 : MatchBoardList 에 스크롤 추가하고, 현재 시간에 해당하는 MatchBoard 로 자동 스크롤

TODO

  • 스크롤 추가
  • useRef 로 자동 스크롤

[Feat] 매치 5분전 취소 불가 모달구현

ISSUE

  • Type: feature

TODO

  • 매치 5분전 취소 불가 모달구현
  • CurrentMatchInfo에 적용
  • Match 페이지 내 매치에 적용
  • 매치 모달이 얽혀 있으므로 다른 안내 모달들과 겹치거나 에러 없는지 최종 확인하기

[Feat] 애니메이션 구현

ISSUE

  • Type: feature
  • Detail: 애니메이션 구현

TODO

  • css 로딩중 애니메이션 구현
  • 경기 결과 wait 애니메이션 구현
  • 매치 찾는중 애니메이션 구현
  • 알람 애니메이션 구현
  • 새로고침 애니메이션 구현
  • 알림바 새로고침 애니메이션 구현
  • 게임 끝난 뒤 경험치 바 상승 애니메이션 구현

[Feat] 레이아웃, 헤더, 메뉴바, 알림바 만들기

ISSUE

  • Type: feature
  • Detail: 헤더, 매칭, 푸터 레이아웃 만들기

TODO

  • 헤더 만들기
    • 메뉴바 만들기
    • 알림바 만들기
      • 알림바의 상대 이름 클릭시 상대 전적 페이지로 이동
    • #15
  • 매칭버튼 만들기(클릭시 매칭 페이지)
  • 푸터 만들기

[Feat] 메인페이지 만들기

ISSUE

  • Type: feature
  • Detail: 메인페이지 만들기

TODO

  • 메인페이지 Next js API 생성 및 연결하기
    • 최근 경기 기록
    • 랭킹 정보
    • 검색
  • 검색 드롭다운 구현하기
  • 페이지 구성 scss 사용해서 대략적으로 배치하기

[Feat] NextAPI 세팅

ISSUE

  • Type: feature
  • Detail: match 페이지에 NextAPI 연결하기

TODO

  • NextAPI 에 match 페이지와 관련된 API 간단하게 작성
    • 매칭테이블 조회 #14
    • 매칭 등록
    • 매칭 취소
  • msw 삭제 #14
  • axois 설치 #14
  • axois 사용함수 분리 #14

[Feat] 모달 컴포넌트 구현

ISSUE

  • Type: feature
  • Detail: 모달을 재사용할 수 있도록 컴포넌트로 분리

TODO

  • InputScoreModal 을 Modal과 InputScore 로 분리
  • InputScore 리팩토링
  • 다른 컴포넌트에도 모달 적용하기

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.