0. 배포 사이트

서비스 링크

(ctrl + 좌클릭시 새 창으로 이동이 됩니다.)

1. Project Overview (프로젝트 개요)

• 프로젝트 이름: 다솜이
• 프로젝트 설명: 대학교 기숙사 룸메이트 매칭 서비스

2. Project Purpose (프로젝트 목적)

우리 학교에서는 기숙사 룸메이트를 학생들이 직접 정하여 함께 방을 사용할 수 있습니다.
이로 인해 학교 에브리타임에서 룸메이트를 구하는 게시글을 확인할 수 있지만,
어떤 방을 구하는지, 매칭 여부 등을 한눈에 보기 어려운 점이 있습니다.


따라서 보다 성향이 잘 맞는 룸메이트를 쉽게 찾고 구할 순 없을까? 하는 생각을 시작으로 1인 서비스를 개발하였습니다.

3. Key Features (주요 기능)

• 회원가입:
  • 회원가입 시 DB에 학생 정보가 등록 됩니다.
    
  • 타대학교 학생 가입 방지를 위해 우리 학교 이메일(cu.ac.kr)로만 이메일 인증이 가능하도록 구현하였습니다.
    
    
  

• 로그인:
  • 사용자 인증 정보를 통해 로그인합니다. JWT 토큰을 통해 로그인 유지를 진행합니다.
    
    
  

• 아이디 / 패스워드 찾기:
  • 아이디 혹은 비밀번호 분실 시 이메일을 통해 찾을 수 있습니다.
    
    
  

• 메뉴 목록:
  • 로그인 후 메뉴 리스트를 볼 수 있습니다.
    
    
  

• 내 정보 관리:
  • 비밀번호 변경, 닉네임 변경 등 내 정보를 수정하거나 탈퇴할 수 있습니다.
    
    

• 룸메이트 등록하기:
  • 룸메이트를 구하기 위해 등록하기 버튼으로 나의 룸메이트 정보를 등록할 수 있습니다.
    
    
  
  
  - 룸메이트 매칭 상태를 변경할 수 있습니다. (매칭 중, 매칭 완료는 매칭 신청을 할 수 없게 구현하였습니다.)
  
  

• 룸메이트 찾기:
  • 각 관을 구분하여 등록된 룸메이트 정보들을 볼 수 있습니다.
  • 필터를 통해 원하는 정보만 볼 수 있습니다.
    
    
  

• 문의하기:
  • 실서비스를 운영하니 문의사항이 올 수 있습니다. 실시간으로 문의를 받기 위해 오픈채팅 링크로 이동하는 버튼을 만들었습니다.
    
    
  

• 관리자 페이지:
  • 가입자, 매칭 상태를 실시간으로 조회할 수 있습니다.
  • 유저 목록을 볼 수 있고 악성 유저 방지를 위해 정지하기(로그인 미활성화)를 구현하였습니다.
    
    
  

4. Testing and Considerations (테스트 및 고려사항)

원활한 실서비스 운영을 위해 다음과 같은 테스트 리스트 목록을 확인하였습니다.

5. Improvements (개선사항)

1. Table For You 프로젝트를 진행하면서 이미지 용량이 커 렌더링이 지연되는 현상이 있었습니다.
   이를 해결 하기 위해 이미지를 webp (압축된 포맷)으로 변경하는 방법을 알게 되었고 적용 후 이미지 최적화를 진행하였습니다.
   
   

2. UX/UI 개선

초기에 룸메이트 리스트 목록을 보여줄 때, 각 아이템마다 간략하게 -> 클릭시 -> 자세하게로 개발하고자 하였습니다.
이유는 상세 내용 (흡연 여부, 실내 취식 등...) 리스트 내용이 많아 한 눈에 보기 어려울 것 같아서 입니다.
그런데 사용자 입장에서 두번씩 얘가 흡연을 하는지 등 팝업 통해 한번 더 확인하는 과정이 필요할까?



그래서 다음과 같이 변경하였습니다. 여기서 주변 지인분들께 UI에 개선할 점이 없는지 피드백을 받은 결과,
1. 각 리스트 마다 구분이 안간다.
2. 상세 내용이 한 눈에 들어오지 않는다.
의견을 받은 후,

다음 개선 사항을 거치면서



최종적으로 위 사진의 결과로 주변 반응이 좋아 최종 결정하였습니다.

6. API Specification (API 명세서)

번호	API 설명	URL	Method
1.1	회원가입	/api/users/register	POST
1.2	닉네임 중복 확인	/api/users/check-nickname	GET
1.3	비밀번호 확인	/api/users/check-password	POST
1.4	이메일 인증 발송	/api/users/email/send	POST
1.5	이메일 인증 확인	/api/users/email/verify	POST
1.6	로그인	/api/users/login	POST
1.7	액세스 토큰 갱신	/api/users/refresh	POST
1.8	회원 탈퇴	/api/users/withdraw	POST
2.1	나의 룸메이트 정보 생성	/api/roommate/me	POST
2.2	나의 룸메이트 정보 조회	/api/roommate/me	GET
2.3	나의 룸메이트 정보 삭제	/api/roommate/me	DELETE
2.4	나의 룸메이트 정보 수정	/api/roommate/me	PUT
2.5	예약 상태 수정	/api/roommate/reservation/edit	PUT
2.6	모든 룸메이트 정보 조회	/api/roommate/dormitory	GET
2.7	룸메이트 상세 조회	/api/roommate/detail/:room_id	GET
2.8	룸메이트 매칭 수 조회	/api/roommate/stats	GET
3.1	프로필 조회	/api/my/profile	GET
3.2	비밀번호 수정	/api/my/edit/password	POST
3.3	닉네임 수정	/api/my/edit/nickname	POST
3.4	MBTI 수정	/api/my/edit/mbti	POST
3.5	학과 수정	/api/my/edit/department	POST
4.1	ID 찾기	/api/forgot/id	POST
4.2	비밀번호 찾기	/api/forgot/pw	POST
5.1	전체 회원 리스트 조회	/api/admin/users	GET
5.2	특정 회원 일시 정지	/api/admin/users/:userId/suspend	PATCH
5.3	특정 회원 활성화	/api/admin/users/:userId/active	PATCH
5.4	특정 회원 삭제	/api/admin/users/:userId	DELETE

7. Technology Stack (기술 스택)

HTML5
CSS3
TypeScript
React
Node.js
Tailwind CSS