From ec8f8b5bca46365a84157975585aaabbce789e5a Mon Sep 17 00:00:00 2001 From: hwigyeompark Date: Tue, 25 Jun 2024 16:18:49 -0400 Subject: [PATCH] feat: add step component --- components/step.js | 100 ++++++++++++++++++++++++++++++++++++++++ images/icon_step1.png | Bin 0 -> 401 bytes images/icon_step2.png | Bin 0 -> 1009 bytes images/icon_step3.png | Bin 0 -> 573 bytes index.html | 104 ++++++++++++------------------------------ main.js | 1 + 6 files changed, 129 insertions(+), 76 deletions(-) create mode 100644 components/step.js create mode 100644 images/icon_step1.png create mode 100644 images/icon_step2.png create mode 100644 images/icon_step3.png diff --git a/components/step.js b/components/step.js new file mode 100644 index 0000000..3b1730e --- /dev/null +++ b/components/step.js @@ -0,0 +1,100 @@ +import { css, html } from "../html-css-utils.js"; + +class Step extends HTMLElement { + constructor() { + super(); + this.attachShadow({ mode: "open" }); + this.validateAttributes(); + this.render(); + } + + connectedCallback() { + this.updateLink(); + } + + validateAttributes() { + const status = this.getAttribute("status"); + const validStatuses = ["1", "2", "3"]; + if (status && !validStatuses.includes(status)) { + throw new Error( + `The "status" attribute must be one of ${validStatuses.join(", ")}.` + ); + } + } + + updateLink() { + const slot = this.shadowRoot.querySelector("slot"); + const nodes = slot.assignedNodes({ flatten: true }); + const linkText = this.getAttribute("linkText"); + const link = this.getAttribute("link"); + const linkHtml = `${linkText}`; + + nodes.forEach((node) => { + if (node.nodeType === Node.TEXT_NODE) { + const tempDiv = document.createElement("div"); + tempDiv.innerHTML = node.textContent.split(linkText).join(linkHtml); + while (tempDiv.firstChild) { + node.parentNode.insertBefore(tempDiv.firstChild, node); + } + node.remove(); + } else if (node.nodeType === Node.ELEMENT_NODE) { + node.innerHTML = node.innerHTML.split(linkText).join(linkHtml); + } + }); + } + + createCss() { + return css` + .step { + display: flex; + flex-direction: column; + align-items: center; + background: white; + border: 1px solid #000000; + border-radius: 10px; + padding: 106px 53px; + text-align: center; + max-width: 375px; + max-height: 627px; + } + .step-title h3 { + font-size: 36px; + margin-bottom: 50px; + } + + .step-icon { + width: 60px; + height: 60px; + margin-bottom: 50px; + } + + .step-content { + font-size: 24px; + word-break: keep-all; + } + `; + } + + createHtml() { + const status = this.getAttribute("status") ?? "1"; + const iconSrc = this.getAttribute("iconSrc"); + + return html` +
+
+

Step ${status}

+
+ step ${status} icon +
+ +
+
+ `; + } + + render() { + this.shadowRoot.innerHTML = this.createCss() + this.createHtml(); + } +} + +customElements.define("ds-step", Step); diff --git a/images/icon_step1.png b/images/icon_step1.png new file mode 100644 index 0000000000000000000000000000000000000000..c3ecd966a925cb551737605521ce95d83a31528f GIT binary patch literal 401 zcmeAS@N?(olHy`uVBq!ia0vp^W3KD3-v;9)=H;4xwUKl9Bp3J&)iHchzc^6a9;H+3QL_rK*_G)0`7lQMXY z1_`%zdfmF2A)za4xe$6-8nhhcTf$D9K7?#Q>Sygw~q z@^Sxl=MAAMeJ=2MeO%6SC2h)9POERTmXym|90Qq^xuw8v3*hP1 zy(YR?ElE6D<;4vH$JGvNXS|xUc=wCPsYm4&^{>8rX%$J~Mr>=ICdI|x&O)q#}?><-8doLi1`Zn@d1fJy~+Dp0tlG^S*c+$H#c z{LSoGmVgC*VDY5%fpKxA`O?m}uP05PU2OE|`&oX$2pP0LO$ls#f1bUZPThr>2A^Fpb+`LpkMEFnQWA9dAnuRl;=^BC@ZsQ$=_9>qGnyYzqF;S zTSYw|P_RJPiW+Ats&OWjOQ`0IwxQ#wdS_YM-PSzqBM?X~d8vU&H z+M(a~u8D(ZWjYbPtiMqg?$Iy&+H_-MS*x#_(rdBWt~E)N}eqXRL={Ky1o zsdIklAPsde6CQhq?S*?`$S7$Y@t|4D>z3>?I%CEqaUnfuxdKaf87~c)-mHg_u)-Fx zFIYk)B~Bd1aW3olx!ym2h?6z?&5YngxFvKSi5E-VUW7YChBfi>*N}E$?eX`5JLCQE z$&%PA+z~IP$Q9wH*^qd#2!FN;pY4?i*U=Pr0d>nE-sDfUpm`* zn2+s{BFO&Ra^85sV-sEw7YVld=evy7V_i(W?yx_^Sk)cm#>`?d%<$H$Cox}lu@G%l<}H<@!BQOVJAl~NMm=J zLfe*zdf01Lf*gni#RK98Uo?_FI5hmPvRNceTJl4K4E*TSz>n0q{;#0=E zhszjI^ape}+9#`fsvptpuCZj8d@1c4{mHOL)prK!?K&dHdJGI9Gn69}S;EMy&{rsg zOj$<3gxB5<-3B9sOyOUa+*vL^SF|@k2w98YoCt1!9L)_7!m$mM2=+us!t2TEmN2A8 fr7@enxg5lQW-=B)a+CNc00000NkvXXu0mjfa4_b= literal 0 HcmV?d00001 diff --git a/images/icon_step3.png b/images/icon_step3.png new file mode 100644 index 0000000000000000000000000000000000000000..b282b18edc22aa9242b854767c2e69401a05c58e GIT binary patch literal 573 zcmeAS@N?(olHy`uVBq!ia0vp^PC#tK!3HER)#OA1Db50q$YKTtZeb8+WSBKa0w~B> z9OUlAu0=)uJera0d^E{u+J0$N@ z#CpzejmKyA`h!e?Xr2%eX}QI!#puTlQ)O`I2|21X)i7zSJ8B;K#p*6Fwi!HK{an^L HB{Ts5 스터디 참여방법
-
- Step 1 - - - - - - -

- 현재 스터디 1기가 진행중이에요. (2024년 4/21~8/10) 다음 기수 스터디 - 참여를 원한다면 여기에서 신청할 수 있어요. -

-
-
- Step 2 - - - - - - -

- 답안 제출과 확인은 깃허브를 통해 이루어져요. 스터디 전체 진행상황을 - 알고 싶다면 프로젝트 보드를 통해 파악할 수 있어요. -

-
-
- Step 3 - - - - - - -

- 매주 스터디 멤버들끼리 디스코드에서 간단한 모임을 가져요. 멤버 간의 - 친밀감도 쌓고 해외 취업 관련한 유용한 정보도 공유하고 있어요. -

-
+ +

현재 스터디 1기가 진행중이에요. (2024년 4/21~8/10) 다음 기수 스터디 참여를 원한다면 여기에서 신청할 수 있어요.

+ + +

답안 제출과 확인은 깃허브를 통해 이루어져요. 스터디 전체 진행상황을 알고 싶다면 프로젝트 보드를 통해 파악할 수 있어요.

+ + +

매주 스터디 멤버들끼리 디스코드에서 간단한 모임을 가져요. 멤버 간의 친밀감도 쌓고 해외 취업 관련한 유용한 정보도 공유하고 있어요.

+
diff --git a/main.js b/main.js index 2b9b782..8c95229 100644 --- a/main.js +++ b/main.js @@ -4,3 +4,4 @@ import "./components/hero.js"; import "./components/button-link.js"; import "./components/review-item/review-item.js"; import "./components/seo-meta-tag/seo-meta-tag.js"; +import "./components/step.js";