diff --git a/client/src/components/ChroniclePopup.css b/client/src/components/ChroniclePopup.css new file mode 100644 index 0000000..98ae3c3 --- /dev/null +++ b/client/src/components/ChroniclePopup.css @@ -0,0 +1,93 @@ +.chronicle-overlay { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(0, 0, 0, 0.8); + z-index: 300; + display: flex; + align-items: center; + justify-content: center; +} + +.chronicle-popup { + background: var(--color-surface); + width: 90%; + max-width: 400px; + max-height: 80%; + border-radius: 16px; + display: flex; + flex-direction: column; + overflow: hidden; + border: 1px solid rgba(255, 255, 255, 0.1); + box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8); +} + +.chronicle-header { + display: flex; + align-items: center; + justify-content: space-between; + padding: 20px; + background: rgba(0, 0, 0, 0.5); + border-bottom: 1px solid rgba(255, 255, 255, 0.1); +} + +.chronicle-header h2 { + margin: 0; + font-family: var(--font-doc-title); + font-size: 20px; +} + +.close-btn { + background: none; + border: none; + color: #fff; + font-size: 28px; + cursor: pointer; +} + +.chronicle-content { + padding: 20px; + overflow-y: auto; + flex: 1; +} + +.empty-text { + text-align: center; + color: #888; + font-style: italic; +} + +.chronicle-list { + list-style: none; + padding: 0; + margin: 0; +} + +.chronicle-item { + margin-bottom: 20px; + padding-bottom: 20px; + border-bottom: 1px dashed rgba(255, 255, 255, 0.1); +} + +.chronicle-item:last-child { + border-bottom: none; + margin-bottom: 0; + padding-bottom: 0; +} + +.turn-number { + font-size: 12px; + color: var(--color-token-info); + font-weight: bold; + display: block; + margin-bottom: 5px; +} + +.chronicle-item p { + margin: 0; + font-size: 14px; + line-height: 1.5; + color: #ddd; +} diff --git a/client/src/components/ChroniclePopup.jsx b/client/src/components/ChroniclePopup.jsx new file mode 100644 index 0000000..1398aa6 --- /dev/null +++ b/client/src/components/ChroniclePopup.jsx @@ -0,0 +1,29 @@ +import React from 'react'; +import './ChroniclePopup.css'; + +export default function ChroniclePopup({ chronicle, onClose }) { + return ( +
아직 기록된 역사가 없습니다.
+ ) : ( +{entry.text}
+{endingInfo.desc}
+프로젝트가 파멸을 맞이했습니다. 임무 실패.
- -