프로젝트 회고2024.03 - 2024.06캡스톤 프로젝트

CRM Platform: 동적 거래 속성을 가진 CRM 플랫폼 만들기

Spring Boot 백엔드와 Next.js 프론트엔드를 연결해 회원가입, 로그인, 워크스페이스, 회사, 거래, 동적 거래 속성 관리를 구현한 CRM 플랫폼 프로젝트입니다.

프로젝트 소개

워크스페이스 기반으로 회사와 거래 정보를 관리하는 웹 CRM 플랫폼 원본 저장소의 README, Spring Boot 컨트롤러/서비스, Next.js 화면, Git 로그를 기준으로 두 번째 포트폴리오 글을 구성했습니다. 거래 속성을 동적으로 다루는 구조와 프론트엔드 그리드 연동 과정을 중심으로 정리했습니다.

역할: 백엔드 API 설계, Deal EAV 모델링, 프론트엔드 그리드 연동, 배포 설정
형태: 캡스톤 프로젝트
상태: 완료

Prototype

프로토타입

원본 CRM의 회사 사이드바, 거래 그리드, 속성 추가/편집/삭제 흐름을 브라우저 localStorage 저장 방식으로 재현했습니다.

Workspace Deal Grid

원본의 AG Grid 거래/속성 편집 흐름을 브라우저 저장소로 재현했습니다.

Company

AppleSamsungNaver

Deals

진행 중 3건선택됨 0건

속성 추가

속성 편집

선택	Company	Investment Round	전화 번호	이메일	메모	생성 날짜	수정 날짜

구현한 기능

회원가입과 로그인, JWT 기반 인증 흐름 구현
사용자별 워크스페이스 생성 및 멤버 권한 검증
회사 정보 CRUD와 워크스페이스별 회사 연결
거래 Deal 생성, 조회, 수정, 삭제 API 구현
Deal 속성을 동적으로 추가, 수정, 삭제하는 EAV 모델 설계
AG Grid 기반 거래 목록 편집과 컬럼 이동/수정 UI 연동
Docker와 GitHub Actions 기반 배포 자동화 실험

사용 기술

기술 스택은 Spring Boot 백엔드와 Next.js 프론트엔드 구성을 기준으로 정리했습니다. 인증은 Spring Security/JWT, 데이터 모델은 JPA/MySQL, 프론트엔드는 Ant Design과 AG Grid를 사용했습니다.

Spring Boot

인증, 워크스페이스, 회사, 거래 API를 계층적으로 구성하기 위해 선택했습니다.

Next.js

CRM 프론트엔드를 라우팅과 컴포넌트 단위로 구성하고 백엔드 API와 연결하기 위해 사용했습니다.

React

거래 그리드와 속성 편집 UI처럼 상태 변화가 많은 화면을 컴포넌트로 관리하기 위해 사용했습니다.

MySQL

워크스페이스, 회사, 거래, 동적 속성 데이터를 관계형 구조로 저장하기 위해 사용했습니다.

Spring Security

로그인 이후 워크스페이스별 접근 권한을 검증하기 위해 사용했습니다.

JWT

프론트엔드와 백엔드가 분리된 환경에서 인증 상태를 전달하기 위해 사용했습니다.

JPA

도메인 엔티티와 Repository 기반 데이터 접근을 빠르게 구성하기 위해 사용했습니다.

AG Grid

거래 목록을 스프레드시트처럼 편집하고 동적 컬럼을 표현하기 위해 선택했습니다.

Ant Design

CRM 화면의 사이드바, 폼, 버튼 등 관리 도구 UI를 빠르게 구성하기 위해 사용했습니다.

Docker

로컬과 배포 환경 차이를 줄이고 서버 실행 환경을 묶기 위해 실험했습니다.

GitHub Actions

빌드와 배포 과정을 자동화하며 운영 환경 연결 문제를 다루기 위해 사용했습니다.

구조와 개선

이 프로젝트에서 가장 크게 배운 것은 EAV 모델의 활용입니다. 거래 테이블의 컬럼을 고정하지 않고 DealAttribute와 DealValue를 분리해, 워크스페이스마다 다른 거래 속성을 만들 수 있게 했습니다. 프론트엔드에서는 이 동적 속성을 그리드 컬럼으로 렌더링했습니다.

AuthController/LoginFilter/JWTUtil: 로그인과 JWT 발급 및 인증 필터 처리
WorkspaceController/WorkspaceService: 사용자 워크스페이스 조회와 멤버 권한 확인
CompanyController/CompanyService: 회사 정보 CRUD와 워크스페이스 연결 관리
DealController/DealService: 거래 생성, 조회, 셀 값 수정, 삭제 API 담당
DealAttributeEntity/DealValueEntity: 동적 컬럼을 지원하기 위한 EAV 구조
Next.js web: Ant Design Sider와 AG Grid 기반 CRM 화면 구성

배운 점

EAV 모델을 활용해 엔티티의 속성을 행 데이터로 분리하면, CRM처럼 필드가 자주 바뀌는 도메인에서 고정 테이블보다 훨씬 유연하게 확장할 수 있다는 점을 배웠습니다.
셀 하나를 수정하는 UI 동작도 인증, 워크스페이스 권한, 속성 ID, 거래 ID가 함께 맞아야 안정적으로 동작한다는 것을 경험했습니다.
프론트엔드와 백엔드가 동시에 바뀌는 프로젝트에서는 API 응답 형태와 식별자 기준을 일찍 고정하는 것이 중요했습니다.
CORS, IP 변경, 배포 파이프라인처럼 코드 밖의 환경 설정도 제품 완성도에 큰 영향을 준다는 점을 체감했습니다.