[웹：Antwork] 그룹웨어 협업 시스텝

Antwork_표지_.png

<aside> 📁

Antwork는 사내 커뮤니티 그룹웨어 협업 시스템으로, 프로젝트, 채팅, 캘린더, 게시판, 드라이브, 관리자 기능 등을 하나의 플랫폼에서 제공하여 생산성을 높이는 것을 목표로 합니다.

</aside>

1. 프로젝트 개요

프로젝트 주제	Java, Spring Boot 활용 사내커뮤니티 그룹웨어 개발
프로젝트 기간	2024.11.18 ~ 2024.12.27 (6주)
배경 및 목적	[목표]

사용자 및 관리자의 권한에 따른 메뉴 구성과 기능 제공
JSP, Thymeleaf 등 Component-Based UI 기술을 활용한 유지보수 및 확장성 높은 UI 설계
사용자 중심의 UX 환경과 효율적인 관리 시스템 구현 | | 주요기능 | 1. BO(Back Office) 회원 : 회원정보 조회, 수정, 삭제 등이 가능한 관리 기능 구현 메뉴 : 게시판의 추가, 수정, 삭제, 숨기기 등의 관리 기능 구현 게시판 : 생성된 게시판의 게시글, 댓글 등의 관리 기능 구현 고객센터 : 1:1 문의에 대한 답변을 제공할 수 있는 기능 구현

2. FO(Front Office) 회원 : Session을 기반으로 한 인증/인가 기능 구현 게시판 : BO를 통해 등록된 게시판의 표출 기능 및 페이징 처리,게시글, 댓글 등록 기능 구현 검색 : 키워드를 통한 검색 기능의 구현 멤버쉽 : 결제를 통해 유료 기능(유료 게시판 조회) 구현 고객센터 : 1:1문의를 할 수 있는 페이지 구현

2. 내가 기여한 부분

게시판 카테고리 관리(추가 / 목록 / 조회)

02_게시판-새-카테고리-추가-.jpg

개발 및 기여 내용

구현 기능	기여도 설명
**카테고리 생성 모달/
입력값 검증**	• React 모달(+Zustand)로 제목·설명 입력 후 공백·중복명 검증 후 카테고리 생성
• 성공 시 토스트 알림 및 사이드바 즉시 갱신, 새로고침 없이 카테고리 추가
**카테고리 목록 캐싱/
렌더링**
• 앱 시작 단계에 한 번만 목록을 불러와 전역 상태로 보관
• 사이드바·드롭다운 등 여러 컴포넌트가 동일 데이터를 재사용해 불필요한 재요청 방지
**카테고리별
게시글 접근 링크**	• 사이드바에서 동적으로 생성된 카테고리 항목을 클릭하면 해당 카테고리 ID를 포함한 URL로 이동
• URL 파라미터 기반 라우팅으로 검색·페이징·새로고침 이후에도 동일 카테고리 컨텍스트를 유지해 일관된 사용자 경험 제공

</aside>

게시글 (작성(업로드) / 상세보기 / 수정 / 삭제)

개발 및 기여 내용

