GithubHelp home page GithubHelp logo

bingo_web's Introduction

Bingo_WEB

PARD 2기 롱커톤 [3!4!]

[백엔드] (https://github.com/Club-PARD/Bingo_SERVER)

팀 회고 서비스, BINGO

‘빙고’는 팀의 발전과 성장을 위한 회고 아카이빙 웹사이트입니다.

회고 방법론 추천과 세부 질문 설정 기능을 포함한 가이드라인을 제공하여 팀원들이 보다 쉽고 구체적으로 프로젝트를 돌아보며 회고 답변을 작성할 수 있도록 합니다.

팀원들의 답변을 한 페이지에 취합하고, 답변을 바탕으로 키워드를 추출하여 보다 객관적이고 직관적인 회고 결과를 얻을 수 있도록 합니다.

워크 스페이스 기능을 통해 프로젝트의 회고 기록을 아카이빙 하여 팀원들이 원하는 시기에 원하는 회고 결과를 찾아볼 수 있도록 합니다.

BINGO 팀원 소개

개발자

종류
멤버
멤버
멤버
멤버
Photo
Name 김광일 김용현 이지윤 윤성현
PART WEB WEB WEB SERVER
Age 23 26 23 21

디자이너 & 기획자

종류
멤버
멤버
멤버
Name 김수아 이하영 박하은
PART DESIGN DESIGN PM
Age 23 22 25

서비스 소개

1️⃣ 개요

‘빙고’는 팀의 발전과 성장을 위한 회고 아카이빙 웹사이트입니다.

회고 방법론 추천과 세부 질문 설정 기능을 포함한 가이드라인을 제공하여 팀원들이 보다 쉽고 구체적으로 프로젝트를 돌아보며 회고 답변을 작성할 수 있도록 합니다.

팀원들의 답변을 한 페이지에 취합하고, 답변을 바탕으로 키워드를 추출하여 보다 객관적이고 직관적인 회고 결과를 얻을 수 있도록 합니다.

워크 스페이스 기능을 통해 프로젝트의 회고 기록을 아카이빙 하여 팀원들이 원하는 시기에 원하는 회고 결과를 찾아볼 수 있도록 합니다.

2️⃣ 핵심 기능

  1. 회고 생성

    : 팀원들이 구체적인 회고 답변을 작성할 수 있도록 회고 진행자에게 회고의 기본적인 가이드라인 설정의 기회를 제공합니다.

    1. 회고 방법론 선택

      : 가장 사용 빈도가 높은 세 가지 회고 방법론을 사용할 수 있는 템플릿을 제공하고, 각 방법론의 설명과 추천 대상을 제공합니다.

      • KPT / 4L / 5F
    2. 세부 질문 설정 기능

      : 회고 방법론의 항목을 바탕으로, 더욱 구체적이고 체계적인 회고를 작성할 수 있도록 팀 맞춤형 질문을 설정할 수 있도록 합니다.

  2. 회고 작성

    : 팀이 통일성 있는 답변을 작성할 수 있도록 회고 작성의 가이드라인을 제공하고, 팀에 대한 회고를 보다 쉽게 진행할 수 있도록 칩 형태의 선택지를 제공합니다.

    1. 회고 작성 템플릿 제공

      : 회고 진행자가 미리 작성한 회고 템플릿을 제공하여 참여자가 질문에 따라 답을 작성하면 회고가 완성되도록 합니다.

    2. 팀 이밸류에이션 질문 및 선택지 제공

      : 팀에 대한 객관적 회고가 가능하도록 질문을 제공하고, 회고 작성의 피로도를 낮추기 위해 세계 최대 취업정보 검색엔진 Indeed의 ‘좋은 팀을 위한 9가지 가치’를 칩 형태의 선택지로 제공합니다.

  3. 결과 조회

    : 작성된 회고 답변을 질문 별로 모아 조회할 수 있도록 하여 팀의 발전을 위한 방향을 설정할 수 있는 기회를 제공합니다.

    1. 팀원 회고 답변 조회

      : 따로 취합할 필요 없이, 팀원이 작성한 회고 답변을 한 페이지에 모으고 질문 별로 답변을 분류하여 팀의 회고 결과를 보여줍니다.

    2. 팀 이밸류에이션 결과 빙고 형태 제공

      : 팀에 대한 회고를 진행하며 선택했던 답변들을 빙고 형태로 보여줌으로써, 이미 달성하고 있는 것에 대해서는 앞으로도 달성할 수 있도록, 아직 달성하지 못한 것에 대해서는 앞으로 달성할 수 있도록 동기부여를 제공합니다.

3️⃣ 세부 기능

  1. 워크 스페이스

    : 하나의 팀이 하나의 회고 작업 공간을 가져 문서 생성과 결과 누적을 쉽게 진행할 수 있도록 워크 스페이스를 제공합니다.

    1. 워크 스페이스 생성
      • 팀 사진 / 이름 / 설명 입력
    2. 워크 스페이스 조회
      • 팀 사진 / 이름 노출

4️⃣ 기대효과

As-is To-be
회고를 진행할 때 어떤 내용을 나눠야 할지 막막하다. 회고를 진행할 때 나눌 내용을 쉽고 빠르게 작성할 수 있다.
우리 팀에게 어떤 회고 방법이 가장 적합한지 모르겠다. 우리 팀에게 가장 적합한 방법으로 회고를 진행할 수 있다.
프로젝트에서 어떤 일이 진행되었는지는 알고 있으나, 어떤 태도로 임했는지는 정확히 알기 어렵다. 프로젝트의 과정과 결과 뿐만 아니라 임한 태도 역시 객관적으로 알 수 있다.
팀의 회고 결과를 보기 위해, 팀원 개인의 회고 결과를 취합하는 시간과 수고가 많이 들어간다. 회고 직후, 팀원 개인의 회고 결과가 취합된 팀의 회고 결과를 한 눈에 빠르게 확인할 수 있다.
  1. 회고를 쉽고 구체적으로 답변할 수 있도록 하여, 회고 작성 경험이 긍정적인 경험이 되도록 합니다.
  2. 회고의 결과를 한눈에 빠르게 파악할 수 있도록 하여, 팀 회고 결과 취합으로 인한 사용자의 피로가 줄어들도록 합니다.
  3. 회고의 기록을 각 워크 스페이스 내에서 볼 수 있도록 아카이빙 하여, 지나간 회고를 빠르게 찾아 성장 정도를 쉽게 비교할 수 있도록 합니다.

서비스 화면

온보딩 화면

  • 사용자가 처음으로 볼 화면입니다.
온보딩

로그인 화면

  • 로그인 화면입니다.
로그인

프로젝트 목록

  • 로그인 직후 화면입니다. 사용자의 계정에 저장된 모든 프로젝트들을 볼 수 있습니다.
로그인 직후

프로젝트 생성

  • 프로젝트 생성 모달창입니다. 이름/설명/이미지를 추가해 새 프로젝트를 생성할 수 있습니다.
워크스페이스 추가 워크스페이스 추가 직후 워크스페이스 내부

회고 생성

  • 회고 생성 화면입니다. 이름과 회고 템플릿 선택 후 질문을 작성하는 것으로 회고를 생성합니다.
회고 템플릿 만들기 회고 만들기 회고 템플릿 만든 직후

초대 코드 확인

  • 프로젝트 세부 화면의 버튼을 통해 다른 사용자를 초대할 수 있는 코드(난수)를 확인하고, 클립보드에 복사해 사용할 수 있습니다.
초대코드 복사

초대 코드 사용

  • 프로젝트 리스트 화면의 초대 코드 입력창을 통해 새 프로젝트에 참여할 수 있습니다. 이 경우 회고 생성 기능은 제한됩니다.
초대코드 입력

회고 작성

  • 이전에 생성한 질문을 바탕으로 답변을 적고, 팀 평가를 위해 9가지 선택지 중 하나를 고르는 것으로 회고를 작성합니다.
회고 내용 작성 팀 평가 작성

회고 작성 여부 확인

  • 프로젝트 내부에 존재하는 회고들 중, 유저가 작성하지 않은 회고가 있다면 작성 버튼을 강조해 확인할 수 있습니다.
획고를 만든 후

파일 구조

src
 ┣ Api
 ┃ ┣ AuthApi.js
 ┃ ┣ BingoBoard.js
 ┃ ┣ Evaluation.js
 ┃ ┣ Retrospace.js
 ┃ ┗ Workspace.js
 ┣ Components
 ┃ ┣ NormalComponents
 ┃ ┃ ┣ Etc.js
 ┃ ┃ ┣ Form.js
 ┃ ┃ ┣ Section.js
 ┃ ┃ ┗ Text.js
 ┃ ┣ PageMovements
 ┃ ┃ ┣ Drawer.js
 ┃ ┃ ┗ Sidebar.js
 ┃ ┗ test
 ┃ ┃ ┗ testThemePage.js
 ┣ Contexts
 ┃ ┣ Atom.js
 ┃ ┗ EditorContext.js
 ┣ ETC
 ┃ ┗ DrawerBtn.js
 ┣ Layout
 ┃ ┣ Breadcrumb.js
 ┃ ┣ Header.js
 ┃ ┗ TopMenueBar.js
 ┣ Pages
 ┃ ┣ Login
 ┃ ┃ ┣ Intro
 ┃ ┃ ┃ ┗ index.js
 ┃ ┃ ┣ UserApprove
 ┃ ┃ ┃ ┣ RadioBtn.js
 ┃ ┃ ┃ ┗ index.js
 ┃ ┃ ┣ GoogleLogin.js
 ┃ ┃ ┗ LoginPage.js
 ┃ ┣ Retrospect
 ┃ ┃ ┣ Components
 ┃ ┃ ┃ ┣ Chips.js
 ┃ ┃ ┃ ┣ Editor.js
 ┃ ┃ ┃ ┣ RetroWrite.js
 ┃ ┃ ┃ ┣ RetrospectViewer.js
 ┃ ┃ ┃ ┣ RetrospectWriteText.js
 ┃ ┃ ┃ ┗ TeamEvaluation.js
 ┃ ┃ ┣ RetrospectCreate.js
 ┃ ┃ ┣ RetrospectList.js
 ┃ ┃ ┣ RetrospectView.js
 ┃ ┃ ┣ RetrospectViewerPage.js
 ┃ ┃ ┗ RetrospectWrite.js
 ┃ ┣ Test
 ┃ ┃ ┣ CrudAdd.js
 ┃ ┃ ┣ CrudList.js
 ┃ ┃ ┣ CrudUpdate.js
 ┃ ┃ ┣ CrudView.js
 ┃ ┃ ┣ PI_Test.js
 ┃ ┃ ┗ PI_Test2.js
 ┃ ┗ Workspace
 ┃ ┃ ┣ Components
 ┃ ┃ ┃ ┗ RetrospectInWorkspace.js
 ┃ ┃ ┣ WorkspaceList
 ┃ ┃ ┃ ┣ Components
 ┃ ┃ ┃ ┃ ┗ WorkspaceCard.js
 ┃ ┃ ┃ ┗ index.js
 ┃ ┃ ┣ WorkspaceCreate.js
 ┃ ┃ ┗ WorkspaceView.js
 ┣ Preset
 ┃ ┣ Retrospect
 ┃ ┃ ┣ RetrospectCreatePreset.js
 ┃ ┃ ┣ RetrospectCreatePresetStyle.js
 ┃ ┃ ┗ tempCodeRunnerFile.js
 ┃ ┣ WorkspacePreset
 ┃ ┃ ┣ BingoBoard.js
 ┃ ┃ ┗ WorkspaceCreatePreset.js
 ┃ ┗ LoginPreset.js
 ┣ Theme
 ┃ ┗ testTheme.js
 ┣ assets
 ┃ ┗ Img
 ┃ ┃ ┣ Home
 ┃ ┃ ┃ ┣ close.png
 ┃ ┃ ┃ ┣ homeimg.png
 ┃ ┃ ┃ ┗ logo.jpg
 ┃ ┃ ┣ Login
 ┃ ┃ ┃ ┣ Intro.png
 ┃ ┃ ┃ ┣ IntroBtn.png
 ┃ ┃ ┃ ┣ Onboard.png
 ┃ ┃ ┃ ┗ Reddot.png
 ┃ ┃ ┣ Retrospect
 ┃ ┃ ┃ ┣ DDL.png
 ┃ ┃ ┃ ┗ DDR.png
 ┃ ┃ ┣ Sidebar
 ┃ ┃ ┃ ┣ account_circle.png
 ┃ ┃ ┃ ┗ material-symbols_home-outline.png
 ┃ ┃ ┣ TopMenuBar
 ┃ ┃ ┃ ┗ Logo.png
 ┃ ┃ ┣ UserApprove
 ┃ ┃ ┃ ┣ LogoCircle.png
 ┃ ┃ ┃ ┗ LogoUserApprove.png
 ┃ ┃ ┣ WorkspaceList
 ┃ ┃ ┃ ┣ FileUpload.png
 ┃ ┃ ┃ ┣ Logo_Circle.png
 ┃ ┃ ┃ ┣ Workspace_Banner.png
 ┃ ┃ ┃ ┣ add.png
 ┃ ┃ ┃ ┣ arrow_upward.png
 ┃ ┃ ┃ ┣ close.png
 ┃ ┃ ┃ ┗ post3.jpg
 ┃ ┃ ┣ WorkspaceView
 ┃ ┃ ┃ ┣ arrowPink.png
 ┃ ┃ ┃ ┣ arrowRed.png
 ┃ ┃ ┃ ┣ arrow_forward.png
 ┃ ┃ ┃ ┣ content_copy.png
 ┃ ┃ ┃ ┗ ph_plus-bold.png
 ┃ ┃ ┣ IntroBackground.jpeg
 ┃ ┃ ┗ test1.png
 ┣ fonts
 ┃ ┣ _____(OTF) 100.otf
 ┃ ┣ _____(OTF) 110.otf
 ┃ ┣ _____(OTF) 120.otf
 ┃ ┣ _____(OTF) 140.otf
 ┃ ┣ _____(OTF) 160.otf
 ┃ ┗ _____(OTF) 180.otf
 ┣ App.css
 ┣ App.js
 ┣ App.test.js
 ┣ Router.js
 ┣ Sidebar.js
 ┣ fbase.js
 ┣ font.css
 ┣ index.css
 ┣ index.js
 ┣ logo.svg
 ┣ reportWebVitals.js
 ┗ setupTests.js

Built With

Frontend

Backend

Cooperation


ETC

bingo_web's People

Contributors

cocomong98 avatar caaaaarroooot avatar pangil5634 avatar

Stargazers

 avatar  avatar

bingo_web's Issues

상태 관리 방법

상태 관리에 대해서 정해야 할 필요가 있음

  • 본격적으로 구현에 들어가기 앞서, 선배님 피드백에서도 들었듯이 상태관리 도구를 정해야 함

  • 현재로서는 배운 것이 Context 뿐이라 임시로 Contexts 폴더를 만들어 넣어두었지만 추후 회의를 통해 변경 가능

Sidebar 적용 여부

현재 시험적으로 사이드바를 적용하였음

  • 로그인 페이지를 제외하고 적용
  • 버튼 클릭과 드래그 모두 활성화 한 상태
  • 사이드바 안에는 개인 프로필과 navigation을 넣을 계획

추후 사용여부에 대해서는 기디개 모두가 모인 자리에서 논의해야 한다고 판단

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.