HM소프트

Next.js 14 App Router와 TypeScript로 전력 엔지니어링 기업 홈페이지 시안을 만든 기록. 다국어는 URL 라우팅 대신 Context 토글로 단순화하고, GitHub Actions로 정적 배포하며, as const가 만든 리터럴 유니온 타입 충돌을 정적 빌드에서 잡아 푼 과정을 담았다.하룻밤 만에 "이런 톤으로 갑니다"를 만들어야 했다한 전력 설비 분야 엔지니어링 기업의 공식 홈페이지 프로토타입 시안을 만들었다. 본 구축 계약 전에 "이런 구조와 이런 분위기로 갑니다"를 의사결정자에게 보여주는 단계라, 완성도보다 속도와 첫인상이 중요했다. 회사명·연락처 같은 실제 정보는 이 글에서 전부 일반화했지만, 작업 자체는 운영을 전제로 한 진짜 코드였다.이 글의 재미있는 점은 커밋 로그가 곧..

Next.js 14 App Router와 TypeScript로 전력 엔지니어링 기업 홈페이지 시안을 만든 기록. 다국어는 URL 라우팅 대신 Context 토글로 단순화하고, GitHub Actions로 정적 배포하며, as const가 만든 리터럴 유니온 타입 충돌을 정적 빌드에서 잡아 푼 과정을 담았다.하룻밤 만에 "이런 톤으로 갑니다"를 만들어야 했다한 전력 설비 분야 엔지니어링 기업의 공식 홈페이지 프로토타입 시안을 만들었다. 본 구축 계약 전에 "이런 구조와 이런 분위기로 갑니다"를 의사결정자에게 보여주는 단계라, 완성도보다 속도와 첫인상이 중요했다. 회사명·연락처 같은 실제 정보는 이 글에서 전부 일반화했지만, 작업 자체는 운영을 전제로 한 진짜 코드였다.이 글의 재미있는 점은 커밋 로그가 곧..

알림을 읽음/안읽음이 아니라 미결·확인중·조치완료 상태와 이력을 가진 일감으로 모델링한다. 플러그인 detector 엔진과 message 지문 dedup, 클라이언트 필터가 100건 윈도에서 무너진 한계를 서버사이드 필터·안정 정렬·일괄 확인으로 옮긴 과정, 데이터 소스 seam까지 다룬다.2편: 알림은 토스트가 아니라 "일감"이다1편에서 웹·앱이 공유하는 백엔드 API를 다뤘다. 이번 편은 그 위에 올라간 기능 중 가장 공들인 알림(alerts) 시스템이다. 백엔드의 이상 감지 엔진과, 그것을 소비하는 관리자 웹(Next.js 16 + React 19)을 함께 본다.대규모 사업장 시스템에서 "알림"은 화면 구석에 잠깐 떴다 사라지는 토스트가 아니다. 관리자가 처리해야 할 일감의 목록이다. 연속 결근, ..

업무 규칙을 한 곳에 두는 API 전용 백엔드를 Next.js·Prisma·PostgreSQL·Redis로 설계한다. 웹 세션·관리자 JWT와 앱 JWT·기기 바인딩이라는 두 인증을 하나의 AuthContext로 추상화하고, next build의 모듈 평가 함정과 Redis graceful degrade, 단일 응답 봉투와 DomainError까지 다룬다.시리즈를 시작하며 — 하나의 백엔드, 두 개의 클라이언트한 대규모 사업장의 통합 업무 시스템을 v2.0으로 다시 설계했다. 인사·근태·회계·교육·KPI·안전·문서·영업까지 아홉 개 업무 영역을 한 시스템에서 다루는데, v1과 v2의 결정적 차이는 클라이언트가 둘로 늘었다는 점이다. 관리자는 웹(브라우저)을, 현장 직원은 모바일 앱을 쓴다. 그런데 둘은 ..

TipTap 헤드리스 에디터의 SSR 하이드레이션 불일치를 immediatelyRender false로 피하고, NextAuth 세션 전략을 JWT로 잡아 엣지 미들웨어가 DB 없이 역할을 판단하게 한다. 인증 설정을 엣지용·DB용으로 분리, 미들웨어와 API 가드 이중 방어, 파일 업로드 경로 순회 차단, 빌드 서버를 띄운 Playwright E2E까지 기록한다.TipTap 에디터·인증·E2E 테스트 구현을 정리한다. 3편: 편집기·인증·테스트1편 콘텐츠·검색, 2편 i18n·SEO·접근성·성능에 이어 시리즈 마지막이다. 관리자가 콘텐츠를 쓰는 리치 텍스트 에디터(TipTap), 사용자 인증과 MyPage, 그리고 전체를 검증한 E2E 테스트다.콘텐츠 편집기 — TipTap관리자가 게시판·연구성과 같은..

Next.js App Router에서 next-intl locale 라우팅을 토대로 인증과 언어 협상을 미들웨어 한 장에 합성하고, canonical·hreflang x-default·Open Graph 메타데이터 생성기와 사이트맵·robots·JSON-LD로 SEO를 묶는다. 본문 바로가기·포커스 트랩·prefers-reduced-motion 접근성과 ISR·이미지 최적화 성능까지 다룬다.웹 국제화(i18n)와 SEO·접근성·성능 최적화를 적용한 과정을 정리한다. 2편: i18n·SEO·접근성·성능1편에서 콘텐츠 모델과 검색을 다뤘다. 기관 공식 사이트는 "기능"만큼이나 누구나, 어떤 언어로, 검색엔진에서도 잘 보이는가가 중요하다. 이번 편은 그 네 가지 — 국제화, SEO, 접근성, 성능이다.국제화(..