구현 기능	설명
입력값 검증	• 제목·내용 입력 시 trim()으로 공백 제거, 빈 값일 경우 alert 경고
• 클라이언트 측 검사로 서버 요청 감소
• 사용자 입력 오류 방지 및 서버 부하 절감
**인라인 수정
(Inline Edit)**	• React useState로 수정 모드(isUpdate) 구현, 동일 페이지에서 즉시 수정. 새로고침 제거 → 사용자 중심으로 설계
• FormData로 수정 데이터 전송, 스프링 JPA Dirty Checking으로 변경 필드만 업데이트해 트래픽과 I/O 최소화
• 클릭 수 감소로 사용자 경험 개선 및 코드 복잡도↓
**첨부파일 관리
(업로드)**	• 드래그 앤 드롭 UI로 파일 선택, FormData로 최대 10MB 파일 업로드
• BoardFileUpload 컴포넌트 재사용으로 코드 중복 감소
• 직관적 파일 업로드와 개발 효율성 증대
**권한 기반
수정·삭제**
• React 조건부 렌더링으로 작성자만 수정/삭제 버튼 표시
• Spring Security로 작성자 ID 검증
• 보안 강화 및 작성자 중심 UX 제공
**클라이언트-서버
분리**	• React SPA로 UI, Spring Boot REST API로 데이터 처리
• axios 로 API 호출 통합
• 시스템 안정성 및 코드 유지보수성 향상
안전한 삭제 처리	• 2단계 확인 모달로 실수 삭제 방지 및 삭제 완료 후 자동 목록 리다이렉트 구현
• 게시글 삭제 시 연관된 첨부파일과 댓글을 cascade 방식으로 일괄 정리하여 데이터 정합성 보장
• 삭제된 게시글 URL 직접 접근 시 404 처리로 완전한 삭제 상태 관리

새-글-작성(설명).jpg

게시글-수정(설명).jpg

</aside>

첨부파일 관리(다운로드) & 좋아요 기능

13_첨부파일다운로드(다운로드).jpg

13_첨부파일다운로드(좋아요토글).jpg

개발 및 기여 내용

구현 기능	설명
**첨부파일 목록/
대용량 표시**
• 게시글 상세 페이지에서 첨부파일 전체를 리스트로 제공
• 파일명, 용량, 100MB 이상 파일은 ‘대용량’으로 구분하여 사용자 인식 용이
저장 구조 설계
• UUID 기반 파일명을 사용하여 이름 충돌 없이 업로드
• 다양한 확장자 대응 및 서버 디렉토리 구조 유지로 운영 안정성 확보
**안정적인
다운로드 처리**
• 서버에서 파일 존재 여부·권한을 검증한 후 응답 제공 → 오류 발생 가능성 최소화
• 파일이 실제 서버에 존재하는지, 권한이 유효한지를 서버 측에서 사전 확인
• 응답이 문제 없을 때만 파일을 사용자에게 제공하여 오류 가능성 제거
간편한 다운로드 흐름	• 클릭 즉시 다운로드 실행, 페이지 전환 없이 파일 접근 가능
**게시글 좋아요
(토글 방식)**	• 한 번 클릭으로 좋아요 등록, 다시 클릭 시 취소되는 토글 구조로 설계
• 불필요한 중복 클릭 방지와 직관적인 UI 제공 → 사용자 경험(UX) 간소화
**좋아요 상태 저장/
전환 처리**
• 사용자와 게시글 간 1:1 관계를 유지하기 위해 BoardLike 테이블 사용
• 기존 좋아요 기록 존재 시 → 삭제, 없으면 → 등록
• existsByBoardIdAndUserId()로 상태 판별 → 데이터 무결성 확보
**좋아요 수/
상태 실시간 반영**
• 좋아요 버튼 클릭 시 서버 응답으로 받은 likeCount, liked를 기반으로 클라이언트에서 즉시 UI 상태 변경
• 새로고침 없이도 반응형 UX 제공 → SPA 장점 활용
상태값 동기화	• 클라이언트는 좋아요 수와 상태를 useState로 관리하되, 서버에서 응답받은 최신 상태로 갱신
• 리스트/상세 페이지 간 좋아요 수의 데이터 일관성 유지
</aside>

댓글 (작성 / 수정 / 삭제 / 비밀댓글)

개발 및 기여 내용

