[프론트] (https://github.com/Club-PARD/Bingo_WEB)
‘빙고’는 팀의 발전과 성장을 위한 회고 아카이빙 웹사이트입니다.
회고 방법론 추천과 세부 질문 설정 기능을 포함한 가이드라인을 제공하여 팀원들이 보다 쉽고 구체적으로 프로젝트를 돌아보며 회고 답변을 작성할 수 있도록 합니다.
팀원들의 답변을 한 페이지에 취합하고, 답변을 바탕으로 키워드를 추출하여 보다 객관적이고 직관적인 회고 결과를 얻을 수 있도록 합니다.
워크 스페이스 기능을 통해 프로젝트의 회고 기록을 아카이빙 하여 팀원들이 원하는 시기에 원하는 회고 결과를 찾아볼 수 있도록 합니다.
| 종류 | 멤버 |
멤버 |
멤버 |
멤버 |
|---|---|---|---|---|
| Photo |  |
 |
 |
 |
| Name | 김광일 | 김용현 | 이지윤 | 윤성현 |
| PART | WEB | WEB | WEB | SERVER |
| Age | 23 | 26 | 23 | 21 |
| 종류 | 멤버 |
멤버 |
멤버 |
|---|---|---|---|
| Name | 김수아 | 이하영 | 박하은 |
| PART | DESIGN | DESIGN | PM |
| Age | 23 | 22 | 25 |
‘빙고’는 팀의 발전과 성장을 위한 회고 아카이빙 웹사이트입니다.
회고 방법론 추천과 세부 질문 설정 기능을 포함한 가이드라인을 제공하여 팀원들이 보다 쉽고 구체적으로 프로젝트를 돌아보며 회고 답변을 작성할 수 있도록 합니다.
팀원들의 답변을 한 페이지에 취합하고, 답변을 바탕으로 키워드를 추출하여 보다 객관적이고 직관적인 회고 결과를 얻을 수 있도록 합니다.
워크 스페이스 기능을 통해 프로젝트의 회고 기록을 아카이빙 하여 팀원들이 원하는 시기에 원하는 회고 결과를 찾아볼 수 있도록 합니다.
-
회고 생성
: 팀원들이 구체적인 회고 답변을 작성할 수 있도록 회고 진행자에게 회고의 기본적인 가이드라인 설정의 기회를 제공합니다.
-
회고 방법론 선택
: 가장 사용 빈도가 높은 세 가지 회고 방법론을 사용할 수 있는 템플릿을 제공하고, 각 방법론의 설명과 추천 대상을 제공합니다.
- KPT / 4L / 5F
-
세부 질문 설정 기능
: 회고 방법론의 항목을 바탕으로, 더욱 구체적이고 체계적인 회고를 작성할 수 있도록 팀 맞춤형 질문을 설정할 수 있도록 합니다.
-
-
회고 작성
: 팀이 통일성 있는 답변을 작성할 수 있도록 회고 작성의 가이드라인을 제공하고, 팀에 대한 회고를 보다 쉽게 진행할 수 있도록 칩 형태의 선택지를 제공합니다.
-
회고 작성 템플릿 제공
: 회고 진행자가 미리 작성한 회고 템플릿을 제공하여 참여자가 질문에 따라 답을 작성하면 회고가 완성되도록 합니다.
-
팀 이밸류에이션 질문 및 선택지 제공
: 팀에 대한 객관적 회고가 가능하도록 질문을 제공하고, 회고 작성의 피로도를 낮추기 위해 세계 최대 취업정보 검색엔진 Indeed의 ‘좋은 팀을 위한 9가지 가치’를 칩 형태의 선택지로 제공합니다.
-
-
결과 조회
: 작성된 회고 답변을 질문 별로 모아 조회할 수 있도록 하여 팀의 발전을 위한 방향을 설정할 수 있는 기회를 제공합니다.
-
팀원 회고 답변 조회
: 따로 취합할 필요 없이, 팀원이 작성한 회고 답변을 한 페이지에 모으고 질문 별로 답변을 분류하여 팀의 회고 결과를 보여줍니다.
-
팀 이밸류에이션 결과 빙고 형태 제공
: 팀에 대한 회고를 진행하며 선택했던 답변들을 빙고 형태로 보여줌으로써, 이미 달성하고 있는 것에 대해서는 앞으로도 달성할 수 있도록, 아직 달성하지 못한 것에 대해서는 앞으로 달성할 수 있도록 동기부여를 제공합니다.
-
-
워크 스페이스
: 하나의 팀이 하나의 회고 작업 공간을 가져 문서 생성과 결과 누적을 쉽게 진행할 수 있도록 워크 스페이스를 제공합니다.
- 워크 스페이스 생성
- 팀 사진 / 이름 / 설명 입력
- 워크 스페이스 조회
- 팀 사진 / 이름 노출
- 워크 스페이스 생성
| As-is | To-be |
|---|---|
| 회고를 진행할 때 어떤 내용을 나눠야 할지 막막하다. | 회고를 진행할 때 나눌 내용을 쉽고 빠르게 작성할 수 있다. |
| 우리 팀에게 어떤 회고 방법이 가장 적합한지 모르겠다. | 우리 팀에게 가장 적합한 방법으로 회고를 진행할 수 있다. |
| 프로젝트에서 어떤 일이 진행되었는지는 알고 있으나, 어떤 태도로 임했는지는 정확히 알기 어렵다. | 프로젝트의 과정과 결과 뿐만 아니라 임한 태도 역시 객관적으로 알 수 있다. |
| 팀의 회고 결과를 보기 위해, 팀원 개인의 회고 결과를 취합하는 시간과 수고가 많이 들어간다. | 회고 직후, 팀원 개인의 회고 결과가 취합된 팀의 회고 결과를 한 눈에 빠르게 확인할 수 있다. |
- 회고를 쉽고 구체적으로 답변할 수 있도록 하여, 회고 작성 경험이 긍정적인 경험이 되도록 합니다.
- 회고의 결과를 한눈에 빠르게 파악할 수 있도록 하여, 팀 회고 결과 취합으로 인한 사용자의 피로가 줄어들도록 합니다.
- 회고의 기록을 각 워크 스페이스 내에서 볼 수 있도록 아카이빙 하여, 지나간 회고를 빠르게 찾아 성장 정도를 쉽게 비교할 수 있도록 합니다.
- 사용자가 처음으로 볼 화면입니다.
- 로그인 화면입니다.
- 로그인 직후 화면입니다. 사용자의 계정에 저장된 모든 프로젝트들을 볼 수 있습니다.
- 프로젝트 생성 모달창입니다. 이름/설명/이미지를 추가해 새 프로젝트를 생성할 수 있습니다.
- 회고 생성 화면입니다. 이름과 회고 템플릿 선택 후 질문을 작성하는 것으로 회고를 생성합니다.
- 프로젝트 세부 화면의 버튼을 통해 다른 사용자를 초대할 수 있는 코드를 확인하고, 클립보드에 복사해 사용할 수 있습니다.
- 프로젝트 리스트 화면의 초대 코드 입력창을 통해 새 프로젝트에 참여할 수 있습니다. 이 경우 회고 생성 기능은 제한됩니다.
- 이전에 생성한 질문을 바탕으로 답변을 적고, 팀 평가를 위해 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
