Skip to content

Commit df7f7f5

Browse files
kimorkimusbsync
kimorkim
and
usbsync
authored
리스트 내보내기 불러오기 팝업 추가 (#368)
Co-authored-by: usbsync <[email protected]>
1 parent 712ea5b commit df7f7f5

File tree

8 files changed

+500
-437
lines changed

8 files changed

+500
-437
lines changed

‎package.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,7 @@
7777
"isomorphic-style-loader": "^4.0.0",
7878
"lodash": "^4.17.19",
7979
"mini-css-extract-plugin": "^0.9.0",
80-
"node-sass": "^4.13.0",
80+
"node-sass": "npm:sass",
8181
"object-assign": "4.1.1",
8282
"postcss-flexbugs-fixes": "3.2.0",
8383
"postcss-loader": "^3.0.0",
@@ -123,6 +123,7 @@
123123
"billboard.js": "^1.11.1",
124124
"chroma-js": "^1.4.0",
125125
"classnames": "^2.2.6",
126+
"clipboard": "^2.0.11",
126127
"entry_sheet": "https://8a14b1ce074335d7a7d9099b4a0807cc40fc9434:[email protected]/ria/entry_sheet.git",
127128
"jest": "^26.0.1",
128129
"moment": "^2.24.0",

‎src/assets/entry/scss/list.scss

+210
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,210 @@
1+
@charset "UTF-8";
2+
@import 'common/variables';
3+
4+
.list_wrap {
5+
display: flex;
6+
position: fixed;
7+
top: 0;
8+
left: 0;
9+
width: 100vw;
10+
height: 100%;
11+
background: rgba(59, 59, 59, 0.7);
12+
align-items: center;
13+
justify-content: center;
14+
z-index: 9999;
15+
overflow: auto;
16+
17+
.export_wrap {
18+
width: 556px;
19+
height: 385px;
20+
21+
.header {
22+
position: relative;
23+
height: 56px;
24+
background-color: #4f80ff;
25+
border-radius: 10px 10px 0 0;
26+
padding: 18px 24px;
27+
28+
span {
29+
font-size: 20px;
30+
font-weight: 600;
31+
line-height: 1;
32+
letter-spacing: -0.71px;
33+
color: #fff;
34+
}
35+
36+
.btn_close {
37+
position: absolute;
38+
top: 18px;
39+
right: 24px;
40+
width: 20px;
41+
height: 20px;
42+
background: url('#{$imageDir}/progress/close.png') no-repeat;
43+
background-size: 20px;
44+
}
45+
}
46+
47+
.body {
48+
height: 339px;
49+
background-color: #fff;
50+
border-radius: 0 0 10px 10px;
51+
padding: 24px;
52+
53+
span {
54+
margin-left: 15px;
55+
font-size: 16px;
56+
font-weight: 600;
57+
letter-spacing: -0.57px;
58+
color: #2c313d;
59+
}
60+
61+
.export_content {
62+
margin-top: 16px;
63+
margin-bottom: 22px;
64+
width: 100%;
65+
height: 166px;
66+
font-size: 14px;
67+
font-weight: 600;
68+
letter-spacing: -0.33px;
69+
border: 1px solid #e2e2e2;
70+
border-radius: 4px;
71+
resize: none;
72+
padding: 10px 16px;
73+
}
74+
75+
.btn_wrap {
76+
text-align: center;
77+
a {
78+
display: inline-block;
79+
width: 160px;
80+
height: 48px;
81+
line-height: 46px;
82+
border: 1px solid #4f80ff;
83+
border-radius: 6px;
84+
font-size: 14px;
85+
font-weight: 600;
86+
letter-spacing: -0.32px;
87+
text-align: center;
88+
color: #4f80ff;
89+
90+
+ a {
91+
margin-left: 9px;
92+
}
93+
}
94+
}
95+
}
96+
}
97+
98+
.import_wrap {
99+
width: 752px;
100+
height: 478px;
101+
102+
.header {
103+
position: relative;
104+
height: 56px;
105+
background-color: #4f80ff;
106+
border-radius: 10px 10px 0 0;
107+
padding: 18px 24px;
108+
109+
span {
110+
font-size: 20px;
111+
font-weight: 600;
112+
line-height: 1;
113+
letter-spacing: -0.71px;
114+
color: #fff;
115+
}
116+
117+
.btn_close {
118+
position: absolute;
119+
top: 18px;
120+
right: 24px;
121+
width: 20px;
122+
height: 20px;
123+
background: url('#{$imageDir}/progress/close.png') no-repeat;
124+
background-size: 20px;
125+
}
126+
}
127+
128+
.body {
129+
height: 422px;
130+
background-color: #fff;
131+
border-radius: 0 0 10px 10px;
132+
padding: 24px;
133+
134+
.content_wrap {
135+
display: flex;
136+
margin-bottom: 22px;
137+
138+
.left_content {
139+
width: 352px;
140+
height: 290px;
141+
margin-right: 16px;
142+
display: flex;
143+
flex-direction: column;
144+
145+
span {
146+
&::before {
147+
content: ' ';
148+
position: absolute;
149+
width: 4px;
150+
height: 4px;
151+
display: inline-block;
152+
background-color: #2c313d;
153+
top: 7px;
154+
left: 2px;
155+
}
156+
position: relative;
157+
display: block;
158+
font-size: 16px;
159+
font-weight: 600;
160+
letter-spacing: -0.57px;
161+
color: #2c313d;
162+
padding-left: 15px;
163+
margin-bottom: 15px;
164+
}
165+
166+
.export_content {
167+
&::placeholder {
168+
line-height: 1.14;
169+
letter-spacing: -0.33px;
170+
color: #979797;
171+
}
172+
173+
flex: 1;
174+
width: 100%;
175+
font-size: 14px;
176+
font-weight: 600;
177+
letter-spacing: -0.33px;
178+
border: 1px solid #e2e2e2;
179+
border-radius: 4px;
180+
resize: none;
181+
padding: 10px 16px;
182+
}
183+
}
184+
.right_content {
185+
width: 336px;
186+
height: 290px;
187+
background-color: #ecf1ff;
188+
}
189+
}
190+
191+
.btn_wrap {
192+
text-align: center;
193+
a {
194+
display: inline-block;
195+
width: 220px;
196+
height: 48px;
197+
line-height: 46px;
198+
border: 1px solid #4f80ff;
199+
border-radius: 6px;
200+
font-size: 14px;
201+
font-weight: 600;
202+
letter-spacing: -0.32px;
203+
text-align: center;
204+
color: #ffffff;
205+
background-color: #4f80ff;
206+
}
207+
}
208+
}
209+
}
210+
}

0 commit comments

Comments
 (0)