피엠그로우 자사 홈페이지 리뉴얼 개발

피엠그로우 자사 홈페이지 — 전기차 배터리 사업을 영위하는 기업의 공식 웹사이트 회사 소개(CI·문화·전략·사회적 책임), 사업 영역, 보유 기술을 한국어/영어 다국어로 안내 배터리 팩, 배터리 데이터(WattEver·WattSafe·탄소중립), 진단, 재사용 ESS, 배터리 구독 서비스(Baddery) 등 제품·서비스 소개 페이지 제공 배터리 데이터 마켓 영역에서 사업 협력 문의 폼 운영 공지·뉴스 게시판 운영 및 검색 기능 제공 고객 문의(B2B 사업 협력·이벤트 참여 등)를 탭으로 분리하여 등록·관리

• Next.js 13 (Pages Router) + TypeScript + Tailwind CSS + SCSS Modules(sass) 조합으로 회사 공식 사이트 구축
• 회사 소개 5개 페이지(CI · 회사 개요 · 문화 · 전략 · 사회적 책임) 구성
• 제품/서비스 영역 분리 (Baddery · 배터리 팩 · 배터리 데이터 · 진단 · 재사용 ESS 등)
• 배터리 데이터 페이지 — WattEver · WattSafe · 탄소중립 3종 세부 페이지 분리 구현
• 재사용 ESS 페이지 — 현대(hyundai) · 선진(sunjin) · reuse-ess 거래처별 페이지 분리
• next-i18next 기반 한국어/영어 다국어 지원, locale JSON 파일 51개 분리 관리
• Jotai + jotai-optics(focusAtom) 기반 app · modal · filter · page 4개 도메인 atom 글로벌 상태 관리
• React Hook Form 으로 사업 협력 문의·이벤트 참여·고객 문의 등 폼 처리
• Swiper 로 메인 페이지 + about-us 인터랙티브 슬라이드 구성
• Lottie 기반 로딩·인터랙션 애니메이션
• Daum 우편번호 API 를 동적 스크립트 로드(loadScript)로 주소 입력 컴포넌트(DaumAddress) 구현
• 공지(notice) / 뉴스(news) 게시판 — [id] 동적 라우팅 + EditorViewer 로 에디터 본문 HTML 렌더링
• 검색 페이지(/search) 로 게시물 통합 검색 기능 제공
• 고객 문의(/customer/contact-us) — list / register / TabContents 구조로 다중 탭 폼 운영
• crypto-js + jwt-decode + cookies-next 기반 토큰 처리

• GitHub Webhook → Google Chat 알림(/api/github-webhook) 으로 푸시 이벤트를 사내 채널에 자동 전달
• 다국어 설정(/api/user/lang) API Route 로 사용자 언어 선호도 저장

• Jenkins 파이프라인에서 환경 선택(development/production) 받아 deploy.sh 스크립트로 환경 변수 자동 주입
• Docker 빌드 후 사내 레지스트리(dev-ciprv.evmon.io:5000)로 푸시 자동화
• Yarn Berry 3.6.1(PnP) 기반으로 의존성을 잠금하여 빌드 환경 일관성 확보