Responsive

apps/storybook/.storybook/preview-head.html

@@ -0,0 +1,11 @@
+<!-- .storybook/preview-head.html -->
+<style>
+  /* 스토리북 루트 요소에 적용될 스타일 */
+  #storybook-root {
+    width: 100% !important;
+    max-width: 100% !important;
+    box-sizing: border-box !important;
+    padding: 0 !important;
+  }
+
+</style>

apps/storybook/.storybook/preview.ts

@@ -1,5 +1,4 @@
 import type { Preview } from '@storybook/react';
-// 중요: CSS 파일을 직접 가져옵니다
 import 'notion-to-jsx/dist/index.css';
 
 const preview: Preview = {

apps/storybook/src/stories/Renderer.stories.tsx

@@ -42,13 +42,4 @@ export const DarkMode: Story = {
     title: notionProperties.Name,
     cover: notionProperties.coverUrl,
   },
-  decorators: [
-    (Story) => (
-      <div
-        style={{ background: '#1a1a1a', minHeight: '100vh', padding: '1em' }}
-      >
-        <Story />
-      </div>
-    ),
-  ],
 };

packages/notion-to-jsx/package.json

@@ -20,7 +20,7 @@
   "files": [
     "dist"
   ],
-  "sideEffects": false,
+  "sideEffects": ["**/*.css", "**/*.css.ts"],
   "keywords": [
     "notion",
     "jsx",

packages/notion-to-jsx/src/components/Cover/styles.css.ts

@@ -8,4 +8,11 @@ export const cover = style({
   objectFit: 'cover',
   objectPosition: 'center 50%',
   borderRadius: '1.5rem',
+  margin: '0 auto',
+  '@media': {
+    '(max-width: 900px)': {
+      borderRadius: '0.5rem',
+      height: '25vh',
+    },
+  },
 });

packages/notion-to-jsx/src/components/Renderer/components/Bookmark/styles.css.ts

@@ -36,6 +36,11 @@ export const previewContainer = style({
   justifyContent: 'center',
   maxHeight: '8rem',
   overflow: 'hidden',
+  '@media': {
+    '(max-width: 420px)': {
+      display: 'none',
+    },
+  },
 });
 
 export const previewImage = style({

packages/notion-to-jsx/src/components/Renderer/components/Image/Image.tsx

@@ -23,6 +23,8 @@ export interface ImageProps {
   format?: ImageFormat;
 }
 
+const MAX_WIDTH = 720;
+
 const Image: React.FC<ImageProps> = ({
   src,
   alt,
@@ -48,7 +50,9 @@ const Image: React.FC<ImageProps> = ({
           format?.block_width
             ? {
                 width:
-                  format.block_width > 900 ? '100%' : `${format.block_width}px`,
+                  format.block_width > MAX_WIDTH
+                    ? '100%'
+                    : `${format.block_width}px`,
               }
             : undefined
         }
@@ -58,7 +62,7 @@ const Image: React.FC<ImageProps> = ({
             className={placeholder}
             style={{
               width: format?.block_width
-                ? format.block_width > 900
+                ? format.block_width > MAX_WIDTH
                   ? '100%'
                   : `${format.block_width}px`
                 : '100%',
@@ -97,7 +101,7 @@ const Image: React.FC<ImageProps> = ({
             className={placeholder}
             style={{
               width: format?.block_width
-                ? format.block_width > 900
+                ? format.block_width > MAX_WIDTH
                   ? '100%'
                   : `${format.block_width}px`
                 : '100%',

packages/notion-to-jsx/src/components/Renderer/components/Image/styles.css.ts

@@ -15,7 +15,6 @@ export const imageContainer = style({
   alignItems: 'center',
 });
 
-// CSS 변수 생성
 export const imageWidthVar = createVar();
 export const imageAspectRatioVar = createVar();
 
@@ -68,11 +67,6 @@ export const styledImage = recipe({
 });
 
 export const placeholder = style({
-  // position: 'absolute',
-  // top: 0,
-  // left: 0,
-  // right: 0,
-  // bottom: 0,
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',

packages/notion-to-jsx/src/components/Renderer/styles.css.ts

@@ -2,7 +2,12 @@ import { style } from '@vanilla-extract/css';
 import { vars } from '../../styles/theme.css';
 
 export const container = style({
-  maxWidth: '900px',
+  maxWidth: '720px',
   margin: '0 auto',
   padding: vars.spacing.xl,
+  '@media': {
+    '(max-width: 720px)': {
+      padding: vars.spacing.md,
+    },
+  },
 });