자버칩프라푸치노 사이트

🏠 자버칩프라푸치노 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	공개설정
설명	설명

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

서비스 요청 흐름도

CI/CD 파이프라인

프론트엔드 CI/CD 파이프라인 입니다.

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

공유 페이지는 CSR, SSR을 같이 사용하는 universial rendering방식으로 렌더링 됩니다.

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

• SSR에 해당합니다.
• react-dom/server의 renderToString를 사용하여 정적인 HTML을 생성합니다.

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

• CSR에 해당합니다.
• react-router-dom의 useRouter, Link, Navigation 등을 사용하여 이동한 경우에 해당됩니다.