Skip to content

Latest commit

 

History

History
210 lines (150 loc) · 9.83 KB

README.md

File metadata and controls

210 lines (150 loc) · 9.83 KB

임시 로그아웃 버튼을 누르면 새로운 User로 작성이 가능합니다

🏠 자버칩프라푸치노 Organization
👨‍👨‍👧‍👧 Front-End Repository

🎞️ 프로젝트 시연 영상

Video Label



🗓️ 프로젝트 소개

개요 : 기업(Jober) 측으로부터 프로젝트 요구사항을 받아 공유페이지를 기능 개선했습니다.
기간 : 2023. 09. 18. ~ 2023. 10. 06.
기타 : 패스트캠퍼스 부트캠프의 PM&UXUI&FE&BE 협업으로 진행된 기업연계 파이널 프로젝트입니다.



👤 TEAM JOBERCHIP

FRONT-END

정태욱(👑) 김다슬 박철민 백지욱 주하림
정태욱 김다슬 박철민 백지욱 주하림

BACK-END

신용호(👑) 김용원 박장희 최해솔 한혜지
신용호 김용원 박장희 최해솔 한혜지



파트 분배

피그마에서 파트 분배 확인하기

기능 담당
회원관리 정태욱
스페이스 정태욱
블럭 공통 정태욱
GNB 주하림, 김다슬
페이지 트리 구조 주하림
BreadCrumb 주하림
페이지 블럭 주하림
템플릿 블럭 정태욱
링크 블럭 박철민
이미지 블럭 박철민
동영상 블럭 박철민
지도 블럭 백지욱
텍스트 블럭 김다슬
텍스트 에디터 기능 김다슬
블럭, 페이지 공통 설정 및 레이아웃 정태욱
배포 정태욱



🛠️️ 사용기술 및 개발환경

Back-End

Java SpringBoot Spring Security MySQL Gradle JPA IntelliJ IDEA

Front-End

Deployment

AWS Amazon Ec2 Amazon Ec2

Cowork Tools

Slack Notion Zoom Figma GitHub



실행 방법

Developmenet

# 번들링
npm run build:dev

# 서버 실행
npm run dev

Production

# 번들링
npm run build:prod

# 서버 실행
npm run start
# 또는
npm run start:pm2

🖥️ 기능 소개

1. 스페이스

기본생성 자동저장 템플릿 생성

2. 블럭

1️⃣ 링크 블럭

블럭 생성 블럭 수정
설명 설명

2️⃣ 이미지 블럭

블럭 생성 블럭 수정
설명 설명

3️⃣ 비디오 블럭

링크로 생성 파일로 생성
설명 설명

4️⃣ 지도, 텍스트 블럭

지도 생성 텍스트 생성
설명 설명

3. 페이지

블럭 DnD 공개설정
설명 설명
페이지 트리 경로이동, 반응형
설명 설명



아키텍쳐

joberchip-architecture

공유 페이지 접근 시퀀스 다이어그램

공유 페이지 접근시 react-dom/serverrenderToString을 사용하거나 react-router-domuseNavigate, Link에 따라

SSR, CSR로 나뉘어 동작합니다.

브라우저 주소창에 URL을 입력하여 접속했을 경우

브라우저 주소창에 URL을 입력하여 접속했을 경우 react-dom/serverrenderToString를 사용하여 SSR로 동작합니다.

ssr_sequnce

웹 애플리케이션 안에서 주소를 이동했을 경우

react-router-domuseNavigate, Link를 사용하여 이동한 경우에 해당됩니다. CSR로 동작합니다.

csr_sequence