Skip to content

자잘한 note_list 수정 #173

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Tonyjoo11 merged 2 commits into from
Feb 11, 2026
Merged

자잘한 note_list 수정 #173

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9cc6226
feat: 모바일 상에서의 note_list 배치 조정
Tonyjoo11 Feb 11, 2026
c805283
fix: PC에서 글쓰기 버튼 오른쪽으로 이동
Tonyjoo11 Feb 11, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
160 changes: 124 additions & 36 deletions static/css/reflections.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -165,12 +165,47 @@ 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-filters-actions{
display: flex; /* 핵심 */
align-items: center;
gap: 12px;
flex: 1; /* 오른쪽 끝까지 영역 확장 */
min-width: 0;
flex-wrap: nowrap;
}

.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;
Expand Down Expand Up @@ -211,6 +246,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 (피그마처럼 넓고 둥글고, 테두리+은은한 그림자)
========================= */
Expand Down Expand Up @@ -1208,10 +1263,6 @@ button.ref-btn{
.ref-list {
max-width: 85%;
}

.ref-writebtn {
width: 18%;
}
}

/* ===== 태블릿 (768px ~ 1023px) ===== */
Expand Down Expand Up @@ -1240,17 +1291,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;
}
Expand Down Expand Up @@ -1290,50 +1340,88 @@ button.ref-btn{
font-size: 12px;
}

