LX하우시스 의 한해 트랜트 상품 전시 및 이벤트 행사 를 진행하기 위한 페이지 개발
제품 및 트랜드 소개, 아카이브, 웨비나, 행사 예약시스템, 이벤트 관리 시스템 개발
트랜드한 디자인 표현을 위한 높은 수준의 모션 효과 적용
LX 프로젝트는 LX하우시스의 TRENDSHIP 브랜드를 위한 종합 디지털 플랫폼입니다. 연례 인테리어 디자인 트렌드 전시, 고객 관리, 이벤트 운영을 위한 3개의 독립적이면서도 유기적으로 연결된 시스템으로 구성되어 있습니다.

[프로젝트 구성]
lx-app: 사용자용 웹 애플리케이션
lx-admin: 관리자 대시보드
lx-api: 백엔드 API 서버

1.사용자 웹 애플리케이션
[개요]
TRENDSHIP 브랜드의 인테리어 디자인 트렌드 전시를 온라인으로 제공하고, 사용자가 행사에 참여하고 소통할 수 있는 프론트엔드 애플리케이션입니다.

[기술 스택]
Core - 프레임워크: Next.js (React 기반 SSR/SSG 지원) - 언어: TypeScript - 상태 관리: Recoil (경량 전역 상태 관리) - 인증: NextAuth (JWT 기반)
UI/UX - 스타일링: Styled Components (CSS-in-JS) - 애니메이션: GSAP, AOS (Animate On Scroll) - 슬라이더: Swiper - 폼 관리: React Hook Form
통합 서비스 - Firebase: 실시간 데이터베이스 및 푸시 알림 - 소셜 로그인: Kakao, Naver OAuth 연동 - HTTP 클라이언트: Axios

[주요 기능]
전시 콘텐츠
연도별 디자인 트렌드 전시 (2023/2024)
테마별 인터랙티브 콘텐츠 (Evoke, Find, Ore)
VR 동영상 및 반응형 Book UI
과거 아카이브 (2001-2022)

[사용자 기능]
회원가입/로그인 (이메일, SNS 간편 가입)
전시/행사 예약 및 신청
이벤트 참여 및 설문조사
1:1 문의 (파일 첨부 지원)
마이페이지 (신청 내역, 참여 이벤트, 상담 내역 관리)

[사용자 여정]
비회원: 전시 열람 → 회원가입 → 행사 신청 → 설문 참여 → 이벤트 응모
회원: 로그인 → 신청 내역 확인 → 문의 등록 → 계정 관리

[기술적 특징]
성능 최적화 - Next.js의 SSR/SSG를 활용한 초기 로딩 속도 개선 - 이미지 최적화 및 지연 로딩 - 코드 스플리팅으로 번들 사이즈 최소화
사용자 경험 - 완전한 반응형 디자인 (모바일/태블릿/데스크톱) - GSAP 기반 부드러운 페이지 전환 애니메이션 - Intersection Observer를 활용한 스크롤 애니메이션 - 동적 콘텐츠 로딩 (시간/날짜 기반 자동 페이지 전환)
보안 - JWT 토큰 기반 인증 - 클라이언트 사이드 토큰 관리 (세션 스토리지) - CI(개인 고유 식별자) 기반 중복 가입 방지 - AES 암호화 토큰 검증

[장점]
뛰어난 사용자 경험: GSAP, AOS를 활용한 풍부한 애니메이션으로 몰입감 있는 전시 경험 제공
유연한 콘텐츠 관리: 연도별, 테마별로 독립적인 페이지 구조로 쉬운 확장 가능
완전한 반응형: 모든 디바이스에서 최적화된 경험 제공
간편한 인증: SNS 로그인으로 사용자 진입 장벽 최소화
SEO 최적화: Next.js SSR로 검색 엔진 최적화 및 소셜 미디어 공유 최적화
2. lx-admin (관리자 대시보드)

[개요]
플랫폼의 모든 비즈니스 데이터를 관리하는 통합 관리자 웹 애플리케이션입니다.

[기술 스택]
Core - 프레임워크: Next.js (React 기반) - 언어: JavaScript - HTTP 클라이언트: Axios
UI 라이브러리 - 컴포넌트: Material-UI (MUI) - 스타일링: Emotion (MUI 통합) - 차트: ApexCharts (React ApexCharts) - 리치 에디터: Quill (React Quill)
폼 관리 - React Hook Form: 폼 상태 관리 - Yup: 스키마 기반 유효성 검증 - Formik: 복잡한 폼 처리
유틸리티 - 날짜 처리: date-fns - 파일 다운로드: file-saver (CSV 내보내기)

