Skip to content

Commit 2a89736

Browse files
author
hansol787897465121
committed
[add] 메인팝업 추가
1 parent d901d27 commit 2a89736

File tree

12 files changed

+313
-159
lines changed

12 files changed

+313
-159
lines changed

‎README.md

+3-1
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,9 @@ npm install bootstarp
2929
npm install swiper
3030
npm install jquery
3131
npm install react-responsive
32-
npm install react-scroll
32+
npm install react-scroll
33+
npm install react-cookie
34+
npm install react-draggable
3335

3436
### 1depth 폴더명
3537

‎public/images/main/mainpopup.png

306 KB
Loading

‎src/components/common/PCLayout.js

+4
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
import React from "react";
22
import { Route, Switch } from "react-router-dom";
33

4+
import Popup from './Popup';
5+
46
// 아카데미
57
import OrderPage from "../../components/academy/OrderPage";
68
import Partnership from "../../components/academy/Partnership";
@@ -137,6 +139,8 @@ export default function PCLayout({ isLogin }) {
137139
</Switch>
138140

139141
<Footer />
142+
143+
<Popup />
140144
</>
141145
);
142146
}

‎src/components/common/Popup.js

+53
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import React from 'react';
2+
import Draggable from 'react-draggable';
3+
import { useCookies } from 'react-cookie';
4+
import './popup.css';
5+
6+
import { useState } from "react";
7+
8+
export default function Popup() {
9+
10+
/* 팝업 쿠키 */
11+
const [cookies, setCookie] = useCookies(['popupCookie']);
12+
const popupCookie = cookies.popupCookie;
13+
const [todayNotShow, setTodayNotShow] = useState(false);
14+
15+
16+
/* 팝업 닫기 */
17+
const [popOpen, setPopOpen] = useState(true);
18+
const closePopFn = () => {
19+
setPopOpen(false);
20+
//하루동안 보지않기 체크시, 쿠키 생성
21+
if(todayNotShow){
22+
let now = new Date();
23+
let after1m = new Date();
24+
after1m = after1m.setMinutes(now.getMinutes() + 1);
25+
console.log(after1m);
26+
//date = date.setDate(date.getDate() + 1);
27+
//date = date.setMinutes(date.getMinutes() + 1);
28+
setCookie('popupCookie', 'test', {
29+
path: '/' ,
30+
expire: after1m
31+
32+
});
33+
}
34+
}
35+
return (
36+
<>
37+
{popupCookie !== "test" && popOpen &&
38+
<Draggable >
39+
<div className="popup-wrapper">
40+
<span className="main-pop-title">공지팝업</span>
41+
<img src="/images/main/mainpopup.png" alt="공지팝업" />
42+
<button className="btn-popup-close" onClick={closePopFn}>닫기</button>
43+
<div className="c-inp-chk-box popup-chkbox">
44+
<input type="checkbox" id="dcList01" className="inp-chk" onChange={(e) =>setTodayNotShow(e.target.checked)}/>
45+
<label htmlFor="dcList01">오늘 하루 보지않기</label>
46+
<span className="text-close"onClick={closePopFn}>닫기</span>
47+
</div>
48+
</div>
49+
</Draggable>
50+
}
51+
</>
52+
)
53+
}

‎src/components/common/common.css

