Skip to content

Commit 80fe705

Browse files
devbit4devbit4
committed
feat : Header, Banner, Footer, ArticleDetail, ArticleDetail 컴포넌트 퍼블리싱 반영
1 parent 656f3ad commit 80fe705

File tree

11 files changed

+373
-5
lines changed

11 files changed

+373
-5
lines changed

‎public/img/logo.png‎

17.7 KB
Loading

‎src/components/ArticleDetail/index.js‎

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,18 @@
11
import Component from '@/core/Component';
22

3+
import styles from './styles.module.css';
4+
35
class ArticleDetail extends Component {
46
template() {
7+
const { title, summary, thumbnail, date } = this.props.item;
8+
59
return `
6-
<div>
7-
${this.props.item.id}번
8-
${this.props.item.title}
9-
</div>
10+
<div class=${styles.detail__box}>
11+
<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>
15+
</div>
1016
`;
1117
}
1218
}

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

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
.detail__box {
2+
width: 555px;
3+
}
4+
5+
.detail__img {
6+
height: 285px;
7+
border-radius: 16px;
8+
}
9+
10+
.detail__title {
11+
margin-top: 30px;
12+
font-size: 36px;
13+
font-weight: 500;
14+
}
15+
16+
.detail__summary {
17+
margin-top: 20px;
18+
}
19+
20+
.detail__date {
21+
margin-top: 20px;
22+
margin-bottom: 500px;
23+
}

‎src/components/ArticleList/index.js‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,24 @@
11
import Component from '@/core/Component';
22

