Skip to content

Commit ed9aef3

Browse files
se030se030
authored
Style/#271-K: CSS 개선 작업 (#277)
* style: 워크스페이스 리스트 너비 고정 * refactor: Selector 역할이 드러나도록 네이밍 변경 * style: 워크스페이스 설정 아이콘 기획서대로 스타일링 * style: 사이드바 너비 수정 * fix: Mom에서 임시 투표 블럭 제거 * style: 회의록 스크롤바 추가 * style: 회의록 목록에 임의의 높이 지정하고 스크롤 추가 * style: 사이드바 전체 스크롤 추가 * feat: 회의록 추가 버튼 이동 * style: DefaultMom 컴포넌트 도움말 수정 * style: 회의록 없는 경우 추가 아이콘 하이라이트 * style: 로그인 페이지 스타일 수정
1 parent c1418c4 commit ed9aef3

File tree

14 files changed

+173
-57
lines changed

14 files changed

+173
-57
lines changed

‎client/src/components/MeetingMediaBar/style.module.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
flex-direction: column;
44
align-items: center;
55
width: fit-content;
6-
min-width: 300px;
6+
min-width: 280px;
77
height: 100vh;
88
padding: 30px 20px;
99
overflow: hidden;

‎client/src/components/Mom/DefaultMom.tsx‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React from 'react';
1+
import { RiFileAddLine } from '@react-icons/all-files/ri/RiFileAddLine';
22
import GuideIcon from 'src/components/common/GuideIcon';
33
import AmazedWabIcon from 'src/components/common/Icon/Wab/AmazedWabIcon';
44

@@ -11,8 +11,13 @@ function DefaultMom() {
1111
<h1 className={style.message}>회의록이 텅텅 비었어요.</h1>
1212
<GuideIcon>
1313
<p>
14-
사이드바에서 <span className={style.highlight}>+ 회의록 추가</span>{' '}
15-
버튼을 클릭해 회의록을 추가해 보세요!
14+
사이드바에서{' '}
15+
<span className={style.highlight}>
16+
<RiFileAddLine size={20} />
17+
</span>{' '}
18+
버튼을 클릭해
19+
<br />
20+
회의록을 추가해 보세요!
1621
</p>
1722
</GuideIcon>
1823
</div>

‎client/src/components/Mom/index.tsx‎

Lines changed: 0 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import VoteBlockTemplate from 'common/Templates/VoteBlock';
21
import { useEffect, useRef, useState } from 'react';
32
import { VOTE_MODE } from 'src/constants/block';
43
import SOCKET_MESSAGE from 'src/constants/socket-message';
@@ -226,16 +225,6 @@ function Mom() {
226225
/>
227226
))}
228227
</div>
229-
{/* TODO: 임시로 놓은 투표 블록임 */}
230-
<button onClick={() => setVoteMode('create')}>투표 등록</button>
231-
{voteMode && (
232-
<VoteBlockTemplate
233-
mode={voteMode}
234-
setVoteMode={setVoteMode}
235-
options={options}
236-
setOptions={setOptions}
237-
/>
238-
)}
239228
</div>
240229
</div>
241230
) : (

‎client/src/components/Mom/style.module.scss‎

Lines changed: 22 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@
4040
box-sizing: border-box;
4141
height: calc(100% - 70px);
4242
padding: 20px;
43+
overflow-y: scroll;
4344
background-color: white;
4445
white-space: pre-wrap;
4546

@@ -66,6 +67,19 @@
6667
& > *:focus {
6768
outline: none;
6869
}
70+
71+
&::-webkit-scrollbar {
72+
width: 5px;
73+
}
74+
75+
&::-webkit-scrollbar-track {
76+
background: none;
77+
}
78+
79+
&::-webkit-scrollbar-thumb {
80+
border-radius: 10px;
81+
background-color: $gray-300;
82+
}
6983
}
7084

7185
.default-container {
@@ -85,13 +99,19 @@
8599
}
86100

