[Feat] 어드민 공통 컴포넌트 제작

scripts/build-icons.ts

@@ -3,7 +3,7 @@ import { basename, extname, join } from 'node:path'
 import { transform } from '@svgr/core'
 import jsxPlugin from '@svgr/plugin-jsx'
 import svgoPlugin from '@svgr/plugin-svgo'
-import { format } from 'prettier'
+import { format, resolveConfig } from 'prettier'
 
 const GENERATED_TAG = '// @generated'
 const ICON_ROOT = join(process.cwd(), 'src/assets/icons')
@@ -84,6 +84,7 @@ const renderComponent = async (source: IconSource) => {
     {
       expandProps: 'end',
       icon: false,
+      jsxRuntime: 'automatic',
       plugins: svgrPlugins,
       prettier: false,
       svgo: true,
@@ -105,11 +106,12 @@ const renderComponent = async (source: IconSource) => {
     { componentName: source.componentName },
   )
 
+  const prettierConfig =
+    (await resolveConfig(join(OUTPUT_DIR, `${source.componentName}.tsx`))) ?? {}
+
   return format(`${GENERATED_TAG}\n${componentCode}`, {
+    ...prettierConfig,
     parser: 'typescript',
-    semi: false,
-    singleQuote: true,
-    trailingComma: 'all',
   })
 }
 
@@ -120,13 +122,13 @@ const renderIndex = async (sources: IconSource[]) => {
     )
     .join('\n')
 
+  const prettierConfig = (await resolveConfig(join(OUTPUT_DIR, 'index.ts'))) ?? {}
+
   return format(
     `${GENERATED_TAG}\n\nexport type { SVGProps as IconProps } from 'react'\n\n${exports}\n`,
     {
+      ...prettierConfig,
       parser: 'typescript',
-      semi: false,
-      singleQuote: true,
-      trailingComma: 'all',
     },
   )
 }

src/App.tsx

@@ -1,108 +1,5 @@
-import { useState } from 'react'
-import reactLogo from './assets/react.svg'
-import viteLogo from './assets/vite.svg'
-import heroImg from './assets/hero.png'
-import './App.css'
-
 function App() {
-  const [count, setCount] = useState(0)
-
-  return (
-    <>
-      <section id="center">
-        <div className="hero">
-          <img src={heroImg} className="base" width="170" height="179" alt="" />
-          <img src={reactLogo} className="framework" alt="React logo" />
-          <img src={viteLogo} className="vite" alt="Vite logo" />
-        </div>
-        <div>
-          <h1>Get started</h1>
-          <p>
-            Edit <code>src/App.tsx</code> and save to test <code>HMR</code>
-          </p>
-        </div>
-        <button
-          type="button"
-          className="counter"
-          onClick={() => {
-            setCount((count) => count + 1)
-          }}
-        >
-          Count is {count}
-        </button>
-      </section>
-
-      <div className="ticks"></div>
-
-      <section id="next-steps">
-        <div id="docs">
-          <svg className="icon" role="presentation" aria-hidden="true">
-            <use href="/icons.svg#documentation-icon"></use>
-          </svg>
-          <h2>Documentation</h2>
-          <p>Your questions, answered</p>
-          <ul>
-            <li>
-              <a href="https://vite.dev/" target="_blank">
-                <img className="logo" src={viteLogo} alt="" />
-                Explore Vite
-              </a>
-            </li>
-            <li>
-              <a href="https://react.dev/" target="_blank">
-                <img className="button-icon" src={reactLogo} alt="" />
-                Learn more
-              </a>
-            </li>
-          </ul>
-        </div>
-        <div id="social">
-          <svg className="icon" role="presentation" aria-hidden="true">
-            <use href="/icons.svg#social-icon"></use>
-          </svg>
-          <h2>Connect with us</h2>
-          <p>Join the Vite community</p>
-          <ul>
-            <li>
-              <a href="https://github.com/vitejs/vite" target="_blank">
-                <svg className="button-icon" role="presentation" aria-hidden="true">
-                  <use href="/icons.svg#github-icon"></use>
-                </svg>
-                GitHub
-              </a>
-            </li>
-            <li>
-              <a href="https://chat.vite.dev/" target="_blank">
-                <svg className="button-icon" role="presentation" aria-hidden="true">
-                  <use href="/icons.svg#discord-icon"></use>
-                </svg>
-                Discord
-              </a>
-            </li>
-            <li>
-              <a href="https://x.com/vite_js" target="_blank">
-                <svg className="button-icon" role="presentation" aria-hidden="true">
-                  <use href="/icons.svg#x-icon"></use>
-                </svg>
-                X.com
-              </a>
-            </li>
-            <li>
-              <a href="https://bsky.app/profile/vite.dev" target="_blank">
-                <svg className="button-icon" role="presentation" aria-hidden="true">
-                  <use href="/icons.svg#bluesky-icon"></use>
-                </svg>
-                Bluesky
-              </a>
-            </li>
-          </ul>
-        </div>
-      </section>
-
-      <div className="ticks"></div>
-      <section id="spacer"></section>
-    </>
-  )
+  return null
 }
 
 export default App

src/assets/icons/generated/AddIcon.tsx

@@ -0,0 +1,21 @@
+// @generated
+import type { SVGProps } from 'react'
+const AddIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" {...props}>
+    <g clipPath="url(#a)">
+      <path fill="currentColor" d="M8 2.429v11.143zM2.429 8H13.57z" />
+      <path
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeWidth={1.857}
+        d="M8 2.429v11.143M2.429 8H13.57"
+      />
+    </g>
+    <defs>
+      <clipPath id="a">
+        <path fill="currentColor" d="M1.5 1.5h13v13h-13z" />
+      </clipPath>
+    </defs>
+  </svg>
+)
+export default AddIcon