[Fix/#80] svgr index.tsx로 export 해오기

package.json

@@ -16,7 +16,7 @@
     "lints": "eslint --fix './**/*.{ts,tsx,js,jsx}'",
     "prepare": "husky install",
     "lint-front": "lint-staged",
-    "svgr": "npx @svgr/cli -d src/assets/svgs --ignore-existing --typescript --no-dimensions public/svgs"
+    "svgr": "node svgr-generate.cjs"
   },
   "lint-staged": {
     "*.{ts,tsx}": [
@@ -32,6 +32,7 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-router-dom": "^6.24.0",
+    "shelljs": "^0.8.5",
     "styled-components": "^6.1.11",
     "styled-reset": "^4.5.2",
     "supports-color": "^9.4.0",
@@ -54,6 +55,7 @@
     "@types/prettier-linter-helpers": "^1",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
+    "@types/shelljs": "^0",
     "@typescript-eslint/eslint-plugin": "^7.13.1",
     "@typescript-eslint/parser": "^7.13.1",
     "@vitejs/plugin-react-swc": "^3.5.0",

src/assets/svgs/IcHamburgar.tsx

@@ -1,3 +1,4 @@
+import * as React from "react";
 import type { SVGProps } from "react";
 const SvgIcHamburgar = (props: SVGProps<SVGSVGElement>) => (
   <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 32 32" {...props}>

src/assets/svgs/IconArrowLeft.tsx

@@ -1,3 +1,4 @@
+import * as React from "react";
 import type { SVGProps } from "react";
 const SvgIconArrowLeft = (props: SVGProps<SVGSVGElement>) => (
   <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" {...props}>

src/assets/svgs/IconEyeOff.tsx

@@ -0,0 +1,11 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+const SvgIconEyeOff = (props: SVGProps<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" {...props}>
+    <path
+      fill="#939393"
+      d="M3.818 6.058 4.865 5l13.68 13.933L17.507 20l-2.52-2.567c-.94.317-1.939.484-2.986.484-4.09 0-7.585-2.592-9-6.25a9.8 9.8 0 0 1 2.61-3.784zM12 9.167c.651 0 1.275.263 1.736.732.46.469.718 1.105.718 1.768.001.284-.046.565-.139.833l-3.133-3.192c.263-.094.54-.142.818-.141m0-3.75c4.09 0 7.584 2.591 9 6.25a9.8 9.8 0 0 1-3.273 4.325L16.565 14.8a8.2 8.2 0 0 0 2.651-3.133 8.13 8.13 0 0 0-2.964-3.344A7.93 7.93 0 0 0 12 7.083c-.892 0-1.767.15-2.585.417l-1.26-1.275A9.6 9.6 0 0 1 12 5.417m-7.216 6.25a8.13 8.13 0 0 0 2.964 3.344A7.93 7.93 0 0 0 12 16.25c.565 0 1.12-.058 1.636-.175l-1.865-1.908a2.5 2.5 0 0 1-1.506-.734 2.57 2.57 0 0 1-.72-1.533L6.764 9.058a8.2 8.2 0 0 0-1.98 2.609"
+    />
+  </svg>
+);
+export default SvgIconEyeOff;

src/assets/svgs/IconLogo.tsx

@@ -1,3 +1,4 @@
+import * as React from "react";
 import type { SVGProps } from "react";
 const SvgIconLogo = (props: SVGProps<SVGSVGElement>) => (
   <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 73 30" {...props}>

src/assets/svgs/IconMinus.tsx

@@ -1,7 +1,8 @@
+import * as React from "react";
 import type { SVGProps } from "react";
 const SvgIconMinus = (props: SVGProps<SVGSVGElement>) => (
   <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" {...props}>
-    <path stroke="currentColor" strokeMiterlimit={10} strokeWidth={1.2} d="M17 12H7" />
+    <path stroke="#fff" strokeMiterlimit={10} strokeWidth={1.2} d="M17 12H7" />
   </svg>
 );
 export default SvgIconMinus;

src/assets/svgs/IconPlus.tsx

@@ -2,7 +2,7 @@ import * as React from "react";
 import type { SVGProps } from "react";
 const SvgIconPlus = (props: SVGProps<SVGSVGElement>) => (
   <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" {...props}>
-    <path stroke="currentColor" strokeMiterlimit={10} strokeWidth={1.2} d="M12 7v10M17 12H7" />
+    <path stroke="#fff" strokeMiterlimit={10} strokeWidth={1.2} d="M12 7v10M17 12H7" />
   </svg>
 );
 export default SvgIconPlus;

src/assets/svgs/IconTextfiedlDelete.tsx

@@ -1,3 +1,4 @@
+import * as React from "react";
 import type { SVGProps } from "react";
 const SvgIconTextfiedlDelete = (props: SVGProps<SVGSVGElement>) => (
   <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" {...props}>

src/assets/svgs/index.tsx

@@ -1,8 +1,9 @@
-export { default as IcomCopy } from "./IcomCopy";
 export { default as IcHamburgar } from "./IcHamburgar";
+export { default as IcomCopy } from "./IcomCopy";
 export { default as IconArrowLeft } from "./IconArrowLeft";
 export { default as IconArrowRight } from "./IconArrowRight";
 export { default as IconCheck } from "./IconCheck";
+export { default as IconEyeOff } from "./IconEyeOff";
 export { default as IconLogo } from "./IconLogo";
 export { default as IconMinus } from "./IconMinus";
 export { default as IconPlus } from "./IconPlus";

svgr-generate.cjs

@@ -0,0 +1,54 @@
+const { exec } = require("shelljs");
+const fs = require("fs");
+const path = require("path");
+
+const SVG_DIR = path.resolve(__dirname, "public/svgs");
+const OUTPUT_DIR = path.resolve(__dirname, "src/assets/svgs");
+const INDEX_FILE = path.join(OUTPUT_DIR, "index.tsx");
+
+// Run SVGR
+exec(
+  `npx @svgr/cli -d ${OUTPUT_DIR} --ignore-existing --typescript --no-dimensions ${SVG_DIR}`,
+  (code, stdout, stderr) => {
+    if (code !== 0) {
+      console.error("SVGR command failed:", stderr);
+      process.exit(code);
+    }
+    deleteIndexTs();
+    generateIndexFile();
+  }
+);
+
+// Delete index.ts if it exists
+function deleteIndexTs() {
+  const indexTsPath = path.join(OUTPUT_DIR, "index.ts");
+  if (fs.existsSync(indexTsPath)) {
+    fs.unlinkSync(indexTsPath);
+  }
+}
+
+// Generate index.tsx
+function generateIndexFile() {
+  fs.readdir(OUTPUT_DIR, (err, files) => {
+    if (err) {
+      console.error("Failed to read directory:", err);
+      process.exit(1);
+    }
+
+    const exportStatements = files
+      .filter((file) => file.endsWith(".tsx"))
+      .map((file) => {
+        const name = path.basename(file, ".tsx");
+        return `export { default as ${name} } from "./${name}";`;
+      })
+      .join("\n");
+
+    fs.writeFile(INDEX_FILE, exportStatements, (writeErr) => {
+      if (writeErr) {
+        console.error("Failed to write index.tsx:", writeErr);
+        process.exit(1);
+      }
+      console.log("index.tsx generated successfully");
+    });
+  });
+}

yarn.lock

@@ -4095,7 +4095,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/glob@npm:^7.1.3":
+"@types/glob@npm:^7.1.3, @types/glob@npm:~7.2.0":
   version: 7.2.0
   resolution: "@types/glob@npm:7.2.0"
   dependencies:
@@ -4309,6 +4309,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/shelljs@npm:^0":
+  version: 0.8.15
+  resolution: "@types/shelljs@npm:0.8.15"
+  dependencies:
+    "@types/glob": "npm:~7.2.0"
+    "@types/node": "npm:*"
+  checksum: 10c0/8cee3c2cee993d4e4b534712dbf3b47000f22e14cbc4fff5c09fd774272e2bfb9b7dfc654d81349a11ade93a94f3a75771e403cd31509565102c33f518185da8
+  languageName: node
+  linkType: hard
+
 "@types/stylis@npm:4.2.5":
   version: 4.2.5
   resolution: "@types/stylis@npm:4.2.5"
@@ -5417,6 +5427,7 @@ __metadata:
     "@types/prettier-linter-helpers": "npm:^1"
     "@types/react": "npm:^18.3.3"
     "@types/react-dom": "npm:^18.3.0"
+    "@types/shelljs": "npm:^0"
     "@typescript-eslint/eslint-plugin": "npm:^7.13.1"
     "@typescript-eslint/parser": "npm:^7.13.1"
     "@vitejs/plugin-react-swc": "npm:^3.5.0"
@@ -5445,6 +5456,7 @@ __metadata:
     react: "npm:^18.3.1"
     react-dom: "npm:^18.3.1"
     react-router-dom: "npm:^6.24.0"
+    shelljs: "npm:^0.8.5"
     storybook: "npm:^8.1.11"
     storybook-addon-theme-provider: "npm:^0.2.2"
     styled-components: "npm:^6.1.11"
@@ -8075,7 +8087,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"glob@npm:^7.1.3, glob@npm:^7.2.0":
+"glob@npm:^7.0.0, glob@npm:^7.1.3, glob@npm:^7.2.0":
   version: 7.2.3
   resolution: "glob@npm:7.2.3"
   dependencies:
@@ -8539,6 +8551,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"interpret@npm:^1.0.0":
+  version: 1.4.0
+  resolution: "interpret@npm:1.4.0"
+  checksum: 10c0/08c5ad30032edeec638485bc3f6db7d0094d9b3e85e0f950866600af3c52e9fd69715416d29564731c479d9f4d43ff3e4d302a178196bdc0e6837ec147640450
+  languageName: node
+  linkType: hard
+
 "invariant@npm:^2.2.4":
   version: 2.2.4
   resolution: "invariant@npm:2.2.4"
@@ -11076,6 +11095,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"rechoir@npm:^0.6.2":
+  version: 0.6.2
+  resolution: "rechoir@npm:0.6.2"
+  dependencies:
+    resolve: "npm:^1.1.6"
+  checksum: 10c0/22c4bb32f4934a9468468b608417194f7e3ceba9a508512125b16082c64f161915a28467562368eeb15dc16058eb5b7c13a20b9eb29ff9927d1ebb3b5aa83e84
+  languageName: node
+  linkType: hard
+
 "redent@npm:^3.0.0":
   version: 3.0.0
   resolution: "redent@npm:3.0.0"
@@ -11239,7 +11267,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"resolve@npm:^1.10.0, resolve@npm:^1.14.2, resolve@npm:^1.19.0, resolve@npm:^1.22.1, resolve@npm:^1.22.4, resolve@npm:^1.22.8":
+"resolve@npm:^1.1.6, resolve@npm:^1.10.0, resolve@npm:^1.14.2, resolve@npm:^1.19.0, resolve@npm:^1.22.1, resolve@npm:^1.22.4, resolve@npm:^1.22.8":
   version: 1.22.8
   resolution: "resolve@npm:1.22.8"
   dependencies:
@@ -11265,7 +11293,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"resolve@patch:resolve@npm%3A^1.10.0#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.14.2#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.19.0#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.22.1#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.22.4#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.22.8#optional!builtin<compat/resolve>":
+"resolve@patch:resolve@npm%3A^1.1.6#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.10.0#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.14.2#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.19.0#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.22.1#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.22.4#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.22.8#optional!builtin<compat/resolve>":
   version: 1.22.8
   resolution: "resolve@patch:resolve@npm%3A1.22.8#optional!builtin<compat/resolve>::version=1.22.8&hash=c3c19d"
   dependencies:
@@ -11602,6 +11630,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"shelljs@npm:^0.8.5":
+  version: 0.8.5
+  resolution: "shelljs@npm:0.8.5"
+  dependencies:
+    glob: "npm:^7.0.0"
+    interpret: "npm:^1.0.0"
+    rechoir: "npm:^0.6.2"
+  bin:
+    shjs: bin/shjs
+  checksum: 10c0/feb25289a12e4bcd04c40ddfab51aff98a3729f5c2602d5b1a1b95f6819ec7804ac8147ebd8d9a85dfab69d501bcf92d7acef03247320f51c1552cec8d8e2382
+  languageName: node
+  linkType: hard
+
 "side-channel@npm:^1.0.4, side-channel@npm:^1.0.6":
   version: 1.0.6
   resolution: "side-channel@npm:1.0.6"