구현 기능	설명
**댓글 CRUD API
설계**	• Spring Boot 기반 RESTful API로 댓글의 생성(POST), 조회(GET), 수정(PUT), 삭제(DELETE) 엔드포인트 구현
• React 클라이언트에서 axios를 통해 비동기 통신하여 실시간 댓글 관리 시스템 구축
비밀댓글 권한 제어	• 댓글 엔티티의 isSecret 플래그와 Spring Security 인증 정보를 활용한 접근 제어 로직 구현
• 작성자 본인만 비밀댓글 내용 확인 가능하며, 일반 사용자에게는 "🔐 비밀 댓글입니다" 메시지로 대체 표시
동적 댓글 카운팅	• React 상태 관리(useState)를 통해 댓글 배열 길이를 실시간 계산하여 UI에 반영
• 댓글 추가/삭제 시 즉시 카운트가 업데이트되는 반응형 인터페이스 구현
**권한별
수정/삭제 제어**	J• WT 토큰에서 추출한 사용자 ID와 댓글 작성자 ID 비교를 통한 권한 검증
• 본인이 작성한 댓글에만 수정/삭제 버튼을 조건부 렌더링하여 UI 레벨에서 접근 제어
**클라이언트-서버
분리 아키텍처**	• React SPA(Single Page Application)에서 Spring Boot REST API를 호출하는 분리형 구조.
• 프론트엔드는 사용자 인터페이스와 상태 관리를 담당하고, 백엔드는 비즈니스 로직과 데이터 처리를 전담하는 역할 분리
**실시간 UI
상태 동기화**	• 댓글 작성/수정/삭제 후 서버 응답을 받아 React 컴포넌트 state를 즉시 업데이트
• 전체 페이지 새로고침 없이 변경사항이 UI에 즉시 반영되는 사용자 경험 제공

비밀댓글확인.jpg

글작성자(수정-삭제)버튼노출.jpg

</aside>

3. 아키텍처 및 서비스 정보

기술다이어그램.png

백엔드 주요 라이브러리

카테고리	라이브러리	버전	설명
데이터베이스 연동	mysql-connector-java	8.0.33	MySQL DB 연결용 JDBC 드라이버. 장기 지원(LTS) 버전으로 보안 및 안정성 강화
ORM & DB 관리	hibernate-core	6.5.2	JPA 표준 구현체로 객체-관계 매핑 자동화. 복잡한 SQL 작성 최소화
ORM & DB 관리	spring-data-jpa	(Spring Boot 관리)	JPA 추상화 레이어 제공. CRUD 메서드 자동 생성, 생산성 향상
인증 & 보안	spring-security-oauth2-client	6.3.3	OAuth2 클라이언트 기능 제공. 카카오/구글 등 소셜 로그인 연동
JWT 인증	jjwt-api, jjwt-impl, jjwt-jackson	0.12.3	JWT 기반 인증. 세션 없는 Stateless 구조로 확장성 확보
템플릿 보안	thymeleaf-extras-springsecurity6	3.1.2.RELEASE	Thymeleaf 템플릿에서 Spring Security 권한 기반 UI 제어 가능
객체 매핑	modelmapper	3.2.1	DTO ↔ Entity 간 자동 변환. 반복 코드 제거, 계층 간 데이터 전달 효율화
API 통신	jackson-databind	(Spring Boot 관리)	JSON 직렬화/역직렬화. REST API 통신에 필수
동적 쿼리	querydsl-jpa, querydsl-apt	5.1.0:jakarta	타입 안전한 쿼리 생성. 복잡한 조건 처리, 컴파일 시점 오류 방지
표준 API	jakarta.annotation-api, jakarta.persistence-api	(Spring Boot 관리)	Jakarta EE 표준 API. 벤더 종속성 최소화, 유지보수 용이
코드 자동화	lombok	1.18.28	@Getter, @Builder 등 코드 자동 생성. 간결하고 가독성 높은 코드 작성 가능
개발 편의	spring-boot-devtools	(Spring Boot 관리)	코드 수정 시 자동 리빌드, 개발 생산성 향상
테스트	spring-boot-starter-test, junit-platform-launcher	(Spring Boot 관리)	단위/통합 테스트 지원. CI/CD와 통합 가능

프론트엔드 주요 라이브러리

| --- | --- | --- | --- |

인프라 및 툴

| --- | --- | --- | --- |