모든 URL 중앙화

components/code-review-section.js

@@ -1,4 +1,5 @@
 import { css, html } from "../html-css-utils.js";
+import { DISCORD_URL } from "../data.js";
 
 class CodeReviewSection extends HTMLElement {
   constructor() {
@@ -71,19 +72,25 @@ class CodeReviewSection extends HTMLElement {
         }
       }
     `;
-    }
-
+  }
 
   createHtml() {
     return html`
       <section>
         <aside>
-          <slot name="image"></slot>
+          <ds-image
+            src="images/review.png"
+            alt="review"
+            width="100%"
+            height="auto"
+          ></ds-image>
         </aside>
 
         <div class="hero">
-          <slot name="heading"></slot>
-          <slot name="button"></slot>
+          <ds-hero> 코드리뷰를 통해 새로운 관점을 배울 수 있어요 </ds-hero>
+          <ds-button-link size="big" variant="primary" href="${DISCORD_URL}">
+            디스코드 참여하기
+          </ds-button-link>
         </div>
       </section>
     `;

components/footer-link-list.js

@@ -1,5 +1,5 @@
 import { css, html } from "../html-css-utils.js";
-import { APPLICATION_URL } from "../data.js";
+import { APPLICATION_URL, CONTRIBUTING_URL, FAQ_URL } from "../data.js";
 
 class FooterLinkList extends HTMLElement {
   constructor() {
@@ -70,7 +70,7 @@ class FooterLinkList extends HTMLElement {
     return html`<ul>
       <li>
         <a
-          href="https://github.com/DaleStudy/leetcode-study/discussions/54"
+          href="${FAQ_URL}"
           target="_blank"
           aria-label="Read the FAQ discussion on Algorithm study group"
         >
@@ -90,7 +90,7 @@ class FooterLinkList extends HTMLElement {
 
       <li>
         <a
-          href="https://github.com/DaleStudy/leetcode-study/blob/main/CONTRIBUTING.md"
+          href="${CONTRIBUTING_URL}"
           target="_blank"
           aria-label="Read the contributing guide for the Algorithm study group"
         >

components/header.js

@@ -1,4 +1,5 @@
 import { css, html } from "../html-css-utils.js";
+import { DISCORD_URL } from "../data.js";
 
 class Header extends HTMLElement {
   constructor() {
@@ -288,10 +289,7 @@ class Header extends HTMLElement {
           <ds-button-link href="#steps-section" size="small" variant="ghost"
             >참여방법 안내</ds-button-link
           >
-          <ds-button-link
-            href="https://discord.gg/6TwzdnW6ze"
-            size="small"
-            variant="primary"
+          <ds-button-link href="${DISCORD_URL}" size="small" variant="primary"
             >디스코드 참여하기</ds-button-link
           >
         </div>

components/icon-link-list.js

@@ -1,4 +1,10 @@
 import { css, html } from "../html-css-utils.js";
+import {
+  ALGO_DALE_URL,
+  GITHUB_URL,
+  LINKED_IN_URL,
+  YOUTUBE_URL,
+} from "../data.js";
 
 class IconLinkList extends HTMLElement {
   constructor() {
@@ -58,7 +64,11 @@ class IconLinkList extends HTMLElement {
 
   createHtml() {
     return html`<section>
-      <a href="https://www.algodale.com/" target="_blank" aria-label="Visit the Algodale website">
+      <a
+        href="${ALGO_DALE_URL}"
+        target="_blank"
+        aria-label="Visit the Algodale website"
+      >
         <svg
           width="24"
           height="24"
@@ -73,7 +83,11 @@ class IconLinkList extends HTMLElement {
         </svg>
       </a>
 
-      <a href="https://www.linkedin.com/in/daleseo/" target="_blank" aria-label="Visit Dale's LinkedIn profile">
+      <a
+        href="${LINKED_IN_URL}"
+        target="_blank"
+        aria-label="Visit Dale's LinkedIn profile"
+      >
         <svg
           width="24"
           height="24"
@@ -88,7 +102,11 @@ class IconLinkList extends HTMLElement {
         </svg>
       </a>
 
-      <a href="https://github.com/DaleStudy/leetcode-study" target="_blank" aria-label="Visit the Algorithm study group's GitHub repository">
+      <a
+        href="${GITHUB_URL}"
+        target="_blank"
+        aria-label="Visit the Algorithm study group's GitHub repository"
+      >
         <svg
           width="25"
           height="24"
@@ -103,7 +121,11 @@ class IconLinkList extends HTMLElement {
         </svg>
       </a>
 
-      <a href="https://www.youtube.com/@DaleSeo" target="_blank" aria-label="Visit Dale's YouTube channel">
+      <a
+        href="${YOUTUBE_URL}"
+        target="_blank"
+        aria-label="Visit Dale's YouTube channel"
+      >
         <svg
           width="25"
           height="18"

components/index.js

@@ -10,5 +10,5 @@ import "./intro-section.js";
 import "./language-section.js";
 import "./participant-review-section.js";
 import "./participant-review.js";
-import "./step-section.js";
+import "./steps-section.js";
 import "./step.js";

components/intro-section.js

@@ -1,4 +1,5 @@
 import { css, html } from "../html-css-utils.js";
+import { DISCORD_URL } from "../data.js";
 
 class IntroSection extends HTMLElement {
   constructor() {
@@ -87,12 +88,19 @@ class IntroSection extends HTMLElement {
     return html`
       <section>
         <aside>
-          <slot name="image"></slot>
+          <ds-image
+            src="images/roadmap.png"
+            alt="roadmap"
+            width="100%"
+            height="auto"
+          ></ds-image>
         </aside>
 
         <article>
-          <slot name="heading"></slot>
-          <slot name="button"></slot>
+          <ds-hero> 해외취업을 위한 커뮤니티 기반 알고리즘 스터디 </ds-hero>
+          <ds-button-link size="big" variant="primary" href="${DISCORD_URL}">
+            디스코드 참여하기
+          </ds-button-link>
         </article>
       </section>
     `;

components/step-section.js → components/steps-section.js

@@ -1,5 +1,5 @@
 import { html, css } from "../html-css-utils.js";
-import { APPLICATION_URL } from "../data.js";
+import { APPLICATION_URL, DISCORD_URL, PROJECT_URL } from "../data.js";
 
 class StepsSection extends HTMLElement {
   constructor() {
@@ -55,9 +55,7 @@ class StepsSection extends HTMLElement {
             <p slot="content">
               답안 제출과 확인은 깃허브를 통해 이루어져요. 스터디 전체
               진행상황을 알고 싶다면
-              <ds-step-text-link
-                link="https://github.com/orgs/DaleStudy/projects/1"
-              >
+              <ds-step-text-link link="${PROJECT_URL}">
                 프로젝트 보드
               </ds-step-text-link>
               를 통해 파악할 수 있어요.
@@ -66,7 +64,7 @@ class StepsSection extends HTMLElement {
           <ds-step step="3" icon-src="images/icon_step3.png">
             <p slot="content">
               매주 스터디 멤버들끼리
-              <ds-step-text-link link="https://discord.com/invite/6TwzdnW6ze">
+              <ds-step-text-link link="${DISCORD_URL}">
                 디스코드
               </ds-step-text-link>
               에서 간단한 모임을 가져요. 멤버 간의 친밀감도 쌓고 해외 취업

data.js

@@ -1,2 +1,12 @@
 export const APPLICATION_URL =
   "https://github.com/DaleStudy/leetcode-study/discussions/209";
+export const DISCORD_URL = "https://discord.gg/6TwzdnW6ze";
+export const PROJECT_URL = "https://github.com/orgs/DaleStudy/projects/1";
+export const CONTRIBUTING_URL =
+  "https://github.com/DaleStudy/leetcode-study/blob/main/CONTRIBUTING.md";
+export const FAQ_URL =
+  "https://github.com/DaleStudy/leetcode-study/discussions/54";
+export const ALGO_DALE_URL = "https://www.algodale.com/";
+export const LINKED_IN_URL = "https://www.linkedin.com/in/daleseo/";
+export const GITHUB_URL = "https://github.com/DaleStudy/leetcode-study";
+export const YOUTUBE_URL = "https://www.youtube.com/@DaleSeo";

index.html

@@ -46,27 +46,7 @@
   <body style="display: none">
     <ds-header></ds-header>
 
-    <ds-intro-section id="intro-section">
-      <ds-hero slot="heading">
-        해외취업을 위한 커뮤니티 기반 알고리즘 스터디
-      </ds-hero>
-      <ds-button-link
-        slot="button"
-        size="big"
-        variant="primary"
-        href="https://discord.gg/6TwzdnW6ze"
-      >
-        디스코드 참여하기
-      </ds-button-link>
-
-      <ds-image
-        slot="image"
-        src="images/roadmap.png"
-        alt="roadmap"
-        width="100%"
-        height="auto"
-      ></ds-image>
-    </ds-intro-section>
+    <ds-intro-section id="intro-section"></ds-intro-section>
 
     <ds-language-section>
       <ds-image
@@ -103,27 +83,7 @@
       </ds-button-link>
     </ds-language-section>
 
-    <ds-code-review-section>
-      <ds-hero slot="heading">
-        코드리뷰를 통해 새로운 관점을 배울 수 있어요
-      </ds-hero>
-      <ds-button-link
-        slot="button"
-        size="big"
-        variant="primary"
-        href="https://discord.gg/6TwzdnW6ze"
-      >
-        디스코드 참여하기
-      </ds-button-link>
-
-      <ds-image
-        slot="image"
-        src="images/review.png"
-        alt="review"
-        width="100%"
-        height="auto"
-      ></ds-image>
-    </ds-code-review-section>
+    <ds-code-review-section></ds-code-review-section>
 
     <ds-participant-reviews-section>
       <ds-hero>참가자 후기</ds-hero>