자버칩프라푸치노 사이트

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

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

🎞️ 프로젝트 시연 영상

🗓️ 프로젝트 소개

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

👤 TEAM JOBERCHIP

FRONT-END

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

BACK-END

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

파트 분배

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

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

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

Back-End

Front-End

Deployment

Cowork Tools

실행 방법

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	공개설정
설명	설명

페이지 트리	경로이동, 반응형
설명	설명

아키텍쳐

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

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

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

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

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

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

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