From a3d766b7cce3afa43c7570bf0db2e32c3444e8bf Mon Sep 17 00:00:00 2001 From: jhj2713 Date: Wed, 7 Aug 2024 18:39:16 +0900 Subject: [PATCH 01/15] =?UTF-8?q?refactor:=20memo=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/src/features/Lottery/CustomDesign.tsx | 6 +++++- client/src/features/Lottery/HeadLamp.tsx | 6 +++++- client/src/features/Lottery/Headline.tsx | 6 +++++- client/src/features/Lottery/Intro.tsx | 6 +++++- client/src/features/Lottery/NewColor.tsx | 6 +++++- client/src/features/Lottery/PixelDesign.tsx | 6 +++++- client/src/features/Lottery/ShortCut.tsx | 6 +++++- client/src/features/Lottery/SmileBadge.tsx | 6 +++++- client/src/features/Lottery/WheelDesign.tsx | 6 +++++- 9 files changed, 45 insertions(+), 9 deletions(-) diff --git a/client/src/features/Lottery/CustomDesign.tsx b/client/src/features/Lottery/CustomDesign.tsx index 24aff128..70da11af 100644 --- a/client/src/features/Lottery/CustomDesign.tsx +++ b/client/src/features/Lottery/CustomDesign.tsx @@ -1,10 +1,11 @@ +import { memo } from "react"; import { motion } from "framer-motion"; import { DISSOLVE, SCROLL_MOTION } from "@/constants/animation.ts"; import { SectionKeyProps } from "@/types/sections.ts"; import { Description } from "./Description"; import { Section } from "./Section"; -export function CustomDesign({ id }: SectionKeyProps) { +function CustomDesign({ id }: SectionKeyProps) { return (
@@ -38,3 +39,6 @@ export function CustomDesign({ id }: SectionKeyProps) {
); } + +const MemoizedCustomDesign = memo(CustomDesign); +export { MemoizedCustomDesign as CustomDesign }; diff --git a/client/src/features/Lottery/HeadLamp.tsx b/client/src/features/Lottery/HeadLamp.tsx index a0013af1..a1ec3e8c 100644 --- a/client/src/features/Lottery/HeadLamp.tsx +++ b/client/src/features/Lottery/HeadLamp.tsx @@ -1,3 +1,4 @@ +import { memo } from "react"; import { motion } from "framer-motion"; import Tooltip from "@/components/Tooltip"; import { DISSOLVE, SCROLL_MOTION } from "@/constants/animation.ts"; @@ -5,7 +6,7 @@ import { SectionKeyProps } from "@/types/sections.ts"; import { Description } from "./Description"; import { Section } from "./Section"; -export function HeadLamp({ id }: SectionKeyProps) { +function HeadLamp({ id }: SectionKeyProps) { return (
@@ -49,3 +50,6 @@ export function HeadLamp({ id }: SectionKeyProps) {
); } + +const MemoizedHeadLamp = memo(HeadLamp); +export { MemoizedHeadLamp as HeadLamp }; diff --git a/client/src/features/Lottery/Headline.tsx b/client/src/features/Lottery/Headline.tsx index 438768a6..2443b71e 100644 --- a/client/src/features/Lottery/Headline.tsx +++ b/client/src/features/Lottery/Headline.tsx @@ -1,3 +1,4 @@ +import { memo } from "react"; import { motion } from "framer-motion"; import CTAButton from "@/components/CTAButton"; import Scroll from "@/components/Scroll"; @@ -8,7 +9,7 @@ interface HeadlineProps extends SectionKeyProps { handleClickShortCutButton: () => void; } -export function Headline({ id, handleClickShortCutButton }: HeadlineProps) { +function Headline({ id, handleClickShortCutButton }: HeadlineProps) { return (
); } + +const MemoizedHeadline = memo(Headline); +export { MemoizedHeadline as Headline }; diff --git a/client/src/features/Lottery/Intro.tsx b/client/src/features/Lottery/Intro.tsx index fab76967..240a91b9 100644 --- a/client/src/features/Lottery/Intro.tsx +++ b/client/src/features/Lottery/Intro.tsx @@ -1,8 +1,9 @@ +import { memo } from "react"; import { motion } from "framer-motion"; import { ASCEND, DISSOLVE, SCROLL_MOTION } from "@/constants/animation.ts"; import { SectionKeyProps } from "@/types/sections.ts"; -export function Intro({ id }: SectionKeyProps) { +function Intro({ id }: SectionKeyProps) { return (
); } + +const MemoizedIntro = memo(Intro); +export { MemoizedIntro as Intro }; diff --git a/client/src/features/Lottery/NewColor.tsx b/client/src/features/Lottery/NewColor.tsx index b06a2203..7f5f29de 100644 --- a/client/src/features/Lottery/NewColor.tsx +++ b/client/src/features/Lottery/NewColor.tsx @@ -1,10 +1,11 @@ +import { memo } from "react"; import { motion } from "framer-motion"; import { DISSOLVE, SCROLL_MOTION } from "@/constants/animation.ts"; import { SectionKeyProps } from "@/types/sections.ts"; import { Description } from "./Description"; import { Section } from "./Section"; -export function NewColor({ id }: SectionKeyProps) { +function NewColor({ id }: SectionKeyProps) { return (
); } + +const MemoizedNewColor = memo(NewColor); +export { MemoizedNewColor as NewColor }; diff --git a/client/src/features/Lottery/PixelDesign.tsx b/client/src/features/Lottery/PixelDesign.tsx index f4dad523..47ed637c 100644 --- a/client/src/features/Lottery/PixelDesign.tsx +++ b/client/src/features/Lottery/PixelDesign.tsx @@ -1,10 +1,11 @@ +import { memo } from "react"; import { motion } from "framer-motion"; import { DISSOLVE, SCROLL_MOTION } from "@/constants/animation.ts"; import { SectionKeyProps } from "@/types/sections.ts"; import { Description } from "./Description"; import { Section } from "./Section"; -export function PixelDesign({ id }: SectionKeyProps) { +function PixelDesign({ id }: SectionKeyProps) { return (
@@ -44,3 +45,6 @@ export function PixelDesign({ id }: SectionKeyProps) {
); } + +const MemoizedPixelDesign = memo(PixelDesign); +export { MemoizedPixelDesign as PixelDesign }; diff --git a/client/src/features/Lottery/ShortCut.tsx b/client/src/features/Lottery/ShortCut.tsx index 6c0ca1a3..81d3a276 100644 --- a/client/src/features/Lottery/ShortCut.tsx +++ b/client/src/features/Lottery/ShortCut.tsx @@ -1,3 +1,4 @@ +import { memo } from "react"; import { motion } from "framer-motion"; import CTAButton from "@/components/CTAButton"; import { ASCEND, SCROLL_MOTION } from "@/constants/animation.ts"; @@ -7,7 +8,7 @@ interface ShortCutProps extends SectionKeyProps { handleClickShortCutButton: () => void; } -export function ShortCut({ id, handleClickShortCutButton }: ShortCutProps) { +function ShortCut({ id, handleClickShortCutButton }: ShortCutProps) { return ( ); } + +const MemoizedShortCut = memo(ShortCut); +export { MemoizedShortCut as ShortCut }; diff --git a/client/src/features/Lottery/SmileBadge.tsx b/client/src/features/Lottery/SmileBadge.tsx index dbe6521f..cb711102 100644 --- a/client/src/features/Lottery/SmileBadge.tsx +++ b/client/src/features/Lottery/SmileBadge.tsx @@ -1,3 +1,4 @@ +import { memo } from "react"; import { motion } from "framer-motion"; import Tooltip from "@/components/Tooltip"; import { DISSOLVE, SCROLL_MOTION } from "@/constants/animation.ts"; @@ -5,7 +6,7 @@ import { SectionKeyProps } from "@/types/sections.ts"; import { Description } from "./Description"; import { Section } from "./Section"; -export function SmileBadge({ id }: SectionKeyProps) { +function SmileBadge({ id }: SectionKeyProps) { return (
); } + +const MemoizedSmileBadge = memo(SmileBadge); +export { MemoizedSmileBadge as SmileBadge }; diff --git a/client/src/features/Lottery/WheelDesign.tsx b/client/src/features/Lottery/WheelDesign.tsx index 21164aaa..391aa2a8 100644 --- a/client/src/features/Lottery/WheelDesign.tsx +++ b/client/src/features/Lottery/WheelDesign.tsx @@ -1,10 +1,11 @@ +import { memo } from "react"; import { motion } from "framer-motion"; import { DISSOLVE, SCROLL_MOTION } from "@/constants/animation.ts"; import { SectionKeyProps } from "@/types/sections.ts"; import { Description } from "./Description"; import { Section } from "./Section"; -export function WheelDesign({ id }: SectionKeyProps) { +function WheelDesign({ id }: SectionKeyProps) { return (
@@ -42,3 +43,6 @@ export function WheelDesign({ id }: SectionKeyProps) {
); } + +const MemoizedWheelDesign = memo(WheelDesign); +export { MemoizedWheelDesign as WheelDesign }; From 047c3506a60ee7464a48ba89b4db3d5939aff9a7 Mon Sep 17 00:00:00 2001 From: jhj2713 Date: Thu, 8 Aug 2024 10:16:51 +0900 Subject: [PATCH 02/15] =?UTF-8?q?refactor:=20notice,=20footer=20memoizatio?= =?UTF-8?q?n=20=EC=B2=98=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/src/components/Footer/index.tsx | 6 ++++-- client/src/components/Notice/index.tsx | 6 ++++-- 2 files changed, 8 insertions(+), 4 deletions(-) diff --git a/client/src/components/Footer/index.tsx b/client/src/components/Footer/index.tsx index a38c4fa5..369de379 100644 --- 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 (
@@ -49,3 +49,5 @@ export default function Footer() {
); } + +export default memo(Footer); diff --git a/client/src/components/Notice/index.tsx b/client/src/components/Notice/index.tsx index 99dd762a..5d12de60 100644 --- 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 = ({ title, items, indentedIndices = [] })
); -export default function Notice() { +function Notice() { const eventDetails: EventData = { // TODO: 임시 데이터 -> API로 변경 필요 badgeDraw: { @@ -82,3 +82,5 @@ export default function Notice() { ); } + +export default memo(Notice); From 46eea99e88c77d414609a9bce8d51d94549000d3 Mon Sep 17 00:00:00 2001 From: jhj2713 Date: Thu, 8 Aug 2024 10:25:46 +0900 Subject: [PATCH 03/15] =?UTF-8?q?fix:=20=EC=8A=A4=ED=81=AC=EB=A1=A4=20?= =?UTF-8?q?=EC=95=88=20=EB=90=98=EB=8A=94=20=EC=98=A4=EB=A5=98=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/src/features/Lottery/NewColor.tsx | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/client/src/features/Lottery/NewColor.tsx b/client/src/features/Lottery/NewColor.tsx index 7f5f29de..295304fe 100644 --- a/client/src/features/Lottery/NewColor.tsx +++ b/client/src/features/Lottery/NewColor.tsx @@ -22,11 +22,7 @@ function NewColor({ id }: SectionKeyProps) { /> - 캐스퍼 신규 컬러 목록 + 캐스퍼 신규 컬러 목록
); From 92051bcae75616f707eff4a9c75cca49ee73715e Mon Sep 17 00:00:00 2001 From: jhj2713 Date: Thu, 8 Aug 2024 10:39:41 +0900 Subject: [PATCH 04/15] =?UTF-8?q?refactor:=20=EA=B3=B5=ED=86=B5=20?= =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EB=A6=AC=EB=A0=8C?= =?UTF-8?q?=EB=8D=94=EB=A7=81=20=EB=B0=A9=EC=A7=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/src/components/CTAButton/index.tsx | 5 ++++- client/src/components/CheckBox/index.tsx | 6 ++++-- client/src/components/Input/index.tsx | 12 ++++-------- client/src/components/PopUp/index.tsx | 17 ++++++++++++----- client/src/components/Toast/index.tsx | 6 +++++- 5 files changed, 29 insertions(+), 17 deletions(-) diff --git a/client/src/components/CTAButton/index.tsx b/client/src/components/CTAButton/index.tsx index f70e19e7..a1ee6759 100644 --- 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 { type?: "button" | "submit"; } -export default function CTAButton({ +function CTAButton({ label, onClick, disabled = false, @@ -85,3 +86,5 @@ export default function CTAButton({ ); } + +export default memo(CTAButton); diff --git a/client/src/components/CheckBox/index.tsx b/client/src/components/CheckBox/index.tsx index 2adf7ad7..b27bd9ae 100644 --- 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) => { handleChangeCheck(e.target.checked); }; @@ -32,3 +32,5 @@ export default function CheckBox({ label = "", isChecked, handleChangeCheck }: C ); } + +export default memo(CheckBox); diff --git a/client/src/components/Input/index.tsx b/client/src/components/Input/index.tsx index 00a67f8e..77f75b37 100644 --- 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) => { @@ -52,3 +46,5 @@ export default function Input({ ); } + +export default memo(Input); diff --git a/client/src/components/PopUp/index.tsx b/client/src/components/PopUp/index.tsx index 344f7904..4b9ab21f 100644 --- 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 { useNavigate } from "react-router-dom"; import { PHONE_NUMBER_FORMAT, formatPhoneNumber } from "@/utils/formatPhoneNumber"; import CTAButton from "../CTAButton"; @@ -32,14 +32,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(); @@ -90,14 +97,14 @@ export default function PopUp({ setIsUserInfoCheck(isChecked)} + handleChangeCheck={handleUserInfoCheckChange} />
setIsMarketingInfoCheck(isChecked)} + handleChangeCheck={handleMarketingCheckChange} />
diff --git a/client/src/components/Toast/index.tsx b/client/src/components/Toast/index.tsx index a9250a48..9bd33764 100644 --- 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 (
); } + +export default memo(Toast); From 01f9cdf5a1ba5c6e8fde8b3b1a49058b37b2b620 Mon Sep 17 00:00:00 2001 From: jhj2713 Date: Thu, 8 Aug 2024 11:19:39 +0900 Subject: [PATCH 05/15] =?UTF-8?q?refactor:=20rush=20=ED=8E=98=EC=9D=B4?= =?UTF-8?q?=EC=A7=80=20=EB=A6=AC=EB=A0=8C=EB=8D=94=EB=A7=81=20=EB=B0=A9?= =?UTF-8?q?=EC=A7=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/src/features/Rush/BalanceGame.tsx | 6 +++++- client/src/features/Rush/CasperCharge.tsx | 6 +++++- client/src/features/Rush/CasperComfortable.tsx | 6 +++++- client/src/features/Rush/CasperFar.tsx | 6 +++++- client/src/features/Rush/CasperFast.tsx | 6 +++++- client/src/features/Rush/CasperSmartKey.tsx | 6 +++++- client/src/features/Rush/CasperWide.tsx | 6 +++++- client/src/features/Rush/ElectricAdvantage.tsx | 6 +++++- client/src/features/Rush/ElectricReason.tsx | 7 +++++-- client/src/features/Rush/FAQ.tsx | 6 +++++- client/src/features/Rush/Intro.tsx | 6 +++++- client/src/features/Rush/ReasonFirst.tsx | 6 +++++- client/src/features/Rush/ReasonSecond.tsx | 6 +++++- 13 files changed, 65 insertions(+), 14 deletions(-) diff --git a/client/src/features/Rush/BalanceGame.tsx b/client/src/features/Rush/BalanceGame.tsx index adebe696..13d289b4 100644 --- a/client/src/features/Rush/BalanceGame.tsx +++ b/client/src/features/Rush/BalanceGame.tsx @@ -1,3 +1,4 @@ +import { memo } from "react"; import { motion } from "framer-motion"; import CTAButton from "@/components/CTAButton"; import Scroll from "@/components/Scroll"; @@ -5,7 +6,7 @@ import { ASCEND, ASCEND_DESCEND, SCROLL_MOTION } from "@/constants/animation.ts" import { Background } from "@/features/Rush/Background.tsx"; import { SectionKeyProps } from "@/types/sections.ts"; -export function BalanceGame({ id }: SectionKeyProps) { +function BalanceGame({ id }: SectionKeyProps) { return (
); } + +const MemoizedBalanceGame = memo(BalanceGame); +export { MemoizedBalanceGame as BalanceGame }; diff --git a/client/src/features/Rush/CasperCharge.tsx b/client/src/features/Rush/CasperCharge.tsx index 10be5124..e4831c3f 100644 --- a/client/src/features/Rush/CasperCharge.tsx +++ b/client/src/features/Rush/CasperCharge.tsx @@ -1,10 +1,11 @@ +import { memo } from "react"; import { motion } from "framer-motion"; import { DISSOLVE, SCROLL_MOTION } from "@/constants/animation.ts"; import { CasperDescription } from "@/features/Rush/CasperDescription.tsx"; import { CasperSection } from "@/features/Rush/CasperSection.tsx"; import { SectionKeyProps } from "@/types/sections.ts"; -export function CasperCharge({ id }: SectionKeyProps) { +function CasperCharge({ id }: SectionKeyProps) { return ( ); } + +const MemoizedCasperCharge = memo(CasperCharge); +export { MemoizedCasperCharge as CasperCharge }; diff --git a/client/src/features/Rush/CasperComfortable.tsx b/client/src/features/Rush/CasperComfortable.tsx index 82c32e6b..5cc98f5c 100644 --- a/client/src/features/Rush/CasperComfortable.tsx +++ b/client/src/features/Rush/CasperComfortable.tsx @@ -1,10 +1,11 @@ +import { memo } from "react"; import { motion } from "framer-motion"; import { DISSOLVE, SCROLL_MOTION } from "@/constants/animation.ts"; import { CasperDescription } from "@/features/Rush/CasperDescription.tsx"; import { CasperSection } from "@/features/Rush/CasperSection.tsx"; import { SectionKeyProps } from "@/types/sections.ts"; -export function CasperComfortable({ id }: SectionKeyProps) { +function CasperComfortable({ id }: SectionKeyProps) { return ( ); } + +const MemoizedCasperComfortable = memo(CasperComfortable); +export { MemoizedCasperComfortable as CasperComfortable }; diff --git a/client/src/features/Rush/CasperFar.tsx b/client/src/features/Rush/CasperFar.tsx index ab4a052f..3caaf8e7 100644 --- a/client/src/features/Rush/CasperFar.tsx +++ b/client/src/features/Rush/CasperFar.tsx @@ -1,10 +1,11 @@ +import { memo } from "react"; import { motion } from "framer-motion"; import { DISSOLVE, SCROLL_MOTION } from "@/constants/animation.ts"; import { CasperDescription } from "@/features/Rush/CasperDescription.tsx"; import { CasperSection } from "@/features/Rush/CasperSection.tsx"; import { SectionKeyProps } from "@/types/sections.ts"; -export function CasperFar({ id }: SectionKeyProps) { +function CasperFar({ id }: SectionKeyProps) { return ( ); } + +const MemoizedCasperFar = memo(CasperFar); +export { MemoizedCasperFar as CasperFar }; diff --git a/client/src/features/Rush/CasperFast.tsx b/client/src/features/Rush/CasperFast.tsx index cbb6de1c..24bc94fe 100644 --- a/client/src/features/Rush/CasperFast.tsx +++ b/client/src/features/Rush/CasperFast.tsx @@ -1,10 +1,11 @@ +import { memo } from "react"; import { motion } from "framer-motion"; import { DISSOLVE, SCROLL_MOTION } from "@/constants/animation.ts"; import { CasperDescription } from "@/features/Rush/CasperDescription.tsx"; import { CasperSection } from "@/features/Rush/CasperSection.tsx"; import { SectionKeyProps } from "@/types/sections.ts"; -export function CasperFast({ id }: SectionKeyProps) { +function CasperFast({ id }: SectionKeyProps) { return ( ); } + +const MemoizedCasperFast = memo(CasperFast); +export { MemoizedCasperFast as CasperFast }; diff --git a/client/src/features/Rush/CasperSmartKey.tsx b/client/src/features/Rush/CasperSmartKey.tsx index 6a834e10..6b112b5e 100644 --- a/client/src/features/Rush/CasperSmartKey.tsx +++ b/client/src/features/Rush/CasperSmartKey.tsx @@ -1,9 +1,10 @@ +import { memo } from "react"; import { motion } from "framer-motion"; import { DISSOLVE, SCROLL_MOTION } from "@/constants/animation.ts"; import { CasperSubDescription } from "@/features/Rush/CasperSubDescription.tsx"; import { SectionKeyProps } from "@/types/sections.ts"; -export function CasperSmartKey({ id }: SectionKeyProps) { +function CasperSmartKey({ id }: SectionKeyProps) { return (
); } + +const MemoizedCasperSmartKey = memo(CasperSmartKey); +export { MemoizedCasperSmartKey as CasperSmartKey }; diff --git a/client/src/features/Rush/CasperWide.tsx b/client/src/features/Rush/CasperWide.tsx index f5afe7f5..def6419e 100644 --- a/client/src/features/Rush/CasperWide.tsx +++ b/client/src/features/Rush/CasperWide.tsx @@ -1,10 +1,11 @@ +import { memo } from "react"; import { motion } from "framer-motion"; import { DISSOLVE, SCROLL_MOTION } from "@/constants/animation.ts"; import { CasperDescription } from "@/features/Rush/CasperDescription.tsx"; import { CasperSection } from "@/features/Rush/CasperSection.tsx"; import { SectionKeyProps } from "@/types/sections.ts"; -export function CasperWide({ id }: SectionKeyProps) { +function CasperWide({ id }: SectionKeyProps) { return ( ); } + +const MemoizedCasperWide = memo(CasperWide); +export { MemoizedCasperWide as CasperWide }; diff --git a/client/src/features/Rush/ElectricAdvantage.tsx b/client/src/features/Rush/ElectricAdvantage.tsx index 1fe9f13f..5e9259bd 100644 --- a/client/src/features/Rush/ElectricAdvantage.tsx +++ b/client/src/features/Rush/ElectricAdvantage.tsx @@ -1,7 +1,8 @@ +import { memo } from "react"; import { ElectricSection } from "@/features/Rush/ElectricSection.tsx"; import { SectionKeyProps } from "@/types/sections.ts"; -export function ElectricAdvantage({ id }: SectionKeyProps) { +function ElectricAdvantage({ id }: SectionKeyProps) { return ( ); } + +const MemoizedElectricAdvantage = memo(ElectricAdvantage); +export { MemoizedElectricAdvantage as ElectricAdvantage }; diff --git a/client/src/features/Rush/ElectricReason.tsx b/client/src/features/Rush/ElectricReason.tsx index 81276ef7..ec8f1dd8 100644 --- a/client/src/features/Rush/ElectricReason.tsx +++ b/client/src/features/Rush/ElectricReason.tsx @@ -1,11 +1,11 @@ -import { useState } from "react"; +import { memo, useState } from "react"; import Toggle from "@/components/Toggle"; import { CARD_DATA, TOGGLE_OPTIONS } from "@/constants/Rush/electricCardData.tsx"; import { ElectricReasonCard } from "@/features/Rush/ElectricReasonCard.tsx"; import { ElectricSection } from "@/features/Rush/ElectricSection.tsx"; import { SectionKeyProps } from "@/types/sections.ts"; -export function ElectricReason({ id }: SectionKeyProps) { +function ElectricReason({ id }: SectionKeyProps) { const [selectedIdx, setSelectedIdx] = useState(0); const handleToggle = (idx: number) => { @@ -34,3 +34,6 @@ export function ElectricReason({ id }: SectionKeyProps) { ); } + +const MemoizedElectricReason = memo(ElectricReason); +export { MemoizedElectricReason as ElectricReason }; diff --git a/client/src/features/Rush/FAQ.tsx b/client/src/features/Rush/FAQ.tsx index f5afb1f0..0450d9ec 100644 --- a/client/src/features/Rush/FAQ.tsx +++ b/client/src/features/Rush/FAQ.tsx @@ -1,8 +1,9 @@ +import { memo } from "react"; import { motion } from "framer-motion"; import { ASCEND, SCROLL_MOTION } from "@/constants/animation.ts"; import { SectionKeyProps } from "@/types/sections.ts"; -export function FAQ({ id }: SectionKeyProps) { +function FAQ({ id }: SectionKeyProps) { return (
); } + +const MemoizedFAQ = memo(FAQ); +export { MemoizedFAQ as FAQ }; diff --git a/client/src/features/Rush/Intro.tsx b/client/src/features/Rush/Intro.tsx index c05128ab..1b46a306 100644 --- a/client/src/features/Rush/Intro.tsx +++ b/client/src/features/Rush/Intro.tsx @@ -1,8 +1,9 @@ +import { memo } from "react"; import { motion } from "framer-motion"; import { ASCEND, SCROLL_MOTION } from "@/constants/animation.ts"; import { SectionKeyProps } from "@/types/sections.ts"; -export function Intro({ id }: SectionKeyProps) { +function Intro({ id }: SectionKeyProps) { return (
); } + +const MemoizedIntro = memo(Intro); +export { MemoizedIntro as Intro }; diff --git a/client/src/features/Rush/ReasonFirst.tsx b/client/src/features/Rush/ReasonFirst.tsx index 93386194..f7cd4aa5 100644 --- a/client/src/features/Rush/ReasonFirst.tsx +++ b/client/src/features/Rush/ReasonFirst.tsx @@ -1,7 +1,8 @@ +import { memo } from "react"; import { ReasonSection } from "@/features/Rush/ReasonSection.tsx"; import { SectionKeyProps } from "@/types/sections.ts"; -export function ReasonFirst({ id }: SectionKeyProps) { +function ReasonFirst({ id }: SectionKeyProps) { return (

전기차가 처음이라면

@@ -13,3 +14,6 @@ export function ReasonFirst({ id }: SectionKeyProps) { ); } + +const MemoizedReasonFirst = memo(ReasonFirst); +export { MemoizedReasonFirst as ReasonFirst }; diff --git a/client/src/features/Rush/ReasonSecond.tsx b/client/src/features/Rush/ReasonSecond.tsx index 427cabe3..c7e176b4 100644 --- a/client/src/features/Rush/ReasonSecond.tsx +++ b/client/src/features/Rush/ReasonSecond.tsx @@ -1,7 +1,8 @@ +import { memo } from "react"; import { ReasonSection } from "@/features/Rush/ReasonSection.tsx"; import { SectionKeyProps } from "@/types/sections.ts"; -export function ReasonSecond({ id }: SectionKeyProps) { +function ReasonSecond({ id }: SectionKeyProps) { return (

라이프스타일 그대로

@@ -9,3 +10,6 @@ export function ReasonSecond({ id }: SectionKeyProps) { ); } + +const MemoizedReasonSecond = memo(ReasonSecond); +export { MemoizedReasonSecond as ReasonSecond }; From 6fb32f7e54dfd1936479848988a67dd40b02621b Mon Sep 17 00:00:00 2001 From: jhj2713 Date: Thu, 8 Aug 2024 11:21:47 +0900 Subject: [PATCH 06/15] =?UTF-8?q?refactor:=20lottery=20=ED=97=A4=EB=93=9C?= =?UTF-8?q?=EB=9D=BC=EC=9D=B8=20=EB=A6=AC=EB=A0=8C=EB=8D=94=EB=A7=81=20?= =?UTF-8?q?=EB=B0=A9=EC=A7=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/src/pages/Lottery/index.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/client/src/pages/Lottery/index.tsx b/client/src/pages/Lottery/index.tsx index 59d76b2f..1ad7d63d 100644 --- a/client/src/pages/Lottery/index.tsx +++ b/client/src/pages/Lottery/index.tsx @@ -1,4 +1,4 @@ -import { useState } from "react"; +import { useCallback, useState } from "react"; import { useCookies } from "react-cookie"; import { useLoaderData } from "react-router-dom"; import { AuthAPI } from "@/apis/authAPI"; @@ -61,7 +61,7 @@ export default function Lottery() { }); const { showToast, ToastComponent } = useToast("이벤트 기간이 아닙니다"); - const handleClickShortCut = () => { + const handleClickShortCut = useCallback(() => { const startDate = getMsTime(data.startDate); const endDate = getMsTime(data.endDate); const currentDate = new Date().getTime(); @@ -73,7 +73,7 @@ export default function Lottery() { } else { showToast(); } - }; + }, [data]); return (
From 5073df9030ef8cb2bada55c9f4e0f6860bfa448f Mon Sep 17 00:00:00 2001 From: jhj2713 Date: Thu, 8 Aug 2024 11:24:19 +0900 Subject: [PATCH 07/15] =?UTF-8?q?refactor:=20=EB=A9=94=EC=9D=B8=20?= =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20=EB=A6=AC=EB=A0=8C=EB=8D=94?= =?UTF-8?q?=EB=A7=81=20=EB=B0=A9=EC=A7=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/src/features/Main/Headline.tsx | 6 +++++- client/src/features/Main/LearnMore.tsx | 6 +++++- client/src/features/Main/Lottery.tsx | 6 +++++- client/src/features/Main/Rush.tsx | 6 +++++- 4 files changed, 20 insertions(+), 4 deletions(-) diff --git a/client/src/features/Main/Headline.tsx b/client/src/features/Main/Headline.tsx index 1267dca8..5d32cce0 100644 --- a/client/src/features/Main/Headline.tsx +++ b/client/src/features/Main/Headline.tsx @@ -1,10 +1,11 @@ +import { memo } from "react"; import { motion } from "framer-motion"; import Keyword from "@/components/Keyword"; import Scroll from "@/components/Scroll"; import { ASCEND, ASCEND_DESCEND, SCROLL_MOTION } from "@/constants/animation.ts"; import { SectionKeyProps } from "@/types/sections.ts"; -export function Headline({ id }: SectionKeyProps) { +function Headline({ id }: SectionKeyProps) { return (
); } + +const MemoizedHeadline = memo(Headline); +export { MemoizedHeadline as Headline }; diff --git a/client/src/features/Main/LearnMore.tsx b/client/src/features/Main/LearnMore.tsx index e40e79e7..242ab7c8 100644 --- a/client/src/features/Main/LearnMore.tsx +++ b/client/src/features/Main/LearnMore.tsx @@ -1,9 +1,10 @@ +import { memo } from "react"; import { motion } from "framer-motion"; import CTAButton from "@/components/CTAButton"; import { ASCEND, SCROLL_MOTION } from "@/constants/animation.ts"; import { SectionKeyProps } from "@/types/sections.ts"; -export function LearnMore({ id }: SectionKeyProps) { +function LearnMore({ id }: SectionKeyProps) { return (
); } + +const MemoizedLearnMore = memo(LearnMore); +export { MemoizedLearnMore as LearnMore }; diff --git a/client/src/features/Main/Lottery.tsx b/client/src/features/Main/Lottery.tsx index 3d4526da..46c1e077 100644 --- a/client/src/features/Main/Lottery.tsx +++ b/client/src/features/Main/Lottery.tsx @@ -1,3 +1,4 @@ +import { memo } from "react"; import { Link } from "react-router-dom"; import LotteryEvent from "@/components/LotteryEvent"; import { LOTTERY_EVENT_DATA } from "@/constants/Main/lotteryEventData.ts"; @@ -5,7 +6,7 @@ import { Section } from "@/features/Main/Section.tsx"; import { SectionKeyProps } from "@/types/sections.ts"; import ArrowIcon from "/public/assets/icons/arrow.svg?react"; -export function Lottery({ id }: SectionKeyProps) { +function Lottery({ id }: SectionKeyProps) { return (
); } + +const MemoizedLottery = memo(Lottery); +export { MemoizedLottery as Lottery }; diff --git a/client/src/features/Main/Rush.tsx b/client/src/features/Main/Rush.tsx index 982c5d7c..04f4ad11 100644 --- a/client/src/features/Main/Rush.tsx +++ b/client/src/features/Main/Rush.tsx @@ -1,3 +1,4 @@ +import { memo } from "react"; import RushEvent, { RushEventProps } from "@/components/RushEvent"; import { Section } from "@/features/Main/Section.tsx"; import { SectionKeyProps } from "@/types/sections.ts"; @@ -42,7 +43,7 @@ export const rushEventData: RushEventProps[] = [ }, ]; -export function Rush({ id }: SectionKeyProps) { +function Rush({ id }: SectionKeyProps) { return (
); } + +const MemoizedRush = memo(Rush); +export { MemoizedRush as Rush }; From a1852639125e098f4377fbb5d794d64cb80c82e8 Mon Sep 17 00:00:00 2001 From: jhj2713 Date: Thu, 8 Aug 2024 11:27:32 +0900 Subject: [PATCH 08/15] =?UTF-8?q?fix:=20onscreen=20=EC=98=A4=EB=A5=98=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/src/features/CasperCustom/CasperCustomFinish.tsx | 3 ++- client/src/features/CasperCustom/CasperCustomFinishing.tsx | 3 ++- client/src/features/CasperCustom/CasperCustomForm.tsx | 3 ++- client/src/features/CasperCustom/CasperCustomProcess.tsx | 3 ++- client/src/pages/CasperCustom/index.tsx | 3 ++- 5 files changed, 10 insertions(+), 5 deletions(-) diff --git a/client/src/features/CasperCustom/CasperCustomFinish.tsx b/client/src/features/CasperCustom/CasperCustomFinish.tsx index 5d7222a4..2e19f0f6 100644 --- a/client/src/features/CasperCustom/CasperCustomFinish.tsx +++ b/client/src/features/CasperCustom/CasperCustomFinish.tsx @@ -11,6 +11,7 @@ import useCasperCustomDispatchContext from "@/hooks/useCasperCustomDispatchConte import useCasperCustomStateContext from "@/hooks/useCasperCustomStateContext"; import { CASPER_ACTION } from "@/types/casperCustom"; 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"; @@ -55,7 +56,7 @@ export function CasperCustomFinish({ handleResetStep }: CasperCustomFinishProps) }; return ( - +
diff --git a/client/src/features/CasperCustom/CasperCustomFinishing.tsx b/client/src/features/CasperCustom/CasperCustomFinishing.tsx index a820aa7e..e99b4681 100644 --- 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"; @@ -37,7 +38,7 @@ export function CasperCustomFinishing({ navigateNextStep }: CasperCustomFinishin return ( <> - + diff --git a/client/src/features/CasperCustom/CasperCustomForm.tsx b/client/src/features/CasperCustom/CasperCustomForm.tsx index f2fcd3c0..1075257b 100644 --- a/client/src/features/CasperCustom/CasperCustomForm.tsx +++ b/client/src/features/CasperCustom/CasperCustomForm.tsx @@ -10,6 +10,7 @@ import useCasperCustomDispatchContext from "@/hooks/useCasperCustomDispatchConte import useCasperCustomStateContext from "@/hooks/useCasperCustomStateContext"; import { CASPER_ACTION } from "@/types/casperCustom"; import { CasperInformationType } from "@/types/lotteryApi"; +import { SCROLL_MOTION } from "../../constants/animation"; import { MyCasperCardFront } from "./MyCasperCardFront"; interface CasperCustomFormProps { @@ -69,7 +70,7 @@ export function CasperCustomForm({ navigateNextStep }: CasperCustomFormProps) { }; return ( - +
diff --git a/client/src/features/CasperCustom/CasperCustomProcess.tsx b/client/src/features/CasperCustom/CasperCustomProcess.tsx index 2b002177..9145d8e7 100644 --- a/client/src/features/CasperCustom/CasperCustomProcess.tsx +++ b/client/src/features/CasperCustom/CasperCustomProcess.tsx @@ -7,6 +7,7 @@ import { DISSOLVE } from "@/constants/animation"; import { MyCasperCardFront } from "@/features/CasperCustom/MyCasperCardFront"; import useCasperCustomStateContext from "@/hooks/useCasperCustomStateContext"; import { getCasperOptionDescription } from "@/utils/CasperCustom/getCasperOptionDescription"; +import { SCROLL_MOTION } from "../../constants/animation"; interface CasperCustomProcessProps { handleClickNextStep: () => void; @@ -39,7 +40,7 @@ export function CasperCustomProcess({ handleClickNextStep }: CasperCustomProcess }; return ( - +
diff --git a/client/src/pages/CasperCustom/index.tsx b/client/src/pages/CasperCustom/index.tsx index 8a405c3c..82752534 100644 --- a/client/src/pages/CasperCustom/index.tsx +++ b/client/src/pages/CasperCustom/index.tsx @@ -13,6 +13,7 @@ import { CasperCustomForm, CasperCustomProcess, } from "@/features/CasperCustom"; +import { SCROLL_MOTION } from "../../constants/animation"; const INITIAL_STEP = 0; @@ -48,7 +49,7 @@ export default function CasperCustom() {

{CUSTOM_STEP_HEADLINE[selectedStep]?.title} From 8044b3e5d3a2776467a8745b29f322db719e3a8c Mon Sep 17 00:00:00 2001 From: jhj2713 Date: Thu, 8 Aug 2024 11:57:42 +0900 Subject: [PATCH 09/15] =?UTF-8?q?refactor:=20custom=20process=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EB=A6=AC=EB=A0=8C=EB=8D=94?= =?UTF-8?q?=EB=A7=81=20=EB=B0=A9=EC=A7=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/src/components/Category/index.tsx | 6 +- client/src/components/ListStep/index.tsx | 6 +- .../CasperCustom/CasperCustomPanel.tsx | 65 +++++++++---------- .../CasperCustom/CasperCustomProcess.tsx | 21 +++--- .../CasperCustom/CustomOptionImageItem.tsx | 13 +++- .../CasperCustom/EyesOptionImageItem.tsx | 12 +++- .../src/features/CasperCustom/EyesPanel.tsx | 18 +++-- 7 files changed, 81 insertions(+), 60 deletions(-) diff --git a/client/src/components/Category/index.tsx b/client/src/components/Category/index.tsx index a2356bb0..1868306d 100644 --- 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 {children}; } + +export default memo(Category); diff --git a/client/src/components/ListStep/index.tsx b/client/src/components/ListStep/index.tsx index 18e43b48..b0c71c7f 100644 --- 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 ); } + +export default memo(ListStep); diff --git a/client/src/features/CasperCustom/CasperCustomPanel.tsx b/client/src/features/CasperCustom/CasperCustomPanel.tsx index e1f724d5..7c3b331d 100644 --- a/client/src/features/CasperCustom/CasperCustomPanel.tsx +++ b/client/src/features/CasperCustom/CasperCustomPanel.tsx @@ -1,4 +1,4 @@ -import { useEffect } from "react"; +import { useCallback, useEffect } from "react"; import { cva } from "class-variance-authority"; import { CASPER_OPTION, CUSTOM_OPTION, OPTION_TYPE } from "@/constants/CasperCustom/casper"; import useCasperCustomDispatchContext from "@/hooks/useCasperCustomDispatchContext"; @@ -11,7 +11,7 @@ import { SharedPanel } from "./SharedPanel"; interface GetCustomOptionImageItemProps { optionId: string; isSelected: boolean; - handleClickOption: () => void; + handleClickOption: (id: string) => void; } function getCustomOptionImageItem({ @@ -50,7 +50,7 @@ function getFilteredOptions({ getCustomOptionImageItem({ optionId: option.id, isSelected: selectedOptionId === option.id || false, - handleClickOption: () => handleClickOption(option.id), + handleClickOption, }) ); } @@ -67,25 +67,24 @@ export function MouthPanel() { const mouthSelectedIdx = selectedCasperIdx[CUSTOM_OPTION.MOUTH]; const mouthSelectedOption = mouthOptions[mouthSelectedIdx]; + const handleDispatchOption = useCallback((id: string) => { + dispatch({ + type: CASPER_ACTION.SELECT_OPTION, + payload: { option: CUSTOM_OPTION.MOUTH, id }, + }); + }, []); + const mouthLimited = getFilteredOptions({ optionType: OPTION_TYPE.LIMITED, options: mouthOptions, selectedOptionId: mouthSelectedOption?.id, - handleClickOption: (optionId) => - dispatch({ - type: CASPER_ACTION.SELECT_OPTION, - payload: { option: CUSTOM_OPTION.MOUTH, id: optionId }, - }), + handleClickOption: handleDispatchOption, }); const mouthBasic = getFilteredOptions({ optionType: OPTION_TYPE.BASIC, options: mouthOptions, selectedOptionId: mouthSelectedOption?.id, - handleClickOption: (optionId) => - dispatch({ - type: CASPER_ACTION.SELECT_OPTION, - payload: { option: CUSTOM_OPTION.MOUTH, id: optionId }, - }), + handleClickOption: handleDispatchOption, }); return ( @@ -113,6 +112,13 @@ export function ColorPanel() { const colorSelectedIdx = selectedCasperIdx[CUSTOM_OPTION.COLOR]; const colorSelectedOption = colorOptions[colorSelectedIdx]; + const handleDispatchOption = useCallback((id: string) => { + dispatch({ + type: CASPER_ACTION.SELECT_OPTION, + payload: { option: CUSTOM_OPTION.COLOR, id }, + }); + }, []); + const colorLimited = colorOptions .filter((option) => option.type === OPTION_TYPE.LIMITED) .map((option) => { @@ -124,12 +130,7 @@ export function ColorPanel() { selected: colorSelectedOption?.id === option.id || false, })} style={{ backgroundColor: option.id }} - onClick={() => - dispatch({ - type: CASPER_ACTION.SELECT_OPTION, - payload: { option: CUSTOM_OPTION.COLOR, id: option.id }, - }) - } + onClick={() => handleDispatchOption(option.id)} /> ), }; @@ -145,12 +146,7 @@ export function ColorPanel() { selected: colorSelectedOption?.id === option.id || false, })} style={{ backgroundColor: option.id }} - onClick={() => - dispatch({ - type: CASPER_ACTION.SELECT_OPTION, - payload: { option: CUSTOM_OPTION.COLOR, id: option.id }, - }) - } + onClick={() => handleDispatchOption(option.id)} /> ), }; @@ -185,25 +181,24 @@ export function StickerPanel() { }); }, []); + const handleDispatchOption = useCallback((id: string) => { + dispatch({ + type: CASPER_ACTION.SELECT_OPTION, + payload: { option: CUSTOM_OPTION.STICKER, id }, + }); + }, []); + const stickerLimited = getFilteredOptions({ optionType: OPTION_TYPE.LIMITED, options: stickerOptions, selectedOptionId: stickerSelectedOption?.id, - handleClickOption: (optionId) => - dispatch({ - type: CASPER_ACTION.SELECT_OPTION, - payload: { option: CUSTOM_OPTION.STICKER, id: optionId }, - }), + handleClickOption: handleDispatchOption, }); const stickerBasic = getFilteredOptions({ optionType: OPTION_TYPE.BASIC, options: stickerOptions, selectedOptionId: stickerSelectedOption?.id, - handleClickOption: (optionId) => - dispatch({ - type: CASPER_ACTION.SELECT_OPTION, - payload: { option: CUSTOM_OPTION.STICKER, id: optionId }, - }), + handleClickOption: handleDispatchOption, }); return ( diff --git a/client/src/features/CasperCustom/CasperCustomProcess.tsx b/client/src/features/CasperCustom/CasperCustomProcess.tsx index 9145d8e7..79ec2c46 100644 --- a/client/src/features/CasperCustom/CasperCustomProcess.tsx +++ b/client/src/features/CasperCustom/CasperCustomProcess.tsx @@ -1,4 +1,4 @@ -import { useState } from "react"; +import { useCallback, useState } from "react"; import { motion } from "framer-motion"; import CTAButton from "@/components/CTAButton"; import ListStep from "@/components/ListStep"; @@ -13,6 +13,8 @@ interface CasperCustomProcessProps { handleClickNextStep: () => void; } +const CUSTOM_OPTION_LABELS = CUSTOM_OPTION_ARRAY.map((option) => option.label); + export function CasperCustomProcess({ handleClickNextStep }: CasperCustomProcessProps) { const { selectedCasperIdx } = useCasperCustomStateContext(); const [selectedStepIdx, setSelectedStepIdx] = useState(0); @@ -21,23 +23,26 @@ export function CasperCustomProcess({ handleClickNextStep }: CasperCustomProcess const PanelComponent = CUSTOM_OPTION_ARRAY[selectedStepIdx].component; - const customOptionLabels = CUSTOM_OPTION_ARRAY.map((option) => option.label); const isFirstOption = selectedStepIdx === 0; const isLastOption = selectedStepIdx === CUSTOM_OPTION_ARRAY.length - 1; - const handleClickPrevButton = () => { + const handleClickPrevButton = useCallback(() => { if (!isFirstOption) { setSelectedStepIdx(selectedStepIdx - 1); } - }; + }, [selectedStepIdx]); - const handleClickNextButton = () => { + const handleClickNextButton = useCallback(() => { if (!isLastOption) { setSelectedStepIdx(selectedStepIdx + 1); } else { handleClickNextStep(); } - }; + }, [selectedStepIdx, isLastOption]); + + const handleClickOption = useCallback((idx: number) => { + setSelectedStepIdx(idx); + }, []); return ( @@ -46,9 +51,9 @@ export function CasperCustomProcess({ handleClickNextStep }: CasperCustomProcess
setSelectedStepIdx(idx)} + handleClickOption={handleClickOption} /> {PanelComponent}
diff --git a/client/src/features/CasperCustom/CustomOptionImageItem.tsx b/client/src/features/CasperCustom/CustomOptionImageItem.tsx index 021a46f9..9b0366a3 100644 --- a/client/src/features/CasperCustom/CustomOptionImageItem.tsx +++ b/client/src/features/CasperCustom/CustomOptionImageItem.tsx @@ -1,9 +1,10 @@ +import { memo } from "react"; import { cva } from "class-variance-authority"; interface CustomOptionImageItemProps { optionId: string; selected: boolean; - handleClickOption: () => void; + handleClickOption: (id: string) => void; } const selectableVariants = cva( @@ -18,14 +19,20 @@ const selectableVariants = cva( } ); -export function CustomOptionImageItem({ +function CustomOptionImageItem({ optionId, selected, handleClickOption, }: CustomOptionImageItemProps) { return ( -
  • +
  • handleClickOption(optionId)} + >
    • ); } + +const MemoizedCustomOptionImageItem = memo(CustomOptionImageItem); +export { MemoizedCustomOptionImageItem as CustomOptionImageItem }; diff --git a/client/src/features/CasperCustom/EyesOptionImageItem.tsx b/client/src/features/CasperCustom/EyesOptionImageItem.tsx index a12a0ed7..7fb23742 100644 --- a/client/src/features/CasperCustom/EyesOptionImageItem.tsx +++ b/client/src/features/CasperCustom/EyesOptionImageItem.tsx @@ -1,8 +1,10 @@ +import { memo } from "react"; import { cva } from "class-variance-authority"; interface EyesOptionImageItemProps { + id: string; isSelected: boolean; - handleClickOption: () => void; + handleClickOption: (val: string) => void; previewUrl: string; } @@ -15,7 +17,8 @@ const selectableImageVariants = cva(`rounded-1000 border-[2px] cursor-pointer`, }, }); -export function EyesOptionImageItem({ +function EyesOptionImageItem({ + id, isSelected, handleClickOption, previewUrl, @@ -25,9 +28,12 @@ export function EyesOptionImageItem({ className={selectableImageVariants({ selected: isSelected, })} - onClick={handleClickOption} + onClick={() => handleClickOption(id)} > ); } + +const MemoizedEyesOptionImageItem = memo(EyesOptionImageItem); +export { MemoizedEyesOptionImageItem as EyesOptionImageItem }; diff --git a/client/src/features/CasperCustom/EyesPanel.tsx b/client/src/features/CasperCustom/EyesPanel.tsx index 2a0f4e1e..827c4e60 100644 --- a/client/src/features/CasperCustom/EyesPanel.tsx +++ b/client/src/features/CasperCustom/EyesPanel.tsx @@ -1,3 +1,4 @@ +import { useCallback } from "react"; import Category from "@/components/Category"; import { CASPER_OPTION, @@ -30,19 +31,19 @@ export function EyesPanel() { POSITION_OPTION.RIGHT, ]; - const handleClickEyes = (id: string) => { + const handleClickEyes = useCallback((id: string) => { dispatch({ type: CASPER_ACTION.SELECT_OPTION, payload: { option: CUSTOM_OPTION.EYES, id }, }); - }; + }, []); - const handleClickEyesDirection = (id: string) => { + const handleClickEyesDirection = useCallback((id: string) => { dispatch({ type: CASPER_ACTION.SELECT_OPTION, payload: { option: CUSTOM_OPTION.EYES_DIRECTION, id }, }); - }; + }, []); return ( @@ -52,8 +53,9 @@ export function EyesPanel() { {limitedEyes.map((eye) => ( handleClickEyes(eye.id)} + handleClickOption={handleClickEyes} previewUrl={`${eye.id}-center.png`} /> ))} @@ -68,8 +70,9 @@ export function EyesPanel() { {basicEyes.map((eye) => ( handleClickEyes(eye.id)} + handleClickOption={handleClickEyes} previewUrl={`${eye.id}-center.png`} /> ))} @@ -85,8 +88,9 @@ export function EyesPanel() { eyesDirectionArray.map((direction) => ( handleClickEyesDirection(direction)} + handleClickOption={handleClickEyesDirection} previewUrl={`${eyesOptions[0].id}-${direction}.png`} /> ))} From 7fd5b613eb4203783577d25bff1de0d34ea20d1b Mon Sep 17 00:00:00 2001 From: jhj2713 Date: Thu, 8 Aug 2024 12:03:06 +0900 Subject: [PATCH 10/15] =?UTF-8?q?refactor:=20custom=20form=20=EB=A6=AC?= =?UTF-8?q?=EB=A0=8C=EB=8D=94=EB=A7=81=20=EB=B0=A9=EC=A7=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/src/components/TextField/index.tsx | 6 ++++-- .../src/features/CasperCustom/CasperCardFrontUI.tsx | 6 +++++- .../src/features/CasperCustom/CasperCustomForm.tsx | 9 +++++---- .../src/features/CasperCustom/MyCasperCardFront.tsx | 12 ++++++++++-- 4 files changed, 24 insertions(+), 9 deletions(-) diff --git a/client/src/components/TextField/index.tsx b/client/src/components/TextField/index.tsx index b7ecc60f..2dfe429b 100644 --- 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({

    ); } + +export default memo(TextField); diff --git a/client/src/features/CasperCustom/CasperCardFrontUI.tsx b/client/src/features/CasperCustom/CasperCardFrontUI.tsx index 07c3de02..b4a242e1 100644 --- 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({
    ); } + +const MemoizedCasperCardFrontUI = memo(CasperCardFrontUI); +export { MemoizedCasperCardFrontUI as CasperCardFrontUI }; diff --git a/client/src/features/CasperCustom/CasperCustomForm.tsx b/client/src/features/CasperCustom/CasperCustomForm.tsx index 1075257b..a3ca1791 100644 --- a/client/src/features/CasperCustom/CasperCustomForm.tsx +++ b/client/src/features/CasperCustom/CasperCustomForm.tsx @@ -1,3 +1,4 @@ +import { useCallback } from "react"; import { motion } from "framer-motion"; import { useCookies } from "react-cookie"; import { LotteryAPI } from "@/apis/lotteryAPI"; @@ -25,13 +26,13 @@ export function CasperCustomForm({ navigateNextStep }: CasperCustomFormProps) { const canSubmit = casperName.length !== 0; - 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 = { diff --git a/client/src/features/CasperCustom/MyCasperCardFront.tsx b/client/src/features/CasperCustom/MyCasperCardFront.tsx index 95d38c1f..924ba2f5 100644 --- a/client/src/features/CasperCustom/MyCasperCardFront.tsx +++ b/client/src/features/CasperCustom/MyCasperCardFront.tsx @@ -1,3 +1,4 @@ +import { memo, useCallback } from "react"; import { CASPER_SIZE_OPTION } from "@/constants/CasperCustom/casper"; import useCasperCustomDispatchContext from "@/hooks/useCasperCustomDispatchContext"; import useCasperCustomStateContext from "@/hooks/useCasperCustomStateContext"; @@ -11,7 +12,7 @@ interface MyCasperCardFrontProps { hasRandomButton?: boolean; } -export function MyCasperCardFront({ +function MyCasperCardFront({ size, optionDescription, casperName, @@ -20,6 +21,10 @@ export function MyCasperCardFront({ const { selectedCasperIdx } = useCasperCustomStateContext(); const dispatch = useCasperCustomDispatchContext(); + const handleDispatchShuffle = useCallback(() => { + dispatch({ type: CASPER_ACTION.SHUFFLE_CASPER }); + }, []); + return ( dispatch({ type: CASPER_ACTION.SHUFFLE_CASPER })} + handleShuffleCasper={handleDispatchShuffle} /> ); } + +const MemoizedMyCasperCardFront = memo(MyCasperCardFront); +export { MemoizedMyCasperCardFront as MyCasperCardFront }; From d0c32d18da328087eeab42c37d1734c2fa1d3072 Mon Sep 17 00:00:00 2001 From: jhj2713 Date: Thu, 8 Aug 2024 12:07:42 +0900 Subject: [PATCH 11/15] =?UTF-8?q?fix:=20onscreen=20=EC=8A=A4=ED=81=AC?= =?UTF-8?q?=EB=A1=A4=20=EC=95=A0=EB=8B=88=EB=A9=94=EC=9D=B4=EC=85=98=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/src/pages/CasperShowCase/index.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/client/src/pages/CasperShowCase/index.tsx b/client/src/pages/CasperShowCase/index.tsx index ef5a19e5..bd0e0b31 100644 --- a/client/src/pages/CasperShowCase/index.tsx +++ b/client/src/pages/CasperShowCase/index.tsx @@ -5,6 +5,7 @@ import { CUSTOM_OPTION } from "@/constants/CasperCustom/casper"; import { ASCEND, DISSOLVE } from "@/constants/animation"; import { CasperCards } from "@/features/CasperShowCase"; import { GetCasperListResponse } from "@/types/lotteryApi"; +import { SCROLL_MOTION } from "../../constants/animation"; function getCardListData(cardList: GetCasperListResponse) { return cardList.map((card) => { @@ -35,7 +36,7 @@ export default function CasperShowCase() {

    카드 위에 커서를 올리면 기대평을 볼 수 있어요 @@ -44,7 +45,7 @@ export default function CasperShowCase() { - + From aee22bb1dfa9d34ab0b29e74778f7b66b053bcce Mon Sep 17 00:00:00 2001 From: jhj2713 Date: Thu, 8 Aug 2024 12:14:07 +0900 Subject: [PATCH 12/15] =?UTF-8?q?fix:=20=EC=95=A0=EB=8B=88=EB=A9=94?= =?UTF-8?q?=EC=9D=B4=EC=85=98=20duration=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/src/constants/CasperShowCase/showCase.ts | 6 +++--- .../src/features/CasperShowCase/TransitionCasperCards.tsx | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/client/src/constants/CasperShowCase/showCase.ts b/client/src/constants/CasperShowCase/showCase.ts index 756a9f48..212e74cb 100644 --- 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/CasperShowCase/TransitionCasperCards.tsx b/client/src/features/CasperShowCase/TransitionCasperCards.tsx index 73d14c0f..6373f931 100644 --- a/client/src/features/CasperShowCase/TransitionCasperCards.tsx +++ b/client/src/features/CasperShowCase/TransitionCasperCards.tsx @@ -37,7 +37,7 @@ export function TransitionCasperCards({ const startAnimation = (x: number) => { transitionControls.start({ x: [x, x + diffX], - transition: CARD_TRANSITION, + transition: CARD_TRANSITION(cardList.length), }); }; From 2609fa9aa76529069566066276e78d3014b33052 Mon Sep 17 00:00:00 2001 From: jhj2713 Date: Thu, 8 Aug 2024 16:20:58 +0900 Subject: [PATCH 13/15] =?UTF-8?q?fix:=20useHeaderStyleObserver=20=EB=AC=B4?= =?UTF-8?q?=ED=95=9C=20=EB=A6=AC=EB=A0=8C=EB=8D=94=EB=A7=81=20=EB=B0=A9?= =?UTF-8?q?=EC=A7=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/src/hooks/useHeaderStyleObserver.ts | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/client/src/hooks/useHeaderStyleObserver.ts b/client/src/hooks/useHeaderStyleObserver.ts index 6afea4a0..3344930b 100644 --- a/client/src/hooks/useHeaderStyleObserver.ts +++ b/client/src/hooks/useHeaderStyleObserver.ts @@ -1,4 +1,4 @@ -import { useEffect, useRef, useState } from "react"; +import { useEffect, useRef } from "react"; import useScrollHeaderStyleContext from "@/hooks/useScrollHeaderStyleContext"; import { HeaderType } from "@/types/scrollHeaderStyle"; import { SectionKey } from "@/types/sections.ts"; @@ -10,7 +10,7 @@ interface HeaderStyleConfig { export default function useHeaderStyleObserver(config: HeaderStyleConfig) { const { setActiveSection, setHeaderType } = useScrollHeaderStyleContext(); const containerRef = useRef(null); - const [visibleSections, setVisibleSections] = useState>(new Set()); + const visibleSectionsRef = useRef>(new Set()); const updateVisibleSections = ( entries: IntersectionObserverEntry[], @@ -21,7 +21,7 @@ export default function useHeaderStyleObserver(config: HeaderStyleConfig) { if (entry.isIntersecting) newVisibleSections.add(sectionId); else newVisibleSections.delete(sectionId); }); - setVisibleSections(newVisibleSections); + visibleSectionsRef.current = newVisibleSections; }; const updateHeaderStyle = (newVisibleSections: Set) => { @@ -38,7 +38,7 @@ export default function useHeaderStyleObserver(config: HeaderStyleConfig) { useEffect(() => { const observer = new IntersectionObserver( (entries) => { - const newVisibleSections = new Set(visibleSections); + const newVisibleSections = new Set(visibleSectionsRef.current); updateVisibleSections(entries, newVisibleSections); updateHeaderStyle(newVisibleSections); }, @@ -52,7 +52,7 @@ export default function useHeaderStyleObserver(config: HeaderStyleConfig) { sections.forEach((section) => observer.observe(section)); return () => observer.disconnect(); - }, [setActiveSection, setHeaderType, config.darkSections, visibleSections]); + }, [setActiveSection, setHeaderType, config.darkSections]); return containerRef; } From c5e9fd3c5d691e333172868356c0b720e3153949 Mon Sep 17 00:00:00 2001 From: jhj2713 Date: Fri, 9 Aug 2024 10:10:35 +0900 Subject: [PATCH 14/15] =?UTF-8?q?feat:=20=EB=92=A4=EB=A1=9C=EA=B0=80?= =?UTF-8?q?=EA=B8=B0/=EC=83=88=EB=A1=9C=EA=B3=A0=EC=B9=A8=20=EB=B0=A9?= =?UTF-8?q?=EC=A7=80=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../CasperCustom/CasperCustomFinish.tsx | 8 +++- .../CasperCustom/CasperCustomFinishing.tsx | 9 ++++- client/src/hooks/useBlockNavigation.ts | 37 +++++++++++++++++++ client/src/pages/CasperCustom/index.tsx | 16 ++++++-- client/src/pages/Lottery/index.tsx | 4 +- client/src/types/lotteryApi.ts | 7 ++-- 6 files changed, 69 insertions(+), 12 deletions(-) create mode 100644 client/src/hooks/useBlockNavigation.ts diff --git a/client/src/features/CasperCustom/CasperCustomFinish.tsx b/client/src/features/CasperCustom/CasperCustomFinish.tsx index 2e19f0f6..fad14a85 100644 --- a/client/src/features/CasperCustom/CasperCustomFinish.tsx +++ b/client/src/features/CasperCustom/CasperCustomFinish.tsx @@ -18,9 +18,13 @@ 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 dispatch = useCasperCustomDispatchContext(); @@ -34,6 +38,8 @@ export function CasperCustomFinish({ handleResetStep }: CasperCustomFinishProps) if (!cookies[COOKIE_TOKEN_KEY]) { return; } + + unblockNavigation(); getApplyCount(); }, []); diff --git a/client/src/features/CasperCustom/CasperCustomFinishing.tsx b/client/src/features/CasperCustom/CasperCustomFinishing.tsx index e99b4681..a5befcba 100644 --- a/client/src/features/CasperCustom/CasperCustomFinishing.tsx +++ b/client/src/features/CasperCustom/CasperCustomFinishing.tsx @@ -27,13 +27,18 @@ 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 ( diff --git a/client/src/hooks/useBlockNavigation.ts b/client/src/hooks/useBlockNavigation.ts new file mode 100644 index 00000000..e43d4c0c --- /dev/null +++ b/client/src/hooks/useBlockNavigation.ts @@ -0,0 +1,37 @@ +import { useEffect, useState } from "react"; +import { unstable_usePrompt, useLocation } from "react-router-dom"; + +export function useBlockNavigation(message: string) { + const location = useLocation(); + const [isBlocking, setIsBlocking] = useState(false); + + unstable_usePrompt({ when: isBlocking, message }); + + const unblockNavigation = () => { + setIsBlocking(false); + }; + + const handleBeforeUnload = (e: BeforeUnloadEvent) => { + if (isBlocking) { + e.preventDefault(); + e.returnValue = ""; + } + }; + + useEffect(() => { + setIsBlocking(true); + + return () => { + setIsBlocking(false); + }; + }, [location]); + useEffect(() => { + window.addEventListener("beforeunload", handleBeforeUnload); + + return () => { + window.removeEventListener("beforeunload", handleBeforeUnload); + }; + }, [isBlocking]); + + return { unblockNavigation }; +} diff --git a/client/src/pages/CasperCustom/index.tsx b/client/src/pages/CasperCustom/index.tsx index 91655af9..9cd33c63 100644 --- a/client/src/pages/CasperCustom/index.tsx +++ b/client/src/pages/CasperCustom/index.tsx @@ -1,4 +1,4 @@ -import { useState } from "react"; +import { useCallback, useState } from "react"; import { motion } from "framer-motion"; import { CUSTOM_STEP_HEADLINE, @@ -14,12 +14,17 @@ import { CasperCustomForm, CasperCustomProcess, } from "@/features/CasperCustom"; +import { useBlockNavigation } from "@/hooks/useBlockNavigation"; import useHeaderStyleObserver from "@/hooks/useHeaderStyleObserver"; import { SCROLL_MOTION } from "../../constants/animation"; const INITIAL_STEP = 0; export default function CasperCustom() { + const { unblockNavigation } = useBlockNavigation( + "이 페이지를 떠나면 모든 변경 사항이 저장되지 않습니다. 페이지를 떠나시겠습니까?" + ); + const containerRef = useHeaderStyleObserver({ darkSections: [CASPER_CUSTOM_SECTIONS.CUSTOM], }); @@ -28,7 +33,7 @@ export default function CasperCustom() { const selectedStep = CUSTOM_STEP_OPTION_ARRAY[selectedStepIdx]; const handleClickNextStep = () => { - setSelectedStepIdx(selectedStepIdx + 1); + setSelectedStepIdx((prevSelectedIdx) => prevSelectedIdx + 1); }; const handleResetStep = () => { @@ -43,7 +48,12 @@ export default function CasperCustom() { } else if (selectedStep === CUSTOM_STEP_OPTION.FINISHING) { return ; } else if (selectedStep === CUSTOM_STEP_OPTION.FINISH) { - return ; + return ( + + ); } return <>; }; diff --git a/client/src/pages/Lottery/index.tsx b/client/src/pages/Lottery/index.tsx index 1ad7d63d..071a1d05 100644 --- a/client/src/pages/Lottery/index.tsx +++ b/client/src/pages/Lottery/index.tsx @@ -62,8 +62,8 @@ export default function Lottery() { const { showToast, ToastComponent } = useToast("이벤트 기간이 아닙니다"); const handleClickShortCut = useCallback(() => { - const startDate = getMsTime(data.startDate); - const endDate = getMsTime(data.endDate); + const startDate = getMsTime(data.eventStartDate); + const endDate = getMsTime(data.eventEndDate); const currentDate = new Date().getTime(); const isEventPeriod = currentDate >= startDate && currentDate <= endDate; diff --git a/client/src/types/lotteryApi.ts b/client/src/types/lotteryApi.ts index 1e4f2782..55b5253d 100644 --- a/client/src/types/lotteryApi.ts +++ b/client/src/types/lotteryApi.ts @@ -24,8 +24,7 @@ export interface GetApplyCountResponse { } export interface GetLotteryResponse { - lotteryEventId: number; - startDate: string; - endDate: string; - winnerCount: number; + eventStartDate: string; + eventEndDate: string; + activePeriod: number; } From b02a66fdee0b32de8b27bd896257462af54549c8 Mon Sep 17 00:00:00 2001 From: jhj2713 Date: Fri, 9 Aug 2024 10:16:54 +0900 Subject: [PATCH 15/15] =?UTF-8?q?fix:=20build=20=EC=98=A4=EB=A5=98=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/src/pages/CasperCustom/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/src/pages/CasperCustom/index.tsx b/client/src/pages/CasperCustom/index.tsx index 9cd33c63..6155e1d9 100644 --- a/client/src/pages/CasperCustom/index.tsx +++ b/client/src/pages/CasperCustom/index.tsx @@ -1,4 +1,4 @@ -import { useCallback, useState } from "react"; +import { useState } from "react"; import { motion } from "framer-motion"; import { CUSTOM_STEP_HEADLINE,