refact: 선택지 전환 효과 추가

LikeLion-KNU · Sep 9, 2024 · 951b64d · 951b64d
1 parent 3921547
commit 951b64d
Showing 1 changed file with 61 additions and 49 deletions.
diff --git a/src/pages/SelectPage.tsx b/src/pages/SelectPage.tsx
@@ -1,5 +1,6 @@
 import { useState } from "react";
 import { useNavigate } from "react-router-dom";
+import { CSSTransition, TransitionGroup } from "react-transition-group";
 
 import { Button } from "@/components/form/Button";
 import { Text } from "@/components/typography";
@@ -14,10 +15,14 @@ import { TreeNode } from "@/services/TreeNode";
 import dongari from "@/assets/images/dongari.svg";
 
 import { ButtonWrapper, SelectPageWrapper } from "./SelectPage.style";
+import "@/transition/fade-slide.css";
 
 export default function SelectPage() {
     let navigate = useNavigate();
 
+    // 화면 전환용 더미 데이터
+    const [keyProp, setKeyProp] = useState(0);
+
     const [root, setRoot] = useState<TreeNode | null>(null);
     const [selectedButton, setSelectedButton] = useState("");
     const field = [
@@ -50,6 +55,7 @@ export default function SelectPage() {
         setSelectedButton(id); // 클릭된 버튼 상태 저장
 
         setTimeout(() => {
+            setKeyProp(keyProp + 1);
             if (id === "left") {
                 if (root?.left?.getValue.question === null) {
                     navigate(`/loading?type=${root?.left?.getValue.resultType}`);
@@ -65,59 +71,65 @@ export default function SelectPage() {
             } else if (id.startsWith("root")) {
                 setRoot(chooseSection((e.target as HTMLButtonElement).innerText));
             }
+            // setKeyProp(false); // 0.7초 후 다음 전환을 위해 false로 되돌림
             setSelectedButton(""); // 애니메이션 끝난 후 상태 초기화
         }, 700); // 0.5초 후에 root 변경
     }
 
     return (
-        <SelectPageWrapper variants={root === null ? "field" : "choice"}>
-            <img src={dongari} alt="동BTI" style={{ aspectRatio: "1/1", width: "20vh" }}></img>
-            {root ? (
-                <Text size="xl">{root?.getValue.question}</Text>
-            ) : (
-                <Text size="m" style={{ textAlign: "center", fontWeight: "bold" }}>
-                    두근두근 설레는 가두모집! <br /> 동아리 부스가 엄청 많다! <br /> 어느 분야부터 설명을 들어볼까?
-                </Text>
-            )}
-            <ButtonWrapper variants={root === null ? "field" : "choice"}>
-                {root ? (
-                    <>
-                        <Button
-                            id="left"
-                            width="80%"
-                            height="7vh"
-                            variants={selectedButton === "left" ? "primary" : "select"}
-                            onClick={handleClick}
-                        >
-                            <Text size="s">{root?.left?.getValue.choice}</Text>
-                        </Button>
-                        <Button
-                            id="right"
-                            width="80%"
-                            height="7vh"
-                            variants={selectedButton === "right" ? "primary" : "select"}
-                            onClick={handleClick}
-                        >
-                            <Text size="s">{root?.right?.getValue.choice}</Text>
-                        </Button>
-                    </>
-                ) : (
-                    <>
-                        {field.map((value, index) => (
-                            <Button
-                                key={index}
-                                id={`root${index}`}
-                                width="80%"
-                                height="7vh"
-                                variants={selectedButton === `root${index}` ? "primary" : "select"}
-                                onClick={handleClick}
-                            >
-                                <Text size="s">{value}</Text>
-                            </Button>
-                        ))}
-                    </>
-                )}
-            </ButtonWrapper>
-        </SelectPageWrapper>
+        <TransitionGroup style={{ width: "100%", position: "absolute", left: "0" }}>
+            <CSSTransition key={keyProp} timeout={500} classNames="fade-slide">
+                <SelectPageWrapper variants={root === null ? "field" : "choice"}>
+                    <img src={dongari} alt="동BTI" style={{ aspectRatio: "1/1", width: "20vh" }}></img>
+                    {root ? (
+                        <Text size="xl">{root?.getValue.question}</Text>
+                    ) : (
+                        <Text size="m" style={{ textAlign: "center", fontWeight: "bold" }}>
+                            두근두근 설레는 가두모집! <br /> 동아리 부스가 엄청 많다! <br /> 어느 분야부터 설명을
+                            들어볼까?
+                        </Text>
+                    )}
+                    <ButtonWrapper variants={root === null ? "field" : "choice"}>
+                        {root ? (
+                            <>
+                                <Button
+                                    id="left"
+                                    width="80%"
+                                    height="7vh"
+                                    variants={selectedButton === "left" ? "primary" : "select"}
+                                    onClick={handleClick}
+                                >
+                                    <Text size="s">{root?.left?.getValue.choice}</Text>
+                                </Button>
+                                <Button
+                                    id="right"
+                                    width="80%"
+                                    height="7vh"
+                                    variants={selectedButton === "right" ? "primary" : "select"}
+                                    onClick={handleClick}
+                                >
+                                    <Text size="s">{root?.right?.getValue.choice}</Text>
+                                </Button>
+                            </>
+                        ) : (
+                            <>
+                                {field.map((value, index) => (
+                                    <Button
+                                        key={index}
+                                        id={`root${index}`}
+                                        width="80%"
+                                        height="7vh"
+                                        variants={selectedButton === `root${index}` ? "primary" : "select"}
+                                        onClick={handleClick}
+                                    >
+                                        <Text size="s">{value}</Text>
+                                    </Button>
+                                ))}
+                            </>
+                        )}
+                    </ButtonWrapper>
+                </SelectPageWrapper>
+            </CSSTransition>
+        </TransitionGroup>
     );
 }