87101
.highlight {
102+
height: 20px;
88103
margin: 0px 2px;
89104

90-
padding: 0px 5px;
91-
border-radius: 12px;
105+
padding: 3px 5px;
106+
border-radius: 10px;
92107
background-color: $off-white;
93108

94109
color: $primary-100;
95110
font-weight: 700;
111+
line-height: 30px;
112+
113+
& > svg {
114+
transform: translateY(5px);
115+
}
96116
}
97117
}

‎client/src/components/Sidebar/MomList.tsx‎

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { RiFileAddLine } from '@react-icons/all-files/ri/RiFileAddLine';
12
import { memo, useEffect, useState } from 'react';
23
import SOCKET_MESSAGE from 'src/constants/socket-message';
34
import useSocketContext from 'src/hooks/useSocketContext';
@@ -45,15 +46,25 @@ function MomList({ moms, setSelectedMom }: MomListProps) {
4546

4647
return (
4748
<div className={style['mom-list-container']}>
48-
<h2>회의록</h2>
49+
<div className={style['mom-list-header']}>
50+
<h2>회의록</h2>
51+
<RiFileAddLine
52+
size={20}
53+
className={
54+
momList.length
55+
? style['mom-add-icon']
56+
: style['mom-add-icon__highlighted']
57+
}
58+
onClick={onCreateMom}
59+
/>
60+
</div>
4961
<ul className={style['mom-list']}>
5062
{momList.map(({ _id: id, title }) => (
5163
<li key={id} onClick={() => onSelect(id)} role="button">
5264
{title}
5365
</li>
5466
))}
5567
</ul>
56-
<button onClick={onCreateMom}>+ 회의록 추가</button>
5768
</div>
5869
);
5970
}

