podo-ui 0.1.46 → 0.2.0

package/src/components/CodeBlock.module.scss

@@ -1,29 +0,0 @@
-@use '../../mixin' as *;
-
-.codeBlock {
-  background: color(default-deep-base);
-  border-radius: r(4);
-  overflow: hidden;
-  margin-bottom: s(4);
-
-  .codeHeader {
-    padding: s(3) s(5);
-    background: rgba(0, 0, 0, 0.2);
-    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-    @include p4-semibold;
-    color: rgba(255, 255, 255, 0.7);
-  }
-
-  pre {
-    margin: 0;
-    padding: s(5);
-    overflow-x: auto;
-
-    code {
-      @include p3;
-      font-family: 'Monaco', 'Menlo', 'Consolas', monospace;
-      color: #f8f8f2;
-      white-space: pre;
-    }
-  }
-}

package/src/components/CodeBlock.tsx

@@ -1,18 +0,0 @@
-import styles from './CodeBlock.module.scss';
-
-interface CodeBlockProps {
-  code: string;
-  language?: string;
-  title?: string;
-}
-
-export default function CodeBlock({ code, language = 'tsx', title }: CodeBlockProps) {
-  return (
-    <div className={styles.codeBlock}>
-      {title && <div className={styles.codeHeader}>{title}</div>}
-      <pre>
-        <code>{code}</code>
-      </pre>
-    </div>
-  );
-}

package/src/components/Navigation.module.scss

