💻 콘텐츠 아카이브 CMS

작업중입니다.

INDEX

• 프로젝트 소개
• 팀원 구성과 역할

1. 개발 환경
2. 개발 기간 및 작업 관리
3. 요구사항 명세 및 다이어그램
4. 구현 기능

프로젝트 소개

👨‍🏫 콘텐츠 공유 사이트의 CMS

• 유저의 메인 페이지에 노출되는 콘텐츠를 관리하고, 사용자 관리 및 사용 통게를 확인할 수 있는 관리 시스템입니다.

  👉 프로젝트 바로가기

  GitHub	Notion 팀회의록

팀원 구성과 역할

김지원	이지연	이창규	차소영	최지혜
@kimg1623	@thegreatjy	@kidchang93	@Eumnya415	@jyeeeh
총괄 리더	개발 리더	일정 리마인더	에디터	백업 리마인더
사용자 관리	카테고리 관리	콘텐츠 관리	공지사항 관리	통계 관리

1. 개발 환경

Back-End

Front-End

Tools

Collaboration

2. 개발 기간 및 작업 관리

개발 기간

전체 개발 기간 : 2024-01-22 ~ 2024-02-07

작업 관리

• GitHub로 코드 형상관리를 하고, 기능별로 branch를 분리하여 협업을 진행했습니다.
• Slack을 사용하여 프로젝트 진행상황을 공유하고 Notion에 회의 내용을 기록했습니다.

3. 요구사항 명세 및 다이어그램

👉 각 이미지를 클릭하면 확대되어 자세한 내용을 확인하실 수 있습니다.

1) 요구사항 명세

2) 역기획서

역기획서 pdf 바로보기

3) ER 다이어그램


4. 구현 기능

[ 클래스 아카이브 관리자 CMS 메인 메뉴 구성 ]

• 1. 콘텐츠 관리
• 2. 카테고리 관리
• 3. 통계 관리
• 4. 사용자 관리
• 5. 서비스 관리(공지사항 관리)

[ 구현 기능 살펴보기 ]

👉개발 화면 및 소스코드를 아래 토글메뉴를 눌러서 확인해주세요.

1) 콘텐츠 관리

• 개발 담당자 : 이창규

콘텐츠 관리(등록,리스트)

콘텐츠 등록 - 백엔드 코드

등록 후 미승인 콘텐츠 탭으로 이동

등록한 콘텐츠 승인 기능

승인 버튼 기능 - 누르면 해당 콘텐츠 권한 변경

승인 버튼 기능 - 백엔드 코드

승인 버튼 기능 - 프론트 코드

승인된 콘텐츠는 미승인 콘텐츠 -> 전체 콘텐츠

전체 콘텐츠에서 확인

승인된 콘텐츠만 사용자 화면 출력

미승인 콘텐츠는 사용자 화면 출력 X

미승인 콘텐츠 승인

사용자 화면 출력

콘텐츠 수정

수정시 미리보기 & 새로운 파일 추가시 미리보기

AWS S3 업로드

S3 config

Generate PresignedURL 메서드

업로드시 byte로 변환 하는 메서드

공용 클래스 fileUtils 필드 주입

S3 업로드 - 백엔드 코드

파일 저장 메서드

AWS S3 다운로드

다운로드 기능

다운로드 기능 - 백엔드 코드 1

다운로드 기능 - 백엔드 코드 2

리스트 출력시 for문을 돌면서 presignedURL 받아오기

전체 콘텐츠 & 미승인 콘텐츠 리스트 출력시 서로 다른 SQL문 사용

리스트 출력 프론트 코드

상세보기 팝업창

상세보기 팝업창

상세보기 팝업창 - 프론트 코드

논리 삭제 메서드

2) 카테고리 관리

• 개발 담당자 : 이지연
• 카테고리를 추가하거나 수정할 수 있습니다.

archive-category.mp4

3) 통계 관리

• 개발 담당자 : 최지혜
• 접속자 수, 콘텐츠 통계를 확인할 수 있습니다.

접속자 수

• 접속량을 확인 할 수 있습니다. 원하는 기간을 설정하여 확인할 수 있습니다.

기간 설정 전	기간 설정 후

콘텐츠 통계

• 파일다운로드 수, 컨텐츠 조회수를 확인할 수 있습니다.
• 상위 10개까지 표시됩니다

4) 사용자 관리

• 개발 담당자 : 김지원
• CMS와 유저 페이지에 접근할 수 있는 사용자를 권한별로 관리합니다.

사용자 등록

• ID 중복체크 : DB에 계정 ID와 중복되지 않도록 확인
• form 요소마다 유효성 검사 진행 : front와 back(@Valid)에서 모두 진행

archive-user-register.mp4

소스코드 확인하기

• front
• back(Request 객체DTO, @Valid)

사용자 권한수정

• 상세 조회 페이지에서 개별 권한 수정 기능
• 수정 페이지에서 권한과 정보 수정 가능

archive-user-edit.mp4

사용자 로그인

• 로그인한 사용자의 권한에 따라서 로그인시 페이지를 다르게 리다이렉트
• 메인페이지에서 관리자 로그인 시, 관리자CMS 메뉴가 보임

archive-user-login.mp4

5) 공지사항 관리

• 개발 담당자 : 차소영
• 관리자로 로그인했을 시 사용자 페이지에 표시될 공지사항 게시판을 관리할 수 있습니다.

게시글 상단 고정 기능

• 글을 작성할 때 ‘구분’ 에서 ‘중요’에 표시하면 게시글 목록에서 제목 앞에 [중요] 표시가 뜨고, 상단에 고정

CODE

BACK

FRONT

게시판 페이징 기능

• 게시글 10개마다 페이징기능이 적용

CODE

BACK

FRONT

조회수 표시 및 카운팅

• 게시글 열람 횟수만큼 조회수가 증가

CODE

BACK

FRONT

검색기능

• 제목이나 내용에 검색한 키워드가 포함되면 결과로 표시
• 검색 결과 화면에 페이징 기능이 적용되어 게시글이 10개씩 표출

CODE

BACK

SERVICE

공지사항 글 작성하기

CKEditor 적용

• 이미지 업로드 및 스타일 적용이 가능한 CKEditor를 적용

상단 고정 기능

• ‘구분’탭에서 ‘일반’으로 기본 적용
• ‘구분’탭에서 ‘중요’버튼을 누르면 게시판 목록에서 상단 고정

CODE

SERVICE

FRONT

유효성 검증

• 제목과 내용 둘 다 입력해야 글 작성이 가능하다.

CODE

BACK

SERVICE

FRONT

초기화

• 초기화 버튼을 누르면 작성중인 내용이 초기화된다.

CODE

공지사항 상세보기

• 관리자로 로그인했을 시 수정, 삭제가 가능합니다.

공지사항 수정

CODE

SERVICE

공지사항 삭제

CODE

BACK

FRONT