Merge branch 'dev' into feat/#120-error-handling

softeerbootcamp4th · Aug 9, 2024 · 19f99ff · 19f99ff
2 parents 73260cb + b02a66f
commit 19f99ff
Show file tree

Hide file tree

Showing 52 changed files with 359 additions and 145 deletions.
diff --git a/client/src/components/CTAButton/index.tsx b/client/src/components/CTAButton/index.tsx
@@ -1,3 +1,4 @@
+import { memo } from "react";
 import { VariantProps, cva } from "class-variance-authority";
 import { Link } from "react-router-dom";
 import "@/index.css";
@@ -35,7 +36,7 @@ export interface CTAButtonProps extends VariantProps<typeof buttonVariants> {
     type?: "button" | "submit";
 }
 
-export default function CTAButton({
+function CTAButton({
     label,
     onClick,
     disabled = false,
@@ -85,3 +86,5 @@ export default function CTAButton({
         </button>
     );
 }
+
+export default memo(CTAButton);
diff --git a/client/src/components/Category/index.tsx b/client/src/components/Category/index.tsx
@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import { ReactNode, memo } from "react";
 import { cva } from "class-variance-authority";
 
 export interface CategoryProps {
@@ -15,6 +15,8 @@ const categoryVariants = cva(`w-fit px-300 py-200 rounded-1000 text-n-white h-bo
     },
 });
 
-export default function Category({ type, children }: CategoryProps) {
+function Category({ type, children }: CategoryProps) {
     return <span className={categoryVariants({ type })}>{children}</span>;
 }
+
+export default memo(Category);
diff --git a/client/src/components/CheckBox/index.tsx b/client/src/components/CheckBox/index.tsx
@@ -1,4 +1,4 @@
-import { ChangeEvent } from "react";
+import { ChangeEvent, memo } from "react";
 import { checkBoxContainerVariants, checkBoxVariants } from "./index.style";
 
 export interface CheckBoxProps {
@@ -7,7 +7,7 @@ export interface CheckBoxProps {
     handleChangeCheck: (val: boolean) => void;
 }
 
-export default function CheckBox({ label = "", isChecked, handleChangeCheck }: CheckBoxProps) {
+function CheckBox({ label = "", isChecked, handleChangeCheck }: CheckBoxProps) {
     const handleChangeInput = (e: ChangeEvent<HTMLInputElement>) => {
         handleChangeCheck(e.target.checked);
     };
@@ -32,3 +32,5 @@ export default function CheckBox({ label = "", isChecked, handleChangeCheck }: C
         </label>
     );
 }
+
+export default memo(CheckBox);
diff --git a/client/src/components/Footer/index.tsx b/client/src/components/Footer/index.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { memo } from "react";
 import HyundaiLogo from "/public/assets/hyundai-logo.svg?react";
 
 const LinkSection: React.FC = () => (
@@ -36,7 +36,7 @@ const InfoSection: React.FC = () => (
     </>
 );
 
-export default function Footer() {
+function Footer() {
     return (
         <div className="w-full h-[266px] bg-black pl-[180px] py-[70px] snap-end">
             <div className="flex h-6 gap-[180px]">
@@ -49,3 +49,5 @@ export default function Footer() {
         </div>
     );
 }
+
+export default memo(Footer);
diff --git a/client/src/components/Input/index.tsx b/client/src/components/Input/index.tsx
@@ -1,4 +1,4 @@
-import { ChangeEvent, useState } from "react";
+import { ChangeEvent, memo, useState } from "react";
 import { cva } from "class-variance-authority";
 
 export interface InputProps {
@@ -21,13 +21,7 @@ const inputContainerVariants = cva(
     }
 );
 
-export default function Input({
-    type,
-    label,
-    placeholder,
-    value = "",
-    handleValueChange,
-}: InputProps) {
+function Input({ type, label, placeholder, value = "", handleValueChange }: InputProps) {
     const [isFocused, setIsFocused] = useState(false);
 
     const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
@@ -52,3 +46,5 @@ export default function Input({
         </label>
     );
 }
+
+export default memo(Input);
diff --git a/client/src/components/ListStep/index.tsx b/client/src/components/ListStep/index.tsx
@@ -1,4 +1,4 @@
-import { Fragment } from "react";
+import { Fragment, memo } from "react";
 import { cva } from "class-variance-authority";
 
 export interface ListStepProps {
@@ -19,7 +19,7 @@ const stepVariants = cva(
     }
 );
 
-export default function ListStep({ options, selectedIdx, handleClickOption }: ListStepProps) {
+function ListStep({ options, selectedIdx, handleClickOption }: ListStepProps) {
     const lastOptionIndex = options.length - 1;
 
     return (
@@ -38,3 +38,5 @@ export default function ListStep({ options, selectedIdx, handleClickOption }: Li
         </ul>
     );
 }
+
+export default memo(ListStep);
diff --git a/client/src/components/Notice/index.tsx b/client/src/components/Notice/index.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { memo } from "react";
 
 interface EventDetails {
     startDate: string;
@@ -27,7 +27,7 @@ const Section: React.FC<SectionProps> = ({ title, items, indentedIndices = [] })
     </div>
 );
 
-export default function Notice() {
+function Notice() {
     const eventDetails: EventData = {
         // TODO: 임시 데이터 -> API로 변경 필요
         badgeDraw: {
@@ -82,3 +82,5 @@ export default function Notice() {
         </div>
     );
 }
+
+export default memo(Notice);
diff --git a/client/src/components/PopUp/index.tsx b/client/src/components/PopUp/index.tsx
@@ -1,4 +1,4 @@
-import { FormEvent, useEffect, useState } from "react";
+import { FormEvent, useCallback, useEffect, useState } from "react";
 import { PHONE_NUMBER_FORMAT, formatPhoneNumber } from "@/utils/formatPhoneNumber";
 import CTAButton from "../CTAButton";
 import CheckBox from "../CheckBox";
@@ -27,14 +27,21 @@ export default function PopUp({
         setCanConfirm(isUserInfoCheck && isMarketingInfoCheck && isPhoneNumberFormat);
     }, [isUserInfoCheck, isMarketingInfoCheck, phoneNumber]);
 
-    const handleTextFieldChange = (val: string) => {
+    const handleTextFieldChange = useCallback((val: string) => {
         if (val.length > 13) {
             return;
         }
 
         const formattedPhoneNumber = formatPhoneNumber(val);
         handlePhoneNumberChange(formattedPhoneNumber);
-    };
+    }, []);
+
+    const handleUserInfoCheckChange = useCallback((isChecked: boolean) => {
+        setIsUserInfoCheck(isChecked);
+    }, []);
+    const handleMarketingCheckChange = useCallback((isChecked: boolean) => {
+        setIsMarketingInfoCheck(isChecked);
+    }, []);
 
     const handleConfirm = (e: FormEvent) => {
         e.preventDefault();
@@ -84,14 +91,14 @@ export default function PopUp({
                         <CheckBox
                             label="개인정보 수집 및 활용 동의"
                             isChecked={isUserInfoCheck}
-                            handleChangeCheck={(isChecked) => setIsUserInfoCheck(isChecked)}
+                            handleChangeCheck={handleUserInfoCheckChange}
                         />
                     </div>
                     <div className="flex gap-500">
                         <CheckBox
                             label="마케팅 정보 수신 동의"
                             isChecked={isMarketingInfoCheck}
-                            handleChangeCheck={(isChecked) => setIsMarketingInfoCheck(isChecked)}
+                            handleChangeCheck={handleMarketingCheckChange}
                         />
                     </div>
                 </div>

diff --git a/client/src/components/TextField/index.tsx b/client/src/components/TextField/index.tsx
@@ -1,4 +1,4 @@
-import { ChangeEvent, useState } from "react";
+import { ChangeEvent, memo, useState } from "react";
 import {
     inputVariants,
     labelVariants,
@@ -16,7 +16,7 @@ export interface TextFieldProps {
     handleValueChange: (val: string) => void;
 }
 
-export default function TextField({
+function TextField({
     label,
     isRequired,
     size,
@@ -76,3 +76,5 @@ export default function TextField({
         </div>
     );
 }
+
+export default memo(TextField);
diff --git a/client/src/components/Toast/index.tsx b/client/src/components/Toast/index.tsx
@@ -1,9 +1,11 @@
+import { memo } from "react";
+
 interface ToastProps {
     message: string;
     isVisible: boolean;
 }
 
-export default function Toast({ message, isVisible }: ToastProps) {
+function Toast({ message, isVisible }: ToastProps) {
     return (
         <div
             className={`fixed top-[88px] left-[50%] translate-x-[-50%] h-heading-4-bold bg-s-blue text-n-white px-6 py-4 rounded-500 transition-opacity ${
@@ -14,3 +16,5 @@ export default function Toast({ message, isVisible }: ToastProps) {
         </div>
     );
 }
+
+export default memo(Toast);
diff --git a/client/src/constants/CasperShowCase/showCase.ts b/client/src/constants/CasperShowCase/showCase.ts
@@ -1,8 +1,8 @@
-export const CARD_TRANSITION = {
+export const CARD_TRANSITION = (itemLength: number) => ({
     x: {
         repeat: Infinity,
         repeatType: "loop",
-        duration: 100,
+        duration: itemLength * 2,
         ease: "linear",
     },
-};
+});
diff --git a/client/src/features/CasperCustom/CasperCardFrontUI.tsx b/client/src/features/CasperCustom/CasperCardFrontUI.tsx
@@ -1,3 +1,4 @@
+import { memo } from "react";
 import { cva } from "class-variance-authority";
 import {
     CASPER_CARD_SIZE,
@@ -45,7 +46,7 @@ const casperNameVariants = cva(
     }
 );
 
-export function CasperCardFrontUI({
+function CasperCardFrontUI({
     size = CASPER_SIZE_OPTION.LG,
     optionDescription,
     casperName,
@@ -195,3 +196,6 @@ export function CasperCardFrontUI({
         </div>
     );
 }
+
+const MemoizedCasperCardFrontUI = memo(CasperCardFrontUI);
+export { MemoizedCasperCardFrontUI as CasperCardFrontUI };
diff --git a/client/src/features/CasperCustom/CasperCustomFinish.tsx b/client/src/features/CasperCustom/CasperCustomFinish.tsx
@@ -14,15 +14,20 @@ import ErrorBoundary from "@/pages/ErrorBoundary";
 import { CASPER_ACTION } from "@/types/casperCustom";
 import { GetApplyCountResponse } from "@/types/lotteryApi";
 import { saveDomImage } from "@/utils/saveDomImage";
+import { SCROLL_MOTION } from "../../constants/animation";
 import { Battery } from "./Battery";
 import { MyCasperCardFront } from "./MyCasperCardFront";
 import ArrowIcon from "/public/assets/icons/arrow.svg?react";
 
 interface CasperCustomFinishProps {
     handleResetStep: () => void;
+    unblockNavigation: () => void;
 }
 
-export function CasperCustomFinish({ handleResetStep }: CasperCustomFinishProps) {
+export function CasperCustomFinish({
+    handleResetStep,
+    unblockNavigation,
+}: CasperCustomFinishProps) {
     const [cookies] = useCookies([COOKIE_TOKEN_KEY]);
 
     const {
@@ -40,6 +45,8 @@ export function CasperCustomFinish({ handleResetStep }: CasperCustomFinishProps)
         if (!cookies[COOKIE_TOKEN_KEY]) {
             return;
         }
+
+        unblockNavigation();
         getApplyCount();
     }, [cookies]);
 
@@ -58,7 +65,10 @@ export function CasperCustomFinish({ handleResetStep }: CasperCustomFinishProps)
 
     return (
         <ErrorBoundary isError={isErrorgetApplyCount}>
-            <motion.div className="mt-[60px] flex flex-col items-center" {...DISSOLVE}>
+            <motion.div
+                className="mt-[60px] flex flex-col items-center"
+                {...SCROLL_MOTION(DISSOLVE)}
+            >
                 <div className="flex items-center gap-[107px]">
                     <div>
                         <div ref={casperCustomRef}>

diff --git a/client/src/features/CasperCustom/CasperCustomFinishing.tsx b/client/src/features/CasperCustom/CasperCustomFinishing.tsx
@@ -4,6 +4,7 @@ import { CASPER_SIZE_OPTION } from "@/constants/CasperCustom/casper";
 import { DISSOLVE } from "@/constants/animation";
 import useCasperCustomStateContext from "@/hooks/useCasperCustomStateContext";
 import useToast from "@/hooks/useToast";
+import { SCROLL_MOTION } from "../../constants/animation";
 import { CasperCardType } from "../CasperShowCase/TransitionCasperCards";
 import { CasperFlipCard } from "./CasperFlipCard";
 
@@ -26,18 +27,23 @@ export function CasperCustomFinishing({ navigateNextStep }: CasperCustomFinishin
     useEffect(() => {
         showToast();
 
-        setTimeout(() => {
+        const flipTimer = setTimeout(() => {
             setIsFlipped(true);
         }, 3000);
 
-        setTimeout(() => {
+        const navigateTimer = setTimeout(() => {
             navigateNextStep();
         }, 6000);
+
+        return () => {
+            clearTimeout(flipTimer);
+            clearTimeout(navigateTimer);
+        };
     }, []);
 
     return (
         <>
-            <motion.div className="flex" {...DISSOLVE}>
+            <motion.div className="flex" {...SCROLL_MOTION(DISSOLVE)}>
                 <CasperFlipCard size={CASPER_SIZE_OPTION.LG} card={card} isFlipped={isFlipped} />
             </motion.div>
 

diff --git a/client/src/features/CasperCustom/CasperCustomForm.tsx b/client/src/features/CasperCustom/CasperCustomForm.tsx
@@ -1,4 +1,4 @@
-import { useEffect } from "react";
+import { useCallback, useEffect } from "react";
 import { motion } from "framer-motion";
 import { useCookies } from "react-cookie";
 import { LotteryAPI } from "@/apis/lotteryAPI";
@@ -13,6 +13,7 @@ import useFetch from "@/hooks/useFetch";
 import ErrorBoundary from "@/pages/ErrorBoundary";
 import { CASPER_ACTION } from "@/types/casperCustom";
 import { CasperInformationType, PostCasperResponse } from "@/types/lotteryApi";
+import { SCROLL_MOTION } from "../../constants/animation";
 import { MyCasperCardFront } from "./MyCasperCardFront";
 
 interface CasperCustomFormProps {
@@ -62,13 +63,13 @@ export function CasperCustomForm({ navigateNextStep }: CasperCustomFormProps) {
         }
     }, [casper, isSuccessPostCasper]);
 
-    const handleSetCasperName = (value: string) => {
+    const handleSetCasperName = useCallback((value: string) => {
         dispatch({ type: CASPER_ACTION.SET_CASPER_NAME, payload: value });
-    };
+    }, []);
 
-    const handleSetExpectations = (value: string) => {
+    const handleSetExpectations = useCallback((value: string) => {
         dispatch({ type: CASPER_ACTION.SET_EXPECTATIONS, payload: value });
-    };
+    }, []);
 
     const handleSubmitCasper = async () => {
         const casper: CasperInformationType = {
@@ -86,7 +87,7 @@ export function CasperCustomForm({ navigateNextStep }: CasperCustomFormProps) {
 
     return (
         <ErrorBoundary isError={isErrorPostCasper}>
-            <motion.div className="flex flex-col items-center" {...DISSOLVE}>
+            <motion.div className="flex flex-col items-center" {...SCROLL_MOTION(DISSOLVE)}>
                 <div className="flex items-center mt-[68px] gap-1000">
                     <MyCasperCardFront hasRandomButton={false} />
                     <div>