[merge] fe -> develop

README.md

@@ -34,15 +34,15 @@
     <td align="center"><a href="https://github.com/kimhaechang1"><img src="https://avatars.githubusercontent.com/kimhaechang1" width="130px;" alt=""></a></td>
     <td align="center"><a href="https://github.com/Be-HinD"><img src="https://avatars.githubusercontent.com/Be-HinD" width="130px;" alt=""></a></td>
     <td align="center"><a href="https://github.com/Agwii"><img src="https://avatars.githubusercontent.com/Agwii" width="130px;" alt=""></a></td>
-    <td align="center"><a href="https://github.com/wkdtpwjd19"><img src="https://avatars.githubusercontent.com/wkdtpwjd19" width="130px;" alt=""></a></td>
+    <td align="center"><a href="https://github.com/wkdtpwjd"><img src="https://avatars.githubusercontent.com/wkdtpwjd" width="130px;" alt=""></a></td>
    <td align="center"><a href="https://github.com/timber3"><img src="https://avatars.githubusercontent.com/timber3" width="130px;" alt=""></a></td>
    <td align="center"><a href="https://github.com/YangGeoun"><img src="https://avatars.githubusercontent.com/YangGeoun" width="130px;" alt=""></a></td>
   </tr>
   <tr>
     <td align="center"><a href="https://github.com/Be-kimhaechang1"><b>김회창</b></a><p><b>팀장</b><p><b>Back-end</b></p><p>매칭서버 개발</p><p>Problem Solving API 개발</p><p>인프라 구축</p></p></td>
     <td align="center"><a href="https://github.com/Be-HinD"><b>김정현</b></a><p><b>팀원</b></p><p><b>Back-end</b></p><p>아레나 게임서버 개발</p><p>알림 & 게시판 API 개발</p><p>화면공유 시스템 관리</p></p></td>
     <td align="center"><a href="https://github.com/Agwii"><b>이귀현</b></a><p><b>팀원</b></p><p><b>Front-end</b></p><p>아레나 컴포넌트 개발</p></td>
-    <td align="center"><a href="https://github.com/wkdtpwjd19"><b>장세정</b></a><p><b>팀원</b></p><p><b>Front-end</b></p><p>알림 & 게시판 컴포넌트 개발</p><p>회원 컴포넌트 개발</p></td>
+    <td align="center"><a href="https://github.com/wkdtpwjd"><b>장세정</b></a><p><b>팀원</b></p><p><b>Front-end</b></p><p>알림 & 게시판 컴포넌트 개발</p><p>회원 컴포넌트 개발</p></td>
     <td align="center"><a href="https://github.com/timber3"><b>오승현</b></a><p><b>팀원</b></p><p><b>Back-end</b></p><p>채점서버 개발</p><p>회원관리 API 개발</p></p></td>
     <td align="center"><a href="https://github.com/YangGeoun"><b>양건우</b></a><p><b>팀원</b></p><p><b>Front-end</b></p><p>Problem Solving 컴포넌트 개발</p><p>화면 공유 컴포넌트 개발</p></p></td>
   </tr>
@@ -144,139 +144,139 @@ https://www.erdcloud.com/d/nrfqSDdChRWJpanzz
 
 ![Architecture](/asset/img/Architecture.png)
 
-## 🎬 Figma Design
-
-### Main
-
-![Main](/asset/img/figma-main.png)
-<br>
-<br>
 <br>
 <br>
 
-### Login
+## 💻 주요 기능 소개
 
-![Main](/asset/img/Figma-Login.png)
 
-<br>
-<br>
-<br>
-<br>
+### 메인 화면
 
-### Community
+- 코드아레나를 대표하는 메인 페이지입니다.
+- 메인페이지에서 다양한 페이지로 접근할 수 있습니다.
+- 코드아레나에 대해 소개하고, 최신 문제와 인기 질문을 소개합니다.
 
-![Main](/asset/img/figma-community.png)
+![Main](/asset/gif/mainpage.gif)
 
-<br>
-<br>
-<br>
-<br>
 
-### Problem Solving
+### 회원가입
 
-![Main](/asset/img/figma-ps1.png)
+- 이메일을 통한 회원가입을 진행합니다.
 
-<br>
-<br>
-<br>
+![Main](/asset/gif/signup.gif)
 
-![Main](/asset/img/figma-ps2.png)
 
-<br>
-<br>
-<br>
+### 로그인
 
-![Main](/asset/img/figma-ps3.png)
+- 쉽고 간편한 로그인을 진행합니다.
 
-<br>
-<br>
-<br>
-<br>
+![Main](/asset/gif/login.gif)
 
-### Arena Main
 
-![Main](/asset/img/figma-arena.png)
+### 문제 풀이 페이지
 
-<br>
-<br>
-<br>
-<br>
+- 온라인 저지 사이트와 같이 스스로 문제 해결 능력을 기를 수 있도록 장려합니다.
 
-### MyPage
+![Main](/asset/gif/goProblem.gif)
 
-![Main](/asset/img/figma-profile.png)
 
-<br>
-<br>
-<br>
-<br>
+### 문제 풀기
 
