8-Sprinters · Eugene-A-01 · Feb 3, 2024 · Feb 3, 2024 · Feb 3, 2024
diff --git a/next.config.js b/next.config.js
@@ -2,6 +2,14 @@ const { createVanillaExtractPlugin } = require('@vanilla-extract/next-plugin');
 const withVanillaExtract = createVanillaExtractPlugin();
 
 /** @type {import('next').NextConfig} */
-const nextConfig = {};
+const nextConfig = {
+  webpack(config) {
+    config.module.rules.push({
+      test: /\.svg$/,
+      use: ['@svgr/webpack'],
+    });
+    return config;
+  },
+};
 
 module.exports = withVanillaExtract(nextConfig);
diff --git a/package.json b/package.json
@@ -27,14 +27,17 @@
     "@tanstack/react-query-devtools": "^5.17.12",
     "@vanilla-extract/integration": "^6.2.4",
     "@vanilla-extract/next-plugin": "^2.3.2",
+    "@yaireo/tagify": "^4.19.0",
     "axios": "^1.6.5",
     "next": "14.0.4",
     "react": "^18",
     "react-dom": "^18",
+    "react-hook-form": "^7.49.3",
     "react-scripts": "^5.0.1",
     "zustand": "^4.4.7"
   },
   "devDependencies": {
+    "@svgr/webpack": "^8.1.0",
     "@commitlint/cli": "^18.6.0",
     "@commitlint/config-conventional": "^18.6.0",
     "@testing-library/jest-dom": "^6.2.0",

diff --git a/public/fonts/Pretendard-Black.woff2 b/public/fonts/Pretendard-Black.woff2
diff --git a/public/fonts/Pretendard-Bold.woff2 b/public/fonts/Pretendard-Bold.woff2
diff --git a/public/fonts/Pretendard-ExtraBold.woff2 b/public/fonts/Pretendard-ExtraBold.woff2
diff --git a/public/fonts/Pretendard-ExtraLight.woff2 b/public/fonts/Pretendard-ExtraLight.woff2
diff --git a/public/fonts/Pretendard-Light.woff2 b/public/fonts/Pretendard-Light.woff2
diff --git a/public/fonts/Pretendard-Medium.woff2 b/public/fonts/Pretendard-Medium.woff2
diff --git a/public/fonts/Pretendard-Regular.woff2 b/public/fonts/Pretendard-Regular.woff2
diff --git a/public/fonts/Pretendard-SemiBold.woff2 b/public/fonts/Pretendard-SemiBold.woff2
diff --git a/public/fonts/Pretendard-Thin.woff2 b/public/fonts/Pretendard-Thin.woff2
diff --git a/public/fonts/init.ts b/public/fonts/init.ts
diff --git a/public/icons/close_button.svg b/public/icons/close_button.svg
diff --git a/public/icons/default_profile.svg b/public/icons/default_profile.svg
diff --git a/public/icons/init.ts b/public/icons/init.ts
diff --git a/public/icons/search.svg b/public/icons/search.svg
diff --git a/public/icons/x_circle_fill.svg b/public/icons/x_circle_fill.svg
diff --git a/public/images/init.ts b/public/images/init.ts
diff --git a/public/images/mock_profile.png b/public/images/mock_profile.png
diff --git a/public/styles/init.ts b/public/styles/init.ts
diff --git a/src/app/(BeforeLogin)/_components/init.ts b/src/app/(BeforeLogin)/_components/init.ts
diff --git a/src/app/(BeforeLogin)/login/_components/init.ts b/src/app/(BeforeLogin)/login/_components/init.ts
diff --git a/src/app/(BeforeLogin)/login/page.tsx b/src/app/(BeforeLogin)/login/page.tsx
diff --git a/src/app/create/CreateListMock.ts b/src/app/create/CreateListMock.ts
@@ -0,0 +1,71 @@
+interface UserProfileType {
+  id: number;
+  profileImageUrl: string;
+  nickname: string;
+}
+
+const generateMockData = (count: number): UserProfileType[] => {
+  const mockData: UserProfileType[] = [];
+
+  mockData.push({
+    id: 101,
+    profileImageUrl: `/images/mock_profile.png`,
+    nickname: '안유진',
+  });
+
+  mockData.push({
+    id: 102,
+    profileImageUrl: `/images/mock_profile.png`,
+    nickname: '강나현',
+  });
+
+  mockData.push({
+    id: 103,
+    profileImageUrl: `/images/mock_profile.png`,
+    nickname: '민서영',
+  });
+
+  mockData.push({
+    id: 104,
+    profileImageUrl: `/images/mock_profile.png`,
+    nickname: '박소현',
+  });
+
+  mockData.push({
+    id: 105,
+    profileImageUrl: `/images/mock_profile.png`,
+    nickname: '강현지',
+  });
+
+  mockData.push({
+    id: 106,
+    profileImageUrl: `/images/mock_profile.png`,
+    nickname: '신은서',
+  });
+
+  mockData.push({
+    id: 107,
+    profileImageUrl: `/images/mock_profile.png`,
+    nickname: '동호',
+  });
+
+  mockData.push({
+    id: 108,
+    profileImageUrl: `/images/mock_profile.png`,
+    nickname: 'JJUNGSU',
+  });
+
+  for (let i = 1; i <= count; i++) {
+    const user: UserProfileType = {
+      id: i,
+      profileImageUrl: '',
+      nickname: `User${i}`,
+    };
+
+    mockData.push(user);
+  }
+
+  return mockData;
+};
+
+export default generateMockData(20);