stock 실현손익 보여줄 수 있게 화면 구성 추가
This commit is contained in:
@@ -2104,4 +2104,549 @@
|
||||
.risk-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
}
|
||||
/* ══════════════════════════════════════════════════════════════════
|
||||
실현손익 내역
|
||||
══════════════════════════════════════════════════════════════════ */
|
||||
|
||||
.sell-history__filters {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.sell-history__filter-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.sell-history__filter-label {
|
||||
font-size: 11px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.12em;
|
||||
color: var(--muted);
|
||||
min-width: 36px;
|
||||
}
|
||||
|
||||
.sell-history__filter-btn {
|
||||
padding: 4px 12px;
|
||||
border-radius: 999px;
|
||||
border: 1px solid var(--line);
|
||||
background: transparent;
|
||||
color: var(--muted);
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
|
||||
.sell-history__filter-btn:hover {
|
||||
border-color: rgba(255, 255, 255, 0.3);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.sell-history__filter-btn.is-active {
|
||||
border-color: var(--accent-stock);
|
||||
color: var(--accent-stock);
|
||||
background: rgba(99, 179, 237, 0.08);
|
||||
}
|
||||
|
||||
.sell-history__summary {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
|
||||
gap: 10px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.sell-history__summary-card {
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 12px;
|
||||
padding: 12px 16px;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
font-size: 12px;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.sell-history__summary-card strong {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.sell-history__table-wrap {
|
||||
overflow-x: auto;
|
||||
border-radius: 12px;
|
||||
border: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.sell-history__table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.sell-history__table thead th {
|
||||
padding: 10px 12px;
|
||||
text-align: left;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
color: var(--muted);
|
||||
border-bottom: 1px solid var(--line);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.sell-history__table thead th.is-num {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.sell-history__table tbody td {
|
||||
padding: 10px 12px;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.04);
|
||||
vertical-align: middle;
|
||||
white-space: nowrap;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.sell-history__table tbody tr:last-child td {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.sell-history__table tbody tr:hover td {
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
}
|
||||
|
||||
.sell-history__table td.is-num {
|
||||
text-align: right;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.sell-history__name {
|
||||
font-weight: 500;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.sell-history__ticker {
|
||||
font-size: 11px;
|
||||
color: var(--muted);
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.sell-history__broker {
|
||||
font-size: 12px;
|
||||
padding: 2px 8px;
|
||||
border-radius: 999px;
|
||||
border: 1px solid var(--line);
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.sell-history__date {
|
||||
font-size: 12px;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.sell-history__summary {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
/* ══════════════════════════════════════════════════════════════════
|
||||
매도 내역 수동 추가/수정 폼
|
||||
══════════════════════════════════════════════════════════════════ */
|
||||
|
||||
.sh-form {
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 14px;
|
||||
padding: 20px;
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
margin-bottom: 20px;
|
||||
display: grid;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.sh-form__title {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.sh-form__grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.sh-form__grid label {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
font-size: 12px;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.sh-form__grid label input {
|
||||
padding: 7px 10px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--line);
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
color: var(--text);
|
||||
font-size: 13px;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.sh-form__grid label input:focus {
|
||||
outline: none;
|
||||
border-color: var(--accent-stock);
|
||||
}
|
||||
|
||||
.sh-form__datetime {
|
||||
grid-column: span 2;
|
||||
}
|
||||
|
||||
.sh-form__preview {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
flex-wrap: wrap;
|
||||
padding: 10px 14px;
|
||||
border-radius: 10px;
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
border: 1px solid var(--line);
|
||||
font-size: 13px;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.sh-form__preview strong {
|
||||
margin-left: 6px;
|
||||
}
|
||||
|
||||
.sh-form__actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.sh-row-actions {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.sh-form__grid {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
|
||||
.sh-form__datetime {
|
||||
grid-column: span 2;
|
||||
}
|
||||
}
|
||||
|
||||
/* ══════════════════════════════════════════════════════════════════
|
||||
실현손익 floating 토글 버튼 (우측 고정)
|
||||
══════════════════════════════════════════════════════════════════ */
|
||||
|
||||
.sh-floating-toggle {
|
||||
position: fixed;
|
||||
right: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
z-index: 190;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 14px 10px;
|
||||
border-radius: 12px 0 0 12px;
|
||||
border: 1px solid rgba(251, 191, 36, 0.35);
|
||||
border-right: none;
|
||||
background: rgba(7, 11, 25, 0.92);
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
color: #fbbf24;
|
||||
cursor: pointer;
|
||||
box-shadow: -4px 0 24px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(251, 191, 36, 0.08) inset;
|
||||
transition: background 0.2s, box-shadow 0.2s, border-color 0.2s, padding 0.2s;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.sh-floating-toggle:hover {
|
||||
background: rgba(251, 191, 36, 0.1);
|
||||
border-color: rgba(251, 191, 36, 0.65);
|
||||
box-shadow: -4px 0 32px rgba(251, 191, 36, 0.15);
|
||||
padding-right: 14px;
|
||||
}
|
||||
|
||||
.sh-floating-toggle__icon {
|
||||
font-size: 20px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.sh-floating-toggle__label {
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.08em;
|
||||
writing-mode: vertical-rl;
|
||||
text-orientation: mixed;
|
||||
}
|
||||
|
||||
.sh-floating-toggle__badge {
|
||||
background: #fbbf24;
|
||||
color: #000;
|
||||
border-radius: 999px;
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
padding: 2px 5px;
|
||||
line-height: 1.3;
|
||||
box-shadow: 0 2px 6px rgba(0,0,0,0.4);
|
||||
}
|
||||
|
||||
/* ══════════════════════════════════════════════════════════════════
|
||||
실현손익 드로어 (slide-in from right)
|
||||
══════════════════════════════════════════════════════════════════ */
|
||||
|
||||
.sh-backdrop {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.55);
|
||||
z-index: 200;
|
||||
animation: sh-backdrop-in 0.2s ease;
|
||||
}
|
||||
|
||||
@keyframes sh-backdrop-in {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
|
||||
.sh-drawer {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
height: 100dvh;
|
||||
width: min(520px, 100vw);
|
||||
background: var(--bg, #070b19);
|
||||
border-left: 1px solid var(--line);
|
||||
z-index: 201;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
padding: 0;
|
||||
transform: translateX(100%);
|
||||
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
/* 스크롤바 */
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: var(--line) transparent;
|
||||
}
|
||||
|
||||
.sh-drawer.is-open {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
.sh-drawer__header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
padding: 20px 20px 16px;
|
||||
background: var(--bg, #070b19);
|
||||
border-bottom: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.sh-drawer__eyebrow {
|
||||
margin: 0 0 4px;
|
||||
font-size: 11px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.2em;
|
||||
color: #fbbf24;
|
||||
}
|
||||
|
||||
.sh-drawer__title {
|
||||
margin: 0;
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.sh-drawer__header-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.sh-drawer__close {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
border: 1px solid var(--line);
|
||||
background: transparent;
|
||||
color: var(--muted);
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.15s;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.sh-drawer__close:hover {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
/* 드로어 내 섹션들 패딩 */
|
||||
.sh-drawer .sell-history__filters,
|
||||
.sh-drawer .sell-history__summary,
|
||||
.sh-drawer .sh-drawer__list,
|
||||
.sh-drawer .sh-form,
|
||||
.sh-drawer .sh-drawer__empty {
|
||||
margin: 0;
|
||||
padding: 16px 20px;
|
||||
}
|
||||
|
||||
.sh-drawer .sell-history__filters {
|
||||
border-bottom: 1px solid var(--line);
|
||||
padding-bottom: 14px;
|
||||
}
|
||||
|
||||
.sh-drawer .sell-history__summary {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
border-bottom: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.sh-drawer .sh-form {
|
||||
border-radius: 0;
|
||||
border: none;
|
||||
border-bottom: 1px solid var(--line);
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.sh-drawer .sh-form__grid {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
|
||||
/* 드로어 카드형 목록 */
|
||||
.sh-drawer__list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
padding-top: 16px;
|
||||
padding-bottom: 24px;
|
||||
}
|
||||
|
||||
.sh-drawer__item {
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 12px;
|
||||
padding: 14px;
|
||||
background: rgba(255, 255, 255, 0.02);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
transition: background 0.15s;
|
||||
}
|
||||
|
||||
.sh-drawer__item:hover {
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
}
|
||||
|
||||
.sh-drawer__item-top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.sh-drawer__item-name {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.sh-drawer__item-name code {
|
||||
font-size: 11px;
|
||||
color: var(--muted);
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.sh-drawer__item-actions {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.sh-drawer__item-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.sh-drawer__item-metrics {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.sh-drawer__item-metrics > div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 3px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.sh-drawer__item-metrics > div span {
|
||||
color: var(--muted);
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.sh-drawer__item-metrics > div strong {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: var(--text);
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.sh-drawer__empty {
|
||||
color: var(--muted);
|
||||
font-size: 13px;
|
||||
text-align: center;
|
||||
padding-top: 40px !important;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.sh-drawer {
|
||||
width: 100vw;
|
||||
}
|
||||
|
||||
.sh-drawer__item-metrics {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
.sh-drawer .sh-form__grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.sh-drawer .sh-form__datetime {
|
||||
grid-column: span 1;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user