[주요 기능]
*데이터 관리
회원 관리: 전체 회원 조회, 상세 정보, 참여 이력, CSV 내보내기
행사 관리: 전시회/박람회 생성, 수정, 삭제, 참여자 관리, 예약 설정
이벤트 관리: 이벤트 CRUD, 응모자 당선 관리, 설문 결과 분석
콘텐츠 관리: 콘텐츠 이용 통계, 접근 로그 모니터링
문의 관리: 고객 문의 조회, 답변 작성, 상태 관리
FAQ 관리: FAQ 항목 등록, 수정, 공개/비공개 설정

*관리자 작업 흐름
로그인 → 대시보드 →
├─ 행사 생성 → 참여자 관리 → 통계 조회
├─ 이벤트 생성 → 응모자 확인 → 당첨자 선정
├─ 문의 확인 → 답변 작성 → 완료 처리
└─ 회원 관리 → 참여 이력 조회 → 데이터 내보내기

*기술적 특징
효율적인 데이터 처리 - 페이지네이션으로 대용량 데이터 효율적 로딩 - 다양한 필터링 및 검색 옵션 - CSV 내보내기로 데이터 분석 지원
직관적인 UI - Material-UI 기반 일관된 디자인 시스템 - 반응형 테이블 및 카드 레이아웃 - 토스트 알림으로 작업 결과 즉시 피드백
관계 데이터 관리 - 행사별 참여자 추적 - 회원별 참여 이력 조회 - 이벤트별 응모자 및 당첨자 관리
보안 - JWT 기반 관리자 인증 - 자동 세션 만료 처리 (401 에러 시) - 역할 기반 접근 제어

[장점]
통합 관리: 모든 비즈니스 데이터를 단일 대시보드에서 관리
생산성 향상: 직관적인 UI와 효율적인 CRUD 작업으로 관리 시간 단축
데이터 분석: CSV 내보내기 및 차트로 데이터 인사이트 획득
확장 가능: 모듈화된 구조로 새로운 관리 기능 추가 용이
검증된 UI 라이브러리: Material-UI로 안정적이고 접근성 높은 인터페이스 제공

3.백엔드 API 서버
[개요]
프론트엔드 애플리케이션들을 위한 RESTful API를 제공하는 백엔드 서버입니다.

[기술 스택]
Core - 프레임워크: NestJS (Node.js 기반 엔터프라이즈 프레임워크) - 언어: TypeScript - ORM: TypeORM
데이터베이스 - 주 DB: MySQL (사용자, 행사, 이벤트, 문의 등) - 부 DB: Oracle (SMS 발송 전용)
인증 및 보안 - 인증: JWT (JSON Web Tokens) - 암호화: Bcrypt (비밀번호 해싱), Crypto-JS (AES 암호화) - 보안: Throttler (Rate Limiting), Class Validator (입력 검증)
통합 서비스 - 클라우드: AWS S3 (파일 저장) - 인증: Firebase Admin (전화 인증), Google Auth Library - 소셜 로그인: Kakao, Naver OAuth - 이메일: Nodemailer + Handlebars (템플릿 이메일) - API 문서: Swagger (OpenAPI)

[주요 모듈]
IAM (인증 및 권한 관리)
로그인/회원가입 (이메일, SNS)
토큰 갱신 (Refresh Token)
비밀번호 재설정
전화번호 변경
회원 탈퇴
계정 잠금 (5회 실패 시)
Users (사용자 관리)

[사용자 CRUD]
프로필 관리
역할 관리 (user, corporate, admin)
CI(개인 식별 정보) 중복 확인
마케팅 동의 관리

[Boards]
행사/이벤트 게시글 관리
상태 관리 (PUBLIC, DRAFT, ARCHIVED)
참여자 추적
조회수 카운팅

[Contact]
문의 접수 (회원/비회원)
파일 첨부 지원 (S3 업로드)

[답변 관리]
카테고리별 분류
File (파일 관리)

[AWS S3 통합]
파일 업로드 (이미지, 문서)
UUID 기반 파일명 변환
날짜별 폴더 구조

[Survey]
설문 응답 수집
중복 응답 방지
JSON 형식 답변 저장

[SMS/알림톡]
SMS/MMS 발송
카카오톡(RCS) 발송
템플릿 기반 메시지
예약 발송 지원

[Counter & CounterLog]
이벤트 참여 횟수 추적
중복 참여 방지
상세 로그 기록
FAQ (자주 묻는 질문)

[FAQ CRUD]
카테고리 관리
공개/비공개 설정

[아키텍처 특징]
모듈화 설계 - 각 비즈니스 도메인별 독립 모듈 - 의존성 주입(Dependency Injection)으로 결합도 최소화 - Repository 패턴으로 데이터 접근 추상화
보안 계층 - JWT Bearer Token 인증 - 역할 기반 접근 제어(RBAC) - AES-256-CBC 암호화 - Rate Limiting으로 DDoS 방어 - 계정 잠금 메커니즘
데이터베이스 설계 - TypeORM 엔티티 기반 스키마 관리 - 관계형 데이터 모델링 - 인덱싱 최적화 - 마이그레이션 지원
확장성 - 멀티 데이터베이스 지원 (MySQL + Oracle) - 수평 확장 가능한 Stateless 아키텍처 - 마이크로서비스 전환 가능한 모듈 구조