@@ -1,104 +0,0 @@
-@use '../../mixin' as *;
-
-.nav {
-  width: 260px;
-  height: 100vh;
-  position: fixed;
-  left: 0;
-  top: 0;
-  background: color(bg-modal);
-  border-right: 1px solid color(default-outline);
-  overflow-y: auto;
-  padding: s(6);
-}
-
-.header {
-  margin-bottom: s(7);
-
-  .logo {
-    display: flex;
-    align-items: center;
-    gap: s(3);
-    text-decoration: none;
-    margin-bottom: s(2);
-
-    img {
-      flex-shrink: 0;
-    }
-
-    h1 {
-      @include display4;
-      margin: 0;
-      font-weight: 700;
-      letter-spacing: -0.02em;
-      background: linear-gradient(135deg, #8B5CF6 0%, #6366F1 50%, #3b82f6 100%);
-      -webkit-background-clip: text;
-      -webkit-text-fill-color: transparent;
-      background-clip: text;
-    }
-  }
-
-  :global(.ThemeToggle_toggle__oQ8uJ) {
-    margin-top: s(4);
-  }
-}
-
-.version {
-  @include p4;
-  color: color(default-deep-base);
-  margin: 0;
-}
-
-.menu {
-  display: flex;
-  flex-direction: column;
-  gap: s(6);
-}
-
-.section {
-  display: flex;
-  flex-direction: column;
-  gap: s(3);
-}
-
-.sectionTitle {
-  @include p3-semibold;
-  color: color(default-deep-base);
-  margin: 0;
-  text-transform: uppercase;
-  font-size: 11px;
-  letter-spacing: 0.5px;
-}
-
-.list {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  display: flex;
-  flex-direction: column;
-  gap: s(1);
-
-  a {
-    @include p3;
-    display: block;
-    padding: s(2) s(3);
-    margin: 0 s(-6);
-    padding-left: s(6);
-    padding-right: s(6);
-    color: color(default-deep-base);
-    text-decoration: none;
-    border-radius: r(2);
-    transition: all 0.2s;
-
-    &:hover {
-      background: color(default-hover);
-      color: color(default-deep-pressed);
-    }
-
-    &.active {
-      background: linear-gradient(135deg, #8B5CF6 0%, #6366F1 100%);
-      color: white;
-      font-weight: 600;
-    }
-  }
-}

package/src/components/Navigation.tsx

@@ -1,96 +0,0 @@
-'use client';
-
-import Link from 'next/link';
-import { usePathname } from 'next/navigation';
-import Image from 'next/image';
-import ThemeToggle from './ThemeToggle';
-import styles from './Navigation.module.scss';
-
-const menuItems = [
-  {
-    title: '시작하기',
-    items: [
-      { label: '소개', path: '/' },
-      { label: '설치', path: '/getting-started/installation' },
-      { label: '사용법', path: '/getting-started/usage' },
-    ],
-  },
-  {
-    title: '기초',
-    items: [
-      { label: '컬러', path: '/foundation/colors' },
-      { label: '타이포그래피', path: '/foundation/typography' },
-      { label: '아이콘', path: '/foundation/icons' },
-      { label: '간격', path: '/foundation/spacing' },
-    ],
-  },
-  {
-    title: '레이아웃',
-    items: [
-      { label: '그리드', path: '/layout/grid' },
-      { label: '반응형', path: '/layout/responsive' },
-    ],
-  },
-  {
-    title: '컴포넌트',
-    items: [
-      { label: '버튼', path: '/components/button' },
-      { label: '입력', path: '/components/input' },
-      { label: '텍스트 영역', path: '/components/textarea' },
-      { label: '선택', path: '/components/select' },
-      { label: '체크박스 & 라디오', path: '/components/checkbox-radio' },
-      { label: '토글', path: '/components/toggle' },
-      { label: '파일 업로드', path: '/components/file' },
-      { label: '에디터', path: '/components/editor' },
-      { label: '필드', path: '/components/field' },
-      { label: '테이블', path: '/components/table' },
-      { label: '탭', path: '/components/tab' },
-      { label: '페이지네이션', path: '/components/pagination' },
-    ],
-  },
-  {
-    title: '유틸리티',
-    items: [
-      { label: '테두리', path: '/utilities/border' },
-      { label: '모서리 반경', path: '/utilities/radius' },
-      { label: '배경 & 입체감', path: '/utilities/elevation' },
-      { label: '표시 & 가시성', path: '/utilities/display' },
-    ],
-  },
-];
-
-export default function Navigation() {
-  const pathname = usePathname();
-
-  return (
-    <nav className={styles.nav}>
-      <div className={styles.header}>
-        <Link href="/" className={styles.logo}>
-          <Image src="/logo.svg" alt="Podo UI" width={32} height={32} />
-          <h1>Podo UI</h1>
-        </Link>
-        <ThemeToggle />
-      </div>
-
-      <div className={styles.menu}>
-        {menuItems.map((section) => (
-          <div key={section.title} className={styles.section}>
-            <h2 className={styles.sectionTitle}>{section.title}</h2>
-            <ul className={styles.list}>
-              {section.items.map((item) => (
-                <li key={item.path}>
-                  <Link
-                    href={item.path}
-                    className={pathname === item.path ? styles.active : ''}
-                  >
-                    {item.label}
-                  </Link>
-                </li>
-              ))}
-            </ul>
-          </div>
-        ))}
-      </div>
-    </nav>
-  );
-}

package/src/components/PageHeader.module.scss

@@ -1,24 +0,0 @@
-@use '../../mixin' as *;
-
-.header {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  margin-bottom: s(7);
-  padding-bottom: s(6);
-  border-bottom: 1px solid color(default-outline);
-
-  .content {
-    h1 {
-      @include display3;
-      margin: 0 0 s(3) 0;
-      color: color(default-deep-base);
-    }
-
-    p {
-      @include p2;
-      margin: 0;
-      color: color(default-base);
-    }
-  }
-}

package/src/components/PageHeader.tsx

@@ -1,17 +0,0 @@
-import styles from './PageHeader.module.scss';
-
-interface PageHeaderProps {
-  title: string;
-  description?: string;
-}
-
-export default function PageHeader({ title, description }: PageHeaderProps) {
-  return (
-    <header className={styles.header}>
-      <div className={styles.content}>
-        <h1>{title}</h1>
-        {description && <p>{description}</p>}
-      </div>
-    </header>
-  );
-}

package/src/components/ThemeToggle.module.scss

@@ -1,34 +0,0 @@
-@use '../../mixin' as *;
-
-.toggle {
-  display: flex;
-}
-
-.currentMode {
-  display: flex;
-  align-items: center;
-  gap: s(2);
-  padding: s(3) s(4);
-  background: color(bg-elevation-1);
-  border-radius: r(2);
-  border: 1px solid color(default-outline);
-  cursor: pointer;
-  transition: all 0.2s;
-  width: 100%;
-
-  &:hover {
-    background: color(default-hover);
-    border-color: color(primary-base);
-  }
-
-  i {
-    font-size: 16px;
-    color: color(primary-base);
-  }
-
-  span {
-    @include p4;
-    font-weight: 600;
-    color: color(default-deep-base);
-  }
-}

package/src/components/ThemeToggle.tsx

@@ -1,47 +0,0 @@
-'use client';
-
-import { useEffect, useState } from 'react';
-import styles from './ThemeToggle.module.scss';
-
-export default function ThemeToggle() {
-  const [mode, setMode] = useState<'' | 'light' | 'dark'>('');
-
-  useEffect(() => {
-    const savedMode = localStorage.getItem('color-mode') as '' | 'light' | 'dark';
-    if (savedMode) {
-      setMode(savedMode);
-      document.documentElement.setAttribute('data-color-mode', savedMode);
-    }
-  }, []);
-
-  const handleModeChange = (newMode: '' | 'light' | 'dark') => {
-    setMode(newMode);
-    document.documentElement.setAttribute('data-color-mode', newMode);
-    localStorage.setItem('color-mode', newMode);
-  };
-
-  const handleToggleMode = () => {
-    if (mode === '') {
-      handleModeChange('light');
-    } else if (mode === 'light') {
-      handleModeChange('dark');
-    } else {
-      handleModeChange('');
-    }
-  };
-
-  const getModeLabel = () => {
-    if (mode === 'light') return 'Light Mode';
-    if (mode === 'dark') return 'Dark Mode';
-    return 'Auto Mode';
-  };
-
-  return (
-    <div className={styles.toggle}>
-      <button className={styles.currentMode} onClick={handleToggleMode}>
-        <i className="icon-show"></i>
-        <span>{getModeLabel()}</span>
-      </button>
-    </div>
-  );
-}

package/src/styles/custom.scss

@@ -1,11 +0,0 @@
-@use '../../mixin' as *;
-
-h1 {
-  @include display1;
-}
-h2 {
-  @include display2;
-}
-h3 {
-  @include display3;
-}

package/src/styles/doc-common.scss

@@ -1,119 +0,0 @@
-// 문서 페이지 공통 스타일
-@use '../../mixin' as *;
-
-.section {
-  margin-bottom: s(10);
-
-  h2 {
-    @include display5;
-    margin: 0 0 s(5) 0;
-    color: color(default-deep-base);
-  }
-
-  h3 {
-    @include p1; font-weight: 600;
-    margin: s(7) 0 s(4) 0;
-    color: color(default-deep-base);
-  }
-
-  h4 {
-    @include p2; font-weight: 600;
-    margin: s(5) 0 s(3) 0;
-    color: color(default-deep-base);
-  }
-
-  p {
-    @include p2;
-    color: color(default-base);
-    line-height: 1.8;
-    margin: 0 0 s(5) 0;
-  }
-
-  ul {
-    @include p2;
-    color: color(default-base);
-    line-height: 1.8;
-    margin: 0 0 s(5) 0;
-    padding-left: s(6);
-
-    li {
-      margin-bottom: s(2);
-    }
-  }
-}
-
-.demo {
-  padding: s(6);
-  background: color(default-fill);
-  border: 1px solid color(default-outline);
-  border-radius: r(4);
-  margin-bottom: s(5);
-}
-
-.note,
-.warning,
-.tip {
-  display: flex;
-  gap: s(4);
-  padding: s(5);
-  border-radius: r(4);
-  margin-bottom: s(5);
-
-  > i {
-    font-size: 20px;
-    flex-shrink: 0;
-  }
-
-  strong {
-    display: block;
-    margin-bottom: s(2);
-  }
-}
-
-.note {
-  background: color(info-fill);
-  border: 1px solid color(info-outline);
-  color: color(info-base);
-
-  > i {
-    color: color(info-base);
-  }
-}
-
-.warning {
-  background: color(warning-fill);
-  border: 1px solid color(warning-outline);
-  color: color(warning-base);
-
-  > i {
-    color: color(warning-base);
-  }
-}
-
-.tip {
-  background: color(success-fill);
-  border: 1px solid color(success-outline);
-  color: color(success-base);
-
-  > i {
-    color: color(success-base);
-  }
-}
-
-.grid {
-  display: grid;
-  gap: s(5);
-  margin-bottom: s(5);
-
-  &.cols2 {
-    grid-template-columns: repeat(2, 1fr);
-  }
-
-  &.cols3 {
-    grid-template-columns: repeat(3, 1fr);
-  }
-
-  &.cols4 {
-    grid-template-columns: repeat(4, 1fr);
-  }
-}

package/src/styles/font-family.scss

@@ -1,80 +0,0 @@
-@font-face {
-  font-family: 'Pretendard';
-  font-weight: 900;
-  src:
-    local('Pretendard Black'),
-    url(../../scss/typo/font/Pretendard-Black.woff2) format('woff2');
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'Pretendard';
-  font-weight: 800;
-  src:
-    local('Pretendard ExtraBold'),
-    url(../../scss/typo/font/Pretendard-ExtraBold.woff2) format('woff2');
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'Pretendard';
-  font-weight: 700;
-  src:
-    local('Pretendard Bold'),
-    url(../../scss/typo/font/Pretendard-Bold.woff2) format('woff2');
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'Pretendard';
-  font-weight: 600;
-  src:
-    local('Pretendard SemiBold'),
-    url(../../scss/typo/font/Pretendard-SemiBold.woff2) format('woff2');
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'Pretendard';
-  font-weight: 500;
-  src:
-    local('Pretendard Medium'),
-    url(../../scss/typo/font/Pretendard-Medium.woff2) format('woff2');
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'Pretendard';
-  font-weight: 400;
-  src:
-    local('Pretendard Regular'),
-    url(../../scss/typo/font/Pretendard-Regular.woff2) format('woff2');
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'Pretendard';
-  font-weight: 300;
-  src:
-    local('Pretendard Light'),
-    url(../../scss/typo/font/Pretendard-Light.woff2) format('woff2');
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'Pretendard';
-  font-weight: 200;
-  src:
-    local('Pretendard ExtraLight'),
-    url(../../scss/typo/font/Pretendard-ExtraLight.woff2) format('woff2');
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'Pretendard';
-  font-weight: 100;
-  src:
-    local('Pretendard Thin'),
-    url(../../scss/typo/font/Pretendard-Thin.woff2) format('woff2');
-  font-display: swap;
-}

package/src/styles/icon.scss

@@ -1,5 +0,0 @@
-@font-face {
-  font-family: 'podo-ui-icon';
-  src: url(../../scss/icon/font/icon.woff) format('woff');
-  font-display: swap;
-}

package/src/vite-env.d.ts

@@ -1 +0,0 @@
-/// <reference types="vite/client" />

package/tsconfig.json

@@ -1,26 +0,0 @@
-{
-  "compilerOptions": {
-    "lib": ["dom", "dom.iterable", "esnext"],
-    "allowJs": true,
-    "skipLibCheck": true,
-    "strict": true,
-    "noEmit": true,
-    "esModuleInterop": true,
-    "module": "esnext",
-    "moduleResolution": "bundler",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "jsx": "preserve",
-    "incremental": true,
-    "plugins": [
-      {
-        "name": "next"
-      }
-    ],
-    "paths": {
-      "@/*": ["./src/*"]
-    }
-  },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
-  "exclude": ["node_modules", ".next", ".vscode"]
-}