-
Notifications
You must be signed in to change notification settings - Fork 11
/
members.js
199 lines (190 loc) · 9.3 KB
/
members.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
const members = [
{
name: "☃️ 김예지",
link: "https://skwldwld.github.io/p0",
github: "https://github.com/skwldwld",
image: "img/김예지.jpg",
title: "Just do it",
githuNickname: "skwldwld",
selfPR:
"일단 그냥 해보는 개발자, 김예지입니다.\n어렵고 힘들어보여도 하고 싶은 일이라면\n겁먹고 포기하기보다는 도전해보는 편입니다.\n아직 많이 부족하지만, 멋사에서 다양한 경험을 하며\n여러분들과 함께 성장하고 싶습니다!😝",
linkColor: "rgba(0, 85, 255, 0.4)",
githuNicknameColor: "rgba(120, 195, 255, 0.5)",
titlCcolor: "rgba(229, 249, 128, 0.4)",
},
{
name: "🤖 장한성",
link: "https://bit.ly/423tfqk",
github: "https://github.com/HansungJang",
image: "img/장한성.jpg",
title: "Every dog has his days",
githuNickname: "HansungJang",
selfPR:
"말하는 것과 음식을 좋아하는 개발자 장한성입니다.\n퀵커머스와 시니어 비즈니스와 관련된 주제에\n 관심이 많고 또, 자료조사에 뛰어나고 열정이 많습니다.\n 멋쟁이사자처럼에서 다양한 개발 경험을 쌓기를 희망하고 있어요!",
linkColor: "rgba(0, 140, 255, 0.5)",
githuNicknameColor: "rgba(120, 195, 255, 0.5)",
titlCcolor: "rgba(249, 239, 128, 0.6)",
},
{
name: "🐼 이한나",
link: "https://leehannaa.github.io/likeLion-profile/", // 추후 배포한 사이트 링크
github: "https://github.com/LeeHannaa",
image: "img/이한나.png",
title: "Think different",
githuNickname: "Leehannaa",
selfPR:
"다른 생각으로 발전해나가는 개발자, 이한나입니다. \n3주간의 기간 동안 협력하여 우리만의 프로젝트를 완성시켜 나가겠습니다.🔥\n‘당당한 개발자, 새로운 개발자’ 모습에 한 발자국 더 가까워져 있는 모습을 기대합니다.👊🏻",
linkColor: "rgba(0, 85, 255, 0.4)",
githuNicknameColor: "rgba(120, 195, 255, 0.5)",
titlCcolor: "rgba(219, 249, 128, 0.4)",
},
{
name: "🌊 심성환",
link: "https://hwan129.github.io/myprofile/",
github: "https://github.com/hwan129",
image: "img/심성환.jpg",
title: "Never know until you try",
githuNickname: "hwan129",
selfPR:
"포기하지 않고 개발하는 심성환입니다!\n아직 많이 부족하지만, 궁금한 것을 넘어가지 않고, 막히더라도 끝까지 도전하여 포기하지 않고 배워서 \n성장한 모습 보여드리겠습니다!😤",
linkColor: "rgba(0, 140, 255, 0.5)",
githuNicknameColor: "rgba(120, 195, 255, 0.5)",
titlCcolor: "rgba(243, 249, 128, 0.6)",
},
{
name: "🍓 임종현",
link: "https://dkrehd0519.github.io/ll-test/",
github: "https://github.com/dkrehd0519",
image: "img/임종현.jpg",
title: "Don't dream, Be it",
githuNickname: "dkrehd0519",
selfPR:
"상상력이 풍부한 개발자 임종현입니다😄\n끊임없이 기본을 다지고 효율적인 방법을 모색해서\n더 나은 개발자가 되려고 노력하겠습니다!💻\n꿈을 꾸기만 하는 것이 아니라\n현실로 이뤄내는 사람이 되겠습니다. 😎",
linkColor: "rgba(0, 85, 255, 0.4)",
githuNicknameColor: "rgba(120, 195, 255, 0.5)",
titlCcolor: "rgba(249, 239, 128, 0.4)",
},
{
name: "🎀 김하은",
link: "https://haeoii.github.io/basic-setting/",
github: "https://github.com/HAEOII",
image: "img/김하은.jpg",
title: "Simple and happy",
githuNickname: "HAEOII",
selfPR:
"단순하고 행복하게! 개발자 김하은입니다.\n깊게 생각하고 스트레스 받고 고민하기보다는\n좋아하는 일에 무모하게 뛰어들어 부딪치고 싶어요!\n최선을 다해 또 행복하게 몰두하고 싶습니다😎\n멋쟁이 사자에서, 해내는 아기사자 되겠습니다💥",
linkColor: "rgba(0, 85, 255, 0.4)",
githuNicknameColor: "rgba(120, 195, 255, 0.5)",
titlCcolor: "rgba(249, 227, 128, 0.4)",
},
{
name: "⚽️ 한선규",
link: "https://sungyu0309.github.io/Profile/",
github: "https://github.com/sungyu0309",
image: "img/한선규.jpg",
title: "Grind hard, Shine hard",
githuNickname: "sungyu0309",
selfPR:
"끊임없이 노력하는 개발자, 한선규입니다.\n목표를 달성하기 위해, 문제를 해결하기 위해\n부딪히고 노력하며 결국 누구보다 빛나는 개발자가 되고 싶습니다!\n변화에 적응하기 위해 끊임없이 배워나가는 프론트엔드 개발자가 되겠습니다!",
linkColor: "rgba(0, 140, 255, 0.5)",
githuNicknameColor: "rgba(120, 195, 255, 0.5)",
titlCcolor: "rgba(239, 249, 128, 0.6)",
},
{
name: "🐥 최예라",
link: "https://yearachoi.github.io/Introduction-Mini-Project/",
github: "https://github.com/YearaChoi",
image: "img/최예라.jpg",
title: "Full of passion",
githuNickname: "YearaChoi",
selfPR:
"열정으로 가득차 있는 개발자, 최예라입니다.\n멋사에서 프로젝트를 진행하며\n'why?'라는 질문을 던지고,\n호기심을 해결하는 과정에서 더 성장하고 싶습니다!\n프론트 뉴비인만큼 언제든지\n새로운 것을 배워나갈 준비가 되어있답니다 🫡",
linkColor: "rgba(0, 85, 255, 0.4)",
githuNicknameColor: "rgba(120, 195, 255, 0.5)",
titlCcolor: "rgba(223, 249, 128, 0.4)",
},
{
name: "🐿️ 박은주 ",
link: "https://ejpark43.github.io/likeLion_assignment1/",
github: "https://github.com/ejPark43",
image: "img/박은주.jpg",
title: "Believe in yourself ",
githuNickname: "ejPark43",
selfPR:
"매사에 시간을 많이 쏟는 개발자 박은주 입니다.\n프로젝트를 할 때 생각보다 더 많은 시간을 투자하는 편이라 진행 속도가 느리지만, 계속해서 코드를 짜고 공부하면서 익숙하고 빠르게 코드를 짜는\n개발자가 되기 위해 노력할 것입니다.🙌",
linkColor: "rgba(0, 85, 255, 0.4)",
githuNicknameColor: "rgba(120, 195, 255, 0.5)",
titlCcolor: "rgba(241, 249, 128, 0.5)",
},
{
name: "🎵 김하영",
link: "https://hayoung04.github.io/Self-introduction/",
github: "https://github.com/Hayoung04",
image: "img/김하영.jpg",
title: "Practice makes perfect.",
githuNickname: "Hayoung04",
selfPR:
"안녕하세요, 열심히 노력하는 개발자 김하영입니다.\n계속해서 질문하고, 공부하다 보면\n결국 제가 해결하고자 하는 문제를\n해결할 수 있다고 생각합니다.\n이제는 노력을 넘어\n실력도 쌓아가는 아기 사자가 되겠습니다! 🫡",
linkColor: "rgba(0, 140, 255, 0.5)",
githuNicknameColor: "rgba(120, 195, 255, 0.5)",
titlCcolor: "rgba(241, 249, 128, 0.5)",
},
];
const membersNode = document.querySelector("div.members");
const originNode = document.querySelector("div.member-card");
const modalNode = document.querySelector("div.modal");
// 멤버 데이터 요소마다 반복
members.map((memberData) => {
const node = originNode.cloneNode(true); // 기존 template 클론
node.classList.remove("template"); // template 클래스를 삭제하여 display: none 해제
node.querySelector(".info-name").innerText = memberData.name; // 이름 변경
node
.querySelector(".info-github > a")
.setAttribute("href", memberData.github); // 깃헙주소 변경
node.querySelector(".info-github > a").innerText = memberData.githuNickname; // 각자 githubnickname에 github주소걸기
node.querySelector(".info-introduce > p").innerText = memberData.title; // title 변경
node
.querySelector(".card-banner > img")
.setAttribute("src", memberData.image);
// 각 member 별로 color 지정하기
node.querySelector(".info-link > a").style.backgroundColor =
memberData.linkColor;
node.querySelector(".info-github > a").style.backgroundColor =
memberData.githuNicknameColor;
node.querySelector(".info-introduce > p").style.backgroundColor =
memberData.titlCcolor;
node
.querySelector(".card-banner")
.addEventListener("click", () => openModal(memberData));
// 사이트 주소 링크(href) 와 Text 를 바꾸기 위해
// .link-a 태그를 모두 가져옴.
node.querySelectorAll(".link-a").forEach((el) => {
el.setAttribute("href", memberData.link);
// 하위 노드 개수가 1개이고 하위 노드가 텍스트 노드일경우 텍스트도 변경
if (
el.childNodes.length == 1 &&
el.childNodes[0].nodeType === Node.TEXT_NODE
)
el.innerText = "#자기소개";
});
membersNode.appendChild(node); // 만들어진 node 를 다시 추가
});
function openModal(memberData) {
document.body.style.overflow = "hidden";
const modal = document.querySelector(".modal");
modal.querySelector(".modal_img > img").setAttribute("src", memberData.image);
modal.querySelector(".modal_title").innerText = memberData.title;
modal.querySelector(".modal_selfPR").innerText = memberData.selfPR;
console.log("click");
modal.style.display = "flex";
}
function closeModal() {
modalNode.style.display = "none";
document.body.style.overflow = "auto";
}
window.addEventListener("click", (e) => {
e.target === modalNode
? ((modalNode.style.display = "none"),
(document.body.style.overflow = "auto"))
: false;
});