Skip to content

Commit 4b13485

Browse files
Danto7632Danto7632
committed
인기글/인기태그/TopWriter UI 및 기능개선
1 parent 33955ac commit 4b13485

2 files changed

Lines changed: 317 additions & 40 deletions

File tree

‎src/components/community/Community.css‎

Lines changed: 126 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020
width: min(1180px, 100% - 48px);
2121
margin: 0 auto;
2222
display: grid;
23-
grid-template-columns: 220px minmax(0, 1fr) 260px;
23+
grid-template-columns: 220px minmax(0, 1fr) 320px;
2424
grid-template-areas: "left main right";
2525
gap: 28px;
2626
align-items: flex-start;
@@ -32,10 +32,19 @@
3232
top: 96px;
3333
display: flex;
3434
flex-direction: column;
35+
gap: 16px;
3536
letter-spacing: 0.1em;
3637
color: var(--community-muted);
3738
}
3839

40+
.sidebar-left h3 {
41+
margin: 0;
42+
text-align: center;
43+
font-size: 16px;
44+
font-weight: 700;
45+
color: var(--community-text);
46+
}
47+
3948
.sidebar-left ul {
4049
margin: 0;
4150
padding: 18px;
@@ -63,6 +72,17 @@
6372
font-weight: 600;
6473
}
6574

75+
.sidebar-left li.is-disabled {
76+
color: rgba(85, 90, 108, 0.32);
77+
cursor: default;
78+
pointer-events: none;
79+
font-weight: 500;
80+
}
81+
82+
.sidebar-left li.is-disabled:hover {
83+
color: rgba(85, 90, 108, 0.32);
84+
}
85+
6686
.top-writers,
6787
.popular-tags,
6888
.popular-posts {
@@ -99,19 +119,50 @@
99119
}
100120

101121
.top-writers li {
122+
list-style: none;
123+
}
124+
125+
.top-writer-item {
126+
width: 100%;
102127
display: flex;
103128
justify-content: space-between;
104129
align-items: center;
105-
font-size: 13px;
130+
gap: 10px;
131+
padding: 10px 14px;
132+
border-radius: 12px;
133+
border: 1px solid transparent;
134+
background: rgba(124, 92, 255, 0.08);
106135
color: var(--community-muted);
136+
font-size: 13px;
137+
font-weight: 600;
138+
cursor: pointer;
139+
transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
140+
}
141+
142+
.top-writer-item:hover {
143+
background: rgba(124, 92, 255, 0.18);
144+
border-color: rgba(124, 92, 255, 0.32);
145+
color: var(--community-text);
146+
transform: translateY(-1px);
147+
}
148+
149+
.top-writer-item.is-active {
150+
background: var(--community-accent);
151+
border-color: var(--community-accent);
152+
color: #ffffff;
153+
transform: translateY(-1px);
107154
}
108155

109-
.top-writers li span:first-child {
156+
.top-writer-item .writer-name {
110157
display: flex;
111158
align-items: center;
112159
gap: 6px;
113160
}
114161

162+
.top-writer-item .writer-count {
163+
color: inherit;
164+
}
165+
115166
.community-main {
116167
grid-area: main;
117168
display: flex;
@@ -143,6 +194,18 @@
143194
border-color: var(--community-accent);
144195
}
145196

197+
.tabs button.tab-disabled {
198+
color: rgba(85, 90, 108, 0.3);
199+
border-color: transparent;
200+
cursor: not-allowed;
201+
opacity: 0.6;
202+
}
203+
204+
.tabs button.tab-disabled:hover {
205+
color: rgba(85, 90, 108, 0.3);
206+
border-color: transparent;
207+
}
208+
146209
.search-bar {
147210
display: flex;
148211
flex-direction: column;
@@ -487,30 +550,79 @@
487550
position: sticky;
488551
top: 96px;
489552
display: flex;
553+
flex-direction: column;
490554
border-radius: 12px;
491555
gap: 20px;
492556
align-self: start;
493557
}
494558

495-
.tag-list {
559+
.popular-tags .tag-list {
560+
list-style: none;
561+
margin: 0;
562+
padding: 0;
496563
display: flex;
497-
flex-wrap: wrap;
498-
gap: 8px;
564+
flex-direction: column;
565+
gap: 10px;
499566
}
500567

501-
.tag-list span {
502-
padding: 6px 10px;
503-
flex-wrap: wrap;
504-
justify-content: center;
505-
color: var(--community-accent);
568+
.popular-tags .tag-list li {
569+
list-style: none;
570+
}
571+
572+
.popular-tags .tag-item-button {
573+
width: 100%;
574+
display: flex;
575+
justify-content: space-between;
576+
align-items: center;
577+
gap: 12px;
578+
padding: 10px 14px;
579+
border-radius: 12px;
580+
border: 1px solid transparent;
581+
background: rgba(124, 92, 255, 0.08);
582+
color: var(--community-muted);
506583
font-size: 13px;
507584
font-weight: 600;
508585
cursor: pointer;
509-
transition: background-color 0.18s ease;
586+
transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
510587
}
511588

512-
.tag-list span:hover {
513-
background: rgba(124, 92, 255, 0.28);
589+
.popular-tags .tag-item-button:hover:not(:disabled) {
590+
background: rgba(124, 92, 255, 0.18);
591+
border-color: rgba(124, 92, 255, 0.32);
592+
color: var(--community-text);
593+
transform: translateY(-1px);
594+
}
595+
596+
.popular-tags .tag-item-button .tag-name {
597+
color: var(--community-text);
598+
}
599+
600+
.popular-tags .tag-item-button .tag-count {
601+
color: var(--community-accent);
602+
}
603+
604+
.popular-tags .tag-item-button.is-active {
605+
background: var(--community-accent);
606+
border-color: var(--community-accent);
607+
color: #ffffff;
608+
transform: translateY(-1px);
609+
}
610+
611+
.popular-tags .tag-item-button.is-active .tag-name,
612+
.popular-tags .tag-item-button.is-active .tag-count {
613+
color: #ffffff;
614+
}
615+
616+
.popular-tags .tag-item-button:disabled {
617+
cursor: not-allowed;
618+
opacity: 0.6;
619+
transform: none;
620+
}
621+
622+
.popular-tags-empty {
623+
margin: 0;
624+
font-size: 13px;
625+
color: var(--community-muted);
514626
}
515627

516628
.popular-posts ul {

0 commit comments

Comments
 (0)