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 0000000..c3ecd96 Binary files /dev/null and b/images/icon_step1.png differ diff --git a/images/icon_step2.png b/images/icon_step2.png new file mode 100644 index 0000000..3ac9462 Binary files /dev/null and b/images/icon_step2.png differ diff --git a/images/icon_step3.png b/images/icon_step3.png new file mode 100644 index 0000000..b282b18 Binary files /dev/null and b/images/icon_step3.png differ diff --git a/index.html b/index.html index b104969..3dd035a 100644 --- a/index.html +++ b/index.html @@ -200,10 +200,10 @@ } .instruction-card-list { - margin-top: 4rem; - display: flex; - flex-wrap: wrap; - gap: 0.9rem; + display: grid; + grid-template-columns: repeat(3, 375px); + gap: 10px; + padding-top: 40px; } .instruction-card { @@ -322,78 +322,30 @@
스터디 참여방법
-
- 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";