{children}
+ {children}
diff --git a/src/app/(landing)/_components/font-color.stories.tsx b/src/app/(landing)/_components/font-color.stories.tsx
new file mode 100644
index 00000000..612a9ea3
--- /dev/null
+++ b/src/app/(landing)/_components/font-color.stories.tsx
@@ -0,0 +1,227 @@
+import { Meta, StoryObj } from "@storybook/nextjs";
+import { sfPro } from "@/app/fonts";
+
+const meta: Meta = {
+ title: "프로젝트 세팅/폰트 & 컬러",
+ parameters: { layout: "fullscreen" },
+};
+export default meta;
+
+type Story = StoryObj;
+
+const primaryPalette = [
+ { name: "Black", value: "#1A1918", className: "bg-black text-white" },
+ { name: "Primary", value: "#1A1918", className: "bg-primary text-white" },
+ {
+ name: "White",
+ value: "#FFFFFF",
+ className: "bg-white text-black border border-gray-300",
+ },
+ { name: "Default", value: "#31302F", className: "bg-default text-white" },
+ { name: "Secondary", value: "#A3A3A3", className: "bg-secondary text-white" },
+ {
+ name: "BgGray350",
+ value: "rgba(217,217,217,0.2)",
+ className:
+ "bg-[rgba(217,217,217,0.2)] text-gray-900 border border-gray-300",
+ },
+];
+
+const grayScale = [
+ { shade: 100, hex: "#FAFAFA" },
+ { shade: 150, hex: "#F7F7F7" },
+ { shade: 200, hex: "#F2F2F2" },
+ { shade: 300, hex: "#D1D1D1" },
+ { shade: 400, hex: "#BABABA" },
+ { shade: 500, hex: "#A3A3A3" },
+ { shade: 600, hex: "#8C8C8B" },
+ { shade: 700, hex: "#374151" },
+ { shade: 800, hex: "#484746" },
+ { shade: 850, hex: "#373737" },
+ { shade: 900, hex: "#31302F" },
+ { shade: 950, hex: "#2D3034" },
+ { shade: 1000, hex: "#1E1E1E" },
+ { shade: 1050, hex: "#14171C" },
+ { shade: 1100, hex: "#101318" },
+];
+
+const accents = [
+ { label: "Red 100", className: "bg-red-100" },
+ { label: "Red 200", className: "bg-red-200" },
+ { label: "Red 300", className: "bg-red-300" },
+ { label: "Red 400", className: "bg-red-400" },
+ { label: "Purple 100", className: "bg-purple-100" },
+ { label: "Purple 200", className: "bg-purple-200" },
+];
+
+const screenInfo = [
+ { label: "mobile", value: "≤ 743px" },
+ { label: "tablet", value: "744px – 1279px" },
+ { label: "pc", value: "≥ 1280px" },
+];
+
+export const FontColor: Story = {
+ render: () => (
+
+
+ ),
+};
diff --git a/src/app/(landing)/_components/landing-section.tsx b/src/app/(landing)/_components/landing-section.tsx
index 2061f6b1..ff65b0fc 100644
--- a/src/app/(landing)/_components/landing-section.tsx
+++ b/src/app/(landing)/_components/landing-section.tsx
@@ -71,7 +71,8 @@ const LandingSection = ({
src={imgSrc}
alt={imgAlt}
fill
- sizes="(min-width: 1024px) 725px, 100vw"
+ draggable={false}
+ sizes="(min-width: 1024px) 725px, 100vw "
className="object-cover"
/>
diff --git a/src/app/@modal/(.)register/[id]/page.tsx b/src/app/@modal/(.)register/[id]/page.tsx
index 1a8a0f1e..dfd44935 100644
--- a/src/app/@modal/(.)register/[id]/page.tsx
+++ b/src/app/@modal/(.)register/[id]/page.tsx
@@ -17,7 +17,7 @@ const Page = async ({ params }: { params: Promise<{ id: string }> }) => {
return (
+
+
+
+
+
+
+
+
+
+
+
+
+ + SF Pro 폰트 & 커스텀 컬러 테스트 +
++ Typography (SF Pro) +
+
+
+
+
+
+ Title
+
+
+ + Title Hero (32px Bold) +
++ Title Page MD (40px Bold) +
++ Title Page SM (32px Bold) +
+
+
+
+ Heading
+
+
+ + Heading LG (24px SemiBold) +
++ Heading MD (20px Bold) +
++ Heading SM (18px Bold) +
+
+
+
+ Body
+
+
+ + Body Large (18px SemiBold) - 나만의 와인창고, Whyne +
++ Body Medium (16px Medium) - 나만의 와인창고, Whyne +
++ Body Small (14px Medium) - 나만의 와인창고, Whyne +
+
+
+ + Caption & Component +
+
+
+ + Caption (12px Regular) +
++ Component Notes MD (12px Regular) +
++ Component Notes SM (10px Regular) +
+
+
+
+
+ + Tailwind Custom Colors +
+ +
+
+
+ + 기본 팔레트 +
+
+ {primaryPalette.map(({ name, value, className }) => (
+
+
+
+ ))}
+ {name}
+ {value}
+
+
+
+ + Grayscale +
+
+ {grayScale.map(({ shade, hex }) => (
+
+
+
+ ))}
+ Gray {shade}
+ {hex}
+
+
+ Accent
+
+ {accents.map(({ label, className }) => (
+
+
+
+ ))}
+ {label}
+ + Breakpoints +
+
+ {screenInfo.map(({ label, value }) => (
+
+
+
+ ))}
+ {label}
+ {value}
+