Snippet.md

  "Context 있는 Tailwind 컴포넌트": {
    "prefix": "tccontext",
    "body": [
      "interface ${2:${TM_FILENAME_BASE}}ContextValue {}",
      "",
      "const ${2:${TM_FILENAME_BASE}}Context = createContext<${2:${TM_FILENAME_BASE}}ContextValue | null>(null);",
      "",
      "const use${2:${TM_FILENAME_BASE}}Context = () => {",
      "  const ctx = useContext(${2:${TM_FILENAME_BASE}}Context);",
      "",
      "  if (!ctx) {",
      "    throw new Error('Test 컴포넌트 안에서만 쓰여야합니다!');",
      "  }",
      "",
      "  return ctx;",
      "};",
      "",
      "type ${1:${TM_FILENAME_BASE}}Props<T extends React.ElementType> = {} & Component<T>;",
      "",
      "export function ${1:${TM_FILENAME_BASE}}({",
      "  children,",
      "  className,",
      "  ...restProps",
      "}: ${1:${TM_FILENAME_BASE}}Props<'${3:div}'>) {",
      "  const ctxValue = useMemo((): ${2:${TM_FILENAME_BASE}}ContextValue => ({}), []);",
      "",
      "  return (",
      "    <${2:${TM_FILENAME_BASE}}Context.Provider value={ctxValue}>",
      "      <${3:div} className={tw('', className)} {...restProps}>",
      "        {children}",
      "      </${3:div}>",
      "    </${2:${TM_FILENAME_BASE}}Context.Provider>",
      "  );",
      "}",
      ""
    ],
    "description": "Context 있는 Tailwind 컴포넌트"
  },
  "Tailwind 컴포넌트": {
    "prefix": "tc",
    "body": [
      "type ${1:${TM_FILENAME_BASE}}Props<T extends React.ElementType> = {} & Component<T>;",
      "",
      "export function ${1:${TM_FILENAME_BASE}}({",
      "  children,",
      "  className,",
      "  ...restProps",
      "}: ${1:${TM_FILENAME_BASE}}Props<'${2:div}'>) {",
      "  return (",
      "    <${2:div} className={tw('', className)} {...restProps}>",
      "      {children}",
      "    </${2:div}>",
      "  );",
      "}",
      ""
    ],
    "description": "Tailwind 컴포넌트"
  },
  "Compound Tailwind 컴포넌트": {
    "prefix": "tccompound",
    "body": [
      "type ${1:MyComponent}Props<T extends React.ElementType> = {} & Component<T>;",
      "",
      "function ${1:MyComponent}({",
      "  children,",
      "  className,",
      "  ...restProps",
      "}: ${1:MyComponent}Props<'${2:div}'>) {",
      "  return (",
      "    <${2:div} className={tw('', className)} {...restProps}>",
      "      {children}",
      "    </${2:div}>",
      "  );",
      "}",
      "",
      "${3:${TM_FILENAME_BASE}}.${1:MyComponent} = ${1:MyComponent}"
    ],
    "description": "Compound Tailwind 컴포넌트"
  },
  "Import Context ": {
    "prefix": "ipcontext",
    "body": ["import { useContext, useMemo, createContext } from 'react';"],
    "description": "Import Context "
  },
  "Import tailwind-merge": {
    "prefix": "iptwm",
    "body": ["import { tw } from '@/utils/tailwindMerge';"],
    "description": "Import tailwind-merge"
  },
  "TypeScript 스토리 생성": {
    "prefix": "tsstory",
    "body": [
      "import type { ComponentMeta, ComponentStory } from '@storybook/react';",
      "",
      "import { ${1:Component} } from './${1:Component}';",
      "",
      "const meta = {",
      "  component: ${1:Component},",
      "  title: '${2:Directory}/${1:Component}',",
      "  parameters: {",
      "    design: {",
      "      type: 'figma',",
      "      url: '${3:figmaURL}',",
      "    },",
      "  },",
      "} as ComponentMeta<typeof ${1:Component}>;",
      "",
      "export default meta;",
      "",
      "const Template: ComponentStory<typeof ${1:Component}> = (args) => <${1:Component} {...args} />;",
      "",
      "export const Default = Template.bind({});",
      "",
      "Default.args = {}"
    ],
    "description": "TypeScript 스토리 생성"
  }