‎client/src/components/Sidebar/SettingIcon.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ function SettingIcon() {
1515

1616
return (
1717
<>
18-
<MdSettings size={15} onClick={onOpen} style={{ cursor: 'pointer' }} />
18+
<MdSettings size={25} onClick={onOpen} style={{ cursor: 'pointer' }} />
1919
{isOpen && (
2020
<WorkspaceSettingModal title="워크스페이스 설정" onClose={onClose} />
2121
)}

‎client/src/components/Sidebar/index.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,10 @@ function Sidebar({ workspace }: SidebarProps) {
1717
return (
1818
<div className={style['sidebar-container']}>
1919
<Header name={workspace.name} />
20-
<MemberList members={workspace.members} />
21-
<MomList moms={workspace.moms} setSelectedMom={setSelectedMom} />
20+
<div className={style['sidebar-container__scrollable']}>
21+
<MemberList members={workspace.members} />
22+
<MomList moms={workspace.moms} setSelectedMom={setSelectedMom} />
23+
</div>
2224
<MeetingButton />
2325
</div>
2426
);

‎client/src/components/Sidebar/style.module.scss‎

Lines changed: 58 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,35 @@
11
@import 'styles/color.module';
22

3+
@mixin container {
4+
display: flex;
5+
box-sizing: border-box;
6+
flex-direction: column;
7+
width: 100%;
8+
padding: 25px;
9+
gap: 15px;
10+
}
11+
312
.sidebar-container {
413
display: flex;
514
flex-direction: column;
615
align-items: center;
7-
8-
width: 252px;
16+
min-width: 240px;
917
height: 100vh;
18+
overflow: hidden;
1019
}
1120

12-
@mixin container {
21+
.sidebar-container__scrollable {
1322
display: flex;
1423
box-sizing: border-box;
1524
flex-direction: column;
25+
align-items: center;
1626
width: 100%;
17-
padding: 25px;
18-
gap: 15px;
27+
height: calc(100vh - 127px);
28+
overflow: scroll;
29+
30+
&::-webkit-scrollbar {
31+
width: 0px;
32+
}
1933
}
2034

2135
.header {
@@ -31,6 +45,11 @@
3145
font-size: 20px;
3246
font-weight: 500;
3347
}
48+
49+
& > svg {
50+
stroke: $gray-200;
51+
fill: $gray-200;
52+
}
3453
}
3554

3655
.member-list {
@@ -59,17 +78,46 @@
5978

6079
.mom-list-container {
6180
@include container;
81+
}
82+
83+
.mom-list-header {
84+
display: flex;
85+
flex-direction: row;
86+
align-items: center;
87+
justify-content: space-between;
6288

6389
& > h2 {
6490
color: $black;
6591
font-size: 18px;
6692
font-weight: 500;
6793
}
94+
}
95+
96+
.mom-add-icon {
97+
stroke: $gray-200;
98+
fill: $gray-200;
99+
cursor: pointer;
100+
}
101+
102+
.mom-add-icon__highlighted {
103+
transform: scale(2);
104+
animation: highlight 0.5s ease-in infinite;
105+
stroke: $primary-100;
106+
fill: $primary-100;
107+
}
68108

69-
& > button {
70-
color: $gray-100;
71-
font-size: 16px;
72-
text-align: start;
109+
@keyframes highlight {
110+
0% {
111+
transform: rotate(0deg);
112+
}
113+
25% {
114+
transform: rotate(7deg);
115+
}
116+
75% {
117+
transform: rotate(-7deg);
118+
}
119+
100% {
120+
transform: rotate(0deg);
73121
}
74122
}
75123

@@ -89,7 +137,7 @@
89137

90138
.meeting-button {
91139
position: absolute;
92-
bottom: 20px;
140+
bottom: 15px;
93141
width: 80px;
94142
height: 25px;
95143
border-radius: 13px;

‎client/src/components/WorkspaceList/index.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import Selector from 'common/Selector';
1+
import WorkspaceModalSelector from 'common/Selector';
22
import WorkspaceModal from 'components/WorkspaceModal';
33
import WorkspaceThumbnaliList from 'components/WorkspaceThumbnailList';
44
import { memo, useState } from 'react';
@@ -26,7 +26,7 @@ function WorkspaceList() {
2626
return (
2727
<div className={style['workspace-list-container']}>
2828
<WorkspaceThumbnaliList workspaces={workspaces} />
29-
<Selector
29+
<WorkspaceModalSelector
3030
TriggerElement={AddButton}
3131
options={MENUS}
3232
onChange={onSelectMenu}

‎client/src/components/WorkspaceList/style.module.scss‎

Lines changed: 11 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
1-
@import 'styles/color.module.scss';
1+
@import 'styles/color.module';
22

33
.workspace-list-container {
4-
position: relative;
5-
6-
background-color: $primary-100;
7-
height: 100vh;
8-
width: 78px;
9-
104
display: flex;
5+
position: relative;
116
flex-direction: column;
127
align-items: center;
8+
min-width: 65px;
9+
max-width: 65px;
10+
height: 100vh;
11+
12+
background-color: $primary-100;
1313
}
1414

1515
.button {
@@ -18,21 +18,20 @@
1818
}
1919

2020
.menu {
21+
display: flex;
2122
position: relative;
2223
z-index: 1;
2324
top: -8px;
2425
left: 70px;
25-
26-
display: flex;
2726
flex-direction: column;
2827
align-items: center;
2928
padding: 20px;
3029

3130
border-radius: 10px;
32-
box-shadow: 1px 1px 3px $gray-300;
3331
background-color: $primary-100;
34-
font-size: 14px;
32+
box-shadow: 1px 1px 3px $gray-300;
3533
color: $white;
34+
font-size: 14px;
3635

3736
li {
3837
width: max-content;
@@ -57,7 +56,7 @@
5756
position: fixed;
5857
z-index: 0;
5958
top: 0;
60-
bottom: 0;
6159
right: 0;
60+
bottom: 0;
6261
left: 0;
6362
}

0 commit comments

Comments
 (0)