Merge branch 'main' into docs/#7/ci-script

generateIconExport.js

@@ -0,0 +1,38 @@
+const fs = require("fs");
+const path = require("path");
+
+// 파스칼 케이스 변환 함수
+function toPascalCase(fileName) {
+  return fileName.replace(/(^\w|_\w)/g, (match) =>
+    match.replace("_", "").toUpperCase()
+  );
+}
+
+// index.ts 파일 생성 함수
+function generateIndex() {
+  const svgDir = path.join(__dirname, "src", "assets", "svgs"); // SVG 파일들이 있는 디렉토리 경로
+  const outputFile = path.join(svgDir, "index.ts"); // 생성할 index.ts 경로
+
+  // SVG 디렉토리에서 파일 목록 가져오기
+  const files = fs
+    .readdirSync(svgDir)
+    .filter((file) => file.endsWith(".svg")) // .svg 파일만 필터링
+    .map((file) => ({
+      fileName: file,
+      pascalName: toPascalCase(path.basename(file, ".svg")), // 확장자 제거 후 파스칼 케이스로 변환
+    }));
+
+  // index.ts 파일 내용 작성
+  const exportStatements = files
+    .map(({ fileName, pascalName }) => {
+      return `export { default as ${pascalName} } from "./${fileName}";`;
+    })
+    .join("\n");
+
+  // index.ts 파일 덮어쓰기
+  fs.writeFileSync(outputFile, exportStatements);
+
+  // console.log(`index.ts generated with ${files.length} exports.`);
+}
+
+generateIndex();

next.config.mjs

@@ -1,9 +1,30 @@
 /** @type {import('next').NextConfig} */
+const nextConfig = {
+  webpack(config) {
+    // SVG imports를 처리하는 기존 규칙 가져오기
+    const fileLoaderRule = config.module.rules.find((rule) => rule.test?.test?.('.svg'));
 
-import { createVanillaExtractPlugin } from "@vanilla-extract/next-plugin";
+    config.module.rules.push(
+      // svg imports 중 ?url로 끝나는 것에 대해서만 기존 규칙을 재적용
+      {
+        ...fileLoaderRule,
+        test: /\.svg$/i,
+        resourceQuery: /url/, // *.svg?url
+      },
+      // *.svg imports를 React 컴포넌트로 변환
+      {
+        test: /\.svg$/i,
+        issuer: fileLoaderRule.issuer,
+        resourceQuery: { not: [...fileLoaderRule.resourceQuery.not, /url/] }, // exclude if *.svg?url
+        use: ['@svgr/webpack'],
+      },
+    );
 
-const withVanillaExtract = createVanillaExtractPlugin();
+    // 처리가 완료된 *.svg를 무시하도록 파일 로더 규칙을 수정
+    fileLoaderRule.exclude = /\.svg$/i;
 
-const nextConfig = {};
+    return config;
+  },
+};
 
 export default withVanillaExtract(nextConfig);

package.json

@@ -9,6 +9,7 @@
     "lint": "biome lint",
     "typecheck": "tsc --noEmit",
     "check": "concurrently \"pnpm lint\" \"pnpm typecheck\""
+    "generate-icon-export": "node ./generateIconExport.js"
   },
   "dependencies": {
     "@vanilla-extract/css": "^1.15.5",
@@ -18,6 +19,7 @@
     "react-dom": "^18"
   },
   "devDependencies": {
+    "@svgr/webpack": "^8.1.0",
     "@biomejs/biome": "1.8.3",
     "@types/node": "^20",
     "@types/react": "^18",
@@ -26,4 +28,4 @@
     "concurrently": "^9.0.0",
     "typescript": "^5"
   }
-}
+}

src/app/page.tsx

@@ -1,3 +1,22 @@
+import { IcnAlarm } from '@/assets/svgs';
+import AlarmUrl from '@/assets/svgs/icn_alarm.svg?url';
+import Image from 'next/image';
+
 export default function Home() {
-  return <div className="text-purple">AlgoHub</div>;
+  return (
+    <div className="text-purple">
+      <IcnAlarm width={50} height={50} />
+      <Image width={50} height={50} src={AlarmUrl} alt='alarm' priority />
+      <img width={50} height={50} src={AlarmUrl.src} alt="alarm" />
+      <div
+        style={{
+          width: 50,
+          height: 50,
+          backgroundImage: `url(${AlarmUrl.src})`,
+          backgroundRepeat: 'no-repeat',
+          backgroundSize: 'cover',
+        }}
+      ></div>
+    </div>
+  );
 }