어드민 화면 기본 layout 설정

boot/office/build.gradle

@@ -22,12 +22,14 @@ repositories {
 }
 
 dependencies {
+    implementation project(':data:office-data')
     implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
     implementation 'org.springframework.boot:spring-boot-starter-web'
-    testImplementation 'org.springframework.boot:spring-boot-starter-test'
-    testRuntimeOnly 'org.junit.platform:junit-platform-launcher'
+    implementation 'nz.net.ultraq.thymeleaf:thymeleaf-layout-dialect'
+    compileOnly 'org.projectlombok:lombok'
+    annotationProcessor 'org.projectlombok:lombok'
 }
 
 tasks.named('test') {
     useJUnitPlatform()
-}
+}

boot/office/src/main/java/com/clip/office/OfficeApplication.java → boot/office/src/main/java/com/clip/OfficeApplication.java

@@ -1,8 +1,12 @@
-package com.clip.office;
+package com.clip;
 
 import org.springframework.boot.SpringApplication;
 import org.springframework.boot.autoconfigure.SpringBootApplication;
+import org.springframework.boot.context.properties.ConfigurationPropertiesScan;
+import org.springframework.data.jpa.repository.config.EnableJpaAuditing;
 
+@EnableJpaAuditing
+@ConfigurationPropertiesScan
 @SpringBootApplication
 public class OfficeApplication {
 

boot/office/src/main/java/com/clip/office/content/ContentController.java

@@ -0,0 +1,14 @@
+package com.clip.office.content;
+
+import org.springframework.stereotype.Controller;
+import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.RequestMapping;
+
+@Controller
+@RequestMapping("/")
+public class ContentController {
+
+    public String home() {
+        return "index";
+    }
+}

boot/office/src/main/resources/static/css/style.css

@@ -0,0 +1,189 @@
+/* 공통 스타일 */
+
+html, body {
+    margin: 0;
+    padding: 0;
+    height: 100%;
+    width: 100%;
+    font-family: Arial, sans-serif;
+}
+
+body {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+}
+
+.header {
+    display: flex;
+    width: 100%;
+    height: 50px;
+    align-items: center;
+    background-color: white;
+    border-bottom: 1px solid #F2F4F6;
+}
+
+.left-section {
+    display: flex;
+    align-items: center;
+    width: 230px;
+    padding-left: 10px;
+}
+
+.icon-image {
+    width: 24px;
+    height: 18px;
+    margin-right: 10px;
+}
+
+.title-image {
+    width: 98px;
+    height: 23px;
+    margin-right: 10px;
+}
+
+.admin-text {
+    font-size: 16px;
+    font-weight: bold;
+    color: black;
+    padding-left: 10px;
+}
+
+.right-section {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    flex-grow: 1;
+    padding-right: 20px;
+}
+
+.logout-text {
+    font-size: 16px;
+    font-weight: bold;
+    color: black;
+    cursor: pointer;
+}
+
+.main-container {
+    display: flex;
+    height: calc(100vh - 50px);
+    overflow: hidden;
+}
+
+.sidebar {
+    width: 230px;
+    background-color: white;
+    color: #B5B5B5;
+    padding-top: 20px;
+    position: fixed;
+    top: 50px;
+    bottom: 0;
+}
+
+.sidebar ul {
+    list-style-type: none;
+    padding: 0;
+}
+
+.sidebar li {
+    margin-bottom: 10px;
+}
+
+.sidebar label {
+    display: block;
+    padding: 10px;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+}
+
+.sidebar input[type="radio"]:checked + label {
+    background-color: #F2F4F6;
+    color: #391085;
+}
+
+.content {
+    flex-grow: 1;
+    margin-left: 230px;
+    background-color: #F2F4F6;
+    height: calc(100vh - 50px);
+    overflow-y: auto;
+    padding: 20px;
+    display: flex;
+}
+
+.tab-container {
+    display: flex;
+    margin-bottom: 20px;
+}
+
+.tab-button {
+    flex: 1;
+    padding: 10px;
+    text-align: center;
+    background-color: white;
+    border: 1px solid #D9D9D9;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: background-color 0.3s ease, color 0.3s ease;
+}
+
+.tab-button.active {
+    background-color: #391085;
+    color: white;
+}
+
+.table-container {
+    height: calc(100% - 100px);
+    overflow-y: auto;
+}
+
+table {
+    width: 100%;
+    border-collapse: separate;
+    border-spacing: 0;
+}
+
+thead {
+    position: sticky;
+    top: 0;
+    background-color: #EDEDED;
+    z-index: 1;
+}
+
+thead th {
+    padding: 10px;
+    text-align: left;
+    border-bottom: 1px solid #D9D9D9;
+}
+
+tbody td {
+    padding: 10px;
+    border-bottom: 1px solid #D9D9D9;
+}
+
+.status-button {
+    padding: 5px 10px;
+    border-radius: 4px;
+    cursor: pointer;
+}
+
+.status-button.match {
+    background-color: #391085;
+    color: white;
+}
+
+.pagination {
+    display: flex;
+    justify-content: center;
+    margin-top: 20px;
+}
+
+.pagination button {
+    margin-right: 5px;
+    padding: 5px 10px;
+}
+
+.pagination button.active {
+    background-color: #391085;
+    color: white;
+}

boot/office/src/main/resources/templates/fragments/content.html

@@ -0,0 +1,50 @@
+<div th:fragment="content">
+    <div class="content">
+        <div class="tab-container">
+            <button class="tab-button active">원띵모임</button>
+            <button class="tab-button">번개모임</button>
+            <button class="tab-button">랜덤모임</button>
+        </div>
+        <div class="table-container">
+            <!-- 테이블 컨텐츠 -->
+            <table>
+                <thead>
+                <tr>
+                    <th>No</th>
+                    <th>닉네임</th>
+                    <th>전화번호</th>
+                    <th>원명</th>
+                    <th>직종</th>
+                    <th>연애상태</th>
+                    <th>식단</th>
+                    <th>선호언어</th>
+                    <th>지역</th>
+                    <th>매칭</th>
+                </tr>
+                </thead>
+                <tbody>
+                <!-- 반복 데이터 예시 -->
+                <tr>
+                    <td>1</td>
+                    <td>민민민민</td>
+                    <td>5469-8944</td>
+                    <td>자기개발</td>
+                    <td>직종</td>
+                    <td>싱글</td>
+                    <td>상관없음</td>
+                    <td>영어</td>
+                    <td>강남</td>
+                    <td><button class="status-button match">매칭전</button></td>
+                </tr>
+                </tbody>
+            </table>
+
+            <!-- 페이지네이션 -->
+            <div class="pagination">
+                <button>&lt;</button>
+                <!-- 페이지 번호 -->
+                <button class="active">1</button><button>2</button><button>3</button><button>...</button><button>&gt;</button>
+            </div>
+        </div>
+    </div>
+</div>

boot/office/src/main/resources/templates/fragments/header.html

@@ -0,0 +1,12 @@
+<header th:fragment="header">
+    <div class="header">
+        <div class="left-section">
+            <img src="/icon/headerIcon.png" class="icon-image">
+            <img src="/icon/headerTitle.png" class="title-image">
+            <span class="admin-text">ADMIN</span>
+        </div>
+        <div class="right-section">
+            <span class="logout-text">LOGOUT</span>
+        </div>
+    </div>
+</header>

boot/office/src/main/resources/templates/fragments/sidebar.html

@@ -0,0 +1,16 @@
+<div th:fragment="sidebar" class="sidebar">
+    <ul>
+        <li>
+            <input type="radio" id="item1" name="menu" hidden>
+            <label for="item1">신청정보</label>
+        </li>
+        <li>
+            <input type="radio" id="item2" name="menu" hidden>
+            <label for="item2">모임관리</label>
+        </li>
+        <li>
+            <input type="radio" id="item3" name="menu" hidden>
+            <label for="item3">정보관리</label>
+        </li>
+    </ul>
+</div>

boot/office/src/main/resources/templates/index.html

@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{layout/layout}">
+<head>
+    <title>OneThing</title>
+</head>
+</html>

boot/office/src/main/resources/templates/layout/layout.html

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
+<head>
+    <meta charset="UTF-8">
+    <title>OneThing</title>
+    <link th:href="@{/css/style.css}" rel="stylesheet">
+</head>
+<body>
+<!-- Header -->
+<div th:replace="~{fragments/header :: header}"></div>
+
+<!-- Sidebar and Content -->
+    <div th:replace="~{fragments/sidebar :: sidebar}"></div>
+    <div th:replace="~{fragments/content :: content}">
+        <!-- 페이지별 컨텐츠 삽입 -->
+    </div>
+
+</body>
+</html>

data/office-data/build.gradle

@@ -1,5 +1,6 @@
 plugins {
     id 'java'
+    id 'java-library'
     id 'org.springframework.boot' version '3.4.3'
     id 'io.spring.dependency-management' version '1.1.7'
 }
@@ -27,14 +28,16 @@ repositories {
 }
 
 dependencies {
-    implementation 'org.springframework.boot:spring-boot-starter-data-jpa'
+    api 'org.springframework.boot:spring-boot-starter-data-jpa'
     implementation 'org.flywaydb:flyway-core'
     implementation 'org.flywaydb:flyway-mysql'
     compileOnly 'org.projectlombok:lombok'
     runtimeOnly 'com.mysql:mysql-connector-j'
     annotationProcessor 'org.projectlombok:lombok'
     testImplementation 'org.springframework.boot:spring-boot-starter-test'
     testRuntimeOnly 'org.junit.platform:junit-platform-launcher'
+    implementation 'org.springframework.boot:spring-boot-starter-validation'
+    implementation 'nz.net.ultraq.thymeleaf:thymeleaf-layout-dialect'
 }
 
 tasks.named('test') {

settings.gradle

@@ -3,4 +3,5 @@ include 'data:core-data'
 include 'data:office-data'
 include 'boot:api'
 include 'boot:batch'
-include 'boot:office'
+include 'boot:office'
+include 'infra'