Merge branch 'fe/develop' into fe-789-REPLACE_SUSPENSE

woowacourse-teams · Oct 11, 2024 · 0ddfdcb · 0ddfdcb
2 parents 4b46aa4 + 24eeee9
commit 0ddfdcb
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 4 deletions.
diff --git a/frontend/src/components/dashboard/ProcessColumn/index.tsx b/frontend/src/components/dashboard/ProcessColumn/index.tsx
@@ -89,9 +89,8 @@ export default function ProcessColumn({ process, showRejectedApplicant, isPassed
         {process.applicants
           .filter(({ isRejected }) => (showRejectedApplicant ? isRejected : !isRejected))
           .map(({ applicantId, applicantName, createdAt, evaluationCount, averageScore, isRejected }) => (
-            <DropdownProvider>
+            <DropdownProvider key={applicantId}>
               <ApplicantCard
-                key={applicantId}
                 name={applicantName}
                 isRejected={isRejected}
                 createdAt={createdAt}

diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx
@@ -12,14 +12,15 @@ import globalStyles from './styles/globalStyles';
 import theme from './styles/theme';
 
 import AppRouter from './router/AppRouter';
+import settingMock from './settingMock';
 
 const { PROD_URL, DEV_URL } = process.env;
 
 async function setPrev() {
+  await settingMock();
+
   if (process.env.NODE_ENV === 'development') {
     Sentry.getCurrentScope().setLevel('info');
-    const worker = await import('@mocks/browser');
-    await worker.default.start();
   }
   if (process.env.NODE_ENV === 'production') {
     ReactGA.initialize(process.env.GA_MEASUREMENT_ID);

diff --git a/frontend/src/settingMock.ts b/frontend/src/settingMock.ts
@@ -0,0 +1,40 @@
+const MSW_ACTIVE_ID = 'mswActive';
+
+export default async function settingMock() {
+  if (process.env.NODE_ENV === 'development' && window.localStorage.getItem(MSW_ACTIVE_ID)) {
+    const worker = await import('@mocks/browser');
+    await worker.default.start();
+  }
+
+  if (process.env.NODE_ENV === 'development') {
+    const body = document.querySelector('body');
+    const floatingMSWActiveButton = document.createElement('button');
+
+    Object.assign(floatingMSWActiveButton.style, {
+      position: 'fixed',
+      bottom: '20px',
+      right: '80px',
+      padding: '10px 15px',
+      backgroundColor: '#007bff',
+      color: 'white',
+      border: 'none',
+      borderRadius: '5px',
+      cursor: 'pointer',
+      zIndex: '9999',
+    });
+
+    const currentValue = window.localStorage.getItem(MSW_ACTIVE_ID);
+    floatingMSWActiveButton.textContent = `MSW ${currentValue ? 'ON' : 'OFF'}`;
+
+    floatingMSWActiveButton.addEventListener('click', () => {
+      if (currentValue) {
+        window.localStorage.removeItem(MSW_ACTIVE_ID);
+      } else {
+        window.localStorage.setItem(MSW_ACTIVE_ID, 'true');
+      }
+      window.location.reload();
+    });
+
+    body?.appendChild(floatingMSWActiveButton);
+  }
+}