-### Matching
+- 알고리즘 문제를 풀었다면 제출 후, 제출 현황을 확인할 수 있습니다.
+- 만약 문제를 틀렸다면, 어떤 테스트 케이스에서 틀렸는지 확인할 수 있습니다.
+- 문제에 대한 질문게시판과 문제 수정 요청을 제공합니다.
 
-![Main](/asset/img/figma-matching.png)
+![Main](/asset/gif/solvingProblem.gif)
+
 
-<br>
-<br>
-<br>
-<br>
+### 문제 카테고리
 
-### INGAME
+- 다양한 알고리즘 문제를 카테고리별로 제공합니다.
 
-![Main](/asset/img/figma-arena-ingame-1.png)
+![Main](/asset/gif/problemCategory.gif)
 
-<br>
-<br>
-<br>
-<br>
 
-### SPECTATORS
+### 문제 생성
 
-![Main](/asset/img/figma-arena-spec.png)
+- 알고리즘 문제 해결을 위한 새로운 문제를 생성합니다.
+- 문제의 내용부터 입출력 예제를 입력하고, 컴파일을 시도한 후에 제출할 수 있습니다.
+- 사이트 관리자측에서 문제를 검수하고 새로운 알고리즘 문제에 대해 업로드합니다.
 
-<br>
-<br>
-<br>
-<br>
+![Main](/asset/gif/createProblem.gif)
 
-### RESULT
 
-![Main](/asset/img/figma-game-result.png)
+### 마이 페이지
 
-<br>
-<br>
-<br>
-<br>
+- 간편한 회원 정보 수정을 제공합니다.
+- 자신의 푼 문제와 레이팅 점수 등을 확인할 수 있습니다.
 
-## 주요 기능
+![Main](/asset/gif/profile.gif)
 
-### 메인 화면
 
-![Main](/asset/gif/Main.gif)
+### 커뮤니티 게시판
 
-### 문제 풀이
+- 어려운 문제에 대해 이야기를 나눌 수 있는 커뮤니티를 제공합니다.
 
-![Main](/asset/gif/ps.gif)
+![Main](/asset/gif/community.gif)
 
-### 마이 페이지
 
-![Main](/asset/gif/Mypage.gif)
+- 누구나 자유롭게 질문 글을 작성할 수 있습니다.
+
+![Main](/asset/gif/question.gif)
+
+
+### 아레나 메인페이지
+
+- 아레나를 즐길 수 있는 페이지로 이동합니다.
+- 경쟁을 매칭하거나, 방을 찾아 다른 사람의 게임을 관전할 수 있습니다.
+- 인기 Hot Match 방을 소개합니다.
+- 각 모드별 랭킹을 제공하고, 본인의 전적을 확인할 수 있습니다.
+
+![Main](/asset/gif/arenaMain.gif)
+
+
+### 아레나 메칭 시스템
+
+- 비슷한 Rating 점수를 가진 플레이어끼리 랜덤 매칭을 실시합니다.
+- 유저는 원하는 언어, 모드를 선택하고 수락을 누르면 게임 방이 생성되어 이동합니다.
+
+![Main](/asset/gif/arena_match.gif)
+
+
+### 아레나 스피드전 모드
+
+- 아레나 스피드전 모드를 제공합니다.
+- 먼저 제출해서 맞추는 사람이 승리하는 방식입니다.
+- 시간이 모두 소요될 때까지 정답자가 나오지않는다면 무승부로 처리됩니다.
+
+![Main](/asset/gif/speed.gif)
+
+
+### 아레나 효율전 모드
+
+- 아레나 효율전 모드를 제공합니다.
+- 먼저 제출해서 맞추는 사람이 승리하는 방식과는 달리
+- 제출한 코드 중 메모리와 시간이 가장 효율적인 코드를 제출한 사람이 승리합니다.
+- 중간 채점 현황을 확인할 수 있도록 제공합니다.
 
-### 아레나 통계
+![Main](/asset/gif/eff.gif)
 
-![Main](/asset/gif/arena_main.gif)    
+![Main](/asset/gif/eff_ans.gif)
 
-### 매칭 진행
 
-![Main](/asset/gif/매칭진행.gif)
+### 아레나 게임 관전
 
-### 스피드전 진행, 화면공유 그리고 결과
+- 아레나 게임을 플레이하고있는 방을 관전할 수 있습니다.
+- 플레이어의 화면 공유를 통하여 코딩 작성을 확인할 수 있습니다.
+- 관전자들의 자유로운 소통을 위한 채팅을 제공합니다.
 
-![Main](/asset/gif/스피드전진행.gif)
+![Main](/asset/gif/observe.gif)
 
-### 효율전 진행, 중간 채점현황
 
-![Main](/asset/gif/효율게임진행.gif)
+### 아레나 게임 배팅
 
-### 관전자 배팅 및 채팅
+- 다른 플레이어들의 코딩 배틀을 관전하면서 포인트를 배팅할 수 있습니다.
+- 자기가 건 플레이어가 승리한다면 포인트를 더욱 얻을 수 있습니다.
+- 포인트 비율 참고 : 배팅 후 금액 + (배팅 금액 * (우승한 유저의 점수 + 1))
 
-![Main](/asset/gif/관전자,베팅.gif)
+![Main](/asset/gif/batting.gif)