generated from pricelees/issue-pr-template
pricelees
bdc99c7883
<!-- 제목 양식 --> <!-- [이슈번호] 작업 요약 (예시: [#10] Gitea 템플릿 생성) --> ## 📝 관련 이슈 및 PR **PR과 관련된 이슈 번호** - #37 ## ✨ 작업 내용 <!-- 어떤 작업을 했는지 알려주세요! --> - 가격, 시간 등 테마를 정의하는데 필요하다고 느껴지는 필드 추가 - JPA Auditing으로 감사 정보 확인 기능 추가 - 프론트엔드 페이지 디자인 변경 및 새로운 API 반영 ## 🧪 테스트 <!-- 어떤 테스트를 생각했고 진행했는지 알려주세요! --> 6db81feb9b 을 바탕으로 향후 다른 모든 기능의 테스트를 통합 테스트로 전환할 예정. 지금은 불필요한 테스트가 너무 많다고 느껴짐. ## 📚 참고 자료 및 기타 <!-- 참고한 자료, 또는 논의할 사항이 있다면 알려주세요! --> - FInder / Writer / Validator 구조를 수정할 필요가 있음. 복잡하고 가독성이 낮은 로직만 별도로 빼는 것이 더 효율적이라고 판단됨. Reviewed-on: #38 Co-authored-by: pricelees <priceelees@gmail.com> Co-committed-by: pricelees <priceelees@gmail.com>
237 lines
4.2 KiB
CSS
237 lines
4.2 KiB
CSS
:root {
|
|
--primary-color: #007bff;
|
|
--secondary-color: #6c757d;
|
|
--danger-color: #dc3545;
|
|
--light-gray-color: #f8f9fa;
|
|
--dark-gray-color: #343a40;
|
|
--border-color: #dee2e6;
|
|
--input-bg-color: #fff;
|
|
--text-color: #212529;
|
|
--label-color: #495057;
|
|
--white-color: #ffffff;
|
|
--box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
|
|
--border-radius: 8px;
|
|
}
|
|
|
|
*, *::before, *::after {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.admin-theme-edit-container {
|
|
padding: 2rem 0;
|
|
background-color: var(--light-gray-color);
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.centered-layout {
|
|
max-width: 1024px;
|
|
margin: 0 auto;
|
|
padding: 0 2rem;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.centered-layout {
|
|
padding: 0 1rem;
|
|
}
|
|
}
|
|
|
|
.page-header {
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.page-title {
|
|
font-size: 2rem;
|
|
font-weight: 700;
|
|
color: var(--dark-gray-color);
|
|
}
|
|
|
|
.form-card {
|
|
background-color: var(--white-color);
|
|
padding: 2rem;
|
|
border-radius: var(--border-radius);
|
|
box-shadow: var(--box-shadow);
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.form-section {
|
|
margin-bottom: 1.5rem;
|
|
padding-bottom: 1.5rem;
|
|
border-bottom: 1px solid var(--border-color);
|
|
}
|
|
|
|
.form-section:last-of-type {
|
|
margin-bottom: 0;
|
|
padding-bottom: 0;
|
|
border-bottom: none;
|
|
}
|
|
|
|
.form-row {
|
|
display: flex;
|
|
gap: 1.5rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.form-row:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.form-group {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.form-group.full-width {
|
|
flex-basis: 100%;
|
|
}
|
|
|
|
.form-label {
|
|
font-size: 0.9rem;
|
|
font-weight: 600;
|
|
color: var(--label-color);
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.form-input,
|
|
.form-textarea,
|
|
.form-select {
|
|
width: 100%;
|
|
padding: 0.75rem 1rem;
|
|
font-size: 1rem;
|
|
line-height: 1.5;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 4px;
|
|
background-color: var(--input-bg-color);
|
|
color: var(--text-color);
|
|
transition: border-color 0.2s, box-shadow 0.2s;
|
|
height: 3rem; /* 48px */
|
|
}
|
|
|
|
.form-input:disabled,
|
|
.form-textarea:disabled,
|
|
.form-select:disabled {
|
|
background-color: #e9ecef;
|
|
opacity: 1;
|
|
}
|
|
|
|
.form-input:focus,
|
|
.form-textarea:focus,
|
|
.form-select:focus {
|
|
outline: none;
|
|
border-color: var(--primary-color);
|
|
box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
|
|
}
|
|
|
|
.form-textarea {
|
|
height: auto;
|
|
min-height: 120px;
|
|
resize: vertical;
|
|
}
|
|
|
|
.button-group {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
margin-top: 2rem;
|
|
}
|
|
|
|
.main-actions {
|
|
display: flex;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.btn {
|
|
padding: 0.75rem 1.5rem;
|
|
font-size: 1rem;
|
|
font-weight: 600;
|
|
border: none;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
transition: background-color 0.2s, transform 0.1s;
|
|
text-align: center;
|
|
}
|
|
|
|
.main-actions .btn {
|
|
padding: 0.85rem 2.8rem;
|
|
}
|
|
|
|
.btn:active {
|
|
transform: translateY(1px);
|
|
}
|
|
|
|
.btn-primary {
|
|
background-color: var(--primary-color);
|
|
color: var(--white-color);
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
background-color: #0056b3;
|
|
}
|
|
|
|
.btn-secondary {
|
|
background-color: var(--secondary-color);
|
|
color: var(--white-color);
|
|
}
|
|
|
|
.btn-secondary:hover {
|
|
background-color: #5a6268;
|
|
}
|
|
|
|
.btn-danger {
|
|
background-color: var(--danger-color);
|
|
color: var(--white-color);
|
|
}
|
|
|
|
.btn-danger:hover {
|
|
background-color: #c82333;
|
|
}
|
|
|
|
.audit-info {
|
|
background-color: var(--white-color);
|
|
padding: 1.5rem;
|
|
border-radius: var(--border-radius);
|
|
box-shadow: var(--box-shadow);
|
|
margin-top: 2rem;
|
|
}
|
|
|
|
.audit-title {
|
|
font-size: 1.2rem;
|
|
font-weight: 600;
|
|
color: var(--dark-gray-color);
|
|
margin-bottom: 1rem;
|
|
padding-bottom: 0.75rem;
|
|
border-bottom: 1px solid var(--border-color);
|
|
}
|
|
|
|
.audit-body p {
|
|
margin: 0.5rem 0;
|
|
font-size: 0.9rem;
|
|
color: var(--label-color);
|
|
}
|
|
|
|
.audit-body p strong {
|
|
color: var(--dark-gray-color);
|
|
margin-right: 0.5rem;
|
|
}
|
|
|
|
.delete-section {
|
|
margin-top: 2rem;
|
|
padding-top: 1.5rem;
|
|
border-top: 1px solid var(--border-color);
|
|
text-align: center;
|
|
}
|
|
|
|
.btn-delete-text {
|
|
background: none;
|
|
border: none;
|
|
color: var(--danger-color);
|
|
text-decoration: underline;
|
|
cursor: pointer;
|
|
font-size: 0.9rem;
|
|
padding: 0.5rem;
|
|
}
|
|
|
|
.btn-delete-text:hover {
|
|
color: #a71d2a;
|
|
}
|