[FE] 코드잽 프로덕션 v1.1.5 배포

[FE] 코드잽 프로덕션 v1.1.5 배포

Author: Hain-tain

frontend/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "code-zap",
-  "version": "1.1.4",
+  "version": "1.1.5",
   "description": "",
   "main": "index.js",
   "scripts": {
@@ -22,6 +22,7 @@
   ],
   "license": "ISC",
   "dependencies": {
+    "@amplitude/analytics-browser": "^2.11.7",
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
     "@sentry/react": "^8.22.0",

frontend/package.json

@@ -9,15 +9,14 @@ import type {
   CustomError,
   Category,
 } from '@/types';
-import { MemberInfo } from '@/types';
 
 import { customFetch } from './customFetch';
 
 const API_URL = process.env.REACT_APP_API_URL ?? '';
 
 export const CATEGORY_API_URL = `${API_URL}${END_POINTS.CATEGORIES}`;
 
-export const getCategoryList = async ({ memberId }: Pick<MemberInfo, 'memberId'>) => {
+export const getCategoryList = async (memberId: number) => {
   const url = `${CATEGORY_API_URL}?memberId=${memberId}`;
 
   const response = await customFetch<CategoryListResponse>({

frontend/src/api/categories.ts

@@ -27,3 +27,4 @@ export {
   checkName,
 } from './authentication';
 export { LIKE_API_URL, postLike, deleteLike } from './like';
+export { getMemberName } from './members';

frontend/src/api/index.ts

@@ -0,0 +1,22 @@
+import { END_POINTS } from '@/routes';
+import { GetMemberNameResponse } from '@/types';
+
+import { customFetch } from './customFetch';
+
+const API_URL = process.env.REACT_APP_API_URL;
+
+export const MEMBER_API_URL = `${API_URL}${END_POINTS.MEMBERS}`;
+
+export const getMemberName = async (memberId: number) => {
+  const url = `${MEMBER_API_URL}/${memberId}/name`;
+
+  const response = await customFetch<GetMemberNameResponse>({
+    url,
+  });
+
+  if ('name' in response) {
+    return response;
+  }
+
+  throw new Error(response.detail);
+};

frontend/src/api/members.ts

@@ -2,6 +2,7 @@ export const QUERY_KEY = {
   CATEGORY_LIST: 'categoryList',
   CHECK_NAME: 'checkName',
   LOGIN_STATE: 'loginState',
+  MEMBER_NAME: 'memberName',
   TAG_LIST: 'tagList',
   TEMPLATE: 'template',
   TEMPLATE_LIST: 'templateList',

frontend/src/api/queryKeys.ts

@@ -1,5 +1,4 @@
 import { END_POINTS } from '@/routes';
-import { MemberInfo } from '@/types';
 import { TagListResponse } from '@/types/api';
 
 import { customFetch } from './customFetch';
@@ -8,7 +7,7 @@ const API_URL = process.env.REACT_APP_API_URL ?? '';
 
 export const TAG_API_URL = `${API_URL}${END_POINTS.TAGS}`;
 
-export const getTagList = async ({ memberId }: Pick<MemberInfo, 'memberId'>) => {
+export const getTagList = async (memberId: number) => {
   const url = `${TAG_API_URL}?memberId=${memberId}`;
 
   const response = await customFetch<TagListResponse>({

frontend/src/api/tags.ts

@@ -84,6 +84,7 @@ export const getTemplateExplore = async ({
   page = 1,
   size = PAGE_SIZE,
   keyword,
+  tagIds,
 }: TemplateListRequest): Promise<TemplateListResponse> => {
   const queryParams = new URLSearchParams({
     sort,
@@ -95,6 +96,10 @@ export const getTemplateExplore = async ({
     queryParams.append('keyword', keyword);
   }
 
+  if (tagIds?.length !== 0 && tagIds !== undefined) {
+    queryParams.append('tagIds', tagIds.toString());
+  }
+
   const response = await apiClient.get(`${END_POINTS.TEMPLATES_EXPLORE}?${queryParams.toString()}`);
   const data = response.json();
 

frontend/src/api/templates.ts

@@ -9,3 +9,7 @@ export const Form = styled.form`
   flex-direction: column;
   gap: 1.25rem;
 `;
+
+export const LoadingContainer = styled.div`
+  width: 4.5rem;
+`;

frontend/src/assets/images/clock.svg

@@ -1,13 +1,17 @@
+import { useState } from 'react';
+
 import { useInput, useInputWithValidate, useToggle } from '@/hooks';
+import { useAuth } from '@/hooks/authentication';
 import { useToast } from '@/hooks/useToast';
 import { validateEmail } from '@/service/validates';
 import { theme } from '@/style/theme';
 
-import { Button, Input, Modal, Text, Textarea } from '..';
+import { Button, Input, LoadingBall, Modal, Text, Textarea } from '..';
 import * as S from './ContactUs.style';
 
 const ContactUs = () => {
   const [isModalOpen, toggleModal] = useToggle();
+  const [isSending, setIsSending] = useState(false);
   const [message, handleMessage, resetMessage] = useInput('');
   const {
     value: email,
@@ -16,7 +20,11 @@ const ContactUs = () => {
     errorMessage: emailErrorMessage,
   } = useInputWithValidate('', validateEmail);
 
-  const { failAlert, successAlert } = useToast();
+  const {
+    memberInfo: { name, memberId },
+  } = useAuth();
+
+  const { successAlert } = useToast();
 
   const isValidContents = message.trim().length !== 0;
 
@@ -31,16 +39,15 @@ const ContactUs = () => {
   };
 
   const submitForm = async () => {
-    const res = await sendData();
+    setIsSending(true);
+    toggleModal();
 
-    if (!res.ok) {
-      failAlert('보내기에 실패했습니다. 계속 실패한다면 이메일로 제보 부탁드립니다.');
+    const res = await sendData();
 
-      return;
+    if (res) {
+      successSubmit();
+      successAlert('보내기 완료! 소중한 의견 감사합니다:)');
     }
-
-    successSubmit();
-    successAlert('보내기 완료! 소중한 의견 감사합니다:)');
   };
 
   const sendData = () => {
@@ -49,16 +56,16 @@ const ContactUs = () => {
     return fetch(URL, {
       method: 'POST',
       mode: 'no-cors',
-      body: JSON.stringify({ message, email }),
+      body: JSON.stringify({ message, email, name, memberId }),
       headers: {
         'Content-Type': 'application/json',
       },
     });
   };
 
   const successSubmit = () => {
+    setIsSending(false);
     resetForm();
-    toggleModal();
   };
 
   const resetForm = () => {
@@ -73,6 +80,7 @@ const ContactUs = () => {
           문의하기
         </Text.Medium>
       </S.ContactUSButton>
+
       <Modal isOpen={isModalOpen} toggleModal={toggleModal} size='large'>
         <Modal.Header>문의하기</Modal.Header>
         <Modal.Body>
@@ -83,14 +91,20 @@ const ContactUs = () => {
             </Text.Medium>
             <Textarea id='voc' variant='outlined'>
               <Textarea.Label htmlFor={'voc'}>무엇을 도와드릴까요?</Textarea.Label>
-              <Textarea.TextField minRows={5} maxRows={10} value={message} onChange={handleMessage} />
+              <Textarea.TextField
+                minRows={5}
+                maxRows={10}
+                value={message}
+                onChange={handleMessage}
+                disabled={isSending}
+              />
             </Textarea>
             <Text.Medium as='p' color={theme.color.light.secondary_500}>
               답변이 필요하시면 아래 이메일 주소를 남겨주세요. 이메일은 오직 답변을 위해서만 사용됩니다 :)
             </Text.Medium>
             <Input variant='outlined' isValid={!emailErrorMessage}>
               <Input.Label>이메일 (선택)</Input.Label>
-              <Input.TextField value={email} onChange={handleEmail} />
+              <Input.TextField value={email} onChange={handleEmail} disabled={isSending} />
               <Input.HelperText>{emailErrorMessage}</Input.HelperText>
             </Input>
           </S.Form>
@@ -99,9 +113,15 @@ const ContactUs = () => {
           <Button onClick={toggleModal} variant='outlined'>
             닫기
           </Button>
-          <Button disabled={isValidContents && !emailErrorMessage ? false : true} onClick={handleSubmit}>
-            보내기
-          </Button>
+          {isSending ? (
+            <S.LoadingContainer>
+              <LoadingBall />
+            </S.LoadingContainer>
+          ) : (
+            <Button disabled={isValidContents && !emailErrorMessage ? false : true} onClick={handleSubmit}>
+              보내기
+            </Button>
+          )}
         </Modal.Footer>
       </Modal>
     </>

frontend/src/assets/images/person.svg

@@ -1,4 +1,4 @@
-import { ContactUs, Text } from '@/components';
+import { Text } from '@/components';
 import { useAuth } from '@/hooks/authentication';
 
 import * as S from './Footer.style';
@@ -20,7 +20,7 @@ const Footer = () => {
         © All rights reserved.
       </Text.Small>
       <S.ContactEmail>
-        <ContactUs />
+        <Text.Small color='inherit'>문의: [email protected]</Text.Small>
       </S.ContactEmail>
     </S.FooterContainer>
   );