서비스 링크 : https://dev-mate.newlecture.com/
- 팀 모집과 프로젝트 운영을 한곳에서 관리할 수 있는 협업 플랫폼입니다. 템플릿 기반 모집글 생성, 지원서 관리, 팀원 승인, 공지 등록 등 원활한 팀 운영을 위한 다양한 기능을 제공합니다. 마이페이지에서 내 모집글과 참여 프로젝트를 한눈에 확인하고, 검색·필터 기능으로 원하는 프로젝트를 쉽게 찾을 수 있습니다.
- 2025년 02월 ~ 2025년 03월
| 김예영 | 황혜인 | 임상민 | 김보영 |
|---|---|---|---|
 |
 |
 |
 |
- 개발 언어: HTML, CSS, JavaScript
- 사용 기술: React, Next.js, TypeScript, ModuleSCSS
- 데이터베이스: PostgreSQL
- 배포: Linux 기반 미니 PC, Nginx Reverse Proxy, GitHub Actions
- 버전 관리 및 협업: Git, Figma, Discord, Notion
- 템플릿 기반 모집글 생성 및 지원서 관리 기능 제공
- 프로젝트 모집글 검색 및 태그 필터 기능 제공
- 모집글 상세 페이지에서 프로젝트 정보, 팀원 신청, 댓글 기능 제공
- 프로젝트 참여자를 위한 전용 페이지에서 프로젝트 정보 및 팀원 목록 확인 가능
- 팀장은 신청 승인/거절 및 공지사항 관리 기능 제공
- 회원가입 및 로그인, 마이페이지에서 내 모집글 및 참여 프로젝트 조회 가능
- CI/CD 파이프라인을 구축하여 지속적인 배포 환경 구성
- 성능 최적화를 통해 렌더링 개선 및 불필요한 리렌더링 최소화
- TDD(Test-Driven Development) 방식을 적용하여 기능을 검증하고 코드 안정성 확보
- SSR 토큰 기반 인증 관리
- Middleware 토큰 관리
- 데이터 암호화
- public 폴더로 이미지 데이터 저장 (빠른 접근 및 정적 경로 제공)
- SSR을 이용한 검색 및 조회
- 다양한 방식의 검색
- SSR을 이용하여 SEO 최적화
- 다양한 활동 (댓글/대댓글, 좋아요, 수정/삭제, 지원하기)
- 권한 기반 UI 변경
- public 폴더로 PDF 데이터 저장 (빠른 접근 및 정적 경로 제공)
- 지원서 중복 제출 제한
- React calendar Library를 활용한 날짜 선택
- TipTap Library를 활용한 모집글 작성
- UI Feature Library를 이용한 주소 검색
- 권한 기반 UI 변경
- 신청자 지원서 열람 및 결정
- 프로젝트 나가기
- 프로젝트 지원했던 내역 조회
- 지원서 보기를 통해 제출했던 내역 조회
| 기술적 도전 | Why | How | Result |
|---|---|---|---|
| 테스트 코드 도입 및 TDD 적용 | 프로젝트의 안정성 및 유지보수성을 높이고, 코드 변경 시 발생할 수 있는 문제를 조기에 발견 | Vitest와 React Testing Library(RTL)를 활용한 단위 테스트 및 통합 테스트 진행, 주요 기능 중심으로 TDD 적용 | 코드 품질 및 신뢰성 향상, 리팩토링 시 정상 동작 보장 |
| E2E 테스트 도입 | SSR 환경에서 RTL 사용이 불가능하여 기존 테스트 방식의 한계 발생 | Playwright를 활용해 실제 사용자 플로우 기반의(e2e) 테스트 진행 | SSR 환경에서도 원활한 테스트 가능, 주요 사용자 시나리오 검증 강화 |
| CI/CD 파이프라인 구축 | 배포 과정 자동화가 필요, 지속적인 통합 및 배포 환경 구축 | GitHub Actions를 활용한 자동화된 빌드 및 배포 파이프라인 구축 | 배포 속도 향상 및 배포 안정성 확보 |
| 성능 최적화 | 페이지 로딩 속도 저하 및 불필요한 리렌더링 발생 | Lighthouse 및 SpeedPage를 활용한 성능 분석 및 최적화 | 렌더링 최적화로 성능 개선 (평균 점수 60 → 90) |