Skip to content

Commit 44d23e7

Browse files
devbit4devbit4
committed
Header, Banner, Footer, ArticleDetail, ArticleDetail 컴포넌트 퍼블리싱 수정
1 parent 80fe705 commit 44d23e7

File tree

11 files changed

+186
-24
lines changed

11 files changed

+186
-24
lines changed

‎src/components/ArticleDetail/index.js

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,11 @@ class ArticleDetail extends Component {
99
return `
1010
<div class=${styles.detail__box}>
1111
<img class=${styles.detail__img} src="${thumbnail}"/>
12-
<h3 class=${styles.detail__title}>${title}</h3>
13-
<p class=${styles.detail__summary}>${summary}</p>
14-
<p class=${styles.detail__date}>${date}</p>
12+
<div class=${styles.detail__text}>
13+
<h3 class=${styles.detail__title}>${title}</h3>
14+
<p class=${styles.detail__summary}>${summary}</p>
15+
<p class=${styles.detail__date}>${date}</p>
16+
</div>
1517
</div>
1618
`;
1719
}

‎src/components/ArticleDetail/styles.module.css

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,26 @@
11
.detail__box {
2-
width: 555px;
2+
width: 100%;
3+
display: flex;
4+
flex-direction: column;
5+
justify-content: center;
6+
align-items: center;
37
}
48

59
.detail__img {
10+
width: 100%;
611
height: 285px;
712
border-radius: 16px;
813
}
914

15+
.detail__text {
16+
width: 100%;
17+
}
18+
1019
.detail__title {
1120
margin-top: 30px;
1221
font-size: 36px;
1322
font-weight: 500;
23+
text-align: left;
1424
}
1525

1626
.detail__summary {

‎src/components/ArticleList/styles.module.css

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,18 @@
66
align-items: center;
77
}
88

9+
.article__item:hover .article__title {
10+
color: #3182f6;
11+
}
12+
13+
.article__item:hover .article__img {
14+
box-shadow:
15+
rgba(0, 0, 33, 0.07) 0px 16px 22.4px 4.8px,
16+
rgba(0, 0, 33, 0.05) 0px 3.2px 16px 0px,
17+
rgba(0, 0, 33, 0.07) 0px 0px 1px 0px;
18+
transform: translate3D(0, -3%, 0);
19+
}
20+
921
.article__item :nth-of-type(1) {
1022
margin-top: 16px;
1123
}
@@ -15,6 +27,7 @@
1527
height: 240px;
1628
border-radius: 14px;
1729
margin-right: 48px;
30+
transition: all 0.3s;
1831
}
1932

2033
.article__title {
@@ -23,6 +36,7 @@
2336
font-size: 36px;
2437
color: #333d4b;
2538
font-weight: 700;
39+
transition: all 0.3s;
2640
}
2741

2842
.article__desc {
@@ -37,3 +51,14 @@
3751
font-size: 14px;
3852
color: #8b95a1;
3953
}
54+
55+
@media screen and (max-width: 675px) {
56+
.article__item a {
57+
flex-direction: column;
58+
}
59+
60+
.article__item img {
61+
width: 100%;
62+
margin-right: 0;
63+
}
64+
}

‎src/components/Banner/styles.module.css

Lines changed: 22 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@
3232
font-size: 17px;
3333
line-height: 1.5;
3434
color: #e5e8eb;
35-
font-weight: 400;
35+
font-weight: 300;
3636
}
3737

3838
.banner__btn {
@@ -46,3 +46,24 @@
4646
color: white;
4747
border-radius: 6px;
4848
}
49+
50+
@media screen and (max-width: 675px) {
51+
.banner__inner {
52+
flex-direction: column;
53+
align-items: start;
54+
}
55+
56+
.banner__img {
57+
width: 90px;
58+
height: 90px;
59+
margin-bottom: 10px;
60+
}
61+
62+
.banner__title {
63+
font-size: 20px;
64+
}
65+
66+
.banner__desc {
67+
font-size: 16px;
68+
}
69+
}

‎src/components/Footer/styles.module.css

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -52,3 +52,13 @@
5252
.footer__socialItem {
5353
margin-right: 8px;
5454
}
55+
56+
@media screen and (max-width: 675px) {
57+
.footer__list {
58+
flex-direction: column;
59+
}
60+
61+
.footer__item {
62+
margin-bottom: 40px;
63+
}
64+
}

‎src/components/Header/index.js

Lines changed: 45 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -3,32 +3,62 @@ import Component from '@/core/Component';
33
import styles from './styles.module.css';
44