/* 필터 영역 2줄 배치 */
.ref-filters {
flex-wrap: wrap;
gap: 10px 8px;
/* 1) 필터 한 줄 + 2영역(셀렉트 / 액션) */
.ref-filters{
display:flex;
flex-wrap: nowrap;
align-items:center;
gap: 10px;
}

/* 위 줄: 정렬 / 역할 */
.ref-select-container {
flex: 0 0 calc(50% - 4px);
/* 2) 셀렉트 2개가 남은 영역 1:1 */
.ref-filters-selects{
flex: 1;
display:flex;
gap: 8px;
min-width: 0;
}

.ref-selectbox {
.ref-filters-selects .ref-select-container{
flex: 1;
min-width: 0;
}
.ref-filters-selects .ref-selectbox{
width: 100%;
min-width: 0;
font-size: 12px;
padding: 9px 36px 9px 14px;
}

.ref-selectchev {
right: 10px;
/* 3) 오른쪽 원형 2개 고정 */
.ref-filters-actions{
/* margin-left: auto; */
display: flex;
align-items: center;
gap: 12px;
flex: 0 0 auto;
}

/* 4) 북마크/글쓰기: 원형 버튼으로 강제(기존 pill/width/flex 전부 씹어먹음) */
.ref-filters-actions .bookmark-filter-btn,
.ref-filters-actions .ref-writebtn{
box-sizing: border-box;
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;
flex: 0 0 40px !important;
white-space: nowrap;
}

/* 아래 줄: 북마크 / 글쓰기 */
.bookmark-filter-btn {
flex: 0 0 calc(50% - 4px);
justify-content: center;
padding: 9px 14px;
font-size: 12px;
gap: 4px;
/* 5) 모바일에서는 텍스트 숨김 */
.ref-filters-actions .ref-action-txt{
display:none !important;
}

/* 6) 아이콘 정렬/크기 고정 (svg/img baseline 제거) */
.ref-filters-actions .ref-action-icon{
width: 20px;
height: 20px;
display:block;
object-fit: contain;
}

/* 7) 글쓰기 버튼 색 유지 */
.ref-filters-actions .ref-writebtn{
background: var(--blue-40);
border: 0;
color: #fff;
text-decoration:none;
}


.ref-selectchev {
right: 10px;
}

.bookmark-filter-btn .bookmark-icon {
width: 14px;
height: 14px;
}

.ref-writebtn {
flex: 0 0 calc(50% - 4px);
width: auto;
padding: 9px 14px;
font-size: 12px;
}

/* 카드 레이아웃 */
.note-card {
flex-direction: column;
Expand Down Expand Up @@ -1428,7 +1516,7 @@ button.ref-btn{
}

.ref-selectbox {
font-size: 11px;
font-size: 12px;
padding: 8px 32px 8px 12px;
}

Expand Down
95 changes: 54 additions & 41 deletions templates/reflections/note_list.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@
{# 상단 컨트롤 영역 #}
<section class="ref-controls">
<form class="ref-search" method="get" action="">

<div class="ref-searchbar">
<span class="ref-searchicon" aria-hidden="true">
<!-- 돋보기 아이콘 -->
Expand All @@ -30,50 +31,62 @@
</div>

<div class="ref-filters">
<div class="ref-select-container">
<select name="sort" class="ref-selectbox" data-auto-submit>
<option value="new" {% if sort == "new" %}selected{% endif %}>최신순</option>
<option value="old" {% if sort == "old" %}selected{% endif %}>오래된순</option>
<option value="title" {% if sort == "title" %}selected{% endif %}>제목순</option>
</select>
<span class="ref-selectchev" aria-hidden="true">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none">
<path d="M7 10l5 5 5-5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</span>
<!-- 정렬 -->
<div class="ref-filters-selects">
<div class="ref-select-container">
<select name="sort" class="ref-selectbox" data-auto-submit>
<option value="new" {% if sort == "new" %}selected{% endif %}>최신순</option>
<option value="old" {% if sort == "old" %}selected{% endif %}>오래된순</option>
<option value="title" {% if sort == "title" %}selected{% endif %}>제목순</option>
</select>
<span class="ref-selectchev" aria-hidden="true">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none">
<path d="M7 10l5 5 5-5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</span>
</div>
<!-- 스택 필터 -->
<div class="ref-select-container">
<select name="roles" class="ref-selectbox" data-auto-submit>
<option value="" {% if not role %}selected{% endif %}>전체</option>
<option value="PM" {% if "PM" == role %}selected{% endif %}>기획</option>
<option value="FRONTEND" {% if "FRONTEND" == role %}selected{% endif %}>프론트엔드</option>
<option value="BACKEND" {% if "BACKEND" == role %}selected{% endif %}>백엔드</option>
<option value="none" {% if "none" == role %}selected{% endif %}>개인 회고</option>
</select>
<span class="ref-selectchev" aria-hidden="true">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none">
<path d="M7 10l5 5 5-5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</span>
</div>
</div>

<div class="ref-select-container">
<select name="roles" class="ref-selectbox" data-auto-submit>
<option value="" {% if not role %}selected{% endif %}>전체</option>
<option value="PM" {% if "PM" == role %}selected{% endif %}>기획</option>
<option value="FRONTEND" {% if "FRONTEND" == role %}selected{% endif %}>프론트엔드</option>
<option value="BACKEND" {% if "BACKEND" == role %}selected{% endif %}>백엔드</option>
<option value="none" {% if "none" == role %}selected{% endif %}>개인 회고</option>
</select>
<span class="ref-selectchev" aria-hidden="true">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none">
<path d="M7 10l5 5 5-5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<div class="ref-filters-actions">
<!-- 북마크 필터 버튼 -->
<button
type="button"
class="bookmark-filter-btn {% if bookmarked %}is-active{% endif %}"
data-bookmark-filter
aria-pressed="{% if bookmarked %}true{% else %}false{% endif %}"
>
<!-- 채워진 북마크 -->
<svg class="ref-action-icon bookmark-icon"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16"
aria-hidden="true">
<path d="M2 2v13.5a.5.5 0 0 0 .74.439L8 13.069l5.26 2.87A.5.5 0 0 0 14 15.5V2a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2"/>
</svg>
</span>
<span class="ref-action-txt">북마크</span>
</button>

<!-- 글쓰기 버튼 -->
<a href="{% url 'reflections:note_create' %}" class="ref-writebtn">
<img src="{% static 'images/pencil_icon.png' %}"
class="ref-action-icon"
alt="">
<span class="ref-action-txt">글쓰기</span>
</a>
</div>
<button
type="button"
class="bookmark-filter-btn {% if bookmarked %}is-active{% endif %}"
data-bookmark-filter
aria-pressed="{% if bookmarked %}true{% else %}false{% endif %}"
>
<!-- 채워진 북마크 -->
<svg class="bookmark-icon"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16"
aria-hidden="true">
<path d="M2 2v13.5a.5.5 0 0 0 .74.439L8 13.069l5.26 2.87A.5.5 0 0 0 14 15.5V2a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2"/>
</svg>
<span>북마크</span>
</button>

<a href="{% url 'reflections:note_create' %}" class="ref-writebtn">글쓰기</a>
</div>
</form>
</section>
Expand Down