Skip to content

BoooostUp/carone

Repository files navigation

카원 그룹 통합 홈페이지

카원 그룹 계열사 9개의 홈페이지를 하나의 프로젝트에서 관리하는 멀티 테넌트 기업 웹사이트입니다.

기술 스택

항목 사용 기술
프레임워크 React 18
빌드 도구 Vite 5
라우팅 React Router DOM v6
스타일링 Styled Components v6
애니메이션 Framer Motion, AOS
코드 품질 ESLint, Prettier

계열사 구성

계열사 경로 사업 분야
홈 (카원 그룹) / 그룹 소개
(주)자동차환경 /ce 폐기물 수집·운반·중간처리
카원(유) 1공장 /carone 폐기물 수집·운반·재활용
카원(유) 2공장 /carone2 용기류 파쇄·분쇄·재활용
(주)에스지산업 /sg 폐유 재활용·이온정제유 생산
(주)토탈 /total 산업폐기물 소각·재활용
(주)세명인텍 /si 세정·준설·관로 청소
(주)황지 /hj 사업장폐기물 매립처분
(주)에너지스토리 /es 액상폐기물 재활용

프로젝트 구조

src/
├── components/       # 공통 컴포넌트 (Header, Footer, Hero 등)
├── pages/            # 계열사별 페이지
├── constants/        # 콘텐츠 데이터 (텍스트, 이미지, 네비게이션)
├── hooks/            # 커스텀 훅
├── styles/           # 테마, 전역 스타일, 미디어 쿼리 유틸
├── assets/           # 이미지, 아이콘, 폰트, 영상
├── Router/           # 계열사별 라우트 설정
├── App.jsx
└── main.jsx

콘텐츠 관리

모든 텍스트·이미지·네비게이션 데이터는 src/constants/에서 중앙 관리합니다.

파일 역할
GNB_CONTENTS.js 상단 네비게이션
LNB_CONTENTS.js 사이드 네비게이션
HERO_IMAGES.js 히어로 이미지 매핑
HERO_VIDEOS.js 히어로 영상 매핑
MAIN_ARTICLE_CONTENTS.js 메인 페이지 아티클
FOOTER_CONTENTS.js 푸터 회사 정보
MAP_CONTENTS.js 오시는 길 정보
WELCOME_BOX_CONTENTS.js 회사 소개 문구
BUSINESS_PARTNER_CONTENTS.js 주요 거래처

로컬 실행

# 의존성 설치
npm install

# 개발 서버 실행
npm run dev

# 프로덕션 빌드
npm run build

반응형 브레이크포인트

구분 기준
모바일 ~ 767px
태블릿 768px ~ 1023px
데스크탑 1024px ~

Releases

No releases published

Packages

 
 
 

Contributors

Languages