From 9cc6226f628b2a0f9463b6fc907d3a18317c3a85 Mon Sep 17 00:00:00 2001 From: Tonyjoo11 Date: Thu, 12 Feb 2026 02:30:48 +0900 Subject: [PATCH 1/2] =?UTF-8?q?feat:=20=EB=AA=A8=EB=B0=94=EC=9D=BC=20?= =?UTF-8?q?=EC=83=81=EC=97=90=EC=84=9C=EC=9D=98=20note=5Flist=20=EB=B0=B0?= =?UTF-8?q?=EC=B9=98=20=EC=A1=B0=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- static/css/reflections.css | 155 ++++++++++++++++++++------- templates/reflections/note_list.html | 95 +++++++++------- 2 files changed, 172 insertions(+), 78 deletions(-) diff --git a/static/css/reflections.css b/static/css/reflections.css index 666ca33..5d49fb6 100644 --- a/static/css/reflections.css +++ b/static/css/reflections.css @@ -165,12 +165,39 @@ button { align-items: center; } +.ref-action-btn{ + display:inline-flex; + align-items:center; + gap:8px; + padding:10px 16px; + border-radius:999px; + border:1px solid var(--blue-10); + background:#fff; + font-size:14px; + cursor:pointer; + text-decoration:none; +} + +.ref-action-primary{ + background:#5b6ee1; + color:#fff; + border:0; +} + +.ref-action-icon{ + width:18px; + height:18px; + object-fit:contain; +} + + .ref-writebtn { margin-left: auto; text-decoration: none; text-align: center; border-radius: 999px; - width: 15%; + width: auto; + white-space: nowrap; /* 글씨 줄바꿈 방지 */ padding: 10px 30px; font-size: 14px; font-weight: 600; @@ -211,6 +238,26 @@ button { .bookmark-filter-btn.is-active .bookmark-icon { color: var(--blue-40); } +@media (max-width: 768px){ + + .ref-action-btn{ + width:42px; + height:42px; + padding:0; + justify-content:center; + border-radius:50%; + } + + .ref-action-txt{ + display:none; + } + + .ref-action-icon{ + width:20px; + height:20px; + } +} + /* ========================= List / Card (피그마처럼 넓고 둥글고, 테두리+은은한 그림자) ========================= */ @@ -1208,10 +1255,6 @@ button.ref-btn{ .ref-list { max-width: 85%; } - - .ref-writebtn { - width: 18%; - } } /* ===== 태블릿 (768px ~ 1023px) ===== */ @@ -1240,17 +1283,16 @@ button.ref-btn{ } .ref-selectbox { - font-size: 13px; + font-size: 14px; padding: 9px 40px 9px 16px; } .bookmark-filter-btn { - padding: 9px 40px 9px 16px; + padding: 9px 18px 9px 16px; font-size: 13px; } .ref-writebtn { - width: 20%; padding: 9px 20px; font-size: 13px; } @@ -1290,36 +1332,82 @@ button.ref-btn{ font-size: 12px; } - /* 필터 영역 2줄 배치 */ - .ref-filters { - flex-wrap: wrap; - gap: 10px 8px; + /* ✅ 한 줄 유지 */ + .ref-filters{ + flex-wrap: nowrap; + align-items: center; + gap: 10px; } - /* 위 줄: 정렬 / 역할 */ - .ref-select-container { - flex: 0 0 calc(50% - 4px); + /* ✅ 왼쪽 영역: select 2개가 1:1로 양분 */ + .ref-filters-selects{ + flex: 1; + display: flex; + gap: 8px; min-width: 0; } - - .ref-selectbox { - width: 100%; + .ref-filters-selects .ref-select-container{ + flex: 1; min-width: 0; - font-size: 12px; - padding: 9px 36px 9px 14px; } - - .ref-selectchev { - right: 10px; + .ref-filters-selects .ref-selectbox{ + width: 100%; + padding: 9px 34px 9px 12px; + font-size: 13px; } - /* 아래 줄: 북마크 / 글쓰기 */ - .bookmark-filter-btn { - flex: 0 0 calc(50% - 4px); + /* ✅ 오른쪽: 아이콘 원형 2개 고정 */ + .ref-filters-actions{ + display: flex; + gap: 8px; + margin-left: auto; + flex: 0 0 auto; + } + + /* 북마크/글쓰기: pill 스타일 무력화 → 원형 */ + .bookmark-filter-btn, + .ref-writebtn{ + box-sizing: border-box; + width: 42px; + height: 42px; + min-width: 42px; /* ✅ 핵심 */ + min-height: 42px; /* ✅ 핵심 */ + padding: 0 !important;/* ✅ 기존 pill 패딩 제거 */ + border-radius: 50%; /* ✅ 999px보다 확실 */ + display: inline-flex; + align-items: center; justify-content: center; - padding: 9px 14px; - font-size: 12px; - gap: 4px; + line-height: 1; /* ✅ 텍스트/inline 영향 제거 */ + flex: 0 0 42px; /* ✅ flex에서 늘어나지 않게 고정 */ + } + + /* 모바일에서는 텍스트 숨김 */ + .bookmark-filter-btn .ref-action-txt, + .ref-writebtn .ref-action-txt{ + display: none; + } + + .bookmark-filter-btn .ref-action-icon, + .ref-writebtn .ref-action-icon{ + width: 20px; + height: 20px; + display:block; /* ✅ svg/img baseline 영향 제거 */ + } + + /* img는 혹시 원인될 수 있어서 */ + .ref-writebtn img.ref-action-icon{ + object-fit: contain; + display: block; /* baseline 제거 */ + transform: translateY(-1px); + } + + /* 글쓰기 버튼은 원형 유지하면서 색만 유지 */ + .ref-writebtn{ + width: 42px; /* 기존 width: auto 덮어쓰기 */ + } + + .ref-selectchev { + right: 10px; } .bookmark-filter-btn .bookmark-icon { @@ -1327,13 +1415,6 @@ button.ref-btn{ height: 14px; } - .ref-writebtn { - flex: 0 0 calc(50% - 4px); - width: auto; - padding: 9px 14px; - font-size: 12px; - } - /* 카드 레이아웃 */ .note-card { flex-direction: column; @@ -1428,7 +1509,7 @@ button.ref-btn{ } .ref-selectbox { - font-size: 11px; + font-size: 12px; padding: 8px 32px 8px 12px; } diff --git a/templates/reflections/note_list.html b/templates/reflections/note_list.html index 68b909b..7361a0b 100644 --- a/templates/reflections/note_list.html +++ b/templates/reflections/note_list.html @@ -14,6 +14,7 @@ {# 상단 컨트롤 영역 #}
+
-
- - + +
+
+ + +
+ +
+ + +
- -
- -
From c805283c6c8b1c1389cc72f4bac1e14e549a979c Mon Sep 17 00:00:00 2001 From: Tonyjoo11 Date: Thu, 12 Feb 2026 03:08:03 +0900 Subject: [PATCH 2/2] =?UTF-8?q?fix:=20PC=EC=97=90=EC=84=9C=20=EA=B8=80?= =?UTF-8?q?=EC=93=B0=EA=B8=B0=20=EB=B2=84=ED=8A=BC=20=EC=98=A4=EB=A5=B8?= =?UTF-8?q?=EC=AA=BD=EC=9C=BC=EB=A1=9C=20=EC=9D=B4=EB=8F=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- static/css/reflections.css | 85 +++++++++++++++++++++----------------- 1 file changed, 46 insertions(+), 39 deletions(-) diff --git a/static/css/reflections.css b/static/css/reflections.css index 5d49fb6..f58af07 100644 --- a/static/css/reflections.css +++ b/static/css/reflections.css @@ -190,6 +190,14 @@ button { object-fit:contain; } +.ref-filters-actions{ + display: flex; /* 핵심 */ + align-items: center; + gap: 12px; + flex: 1; /* 오른쪽 끝까지 영역 확장 */ + min-width: 0; + flex-wrap: nowrap; +} .ref-writebtn { margin-left: auto; @@ -238,7 +246,7 @@ button { .bookmark-filter-btn.is-active .bookmark-icon { color: var(--blue-40); } -@media (max-width: 768px){ +/* @media (max-width: 768px){ .ref-action-btn{ width:42px; @@ -256,7 +264,7 @@ button { width:20px; height:20px; } -} +} */ /* ========================= List / Card (피그마처럼 넓고 둥글고, 테두리+은은한 그림자) @@ -1332,17 +1340,18 @@ button.ref-btn{ font-size: 12px; } - /* ✅ 한 줄 유지 */ + /* 1) 필터 한 줄 + 2영역(셀렉트 / 액션) */ .ref-filters{ + display:flex; flex-wrap: nowrap; - align-items: center; + align-items:center; gap: 10px; } - /* ✅ 왼쪽 영역: select 2개가 1:1로 양분 */ + /* 2) 셀렉트 2개가 남은 영역 1:1 */ .ref-filters-selects{ flex: 1; - display: flex; + display:flex; gap: 8px; min-width: 0; } @@ -1352,60 +1361,58 @@ button.ref-btn{ } .ref-filters-selects .ref-selectbox{ width: 100%; - padding: 9px 34px 9px 12px; - font-size: 13px; + min-width: 0; } - /* ✅ 오른쪽: 아이콘 원형 2개 고정 */ + /* 3) 오른쪽 원형 2개 고정 */ .ref-filters-actions{ + /* margin-left: auto; */ display: flex; - gap: 8px; - margin-left: auto; + align-items: center; + gap: 12px; flex: 0 0 auto; } - /* 북마크/글쓰기: pill 스타일 무력화 → 원형 */ - .bookmark-filter-btn, - .ref-writebtn{ + /* 4) 북마크/글쓰기: 원형 버튼으로 강제(기존 pill/width/flex 전부 씹어먹음) */ + .ref-filters-actions .bookmark-filter-btn, + .ref-filters-actions .ref-writebtn{ box-sizing: border-box; - width: 42px; - height: 42px; - min-width: 42px; /* ✅ 핵심 */ - min-height: 42px; /* ✅ 핵심 */ - padding: 0 !important;/* ✅ 기존 pill 패딩 제거 */ - border-radius: 50%; /* ✅ 999px보다 확실 */ - display: inline-flex; + width: 40px; + height: 40px; + min-width: 40px; + min-height: 40px; + padding: 0 !important; + border-radius: 50%; + display: inline-flex !important; align-items: center; justify-content: center; - line-height: 1; /* ✅ 텍스트/inline 영향 제거 */ - flex: 0 0 42px; /* ✅ flex에서 늘어나지 않게 고정 */ + line-height: 1; + flex: 0 0 40px !important; + white-space: nowrap; } - /* 모바일에서는 텍스트 숨김 */ - .bookmark-filter-btn .ref-action-txt, - .ref-writebtn .ref-action-txt{ - display: none; + /* 5) 모바일에서는 텍스트 숨김 */ + .ref-filters-actions .ref-action-txt{ + display:none !important; } - .bookmark-filter-btn .ref-action-icon, - .ref-writebtn .ref-action-icon{ + /* 6) 아이콘 정렬/크기 고정 (svg/img baseline 제거) */ + .ref-filters-actions .ref-action-icon{ width: 20px; height: 20px; - display:block; /* ✅ svg/img baseline 영향 제거 */ - } - - /* img는 혹시 원인될 수 있어서 */ - .ref-writebtn img.ref-action-icon{ + display:block; object-fit: contain; - display: block; /* baseline 제거 */ - transform: translateY(-1px); } - /* 글쓰기 버튼은 원형 유지하면서 색만 유지 */ - .ref-writebtn{ - width: 42px; /* 기존 width: auto 덮어쓰기 */ + /* 7) 글쓰기 버튼 색 유지 */ + .ref-filters-actions .ref-writebtn{ + background: var(--blue-40); + border: 0; + color: #fff; + text-decoration:none; } + .ref-selectchev { right: 10px; }