-
- -
- Reservation
-
- {!loggedIn ? (
- -
- Login
-
- ) : (
- -
-
-
- {userName}
-
-
-
- )}
-
+
);
};
-export default Navbar;
\ No newline at end of file
+export default Navbar;
diff --git a/frontend/src/css/admin-page.css b/frontend/src/css/admin-page.css
new file mode 100644
index 00000000..6d228b8b
--- /dev/null
+++ b/frontend/src/css/admin-page.css
@@ -0,0 +1,17 @@
+/* /src/css/admin-page.css */
+.admin-container {
+ max-width: 1200px;
+ margin: 40px auto;
+ padding: 40px;
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+ background-color: #f4f6f8;
+ border-radius: 16px;
+}
+
+.admin-container .page-title {
+ font-size: 32px;
+ font-weight: 700;
+ color: #333d4b;
+ margin-bottom: 30px;
+ text-align: center;
+}
diff --git a/frontend/src/css/admin-reservation-page.css b/frontend/src/css/admin-reservation-page.css
new file mode 100644
index 00000000..c51b72f8
--- /dev/null
+++ b/frontend/src/css/admin-reservation-page.css
@@ -0,0 +1,160 @@
+/* /src/css/admin-reservation-page.css */
+.admin-reservation-container {
+ max-width: 1400px;
+ margin: 40px auto;
+ padding: 40px;
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+ background-color: #f4f6f8;
+ border-radius: 16px;
+}
+
+.admin-reservation-container .page-title {
+ font-size: 32px;
+ font-weight: 700;
+ color: #333d4b;
+ margin-bottom: 30px;
+ text-align: center;
+}
+
+.admin-reservation-content {
+ display: flex;
+ gap: 40px;
+}
+
+.reservations-main {
+ flex-grow: 1;
+}
+
+.filter-section {
+ width: 300px;
+ flex-shrink: 0;
+}
+
+.section-card {
+ background-color: #ffffff;
+ border-radius: 12px;
+ padding: 24px;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+}
+
+.section-card .card-title {
+ font-size: 20px;
+ font-weight: 600;
+ color: #333d4b;
+ margin-bottom: 20px;
+}
+
+.table-header {
+ display: flex;
+ justify-content: flex-end;
+ margin-bottom: 20px;
+}
+
+.table-container table {
+ width: 100%;
+ border-collapse: collapse;
+ font-size: 15px;
+}
+
+.table-container th,
+.table-container td {
+ padding: 12px 16px;
+ text-align: left;
+ border-bottom: 1px solid #e5e8eb;
+ vertical-align: middle;
+}
+
+.table-container th {
+ background-color: #f9fafb;
+ color: #505a67;
+ font-weight: 600;
+}
+
+.table-container tr:last-child td {
+ border-bottom: none;
+}
+
+.table-container tr:hover {
+ background-color: #f4f6f8;
+}
+
+.form-group {
+ margin-bottom: 16px;
+}
+
+.form-label {
+ display: block;
+ margin-bottom: 8px;
+ font-size: 14px;
+ font-weight: 600;
+ color: #4E5968;
+}
+
+.form-input,
+.form-select {
+ width: 100%;
+ padding: 10px 12px;
+ font-size: 15px;
+ border: 1px solid #E5E8EB;
+ border-radius: 8px;
+ box-sizing: border-box;
+ transition: border-color 0.2s, box-shadow 0.2s;
+}
+
+.form-input:focus,
+.form-select:focus {
+ outline: none;
+ border-color: #3182F6;
+ box-shadow: 0 0 0 3px rgba(49, 130, 246, 0.2);
+}
+
+.btn {
+ padding: 8px 16px;
+ font-size: 15px;
+ font-weight: 600;
+ border-radius: 8px;
+ border: none;
+ cursor: pointer;
+ transition: background-color 0.2s;
+}
+
+.btn-primary {
+ background-color: #3182F6;
+ color: #ffffff;
+}
+
+.btn-primary:hover {
+ background-color: #1B64DA;
+}
+
+.btn-secondary {
+ background-color: #F2F4F6;
+ color: #4E5968;
+}
+
+.btn-secondary:hover {
+ background-color: #E5E8EB;
+}
+
+.btn-danger {
+ background-color: #e53e3e;
+ color: white;
+}
+
+.btn-danger:hover {
+ background-color: #c53030;
+}
+
+.filter-section .btn-primary {
+ width: 100%;
+ margin-top: 10px;
+}
+
+.editing-row td {
+ padding-top: 20px;
+ padding-bottom: 20px;
+}
+
+.editing-row .btn {
+ margin-right: 8px;
+}
diff --git a/frontend/src/css/admin-theme-edit-page.css b/frontend/src/css/admin-theme-edit-page.css
new file mode 100644
index 00000000..78d2194d
--- /dev/null
+++ b/frontend/src/css/admin-theme-edit-page.css
@@ -0,0 +1,236 @@
+: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;
+}
diff --git a/frontend/src/css/admin-theme-page.css b/frontend/src/css/admin-theme-page.css
new file mode 100644
index 00000000..659eeccd
--- /dev/null
+++ b/frontend/src/css/admin-theme-page.css
@@ -0,0 +1,121 @@
+/* /src/css/admin-theme-page.css */
+.admin-theme-container {
+ max-width: 1200px;
+ margin: 40px auto;
+ padding: 40px;
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+ background-color: #f4f6f8;
+ border-radius: 16px;
+}
+
+.admin-theme-container .page-title {
+ font-size: 32px;
+ font-weight: 700;
+ color: #333d4b;
+ margin-bottom: 30px;
+ text-align: center;
+}
+
+.section-card {
+ background-color: #ffffff;
+ border-radius: 12px;
+ padding: 24px;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+}
+
+.table-header {
+ display: flex;
+ justify-content: flex-end;
+ margin-bottom: 20px;
+}
+
+.table-container table {
+ width: 100%;
+ border-collapse: collapse;
+ font-size: 15px;
+}
+
+.table-container th,
+.table-container td {
+ padding: 12px 16px;
+ text-align: left;
+ border-bottom: 1px solid #e5e8eb;
+ vertical-align: middle;
+ word-break: break-all;
+}
+
+.table-container th {
+ background-color: #f9fafb;
+ color: #505a67;
+ font-weight: 600;
+}
+
+.table-container tr:last-child td {
+ border-bottom: none;
+}
+
+.table-container tr:hover {
+ background-color: #f4f6f8;
+}
+
+.form-input {
+ width: 100%;
+ padding: 10px 12px;
+ font-size: 15px;
+ border: 1px solid #E5E8EB;
+ border-radius: 8px;
+ box-sizing: border-box;
+ transition: border-color 0.2s, box-shadow 0.2s;
+}
+
+.form-input:focus {
+ outline: none;
+ border-color: #3182F6;
+ box-shadow: 0 0 0 3px rgba(49, 130, 246, 0.2);
+}
+
+.btn {
+ padding: 8px 16px;
+ font-size: 15px;
+ font-weight: 600;
+ border-radius: 8px;
+ border: none;
+ cursor: pointer;
+ transition: background-color 0.2s;
+}
+
+.btn-primary {
+ background-color: #3182F6;
+ color: #ffffff;
+}
+
+.btn-primary:hover {
+ background-color: #1B64DA;
+}
+
+.btn-secondary {
+ background-color: #F2F4F6;
+ color: #4E5968;
+}
+
+.btn-secondary:hover {
+ background-color: #E5E8EB;
+}
+
+.btn-danger {
+ background-color: #e53e3e;
+ color: white;
+}
+
+.btn-danger:hover {
+ background-color: #c53030;
+}
+
+.editing-row td {
+ padding-top: 20px;
+ padding-bottom: 20px;
+}
+
+.editing-row .btn {
+ margin-right: 8px;
+}
diff --git a/frontend/src/css/admin-time-page.css b/frontend/src/css/admin-time-page.css
new file mode 100644
index 00000000..d9505924
--- /dev/null
+++ b/frontend/src/css/admin-time-page.css
@@ -0,0 +1,120 @@
+/* /src/css/admin-time-page.css */
+.admin-time-container {
+ max-width: 800px;
+ margin: 40px auto;
+ padding: 40px;
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+ background-color: #f4f6f8;
+ border-radius: 16px;
+}
+
+.admin-time-container .page-title {
+ font-size: 32px;
+ font-weight: 700;
+ color: #333d4b;
+ margin-bottom: 30px;
+ text-align: center;
+}
+
+.section-card {
+ background-color: #ffffff;
+ border-radius: 12px;
+ padding: 24px;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+}
+
+.table-header {
+ display: flex;
+ justify-content: flex-end;
+ margin-bottom: 20px;
+}
+
+.table-container table {
+ width: 100%;
+ border-collapse: collapse;
+ font-size: 15px;
+}
+
+.table-container th,
+.table-container td {
+ padding: 12px 16px;
+ text-align: left;
+ border-bottom: 1px solid #e5e8eb;
+ vertical-align: middle;
+}
+
+.table-container th {
+ background-color: #f9fafb;
+ color: #505a67;
+ font-weight: 600;
+}
+
+.table-container tr:last-child td {
+ border-bottom: none;
+}
+
+.table-container tr:hover {
+ background-color: #f4f6f8;
+}
+
+.form-input {
+ width: 100%;
+ padding: 10px 12px;
+ font-size: 15px;
+ border: 1px solid #E5E8EB;
+ border-radius: 8px;
+ box-sizing: border-box;
+ transition: border-color 0.2s, box-shadow 0.2s;
+}
+
+.form-input:focus {
+ outline: none;
+ border-color: #3182F6;
+ box-shadow: 0 0 0 3px rgba(49, 130, 246, 0.2);
+}
+
+.btn {
+ padding: 8px 16px;
+ font-size: 15px;
+ font-weight: 600;
+ border-radius: 8px;
+ border: none;
+ cursor: pointer;
+ transition: background-color 0.2s;
+}
+
+.btn-primary {
+ background-color: #3182F6;
+ color: #ffffff;
+}
+
+.btn-primary:hover {
+ background-color: #1B64DA;
+}
+
+.btn-secondary {
+ background-color: #F2F4F6;
+ color: #4E5968;
+}
+
+.btn-secondary:hover {
+ background-color: #E5E8EB;
+}
+
+.btn-danger {
+ background-color: #e53e3e;
+ color: white;
+}
+
+.btn-danger:hover {
+ background-color: #c53030;
+}
+
+.editing-row td {
+ padding-top: 20px;
+ padding-bottom: 20px;
+}
+
+.editing-row .btn {
+ margin-right: 8px;
+}
diff --git a/frontend/src/css/admin-waiting-page.css b/frontend/src/css/admin-waiting-page.css
new file mode 100644
index 00000000..4d840945
--- /dev/null
+++ b/frontend/src/css/admin-waiting-page.css
@@ -0,0 +1,81 @@
+/* /src/css/admin-waiting-page.css */
+.admin-waiting-container {
+ max-width: 1200px;
+ margin: 40px auto;
+ padding: 40px;
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+ background-color: #f4f6f8;
+ border-radius: 16px;
+}
+
+.admin-waiting-container .page-title {
+ font-size: 32px;
+ font-weight: 700;
+ color: #333d4b;
+ margin-bottom: 30px;
+ text-align: center;
+}
+
+.section-card {
+ background-color: #ffffff;
+ border-radius: 12px;
+ padding: 24px;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+}
+
+.table-container table {
+ width: 100%;
+ border-collapse: collapse;
+ font-size: 15px;
+}
+
+.table-container th,
+.table-container td {
+ padding: 12px 16px;
+ text-align: left;
+ border-bottom: 1px solid #e5e8eb;
+ vertical-align: middle;
+}
+
+.table-container th {
+ background-color: #f9fafb;
+ color: #505a67;
+ font-weight: 600;
+}
+
+.table-container tr:last-child td {
+ border-bottom: none;
+}
+
+.table-container tr:hover {
+ background-color: #f4f6f8;
+}
+
+.btn {
+ padding: 8px 16px;
+ font-size: 15px;
+ font-weight: 600;
+ border-radius: 8px;
+ border: none;
+ cursor: pointer;
+ transition: background-color 0.2s;
+ margin-right: 8px;
+}
+
+.btn-primary {
+ background-color: #3182F6;
+ color: #ffffff;
+}
+
+.btn-primary:hover {
+ background-color: #1B64DA;
+}
+
+.btn-danger {
+ background-color: #e53e3e;
+ color: white;
+}
+
+.btn-danger:hover {
+ background-color: #c53030;
+}
diff --git a/frontend/src/css/home-page-v2.css b/frontend/src/css/home-page-v2.css
new file mode 100644
index 00000000..d4b839a2
--- /dev/null
+++ b/frontend/src/css/home-page-v2.css
@@ -0,0 +1,66 @@
+/* /src/css/home-page-v2.css */
+.home-container-v2 {
+ max-width: 800px;
+ margin: 40px auto;
+ padding: 20px;
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+ background-color: #f4f6f8;
+ border-radius: 16px;
+}
+
+.home-container-v2 .page-title {
+ font-size: 28px;
+ font-weight: 700;
+ color: #333d4b;
+ margin-bottom: 30px;
+ text-align: center;
+}
+
+.theme-ranking-list-v2 {
+ display: flex;
+ flex-direction: column;
+ gap: 20px;
+}
+
+.theme-ranking-item-v2 {
+ background-color: #ffffff;
+ border-radius: 12px;
+ padding: 20px;
+ display: flex;
+ align-items: center;
+ gap: 20px;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+ transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
+}
+
+.theme-ranking-item-v2:hover {
+ transform: translateY(-3px);
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+.theme-ranking-item-v2 .thumbnail {
+ width: 120px;
+ height: 120px;
+ object-fit: cover;
+ border-radius: 8px;
+ border: 1px solid #e5e8eb;
+}
+
+.theme-ranking-item-v2 .theme-info {
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+}
+
+.theme-ranking-item-v2 .theme-name {
+ font-size: 20px;
+ font-weight: 700;
+ color: #333d4b;
+ margin: 0;
+}
+
+.theme-ranking-item-v2 .theme-description {
+ font-size: 16px;
+ color: #505a67;
+ margin: 0;
+}
diff --git a/frontend/src/css/login-page-v2.css b/frontend/src/css/login-page-v2.css
new file mode 100644
index 00000000..f38c6898
--- /dev/null
+++ b/frontend/src/css/login-page-v2.css
@@ -0,0 +1,74 @@
+/* /src/css/login-page-v2.css */
+.login-container-v2 {
+ width: 100%;
+ max-width: 400px;
+ margin: 80px auto;
+ padding: 40px;
+ background-color: #ffffff;
+ border-radius: 16px;
+ box-shadow: 0 8px 20px rgba(0, 0, 0, 0.07);
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+}
+
+.login-container-v2 .page-title {
+ font-size: 28px;
+ font-weight: 700;
+ color: #191F28;
+ margin-bottom: 30px;
+ text-align: center;
+}
+
+.login-form-v2 .form-group {
+ margin-bottom: 20px;
+}
+
+.login-form-v2 .form-input {
+ width: 100%;
+ padding: 14px;
+ font-size: 16px;
+ border: 1px solid #E5E8EB;
+ border-radius: 8px;
+ box-sizing: border-box;
+ transition: border-color 0.2s, box-shadow 0.2s;
+}
+
+.login-form-v2 .form-input:focus {
+ outline: none;
+ border-color: #3182F6;
+ box-shadow: 0 0 0 3px rgba(49, 130, 246, 0.2);
+}
+
+.login-form-v2 .button-group {
+ margin-top: 30px;
+ display: flex;
+ gap: 10px;
+}
+
+.login-form-v2 .btn {
+ flex-grow: 1;
+ padding: 14px;
+ font-size: 16px;
+ font-weight: 600;
+ border-radius: 8px;
+ border: none;
+ cursor: pointer;
+ transition: background-color 0.2s;
+}
+
+.login-form-v2 .btn-primary {
+ background-color: #3182F6;
+ color: #ffffff;
+}
+
+.login-form-v2 .btn-primary:hover {
+ background-color: #1B64DA;
+}
+
+.login-form-v2 .btn-secondary {
+ background-color: #F2F4F6;
+ color: #4E5968;
+}
+
+.login-form-v2 .btn-secondary:hover {
+ background-color: #E5E8EB;
+}
diff --git a/frontend/src/css/navbar.css b/frontend/src/css/navbar.css
new file mode 100644
index 00000000..132ce3c1
--- /dev/null
+++ b/frontend/src/css/navbar.css
@@ -0,0 +1,117 @@
+/* /src/css/navbar.css */
+.navbar-container {
+ background-color: #ffffff;
+ height: 60px;
+ padding: 0 40px;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ border-bottom: 1px solid #e5e8eb;
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+}
+
+.navbar-container .nav-links {
+ display: flex;
+ align-items: center;
+ gap: 30px;
+}
+
+.navbar-container .nav-link {
+ text-decoration: none;
+ color: #4E5968;
+ font-size: 16px;
+ font-weight: 600;
+ transition: color 0.2s;
+}
+
+.navbar-container .nav-link:hover {
+ color: #191F28;
+}
+
+.navbar-container .nav-actions {
+ display: flex;
+ align-items: center;
+ gap: 12px;
+}
+
+.navbar-container .btn {
+ padding: 8px 16px;
+ font-size: 15px;
+ font-weight: 600;
+ border-radius: 8px;
+ border: none;
+ cursor: pointer;
+ transition: background-color 0.2s;
+}
+
+.navbar-container .btn-primary {
+ background-color: #3182F6;
+ color: #ffffff;
+}
+
+.navbar-container .btn-primary:hover {
+ background-color: #1B64DA;
+}
+
+.navbar-container .btn-secondary {
+ background-color: #F2F4F6;
+ color: #4E5968;
+}
+
+.navbar-container .btn-secondary:hover {
+ background-color: #E5E8EB;
+}
+
+.navbar-container .profile-info {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ color: #333d4b;
+ font-weight: 600;
+ cursor: pointer;
+ position: relative;
+ height: 100%;
+ padding: 15px 0;
+}
+
+.navbar-container .profile-image {
+ width: 32px;
+ height: 32px;
+ border-radius: 50%;
+}
+
+.navbar-container .dropdown-menu {
+ display: none;
+ position: absolute;
+ top: 100%;
+ right: 0;
+ background-color: white;
+ border-radius: 8px;
+ box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+ min-width: 160px;
+ z-index: 100;
+ padding: 8px 0;
+}
+
+.navbar-container .profile-info:hover .dropdown-menu {
+ display: block;
+}
+
+.navbar-container .dropdown-item {
+ display: block;
+ padding: 10px 16px;
+ color: #333d4b;
+ text-decoration: none;
+ font-size: 15px;
+}
+
+.navbar-container .dropdown-item:hover {
+ background-color: #f4f6f8;
+}
+
+.navbar-container .dropdown-divider {
+ height: 1px;
+ margin: 8px 0;
+ overflow: hidden;
+ background-color: #e5e8eb;
+}
diff --git a/frontend/src/css/signup-page-v2.css b/frontend/src/css/signup-page-v2.css
new file mode 100644
index 00000000..1fc04326
--- /dev/null
+++ b/frontend/src/css/signup-page-v2.css
@@ -0,0 +1,65 @@
+/* /src/css/signup-page-v2.css */
+.signup-container-v2 {
+ width: 100%;
+ max-width: 400px;
+ margin: 80px auto;
+ padding: 40px;
+ background-color: #ffffff;
+ border-radius: 16px;
+ box-shadow: 0 8px 20px rgba(0, 0, 0, 0.07);
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+}
+
+.signup-container-v2 .page-title {
+ font-size: 28px;
+ font-weight: 700;
+ color: #191F28;
+ margin-bottom: 30px;
+ text-align: center;
+}
+
+.signup-form-v2 .form-group {
+ margin-bottom: 20px;
+}
+
+.signup-form-v2 .form-label {
+ display: block;
+ margin-bottom: 8px;
+ font-size: 14px;
+ font-weight: 600;
+ color: #4E5968;
+}
+
+.signup-form-v2 .form-input {
+ width: 100%;
+ padding: 14px;
+ font-size: 16px;
+ border: 1px solid #E5E8EB;
+ border-radius: 8px;
+ box-sizing: border-box;
+ transition: border-color 0.2s, box-shadow 0.2s;
+}
+
+.signup-form-v2 .form-input:focus {
+ outline: none;
+ border-color: #3182F6;
+ box-shadow: 0 0 0 3px rgba(49, 130, 246, 0.2);
+}
+
+.signup-form-v2 .btn-primary {
+ width: 100%;
+ margin-top: 10px;
+ padding: 14px;
+ font-size: 16px;
+ font-weight: 600;
+ border-radius: 8px;
+ border: none;
+ cursor: pointer;
+ background-color: #3182F6;
+ color: #ffffff;
+ transition: background-color 0.2s;
+}
+
+.signup-form-v2 .btn-primary:hover {
+ background-color: #1B64DA;
+}
diff --git a/frontend/src/pages/LoginPage.tsx b/frontend/src/pages/LoginPage.tsx
index 104ad3ce..207c0b59 100644
--- a/frontend/src/pages/LoginPage.tsx
+++ b/frontend/src/pages/LoginPage.tsx
@@ -1,6 +1,5 @@
import React, { useState } from 'react';
import { useLocation, useNavigate } from 'react-router-dom';
-import type { LoginRequest } from '@_api/auth/authTypes';
import { useAuth } from '../context/AuthContext';
const LoginPage: React.FC = () => {
@@ -14,8 +13,7 @@ const LoginPage: React.FC = () => {
const handleLogin = async () => {
try {
- const request: LoginRequest = { email, password };
- await login(request);
+ await login({email, password});
alert('로그인에 성공했어요!');
navigate(from, { replace: true });
diff --git a/frontend/src/pages/admin/AdminNavbar.tsx b/frontend/src/pages/admin/AdminNavbar.tsx
index e62abc03..e9b8db32 100644
--- a/frontend/src/pages/admin/AdminNavbar.tsx
+++ b/frontend/src/pages/admin/AdminNavbar.tsx
@@ -1,6 +1,7 @@
import React from 'react';
import { Link, useNavigate } from 'react-router-dom';
import { useAuth } from '../../context/AuthContext';
+import '../../css/navbar.css';
const AdminNavbar: React.FC = () => {
const { loggedIn, userName, logout } = useAuth();
@@ -13,48 +14,30 @@ const AdminNavbar: React.FC = () => {
navigate('/');
} catch (error) {
console.error("Logout failed", error);
- // Handle logout error if needed
}
};
return (
-