프로젝트 기간 : 2025.06.13 ~

프로젝트 동기 : 재택근무 시, 원활한 업무 진행과 회의를 위한 또는 온라인 스터디를 위한 프로젝트

사이트 : https://luppy-fe.vercel.app/

브랜드 소개

기능 정의서

디자인 참고

FrontEnd

BackEnd

AI Server

Database

배포

🗃️ 디렉토리 구조


👩‍💻FrontEnd/
├── src/
│	  ├── apis/                        # API 호출 함수들 
│	  │   ├── auth.ts
│	  ├── components/ 
│	  │   └── common/
│	  │       └── Avatar/
│	  │           ├── Avatar.tsx
│	  │           └── Avatar.module.css
│	  ├── context/                     # 데이터 공유  
│	  ├── hook/                        # 커스텀 훅
│	  │   └── useMediaStream.ts
│	  ├── pages/                        # 페이지 컴포넌트 
│	  ├── stores/                       # 전역 상태 관리  
│	  ├── styles/                       # 전역 스타일  
│	  ├── utils/        
│	  │   └── formatter.ts              # 유틸리티 함수 (날짜 포맷, 변환 등)
│   └─── assets/                       # 정적 파일 (이미지, 아이콘 등)
├── index.html  
└── vite.config.ts

🖥️BackEnd/
├── src/
│   ├── main.ts                      # 글로벌 파이프/필터/인터셉터
│   ├── app.module.ts
│   ├── config/
│   │   ├── config.module.ts
│   │   ├── env.validation.ts        # 환경변수 검증 (class-validator)
│   │   └── configuration.ts         # ConfigService 키맵
│   ├── common/
│   │   ├── dto/
│   │   │   └── pagination.dto.ts    # 공용 페이지네이션 DTO 
│   │   ├── filters/
│   │   │   └── http-exception.filter.ts
│   │   ├── guards/
│   │   │   └── jwt-auth.guard.ts
│   │   ├── interceptors/
│   │   │   └── logging.interceptor.ts
│   │   ├── decorators/
│   │   │   └── user.decorator.ts    # @User() 커스텀 데코레이터
│   │   └── utils/
│   │       └── cursor.ts            # 커서 인/디코드 유틸 (id, createdAt)
│   └──  auth/
│       ├── auth.module.ts
│       ├── auth.controller.ts
│       ├── auth.service.ts
│       ├── jwt.strategy.ts
│       └── dto/
│           └── login.dto.ts
├── test/                            # e2e/spec
├── .env.example
└── nest-cli.json / tsconfig.json / package.json

🤖AI-Server/
├── pycache/                    # 파이썬이 모듈을 빠르게 로드하기 위해 생성하는 컴파일 캐시(.pyc)
├── .venv/                      # 로컬 가상환경 폴더
├── src/ 
│   ├── clients/                # 외부 시스템과 통신하는 어댑터 계층
│   │   ├── llm.py                # LLM 호출 래퍼 
│   │   └── unsplash.py           # 비동기 HTTP 호출로 이미지 검색
│   ├── core/                   # 데이터 저장/인덱스 
│   │   └── config.py             #  애플리케이션 설정 로딩
│   ├── models/           
│   │   └── dto.py                # 요청/응답 스키마 정의
│   ├── routers/                # HTTP 엔드포인트          
│   │   └── analyze.py
│   ├── services/               # 도메인 로직
│   │   ├── image_analyzer.py     # 이미지 분석 서비스.
│   │   └── suggest.py            # 추천 조합 서비스.
│   └── main.py
├── .env                        # 환경변수  
└── README.md 

🖥️ 구현 화면