+1
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,7 @@ h1,h2,h3,h4,h5,h6 {
6262
/* 반응형 웹 - PC */
6363
@media screen and (min-width:768px) {
6464
.wrapper{
65+
position: relative;
6566
padding-top: 80px;
6667
}
6768
.inner-box{

‎src/components/common/header.css

+1-1
Original file line numberDiff line numberDiff line change
@@ -151,7 +151,7 @@
151151
display: block;
152152
width: 24px;
153153
height: 24px;
154-
background: url(/public/images/main/ico_search.png) no-repeat;
154+
background: url(/public/images/search.png) no-repeat;
155155
background-size: 24px 24px;
156156
position: absolute;
157157
top:25%;right:20px;

‎src/components/common/popup.css

+49
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
.popup-wrapper{
2+
position: absolute;
3+
top: 200px;
4+
left: 400px;
5+
z-index: 9999;
6+
/* padding: 40px 0; */
7+
background-color: #fff;
8+
box-shadow: 0 2px 4px 0 rgb(0 0 0 / 20%);
9+
display: flex;
10+
flex-direction: column;
11+
}
12+
13+
.popup-wrapper img{
14+
width: 300px;
15+
height: 400px;
16+
17+
}
18+
19+
.popup-wrapper .btn-popup-close {
20+
position:absolute;
21+
top:10px;
22+
right:10px;
23+
overflow:hidden;
24+
width:23px;
25+
height:23px;
26+
background:url(/public/images/main/img_popup_close.png) no-repeat center center;
27+
text-indent:101%;
28+
white-space:nowrap;
29+
cursor: pointer;
30+
}
31+
32+
.popup-wrapper .main-pop-title{
33+
display: block;
34+
width:80px;
35+
height:23px;
36+
padding: 8px 10px;
37+
font-weight: bold;
38+
margin-bottom: 15px;
39+
}
40+
41+
.popup-wrapper .popup-chkbox{
42+
display: flex;
43+
justify-content: space-between;
44+
padding: 4px 10px;
45+
}
46+
47+
.popup-wrapper .text-close{
48+
cursor: pointer;
49+
}

‎src/components/main/Main.js

+17-4
Original file line numberDiff line numberDiff line change
@@ -14,17 +14,30 @@ import "swiper/css";
1414
import "swiper/css/navigation";
1515
import "swiper/css/pagination";
1616
import './main.css';
17+
import './banner.css';
1718

1819

20+
import Config from '../academy/Introduce/Config';
21+
1922

2023
export default function Main({isMobile}) {
2124
return (
2225
<div className="main-wrapper">
23-
<MainBanner />
24-
<MainContents />
2526
{
26-
!isMobile &&
27-
<MainBottom />
27+
!isMobile ?
28+
(<>
29+
<div className="main-banner-box">
30+
<Config />
31+
<MainBanner />
32+
</div>
33+
<MainContents />
34+
<MainBottom />
35+
</>)
36+
:
37+
(<>
38+
<MainBanner />
39+
<MainContents />
40+
</>)
2841
}
2942
</div>
3043
)

‎src/components/main/MainBanner.js

+2-5
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,6 @@ export default function MainBanner() {
3636
}}
3737
>
3838
<SwiperSlide>
39-
{/* <img src="/images/green.png" alt="재생" className="banner-img"/> */}
4039
<div className="main-frame">
4140
<div className="panel">
4241
<h1 className="panel-top-title">Power BI</h1>
@@ -47,7 +46,6 @@ export default function MainBanner() {
4746
</div>
4847
</SwiperSlide>
4948
<SwiperSlide>
50-
{/* <img src="/images/main/blue-banner.jpg" alt="재생" className="banner-img"/> */}
5149
<div className="main-frame">
5250
<div className="panel">
5351
<h1 className="panel2-top-title">사내강사 양성과정</h1>
@@ -57,16 +55,15 @@ export default function MainBanner() {
5755
<img src="/images/main/classroom.png" alt="Power BI" className="panel-img" style={{width:'240px',height:'240px'}}/>
5856
</div>
5957
</SwiperSlide>
60-
<SwiperSlide>
61-
{/* <img src="/images/main/banner2.jpg" alt="재생" className="banner-img"/> */}
58+
{/* <SwiperSlide>
6259
<div className="main-frame">
6360
<div className="panel">
6461
<h1 className="panel2-top-title">Power BI</h1>
6562
<p className="panel2-desc">데이터 활용과 시각화를 위한</p>
6663
<h3 className="panel-title">누구나 쉽게 데이터 시각화!<br/>데이터 보고서 전문가처럼!</h3>
6764
</div>
6865
</div>
69-
</SwiperSlide>
66+
</SwiperSlide> */}
7067

7168
<div className="swiper-pause" onClick={swiperPauseFn}>
7269
<img src="/images/main/pause.png" alt="재생" />

‎src/components/main/banner.css

+174
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,174 @@
1+
@media screen and (min-width:768px) {
2+
3+
.main-wrapper .main-banner-box{
4+
position: relative;
5+
width: 100%;
6+
min-height: 90vh;
7+
}
8+
9+
.main-wrapper .main-banner{
10+
position: absolute;
11+
top: 0;
12+
right: 0%;
13+
width: 60%;
14+
}
15+
.main-wrapper .IntroduceBox{
16+
height: 90vh;
17+
}
18+
19+
20+
/* swiper 페이지네이션 */
21+
.main-banner .swiper-pagination {
22+
position: absolute;
23+
left: 44%;
24+
}
25+
26+
.main-banner .swiper-pagination-bullet {
27+
width: 14px;
28+
height: 14px;
29+
/* border-radius: 50%; */
30+
background-color: rgba(255, 255, 255, 0.9);
31+
}
32+
.main-banner .swiper-pagination-bullet-active{
33+
width: 50px;
34+
border-radius: 50px;
35+
transition: all .4s linear;
36+
}
37+
38+
/* 배너 */
39+
.main-frame{
40+
position: absolute;
41+
top: 0;
42+
right: 0;
43+
bottom: 0;
44+
left: 0;
45+
display: flex;
46+
justify-content: space-between;
47+
align-items: center;
48+
width: 700px;
49+
max-width: 98rem;
50+
margin-right: auto;
51+
margin-left: auto;
52+
text-align: left;
53+
}
54+
.main-banner .swiper-slide::before{
55+
content: '';
56+
display: block;
57+
width: 100%;
58+
height: 90vh;
59+
}
60+
61+
.main-banner .swiper-slide-active .panel-img{
62+
transition: all 2.5s linear;
63+
transform: scale(1.2);
64+
}
65+
.main-frame .panel-title{
66+
font-size: 30px;
67+
color: #fff;
68+
font-weight: bold;
69+
margin-bottom: 20px;
70+
}
71+
.main-frame .panel2-title{
72+
font-size: 25px;
73+
color: #fff;
74+
font-weight: bold;
75+
margin-bottom: 30px;
76+
}
77+
78+
.main-frame .panel-desc{
79+
font-size: 20px;
80+
}
81+
.main-frame .panel2-desc{
82+
font-size: 20px;
83+
color: #fff;
84+
}
85+
.main-frame .panel-top-title{
86+
font-size: 50px;
87+
font-weight: bold;
88+
color: #2b2d36;
89+
}
90+
.main-frame .panel2-top-title{
91+
font-size: 45px;
92+
font-weight: bold;
93+
color: #fff;
94+
}
95+
.panel-img{
96+
width: 240px;
97+
height:240px;
98+
99+
}
100+
101+
.main-banner .swiper-slide .banner-img{
102+
width: 100%;
103+
height: 100%;
104+
border-radius: 0;
105+
}
106+
.main-banner .swiper::before{
107+
content: '';
108+
display: block;
109+
position:absolute;
110+
width: 50px;
111+
height: 23px;
112+
background-color: rgba(49,51,56,.6);
113+
padding: 5px 14px;
114+
border-radius: 18px;
115+
top: 23px;
116+
right: 18px;
117+
z-index: 2;
118+
box-sizing: content-box;
119+
}
120+
121+
.main-banner .swiper-button-prev::after,.swiper-button-next::after{
122+
/* position: relative; */
123+
display: none;
124+
}
125+
126+
.main-banner .swiper-button-prev{
127+
position: absolute;
128+
top: 40px;
129+
left: unset;
130+
right: 66px;
131+
background: url('/public/images/main/left-chevron.png') no-repeat center ;
132+
background-size: 24px 14px;
133+
}
134+
.main-banner .swiper-button-next{
135+
position: absolute;
136+
top: 40px;
137+
right: 20px;
138+
background: url('/public/images/main/right-chevron.png') no-repeat center ;
139+
background-size: 24px 14px;
140+
}
141+
.main-banner .swiper-pause {
142+
position: absolute;
143+
top: 26px;
144+
right: 49px;
145+
z-index: 10;
146+
cursor: pointer;
147+
}
148+
.main-banner .swiper-pause img{
149+
width: 14px;
150+
height: 15px;
151+
152+
}
153+
154+
}
155+
156+
157+
/* 반응형 웹 - Mobile */
158+
@media screen and (max-width:767px){
159+
160+
}
161+
162+
163+
164+
165+
166+
167+
.main-banner .swiper-slide:first-child::before{
168+
/* background: url('/public/images/green.png') no-repeat; */
169+
background-color: #C8E5B0;
170+
}
171+
.main-banner .swiper-slide:last-child:before{
172+
/* background: url('/public/images/main/blue-banner.jpg') no-repeat; */
173+
background-color: #18222B;
174+
}

0 commit comments

Comments
 (0)