yamong-production

메인 인덱스 | bob-yamong

이 문서는 yamong-production 레포의 랜딩, 문서, 소개 페이지 구성을 실제 소스 기준으로 정리한 노트입니다.

레포지토리 정보

이름: yamong-production
주요 목적: Yamong 프로젝트를 소개하고 문서를 보여주는 프로덕션용 웹사이트입니다.

주요 기술 스택

• 프레임워크: React입니다.
• 빌드 도구: Create React App입니다.
• 언어: JavaScript입니다.
• 스타일링: styled-components입니다.
• 문서 렌더링: react-markdown을 사용합니다.
• 라우팅 및 스크롤: react-router-dom과 react-intersection-observer를 사용합니다.

아키텍처

• 유형: 랜딩 페이지와 문서 페이지가 분리된 프로덕션 웹사이트입니다.
• 구성 요소:
  • src/App.js는 /, /docs/:docId, /introduce 라우트를 둡니다.
  • src/pages/Main.js는 여러 섹션을 가진 랜딩 페이지입니다.
  • src/pages/Main.js는 스크롤 상태를 TopBar에 전달합니다.
  • src/Section/TopBar/TopBar.js는 경로와 스크롤 상태에 따라 스타일이 바뀝니다.
  • src/pages/Docs.js는 문서 사이드바와 본문을 나눕니다.
  • src/component/Docs/contents/Page1.js는 컴포넌트 안의 문자열 마크다운을 react-markdown으로 렌더링합니다.
  • 문서 페이지는 h1, h2, h3 헤더를 읽어 목차를 만들고 스크롤 이동을 연결합니다.
  • src/Section/section1/section1.js와 src/Section/section2/section2.js, src/Section/section4/section4.js는 intersection observer 기반 노출 애니메이션을 사용합니다.
  • 섹션 1의 CTA는 외부 Google Form으로 연결됩니다.

주요 파일

1. src/index.js - 애플리케이션 진입점입니다.
2. src/App.js - 라우트와 전역 구조를 정의합니다.
3. src/pages/Main.js - 랜딩 섹션 흐름과 스크롤 상태를 관리합니다.
4. src/pages/Docs.js - 문서 목차와 본문 영역을 나눕니다.
5. src/component/Docs/contents/Page1.js - 마크다운 문자열을 렌더링합니다.
6. src/component/Docs/sidebar/docs_sidebar.js - 문서 사이드바를 제공합니다.
7. src/Section/TopBar/TopBar.js - 경로와 스크롤 상태에 따라 상단바를 조정합니다.
8. src/Section/section1/section1.js - 메인 CTA와 배경 비디오를 다룹니다.
9. src/Section/section2/section2.js - 소개 성격의 시각 섹션을 제공합니다.
10. src/Section/section3/section3.js - 문의 폼 섹션을 제공합니다.
11. src/Section/section4/section4.js - 추가 홍보 섹션을 제공합니다.

포트폴리오 메모

• 랜딩과 문서가 분리되어 있어 역할이 명확합니다.
• 문서 본문은 정적 파일이 아니라 컴포넌트 내부 마크다운 문자열에서 만들어집니다.
• 상단바와 섹션 노출 효과가 있어 단순한 정적 페이지보다 상호작용이 많습니다.