From ef6c0a078a86ff54a734e836ccceb467cbbbf3e4 Mon Sep 17 00:00:00 2001 From: g1nya2 <1227gh@naver.com> Date: Thu, 12 Jun 2025 05:21:42 +0900 Subject: [PATCH 01/11] ui : card-component,whats-next,get-docker & translate : whats-next --- public/docs/get-started/get-docker.md | 19 ++-- .../get-started/introduction/whats-next.md | 92 ++++++++++++++++++- src/scripts/components/box-component.ts | 40 -------- src/scripts/components/card-component.ts | 47 ++++++++++ src/scripts/components/index.ts | 2 +- src/scripts/load_md.ts | 4 +- src/scripts/main.ts | 2 +- src/styles/style.css | 42 +++++++++ 8 files changed, 195 insertions(+), 53 deletions(-) delete mode 100644 src/scripts/components/box-component.ts create mode 100644 src/scripts/components/card-component.ts diff --git a/public/docs/get-started/get-docker.md b/public/docs/get-started/get-docker.md index 186b943..f813086 100644 --- a/public/docs/get-started/get-docker.md +++ b/public/docs/get-started/get-docker.md @@ -12,28 +12,31 @@ > > 대기업(직원 250명 이상 또는 연간 매출 1000만 달러 이상)에서 Docker Desktop을 상업적으로 사용하려면 [유료 구독](https://www.docker.com/pricing/?_gl=1*h2v28y*_gcl_au*MjczODgxODI4LjE3Mzg0NzA0NDI.*_ga*MjEyODM1MDY2OC4xNzIwMzEyNzQ5*_ga_XJWPQMJYHQ*MTczOTU2MjU3My42MS4xLjE3Mzk1NjI3NjMuNjAuMC4w)이 필요합니다. - + +> - - - +> - +> + + + + > **Note** > diff --git a/public/docs/get-started/introduction/whats-next.md b/public/docs/get-started/introduction/whats-next.md index f7749e4..cc3300e 100644 --- a/public/docs/get-started/introduction/whats-next.md +++ b/public/docs/get-started/introduction/whats-next.md @@ -6,10 +6,100 @@ 컨테이너, 이미지, 레지스트리, Docker Compose의 핵심 개념을 배워보세요. +
+ + + + + + + +
+ ## Building images Dockerfiles, 빌드 캐시 및 다단계 빌드를 사용하여 최적화된 컨테이너 이미지를 만들어보세요. +
+ + + + + + + + + +
+ ## Running containers -포트 노출, 기본값 재정의, 데이터 유지, 파일 공유, 멀티 컨테이너 애플리케이션 관리를 위한 필수 기술을 익혀보세요. \ No newline at end of file +포트 노출, 기본값 재정의, 데이터 유지, 파일 공유, 멀티 컨테이너 애플리케이션 관리를 위한 필수 기술을 익혀보세요. + +
+ + + + + + + + + +
diff --git a/src/scripts/components/box-component.ts b/src/scripts/components/box-component.ts deleted file mode 100644 index e2ca7ea..0000000 --- a/src/scripts/components/box-component.ts +++ /dev/null @@ -1,40 +0,0 @@ -class BoxComponent extends HTMLElement { - static get observedAttributes() { - return ['imgsrc', 'href', 'title', 'description']; - } - - constructor() { - super(); - } - - attributeChangedCallback() { - this.render(); - } - - connectedCallback() { - this.render(); - } - - render() { - const imgSrc = this.getAttribute('imgsrc') || ''; - const href = this.getAttribute('href') || '/'; - const title = this.getAttribute('title') || ''; - const description = this.getAttribute('description') || ''; - - this.innerHTML = ` -
- -
-
- -
${title}
-
-
${description}
-
- -
-`; - } -} - -customElements.define('box-component', BoxComponent); diff --git a/src/scripts/components/card-component.ts b/src/scripts/components/card-component.ts new file mode 100644 index 0000000..b551c99 --- /dev/null +++ b/src/scripts/components/card-component.ts @@ -0,0 +1,47 @@ +class CardComponent extends HTMLElement { + static get observedAttributes() { + return ['imgsrc', 'href', 'title', 'description']; + } + + constructor() { + super(); + } + + attributeChangedCallback() { + this.render(); + } + + connectedCallback() { + this.render(); + } + + render() { + const imgSrc = this.getAttribute('imgsrc'); // ❗️없으면 null + const href = this.getAttribute('href') || '#'; + const title = this.getAttribute('title') || ''; + const description = this.getAttribute('description') || ''; + + this.innerHTML = ` +
+ + ${imgSrc + ? `
+ ${title} +
` + : '' + } +
+

+ ${title}
+ ${description} +

+
+ +
+`; + + + } +} + +customElements.define('card-component', CardComponent); diff --git a/src/scripts/components/index.ts b/src/scripts/components/index.ts index 0a88ce6..2631c12 100644 --- a/src/scripts/components/index.ts +++ b/src/scripts/components/index.ts @@ -1,4 +1,4 @@ import './footer-component'; import './header-component'; -import './box-component'; +import './card-component'; import './button-component'; diff --git a/src/scripts/load_md.ts b/src/scripts/load_md.ts index 27ac0f1..55228d2 100644 --- a/src/scripts/load_md.ts +++ b/src/scripts/load_md.ts @@ -6,8 +6,8 @@ marked.setOptions({ breaks: true, }); -// ✅ box-component를 블록 태그로 처리하는 커스텀 토크나이저 추가 -const blockTagNames = ['box-component']; +//card-component를 블록 태그로 처리하는 커스텀 토크나이저 추가 +const blockTagNames = ['card-component']; const blockTagRegex = new RegExp( `^<(${blockTagNames.join('|')})([\\s\\S]*?)>([\\s\\S]*?)<\\/\\1>`, 'i' diff --git a/src/scripts/main.ts b/src/scripts/main.ts index d7204a3..d875410 100644 --- a/src/scripts/main.ts +++ b/src/scripts/main.ts @@ -3,7 +3,7 @@ import '../styles/content_style.css'; import '../styles/not_found.css'; import '../styles/style.css'; import './load_md'; -import './components/box-component'; +import './components/card-component'; import { initializeMarkdownLoader } from './load_md'; import { initializeNavFn } from './nav'; import { initializeTableContents } from './table-contents'; diff --git a/src/styles/style.css b/src/styles/style.css index 44db9c8..d18b08b 100644 --- a/src/styles/style.css +++ b/src/styles/style.css @@ -1,6 +1,14 @@ @import 'tailwindcss'; +@tailwind base; +@tailwind components; +@tailwind utilities; + +/* Table 관련 기본 스타일 */ @layer base { + card-component { + @apply block w-full h-full; + } table { @apply w-3/4 table-auto; } @@ -13,4 +21,38 @@ thead { @apply bg-gray-200; } + +} + +/* 카드 컴포넌트 스타일 */ +@layer components { + .card { + @apply h-full w-full min-w-0 bg-white rounded-md border border-gray-200 px-4 py-3 mb-4 transition duration-200 hover:border-gray-300 hover:shadow; + } + + + + .card-link { + @apply flex items-start gap-4 h-full no-underline; + } + + .card-icon { + @apply flex-shrink-0 mt-1; + } + + .card-img { + @apply w-6 h-6; + } + + .card-content { + @apply flex-1; + } + + .card-description { + @apply text-sm text-gray-500 leading-snug; + } + + .card-title { + @apply text-base font-semibold text-gray-700; + } } From d332bf5a49e6e17718dd731aeb022982d6d0bf9a Mon Sep 17 00:00:00 2001 From: g1nya2 <1227gh@naver.com> Date: Thu, 12 Jun 2025 06:45:02 +0900 Subject: [PATCH 02/11] ui : card-component,whats-next,get-docker & translate : whats-next --- src/scripts/load_md.ts | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/scripts/load_md.ts b/src/scripts/load_md.ts index 118ea99..4d5d593 100644 --- a/src/scripts/load_md.ts +++ b/src/scripts/load_md.ts @@ -1,13 +1,13 @@ import { marked } from 'marked'; -// ✅ marked 옵션 설정 (브레이크, GFM 지원 등) +// marked 옵션 설정 (브레이크, GFM 지원 등) marked.setOptions({ gfm: true, breaks: true, }); -// ✅ box-component를 블록 태그로 처리하는 커스텀 토크나이저 추가 -const blockTagNames = ['box-component']; +//card-component를 블록 태그로 처리하는 커스텀 토크나이저 추가 +const blockTagNames = ['card-component']; const blockTagRegex = new RegExp( `^<(${blockTagNames.join('|')})([\\s\\S]*?)>([\\s\\S]*?)<\\/\\1>`, 'i' @@ -43,11 +43,11 @@ export async function renderMarkdownWithComponents( contentElement: HTMLElement ) { const tokens = mdText - .split(/(<\/?box-component[^>]*>|<\/?button-component[^>]*>)/gi) + .split(/(<\/?card-component[^>]*>|<\/?button-component[^>]*>)/gi) .filter(Boolean); for (const token of tokens) { - if (/^<\/?(box-component|button-component)[^>]*>$/.test(token)) { + if (/^<\/?(card-component|button-component)[^>]*>$/.test(token)) { contentElement.innerHTML += token; } else if (token.trim()) { const html = await marked.parse(token); From 3c9aa67b8114f7084eaffd57e3968497c38dbcec Mon Sep 17 00:00:00 2001 From: g1nya2 <1227gh@naver.com> Date: Thu, 12 Jun 2025 06:50:18 +0900 Subject: [PATCH 03/11] ui : card-component,whats-next,get-docker --- src/styles/style.css | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/styles/style.css b/src/styles/style.css index d18b08b..d86ed15 100644 --- a/src/styles/style.css +++ b/src/styles/style.css @@ -7,7 +7,7 @@ /* Table 관련 기본 스타일 */ @layer base { card-component { - @apply block w-full h-full; + @apply block w-full ; } table { @apply w-3/4 table-auto; @@ -27,13 +27,13 @@ /* 카드 컴포넌트 스타일 */ @layer components { .card { - @apply h-full w-full min-w-0 bg-white rounded-md border border-gray-200 px-4 py-3 mb-4 transition duration-200 hover:border-gray-300 hover:shadow; + @apply w-full min-w-0 bg-white rounded-md border border-gray-200 px-4 py-3 mb-4 transition duration-200 hover:border-gray-300 hover:shadow; } .card-link { - @apply flex items-start gap-4 h-full no-underline; + @apply flex items-start gap-4 no-underline; } .card-icon { From 2f2c2cf367d51f1a50df57d0cf7134f32569659a Mon Sep 17 00:00:00 2001 From: g1nya2 <1227gh@naver.com> Date: Thu, 12 Jun 2025 06:58:38 +0900 Subject: [PATCH 04/11] ui : card-component,whats-next,get-docker --- public/docs/get-started/get-docker.md | 4 +--- public/docs/get-started/introduction/whats-next.md | 11 ----------- src/styles/style.css | 4 ++-- 3 files changed, 3 insertions(+), 16 deletions(-) diff --git a/public/docs/get-started/get-docker.md b/public/docs/get-started/get-docker.md index f813086..86f9a50 100644 --- a/public/docs/get-started/get-docker.md +++ b/public/docs/get-started/get-docker.md @@ -13,20 +13,18 @@ > 대기업(직원 250명 이상 또는 연간 매출 1000만 달러 이상)에서 Docker Desktop을 상업적으로 사용하려면 [유료 구독](https://www.docker.com/pricing/?_gl=1*h2v28y*_gcl_au*MjczODgxODI4LjE3Mzg0NzA0NDI.*_ga*MjEyODM1MDY2OC4xNzIwMzEyNzQ5*_ga_XJWPQMJYHQ*MTczOTU2MjU3My42MS4xLjE3Mzk1NjI3NjMuNjAuMC4w)이 필요합니다.
- - - - - - - - - - - - - - Date: Thu, 12 Jun 2025 07:13:18 +0900 Subject: [PATCH 05/11] ui : card-component,whats-next,get-docker --- src/scripts/load_md.ts | 37 +++++++++++++++++++++++-------------- src/styles/style.css | 2 +- 2 files changed, 24 insertions(+), 15 deletions(-) diff --git a/src/scripts/load_md.ts b/src/scripts/load_md.ts index 4d5d593..82cfde0 100644 --- a/src/scripts/load_md.ts +++ b/src/scripts/load_md.ts @@ -6,12 +6,9 @@ marked.setOptions({ breaks: true, }); -//card-component를 블록 태그로 처리하는 커스텀 토크나이저 추가 -const blockTagNames = ['card-component']; -const blockTagRegex = new RegExp( - `^<(${blockTagNames.join('|')})([\\s\\S]*?)>([\\s\\S]*?)<\\/\\1>`, - 'i' -); +// card-component를 블록 태그 및 셀프 클로징 태그로 처리하는 커스텀 토크나이저 추가 +// 템플릿 리터럴에서 역참조(\1) 사용 불가하므로 정규식 리터럴로 하드코딩 +const blockTagRegex = /^<(card-component)([\s\S]*?)(?:>([\s\S]*?)<\/card-component>|\s*\/)>/i; const customBlockTokenizer = { name: 'custom-block-tag', @@ -35,23 +32,35 @@ const customBlockTokenizer = { marked.use({ extensions: [customBlockTokenizer] }); /** - * mdText를 웹 컴포넌트 태그(, ) 기준으로 분할하여 - * 마크다운은 파싱하고, 웹 컴포넌트는 그대로 삽입하는 함수 + * 커스텀 파서:
...
블록을 마크다운 파싱 없이 그대로 삽입 + * 나머지 마크다운만 기존 파서로 처리 */ export async function renderMarkdownWithComponents( mdText: string, contentElement: HTMLElement ) { - const tokens = mdText - .split(/(<\/?card-component[^>]*>|<\/?button-component[^>]*>)/gi) - .filter(Boolean); + //
...
블록 추출 (빈 줄 포함, 중첩 X) + const divBlockRegex = /([\s\S]*?<\/div>)/gi; + const tokens = mdText.split(divBlockRegex).filter(Boolean); for (const token of tokens) { - if (/^<\/?(card-component|button-component)[^>]*>$/.test(token)) { + if (/^[\s\S]*?<\/div>$/.test(token)) { + // div 블록은 그대로 삽입 contentElement.innerHTML += token; } else if (token.trim()) { - const html = await marked.parse(token); - contentElement.innerHTML += html; + // 나머지는 기존 방식대로 웹 컴포넌트 분리 후 마크다운 파싱 + const innerTokens = token + .split(/(|||)/gi) + .filter(Boolean); + for (const innerToken of innerTokens) { + if (/^<\/?(card-component|button-component)[^>]*?>.*?<\/(card-component|button-component)>$/.test(innerToken) || + /^<(card-component|button-component)[^>]*?\/>$/.test(innerToken)) { + contentElement.innerHTML += innerToken; + } else if (innerToken.trim()) { + const html = await marked.parse(innerToken); + contentElement.innerHTML += html; + } + } } } } diff --git a/src/styles/style.css b/src/styles/style.css index 94337d1..102baa9 100644 --- a/src/styles/style.css +++ b/src/styles/style.css @@ -27,7 +27,7 @@ /* 카드 컴포넌트 스타일 */ @layer components { .card { - @apply min-w-0 bg-white rounded-md border border-gray-200 px-4 py-3 mb-4 transition duration-200 hover:border-gray-300 hover:shadow; + @apply min-w-0 bg-white rounded-md border border-gray-200 px-4 py-3 mb-4 transition duration-200 hover:border-gray-300 hover:shadow h-full flex flex-col; } From 06cb774e2b028624ad96a7cf699f6603eb8bf28a Mon Sep 17 00:00:00 2001 From: g1nya2 <1227gh@naver.com> Date: Thu, 12 Jun 2025 07:41:31 +0900 Subject: [PATCH 06/11] =?UTF-8?q?=ED=94=84=EB=A6=AC=ED=8B=B0=EC=96=B4=20?= =?UTF-8?q?=ED=95=B4=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/scripts/components/card-component.ts | 33 +++++++++++------------- src/styles/style.css | 21 +++++++++++++-- 2 files changed, 34 insertions(+), 20 deletions(-) diff --git a/src/scripts/components/card-component.ts b/src/scripts/components/card-component.ts index b551c99..3c3478f 100644 --- a/src/scripts/components/card-component.ts +++ b/src/scripts/components/card-component.ts @@ -22,25 +22,22 @@ class CardComponent extends HTMLElement { const description = this.getAttribute('description') || ''; this.innerHTML = ` -
- - ${imgSrc - ? `
- ${title} -
` - : '' - } -
-

- ${title}
- ${description} -

+
+ + ${imgSrc + ? `
+ ${title} +
` + : ''} +
+

+ ${title}
+ ${description} +

+
+
- -
-`; - - + `; } } diff --git a/src/styles/style.css b/src/styles/style.css index 102baa9..da5569c 100644 --- a/src/styles/style.css +++ b/src/styles/style.css @@ -30,8 +30,6 @@ @apply min-w-0 bg-white rounded-md border border-gray-200 px-4 py-3 mb-4 transition duration-200 hover:border-gray-300 hover:shadow h-full flex flex-col; } - - .card-link { @apply flex items-start gap-4 no-underline; } @@ -56,3 +54,22 @@ @apply text-base font-semibold text-gray-700; } } + +/* 전역 스타일 */ +body { + font-family: 'Noto Sans KR', Arial, sans-serif; + background: #f8fafc; + color: #222; + margin: 0; + padding: 0; +} + +h1, h2, h3, h4, h5, h6 { + font-weight: 700; + margin-top: 1.5em; + margin-bottom: 0.5em; +} + +p { + margin: 0 0 1em 0; +} From 8a821cf6a8dd6a0e5e29f98bc2763b5d321609b7 Mon Sep 17 00:00:00 2001 From: g1nya2 <1227gh@naver.com> Date: Mon, 16 Jun 2025 05:59:27 +0900 Subject: [PATCH 07/11] =?UTF-8?q?=ED=94=84=EB=A6=AC=ED=8B=B0=EC=96=B4=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/scripts/components/card-component.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/scripts/components/card-component.ts b/src/scripts/components/card-component.ts index 3c3478f..9779aea 100644 --- a/src/scripts/components/card-component.ts +++ b/src/scripts/components/card-component.ts @@ -16,7 +16,7 @@ class CardComponent extends HTMLElement { } render() { - const imgSrc = this.getAttribute('imgsrc'); // ❗️없으면 null + const imgSrc = this.getAttribute('imgsrc'); // 없으면 null const href = this.getAttribute('href') || '#'; const title = this.getAttribute('title') || ''; const description = this.getAttribute('description') || ''; From a47359477a2db4c02eaab66f852a6acb9e1be1d5 Mon Sep 17 00:00:00 2001 From: g1nya2 <1227gh@naver.com> Date: Mon, 16 Jun 2025 06:08:56 +0900 Subject: [PATCH 08/11] =?UTF-8?q?=ED=94=84=EB=A6=AC=ED=8B=B0=EC=96=B4=20?= =?UTF-8?q?=ED=95=B4=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/scripts/components/card-component.ts | 8 +++++--- src/scripts/load_md.ts | 15 +++++++++++---- src/styles/style.css | 18 +++++++++++------- 3 files changed, 27 insertions(+), 14 deletions(-) diff --git a/src/scripts/components/card-component.ts b/src/scripts/components/card-component.ts index 9779aea..97ab3c8 100644 --- a/src/scripts/components/card-component.ts +++ b/src/scripts/components/card-component.ts @@ -24,11 +24,13 @@ class CardComponent extends HTMLElement { this.innerHTML = `
- ${imgSrc - ? `
+ ${ + imgSrc + ? `
${title}
` - : ''} + : '' + }

${title}
diff --git a/src/scripts/load_md.ts b/src/scripts/load_md.ts index 82cfde0..a8689d6 100644 --- a/src/scripts/load_md.ts +++ b/src/scripts/load_md.ts @@ -8,7 +8,8 @@ marked.setOptions({ // card-component를 블록 태그 및 셀프 클로징 태그로 처리하는 커스텀 토크나이저 추가 // 템플릿 리터럴에서 역참조(\1) 사용 불가하므로 정규식 리터럴로 하드코딩 -const blockTagRegex = /^<(card-component)([\s\S]*?)(?:>([\s\S]*?)<\/card-component>|\s*\/)>/i; +const blockTagRegex = + /^<(card-component)([\s\S]*?)(?:>([\s\S]*?)<\/card-component>|\s*\/)>/i; const customBlockTokenizer = { name: 'custom-block-tag', @@ -50,11 +51,17 @@ export async function renderMarkdownWithComponents( } else if (token.trim()) { // 나머지는 기존 방식대로 웹 컴포넌트 분리 후 마크다운 파싱 const innerTokens = token - .split(/(|||)/gi) + .split( + /(|||)/gi + ) .filter(Boolean); for (const innerToken of innerTokens) { - if (/^<\/?(card-component|button-component)[^>]*?>.*?<\/(card-component|button-component)>$/.test(innerToken) || - /^<(card-component|button-component)[^>]*?\/>$/.test(innerToken)) { + if ( + /^<\/?(card-component|button-component)[^>]*?>.*?<\/(card-component|button-component)>$/.test( + innerToken + ) || + /^<(card-component|button-component)[^>]*?\/>$/.test(innerToken) + ) { contentElement.innerHTML += innerToken; } else if (innerToken.trim()) { const html = await marked.parse(innerToken); diff --git a/src/styles/style.css b/src/styles/style.css index da5569c..193972a 100644 --- a/src/styles/style.css +++ b/src/styles/style.css @@ -21,25 +21,24 @@ thead { @apply bg-gray-200; } - } /* 카드 컴포넌트 스타일 */ @layer components { .card { - @apply min-w-0 bg-white rounded-md border border-gray-200 px-4 py-3 mb-4 transition duration-200 hover:border-gray-300 hover:shadow h-full flex flex-col; + @apply mb-4 flex h-full min-w-0 flex-col rounded-md border border-gray-200 bg-white px-4 py-3 transition duration-200 hover:border-gray-300 hover:shadow; } - + .card-link { @apply flex items-start gap-4 no-underline; } .card-icon { - @apply flex-shrink-0 mt-1; + @apply mt-1 flex-shrink-0; } .card-img { - @apply w-6 h-6; + @apply h-6 w-6; } .card-content { @@ -47,7 +46,7 @@ } .card-description { - @apply text-sm text-gray-500 leading-snug; + @apply text-sm leading-snug text-gray-500; } .card-title { @@ -64,7 +63,12 @@ body { padding: 0; } -h1, h2, h3, h4, h5, h6 { +h1, +h2, +h3, +h4, +h5, +h6 { font-weight: 700; margin-top: 1.5em; margin-bottom: 0.5em; From 1f772c0c708d682c83cbc6b1687e9a44729c2b9e Mon Sep 17 00:00:00 2001 From: g1nya2 <1227gh@naver.com> Date: Mon, 16 Jun 2025 06:17:39 +0900 Subject: [PATCH 09/11] =?UTF-8?q?card-component=20=ED=85=8C=EC=8A=A4?= =?UTF-8?q?=ED=8A=B8=EC=BD=94=EB=93=9C=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- tests/markdown.test.ts | 53 +++++++++++++++++++++--------------------- 1 file changed, 27 insertions(+), 26 deletions(-) diff --git a/tests/markdown.test.ts b/tests/markdown.test.ts index 3550c5a..dc4a76f 100644 --- a/tests/markdown.test.ts +++ b/tests/markdown.test.ts @@ -17,15 +17,15 @@ beforeAll(() => { (global as any).customElements = dom.window.customElements; /* eslint-enable @typescript-eslint/no-explicit-any */ - class BoxComponent extends dom.window.HTMLElement { + class CardComponent extends dom.window.HTMLElement { connectedCallback() { - const title = this.getAttribute('title') || 'Box Title'; - const description = this.getAttribute('description') || 'Box content'; + const title = this.getAttribute('title') || 'Card Title'; + const description = this.getAttribute('description') || 'Card content'; const imgsrc = this.getAttribute('imgsrc') || ''; const href = this.getAttribute('href') || '/'; this.innerHTML = ` -

+
@@ -55,7 +55,7 @@ beforeAll(() => { } } - dom.window.customElements.define('box-component', BoxComponent); + dom.window.customElements.define('card-component', CardComponent); dom.window.customElements.define('button-component', ButtonComponent); }); @@ -68,19 +68,19 @@ beforeEach(() => { describe('renderMarkdownWithComponents', () => { describe('웹 컴포넌트 존재 확인', () => { - it('단일 box-component가 DOM에 존재하는지 확인', async () => { + it('단일 card-component가 DOM에 존재하는지 확인', async () => { // Arrange const mdText = - ''; + ''; // Act await renderMarkdownWithComponents(mdText, contentElement); await new Promise((resolve) => setTimeout(resolve, 10)); // Assert - const boxComponent = contentElement.querySelector('box-component'); - expect(boxComponent).toBeTruthy(); - expect(boxComponent?.tagName.toLowerCase()).toBe('box-component'); + const cardComponent = contentElement.querySelector('card-component'); + expect(cardComponent).toBeTruthy(); + expect(cardComponent?.tagName.toLowerCase()).toBe('card-component'); }); it('단일 button-component가 DOM에 존재하는지 확인', async () => { @@ -98,10 +98,10 @@ describe('renderMarkdownWithComponents', () => { expect(buttonComponent?.tagName.toLowerCase()).toBe('button-component'); }); - it('box-component와 button-component가 모두 DOM에 존재하는지 확인', async () => { + it('card-component와 button-component가 모두 DOM에 존재하는지 확인', async () => { // Arrange const mdText = ` - + `; @@ -110,37 +110,38 @@ describe('renderMarkdownWithComponents', () => { await new Promise((resolve) => setTimeout(resolve, 10)); // Assert - const boxComponent = contentElement.querySelector('box-component'); + const cardComponent = contentElement.querySelector('card-component'); const buttonComponent = contentElement.querySelector('button-component'); - expect(boxComponent).toBeTruthy(); + expect(cardComponent).toBeTruthy(); expect(buttonComponent).toBeTruthy(); expect( - contentElement.querySelectorAll('box-component, button-component') + contentElement.querySelectorAll('card-component, button-component') .length ).toBe(2); }); }); describe('HTML 내용 검증', () => { - it('box-component의 HTML 내용이 올바르게 렌더링되는지 확인', async () => { + it('card-component의 HTML 내용이 올바르게 렌더링되는지 확인', async () => { // Arrange const title = 'Docker 개요'; const description = 'Docker의 기본 개념'; - const mdText = ``; + const imgsrc = '/imgs/docker.svg'; + const href = '/overview'; + const mdText = ``; // Act await renderMarkdownWithComponents(mdText, contentElement); await new Promise((resolve) => setTimeout(resolve, 10)); // Assert - const boxComponent = contentElement.querySelector('box-component'); - const innerHTML = boxComponent?.innerHTML || ''; - + const cardComponent = contentElement.querySelector('card-component'); + const innerHTML = cardComponent?.innerHTML || ''; expect(innerHTML).toContain(title); expect(innerHTML).toContain(description); - expect(innerHTML).toContain('shadow rounded bg-white'); - expect(innerHTML).toContain('href="/overview"'); + expect(innerHTML).toContain('card'); + expect(innerHTML).toContain(`href="${href}"`); }); it('button-component의 HTML 내용이 올바르게 렌더링되는지 확인', async () => { @@ -169,7 +170,7 @@ describe('renderMarkdownWithComponents', () => { const boxDescription = 'Docker의 기본 개념'; const buttonTitle = '시작하기'; const mdText = ` - + `; @@ -178,11 +179,11 @@ describe('renderMarkdownWithComponents', () => { await new Promise((resolve) => setTimeout(resolve, 10)); // Assert - const boxComponent = contentElement.querySelector('box-component'); + const cardComponent = contentElement.querySelector('card-component'); const buttonComponent = contentElement.querySelector('button-component'); - expect(boxComponent?.innerHTML).toContain(boxTitle); - expect(boxComponent?.innerHTML).toContain(boxDescription); + expect(cardComponent?.innerHTML).toContain(boxTitle); + expect(cardComponent?.innerHTML).toContain(boxDescription); expect(buttonComponent?.innerHTML).toContain(buttonTitle); const allContent = contentElement.innerHTML; From b8e8626967501bab6a26ffa8972aed5c372ccd89 Mon Sep 17 00:00:00 2001 From: g1nya2 <105257807+g1nya2@users.noreply.github.com> Date: Wed, 18 Jun 2025 00:43:11 +0900 Subject: [PATCH 10/11] Update tests/markdown.test.ts Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> --- tests/markdown.test.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tests/markdown.test.ts b/tests/markdown.test.ts index dc4a76f..a778a7e 100644 --- a/tests/markdown.test.ts +++ b/tests/markdown.test.ts @@ -140,7 +140,7 @@ describe('renderMarkdownWithComponents', () => { const innerHTML = cardComponent?.innerHTML || ''; expect(innerHTML).toContain(title); expect(innerHTML).toContain(description); - expect(innerHTML).toContain('card'); + expect(cardComponent?.classList.contains('card')).toBe(true); expect(innerHTML).toContain(`href="${href}"`); }); From 4d2b354610cba9547beec24a7b59603a0ec6eaf8 Mon Sep 17 00:00:00 2001 From: g1nya2 <1227gh@naver.com> Date: Wed, 18 Jun 2025 00:48:06 +0900 Subject: [PATCH 11/11] =?UTF-8?q?card-component=20=ED=85=8C=EC=8A=A4?= =?UTF-8?q?=ED=8A=B8=EC=BD=94=EB=93=9C=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- tests/markdown.test.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/tests/markdown.test.ts b/tests/markdown.test.ts index a778a7e..59c2cde 100644 --- a/tests/markdown.test.ts +++ b/tests/markdown.test.ts @@ -140,7 +140,8 @@ describe('renderMarkdownWithComponents', () => { const innerHTML = cardComponent?.innerHTML || ''; expect(innerHTML).toContain(title); expect(innerHTML).toContain(description); - expect(cardComponent?.classList.contains('card')).toBe(true); + // card-component 자체가 아닌 내부에 .card 클래스를 가진 요소가 있는지 확인 + expect(cardComponent?.querySelector('.card')).toBeTruthy(); expect(innerHTML).toContain(`href="${href}"`); });