3+
import styles from './styles.module.css';
4+
35
class ArticleList extends Component {
46
template() {
57
return `
68
<ul>
79
${this.props.list
810
.map(
911
(item, index) =>
10-
`<li><a href="/articles/${index}" data-link>${item.id}번 ${item.title}아티클</a></li>`,
12+
`<li class=${styles.article__item}>
13+
<a href="/articles/${index}" data-link>
14+
<img src="${item.thumbnail}" alt="thumbnail" class=${styles.article__img}>
15+
<div class=${styles.article__item}>
16+
<h3 class=${styles.article__title}>${item.title}</h3>
17+
<p class=${styles.article__desc}>${item.summary}</p>
18+
<p class=${styles.article__date}>${item.date}</p>
19+
</div>
20+
</a>
21+
</li>`,
1122
)
1223
.join('')}
1324
</ul>

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

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
.article__item a {
2+
width: 100%;
3+
display: flex;
4+
margin-top: 80px;
5+
text-decoration: none;
6+
align-items: center;
7+
}
8+
9+
.article__item :nth-of-type(1) {
10+
margin-top: 16px;
11+
}
12+
13+
.article__img {
14+
width: 240px;
15+
height: 240px;
16+
border-radius: 14px;
17+
margin-right: 48px;
18+
}
19+
20+
.article__title {
21+
display: inline-block;
22+
margin-bottom: 14px;
23+
font-size: 36px;
24+
color: #333d4b;
25+
font-weight: 700;
26+
}
27+
28+
.article__desc {
29+
margin-bottom: 12px;
30+
font-size: 16px;
31+
color: #4e5968;
32+
line-height: 1.6;
33+
text-overflow: ellipsis;
34+
}
35+
36+
.article__date {
37+
font-size: 14px;
38+
color: #8b95a1;
39+
}

‎src/components/Banner/index.js‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import Component from '@/core/Component';
2+
3+
import styles from './styles.module.css';
4+
5+
class Banner extends Component {
6+
template() {
7+
return `
8+
<div class=${styles.banner__container}>
9+
<div class=${styles.banner__inner}>
10+
<div class=${styles.banner__img}>
11+
<img src="https://static.toss.im/3d/website_code_blue_alpha.png"/>
12+
</div>
13+
<div class="banner__box">
14+
<div class=${styles.banner__title}>
15+
<span>토스팀이 만드는 수많은 혁신의 순간들</span>
16+
</div>
17+
<div class=${styles.banner__desc}>
18+
<span
19+
>당신과 함께 만들고 싶습니다.<br />지금, 토스팀에
20+
합류하세요.</span
21+
>
22+
</div>
23+
<button class=${styles.banner__btn}>채용 중인 공고 보기</div>
24+
</div>
25+
</div>
26+
</div>
27+
`;
28+
}
29+
}
30+
31+
export default Banner;

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

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
.banner__container {
2+
padding: 60px 24px;
3+
background-color: rgba(2, 9, 19, 0.91);
4+
}
5+
6+
.banner__inner {
7+
display: flex;
8+
justify-content: center;
9+
align-items: center;
10+
}
11+
12+
.banner__img {
13+
width: 186px;
14+
height: 186px;
15+
margin-right: 30px;
16+
}
17+
18+
.banner__img img {
19+
width: 100%;
20+
height: 100%;
21+
}
22+
23+
.banner__title {
24+
margin: 0;
25+
font-size: 26px;
26+
line-height: 1.4;
27+
color: #ffffff;
28+
}
29+
30+
.banner__desc {
31+
margin-top: 8px;
32+
font-size: 17px;
33+
line-height: 1.5;
34+
color: #e5e8eb;
35+
font-weight: 400;
36+
}
37+
38+
.banner__btn {
39+
margin-top: 24px;
40+
padding: 7px 12px;
41+
42+
border: none;
43+
text-decoration: none;
44+
background-color: #3182f6;
45+
padding: 7px 12px;
46+
color: white;
47+
border-radius: 6px;
48+
}

‎src/components/Footer/index.js‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
import Component from '@/core/Component';
2+
3+
import styles from './styles.module.css';
4+
5+
class Footer extends Component {
6+
template() {
7+
return `
8+
<div class=${styles.footer__container}>
9+
<div class=${styles.footer__inner}>
10+
<div class=${styles.footer__list}>
11+
<div class=${styles.footer__item}>
12+
<div class=${styles.footer__title}>토스테크</div>
13+
<div class=${styles.footer__subTitle}>
14+
<ul>
15+
<li><span>의견 보내기</span></li>
16+
</ul>
17+
</div>
18+
</div>
19+
<div class=${styles.footer__item}>
20+
<div class=${styles.footer__title}>토스</div>
21+
<div class=${styles.footer__subTitle}>
22+
<ul>
23+
<li><span>홈페이지</span></li>
24+
<li><span>회사 소개</span></li>
25+
<li><span>채용</span></li>
26+
</ul>
27+
</div>
28+
</div>
29+
<div class=${styles.footer__item}>
30+
<div class=${styles.footer__title}>고객센터</div>
31+
<div class=${styles.footer__subTitle}>
32+
<ul>
33+
<li><span>전화: 1599-4905(24시간 연중무휴)</span></li>
34+
<li><span>이메일: [email protected]</span></li>
35+
<li><span>카카오톡: @toss</span></li>
36+
</ul>
37+
</div>
38+
</div>
39+
</div>
40+
<div class=${styles.footer__company}>
41+
<span>(주)비바리퍼블리카</span>
42+
</div>
43+
<div class=${styles.footer__copyright}>
44+
<span>Copyright © Viva Republica, Inc. All Rights Reserved.</span>
45+
</div>
46+
<div class=${styles.footer__socialList}>
47+
<li class=${styles.footer__socialItem}>
48+
<a>
49+
<img src="https://static.toss.im/assets/homepage/safety/icn-facebook.svg" alt="Toss Facebook">
50+
</a>
51+
</li>
52+
<li class=${styles.footer__socialItem}>
53+
<a>
54+
<img src="https://static.toss.im/assets/homepage/safety/icn-facebook.svg" alt="Toss Facebook">
55+
</a>
56+
</li>
57+
</div>
58+
</div>
59+
</div>
60+
`;
61+
}
62+
}
63+
64+
export default Footer;

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

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
.footer__container {
2+
padding: 50px 0 100px;
3+
}
4+
5+
.footer__inner {
6+
max-width: 1064px;
7+
margin: 0 auto;
8+
9+
padding: 0 67px;
10+
}
11+
12+
.footer__list {
13+
display: flex;
14+
padding-bottom: 50px;
15+
}
16+
17+
.footer__item {
18+
width: 170px;
19+
color: #6b7684;
20+
list-style: none;
21+
font-size: 15px;
22+
line-height: 30px;
23+
}
24+
25+
.footer__list :nth-child(3) {
26+
flex: 1;
27+
}
28+
29+
.footer__title {
30+
color: black;
31+
font-weight: 500;
32+
}
33+
34+
.footer__company {
35+
display: block;
36+
padding-bottom: 16px;
37+
color: #333d4b;
38+
font-size: 15px;
39+
}
40+
41+
.footer__copyright {
42+
color: lightgray;
43+
padding-bottom: 60px;
44+
}
45+
46+
.footer__socialList {
47+
display: flex;
48+
list-style: none;
49+
margin: 20px 0;
50+
}
51+
52+
.footer__socialItem {
53+
margin-right: 8px;
54+
}

‎src/components/Header/index.js‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import Component from '@/core/Component';
2+
3+
import styles from './styles.module.css';
4+
5+
class Header extends Component {
6+
template() {
7+
return `
8+
<header>
9+
<div class=${styles.header__container}>
10+
<div class=${styles.header__wrapper}>
11+
<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>
17+
</div>
18+
</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>
28+
</div>
29+
</header>
30+
`;
31+
}
32+
}
33+
34+
export default Header;

0 commit comments

Comments
 (0)