[장점]
엔터프라이즈급 프레임워크: NestJS의 모듈화, 의존성 주입, 데코레이터로 유지보수성 극대화
타입 안정성: TypeScript와 TypeORM으로 컴파일 타임 오류 방지
자동 API 문서화: Swagger 통합으로 API 문서 자동 생성 및 테스트 지원
포괄적인 보안: 다층 보안 체계 (인증, 암호화, Rate Limiting, 입력 검증)
클라우드 네이티브: AWS S3, Firebase 등 클라우드 서비스 통합으로 확장성 확보
테스트 가능: Jest 기반 유닛/E2E 테스트 환경 구축
유연한 데이터베이스: 멀티 DB 지원으로 용도별 최적화 가능

[통합 기술 스택 요약]

*프론트엔드
프레임워크: Next.js (React 기반)
언어: TypeScript, JavaScript
상태 관리: Recoil
UI 라이브러리: Material-UI, Styled Components
애니메이션: GSAP, AOS
인증: NextAuth, JWT

*백엔드
프레임워크: NestJS (Node.js 기반)
언어: TypeScript
ORM: TypeORM
데이터베이스: MySQL, Oracle
인증: JWT, OAuth
보안: Bcrypt, AES, Rate Limiting

*인프라 및 서비스
파일 저장: AWS S3
실시간 데이터: Firebase
인증 서비스: Firebase Admin, Kakao, Naver
이메일: Nodemailer
SMS: 상용 SMS 서비스
API 문서: Swagger

[프로젝트의 주요 강점]
*기술적 강점
현대적 기술 스택
최신 프레임워크(Next.js, NestJS)로 생산성과 성능 확보
TypeScript로 타입 안정성 및 개발자 경험 향상
SSR/SSG로 SEO 최적화 및 초기 로딩 속도 개선

*모듈화 및 확장성
명확한 계층 분리 (프론트엔드, 백엔드, 관리자)
도메인별 독립 모듈로 유지보수 용이
마이크로서비스 전환 가능한 구조

*포괄적인 보안
다층 인증 체계 (JWT, OAuth, 전화 인증)
암호화 및 해싱으로 데이터 보호
Rate Limiting 및 계정 잠금으로 공격 방어

*뛰어난 사용자 경험
부드러운 애니메이션 및 인터랙션
완전한 반응형 디자인
SNS 간편 로그인으로 진입 장벽 최소화

*효율적인 관리 시스템
통합 대시보드로 모든 데이터 중앙 관리
CSV 내보내기 및 차트로 데이터 분석
직관적인 UI로 관리자 생산성 향상

*클라우드 네이티브
AWS S3로 확장 가능한 파일 저장
Firebase로 실시간 기능 구현
수평 확장 가능한 Stateless 아키텍처

*비즈니스 강점
통합 플랫폼: 전시, 행사, 이벤트, 고객 관리를 단일 시스템에서 처리
데이터 중심: 사용자 행동 추적, 통계 분석으로 의사 결정 지원
마케팅 자동화: SMS, 이메일 발송으로 고객 소통 자동화
확장 가능: 새로운 기능 추가가 용이한 모듈화 구조

[개발 방법론]
*코드 품질
ESLint: 코드 스타일 일관성 유지
TypeScript: 정적 타입 검사
Jest: 유닛 및 E2E 테스트
Prettier: 코드 포맷팅 자동화

[API 설계]
RESTful: 표준 HTTP 메서드 및 상태 코드
Swagger: 자동 API 문서 생성
Validation: Class Validator로 입력 검증
Error Handling: 일관된 에러 응답 형식

[데이터베이스]
TypeORM: 엔티티 기반 스키마 관리
Migration: 버전 관리 가능한 스키마 변경
Indexing: 쿼리 성능 최적화
Relation: 정규화된 관계형 데이터 모델

LX 프로젝트는 현대적인 웹 기술 스택을 기반으로 구축된 종합 디지털 플랫폼입니다.
Web은 사용자에게 몰입감 있는 전시 경험과 편리한 행사 참여 기능을 제공합니다.
관리툴은 관리자에게 효율적인 데이터 관리 도구를 제공합니다.
백엔드는는 안정적이고 확장 가능한 백엔드 인프라를 제공합니다.
세 시스템이 유기적으로 연결되어 디자인 트렌드 전시부터 고객 관리, 이벤트 운영까지 전체 비즈니스 프로세스를 지원하는 엔터프라이즈급 플랫폼입니다. 모듈화된 아키텍처, 포괄적인 보안, 뛰어난 사용자 경험, 클라우드 네이티브 설계로 지속적인 성장과 확장이 가능한 시스템입니다.