방문자는 기업·제품·자료 페이지를 조회하고 문의 폼으로 정보를 전송합니다. Next.js 서버 API가 문의를 검증하고 MySQL에 저장합니다. 운영자는 로그인 후 서명된 HttpOnly 세션을 사용해 관리자 API를 호출하고 제품·설비·자료·문의·메뉴 콘텐츠를 관리합니다. 리치 텍스트 HTML은 서버에서 정리하며 MySQL에 문서 내용과 상태·표시 순서를 저장합니다.
반응형 공개 사이트
홈페이지의 슬라이드와 회사·사업·제품·납품·고객지원 화면을 구성했습니다. DB 콘텐츠와 정적 소개 자료를 함께 제공합니다.
관리자 CMS
설비·사업분야·제품·납품·인증 자료·언론보도·자료실·문의·메뉴 콘텐츠를 관리합니다. 제품의 공개·임시저장·숨김 상태와 표시 순서를 지원합니다.
서버에서 입력값과 콘텐츠 형식을 확인하고 HTML을 정리한 뒤 SQL 파라미터로 저장·수정·삭제합니다.
04. 공개 표시와 문의 관리
공개 상태의 콘텐츠를 방문자에게 표시하고 문의는 서버 검증 후 저장해 관리자가 처리 상태를 확인하도록 구성했습니다.
가장 어려웠던 문제와 해결
여러 종류의 콘텐츠 운영
문제
단순 소개 문구뿐 아니라 제품·자료·설비·문의의 입력 항목과 운영 상태를 구분해야 했습니다.
해결 방법
콘텐츠 유형별 관리 컴포넌트와 API·SQL 테이블을 나누고 공개 상태·표시 순서·슬러그를 관리했습니다.
검증 결과
코드 구조를 확인하고 로컬 환경에서 제품 생성·조회·수정·삭제와 관리 화면을 검증했습니다.
서식 있는 제품 설명과 공개 화면 연결
문제
운영자가 편집한 표·이미지·링크 등을 상세 설명에 반영하면서 저장할 HTML의 범위를 관리할 필요가 있었습니다.
해결 방법
Tiptap 에디터와 HTML 정리 함수를 구성하고 텍스트·HTML 콘텐츠 형식을 구분했습니다.
검증 결과
실제 에디터 컴포넌트를 열어 로컬 시연용 제품 편집 화면을 캡처했습니다. 전체 HTML 보안 검증을 완료했다는 의미는 아닙니다.
내가 직접 구현한 것
의뢰 제작과 공개 페이지
기업의 제품·사업·자료를 소개하는 반응형 홈페이지를 제작했습니다.
운영자용 콘텐츠 관리
유형별 CRUD, 리치 텍스트 편집, 공개 상태와 표시 순서, 문의 관리 기능을 구현했습니다.
서버·DB·세션 연결
MySQL 데이터 모델, 관리자 API와 세션, 문의 입력 검증을 구성했습니다.
서버 구축·포트포워딩·서비스 운영
홈페이지 개발뿐 아니라 자체 Windows 서버 구축과 공유기 포트포워딩 설정까지 직접 담당해 서비스를 운영했습니다.
03 / RESULTS & VALIDATION
결과/검증 — 그래서 무엇이 좋아졌는가
실제 서비스 적용 여부
자체 Windows 서버를 직접 구축하고 공유기 포트포워딩을 설정해 더원에코파워텍 홈페이지를 서비스하고 있습니다.
기업 홈페이지와 CMS 구현
공개 정보 제공과 운영자의 콘텐츠 갱신을 같은 프로젝트에서 처리하도록 구성했습니다.
로컬 관리자 흐름 검증
분리된 MySQL 환경에서 비로그인 관리자 API의 401 응답과 실제 로그인, 제품 생성·조회·수정·삭제를 확인했습니다.
공개·관리 화면 실행 확인
홈페이지의 데스크톱·모바일 화면과 제품 소개, 설비·제품 관리, 리치 텍스트 편집 화면을 직접 실행해 캡처했습니다.
검증 방법과 근거
운영 환경변수를 복사하지 않은 임시 프로젝트와 별도 MySQL에서 실행했습니다. 현재 저장소의 코드와 실제 로컬 로그인·CRUD 응답을 확인했으며 원본 코드나 운영 DB는 변경하지 않았습니다. 운영 도메인·문의 전환율·실제 기업 성과 수치는 제공된 확인 자료가 없어 제시하지 않습니다.
