Skip to content

Commit 3285a14

Browse files
LimttugiLimttugi
committed
feat: 컴포넌트 스크립트 코드 추가 및 절대 경로 설정
1 parent 93f63cc commit 3285a14

File tree

3 files changed

+87
-52
lines changed

3 files changed

+87
-52
lines changed

‎jsconfig.json

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{
2+
"compilerOptions": {
3+
"baseUrl": "src"
4+
},
5+
"include": ["src"]
6+
}

‎pages/reference/youtube/index.html

+69-44
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,57 @@
11
<!DOCTYPE html>
22
<html lang="ko" class="html">
3-
<head>
4-
<link rel="icon" href="/src/assets/images/favicon.ico">
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6-
<title>youtube | Algoview</title>
7-
<link rel="stylesheet" href="../../../src/css/common/reset.css" />
8-
<link rel="stylesheet" href="./style.css" />
9-
</head>
10-
<body class="body">
11-
<header class="headerContainer">헤더 파트 추가 예정</header>
12-
<nav class="referenceNavigationContainer">
13-
<ul class="navigationListWrapper">
14-
<li class="navigationItem active"><a href="#">YouTube</a></li>
15-
<li class="navigationItem"><a href="#">Practice</a></li>
16-
</ul>
17-
</nav>
18-
<main class="referenceContainer">
19-
<h2 class="referenceTitle">YouTube</h2>
20-
<ul class="youtubeListContainer" id="youtubeListContainer">
21-
<!-- Existing item -->
22-
</ul>
23-
</main>
24-
<footer></footer>
3+
<head>
4+
<link rel="icon" href="/src/assets/images/favicon.ico" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>youtube | Algoview</title>
7+
<link rel="stylesheet" href="/src/css/common/header.css" />
8+
<link rel="stylesheet" href="/src/css/common/reset.css" />
9+
<link rel="stylesheet" href="./style.css" />
10+
</head>
11+
<body class="body">
12+
<!-- header -->
13+
<header class="header"></header>
14+
<!-- !header -->
2515

26-
<!-- 유튜버 리스트 추가 -->
27-
<script>
28-
async function loadMoreContent() {
29-
const response = await fetch('./youtuber.json');
30-
const data = await response.json();
16+
<!-- main -->
17+
<main class="main">
18+
<!-- sidebar -->
19+
<div class="sidebar">
20+
<!-- <nav class="referenceNavigationContainer"> -->
21+
<ul class="navigationListWrapper">
22+
<li class="navigationItem active"><a href="#">YouTube</a></li>
23+
<li class="navigationItem"><a href="#">Practice</a></li>
24+
</ul>
25+
<!-- </nav> -->
26+
</div>
27+
<!-- !sidebar -->
3128

32-
const youtubeList = document.getElementById('youtubeListContainer');
29+
<!-- mainContent -->
30+
<section class="referenceContainer">
31+
<h2 class="referenceTitle">YouTube</h2>
32+
<ul class="youtubeListContainer" id="youtubeListContainer">
33+
<!-- Existing item -->
34+
</ul>
35+
</section>
36+
<!-- !mainContent -->
37+
</main>
38+
<!-- !main -->
3339

34-
data.youtuber.forEach((youtuber) => {
35-
const newItem = document.createElement('li');
36-
newItem.innerHTML = `
40+
<!-- footer -->
41+
<footer class="footer"></footer>
42+
<!-- !footer -->
43+
44+
<!-- Add Youtuber List -->
45+
<script>
46+
async function loadMoreContent() {
47+
const response = await fetch('./youtuber.json');
48+
const data = await response.json();
49+
50+
const youtubeList = document.getElementById('youtubeListContainer');
51+
52+
data.youtuber.forEach((youtuber) => {
53+
const newItem = document.createElement('li');
54+
newItem.innerHTML = `
3755
<a href="${youtuber.link}" class="youtubeItem" target="_blank">
3856
<img src="${youtuber.img}" alt="hi" class="youtubeImage" />
3957
<div class="listInformation">
@@ -43,17 +61,24 @@ <h3 class="youtubeTitle">${youtuber.title}</h3>
4361
</div>
4462
</a>
4563
`;
46-
youtubeList.appendChild(newItem);
47-
});
48-
}
64+
youtubeList.appendChild(newItem);
65+
});
66+
}
4967

50-
loadMoreContent();
51-
</script>
52-
<!-- footer 추가 -->
53-
<script type="module">
54-
import { footerHTML } from '/src/js/footer.js';
55-
const footer = document.querySelector('footer');
56-
footer.innerHTML = footerHTML();
57-
</script>
58-
</body>
59-
</html>
68+
loadMoreContent();
69+
</script>
70+
<!-- !Add Youtuber List -->
71+
<!-- Create Components -->
72+
<script type="module">
73+
// Create Header
74+
import { headerHTML, onClickHeader } from '/src/js/header.js';
75+
headerHTML();
76+
onClickHeader();
77+
// Create Footer
78+
import { footerHTML } from '/src/js/footer.js';
79+
const footer = document.querySelector('.footer');
80+
footer.innerHTML = footerHTML();
81+
</script>
82+
<!-- !Create Components -->
83+
</body>
84+
</html>

‎pages/reference/youtube/style.css

+12-8
Original file line numberDiff line numberDiff line change
@@ -17,23 +17,27 @@
1717
font-family: 'Pretendard-Regular';
1818
}
1919

20+
.main {
21+
display: flex;
22+
}
23+
2024
/* navigation */
21-
.referenceNavigationContainer {
22-
float: left;
23-
background: #605bff;
25+
.sidebar {
2426
width: 360px;
25-
height: calc(100% - 280px);
26-
padding: 80px 60px;
27+
background: #605bff;
2728
}
29+
30+
/* .referenceNavigationContainer {
31+
} */
2832
.navigationListWrapper {
2933
display: flex;
3034
flex-direction: column;
3135
gap: 10px;
36+
padding: 80px 60px;
3237
}
3338
.navigationItem {
3439
display: flex;
3540
align-items: center;
36-
width: 225px;
3741
height: 70px;
3842
padding-left: 30px;
3943
border-radius: 10px;
@@ -51,9 +55,9 @@
5155

5256
/* main */
5357
.referenceContainer {
58+
flex: 1;
5459
overflow: scroll;
55-
height: calc(100% - 280px);
56-
padding: 80px 60px 120px 60px;
60+
padding: 80px 60px 235px 60px;
5761
background-color: var(--bgc-body);
5862
}
5963
.referenceTitle {

0 commit comments

Comments
 (0)