[ feat ] wishes create 페이지 최적화

Make-A-Wish-Sopt · Oct 25, 2024 · 98ac0b7 · 98ac0b7
1 parent f04f148
commit 98ac0b7
Show file tree

Hide file tree

Showing 19 changed files with 475 additions and 352 deletions.
diff --git a/.yarn/install-state.gz b/.yarn/install-state.gz
diff --git a/package.json b/package.json
@@ -11,6 +11,7 @@
     "test:watch": "jest --watchAll"
   },
   "dependencies": {
+    "@hookform/resolvers": "^3.9.0",
     "@next/bundle-analyzer": "^13.4.19",
     "@nextui-org/skeleton": "^2.0.32",
     "axios": "^1.3.5",
@@ -26,7 +27,8 @@
     "recoil": "^0.7.7",
     "recoil-persist": "^4.2.0",
     "tailwind-styled-components": "^2.2.0",
-    "ts-node": "^10.9.2"
+    "ts-node": "^10.9.2",
+    "yup": "^1.4.0"
   },
   "devDependencies": {
     "@testing-library/dom": "^10.4.0",

diff --git a/src/api/common/axios.ts b/src/api/common/axios.ts
@@ -34,6 +34,11 @@ client.interceptors.response.use(
   },
   async function (error: any) {
     const originalRequest = error.config;
+    let retryFlg = false;
+
+    if (retryFlg) {
+      return Promise.reject(error); // 이미 재시도된 요청은 다시 재시도하지 않음
+    }
 
     // 토큰 만료 시 처리
     if (error.response && error.response.data.message === '유효하지 않은 토큰입니다.') {
@@ -51,17 +56,24 @@ client.interceptors.response.use(
             refreshToken: refreshToken,
           };
 
-          await fetch('http://localhost:8080/api/set-cookies', {
-            method: 'POST',
-            headers: {
-              'Content-Type': 'application/json',
+          console.log(accessToken);
+          console.log(loginUserCookiesData);
+
+          await axios.post(
+            'http://localhost:8080/api/set-cookies',
+            JSON.stringify(newCookiesData),
+            {
+              headers: {
+                'Content-Type': 'application/json',
+              },
             },
-            body: JSON.stringify(newCookiesData),
-          });
+          );
 
           // 3. 갱신된 토큰을 헤더에 추가
           originalRequest.headers['Authorization'] = `Bearer ${accessToken}`;
 
+          retryFlg = true;
+
           // 4. 원래 요청 재시도
           return client(originalRequest);
         } else {

diff --git a/src/app/wishes/create/page.tsx b/src/app/wishes/create/page.tsx
@@ -14,6 +14,7 @@ export default function WishesCreatePage({
   searchParams: { step: WishesCreateStepType; wishTitle: string };
 }) {
   const { step, wishTitle } = searchParams;
+
   if ((step !== 'link' && step !== 'account') || wishTitle === '') {
     return <ErrorPage />;
   }

diff --git a/src/components/Common/Calendar/Calendar.tsx b/src/components/Common/Calendar/Calendar.tsx
@@ -1,40 +1,20 @@
 import Image from 'next/image';
 import { ko } from 'date-fns/locale';
-import { UseFormReturn, useWatch } from 'react-hook-form';
 import DatePicker from 'react-datepicker';
 import 'react-datepicker/dist/react-datepicker.css';
 import CalendarHeader from './CalendarHeader';
 import { getDate } from '@/utils/common/getDate';
 import { CalendarGreyIc, CalendarIc } from '../../../../public/assets/icons';
-
 import Box from '../Box';
-import { WishesLinkDataType } from '@/types/input';
 
 interface CalendarProps {
   date: Date;
-  methods: UseFormReturn<WishesLinkDataType, any, undefined>;
+  handleChangeDate?: (selectedDate: Date) => void;
   readOnly?: boolean;
 }
 
 export default function Calendar(props: CalendarProps) {
-  const { date, methods, readOnly } = props;
-
-  const control = methods.control;
-
-  const watchStartDateData = useWatch({
-    control,
-    name: 'startDate',
-  });
-
-  const watchEndDateData = useWatch({
-    control,
-    name: 'endDate',
-  });
-
-  const handleChangeDate = (selectedDate: Date) => {
-    methods.setValue('startDate', selectedDate);
-    methods.setValue('endDate', getDate(selectedDate, 7));
-  };
+  const { date, handleChangeDate, readOnly } = props;
 
   return (
     <Box bgColor="dark_green" fontColor={readOnly ? 'gray2' : 'white'}>

diff --git a/src/components/UI/InputTextForm.tsx b/src/components/UI/InputTextForm.tsx
@@ -1,42 +1,46 @@
-import { useFormContext, useWatch } from 'react-hook-form';
+import { RegisterOptions, useFormContext, UseFormRegisterReturn, useWatch } from 'react-hook-form';
 import InputForm from './InputForm';
 import InputText from '../Common/Input/inputText';
 import InputTextarea from '../Common/Input/inputTextarea';
-import { memo, ReactNode } from 'react';
+import { ReactNode } from 'react';
 
 export default function InputTextForm<T>({
   inputType,
   inputTitle,
+  register,
   registerName,
+  validate,
   placeholder,
   maxLength,
   children,
 }: {
   inputType: 'text' | 'textarea';
   inputTitle: string;
-  registerName: keyof T;
+  register: UseFormRegisterReturn<keyof T & string>;
+  registerName?: keyof T;
+  validate?: RegisterOptions;
   placeholder?: string;
   maxLength?: number;
   children?: ReactNode;
 }) {
-  const { register, control } = useFormContext();
+  // const { register, control } = useFormContext();
 
-  const text = useWatch({
-    control,
-    name: registerName as string,
-  }) as string;
+  // const text = useWatch({
+  //   control,
+  //   name: registerName as string,
+  // }) as string;
 
   return (
     <InputForm title={inputTitle}>
       {inputType === 'text' ? (
-        <InputText register={register(registerName as string)} placeholder={placeholder}>
+        <InputText register={register} placeholder={placeholder}>
           {children}
-          {maxLength && <TextCount textLength={text.length} maxLength={maxLength} />}
+          {/* {maxLength && <TextCount textLength={text.length} maxLength={maxLength} />} */}
         </InputText>
       ) : (
-        <InputTextarea register={register(registerName as string)} placeholder={placeholder}>
+        <InputTextarea register={register} placeholder={placeholder}>
           {children}
-          {maxLength && <TextCount textLength={text.length} maxLength={maxLength} />}
+          {/* {maxLength && <TextCount textLength={text.length} maxLength={maxLength} />} */}
         </InputTextarea>
       )}
     </InputForm>

diff --git a/src/components/UI/UploadImageBox.tsx b/src/components/UI/UploadImageBox.tsx
@@ -1,36 +1,68 @@
 'use client';
 
+// import Image from 'next/image';
+// import { UploadImageLogoIc } from '../../../public/assets/icons';
+
+// export function UploadImageBox({
+//   imageUrl,
+//   handleUploadImageFile,
+// }: {
+//   imageUrl: string;
+//   handleUploadImageFile?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+// }) {
+//   return (
+//     <label>
+//       <div className="flex justify-center items-center w-full h-220 bg-dark_green text-gray2 rounded-xl relative">
+//         {imageUrl ? (
+//           <Image src={imageUrl} alt="등록한 사진 이미지" fill />
+//         ) : (
+//           <Image src={UploadImageLogoIc} alt="파일 업로드 아이콘" width={70} />
+//           // 이미지가 (덜커덩 거리면서 등록되는거)이상하게 등록되는거 수정해야됩니다.
+//         )}
+//       </div>
+
+//       <input
+//         className="hidden"
+//         type="file"
+//         accept=".jpg,.jpeg,.png"
+//         onChange={handleUploadImageFile}
+//         disabled={handleUploadImageFile === undefined}
+//         readOnly
+//       />
+//     </label>
+//   );
+// }
+
+import React from 'react';
 import Image from 'next/image';
 import { UploadImageLogoIc } from '../../../public/assets/icons';
-import { Suspense } from 'react';
 
-export function UploadImageBox({
-  imageURL,
+export const UploadImageBox = React.memo(function UploadImageBox({
+  imageUrl,
   handleUploadImageFile,
 }: {
-  imageURL: string;
+  imageUrl: string;
   handleUploadImageFile?: (e: React.ChangeEvent<HTMLInputElement>) => void;
 }) {
   return (
-    <Suspense>
-      <label>
-        <div className="flex justify-center items-center w-full h-220 bg-dark_green text-gray2 rounded-xl">
-          {imageURL ? (
-            <Image src={imageURL} alt="등록한 사진 이미지" width={100} height={100} />
-          ) : (
-            <Image src={UploadImageLogoIc} alt="파일 업로드 아이콘" />
-          )}
-        </div>
+    <label>
+      <div className="flex justify-center items-center w-full h-220 bg-dark_green text-gray2 rounded-xl relative">
+        {imageUrl ? (
+          <Image src={imageUrl} alt="등록한 사진 이미지" fill />
+        ) : (
+          <Image src={UploadImageLogoIc} alt="파일 업로드 아이콘" width={70} />
+          // 이미지가 (덜커덩 거리면서 등록되는거)이상하게 등록되는거 수정해야됩니다.
+        )}
+      </div>
 
-        <input
-          className="hidden"
-          type="file"
-          accept=".jpg,.jpeg,.png"
-          onChange={handleUploadImageFile}
-          disabled={handleUploadImageFile === undefined}
-          readOnly
-        />
-      </label>
-    </Suspense>
+      <input
+        className="hidden"
+        type="file"
+        accept=".jpg,.jpeg,.png"
+        onChange={handleUploadImageFile}
+        disabled={handleUploadImageFile === undefined}
+        readOnly
+      />
+    </label>
   );
-}
+});
diff --git a/src/constant/init.ts b/src/constant/init.ts
@@ -0,0 +1,19 @@
+import { WishesAccountDataType, WishesLinkDataType } from '@/types/input';
+import { getDate } from '@/utils/common/getDate';
+
+export const wishesLinkInputInit: WishesLinkDataType = {
+  imageUrl: '',
+  title: '',
+  hint: '',
+  startDate: new Date(),
+  endDate: getDate(new Date(), 7),
+  wantsGift: false,
+};
+
+export const wishesAccountInputInit: WishesAccountDataType = {
+  name: '',
+  account: '',
+  bank: '',
+  phone: '',
+  noticeAgree: false,
+};
diff --git a/src/container/login/oauth2/code/kakao/container.tsx b/src/container/login/oauth2/code/kakao/container.tsx
@@ -2,6 +2,7 @@
 
 import Loading from '@/app/loading';
 import { LoginUserDataType } from '@/utils/common/cookies';
+import axios from 'axios';
 import { useRouter } from 'next/navigation';
 import { useEffect } from 'react';
 
@@ -11,19 +12,18 @@ export default function LoginContainer({ loginUserData }: { loginUserData?: Logi
   if (!loginUserData) {
     alert('카카오 로그인 에러');
     router.push('/');
-    return <Loading />;
   }
 
   useEffect(() => {
-    fetch('http://localhost:8080/api/set-cookies', {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-      },
-      body: JSON.stringify(loginUserData),
-    }).then(() => {
-      router.push('/wishes');
-    });
+    axios
+      .post('http://localhost:8080/api/set-cookies', JSON.stringify(loginUserData), {
+        headers: {
+          'Content-Type': 'application/json',
+        },
+      })
+      .then(() => {
+        router.push('/wishes');
+      });
   }, []);
 
   return <Loading />;

diff --git a/src/container/present/server.tsx b/src/container/present/server.tsx
@@ -37,7 +37,7 @@ export function MessageFromWisheMaker({ wishId }: { wishId: string }) {
 
       {/* 이미지값 넣어줘야해요! */}
       <div className="mb-30">
-        <UploadImageBox imageURL={''} />
+        <UploadImageBox imageUrl={''} />
       </div>
     </>
   );