LX하우시스 트랜트쉽 Popup 서비스 개발
- 프로젝트 유형
- 웹솔루션 개발
- 날짜
- 2024년 1Q
- 역할
- Frontend 및 Backend 개발, AWS인프라 구축, 문자/본인인증등 모듈 연동
- 기술스택
- Next JS, Typescript, Styled component, Recoil, MUI, Nest JS, MySQL
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 클라이언트: AxiosUI 라이브러리 - 컴포넌트: 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상태 관리: RecoilUI 라이브러리: Material-UI, Styled Components애니메이션: GSAP, AOS인증: NextAuth, JWT백엔드프레임워크: NestJS (Node.js 기반)언어: TypeScriptORM: TypeORM데이터베이스: MySQL, Oracle인증: JWT, OAuth보안: Bcrypt, AES, Rate Limiting인프라 및 서비스파일 저장: AWS S3실시간 데이터: Firebase인증 서비스: Firebase Admin, Kakao, Naver이메일: NodemailerSMS: 상용 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은 사용자에게 몰입감 있는 전시 경험과 편리한 행사 참여 기능을 제공합니다.관리툴은 관리자에게 효율적인 데이터 관리 도구를 제공합니다.백엔드는는 안정적이고 확장 가능한 백엔드 인프라를 제공합니다.세 시스템이 유기적으로 연결되어 디자인 트렌드 전시부터 고객 관리, 이벤트 운영까지 전체 비즈니스 프로세스를 지원하는 엔터프라이즈급 플랫폼입니다. 모듈화된 아키텍처, 포괄적인 보안, 뛰어난 사용자 경험, 클라우드 네이티브 설계로 지속적인 성장과 확장이 가능한 시스템입니다.
