gahusb/jaengseung-made
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 샘플 페이지 CSS 전역 오염으로 인한 사이드바 레이아웃 변경 수정

Browse Source 
- interior/shopping 샘플 페이지의 * {} CSS 리셋이 사이드바 포함
  전체 DOM을 오염시키던 문제 수정
- .au-page / .ml-page 클래스로 스코프 한정:
  *, *::before, *::after → .au-page *, .ml-page * 로 변경
- 쇼핑몰 이미지: Unsplash CDN → picsum.photos 교체 (항상 안정 로드)
  seed 기반으로 일관된 이미지 유지

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
gahusb
2026-03-22 17:24:25 +09:00
parent d321b0d5fd
commit 3b4054e23e
2 changed files with 30 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
app/services/website/samples/interior/page.tsx
View File

@@ -119,14 +119,15 @@ export default function InteriorSample() {
const SURFACE = '#F0ECE4'; const SURFACE = '#F0ECE4';
return ( return (
<div style={{ background: CREAM, color: DARK, fontFamily: "'Pretendard','Apple SD Gothic Neo',system-ui,sans-serif", overflowX: 'hidden' }}> <div className="au-page" style={{ background: CREAM, color: DARK, fontFamily: "'Pretendard','Apple SD Gothic Neo',system-ui,sans-serif", overflowX: 'hidden' }}>
{/* ══ 폰트 + 전역 CSS ══ */} {/* ══ 폰트 + 전역 CSS ══ */}
<style dangerouslySetInnerHTML={{ __html: ` <style dangerouslySetInnerHTML={{ __html: `
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400;1,600&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400;1,600&display=swap');
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.min.css'); @import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.min.css');
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* 전역 리셋을 .au-page 하위로 한정 — 사이드바 오염 방지 */
.au-page, .au-page *, .au-page *::before, .au-page *::after { box-sizing: border-box; margin: 0; padding: 0; }
@keyframes au-fadeUp { @keyframes au-fadeUp {
from { opacity: 0; transform: translateY(2rem); filter: blur(4px); } from { opacity: 0; transform: translateY(2rem); filter: blur(4px); }

47
app/services/website/samples/shopping/page.tsx
View File

@@ -21,26 +21,32 @@ const BANNER_H = 40;
const NAV_H = 56; const NAV_H = 56;
/* ═══════════════════════════════════════════════════ /* ═══════════════════════════════════════════════════
UNSPLASH FASHION IMAGES FASHION IMAGES — picsum.photos (안정적, 항상 로드됨)
seed 값은 항상 동일한 이미지를 반환하므로 일관성 유지
═══════════════════════════════════════════════════ */ ═══════════════════════════════════════════════════ */
const IMG = { const IMG = {
hero: 'https://images.unsplash.com/photo-1558618666-fcd25c85cd64?auto=format&fit=crop&w=900&q=85', /* 히어로 — 세로형 풀스크린 */
p1: 'https://images.unsplash.com/photo-1515886657613-9f3515b0c78f?auto=format&fit=crop&w=600&q=80', hero: 'https://picsum.photos/seed/mellow-hero/900/1200',
p2: 'https://images.unsplash.com/photo-1509631179647-0177331693ae?auto=format&fit=crop&w=600&q=80', /* 상품 — 세로 portrait (3:4) */
p3: 'https://images.unsplash.com/photo-1445205170230-053b83016050?auto=format&fit=crop&w=600&q=80', p1: 'https://picsum.photos/seed/mellow-p1/480/640',
p4: 'https://images.unsplash.com/photo-1487222477894-8943e31ef7b2?auto=format&fit=crop&w=600&q=80', p2: 'https://picsum.photos/seed/mellow-p2/480/640',
p5: 'https://images.unsplash.com/photo-1469334031218-e382a71b716b?auto=format&fit=crop&w=600&q=80', p3: 'https://picsum.photos/seed/mellow-p3/480/640',
p6: 'https://images.unsplash.com/photo-1434389677669-e08b4cac3105?auto=format&fit=crop&w=600&q=80', p4: 'https://picsum.photos/seed/mellow-p4/480/640',
p7: 'https://images.unsplash.com/photo-1503342564405-cf0c5f9d5c79?auto=format&fit=crop&w=600&q=80', p5: 'https://picsum.photos/seed/mellow-p5/480/640',
p8: 'https://images.unsplash.com/photo-1525507119028-ed4ccf09e210?auto=format&fit=crop&w=600&q=80', p6: 'https://picsum.photos/seed/mellow-p6/480/640',
edit1: 'https://images.unsplash.com/photo-1490481651871-ab68de25d43d?auto=format&fit=crop&w=1400&q=85', p7: 'https://picsum.photos/seed/mellow-p7/480/640',
feat1: 'https://images.unsplash.com/photo-1558171813-0022efd9b40d?auto=format&fit=crop&w=700&q=80', p8: 'https://picsum.photos/seed/mellow-p8/480/640',
feat2: 'https://images.unsplash.com/photo-1542060748-10c28b62716f?auto=format&fit=crop&w=700&q=80', /* 에디토리얼 배너 — 와이드 */
lb1: 'https://images.unsplash.com/photo-1441986300917-64674bd600d8?auto=format&fit=crop&w=500&q=80', edit1: 'https://picsum.photos/seed/mellow-edit/1400/700',
lb2: 'https://images.unsplash.com/photo-1469334031218-e382a71b716b?auto=format&fit=crop&w=500&q=80', /* 브랜드 스토리 이미지 */
lb3: 'https://images.unsplash.com/photo-1503342564405-cf0c5f9d5c79?auto=format&fit=crop&w=500&q=80', feat1: 'https://picsum.photos/seed/mellow-feat1/600/800',
lb4: 'https://images.unsplash.com/photo-1434389677669-e08b4cac3105?auto=format&fit=crop&w=500&q=80', feat2: 'https://picsum.photos/seed/mellow-feat2/600/800',
lb5: 'https://images.unsplash.com/photo-1525507119028-ed4ccf09e210?auto=format&fit=crop&w=500&q=80', /* 룩북 — portrait strip */
lb1: 'https://picsum.photos/seed/mellow-lb1/400/533',
lb2: 'https://picsum.photos/seed/mellow-lb2/400/533',
lb3: 'https://picsum.photos/seed/mellow-lb3/400/533',
lb4: 'https://picsum.photos/seed/mellow-lb4/400/533',
lb5: 'https://picsum.photos/seed/mellow-lb5/400/533',
} as const; } as const;
/* ═══════════════════════════════════════════════════ /* ═══════════════════════════════════════════════════
@@ -107,14 +113,15 @@ export default function ShoppingPage() {
}; };
return ( return (
<div style={{ fontFamily: "'Pretendard','Apple SD Gothic Neo',system-ui,sans-serif", background: T.paper, color: T.ink, overflowX: 'hidden' }}> <div className="ml-page" style={{ fontFamily: "'Pretendard','Apple SD Gothic Neo',system-ui,sans-serif", background: T.paper, color: T.ink, overflowX: 'hidden' }}>
{/* ── FONTS + GLOBAL ── */} {/* ── FONTS + GLOBAL ── */}
<style dangerouslySetInnerHTML={{ __html: ` <style dangerouslySetInnerHTML={{ __html: `
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&display=swap'); @import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&display=swap');
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.min.css'); @import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.min.css');
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* 전역 리셋을 .ml-page 하위로 한정 — 사이드바 오염 방지 */
.ml-page, .ml-page *, .ml-page *::before, .ml-page *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* scroll reveal */ /* scroll reveal */
.ml-reveal { .ml-reveal {