diff --git a/components/button-link.js b/components/button-link.js new file mode 100644 index 0000000..20704dc --- /dev/null +++ b/components/button-link.js @@ -0,0 +1,151 @@ +const css = /*css*/ ` + +`; + +const html = /*html*/ ` + + + + +`; + +class ButtonLink extends HTMLElement { + constructor() { + super(); + + this.attachShadow({ + mode: "open", + }); + this.shadowRoot.innerHTML = css + html; + + this.setDefaultAttributes(); + this.validateAttributes(); + this.updateAttributes(); + } + + validateAttributes() { + if (!this.hasAttribute("href")) { + throw new Error('The "href" attribute is required.'); + } + + if (this.hasAttribute("size")) { + const size = this.getAttribute("size"); + const validSizes = ["big", "small"]; + + if (!validSizes.includes(size)) { + throw new Error( + `The "size" attribute must be one of ${validSizes.join(", ")}.` + ); + } + } + + if (this.hasAttribute("variant")) { + const variant = this.getAttribute("variant"); + const validVariants = ["ghost", "secondary"]; + + if (!validVariants.includes(variant)) { + throw new Error( + `The "variant" attribute must be one of ${validVariants.join(", ")}.` + ); + } + } + } + + setDefaultAttributes() { + if (!this.hasAttribute("size")) { + this.setAttribute("size", "small"); + } + + if (!this.hasAttribute("variant")) { + this.setAttribute("variant", "ghost"); + } + } + + updateAttributes() { + const link = this.shadowRoot.querySelector("a"); + link.setAttribute("href", this.getAttribute("href")); + + // Set target to "_blank" only for external links + if (!this.getAttribute("href").startsWith("#")) { + link.setAttribute("target", "_blank"); + } + + if (this.hasAttribute("size")) { + link.classList.add(this.getAttribute("size")); + } + + if (this.hasAttribute("variant")) { + link.classList.add(this.getAttribute("variant")); + } + } +} + +customElements.define("ds-button-link", ButtonLink); diff --git a/components/header.js b/components/header.js index 41c06fe..488b7e6 100644 --- a/components/header.js +++ b/components/header.js @@ -21,6 +21,8 @@ template.innerHTML = ` .buttons-container { display: flex; + align-items: center; + column-gap: 40px; } a { @@ -48,8 +50,8 @@ template.innerHTML = `
- 참여방법 안내 - 디스코드 참여하기 + 참여방법 안내 + 디스코드 참여하기
`; diff --git a/components/link-button/link-button.css b/components/link-button/link-button.css deleted file mode 100644 index c462f68..0000000 --- a/components/link-button/link-button.css +++ /dev/null @@ -1,58 +0,0 @@ -a.button { - text-decoration: none; - color: inherit; - padding: 10px 20px; - font-size: 16px; - cursor: pointer; - border-radius: 5px; - display: inline-block; - margin: 5px; - background-color: #f0f0f0; -} - -a.button:hover { - background-color: #e0e0e0; -} - -/* Outline style */ -a.button.outline { - border: 1px solid #000; -} - -/* Size variants */ -a.button.small { - padding: 5px 10px; - font-size: 14px; -} - -a.button.big { - padding: 15px 30px; - font-size: 18px; -} - -/* Style variants */ -a.button.ghost { - background-color: transparent; - border: none; - color: #000; -} - -a.button.ghost:hover { - background-color: rgba(0, 0, 0, 0.1); -} - -/* Combined ghost and outline styles */ -a.button.ghost.outline { - border: 1px solid #000; -} - -a.button.secondary { - background-color: #d9d9d9; - border: 1px solid #d9d9d9; - color: #000; -} - -a.button.secondary:hover { - background-color: #b0b0b0; - border: 1px solid #b0b0b0; -} diff --git a/components/link-button/link-button.js b/components/link-button/link-button.js deleted file mode 100644 index 44f7eec..0000000 --- a/components/link-button/link-button.js +++ /dev/null @@ -1,76 +0,0 @@ -class LinkButton extends HTMLElement { - constructor() { - super(); - this.attachShadow({ mode: "open" }); - - this.validateAttributes(); - this.setDefaultAttributes(); - - this.render(); - } - - - - validateAttributes() { - // Validate required attributes - if (!this.hasAttribute("href")) { - throw new Error('The "href" attribute is required.'); - } - - // Validate allowed attributes - const allowedAttributes = ["size", "variant", "href", "outline"]; - for (const attr of this.attributes) { - if (!allowedAttributes.includes(attr.name)) { - throw new Error(`The attribute "${attr.name}" is not allowed.`); - } - } - } - - setDefaultAttributes() { - if (!this.hasAttribute("size")) { - this.setAttribute("size", "small"); - } - if (!this.hasAttribute("variant")) { - this.setAttribute("variant", "ghost"); - } - } - - render() { - this.shadowRoot.innerHTML = ` - - `; - - const href = this.getAttribute("href"); - const size = this.getAttribute("size"); - const variant = this.getAttribute("variant"); - const outline = this.hasAttribute("outline"); - - const element = document.createElement("a"); - element.setAttribute("href", href); - - // Set target to "_blank" only for external links - if (!href.startsWith("#")) { - element.setAttribute("target", "_blank"); - } - - element.classList.add("button"); - - if (size) { - element.classList.add(size); - } - - if (variant) { - element.classList.add(variant); - } - - if (outline) { - element.classList.add("outline"); - } - - element.innerHTML = ``; - - this.shadowRoot.appendChild(element); - } -} - -customElements.define("link-button", LinkButton); diff --git a/index.html b/index.html index 81db82c..1cee870 100644 --- a/index.html +++ b/index.html @@ -239,11 +239,11 @@

해외취업을 위한 커뮤니티 기반 알고리즘 스터디

- 디스코드 참여하기디스코드 참여하기
@@ -258,12 +258,12 @@

지역에 관계없이 다양한 언어로 참여할 수 있어요

- 참여방법 안내참여방법 안내
@@ -271,11 +271,11 @@

코드리뷰를 통해 새로운 관점을 배울 수 있어요

- 디스코드 참여하기디스코드 참여하기
diff --git a/main.js b/main.js index 351112f..ca2fd53 100644 --- a/main.js +++ b/main.js @@ -1,6 +1,6 @@ import "./components/footer-link/footer-link.js"; import "./components/header.js"; import "./components/hero/hero.js"; -import "./components/link-button/link-button.js"; +import "./components/button-link.js"; import "./components/review-item/review-item.js"; import "./components/seo-meta-tag/seo-meta-tag.js";