Merge pull request #107 from Funssion-SWM/develop

Fix: react-icons -> @react-icons/all-files 변경 : 번들 사이즈 감축

next.config.js

@@ -1,9 +1,13 @@
-/** @type {import('next').NextConfig} */
-
 const withPWA = require('next-pwa')({
   dest: 'public',
 });
 
+const withBundleAnalyzer = require('@next/bundle-analyzer')({
+  enabled: process.env.ANALYZE === 'true',
+});
+
+/** @type {import('next').NextConfig} */
+
 const nextConfig = {
   output: 'standalone',
   images: {
@@ -55,3 +59,5 @@ module.exports = withSentryConfig(
     disableLogger: true,
   }
 );
+
+module.exports = withBundleAnalyzer(nextConfig);

package.json

@@ -11,7 +11,9 @@
     "test:coverage": "npm test -- --coverage"
   },
   "dependencies": {
+    "@next/bundle-analyzer": "^14.1.4",
     "@ramonak/react-progress-bar": "^5.0.3",
+    "@react-icons/all-files": "^4.1.0",
     "@sentry/nextjs": "^7.61.0",
     "@tailwindcss/typography": "^0.5.9",
     "@tiptap/core": "^2.0.3",
@@ -60,7 +62,6 @@
     "react-dnd": "^16.0.1",
     "react-dnd-html5-backend": "^16.0.1",
     "react-dom": "18.2.0",
-    "react-icons": "^4.10.1",
     "react-markdown": "^9.0.0",
     "react-moveable": "^0.54.1",
     "react-spinners": "^0.13.8",

src/components/covoerletter/CoverLetterContainer.tsx

@@ -3,7 +3,7 @@
 import { CoverletterInfo, StackInfo } from '@/types/coverletter';
 import { useState } from 'react';
 import BlueBtn from '../shared/btn/BlueBtn';
-import { AiOutlineInfoCircle } from 'react-icons/ai';
+import { AiOutlineInfoCircle } from '@react-icons/all-files/ai/AiOutlineInfoCircle';
 import MyEditor from '@/lib/editor';
 import { useEditor } from '@tiptap/react';
 import { handleTiptapExtensions } from '@/lib/editor/extensions';

src/components/create/coverletter/CoverLetterForm.tsx

@@ -3,7 +3,7 @@
 import BlueBtn from '@/components/shared/btn/BlueBtn';
 import { notifyToast } from '@/utils/notify';
 import { ChangeEvent, useContext, useEffect, useState } from 'react';
-import { AiOutlineInfoCircle } from 'react-icons/ai';
+import { AiOutlineInfoCircle } from '@react-icons/all-files/ai/AiOutlineInfoCircle';
 import CoverLetterPage2 from './CoverLetterPage2';
 import { DevelopmentArea, StackInfo } from '@/types/coverletter';
 import {

src/components/create/series/MemoDndCard.tsx

@@ -1,6 +1,6 @@
 import { useRef } from 'react';
 import { useDrag, useDrop } from 'react-dnd';
-import { AiOutlineMinusCircle } from 'react-icons/ai';
+import { AiOutlineMinusCircle } from '@react-icons/all-files/ai/AiOutlineMinusCircle';
 import { MemoInfo } from '@/types/series';
 
 type Props = {
@@ -96,14 +96,14 @@ export default function MemoDndCard({
       }`}
       data-handler-id={handlerId}
     >
-      <p className="line-clamp-3 font-semibold text-sm break-all text-soma-grey-70">
+      <p className="text-sm font-semibold break-all line-clamp-3 text-soma-grey-70">
         {title}
       </p>
       <button
         className="absolute top-0 right-0"
         onClick={() => onDeleteBtnClick(id)}
       >
-        <AiOutlineMinusCircle className="text-soma-blue-40 w-5 h-5" />
+        <AiOutlineMinusCircle className="w-5 h-5 text-soma-blue-40" />
       </button>
     </div>
   );

src/components/create/series/SelectCard.tsx

@@ -1,6 +1,7 @@
 import { Memo } from '@/types/memo';
 import { useState } from 'react';
-import { AiFillCheckCircle, AiOutlineCheckCircle } from 'react-icons/ai';
+import { AiFillCheckCircle } from '@react-icons/all-files/ai/AiFillCheckCircle';
+import { AiOutlineCheckCircle } from '@react-icons/all-files/ai/AiOutlineCheckCircle';
 
 type Props = {
   memo: Memo;
@@ -43,7 +44,7 @@ export default function SelectCard({ memo, onClick, seriesId }: Props) {
     >
       <div className="self-end text-soma-blue-40">
         {memo.seriesId && memo.seriesId !== seriesId ? (
-          <div className="text-xs h-5 font font-medium">
+          <div className="h-5 text-xs font-medium font">
             다른 시리즈에 속한 메모
           </div>
         ) : selected ? (
@@ -53,11 +54,11 @@ export default function SelectCard({ memo, onClick, seriesId }: Props) {
         )}
       </div>
 
-      <div className="w-full flex-1">
-        <h2 className="text-xl text-soma-grey-70 font-extrabold my-3 line-clamp-2 break-all h-14">
+      <div className="flex-1 w-full">
+        <h2 className="my-3 text-xl font-extrabold break-all text-soma-grey-70 line-clamp-2 h-14">
           {memoTitle}
         </h2>
-        <p className="line-clamp-3 text-sm break-all my-1 text-soma-grey-60">
+        <p className="my-1 text-sm break-all line-clamp-3 text-soma-grey-60">
           {memoDescription}
         </p>
       </div>