뇌섹남녀 프로젝트

'뇌섹남녀'는 문제적남자 프로그램에 나온 다양한 문제를 풀 수 있는 웹 사이트입니다.

프로젝트 소개

뇌섹남녀는 TV 프로그램 '문제적남자'들의 문제를 다른 사람들과 경쟁하며 문제의 정답을 맞추는 사이트입니다. 이 사이트는 다양한 주제의 문제를 통해 사용자들이 두뇌를 훈련할 수 있습니다.

뇌섹남녀의 주요 기능은 다음과 같습니다:

1. 문제 풀기: 다양한 주제와 난이도의 문제를 통해 문제 해결 능력을 향상시킬 수 있습니다. 사용자들은 정답을 제출하여 자신의 성적을 확인할 수 있습니다.
2. 경쟁하기: 정답 도출 시간으로 다른 사용자들과 경쟁할 수 있습니다. 랭킹 시스템을 통해 자신의 순위와 다른 사용자들과의 경쟁 상황을 확인할 수 있습니다. 또한, 친구들과의 그룹 경쟁도 가능합니다.
3. 커뮤니티: 사용자들은 문제에 대해 토론하고 의견을 공유할 수 있는 커뮤니티 기능을 활용할 수 있습니다. 다른 사용자들과의 소통을 통해 서로의 생각을 나누고 정답 풀이를 공유할 수 있습니다.

수정 사항

1차 완성 후 개선할 점

• 퀴즈 페이지 : 시작 버튼 추가, 랭킹시스템 도입, 다음 문제 버튼 추가, 퀴즈 다양화
• 마이페이지 추가하기
• 회원이 직접 퀴즈 추가하기
• 로그인 페이지에서 홈이나 뒤로가기 버튼 추가하기

수정된 사항

• 검색 결과 수정: 검색어 입력 값에 따라 결과가 나오는 방식에서 엔터를 눌러야 결과가 나오는 방식으로 수정
• 공지사항 권한 설정: 게시판의 공지사항을 관리자만 작성할 수 있도록 수정
• 마이페이지 추가 (정보수정, 회원탈퇴)
• 메인 페이지의 gsap 수정
• css 반응형 수정
• 퀴즈 페이지 수정: 퀴즈 페이지의 시작 버튼을 클릭할 시 타이머가 시작되면서 문제가 노출되도록 수정 및 정답 제출 시간을 토대로 랭킹 시스템 도입
• 정답 입력 값 수정: 사용자의 정답이 대문자, 소문자 구분없이 처리되도록 수정

서비스 아키텍쳐

• Tech Stack : html, css, JavaScript, PHP, gsap

주요 기능

• 통합 검색 : 검색을 통해 원하는 퀴즈를 검색해서 풀 수 있습니다.
• 퀴즈 : 문제적 남자에 나오는 다양한 퀴즈를 풀어볼 수 있습니다.
• 랭킹 : 문제를 푸는데 걸리는 시간을 다른 사람의 시간과 비교하여 랭킹을 알 수 있습니다.
• 좋아요 : 마음에 드는 퀴즈에 좋아요를 누를 수 있습니다. 좋아요를 많이 받은 퀴즈만 풀어볼 수 있습니다.
• 찜목록 : 좋아요를 누르면 찜목록에 저장되어 그 문제들만 풀어볼 수 있습니다.
• 커뮤니티 : 로그인을 하면 사진과 함께 글을 작성해서 올릴 수 있습니다.
• 댓글 : 커뮤니티에 댓글을 작성할 수 있습니다.
• 마이페이지 : 회원가입시 입력했던 정보들을 수정할 수 있고, 회원 탈퇴를 할 수 있습니다.

랭킹

랭킹 시스템을 도입하여 사용자들에게 경쟁 요소를 제공합니다. 이를 통해 문제 풀이 시간을 단축하는 동기부여를 제공합니다.  
랭킹 시스템은 사용자들의 문제 해결 속도와 정확성을 기반으로 작동합니다. 사용자들은 문제를 푸는 동안 소요된 시간과 정답 여부에 따라 점수를 획득합니다.  
문제별로 사용자가 몇 초만에 풀었는지를 표시하여 문제 하단에 1, 2, 3등이 표시되고  전체 푼 사람들 중 사용자의 순위가 몇 위인지 알 수 있습니다.  
문제 풀이 시간은 퀴즈 제작시 입력한 timeLimit에서 타이머의 남은 시간을 빼서 나온 값을 사용자가 문제를 푼 시간으로 계산하여 테이블에 값을 할당하는 방식입니다.  
그 후 해당 문제를 푼 사람들의 값을 비교하여 순위를 산출합니다.

좋아요

좋아요 버튼을 클릭하면 하트가 추가되어 클릭한 것을 시각적으로 알 수 있으며, 수정 전에는 취소가 불가능 했지만 한번 더 클릭 시 취소가 됩니다.

프로젝트 후기

코딩 자체가 처음이라서 개발이 많이 낯설어서 팀에 도움이 많이 못 되어 아쉽습니다.
PHP가 어려워서 css 위주의 작업을 주로 했고, 좋아요 시각적 표시나 검색 결과 값, 공지사항 권한 설정 등 작은 부분들을 수정했습니다.
다음 프로젝트에서는 더 많은 기능을 구현할 수 있도록 공부를 많이 해야겠다고 생각했습니다.