← 포트폴리오 목록
브랜드 기업 홈페이지
회사소개, 오시는 길, 문의하기, 뉴스/공지사항으로 구성된 반응형 기업 홈페이지를 React + Tailwind CSS로 구현합니다.
동적 브랜드 서브메뉴 구조 설계브랜드 추가 시 하위 메뉴가 자동 생성되는 트리 구조를 PostgreSQL 인접 리스트 모델로 설계합니다.
지도 API 연동 위치 안내 구현카카오맵 API로 사업장 좌표를 렌더링하고 주소·연락처 정보를 함께 노출하는 컴포넌트를 구현합니다.
문의 폼 자동 이메일 발송 파이프라인 구축Nodemailer 기반 SMTP 큐를 구현하여 문의 접수 즉시 관리자 이메일로 알림을 전송합니다.
Overview
프로젝트 개요
회사소개, 오시는 길, 문의하기, 뉴스/공지사항으로 구성된 반응형 기업 홈페이지를 React + Tailwind CSS로 구현합니다. 지도 API 연동과 문의 폼 자동 이메일 발송 구조를 Express + Prisma 기반 백엔드로 함께 설계합니다.
요구사항 정의
프로젝트 핵심 과제
프로젝트 진행 시 해결한 핵심 기술 과제입니다.
브랜드 추가/삭제 시 메뉴 트리 깊이가 가변적으로 변하는 구조를 일관되게 렌더링하는 로직 설계
언론 보도·방송 출연 등 이종 콘텐츠 타입을 하나의 뉴스/공지 게시판에서 통합 관리하는 스키마 설계
지도 API 응답 지연 시에도 오시는 길 페이지가 자연스럽게 로딩되
처리하는 구조 필요
구현 내용
핵심 기능 상세
핵심 기능 1
회사소개
기업 히스토리와 핵심 사업 영역을 심플한 레이아웃으로 소개하고, 언론 보도·방송 출연 이력과 광고 모델 콘텐츠를 함께 노출합니다
핵심 기능 2
오시는 길
카카오맵 API로 사업장 위치를 표시하고 주소·연락처·대중교통 안내를 제공합니다. 지도와 정보 패널이 함께 반응형으로 재배치되는 구조를 구현합니다
핵심 기능 3
문의하기
이름, 연락처, 문의내용을 입력하면 관리자 이메일로 자동 발송되는 문의 폼을 구현합니다. 폼 유효성 검증과 발송 상태 기록을 함께 처리하는 구조로 설계합니다
핵심 기능 4
뉴스/공지사항
공지사항 글을 등록/수정/삭제하고 카테고리 분류와 검색 기능을 제공합니다. 관리자 등록과 공개 목록이 같은 스키마를 공유하는 구조로 설계합니다
구현 과정
프로젝트 진행 단계
STEP 1
정보구조 설계 및 UI 컴포넌트 설계
회사소개·오시는길·문의·뉴스 메뉴 트리와 브랜드 서브메뉴 확장 구조를 설계하고 반응형 컴포넌트 8종을 정의합니다.
STEP 2
퍼블릭 홈페이지 프론트엔드 구현
React + Tailwind CSS로 히어로/지도연동/뉴스 리스트 등 8개 화면을 반응형으로 구현합니다.
STEP 3
문의·뉴스 API 및 DB 스키마 개발
Express + Prisma로 문의 접수, 자동 이메일 발송, 뉴스 CRUD API 12개 엔드포인트를 구현합니다.
STEP 4
통합 테스트 및 반응형 검증
3개 뷰포트 반응형 레이아웃 검증과 문의 폼 이메일 발송 통합 테스트를 진행합니다.
프로젝트 성과
주요 성과
동적 브랜드 서브메뉴 구조 설계브랜드 추가 시 하위 메뉴가 자동 생성되는 트리 구조를 PostgreSQL 인접 리스트 모델로 설계합니다.
지도 API 연동 위치 안내 구현카카오맵 API로 사업장 좌표를 렌더링하고 주소·연락처 정보를 함께 노출하는 컴포넌트를 구현합니다.
문의 폼 자동 이메일 발송 파이프라인 구축Nodemailer 기반 SMTP 큐를 구현하여 문의 접수 즉시 관리자 이메일로 알림을 전송합니다.
Highlights
기술적 주안점
- 심플한 정보구조를 유지하면서도 이종 콘텐츠(보도·광고·연혁)를 하나의 카드 시스템으로 흡수하는 컴포넌트 구조를 설계합니다
- 지도 API 의존성이 끊겨도 오시는 길 정보가 항상 노출되도록 폴백 구조를 함께 설계합니다
- 문의 접수와 이메일 발송을 동일 트랜잭션으로 묶어 발송 실패 시에도 접수 데이터가 유실되지 않는 구조를 구현합니다