55
class Header extends Component {
6+
setup() {
7+
this.state = { open: false };
8+
}
9+
10+
didUpdate() {
11+
console.log(this.state);
12+
}
13+
614
template() {
715
return `
816
<header>
917
<div class=${styles.header__container}>
10-
<div class=${styles.header__wrapper}>
18+
<div class=${styles.header__wrapper}>
1119
<div class=${styles.header__inner}>
12-
<div class="header__logo">
13-
<div class=${styles.logo}>
14-
<a href="/" data-link>
15-
<img src="/img/logo.png" />
16-
</a>
20+
<div class=${styles.header__logo}>
21+
<div class=${styles.logo}>
22+
<a href="/" data-link>
23+
<img src="/img/logo.png" />
24+
</a>
25+
</div>
26+
<div class=${styles.header__btn}>${
27+
this.state.open
28+
? '닫기'
29+
: '<i class="fa-solid fa-bars"></i>'
30+
}</div>
1731
</div>
32+
33+
<div class=${
34+
this.state.open
35+
? `${styles.opend__nav}`
36+
: `${styles.closed__nav}`
37+
}>
38+
<ul class=${styles.nav__list}>
39+
<li class=${
40+
styles.nav__item
41+
}><a href="/design" data-link>디자인</a></li>
42+
<li class=${
43+
styles.nav__item
44+
}><a href="/" data-link>개발</a></li>
45+
<li class=${
46+
styles.nav__item
47+
}><button>채용 바로가기</button></li>
48+
</ul>
49+
</div>
1850
</div>
19-
<div class="header__nav">
20-
<ul class=${styles.nav__list}>
21-
<li class=${styles.nav__item}><a href="/design" data-link>디자인</a></li>
22-
<li class=${styles.nav__item}><a href="/" data-link>개발</a></li>
23-
<li class=${styles.nav__item}><button>채용 바로가기</button></li>
24-
</ul>
25-
</div>
26-
</div>
27-
</div>
51+
</div>
2852
</div>
2953
</header>
3054
`;
3155
}
56+
57+
setEvent() {
58+
this.addEvent('click', `.${styles.header__btn}`, () => {
59+
this.setState({ open: !this.state.open });
60+
});
61+
}
3262
}
3363

3464
export default Header;

‎src/components/Header/styles.module.css

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,10 @@
2525
background-color: red;
2626
}
2727

28+
.header__btn {
29+
display: none;
30+
}
31+
2832
.nav__list {
2933
display: flex;
3034
align-items: center;
@@ -56,3 +60,47 @@
5660
color: white;
5761
line-height: 18px;
5862
}
63+
64+
@media screen and (max-width: 675px) {
65+
.header__container {
66+
height: 100%;
67+
}
68+
69+
.header__inner {
70+
flex-direction: column;
71+
align-items: start;
72+
}
73+
74+
.header__logo {
75+
width: 100%;
76+
display: flex;
77+
justify-content: space-between;
78+
align-items: center;
79+
}
80+
81+
.header__btn {
82+
display: block;
83+
}
84+
85+
.opend__nav {
86+
width: 100%;
87+
display: block;
88+
}
89+
90+
.closed__nav {
91+
display: none;
92+
}
93+
94+
.nav__list {
95+
flex-direction: column;
96+
}
97+
98+
.nav__item {
99+
width: 100%;
100+
padding: 20px 0;
101+
}
102+
103+
.nav__item button {
104+
width: 100%;
105+
}
106+
}

‎src/core/Component.js

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ class Component {
1212

1313
this.setup();
1414
this.mount();
15+
this.setEvent();
1516
}
1617

1718
setup() {}
@@ -38,11 +39,26 @@ class Component {
3839

3940
didUpdate() {}
4041

42+
setEvent() {}
43+
4144
setState(newState) {
4245
this.state = { ...this.state, ...newState };
4346

4447
this.update();
4548
}
49+
50+
addEvent(eventType, selector, callback) {
51+
const children = Array.from(this.target.querySelectorAll(selector));
52+
53+
const isTarget = (target) =>
54+
children.includes(target) || target.closest(selector);
55+
56+
this.target.addEventListener(eventType, (event) => {
57+
if (!isTarget(event.target)) return false;
58+
callback(event);
59+
return true;
60+
});
61+
}
4662
}
4763

4864
export default Component;

‎src/index.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
.header {
22
position: sticky;
33
top: 0;
4+
z-index: 100;
45
}

‎src/pages/Article/styles.module.css

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,11 @@
11
.detail__container {
2-
max-width: 980px;
2+
max-width: 700px;
33
margin: 0 auto;
44
}
55

66
.detail__inner {
77
width: 92%;
8-
display: flex;
9-
flex-direction: column;
10-
align-items: center;
8+
margin: 0 auto;
119
margin-top: 36px;
1210
margin-bottom: 64px;
1311
}

0 commit comments

Comments
 (0)