Merge branch 'develop' into feat/select

package.json

@@ -18,9 +18,11 @@
         "@emotion/styled": "^11.13.0",
         "@ramonak/react-progress-bar": "^5.2.0",
         "framer-motion": "^11.3.30",
+        "hangul-js": "^0.2.6",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
-        "react-router-dom": "^6.26.1"
+        "react-router-dom": "^6.26.1",
+        "zustand": "^4.5.5"
     },
     "devDependencies": {
         "@emotion/babel-plugin": "^11.12.0",

src/Router.tsx

@@ -4,11 +4,19 @@ import { RootLayout } from "./components/layout/RootLayout";
 import HomePage from "./pages/HomePage";
 import SelectPage from "./pages/SelectPage";
 
+import LoadingPage from './pages/ResultLoading';
+import ResultShare from "./pages/ResultShare";
+import ResultPage from "./pages/ResultPage";
+
+
 export const Router = () => {
     return (
         <Routes>
             <Route path="/" element={<RootLayout />}>
                 <Route index element={<HomePage />}></Route>
+                <Route path="/loading" element={<LoadingPage />} /> 
+                <Route path="/result" element={<ResultPage />}></Route>
+                <Route path="/share" element={<ResultShare />}></Route>
             </Route>
             <Route path="/select" element={<RootLayout />}>
                 <Route index element={<SelectPage />}></Route>

src/components/display/EmojiAnimation.tsx

@@ -0,0 +1,19 @@
+import React, { useState, useEffect } from "react";
+import { ZoomAnimation  } from "@/pages/ResultLoading.style";
+
+
+const EmojiAnimation: React.FC = () => {
+  const emojis: string[] = ["🐶", "🏃‍♂️", "🏋️", "🏓", "🎤", "⚽", "🎸"];
+  const [currentEmojiIndex, setCurrentEmojiIndex] = useState<number>(0);
+
+  useEffect(function changeEmojiByInterval() {
+    const emojiInterval = setInterval(() => {
+          setCurrentEmojiIndex((prevIndex) => (prevIndex + 1) % emojis.length);
+    }, 1000); 
+    return () => clearInterval(emojiInterval);
+}, []);
+
+  return <ZoomAnimation>{emojis[currentEmojiIndex]}</ZoomAnimation>;
+};
+
+export default EmojiAnimation;

src/components/display/TypingAnimation.tsx

@@ -0,0 +1,83 @@
+import React, { useState, useEffect, useRef } from "react";
+import Hangul from "hangul-js";
+import { TypingText } from "@/pages/ResultLoading.style";
+
+interface TypingAnimationProps {
+  texts: string[];
+  typingInterval: number;
+  deleteInterval: number;
+  waitInterval: number;
+}
+
+const TypingAnimation: React.FC<TypingAnimationProps> = ({
+  texts,
+  typingInterval,
+  deleteInterval,
+  waitInterval,
+}) => {
+  const [displayedText, setDisplayedText] = useState<string>("");
+  const [currentTextIndex, setCurrentTextIndex] = useState<number>(0);
+  const [isCursorBlinking, setIsCursorBlinking] = useState<boolean>(false);
+
+  const index = useRef<number>(0);
+  const isDeleting = useRef<boolean>(false);
+  const typeTimeout = useRef<NodeJS.Timeout | null>(null);
+
+  useEffect(() => {
+    const disassembled = Hangul.disassemble(texts[currentTextIndex]);
+
+    const handleTyping = () => {
+      if (!isDeleting.current) {
+        setIsCursorBlinking(false);
+
+        if (index.current <= disassembled.length) {
+          const nextText = Hangul.assemble(disassembled.slice(0, index.current));
+          setDisplayedText(nextText);
+          index.current++;
+        } else {
+          setIsCursorBlinking(true);
+          setTimeout(() => {
+            isDeleting.current = true;
+            index.current = texts[currentTextIndex].length;
+            setIsCursorBlinking(false);
+            handleTyping();
+          }, waitInterval);
+          return;
+        }
+      } else {
+        if (index.current > 0) {
+          setDisplayedText((prevText) => prevText.slice(0, index.current - 1));
+          index.current--;
+        } else {
+          setCurrentTextIndex((prevIndex) => (prevIndex + 1) % texts.length);
+          isDeleting.current = false;
+          setDisplayedText("");
+          if (typeTimeout.current) clearTimeout(typeTimeout.current);
+          setIsCursorBlinking(true);
+          return;
+        }
+      }
+
+      typeTimeout.current = setTimeout(
+        handleTyping,
+        isDeleting.current ? deleteInterval : typingInterval
+      );
+    };
+
+    typeTimeout.current = setTimeout(handleTyping, typingInterval);
+
+    return () => {
+      if (typeTimeout.current) clearTimeout(typeTimeout.current);
+    };
+  }, [currentTextIndex]);
+
+  return (
+    <TypingText isCursorBlinking={isCursorBlinking}>
+      <h1 css={{ fontFamily: "NanumSquareNeo", fontSize: "25px", fontWeight: 100 }}>
+        {displayedText}
+      </h1>
+    </TypingText>
+  );
+};
+
+export default TypingAnimation;

src/components/form/Input.style.ts

@@ -0,0 +1,20 @@
+import { InputProps } from "./Input";
+import styled from "@emotion/styled";
+
+export const InputElement = styled.input<InputProps>`
+    width: ${(props) => props.width};
+    height: ${(props) => props.height};
+
+    border-radius: 12px;
+    border: none;
+    padding:5px;
+
+    background-color: ${(props) => {
+        switch (props.variants) {
+            case "primary":
+                return "#ECECEC";
+            case "secondary":
+                return "#fff";
+        }
+    }};
+`;

src/components/form/Input.tsx

@@ -0,0 +1,17 @@
+import { forwardRef } from "react";
+
+import { InputElement } from "./Input.style";
+
+export interface InputProps extends React.ComponentPropsWithoutRef<"input"> {
+    variants: "primary" | "secondary";
+    width: string;
+    height: string;
+}
+
+export const Input = forwardRef<HTMLInputElement, InputProps>(
+    ({ width, height, variants, ...rest }, ref) => {
+        return (
+            <InputElement ref={ref} width={width} height={height} variants={variants} {...rest} />
+        );
+    },
+);

src/components/layout/RootLayout.tsx

@@ -6,7 +6,7 @@ export const Layout = styled.main`
     width: min(100%, 800px);
     height: 100vh;
     margin: 0px auto;
-    padding: 10px;
+    padding: 1.25rem;
 `;
 
 export const RootLayout = () => {

src/components/layout/TopBar.styled.tsx

@@ -0,0 +1,20 @@
+import styled from "@emotion/styled";
+
+export const TopBarWrapper = styled.div`
+    height: 60px;
+`;
+
+export const TopBarContainer = styled.div`
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    display: flex;
+    height: 56px;
+
+    justify-content: center;
+    align-items: center;
+
+    border-bottom: 1px solid #e0e0e0;
+    font-weight: 800;
+`;

src/components/layout/TopBar.tsx

@@ -0,0 +1,15 @@
+import { TopBarContainer, TopBarWrapper } from "./TopBar.styled";
+
+interface TopBarProps {
+    title: string;
+}
+
+const TopBar: React.FC<TopBarProps> = ({ title }) => {
+    return (
+        <TopBarWrapper>
+            <TopBarContainer>{title}</TopBarContainer>
+        </TopBarWrapper>
+    );
+};
+
+export default TopBar;