Spring Boot + Kotlin 기반의 패션 커머스 웹 애플리케이션입니다.
- Backend: Kotlin + Spring Boot (MVC, Thymeleaf)
- Frontend: Tailwind CSS + daisyUI v5, Lucide icons, Alpine.js
- Database: PostgreSQL, jOOQ
- Build: Gradle (Kotlin DSL)
- Container: Jib (Docker 데몬 불필요)
src/
├─ main/
│ ├─ kotlin/
│ │ └─ project/stylo/
│ │ ├─ auth/ # 인증 및 @Auth 리졸버
│ │ ├─ common/ # 공통 설정, 예외, 유틸
│ │ ├─ web/
│ │ │ ├─ controller/ # 얇은 MVC 컨트롤러 (뷰 이름 반환)
│ │ │ ├─ dao/ # 데이터 액세스
│ │ │ ├─ domain/ # 도메인 모델
│ │ │ ├─ dto/ # 요청/응답 DTO
│ │ │ └─ service/ # 비즈니스 로직
│ │ └─ StyloApplication.kt
│ └─ resources/
│ ├─ static/
│ │ └─ css/
│ │ ├─ input.css # Tailwind 입력 (소스)
│ │ └─ output.css # Tailwind 결과 (서빙 경로: /css/output.css)
│ └─ templates/
│ ├─ layout/
│ │ └─ base.html # 모든 페이지가 상속하는 레이아웃
│ ├─ components/ # 재사용 가능한 UI 조각
│ ├─ index.html # 메인 페이지
│ └─ not-found.html # 404 페이지
- 모든 페이지는
templates/layout/base.html을layout:decorate로 확장해야 합니다. - 페이지 본문은 반드시
layout:fragment="content"안에 배치합니다. - daisyUI v5 컴포넌트를 우선 사용합니다:
btn,card,badge,alert,join등. - 데이터 바인딩은
th:text,th:if,th:each를 사용하고, 집계는list.![prop]프로젝션을 활용합니다.- 예)
#aggregates.sum(cartItems.![totalPrice])
- 예)
- Lucide 아이콘은
<i data-lucide="heart">형식으로 사용하며,base.html에서lucide.createIcons()가 1회 실행되어야 합니다.
- 최대한 얇게 유지하고 뷰 이름만 반환합니다. 모델에는 단순 속성만 추가합니다.
- 인증이 필요한 경우
@Auth Member를 사용합니다 (기존 컨트롤러와 동일한 패턴). - 라우팅은 복수 자원명 사용:
/products,/cart,/orders.
- 작은 클래스를 선호하고, 함수는 가급적 30줄 내외로 유지합니다.
- 불변
val사용, 빠른 반환(early return), 명확한 네이밍. - 예외는 기존
BaseException+ 타입과 예외 enum을 사용합니다.
- daisyUI v5 기반 레이아웃과 컨트롤을 사용하고,
<html data-theme="light">를 기본으로 합니다. - 간격/레이아웃은 Tailwind 유틸리티(
px-4 py-8,space-y-*,gap-*)로 구성합니다. - 버튼: 주 버튼
btn btn-primary, 보조 버튼btn btn-ghost.
- Tailwind CSS v3.4.x + daisyUI v5 사용.
- 스타일은
/css/output.css경로로 서빙됩니다(정적 리소스:src/main/resources/static/css/output.css).
설치 및 빌드
# 프론트 의존성 설치
npm install
# 개발용 1회 빌드
npm run build:css
# 변경 감지(Watch)
npm run watch:css- Lucide 아이콘, Alpine.js 초기화는
layout/base.html에서 수행합니다.
애플리케이션 실행
./gradlew bootRun백엔드 빌드/테스트
# 전체 빌드 (테스트 포함)
./gradlew build- 테스트는 빠르고(isolated) 명확한 이름으로 작성합니다.
프론트 CSS Watch는 별도 터미널에서 실행하세요:
npm run watch:css- 애플리케이션 설정:
src/main/resources/application.yml - 환경 변수:
.env를 사용할 수 있으며, 로컬 개발 시 데이터베이스/외부 키를 관리합니다. - 데이터베이스: PostgreSQL. jOOQ 사용 시 Gradle 태스크로 코드 생성하도록 구성할 수 있습니다.
이 프로젝트는 Google Jib Gradle 플러그인으로 컨테이너 이미지를 생성합니다.
로컬 Docker 데몬에 이미지 빌드
./gradlew jib jibDockerBuild타르 파일로 이미지 내보내기
./gradlew jib jibBuildTar레지스트리로 바로 푸시
./gradlew jib jib- 태그는
${version}과latest가 함께 적용됩니다. - Docker Hub 사용 시 Personal Access Token 사용을 권장합니다.