ByuN0-0.logGitHub
프로젝트 회고2024.03 - 2024.06캡스톤 프로젝트

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

워크스페이스별 동적 거래 속성을 다루는 CRM 플랫폼. EAV 모델과 AG Grid 편집 UI를 연결했습니다.

프로젝트 소개

워크스페이스 기반으로 회사와 거래 정보를 관리하는 웹 CRM 플랫폼 워크스페이스마다 거래 속성이 달라질 수 있는 CRM을 목표로 만들었습니다. Spring Boot API와 Next.js 화면을 연결하고, EAV 모델을 활용해 동적 컬럼과 거래 값을 관리했습니다.

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

Prototype

프로토타입

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

Workspace Deal Grid

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

Company

AppleSamsungNaver

Deals

진행 중 3건선택됨 0건

속성 추가

속성 편집

선택CompanyInvestment 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를 사용했습니다.

프론트엔드

언어

TypeScript

프론트엔드와 Node.js 백엔드에서 타입 안정성을 확보하고 API 계약 변경을 추적하기 위해 사용했습니다.

프레임워크/라이브러리

Next.js

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

React

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

AG Grid

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

Ant Design

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

백엔드

언어

Java

Spring Boot 기반 서버와 Android 앱 개발 환경에 맞춰 안정적인 객체지향 구조를 만들기 위해 사용했습니다.

프레임워크/인증

Spring Boot

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

Spring Security

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

JPA

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

JWT

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

DB

저장소

MySQL

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

인프라/CI/CD

배포

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 화면 구성

성과와 회고

  • CRM의 거래 필드는 워크스페이스마다 달라질 수 있어 고정 컬럼 테이블로는 확장성이 낮았습니다. DealAttribute와 DealValue를 분리한 EAV 구조로 바꿔, 새 속성을 추가해도 거래 테이블 스키마를 바꾸지 않고 컬럼을 확장할 수 있게 했습니다.
  • AG Grid의 셀 수정은 단순 input 저장이 아니라 workspaceId, dealId, attributeId가 모두 맞아야 하는 작업이었습니다. 셀 단위 수정 API를 분리해 한 칸을 바꿀 때 전체 거래를 다시 저장하지 않도록 했습니다.
  • 조회 조건이 늘어나면서 DealService에서 JPA Specification 기반 필터를 붙였습니다. 회사/워크스페이스 조건을 쿼리 조합으로 처리해 프론트 필터 변화에 맞춰 백엔드 조회 조건을 확장할 수 있게 했습니다.
  • 인증 이후에는 워크스페이스 권한 검증이 핵심이었습니다. 단순 로그인 성공보다 사용자가 접근 가능한 워크스페이스와 회사/거래 데이터만 다루도록 식별자 기준을 맞추는 일이 더 중요했습니다.
  • Docker와 GitHub Actions 배포를 실험하면서 CORS, 배포 IP, 환경변수 같은 코드 밖 설정이 제품 완성도에 직접 영향을 준다는 점을 확인했습니다.