Skip to content

[BOM-1168] feat: 랜딩 배너 추가 및 SEO 개선 #272

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
JeLee-river merged 5 commits into from
Jul 8, 2026
Merged

[BOM-1168] feat: 랜딩 배너 추가 및 SEO 개선 #272

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
d6553db
feat: 랜딩 배너 추가
JeLee-river Jun 24, 2026
1aedf3f
refactor: 배너 디자인 수정
JeLee-river Jun 24, 2026
e6e04b0
refactor: 랜딩페이지에 canonical 설정
JeLee-river Jun 26, 2026
ccb1dd9
refactor: prerendered 페이지를 최신 버전으로 업데이트
JeLee-river Jun 26, 2026
75f7694
chore: 랜딩의 canonical을 /landing으로 수정
JeLee-river Jul 7, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added web/public/assets/avif/landing-banner-cat.avif
View file
Open in desktop
Binary file not shown.
214 changes: 102 additions & 112 deletions web/public/prerendered/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
<meta charset="UTF-8" />
<meta
name="viewport"
content="initial-scale=1;maximum-scale=1;minimum-scale=1;user-scalable=no;"
content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, viewport-fit=cover"
/>

<title>봄봄 | 읽고 남기고 쌓는 뉴스레터 리딩 플랫폼</title>
Expand Down Expand Up @@ -145,6 +145,11 @@
.newsletter-card:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.newsletter-card a {
text-decoration: none;
color: inherit;
display: block;
}
.newsletter-card img {
width: 80px;
height: 80px;
Expand Down Expand Up @@ -188,9 +193,8 @@
<div class="container">
<div class="logo">봄봄</div>
<nav>
<a href="/today">오늘의 뉴스레터</a>
<a href="/storage">뉴스레터 보관함</a>
<a href="/">뉴스레터 추천</a>
<a href="/landing">봄봄 소개</a>
<a href="/login">로그인</a>
</nav>
</div>
</header>
Expand All @@ -204,160 +208,146 @@ <h1 class="section-title">

<div class="category-filter">
<button class="category-btn active">전체</button>
<button class="category-btn">트렌드/라이프</button>
<button class="category-btn">비즈/재테크</button>
<button class="category-btn">지역/여행</button>
<button class="category-btn">푸드</button>
<button class="category-btn">IT/테크</button>
<button class="category-btn">트렌드/라이프</button>
<button class="category-btn">시사/사회</button>
<button class="category-btn">취미/자기개발</button>
<button class="category-btn">지역/여행</button>
<button class="category-btn">문화/예술</button>
<button class="category-btn">AI</button>
<button class="category-btn">리빙/인테리어</button>
<button class="category-btn">창업/스타트업</button>
<button class="category-btn">푸드</button>
</div>

<div class="newsletter-grid">
<article class="newsletter-card">
<img
src="https://upload.wikimedia.org/wikipedia/commons/6/6c/HBR-logo.png"
alt="하버드비즈니스리뷰 뉴스레터 이미지"
/>
<h3>하버드비즈니스리뷰</h3>
<p>
업무에 최신 경영 지식이 필요하신가요? HBR 최신 아티클을 매주
뉴스레터로 만나보세요!
</p>
<a href="/newsletters/47">
<img src="https://pbs.twimg.com/profile_images/1767482947962347520/avMogr0B_400x400.jpg" alt="Daily Byte 뉴스레터 이미지" />
<h3>Daily Byte</h3>
<p>하루 10분, 경제를 읽는 가장 쉬운 방법</p>
</a>
</article>

<article class="newsletter-card">
<a href="/newsletters/41">
<img src="https://i.scdn.co/image/ab67656300005f1f53c555152622805b90dd3bce" alt="긱뉴스 뉴스레터 이미지" />
<h3>긱뉴스</h3>
<p>매주 월요일 아침, 지난 일주일간의 GeekNews 중 엄선한 뉴스들을 이메일로 보내드립니다.</p>
</a>
</article>

<article class="newsletter-card">
<a href="/newsletters/51">
<img src="https://yt3.googleusercontent.com/tTCQRfOWX4Xww8qo3zyEmRGkw2tMA8Vi-O1_C89rCcH39raADiTJiOzWCGD8ej8cbjZ8QZ6H8o4=s900-c-k-c0x00ffffff-no-rj" alt="어피티 뉴스레터 이미지" />
<h3>어피티</h3>
<p>매일 아침 나에게 찾아오는 경제뉴스, 한국 경제 뉴스레터 1위 어피티입니다.</p>
</a>
</article>

<article class="newsletter-card">
<a href="/newsletters/1">
<img src="https://play-lh.googleusercontent.com/drCmRhBNsVZpcsHPOCXizlZW-_7hzo0v--3V85NAea5UZ2BvdXwW5wDEWBPa_pqD4A" alt="뉴닉 뉴스레터 이미지" />
<h3>뉴닉</h3>
<p>세상이 궁금해? 쉽고 재밌는 지식 플랫폼, 뉴닉!</p>
</a>
</article>

<article class="newsletter-card">
<img
src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ4osz_Wu856AhcDJJwfPs80cf9fkwQoIEG0A&s"
alt="한경 CFO insight 뉴스레터 이미지"
/>
<h3>한경 CFO insight</h3>
<p>
경영 혁신의 최전선에서 활약하는 CFO들을 위해 최신 자본시장 소식과
산업계 동향을 매주 목요일 뉴스레터로 전해 드리겠습니다
</p>
<a href="/newsletters/31">
<img src="https://s3.ap-northeast-2.amazonaws.com/img.stibee.com/a82ab710-ca85-4f2e-bda8-3c7abcbad46a.png" alt="디그 뉴스레터 이미지" />
<h3>디그</h3>
<p>세상 돌아가는 경제 이야기, 하루 5분 디그로 편하게 읽어보세요.</p>
</a>
</article>

<article class="newsletter-card">
<img
src="https://img.stibee.com/1fcd2832-af21-440b-9fde-86238c061003.png"
alt="5분 칼럼 뉴스레터 이미지"
/>
<h3>5분 칼럼</h3>
<p>
"아하, 그런 거였구나." 무릎을 탁 치게 만드는 세상에 대한 통찰과
해석을 지금 만나보세요.
</p>
<a href="/newsletters/2">
<img src="https://yt3.googleusercontent.com/7MOP4i_mWejSgr2wZ_jf1wm4mpgF6_VQwRzUo80TqRNN3ODx4CWo-t4X6Mvgan2Rm15Sd7Tk3Q=s900-c-k-c0x00ffffff-no-rj" alt="캐릿 뉴스레터 이미지" />
<h3>캐릿</h3>
<p>Z세대를 위한 트렌드 브리핑 뉴스레터. MZ세대가 주목하는 라이프스타일과 콘텐츠를 소개합니다.</p>
</a>
</article>

<article class="newsletter-card">
<img
src="https://pbs.twimg.com/profile_images/1767482947962347520/avMogr0B_400x400.jpg"
alt="Daily Byte 뉴스레터 이미지"
/>
<h3>Daily Byte</h3>
<p>하루 10분, 경제를 읽는 가장 쉬운 방법</p>
<a href="/newsletters/42">
<img src="https://img.stibee.com/f26ca3fa-87bf-4cb5-b087-1503a3b28b2b.png" alt="우아한테크 뉴스레터 이미지" />
<h3>우아한테크</h3>
<p>매월, 우아한형제들의 개발 및 기술 관련 소식을 전해드립니다.</p>
</a>
</article>

<article class="newsletter-card">
<img
src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRAK_xddzcXmiYk3_NeF2oo8IONaXT5QWWpBg&s"
alt="Daily Skimm 뉴스레터 이미지"
/>
<h3>Daily Skimm</h3>
<p>
The Daily Skimm newsletter provides a concise roundup of top news
and current events in an engaging and conversational format.
</p>
<a href="/newsletters/29">
<img src="https://flexible.img.hani.co.kr/flexible/normal/600/420/imgdb/original/2022/1221/20221221503535.jpg" alt="H:730 뉴스레터 이미지" />
<h3>H:730</h3>
<p>쉴 새 없이 쏟아지는 뉴스 더미에서 독자님께 꼭 필요한 뉴스를 골라 배달합니다.</p>
</a>
</article>

<article class="newsletter-card">
<img
src="https://substackcdn.com/image/fetch/w_80,h_80,c_fill,f_webp,q_auto:good,fl_progressive:steep,g_auto/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F8a361db4-9ede-4d1a-baf0-c7357acd4e4c_479x479.png"
alt="FE News 뉴스레터 이미지"
/>
<h3>FE News</h3>
<p>
FE News는 네이버 FE 엔지니어들이 엄선한 양질의 FE 및 주요한 기술
소식들을 큐레이션 해 공유하는 것을 목표로 합니다.
</p>
<a href="/newsletters/50">
<img src="https://img.stibee.com/a91f6d85-092d-41b0-ba28-a16bf0857990.jpg" alt="머니네버슬립 뉴스레터 이미지" />
<h3>머니네버슬립</h3>
<p>미국의 경제와 기업, 그리고 주식에 대해 이야기해요. 읽다 보면 어느새 지식이 수북하게 쌓여있을 거에요!</p>
</a>
</article>

<article class="newsletter-card">
<img
src="https://cdn.maily.so/202303/1678586605755554.jpeg"
alt="fig.1 뉴스레터 이미지"
/>
<h3>fig.1</h3>
<p>우리 주변 사소한 것들의 역사를 조사합니다.</p>
<a href="/newsletters/38">
<img src="https://yt3.googleusercontent.com/ytc/AIdro_kZGbEvWmB_2CZMcZVcCpjFsiQNVQZEehF8jinP6zlFJ7s=s900-c-k-c0x00ffffff-no-rj" alt="노마드코더 뉴스레터 이미지" />
<h3>노마드코더</h3>
<p>최신 개발 Dev 뉴스. AI 소식, 사이드프로젝트, UIUX, 서비스기획 등 다양한 주제. 매주 금요일 발송.</p>
</a>
</article>

<article class="newsletter-card">
<img
src="https://play-lh.googleusercontent.com/drCmRhBNsVZpcsHPOCXizlZW-_7hzo0v--3V85NAea5UZ2BvdXwW5wDEWBPa_pqD4A"
alt="뉴닉 뉴스레터 이미지"
/>
<h3>뉴닉</h3>
<p>세상이 궁금해? 쉽고 재밌는 지식 플랫폼, 뉴닉!</p>
<a href="/newsletters/28">
<img src="https://img2.stibee.com/280db095-90a8-472c-830c-bdc6cfe44ba1.png" alt="미라클레터 뉴스레터 이미지" />
<h3>미라클레터</h3>
<p>테크 트렌드, 글로벌 트렌드, 실리콩밸리 현장 소식을 인사이트 있게 담아서 주3회 발송합니다.</p>
</a>
</article>

<article class="newsletter-card">
<img
src="https://s3.ap-northeast-2.amazonaws.com/img.stibee.com/a82ab710-ca85-4f2e-bda8-3c7abcbad46a.png"
alt="디그 뉴스레터 이미지"
/>
<h3>디그</h3>
<p>세상 돌아가는 경제 이야기, 하루 5분 디그로 편하게 읽어보세요.</p>
<a href="/newsletters/40">
<img src="https://substackcdn.com/image/fetch/$s_!R7cO!,w_80,h_80,c_fill,f_webp,q_auto:good,fl_progressive:steep,g_auto/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F8a361db4-9ede-4d1a-baf0-c7357acd4e4c_479x479.png" alt="FE News 뉴스레터 이미지" />
<h3>FE News</h3>
<p>FE News는 네이버 FE 엔지니어들이 엄선한 양질의 FE 및 주요한 기술 소식들을 큐레이션 해 공유합니다.</p>
</a>
</article>

<article class="newsletter-card">
<img
src="https://yt3.googleusercontent.com/ytc/AIdro_kZGbEvWmB_2CZMcZVcCpjFsiQNVQZEehF8jinP6zlFJ7s=s900-c-k-c0x00ffffff-no-rj"
alt="노마드코더 뉴스레터 이미지"
/>
<h3>노마드코더</h3>
<p>
최신 개발 Dev 뉴스. IT 이슈 등 개발자의 일과 성장에 도움이 되는
정보를 모아 보내드려요.
</p>
<a href="/newsletters/80">
<img src="https://cdn.maily.so/202410/1728892524889005.png" alt="조쉬의 뉴스레터 이미지" />
<h3>조쉬의 뉴스레터</h3>
<p>퀄리티 있는 AI, 비즈니스, 프로덕트 이야기를 들려드려요.</p>
</a>
</article>

<article class="newsletter-card">
<img
src="https://yt3.googleusercontent.com/tTCQRfOWX4Xww8qo3zyEmRGkw2tMA8Vi-O1_C89rCcH39raADiTJiOzWCGD8ej8cbjZ8QZ6H8o4=s900-c-k-c0x00ffffff-no-rj"
alt="어피티 뉴스레터 이미지"
/>
<h3>어피티</h3>
<p>
매일 아침 나에게 찾아오는 경제뉴스, 한국 경제 뉴스레터 1위
어피티입니다.
</p>
<a href="/newsletters/61">
<img src="https://wishket-team.notion.site/image/attachment%3A3f91d773-7e78-4f34-a468-02c489683a5b%3A%E1%84%85%E1%85%A9%E1%84%80%E1%85%A9.png?table=block&id=1ce807d5-8f2e-80b2-bb41-df4e076f8557&userId=&cache=v2" alt="요즘IT 뉴스레터 이미지" />
<h3>요즘IT</h3>
<p>개발, 디자인, 기획 등 다양한 분야의 IT 이야기를 담고 있는 매거진. 일주일에 한 번 트렌디한 소식을 선별해 발송합니다.</p>
</a>
</article>

<article class="newsletter-card">
<img
src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/92/%EC%9A%94%EC%A6%98IT_%EB%A1%9C%EA%B3%A0.png/1200px-%EC%9A%94%EC%A6%98IT_%EB%A1%9C%EA%B3%A0.png"
alt="요즘IT 뉴스레터 이미지"
/>
<h3>요즘IT</h3>
<p>
개발, 디자인, 기획 등 다양한 분야의 IT 이야기를 담고 있는 매거진
요즘IT
</p>
<a href="/newsletters/55">
<img src="https://upload.wikimedia.org/wikipedia/commons/6/6c/HBR-logo.png" alt="하버드비즈니스리뷰 뉴스레터 이미지" />
<h3>하버드비즈니스리뷰</h3>
<p>업무에 최신 경영 지식이 필요하신가요? HBR 최신 아티클을 매주 뉴스레터로 만나보세요!</p>
</a>
</article>

<article class="newsletter-card">
<img
src="https://yt3.googleusercontent.com/7MOP4i_mWejSgr2wZ_jf1wm4mpgF6_VQwRzUo80TqRNN3ODx4CWo-t4X6Mvgan2Rm15Sd7Tk3Q=s900-c-k-c0x00ffffff-no-rj"
alt="캐릿 뉴스레터 이미지"
/>
<h3>캐릿</h3>
<p>
Z세대를 위한 트렌드 브리핑 뉴스레터. MZ세대가 주목하는
라이프스타일과 콘텐츠를 소개합니다.
</p>
<a href="/newsletters/27">
<img src="https://cdn.maily.so/202303/1678586605755554.jpeg" alt="fig.1 뉴스레터 이미지" />
<h3>fig.1</h3>
<p>우리 주변 사소한 것들의 역사를 조사합니다.</p>
</a>
</article>
</div>
</section>
Expand Down
7 changes: 0 additions & 7 deletions web/public/sitemap.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,11 +12,4 @@
<priority>1.0</priority>
</url>

<!-- 소개 페이지 -->
<url>
<loc>https://www.bombom.news/landing</loc>
<lastmod>2026-03-25T00:00:00+00:00</lastmod>
<changefreq>monthly</changefreq>
<priority>0.8</priority>
</url>
</urlset>
1 change: 1 addition & 0 deletions web/src/components/Carousel/CarouselSlide.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,5 +19,6 @@ const CarouselSlide = ({ children }: PropsWithChildren) => {
export default CarouselSlide;

const Slide = styled.li`
min-width: 0;
flex: 0 0 100%;
`;
Loading
Loading