woowacourse-teams · vi-wolhwa · Oct 11, 2024 · Sep 15, 2024 · Sep 19, 2024 · Sep 19, 2024
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -1,6 +1,6 @@
 {
   "name": "code-zap",
-  "version": "1.1.2",
+  "version": "1.1.3",
   "description": "",
   "main": "index.js",
   "scripts": {
@@ -10,12 +10,16 @@
     "dev": "webpack-dev-server --config webpack.dev.js --open",
     "tsc": "tsc --noEmit",
     "build": "webpack --mode production --config webpack.prod.js",
+    "build:report": "webpack-bundle-analyzer --port 8888 dist/bundle-stats.json",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "lint:style": "stylelint '**/style.ts' --fix"
   },
   "keywords": [],
   "author": "",
+  "sideEffects": [
+    "./src/routes/router.tsx"
+  ],
   "license": "ISC",
   "dependencies": {
     "@emotion/react": "^11.11.4",
@@ -80,6 +84,7 @@
     "undici": "^6.19.2",
     "util": "^0.12.5",
     "webpack": "^5.92.1",
+    "webpack-bundle-analyzer": "^4.10.2",
     "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^5.0.4"
   },

diff --git a/frontend/playwright/tests/search.spec.ts b/frontend/playwright/tests/search.spec.ts
@@ -12,7 +12,7 @@ test('검색창에 `검색테스트`를 입력하면 `검색테스트`가 내용
 
   await searchTemplates({ page, keyword });
 
-  await waitForSuccess({ page, apiUrl: '/templates?keyword' });
+  await waitForSuccess({ page, apiUrl: '/templates/login?keyword' });
   await expect(page.getByRole('link', { name: /검색테스트/ })).toBeVisible();
 });
 
@@ -23,6 +23,6 @@ test('검색창에 `ㅁㅅㅌㅇ`를 입력할 경우 `검색 결과가 없습
 
   await searchTemplates({ page, keyword });
 
-  await waitForSuccess({ page, apiUrl: '/templates?keyword' });
+  await waitForSuccess({ page, apiUrl: '/templates/login?keyword' });
   await expect(page.locator('div').filter({ hasText: /^검색 결과가 없습니다\.$/ })).toBeVisible();
 });
diff --git a/frontend/playwright/tests/templates.actions.ts b/frontend/playwright/tests/templates.actions.ts
@@ -35,7 +35,7 @@ export const uploadTemplateToCodezap = async ({
   }
 
   // 파일명 입력
-  await page.getByPlaceholder('파일명.js').fill(fileName);
+  await page.getByPlaceholder('파일명.[확장자]').fill(fileName);
 
   // 코드 입력
   await page

diff --git a/frontend/playwright/tests/templates.spec.ts b/frontend/playwright/tests/templates.spec.ts
@@ -35,7 +35,7 @@ test('템플릿 제목, 설명, 파일명, 소스코드, 태그를 입력하고
       tag: testTitle,
     });
 
-    const templateCard = page.getByRole('link', { name: `testTitle` }).first();
+    const templateCard = page.getByRole('link', { name: testTitle }).first();
 
     await expect(templateCard).toBeVisible();
   } catch (error) {
@@ -50,7 +50,7 @@ test('템플릿 카드를 누르면 템플릿 제목, 설명, 작성자, 생성
 }) => {
   await page.goto('/my-templates');
   // 템플릿 목록
-  await waitForSuccess({ page, apiUrl: '/templates' });
+  await waitForSuccess({ page, apiUrl: '/templates/login?keyword' });
 
   const templateCard = page.getByRole('link', { name: '상세조회테스트' });
 

diff --git a/frontend/public/index.html b/frontend/public/index.html
@@ -1,6 +1,8 @@
 <!doctype html>
 <html lang="ko">
   <head>
+    <link rel="preconnect" href="https://api.code-zap.com" />
+    <link rel="preconnect" href="https://www.googletagmanager.com" />
     <link
       rel="stylesheet"
       type="text/css"

diff --git a/frontend/src/components/CategoryDropdown/CategoryDropdown.tsx b/frontend/src/components/CategoryDropdown/CategoryDropdown.tsx
@@ -0,0 +1,79 @@
+import { Dropdown, CategoryGuide, NewCategoryInput } from '@/components';
+import { useInputWithValidate } from '@/hooks';
+import { validateCategoryName } from '@/service/validates';
+import { Category } from '@/types';
+
+interface Props {
+  options: Category[];
+  isOpen: boolean;
+  toggleDropdown: () => void;
+  currentValue: Category;
+  handleCurrentValue: (newValue: Category) => void;
+  getOptionLabel: (category: Category) => string;
+  createNewCategory: (categoryName: string) => Promise<void>;
+  dropdownRef: React.MutableRefObject<HTMLDivElement | null>;
+  isPending: boolean;
+}
+
+const CategoryDropdown = ({
+  options,
+  isOpen,
+  toggleDropdown,
+  currentValue,
+  handleCurrentValue,
+  getOptionLabel,
+  createNewCategory,
+  dropdownRef,
+  isPending,
+}: Props) => {
+  const {
+    value: categoryInputValue,
+    errorMessage: categoryInputErrorMessage,
+    handleChange: handleCategoryInputChange,
+  } = useInputWithValidate('', validateCategoryName);
+
+  const handleNewCategory = async (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (!(e.target instanceof HTMLInputElement) || e.key !== 'Enter' || e.nativeEvent.isComposing === true) {
+      return;
+    }
+
+    if (categoryInputErrorMessage !== '') {
+      return;
+    }
+
+    const inputValue = e.target.value;
+
+    if (inputValue === '') {
+      return;
+    }
+
+    await createNewCategory(inputValue);
+
+    e.target.value = '';
+  };
+
+  return (
+    <>
+      <CategoryGuide isOpen={isOpen} categoryErrorMessage={categoryInputErrorMessage} />
+      <Dropdown
+        options={options}
+        isOpen={isOpen}
+        toggleDropdown={toggleDropdown}
+        currentValue={currentValue}
+        handleCurrentValue={handleCurrentValue}
+        getOptionLabel={getOptionLabel}
+        dropdownRef={dropdownRef}
+        replaceChildrenWhenIsOpen={
+          <NewCategoryInput
+            value={categoryInputValue}
+            onChange={handleCategoryInputChange}
+            onEnterDown={handleNewCategory}
+            isPending={isPending}
+          />
+        }
+      />
+    </>
+  );
+};
+
+export default CategoryDropdown;