From 0f72be34fd4aa62d1ec1f314fe29a5e682500728 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=ED=97=A4=EC=9D=B8?=
<157036488+Hain-tain@users.noreply.github.com>
Date: Tue, 17 Dec 2024 12:41:09 +0900
Subject: [PATCH 1/7] =?UTF-8?q?=EC=B5=9C=EA=B7=BC=EC=88=9C=EC=9D=84=20?=
=?UTF-8?q?=EC=B5=9C=EA=B7=BC=20=EC=88=98=EC=A0=95=EC=88=9C=EA=B3=BC=20?=
=?UTF-8?q?=EC=B5=9C=EA=B7=BC=20=EC=83=9D=EC=84=B1=EC=88=9C=EC=9C=BC?=
=?UTF-8?q?=EB=A1=9C=20=EB=82=98=EB=88=84=EC=96=B4=20=EA=B5=AC=ED=98=84=20?=
=?UTF-8?q?(#961)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
frontend/src/api/index.ts | 3 ---
frontend/src/api/templates.ts | 21 +-----------------
.../components/TemplateCard/TemplateCard.tsx | 4 ++--
frontend/src/hooks/useQueryParams.ts | 2 +-
frontend/src/mocks/handlers/template.ts | 12 ++++++++--
frontend/src/models/templates/.gitkeep | 0
frontend/src/models/templates/index.ts | 22 +++++++++++++++++++
.../pages/MyTemplatesPage/MyTemplatePage.tsx | 4 ++--
.../TemplateExplorePage.tsx | 4 ++--
.../templates/useTemplateExploreQuery.ts | 3 ++-
.../templates/useTemplateListQuery.spec.tsx | 10 ++++-----
.../queries/templates/useTemplateListQuery.ts | 3 ++-
.../src/service/getSortingOptionByValue.ts | 2 +-
frontend/src/types/api.ts | 3 ++-
14 files changed, 52 insertions(+), 41 deletions(-)
delete mode 100644 frontend/src/models/templates/.gitkeep
create mode 100644 frontend/src/models/templates/index.ts
diff --git a/frontend/src/api/index.ts b/frontend/src/api/index.ts
index 613848279..44bc59bf3 100644
--- a/frontend/src/api/index.ts
+++ b/frontend/src/api/index.ts
@@ -1,9 +1,6 @@
export { API_URL } from './config';
export { QUERY_KEY } from './queryKeys';
export {
- PAGE_SIZE,
- SORTING_OPTIONS,
- DEFAULT_SORTING_OPTION,
getTemplateList,
getTemplateExplore,
getTemplate,
diff --git a/frontend/src/api/templates.ts b/frontend/src/api/templates.ts
index 787f09407..099b94b4b 100644
--- a/frontend/src/api/templates.ts
+++ b/frontend/src/api/templates.ts
@@ -1,26 +1,7 @@
import { apiClient } from '@/api/config';
+import { DEFAULT_SORTING_OPTION, PAGE_SIZE } from '@/models/templates';
import { END_POINTS } from '@/routes';
import type { TemplateRequest, TemplateEditRequest, TemplateUploadRequest, TemplateListRequest } from '@/types';
-import { SortingOption } from '@/types';
-
-export const PAGE_SIZE = 20;
-
-export const SORTING_OPTIONS: SortingOption[] = [
- {
- key: 'modifiedAt,desc',
- value: '최근 순',
- },
- {
- key: 'modifiedAt,asc',
- value: '오래된 순',
- },
- {
- key: 'likesCount,desc',
- value: '좋아요 순',
- },
-];
-
-export const DEFAULT_SORTING_OPTION = SORTING_OPTIONS[0];
export const getTemplateList = async ({
keyword,
diff --git a/frontend/src/components/TemplateCard/TemplateCard.tsx b/frontend/src/components/TemplateCard/TemplateCard.tsx
index 4071fa7a8..dc280186c 100644
--- a/frontend/src/components/TemplateCard/TemplateCard.tsx
+++ b/frontend/src/components/TemplateCard/TemplateCard.tsx
@@ -17,7 +17,7 @@ interface Props {
}
const TemplateCard = ({ template }: Props) => {
- const { title, description, thumbnail, tags, modifiedAt, member, visibility } = template;
+ const { title, description, thumbnail, tags, createdAt, member, visibility } = template;
const [showAllTagList, toggleShowAllTagList] = useToggle();
const isPrivate = visibility === VISIBILITY_PRIVATE;
@@ -49,7 +49,7 @@ const TemplateCard = ({ template }: Props) => {
- {formatRelativeTime(modifiedAt)}
+ {formatRelativeTime(createdAt)}
diff --git a/frontend/src/hooks/useQueryParams.ts b/frontend/src/hooks/useQueryParams.ts
index 47173fe9f..48732c49b 100644
--- a/frontend/src/hooks/useQueryParams.ts
+++ b/frontend/src/hooks/useQueryParams.ts
@@ -1,7 +1,7 @@
import { useCallback } from 'react';
import { useSearchParams } from 'react-router-dom';
-import { DEFAULT_SORTING_OPTION } from '@/api';
+import { DEFAULT_SORTING_OPTION } from '@/models/templates';
interface FilterState {
category: number;
diff --git a/frontend/src/mocks/handlers/template.ts b/frontend/src/mocks/handlers/template.ts
index 5baac3ec5..8829d4b78 100644
--- a/frontend/src/mocks/handlers/template.ts
+++ b/frontend/src/mocks/handlers/template.ts
@@ -37,14 +37,22 @@ export const templateHandlers = [
}
switch (sort) {
- case 'modifiedAt,asc':
- filteredTemplates.sort((a, b) => new Date(a.modifiedAt).getTime() - new Date(b.modifiedAt).getTime());
+ case 'createdAt,asc':
+ filteredTemplates.sort((a, b) => new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime());
+ break;
+
+ case 'createdAt,desc':
+ filteredTemplates.sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime());
break;
case 'modifiedAt,desc':
filteredTemplates.sort((a, b) => new Date(b.modifiedAt).getTime() - new Date(a.modifiedAt).getTime());
break;
+ case 'likesCount,desc':
+ filteredTemplates.sort((a, b) => b.likesCount - a.likesCount);
+ break;
+
default:
break;
}
diff --git a/frontend/src/models/templates/.gitkeep b/frontend/src/models/templates/.gitkeep
deleted file mode 100644
index e69de29bb..000000000
diff --git a/frontend/src/models/templates/index.ts b/frontend/src/models/templates/index.ts
new file mode 100644
index 000000000..f43f3ea43
--- /dev/null
+++ b/frontend/src/models/templates/index.ts
@@ -0,0 +1,22 @@
+export const PAGE_SIZE = 20;
+
+export const SORTING_OPTIONS = [
+ {
+ key: 'createdAt,desc',
+ value: '최근 생성 순',
+ },
+ {
+ key: 'modifiedAt,desc',
+ value: '최근 수정 순',
+ },
+ {
+ key: 'createdAt,asc',
+ value: '오래된 순',
+ },
+ {
+ key: 'likesCount,desc',
+ value: '좋아요 순',
+ },
+] as const;
+
+export const DEFAULT_SORTING_OPTION = SORTING_OPTIONS[0];
diff --git a/frontend/src/pages/MyTemplatesPage/MyTemplatePage.tsx b/frontend/src/pages/MyTemplatesPage/MyTemplatePage.tsx
index 820ae6e16..572e4dcb4 100644
--- a/frontend/src/pages/MyTemplatesPage/MyTemplatePage.tsx
+++ b/frontend/src/pages/MyTemplatesPage/MyTemplatePage.tsx
@@ -1,10 +1,10 @@
import { Suspense } from 'react';
import { useParams } from 'react-router-dom';
-import { SORTING_OPTIONS } from '@/api';
import { SearchIcon } from '@/assets/images';
import { Flex, Input, PagingButtons, Dropdown, Heading } from '@/components';
import { useAuth } from '@/hooks/authentication';
+import { SORTING_OPTIONS } from '@/models/templates';
import {
CategoryListSection,
CategoryListSectionSkeleton,
@@ -105,7 +105,7 @@ const MyTemplatePage = () => {
option.value}
/>
diff --git a/frontend/src/pages/TemplateExplorePage/TemplateExplorePage.tsx b/frontend/src/pages/TemplateExplorePage/TemplateExplorePage.tsx
index 22b93c8ab..fb294548f 100644
--- a/frontend/src/pages/TemplateExplorePage/TemplateExplorePage.tsx
+++ b/frontend/src/pages/TemplateExplorePage/TemplateExplorePage.tsx
@@ -2,7 +2,6 @@ import { QueryErrorResetBoundary } from '@tanstack/react-query';
import { useEffect } from 'react';
import { ErrorBoundary } from 'react-error-boundary';
-import { SORTING_OPTIONS } from '@/api';
import { SearchIcon } from '@/assets/images';
import {
Dropdown,
@@ -16,6 +15,7 @@ import {
TemplateCard,
} from '@/components';
import { useDropdown, useInput, useQueryParams, useWindowWidth } from '@/hooks';
+import { SORTING_OPTIONS } from '@/models/templates';
import { TemplateListSectionLoading } from '@/pages/MyTemplatesPage/components';
import { HotTopicCarousel } from '@/pages/TemplateExplorePage/components';
import { useHotTopic } from '@/pages/TemplateExplorePage/hooks';
@@ -100,7 +100,7 @@ const TemplateExplorePage = () => {
option.value}
/>
diff --git a/frontend/src/queries/templates/useTemplateExploreQuery.ts b/frontend/src/queries/templates/useTemplateExploreQuery.ts
index 046dd3957..f93b412d4 100644
--- a/frontend/src/queries/templates/useTemplateExploreQuery.ts
+++ b/frontend/src/queries/templates/useTemplateExploreQuery.ts
@@ -1,7 +1,8 @@
import { keepPreviousData, useQuery } from '@tanstack/react-query';
-import { PAGE_SIZE, QUERY_KEY, DEFAULT_SORTING_OPTION, getTemplateExplore } from '@/api';
+import { QUERY_KEY, getTemplateExplore } from '@/api';
import { ApiError } from '@/api/Error';
+import { DEFAULT_SORTING_OPTION, PAGE_SIZE } from '@/models/templates';
import type { SortingKey, TemplateListResponse } from '@/types';
interface Props {
diff --git a/frontend/src/queries/templates/useTemplateListQuery.spec.tsx b/frontend/src/queries/templates/useTemplateListQuery.spec.tsx
index 3880ae6d1..498d7ae01 100644
--- a/frontend/src/queries/templates/useTemplateListQuery.spec.tsx
+++ b/frontend/src/queries/templates/useTemplateListQuery.spec.tsx
@@ -1,9 +1,9 @@
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { renderHook, waitFor } from '@testing-library/react';
-import { DEFAULT_SORTING_OPTION, PAGE_SIZE } from '@/api';
import { AuthProvider } from '@/contexts';
import { templates as mockTemplates } from '@/mocks/fixtures/templateList.json';
+import { DEFAULT_SORTING_OPTION, PAGE_SIZE } from '@/models/templates';
import { useTemplateListQuery } from './useTemplateListQuery';
@@ -43,7 +43,7 @@ describe('useTemplateListQuery', () => {
keyword: 'console.log',
categoryId: undefined,
tagIds: [],
- sort: 'modifiedAt,desc',
+ sort: 'createdAt,desc',
page: 1,
size: 20,
}),
@@ -70,7 +70,7 @@ describe('useTemplateListQuery', () => {
keyword: '',
categoryId: 1,
tagIds: [],
- sort: 'modifiedAt,desc',
+ sort: 'createdAt,desc',
page: 1,
size: 20,
}),
@@ -89,7 +89,7 @@ describe('useTemplateListQuery', () => {
keyword: '',
categoryId: undefined,
tagIds: [3, 5],
- sort: 'modifiedAt,desc',
+ sort: 'createdAt,desc',
page: 1,
size: 20,
}),
@@ -114,7 +114,7 @@ describe('useTemplateListQuery', () => {
keyword: '',
categoryId: undefined,
tagIds: [],
- sort: 'modifiedAt,desc',
+ sort: 'createdAt,desc',
page: 2,
size: 20,
}),
diff --git a/frontend/src/queries/templates/useTemplateListQuery.ts b/frontend/src/queries/templates/useTemplateListQuery.ts
index e8eeacc73..a2b967ff5 100644
--- a/frontend/src/queries/templates/useTemplateListQuery.ts
+++ b/frontend/src/queries/templates/useTemplateListQuery.ts
@@ -1,7 +1,8 @@
import { keepPreviousData, useQuery } from '@tanstack/react-query';
-import { PAGE_SIZE, QUERY_KEY, getTemplateList, DEFAULT_SORTING_OPTION } from '@/api';
+import { QUERY_KEY, getTemplateList } from '@/api';
import { useAuth } from '@/hooks/authentication';
+import { DEFAULT_SORTING_OPTION, PAGE_SIZE } from '@/models/templates';
import type { TemplateListResponse, SortingKey } from '@/types';
interface Props {
diff --git a/frontend/src/service/getSortingOptionByValue.ts b/frontend/src/service/getSortingOptionByValue.ts
index e97879087..d3f689902 100644
--- a/frontend/src/service/getSortingOptionByValue.ts
+++ b/frontend/src/service/getSortingOptionByValue.ts
@@ -1,4 +1,4 @@
-import { DEFAULT_SORTING_OPTION, SORTING_OPTIONS } from '@/api';
+import { DEFAULT_SORTING_OPTION, SORTING_OPTIONS } from '@/models/templates';
export const getSortingOptionByValue = (value: string) =>
SORTING_OPTIONS.find((el) => el.value === value) || DEFAULT_SORTING_OPTION;
diff --git a/frontend/src/types/api.ts b/frontend/src/types/api.ts
index d6dfad7f8..9ca57781d 100644
--- a/frontend/src/types/api.ts
+++ b/frontend/src/types/api.ts
@@ -1,3 +1,4 @@
+import { SORTING_OPTIONS } from '@/models/templates';
import { Category, SourceCodes, Tag, TemplateListItem, TemplateVisibility } from '@/types';
export interface TemplateListResponse {
@@ -75,6 +76,6 @@ export interface GetMemberNameResponse {
name: string;
}
-export type SortingKey = 'modifiedAt,asc' | 'modifiedAt,desc' | 'likesCount,desc';
+export type SortingKey = (typeof SORTING_OPTIONS)[number]['key'];
export type SortingOption = { key: SortingKey; value: string };
From 093bf5af11137fc651363e0f659eb42b18e1e29d Mon Sep 17 00:00:00 2001
From: Hailey <74346290+healim01@users.noreply.github.com>
Date: Wed, 18 Dec 2024 18:29:42 +0900
Subject: [PATCH 2/7] =?UTF-8?q?=ED=83=80=EC=9D=B8=EC=9D=98=20=ED=85=9C?=
=?UTF-8?q?=ED=94=8C=EB=A6=BF=20=ED=8E=98=EC=9D=B4=EC=A7=80=EC=97=90?=
=?UTF-8?q?=EC=84=9C=20=EB=85=B8=EC=B6=9C=EB=90=9C=20=EC=97=85=EB=A1=9C?=
=?UTF-8?q?=EB=93=9C=20=EB=B2=84=ED=8A=BC=20=EC=98=A4=EB=A5=98=20=EC=88=98?=
=?UTF-8?q?=EC=A0=95=20(#974)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
frontend/src/index.tsx | 2 +-
frontend/src/mocks/handlers/category.ts | 4 +++-
frontend/src/pages/MyTemplatesPage/MyTemplatePage.tsx | 3 ++-
.../components/TemplateListSection/TemplateListSection.tsx | 6 ++++--
4 files changed, 10 insertions(+), 5 deletions(-)
diff --git a/frontend/src/index.tsx b/frontend/src/index.tsx
index 880cbfe6a..fdb292d77 100644
--- a/frontend/src/index.tsx
+++ b/frontend/src/index.tsx
@@ -35,7 +35,7 @@ const enableMocking = async () => {
return;
}
- // const { worker } = await import('./mocks/browser');
+ // const { worker } = await import('@/mocks/settings/browser');
// await worker.start();
};
diff --git a/frontend/src/mocks/handlers/category.ts b/frontend/src/mocks/handlers/category.ts
index 95a7137f7..c5d95c7db 100644
--- a/frontend/src/mocks/handlers/category.ts
+++ b/frontend/src/mocks/handlers/category.ts
@@ -1,11 +1,13 @@
import { http } from 'msw';
import { API_URL } from '@/api';
-import { categories as mockCategoryList } from '@/mocks/fixtures/categoryList.json';
+import categories from '@/mocks/fixtures/categoryList.json';
import { END_POINTS } from '@/routes';
import { Category } from '@/types';
import { mockResponse } from '@/utils/mockResponse';
+const mockCategoryList = [...categories.categories];
+
export const categoryHandlers = [
http.get(`${API_URL}${END_POINTS.CATEGORIES}`, () =>
mockResponse({ status: 200, body: { categories: mockCategoryList } }),
diff --git a/frontend/src/pages/MyTemplatesPage/MyTemplatePage.tsx b/frontend/src/pages/MyTemplatesPage/MyTemplatePage.tsx
index 572e4dcb4..345b33b1a 100644
--- a/frontend/src/pages/MyTemplatesPage/MyTemplatePage.tsx
+++ b/frontend/src/pages/MyTemplatesPage/MyTemplatePage.tsx
@@ -1,10 +1,10 @@
import { Suspense } from 'react';
import { useParams } from 'react-router-dom';
+import { SORTING_OPTIONS } from '@/models/templates';
import { SearchIcon } from '@/assets/images';
import { Flex, Input, PagingButtons, Dropdown, Heading } from '@/components';
import { useAuth } from '@/hooks/authentication';
-import { SORTING_OPTIONS } from '@/models/templates';
import {
CategoryListSection,
CategoryListSectionSkeleton,
@@ -126,6 +126,7 @@ const MyTemplatePage = () => {
templateList={templateList}
isSearching={inputKeyword !== '' || inputKeyword !== searchedKeyword}
isEditMode={isEditMode}
+ isMine={isMine}
selectedList={selectedList}
setSelectedList={setSelectedList}
/>
diff --git a/frontend/src/pages/MyTemplatesPage/components/TemplateListSection/TemplateListSection.tsx b/frontend/src/pages/MyTemplatesPage/components/TemplateListSection/TemplateListSection.tsx
index 777750192..e46a68545 100644
--- a/frontend/src/pages/MyTemplatesPage/components/TemplateListSection/TemplateListSection.tsx
+++ b/frontend/src/pages/MyTemplatesPage/components/TemplateListSection/TemplateListSection.tsx
@@ -7,17 +7,19 @@ interface Props {
templateList: TemplateListItem[];
isEditMode: boolean;
isSearching: boolean;
+ isMine: boolean;
selectedList: number[];
setSelectedList: React.Dispatch>;
}
const getGridCols = (windowWidth: number) => (windowWidth <= 1024 ? 1 : 2);
-const TemplateListSection = ({ templateList, isSearching, isEditMode, selectedList, setSelectedList }: Props) => {
+const TemplateListSection = ({ templateList, isSearching, isEditMode, isMine, selectedList, setSelectedList }: Props) => {
const windowWidth = useWindowWidth();
if (templateList.length === 0) {
- return isSearching ? 검색 결과가 없습니다. : ;
+ if (!isMine || isSearching) return 검색 결과가 없습니다.
+ return ;
}
return (
From 591d843fbb6dc2e8b5a6582755f537c40c85901f Mon Sep 17 00:00:00 2001
From: Hailey <74346290+healim01@users.noreply.github.com>
Date: Wed, 18 Dec 2024 20:34:23 +0900
Subject: [PATCH 3/7] =?UTF-8?q?msw=20=ED=95=B8=EB=93=A4=EB=9F=AC=20?=
=?UTF-8?q?=EC=B6=94=EA=B0=80=20=EB=B0=8F=20msw=20=EC=8B=A4=ED=96=89=20?=
=?UTF-8?q?=EC=8A=A4=ED=81=AC=EB=A6=BD=ED=8A=B8=20=EC=B6=94=EA=B0=80=20(#9?=
=?UTF-8?q?76)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
Co-authored-by: MYONG JAEWI <78201530+Jaymyong66@users.noreply.github.com>
---
frontend/package.json | 1 +
frontend/src/index.tsx | 6 +++---
frontend/src/mocks/handlers/authentication.ts | 3 ---
frontend/src/mocks/handlers/like.ts | 12 ++++++++++++
frontend/src/mocks/handlers/template.ts | 2 +-
frontend/src/utils/mockResponse.ts | 4 ++++
frontend/webpack.dev.js | 5 ++++-
7 files changed, 25 insertions(+), 8 deletions(-)
diff --git a/frontend/package.json b/frontend/package.json
index f9fb804fb..ae8acc8e0 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -7,6 +7,7 @@
"test": "jest",
"e2e": "playwright test",
"e2e:ui": "playwright test --ui",
+ "msw": "APP_ENV=msw webpack-dev-server --open --config webpack.dev.js",
"dev": "webpack-dev-server --config webpack.dev.js --open",
"tsc": "tsc --noEmit",
"build": "webpack --mode production --config webpack.prod.js",
diff --git a/frontend/src/index.tsx b/frontend/src/index.tsx
index fdb292d77..ef1b84df2 100644
--- a/frontend/src/index.tsx
+++ b/frontend/src/index.tsx
@@ -31,13 +31,13 @@ Sentry.init({
const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
const enableMocking = async () => {
- if (process.env.NODE_ENV !== 'development') {
+ if (process.env.APP_ENV !== 'msw') {
return;
}
- // const { worker } = await import('@/mocks/settings/browser');
+ const { worker } = await import('@/mocks/settings/browser');
- // await worker.start();
+ await worker.start();
};
enableMocking().then(() => {
diff --git a/frontend/src/mocks/handlers/authentication.ts b/frontend/src/mocks/handlers/authentication.ts
index 22c1e86bc..b14bf628e 100644
--- a/frontend/src/mocks/handlers/authentication.ts
+++ b/frontend/src/mocks/handlers/authentication.ts
@@ -21,9 +21,6 @@ export const authenticationHandler = [
http.post(`${API_URL}${END_POINTS.LOGOUT}`, () =>
mockResponse({
status: 204,
- body: {
- statusText: 'AUTHORIZED',
- },
}),
),
diff --git a/frontend/src/mocks/handlers/like.ts b/frontend/src/mocks/handlers/like.ts
index b6c210e0f..785a93087 100644
--- a/frontend/src/mocks/handlers/like.ts
+++ b/frontend/src/mocks/handlers/like.ts
@@ -6,6 +6,18 @@ import { END_POINTS } from '@/routes';
import { mockResponse } from '@/utils/mockResponse';
export const likeHandlers = [
+ http.get(`${API_URL}${END_POINTS.LIKED_TEMPLATES}`, () => {
+ const template = mockTemplateList.templates.filter((temp) => temp.isLiked === true);
+
+ return mockResponse({
+ status: 200,
+ body: {
+ paginationSizes: 1,
+ templates: template
+ }
+ })
+ }),
+
http.post(`${API_URL}${END_POINTS.LIKES}/:templateId`, (req) => {
const { templateId } = req.params;
const template = mockTemplateList.templates.find((temp) => temp.id.toString() === templateId);
diff --git a/frontend/src/mocks/handlers/template.ts b/frontend/src/mocks/handlers/template.ts
index 8829d4b78..29df88b87 100644
--- a/frontend/src/mocks/handlers/template.ts
+++ b/frontend/src/mocks/handlers/template.ts
@@ -92,7 +92,7 @@ export const templateHandlers = [
});
}),
- http.post(`${API_URL}${END_POINTS.TEMPLATES_EXPLORE}`, async () => mockResponse({ status: 201 })),
+ http.post(`${API_URL}${END_POINTS.TEMPLATES_EXPLORE}`, async () => mockResponse({ status: 201, headers: { 'Location': '/templates/1' } })),
http.post(`${API_URL}${END_POINTS.TEMPLATES_EXPLORE}/:id`, async () => mockResponse({ status: 200 })),
diff --git a/frontend/src/utils/mockResponse.ts b/frontend/src/utils/mockResponse.ts
index a0b2007fd..6be16f414 100644
--- a/frontend/src/utils/mockResponse.ts
+++ b/frontend/src/utils/mockResponse.ts
@@ -10,6 +10,10 @@ interface Props {
}
export const mockResponse = ({ status, body, errorBody, headers }: Props) => {
+ if (status === 204) {
+ return new HttpResponse(null, { status, headers });
+ }
+
if (status >= 200 && status <= 299) {
return HttpResponse.json({ ...body }, { status, headers });
}
diff --git a/frontend/webpack.dev.js b/frontend/webpack.dev.js
index 37bc1fe0b..ada2a1b6f 100644
--- a/frontend/webpack.dev.js
+++ b/frontend/webpack.dev.js
@@ -4,6 +4,9 @@ const Dotenv = require('dotenv-webpack');
const common = require('./webpack.common.js');
+const apiEnv = process.env.APP_ENV ?? 'development';
+const envFilePath = `.env.${apiEnv}`;
+
module.exports = () => {
return merge(common, {
mode: 'development',
@@ -14,7 +17,7 @@ module.exports = () => {
plugins: [
new HotModuleReplacementPlugin(),
new Dotenv({
- path: './.env.development',
+ path: `./${envFilePath}`,
}),
],
module: {
From 5bf82966cc8e31f92b68d8b37cb073a5c64416da Mon Sep 17 00:00:00 2001
From: Hailey <74346290+healim01@users.noreply.github.com>
Date: Sun, 22 Dec 2024 00:48:18 +0900
Subject: [PATCH 4/7] =?UTF-8?q?MyTemplate=20->=20MemberTemplate=20?=
=?UTF-8?q?=EC=9C=BC=EB=A1=9C=20=EB=AA=85=EC=B9=AD=20=EB=B3=80=EA=B2=BD=20?=
=?UTF-8?q?=20(#982)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../PagingButtons/PagingButtons.tsx | 4 ++--
.../MemberTemplatePage.style.ts} | 2 +-
.../MemberTemplatePage.tsx} | 20 +++++++++----------
.../CategoryEditModal.style.ts | 0
.../CategoryEditModal/CategoryEditModal.tsx | 0
.../CategoryFilterMenu.stories.tsx | 0
.../CategoryFilterMenu.style.ts | 0
.../CategoryFilterMenu/CategoryFilterMenu.tsx | 2 +-
.../CategoryListSection.style.ts | 0
.../CategoryListSection.tsx | 2 +-
.../CategoryListSectionSkeleton.tsx | 0
.../ConfirmDeleteModal/ConfirmDeleteModal.tsx | 0
.../NewTemplateButton.style.ts | 0
.../NewTemplateButton/NewTemplateButton.tsx | 0
.../TagFilterMenu/TagFilterMenu.stories.tsx | 0
.../TagFilterMenu/TagFilterMenu.style.ts | 0
.../TagFilterMenu/TagFilterMenu.tsx | 0
.../TagListSection/TagListSection.tsx | 2 +-
.../TagListSection/TagListSectionSkeleton.tsx | 0
.../TemplateDeleteSelection.tsx | 2 +-
.../TemplateGrid/TemplateGrid.style.ts | 0
.../components/TemplateGrid/TemplateGrid.tsx | 0
.../TemplateListSection.tsx | 13 +++++++++---
.../TemplateListSectionLoading.style.ts | 0
.../TemplateListSectionLoading.tsx | 0
.../components/TopBanner/TopBanner.style.ts | 0
.../components/TopBanner/TopBanner.tsx | 0
.../components/index.ts | 0
.../hooks/index.ts | 0
.../hooks/useFilteredTemplateList.ts | 0
.../hooks/useSelectAndDeleteTemplateList.ts | 0
.../MyLikedTemplatePage.tsx | 2 +-
.../TemplateExplorePage.tsx | 2 +-
frontend/src/pages/index.ts | 2 +-
frontend/src/routes/router.tsx | 4 ++--
frontend/src/service/amplitude/track.ts | 2 +-
36 files changed, 33 insertions(+), 26 deletions(-)
rename frontend/src/pages/{MyTemplatesPage/MyTemplatePage.style.ts => MemberTemplatePage/MemberTemplatePage.style.ts} (94%)
rename frontend/src/pages/{MyTemplatesPage/MyTemplatePage.tsx => MemberTemplatePage/MemberTemplatePage.tsx} (92%)
rename frontend/src/pages/{MyTemplatesPage => MemberTemplatePage}/components/CategoryEditModal/CategoryEditModal.style.ts (100%)
rename frontend/src/pages/{MyTemplatesPage => MemberTemplatePage}/components/CategoryEditModal/CategoryEditModal.tsx (100%)
rename frontend/src/pages/{MyTemplatesPage => MemberTemplatePage}/components/CategoryFilterMenu/CategoryFilterMenu.stories.tsx (100%)
rename frontend/src/pages/{MyTemplatesPage => MemberTemplatePage}/components/CategoryFilterMenu/CategoryFilterMenu.style.ts (100%)
rename frontend/src/pages/{MyTemplatesPage => MemberTemplatePage}/components/CategoryFilterMenu/CategoryFilterMenu.tsx (98%)
rename frontend/src/pages/{MyTemplatesPage => MemberTemplatePage}/components/CategoryListSection/CategoryListSection.style.ts (100%)
rename frontend/src/pages/{MyTemplatesPage => MemberTemplatePage}/components/CategoryListSection/CategoryListSection.tsx (89%)
rename frontend/src/pages/{MyTemplatesPage => MemberTemplatePage}/components/CategoryListSection/CategoryListSectionSkeleton.tsx (100%)
rename frontend/src/pages/{MyTemplatesPage => MemberTemplatePage}/components/ConfirmDeleteModal/ConfirmDeleteModal.tsx (100%)
rename frontend/src/pages/{MyTemplatesPage => MemberTemplatePage}/components/NewTemplateButton/NewTemplateButton.style.ts (100%)
rename frontend/src/pages/{MyTemplatesPage => MemberTemplatePage}/components/NewTemplateButton/NewTemplateButton.tsx (100%)
rename frontend/src/pages/{MyTemplatesPage => MemberTemplatePage}/components/TagFilterMenu/TagFilterMenu.stories.tsx (100%)
rename frontend/src/pages/{MyTemplatesPage => MemberTemplatePage}/components/TagFilterMenu/TagFilterMenu.style.ts (100%)
rename frontend/src/pages/{MyTemplatesPage => MemberTemplatePage}/components/TagFilterMenu/TagFilterMenu.tsx (100%)
rename frontend/src/pages/{MyTemplatesPage => MemberTemplatePage}/components/TagListSection/TagListSection.tsx (89%)
rename frontend/src/pages/{MyTemplatesPage => MemberTemplatePage}/components/TagListSection/TagListSectionSkeleton.tsx (100%)
rename frontend/src/pages/{MyTemplatesPage => MemberTemplatePage}/components/TemplateDeleteSelection/TemplateDeleteSelection.tsx (95%)
rename frontend/src/pages/{MyTemplatesPage => MemberTemplatePage}/components/TemplateGrid/TemplateGrid.style.ts (100%)
rename frontend/src/pages/{MyTemplatesPage => MemberTemplatePage}/components/TemplateGrid/TemplateGrid.tsx (100%)
rename frontend/src/pages/{MyTemplatesPage => MemberTemplatePage}/components/TemplateListSection/TemplateListSection.tsx (77%)
rename frontend/src/pages/{MyTemplatesPage => MemberTemplatePage}/components/TemplateListSection/TemplateListSectionLoading.style.ts (100%)
rename frontend/src/pages/{MyTemplatesPage => MemberTemplatePage}/components/TemplateListSection/TemplateListSectionLoading.tsx (100%)
rename frontend/src/pages/{MyTemplatesPage => MemberTemplatePage}/components/TopBanner/TopBanner.style.ts (100%)
rename frontend/src/pages/{MyTemplatesPage => MemberTemplatePage}/components/TopBanner/TopBanner.tsx (100%)
rename frontend/src/pages/{MyTemplatesPage => MemberTemplatePage}/components/index.ts (100%)
rename frontend/src/pages/{MyTemplatesPage => MemberTemplatePage}/hooks/index.ts (100%)
rename frontend/src/pages/{MyTemplatesPage => MemberTemplatePage}/hooks/useFilteredTemplateList.ts (100%)
rename frontend/src/pages/{MyTemplatesPage => MemberTemplatePage}/hooks/useSelectAndDeleteTemplateList.ts (100%)
diff --git a/frontend/src/components/PagingButtons/PagingButtons.tsx b/frontend/src/components/PagingButtons/PagingButtons.tsx
index 6ef473830..33add01d1 100644
--- a/frontend/src/components/PagingButtons/PagingButtons.tsx
+++ b/frontend/src/components/PagingButtons/PagingButtons.tsx
@@ -1,5 +1,5 @@
import { Text } from '@/components';
-import { trackMyTemplatePaging } from '@/service/amplitude/track';
+import { trackMemberTemplatePaging } from '@/service/amplitude/track';
import { theme } from '@/style/theme';
import * as S from './PagingButtons.style';
@@ -19,7 +19,7 @@ const PagingButtons = ({ currentPage, paginationSizes, onPageChange }: Props) =>
};
const handlePagingClick = (page: number, label: string) => {
- trackMyTemplatePaging({ page, label });
+ trackMemberTemplatePaging({ page, label });
onPageChange(page);
};
diff --git a/frontend/src/pages/MyTemplatesPage/MyTemplatePage.style.ts b/frontend/src/pages/MemberTemplatePage/MemberTemplatePage.style.ts
similarity index 94%
rename from frontend/src/pages/MyTemplatesPage/MyTemplatePage.style.ts
rename to frontend/src/pages/MemberTemplatePage/MemberTemplatePage.style.ts
index e000b9d51..e33d3ab3c 100644
--- a/frontend/src/pages/MyTemplatesPage/MyTemplatePage.style.ts
+++ b/frontend/src/pages/MemberTemplatePage/MemberTemplatePage.style.ts
@@ -3,7 +3,7 @@ import styled from '@emotion/styled';
import { Input } from '@/components';
import { theme } from '@/style/theme';
-export const MyTemplatePageContainer = styled.div`
+export const MemberTemplatePageContainer = styled.div`
display: flex;
flex-direction: column;
`;
diff --git a/frontend/src/pages/MyTemplatesPage/MyTemplatePage.tsx b/frontend/src/pages/MemberTemplatePage/MemberTemplatePage.tsx
similarity index 92%
rename from frontend/src/pages/MyTemplatesPage/MyTemplatePage.tsx
rename to frontend/src/pages/MemberTemplatePage/MemberTemplatePage.tsx
index 345b33b1a..d69fd20fe 100644
--- a/frontend/src/pages/MyTemplatesPage/MyTemplatePage.tsx
+++ b/frontend/src/pages/MemberTemplatePage/MemberTemplatePage.tsx
@@ -1,10 +1,10 @@
import { Suspense } from 'react';
import { useParams } from 'react-router-dom';
-import { SORTING_OPTIONS } from '@/models/templates';
import { SearchIcon } from '@/assets/images';
import { Flex, Input, PagingButtons, Dropdown, Heading } from '@/components';
import { useAuth } from '@/hooks/authentication';
+import { SORTING_OPTIONS } from '@/models/templates';
import {
CategoryListSection,
CategoryListSectionSkeleton,
@@ -14,19 +14,19 @@ import {
TemplateListSection,
TemplateListSectionLoading,
TopBanner,
-} from '@/pages/MyTemplatesPage/components';
-import { useFilteredTemplateList, useSelectAndDeleteTemplateList } from '@/pages/MyTemplatesPage/hooks';
+} from '@/pages/MemberTemplatePage/components';
+import { useFilteredTemplateList, useSelectAndDeleteTemplateList } from '@/pages/MemberTemplatePage/hooks';
import { useMemberNameQuery } from '@/queries/members';
import { useTrackPageViewed } from '@/service/amplitude';
-import * as S from './MyTemplatePage.style';
-
-const MyTemplatePage = () => {
- useTrackPageViewed({ eventName: '[Viewed] 내 템플릿 페이지' });
+import * as S from './MemberTemplatePage.style';
+const MemberTemplatePage = () => {
const { memberId: routeMemberId } = useParams<{ memberId: string }>();
const memberId = Number(routeMemberId);
+ useTrackPageViewed({ eventName: `[Viewed] 맴버 (ID:${memberId}) 템플릿 페이지` });
+
const {
memberInfo: { memberId: currentMemberId },
} = useAuth();
@@ -66,7 +66,7 @@ const MyTemplatePage = () => {
} = useSelectAndDeleteTemplateList({ templateList });
return (
-
+
}>
@@ -140,8 +140,8 @@ const MyTemplatePage = () => {
)}
-
+
);
};
-export default MyTemplatePage;
+export default MemberTemplatePage;
diff --git a/frontend/src/pages/MyTemplatesPage/components/CategoryEditModal/CategoryEditModal.style.ts b/frontend/src/pages/MemberTemplatePage/components/CategoryEditModal/CategoryEditModal.style.ts
similarity index 100%
rename from frontend/src/pages/MyTemplatesPage/components/CategoryEditModal/CategoryEditModal.style.ts
rename to frontend/src/pages/MemberTemplatePage/components/CategoryEditModal/CategoryEditModal.style.ts
diff --git a/frontend/src/pages/MyTemplatesPage/components/CategoryEditModal/CategoryEditModal.tsx b/frontend/src/pages/MemberTemplatePage/components/CategoryEditModal/CategoryEditModal.tsx
similarity index 100%
rename from frontend/src/pages/MyTemplatesPage/components/CategoryEditModal/CategoryEditModal.tsx
rename to frontend/src/pages/MemberTemplatePage/components/CategoryEditModal/CategoryEditModal.tsx
diff --git a/frontend/src/pages/MyTemplatesPage/components/CategoryFilterMenu/CategoryFilterMenu.stories.tsx b/frontend/src/pages/MemberTemplatePage/components/CategoryFilterMenu/CategoryFilterMenu.stories.tsx
similarity index 100%
rename from frontend/src/pages/MyTemplatesPage/components/CategoryFilterMenu/CategoryFilterMenu.stories.tsx
rename to frontend/src/pages/MemberTemplatePage/components/CategoryFilterMenu/CategoryFilterMenu.stories.tsx
diff --git a/frontend/src/pages/MyTemplatesPage/components/CategoryFilterMenu/CategoryFilterMenu.style.ts b/frontend/src/pages/MemberTemplatePage/components/CategoryFilterMenu/CategoryFilterMenu.style.ts
similarity index 100%
rename from frontend/src/pages/MyTemplatesPage/components/CategoryFilterMenu/CategoryFilterMenu.style.ts
rename to frontend/src/pages/MemberTemplatePage/components/CategoryFilterMenu/CategoryFilterMenu.style.ts
diff --git a/frontend/src/pages/MyTemplatesPage/components/CategoryFilterMenu/CategoryFilterMenu.tsx b/frontend/src/pages/MemberTemplatePage/components/CategoryFilterMenu/CategoryFilterMenu.tsx
similarity index 98%
rename from frontend/src/pages/MyTemplatesPage/components/CategoryFilterMenu/CategoryFilterMenu.tsx
rename to frontend/src/pages/MemberTemplatePage/components/CategoryFilterMenu/CategoryFilterMenu.tsx
index 2d6cda5c0..55200604f 100644
--- a/frontend/src/pages/MyTemplatesPage/components/CategoryFilterMenu/CategoryFilterMenu.tsx
+++ b/frontend/src/pages/MemberTemplatePage/components/CategoryFilterMenu/CategoryFilterMenu.tsx
@@ -4,7 +4,7 @@ import { BooksIcon, Chevron2Icon, SettingIcon } from '@/assets/images';
import { Text } from '@/components';
import { useToggle, useWindowWidth } from '@/hooks';
import { useAuth } from '@/hooks/authentication';
-import { CategoryEditModal } from '@/pages/MyTemplatesPage/components';
+import { CategoryEditModal } from '@/pages/MemberTemplatePage/components';
import { ICON_SIZE } from '@/style/styleConstants';
import { theme } from '@/style/theme';
import type { Category } from '@/types';
diff --git a/frontend/src/pages/MyTemplatesPage/components/CategoryListSection/CategoryListSection.style.ts b/frontend/src/pages/MemberTemplatePage/components/CategoryListSection/CategoryListSection.style.ts
similarity index 100%
rename from frontend/src/pages/MyTemplatesPage/components/CategoryListSection/CategoryListSection.style.ts
rename to frontend/src/pages/MemberTemplatePage/components/CategoryListSection/CategoryListSection.style.ts
diff --git a/frontend/src/pages/MyTemplatesPage/components/CategoryListSection/CategoryListSection.tsx b/frontend/src/pages/MemberTemplatePage/components/CategoryListSection/CategoryListSection.tsx
similarity index 89%
rename from frontend/src/pages/MyTemplatesPage/components/CategoryListSection/CategoryListSection.tsx
rename to frontend/src/pages/MemberTemplatePage/components/CategoryListSection/CategoryListSection.tsx
index 6153bfb1a..c5995080b 100644
--- a/frontend/src/pages/MyTemplatesPage/components/CategoryListSection/CategoryListSection.tsx
+++ b/frontend/src/pages/MemberTemplatePage/components/CategoryListSection/CategoryListSection.tsx
@@ -1,4 +1,4 @@
-import { CategoryFilterMenu } from '@/pages/MyTemplatesPage/components';
+import { CategoryFilterMenu } from '@/pages/MemberTemplatePage/components';
import { useCategoryListQuery } from '@/queries/categories';
import * as S from './CategoryListSection.style';
diff --git a/frontend/src/pages/MyTemplatesPage/components/CategoryListSection/CategoryListSectionSkeleton.tsx b/frontend/src/pages/MemberTemplatePage/components/CategoryListSection/CategoryListSectionSkeleton.tsx
similarity index 100%
rename from frontend/src/pages/MyTemplatesPage/components/CategoryListSection/CategoryListSectionSkeleton.tsx
rename to frontend/src/pages/MemberTemplatePage/components/CategoryListSection/CategoryListSectionSkeleton.tsx
diff --git a/frontend/src/pages/MyTemplatesPage/components/ConfirmDeleteModal/ConfirmDeleteModal.tsx b/frontend/src/pages/MemberTemplatePage/components/ConfirmDeleteModal/ConfirmDeleteModal.tsx
similarity index 100%
rename from frontend/src/pages/MyTemplatesPage/components/ConfirmDeleteModal/ConfirmDeleteModal.tsx
rename to frontend/src/pages/MemberTemplatePage/components/ConfirmDeleteModal/ConfirmDeleteModal.tsx
diff --git a/frontend/src/pages/MyTemplatesPage/components/NewTemplateButton/NewTemplateButton.style.ts b/frontend/src/pages/MemberTemplatePage/components/NewTemplateButton/NewTemplateButton.style.ts
similarity index 100%
rename from frontend/src/pages/MyTemplatesPage/components/NewTemplateButton/NewTemplateButton.style.ts
rename to frontend/src/pages/MemberTemplatePage/components/NewTemplateButton/NewTemplateButton.style.ts
diff --git a/frontend/src/pages/MyTemplatesPage/components/NewTemplateButton/NewTemplateButton.tsx b/frontend/src/pages/MemberTemplatePage/components/NewTemplateButton/NewTemplateButton.tsx
similarity index 100%
rename from frontend/src/pages/MyTemplatesPage/components/NewTemplateButton/NewTemplateButton.tsx
rename to frontend/src/pages/MemberTemplatePage/components/NewTemplateButton/NewTemplateButton.tsx
diff --git a/frontend/src/pages/MyTemplatesPage/components/TagFilterMenu/TagFilterMenu.stories.tsx b/frontend/src/pages/MemberTemplatePage/components/TagFilterMenu/TagFilterMenu.stories.tsx
similarity index 100%
rename from frontend/src/pages/MyTemplatesPage/components/TagFilterMenu/TagFilterMenu.stories.tsx
rename to frontend/src/pages/MemberTemplatePage/components/TagFilterMenu/TagFilterMenu.stories.tsx
diff --git a/frontend/src/pages/MyTemplatesPage/components/TagFilterMenu/TagFilterMenu.style.ts b/frontend/src/pages/MemberTemplatePage/components/TagFilterMenu/TagFilterMenu.style.ts
similarity index 100%
rename from frontend/src/pages/MyTemplatesPage/components/TagFilterMenu/TagFilterMenu.style.ts
rename to frontend/src/pages/MemberTemplatePage/components/TagFilterMenu/TagFilterMenu.style.ts
diff --git a/frontend/src/pages/MyTemplatesPage/components/TagFilterMenu/TagFilterMenu.tsx b/frontend/src/pages/MemberTemplatePage/components/TagFilterMenu/TagFilterMenu.tsx
similarity index 100%
rename from frontend/src/pages/MyTemplatesPage/components/TagFilterMenu/TagFilterMenu.tsx
rename to frontend/src/pages/MemberTemplatePage/components/TagFilterMenu/TagFilterMenu.tsx
diff --git a/frontend/src/pages/MyTemplatesPage/components/TagListSection/TagListSection.tsx b/frontend/src/pages/MemberTemplatePage/components/TagListSection/TagListSection.tsx
similarity index 89%
rename from frontend/src/pages/MyTemplatesPage/components/TagListSection/TagListSection.tsx
rename to frontend/src/pages/MemberTemplatePage/components/TagListSection/TagListSection.tsx
index 8341ff0bb..513ac3bfc 100644
--- a/frontend/src/pages/MyTemplatesPage/components/TagListSection/TagListSection.tsx
+++ b/frontend/src/pages/MemberTemplatePage/components/TagListSection/TagListSection.tsx
@@ -1,4 +1,4 @@
-import { TagFilterMenu } from '@/pages/MyTemplatesPage/components';
+import { TagFilterMenu } from '@/pages/MemberTemplatePage/components';
import { useTagListQuery } from '@/queries/tags';
interface Props {
diff --git a/frontend/src/pages/MyTemplatesPage/components/TagListSection/TagListSectionSkeleton.tsx b/frontend/src/pages/MemberTemplatePage/components/TagListSection/TagListSectionSkeleton.tsx
similarity index 100%
rename from frontend/src/pages/MyTemplatesPage/components/TagListSection/TagListSectionSkeleton.tsx
rename to frontend/src/pages/MemberTemplatePage/components/TagListSection/TagListSectionSkeleton.tsx
diff --git a/frontend/src/pages/MyTemplatesPage/components/TemplateDeleteSelection/TemplateDeleteSelection.tsx b/frontend/src/pages/MemberTemplatePage/components/TemplateDeleteSelection/TemplateDeleteSelection.tsx
similarity index 95%
rename from frontend/src/pages/MyTemplatesPage/components/TemplateDeleteSelection/TemplateDeleteSelection.tsx
rename to frontend/src/pages/MemberTemplatePage/components/TemplateDeleteSelection/TemplateDeleteSelection.tsx
index 8feb5c1de..303bf91d3 100644
--- a/frontend/src/pages/MyTemplatesPage/components/TemplateDeleteSelection/TemplateDeleteSelection.tsx
+++ b/frontend/src/pages/MemberTemplatePage/components/TemplateDeleteSelection/TemplateDeleteSelection.tsx
@@ -1,5 +1,5 @@
import { Button, Flex } from '@/components';
-import { ConfirmDeleteModal } from '@/pages/MyTemplatesPage/components';
+import { ConfirmDeleteModal } from '@/pages/MemberTemplatePage/components';
interface Props {
isEditMode: boolean;
diff --git a/frontend/src/pages/MyTemplatesPage/components/TemplateGrid/TemplateGrid.style.ts b/frontend/src/pages/MemberTemplatePage/components/TemplateGrid/TemplateGrid.style.ts
similarity index 100%
rename from frontend/src/pages/MyTemplatesPage/components/TemplateGrid/TemplateGrid.style.ts
rename to frontend/src/pages/MemberTemplatePage/components/TemplateGrid/TemplateGrid.style.ts
diff --git a/frontend/src/pages/MyTemplatesPage/components/TemplateGrid/TemplateGrid.tsx b/frontend/src/pages/MemberTemplatePage/components/TemplateGrid/TemplateGrid.tsx
similarity index 100%
rename from frontend/src/pages/MyTemplatesPage/components/TemplateGrid/TemplateGrid.tsx
rename to frontend/src/pages/MemberTemplatePage/components/TemplateGrid/TemplateGrid.tsx
diff --git a/frontend/src/pages/MyTemplatesPage/components/TemplateListSection/TemplateListSection.tsx b/frontend/src/pages/MemberTemplatePage/components/TemplateListSection/TemplateListSection.tsx
similarity index 77%
rename from frontend/src/pages/MyTemplatesPage/components/TemplateListSection/TemplateListSection.tsx
rename to frontend/src/pages/MemberTemplatePage/components/TemplateListSection/TemplateListSection.tsx
index e46a68545..e8fbbb4ba 100644
--- a/frontend/src/pages/MyTemplatesPage/components/TemplateListSection/TemplateListSection.tsx
+++ b/frontend/src/pages/MemberTemplatePage/components/TemplateListSection/TemplateListSection.tsx
@@ -1,6 +1,6 @@
import { NoResults } from '@/components';
import { useWindowWidth } from '@/hooks';
-import { NewTemplateButton, TemplateGrid } from '@/pages/MyTemplatesPage/components';
+import { NewTemplateButton, TemplateGrid } from '@/pages/MemberTemplatePage/components';
import { TemplateListItem } from '@/types';
interface Props {
@@ -14,11 +14,18 @@ interface Props {
const getGridCols = (windowWidth: number) => (windowWidth <= 1024 ? 1 : 2);
-const TemplateListSection = ({ templateList, isSearching, isEditMode, isMine, selectedList, setSelectedList }: Props) => {
+const TemplateListSection = ({
+ templateList,
+ isSearching,
+ isEditMode,
+ isMine,
+ selectedList,
+ setSelectedList,
+}: Props) => {
const windowWidth = useWindowWidth();
if (templateList.length === 0) {
- if (!isMine || isSearching) return 검색 결과가 없습니다.
+ if (!isMine || isSearching) return 검색 결과가 없습니다.;
return ;
}
diff --git a/frontend/src/pages/MyTemplatesPage/components/TemplateListSection/TemplateListSectionLoading.style.ts b/frontend/src/pages/MemberTemplatePage/components/TemplateListSection/TemplateListSectionLoading.style.ts
similarity index 100%
rename from frontend/src/pages/MyTemplatesPage/components/TemplateListSection/TemplateListSectionLoading.style.ts
rename to frontend/src/pages/MemberTemplatePage/components/TemplateListSection/TemplateListSectionLoading.style.ts
diff --git a/frontend/src/pages/MyTemplatesPage/components/TemplateListSection/TemplateListSectionLoading.tsx b/frontend/src/pages/MemberTemplatePage/components/TemplateListSection/TemplateListSectionLoading.tsx
similarity index 100%
rename from frontend/src/pages/MyTemplatesPage/components/TemplateListSection/TemplateListSectionLoading.tsx
rename to frontend/src/pages/MemberTemplatePage/components/TemplateListSection/TemplateListSectionLoading.tsx
diff --git a/frontend/src/pages/MyTemplatesPage/components/TopBanner/TopBanner.style.ts b/frontend/src/pages/MemberTemplatePage/components/TopBanner/TopBanner.style.ts
similarity index 100%
rename from frontend/src/pages/MyTemplatesPage/components/TopBanner/TopBanner.style.ts
rename to frontend/src/pages/MemberTemplatePage/components/TopBanner/TopBanner.style.ts
diff --git a/frontend/src/pages/MyTemplatesPage/components/TopBanner/TopBanner.tsx b/frontend/src/pages/MemberTemplatePage/components/TopBanner/TopBanner.tsx
similarity index 100%
rename from frontend/src/pages/MyTemplatesPage/components/TopBanner/TopBanner.tsx
rename to frontend/src/pages/MemberTemplatePage/components/TopBanner/TopBanner.tsx
diff --git a/frontend/src/pages/MyTemplatesPage/components/index.ts b/frontend/src/pages/MemberTemplatePage/components/index.ts
similarity index 100%
rename from frontend/src/pages/MyTemplatesPage/components/index.ts
rename to frontend/src/pages/MemberTemplatePage/components/index.ts
diff --git a/frontend/src/pages/MyTemplatesPage/hooks/index.ts b/frontend/src/pages/MemberTemplatePage/hooks/index.ts
similarity index 100%
rename from frontend/src/pages/MyTemplatesPage/hooks/index.ts
rename to frontend/src/pages/MemberTemplatePage/hooks/index.ts
diff --git a/frontend/src/pages/MyTemplatesPage/hooks/useFilteredTemplateList.ts b/frontend/src/pages/MemberTemplatePage/hooks/useFilteredTemplateList.ts
similarity index 100%
rename from frontend/src/pages/MyTemplatesPage/hooks/useFilteredTemplateList.ts
rename to frontend/src/pages/MemberTemplatePage/hooks/useFilteredTemplateList.ts
diff --git a/frontend/src/pages/MyTemplatesPage/hooks/useSelectAndDeleteTemplateList.ts b/frontend/src/pages/MemberTemplatePage/hooks/useSelectAndDeleteTemplateList.ts
similarity index 100%
rename from frontend/src/pages/MyTemplatesPage/hooks/useSelectAndDeleteTemplateList.ts
rename to frontend/src/pages/MemberTemplatePage/hooks/useSelectAndDeleteTemplateList.ts
diff --git a/frontend/src/pages/MyLikedTemplatePage/MyLikedTemplatePage.tsx b/frontend/src/pages/MyLikedTemplatePage/MyLikedTemplatePage.tsx
index 8c157a34c..dfbb51d59 100644
--- a/frontend/src/pages/MyLikedTemplatePage/MyLikedTemplatePage.tsx
+++ b/frontend/src/pages/MyLikedTemplatePage/MyLikedTemplatePage.tsx
@@ -4,7 +4,7 @@ import { Flex, Heading, LoadingBall, NoResults, PagingButtons, TemplateCard } fr
import { useQueryParams, useWindowWidth } from '@/hooks';
import { useAuth } from '@/hooks/authentication';
import { ForbiddenPage } from '@/pages';
-import { TemplateListSectionLoading } from '@/pages/MyTemplatesPage/components';
+import { TemplateListSectionLoading } from '@/pages/MemberTemplatePage/components';
import { useLikedTemplateListQuery } from '@/queries/templates/useLikedTemplateListQuery';
import { ROUTE_END_POINT } from '@/routes/endPoints';
import { useTrackPageViewed } from '@/service/amplitude';
diff --git a/frontend/src/pages/TemplateExplorePage/TemplateExplorePage.tsx b/frontend/src/pages/TemplateExplorePage/TemplateExplorePage.tsx
index fb294548f..e4e232f2e 100644
--- a/frontend/src/pages/TemplateExplorePage/TemplateExplorePage.tsx
+++ b/frontend/src/pages/TemplateExplorePage/TemplateExplorePage.tsx
@@ -16,7 +16,7 @@ import {
} from '@/components';
import { useDropdown, useInput, useQueryParams, useWindowWidth } from '@/hooks';
import { SORTING_OPTIONS } from '@/models/templates';
-import { TemplateListSectionLoading } from '@/pages/MyTemplatesPage/components';
+import { TemplateListSectionLoading } from '@/pages/MemberTemplatePage/components';
import { HotTopicCarousel } from '@/pages/TemplateExplorePage/components';
import { useHotTopic } from '@/pages/TemplateExplorePage/hooks';
import { useTemplateExploreQuery } from '@/queries/templates';
diff --git a/frontend/src/pages/index.ts b/frontend/src/pages/index.ts
index afa24385e..fd4a182c1 100644
--- a/frontend/src/pages/index.ts
+++ b/frontend/src/pages/index.ts
@@ -1,6 +1,6 @@
export { default as LandingPage } from './LandingPage/LandingPage';
export { default as LoginPage } from './LoginPage/LoginPage';
-export { default as MyTemplatePage } from './MyTemplatesPage/MyTemplatePage';
+export { default as MemberTemplatePage } from './MemberTemplatePage/MemberTemplatePage';
export { default as MyLikedTemplatePage } from './MyLikedTemplatePage/MyLikedTemplatePage';
export { default as NotFoundPage } from './NotFoundPage/NotFoundPage';
export { default as ForbiddenPage } from './ForbiddenPage/ForbiddenPage';
diff --git a/frontend/src/routes/router.tsx b/frontend/src/routes/router.tsx
index 534fd89ea..7429e8fd8 100644
--- a/frontend/src/routes/router.tsx
+++ b/frontend/src/routes/router.tsx
@@ -13,7 +13,7 @@ const SignupPage = lazy(() => import('@/pages/SignupPage/SignupPage'));
const LoginPage = lazy(() => import('@/pages/LoginPage/LoginPage'));
const NotFoundPage = lazy(() => import('@/pages/NotFoundPage/NotFoundPage'));
const TemplateExplorePage = lazy(() => import('@/pages/TemplateExplorePage/TemplateExplorePage'));
-const MyTemplatePage = lazy(() => import('@/pages/MyTemplatesPage/MyTemplatePage'));
+const MemberTemplatePage = lazy(() => import('@/pages/MemberTemplatePage/MemberTemplatePage'));
const MyLikedTemplatePage = lazy(() => import('@/pages/MyLikedTemplatePage/MyLikedTemplatePage'));
const router = createBrowserRouter([
@@ -26,7 +26,7 @@ const router = createBrowserRouter([
},
{
path: ROUTE_END_POINT.MEMBERS_TEMPLATES,
- element: ,
+ element: ,
},
{
path: ROUTE_END_POINT.MEMBERS_LIKED_TEMPLATES,
diff --git a/frontend/src/service/amplitude/track.ts b/frontend/src/service/amplitude/track.ts
index 89ba43840..c8ad9d34d 100644
--- a/frontend/src/service/amplitude/track.ts
+++ b/frontend/src/service/amplitude/track.ts
@@ -53,7 +53,7 @@ interface PagingButtonData {
label: string;
}
-export const trackMyTemplatePaging = ({ page, label }: PagingButtonData) => {
+export const trackMemberTemplatePaging = ({ page, label }: PagingButtonData) => {
amplitudeService.customTrack('[Click] 페이징 버튼', {
page,
label,
From 0b8e5f66867ec2ea34a50cf4145c169574c3cab5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=ED=97=A4=EC=9D=B8?=
<157036488+Hain-tain@users.noreply.github.com>
Date: Wed, 25 Dec 2024 14:38:17 +0900
Subject: [PATCH 5/7] =?UTF-8?q?=EB=AC=B8=EC=9D=98=ED=95=98=EA=B8=B0=20api?=
=?UTF-8?q?=20=EC=A0=81=EC=9A=A9=20(#983)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
frontend/src/api/contact.ts | 13 +++++++
.../src/components/ContactUs/ContactUs.tsx | 35 ++++++++-----------
frontend/src/mocks/handlers/contact.ts | 7 ++++
frontend/src/routes/endPoints.ts | 3 ++
4 files changed, 38 insertions(+), 20 deletions(-)
create mode 100644 frontend/src/api/contact.ts
create mode 100644 frontend/src/mocks/handlers/contact.ts
diff --git a/frontend/src/api/contact.ts b/frontend/src/api/contact.ts
new file mode 100644
index 000000000..46e36f632
--- /dev/null
+++ b/frontend/src/api/contact.ts
@@ -0,0 +1,13 @@
+import { END_POINTS } from '@/routes';
+
+import { apiClient } from './config';
+
+export interface ContactBody {
+ message: string;
+ email: string | null;
+ name: string | null;
+ memberId: number | null;
+}
+
+export const postContact = async (contactBody: ContactBody) =>
+ await apiClient.post(`${END_POINTS.CONTACT}`, contactBody);
diff --git a/frontend/src/components/ContactUs/ContactUs.tsx b/frontend/src/components/ContactUs/ContactUs.tsx
index 0330db0ad..e01c2f2bf 100644
--- a/frontend/src/components/ContactUs/ContactUs.tsx
+++ b/frontend/src/components/ContactUs/ContactUs.tsx
@@ -1,5 +1,6 @@
import { useState } from 'react';
+import { postContact } from '@/api/contact';
import { Button, Input, LoadingBall, Modal, Text, Textarea } from '@/components';
import { useInput, useInputWithValidate, useToggle, useToast } from '@/hooks';
import { useAuth } from '@/hooks/authentication';
@@ -23,9 +24,11 @@ const ContactUs = () => {
memberInfo: { name, memberId },
} = useAuth();
- const { successAlert } = useToast();
+ const { successAlert, failAlert } = useToast();
- const isValidContents = message.trim().length !== 0;
+ const MIN_CONTENTS_LENGTH = 10;
+ const MAX_CONTENTS_LENGTH = 10000;
+ const isValidContents = message.trim().length >= MIN_CONTENTS_LENGTH && message.length <= MAX_CONTENTS_LENGTH;
const handleSubmit = (e: React.FormEvent | React.MouseEvent) => {
e.preventDefault();
@@ -41,29 +44,20 @@ const ContactUs = () => {
setIsSending(true);
toggleModal();
- const res = await sendData();
+ const contactBody = { message, email: email || null, name: name ?? null, memberId: memberId ?? null };
- if (res) {
+ try {
+ await postContact(contactBody);
successSubmit();
- successAlert('보내기 완료! 소중한 의견 감사합니다:)');
+ } catch {
+ failAlert('문의 보내기에 실패하였습니다. 다시 시도하시거나 이메일로 직접 문의해주세요');
+ } finally {
+ setIsSending(false);
}
};
- const sendData = () => {
- const URL = process.env.GOOGLE_URL || '';
-
- return fetch(URL, {
- method: 'POST',
- mode: 'no-cors',
- body: JSON.stringify({ message, email, name, memberId }),
- headers: {
- 'Content-Type': 'application/json',
- },
- });
- };
-
const successSubmit = () => {
- setIsSending(false);
+ successAlert('보내기 완료! 소중한 의견 감사합니다:)');
resetForm();
};
@@ -89,10 +83,11 @@ const ContactUs = () => {
이미지 등을 함께 보내실 경우 codezap2024@gmail.com으로 직접 이메일을 보내실 수 있습니다.