castad/o2o-infinith-demo
9
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(supporters): 메뉴 '의료진 영상' + 영상 페이지 상단에 의료진 소개 링크 2개 (공식 홈페이지 의료진 소개 · 강남언니 등록 의료진)

Browse Source 
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
This commit is contained in:
Haewon Kam 2026-09-07 09:33:41 +09:00
parent 81f1547ddd
commit f683fca187
4 changed files with 22 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
supporters/docs/v4-screenshots/v4_videos_full.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.6 MiB

After

Width:  |  Height:  |  Size: 1.6 MiB

BIN
supporters/docs/v4-screenshots/v4_videos_top.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 252 KiB

2
supporters/src/layouts/Base.astro
View File

@ -46,7 +46,7 @@ const ld = jsonLd ? JSON.stringify({ '@context': 'https://schema.org', ...(Array
<div class="right">
<nav class="nav">
<a href="/posts">상담 전 질문</a>
<a href="/videos">의료진 설명</a>
<a href="/videos">의료진 영상</a>
<a href="/newsroom">뉴스룸</a>
<a href="/visit">방문 안내</a>
<a href="/about">매체 소개</a>

22
supporters/src/pages/videos.astro
View File

@ -22,7 +22,19 @@ const ld = [
<Base title="영상 · 뷰성형외과 유튜브 조회수 Top 10" description={`뷰성형외과 공식 유튜브(@ViewclinicKR, 영상 ${ch.videos.toLocaleString()}편, 누적 조회 ${fmt(ch.totalViews)}회)에서 조회수가 가장 높은 영상 10편. 전체·롱폼·쇼츠로 나눠 공식 플레이어로 재생합니다. ${data.fetchedAt} 집계.`} jsonLd={ld}>
<section class="section dark" style="padding:3.5rem 0 3rem">
<div class="wrap-wide">
<div class="sec-head"><div class="eyebrow" style="color:var(--purple-300)">Videos</div><h1 class="serif" style="font-size:2rem;display:inline-block;background:linear-gradient(to right,var(--purple-300),var(--blue-300));-webkit-background-clip:text;background-clip:text;color:transparent">Most Watched</h1><p class="sub">뷰성형외과 공식 유튜브에서 가장 많이 본 설명 영상. 기본은 60초를 넘는 롱폼이며, 쇼츠는 질문에 답이 되는 것만 텍스트 답과 함께 싣습니다.</p></div>
<div class="sec-head"><div class="eyebrow" style="color:var(--purple-300)">Videos</div><h1 class="serif" style="font-size:2rem;display:inline-block;background:linear-gradient(to right,var(--purple-300),var(--blue-300));-webkit-background-clip:text;background-clip:text;color:transparent">Most Watched</h1><p class="sub">뷰성형외과 공식 유튜브에서 가장 많이 본 설명 영상. 기본은 60초를 넘는 롱폼이며, 쇼츠는 질문에 답이 되는 것만 텍스트 답과 함께 싣습니다.</p>
<div class="doc-links">
<a class="doc-link" href="https://www.viewclinic.com/viewis/doctors/" rel="noopener" target="_blank">
<span class="ico" aria-hidden="true"><svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M12 12a5 5 0 1 0 0-10 5 5 0 0 0 0 10Zm0 2c-4.4 0-8 2.2-8 5v3h16v-3c0-2.8-3.6-5-8-5Z"/></svg></span>
<span class="txt"><b>의료진 소개</b><small>뷰성형외과 공식 홈페이지</small></span>
<span class="arrow" aria-hidden="true"><svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M14 4h6v6h-2V7.4l-8.3 8.3-1.4-1.4L16.6 6H14V4ZM4 6h6v2H6v10h10v-4h2v6H4V6Z"/></svg></span>
</a>
<a class="doc-link" href={fact.surfaces.gangnamunni.url} rel="noopener" target="_blank">
<span class="ico" aria-hidden="true"><svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2 3 6v6c0 5.3 3.8 10.2 9 11.5C17.2 22.2 21 17.3 21 12V6l-9-4Zm-1 14-3.5-3.5 1.4-1.4L11 13.2l5.1-5.1 1.4 1.4L11 16Z"/></svg></span>
<span class="txt"><b>의료진 {fact.surfaces.gangnamunni.doctors}명</b><small>강남언니 등록 의료진</small></span>
<span class="arrow" aria-hidden="true"><svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M14 4h6v6h-2V7.4l-8.3 8.3-1.4-1.4L16.6 6H14V4ZM4 6h6v2H6v10h10v-4h2v6H4V6Z"/></svg></span>
</a>
</div></div>
<div class="stats">
<div class="stat"><b>{fmt(ch.totalViews)}</b><span class="label">누적 조회수</span><span class="desc">채널 전체 {ch.videos.toLocaleString()}편 합계. {data.fetchedAt} 기준.</span></div>
<div class="stat"><b>{ch.subscribers}</b><span class="label">구독자</span><span class="desc"><a href={ch.url} rel="noopener" style="color:var(--purple-300)">{ch.handle}</a></span></div>
@ -59,6 +71,14 @@ const ld = [
</section>
</Base>
<style>
.doc-links { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.3rem; }
.doc-link { display: inline-flex; align-items: center; gap: 0.7rem; padding: 0.6rem 1rem 0.6rem 0.75rem; border-radius: 999px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.16); color: #fff; text-decoration: none; transition: background .2s, border-color .2s, transform .2s; }
.doc-link:hover { background: rgba(255,255,255,0.14); border-color: rgba(216,180,254,0.6); text-decoration: none; transform: translateY(-1px); }
.doc-link .ico { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 999px; background: linear-gradient(to right, var(--grad-start), #6C5CE7); color: #fff; flex: none; }
.doc-link .txt { display: flex; flex-direction: column; line-height: 1.2; }
.doc-link .txt b { font-size: 0.92rem; font-weight: 700; }
.doc-link .txt small { font-size: 0.74rem; color: var(--purple-200); margin-top: 0.15rem; }
.doc-link .arrow { color: var(--purple-300); display: inline-flex; margin-left: 0.2rem; }
.vtabs { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.chipbtn { border: 1px solid var(--slate-200); background: #fff; color: var(--slate-600); border-radius: 999px; padding: 0.4rem 1rem; font-size: 0.88rem; font-weight: 600; cursor: pointer; font-family: inherit; }
.chipbtn.active { background: linear-gradient(to right, var(--grad-start), var(--grad-end)); color: #fff; border-color: transparent; }