Merge pull request #225 from boostcampwm-2024/Feature/#218_인트로_스크린_로티…

…애니메이션_적용 Feature/#218 인트로 스크린 로티애니메이션 및 pretendard 폰트적용
boostcampwm-2024 · Nov 28, 2024 · 7d38ff5 · 7d38ff5
2 parents 2b81990 + 6933e6c
commit 7d38ff5
Show file tree

Hide file tree

Showing 22 changed files with 301 additions and 43 deletions.
diff --git a/client/index.html b/client/index.html
@@ -3,7 +3,7 @@
 
 <head>
   <meta charset="UTF-8" />
-  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+  <link rel="icon" type="image/svg+xml" href="./src/assets/icons/noctaDayIcon.svg" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Nocta</title>
 </head>

diff --git a/client/panda.config.ts b/client/panda.config.ts
@@ -21,6 +21,9 @@ export default defineConfig({
         radii,
         shadows,
         spacing,
+        fonts: {
+          pretendard: { value: "Pretendard, sans-serif" },
+        },
       },
       recipes: {
         glassContainer: glassContainerRecipe,

diff --git a/client/src/assets/fonts/Pretendard-Bold.woff b/client/src/assets/fonts/Pretendard-Bold.woff
diff --git a/client/src/assets/fonts/Pretendard-Bold.woff2 b/client/src/assets/fonts/Pretendard-Bold.woff2
diff --git a/client/src/assets/fonts/Pretendard-Medium.woff b/client/src/assets/fonts/Pretendard-Medium.woff
diff --git a/client/src/assets/fonts/Pretendard-Medium.woff2 b/client/src/assets/fonts/Pretendard-Medium.woff2
diff --git a/client/src/assets/icons/noctaDayIcon.svg b/client/src/assets/icons/noctaDayIcon.svg
diff --git a/client/src/assets/icons/noctaNightIcon.svg b/client/src/assets/icons/noctaNightIcon.svg
diff --git a/client/src/assets/lotties/noctaDayIcon.json b/client/src/assets/lotties/noctaDayIcon.json
diff --git a/client/src/assets/lotties/noctaNightIcon.json b/client/src/assets/lotties/noctaNightIcon.json
diff --git a/client/src/components/lotties/NoctaIcon.tsx b/client/src/components/lotties/NoctaIcon.tsx
@@ -0,0 +1,10 @@
+import { Player } from "@lottiefiles/react-lottie-player";
+import noctaIcon from "@assets/lotties/noctaDayIcon.json";
+
+export const NoctaIcon = ({ size = 200 }) => {
+  return (
+    <div style={{ width: size, height: size }}>
+      <Player autoplay loop src={noctaIcon} style={{ width: "100%", height: "100%" }} />
+    </div>
+  );
+};
diff --git a/client/src/components/sidebar/components/menuButton/MenuButton.style.ts b/client/src/components/sidebar/components/menuButton/MenuButton.style.ts
@@ -11,14 +11,6 @@ export const menuItemWrapper = css({
   cursor: "pointer",
 });
 
-export const imageBox = css({
-  borderRadius: "sm",
-  width: "50px",
-  height: "50px",
-  background: "white",
-  overflow: "hidden",
-});
-
 export const textBox = css({
   textStyle: "display-medium20",
   color: "gray.900",

diff --git a/client/src/components/sidebar/components/menuButton/MenuButton.tsx b/client/src/components/sidebar/components/menuButton/MenuButton.tsx
@@ -1,13 +1,14 @@
 import { useUserInfo } from "@stores/useUserStore";
-import { menuItemWrapper, imageBox, textBox } from "./MenuButton.style";
+import { menuItemWrapper, textBox } from "./MenuButton.style";
+import { MenuIcon } from "./components/MenuIcon";
 
 export const MenuButton = () => {
   const { name } = useUserInfo();
 
   return (
     <>
       <button className={menuItemWrapper}>
-        <div className={imageBox}></div>
+        <MenuIcon />
         <p className={textBox}>{name ?? "Nocta"}</p>
       </button>
     </>

diff --git a/client/src/components/sidebar/components/menuButton/components/MenuIcon.style.ts b/client/src/components/sidebar/components/menuButton/components/MenuIcon.style.ts
@@ -0,0 +1,10 @@
+import { css } from "@styled-system/css";
+
+export const iconContainer = css({
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+  width: "40px",
+  height: "40px",
+  overflow: "hidden",
+});
diff --git a/client/src/components/sidebar/components/menuButton/components/MenuIcon.tsx b/client/src/components/sidebar/components/menuButton/components/MenuIcon.tsx
@@ -0,0 +1,29 @@
+import NoctaDayIcon from "@assets/icons/noctaDayIcon.svg?react";
+// import { noctaNightIcon } from "@assets/icons/noctaNightIcon.svg";
+import { iconContainer } from "./MenuIcon.style";
+
+export const MenuIcon = () => {
+  // const { isDarkMode } = useThemeStore();
+
+  // const [isSystemDark, setIsSystemDark] = useState(() =>
+  //   window.matchMedia('(prefers-color-scheme: dark)').matches
+  // );
+
+  // useEffect(() => {
+  //   const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+  //   const handleChange = (e: MediaQueryListEvent) => {
+  //     setIsSystemDark(e.matches);
+  //   };
+
+  //   mediaQuery.addEventListener('change', handleChange);
+  //   return () => mediaQuery.removeEventListener('change', handleChange);
+  // }, []);
+
+  // const currentIcon = (isDarkMode ?? isSystemDark) ? noctaNightIcon : noctaDayIcon;
+
+  return (
+    <div className={iconContainer}>
+      <NoctaDayIcon />
+    </div>
+  );
+};
diff --git a/client/src/features/workSpace/WorkSpace.tsx b/client/src/features/workSpace/WorkSpace.tsx
@@ -1,4 +1,5 @@
 import { WorkSpace as WorkSpaceClass } from "@noctaCrdt/WorkSpace";
+import { AnimatePresence } from "framer-motion";
 import { useState, useEffect } from "react";
 import { BottomNavigator } from "@components/bottomNavigator/BottomNavigator";
 import { ErrorModal } from "@components/modal/ErrorModal";
@@ -38,20 +39,13 @@ export const WorkSpace = () => {
     }
   }, [workspaceMetadata]);
 
-  // 에러화면
   if (error) {
     return <ErrorModal errorMessage="서버와 연결할 수 없습니다." />;
   }
-  // 0. 몽고 다 제거
-  // 1. 클라이언트 연결하고 tempblock으로 클라이언트 블럭 생성한다.
-  // 2. 클라이언트를 새로고침한다
-  // 3. 추가된 블럭의 콘솔로그 정보를 본다.
-  // 4. 클라이언트 인스턴스의 clock정보를 본다.
 
-  // 정상화면
   return (
     <>
-      {isLoading && <IntroScreen />}
+      <AnimatePresence mode="wait">{isLoading && <IntroScreen />}</AnimatePresence>
       <div
         className={workSpaceContainer({
           visibility: isInitialized && !isLoading ? "visible" : "hidden",

diff --git a/client/src/features/workSpace/components/IntroScreen.animation.ts b/client/src/features/workSpace/components/IntroScreen.animation.ts
@@ -0,0 +1,56 @@
+export const animation = {
+  initial: {
+    y: -100,
+    opacity: 0,
+  },
+  animate: {
+    y: 0,
+    opacity: 1,
+  },
+  transition: {
+    type: "spring",
+    stiffness: 300,
+    damping: 30,
+    duration: 2,
+  },
+};
+export const containerVariants = {
+  hidden: {
+    opacity: 0,
+  },
+  visible: {
+    opacity: 1,
+  },
+};
+
+export const topTextVariants = {
+  hidden: {
+    opacity: 0,
+    y: -50,
+  },
+  visible: {
+    opacity: 1,
+    y: 0,
+    transition: {
+      delay: 1,
+      duration: 0.4,
+      ease: "easeOut",
+    },
+  },
+};
+
+export const bottomTextVariants = {
+  hidden: {
+    opacity: 0,
+    y: 50,
+  },
+  visible: {
+    opacity: 1,
+    y: 0,
+    transition: {
+      delay: 2,
+      duration: 0.3,
+      ease: "easeOut",
+    },
+  },
+};
diff --git a/client/src/features/workSpace/components/IntroScreen.style.ts b/client/src/features/workSpace/components/IntroScreen.style.ts
@@ -5,8 +5,48 @@ export const IntroScreenContainer = css({
   zIndex: 50,
   position: "fixed",
   inset: 0,
+  flexDirection: "column",
   justifyContent: "center",
   alignItems: "center",
   backgroundSize: "cover",
   transition: "opacity 0.5s ease-in-out",
 });
+
+export const topText = css({
+  top: "50%",
+  left: "50%",
+  transform: "translate(-50%, -160px)",
+  width: "100%",
+  color: "gray.900",
+  textAlign: "center",
+  fontSize: "2xl",
+  opacity: 1,
+  animation: "fadeIn",
+  textShadow: "0px 0px 5px white",
+  animationDelay: "0.5s",
+});
+
+export const bottomText = css({
+  top: "50%",
+  left: "50%",
+  transform: "translate(-50%, 120px)",
+  width: "100%",
+  color: "gray.900",
+  textAlign: "center",
+  textShadow: "0px 0px 5px white",
+  fontSize: "4xl",
+  fontWeight: "bold",
+  opacity: 1,
+  animation: "",
+  animationDelay: "0.5s",
+});
+
+export const overLayContainer = css({
+  zIndex: -1,
+  position: "fixed",
+  top: 0,
+  left: 0,
+  width: "100%",
+  height: "100%",
+  backgroundColor: "gray.500/30",
+});
diff --git a/client/src/features/workSpace/components/IntroScreen.tsx b/client/src/features/workSpace/components/IntroScreen.tsx
@@ -1,10 +1,26 @@
-import { LoadingSpinner } from "@components/lotties/LoadingSpinner";
-import { IntroScreenContainer } from "./IntroScreen.style";
+import { motion } from "framer-motion";
+import { NoctaIcon } from "@components/lotties/NoctaIcon";
+import { containerVariants, bottomTextVariants, topTextVariants } from "./IntroScreen.animation";
+import { IntroScreenContainer, topText, bottomText, overLayContainer } from "./IntroScreen.style";
 
 export const IntroScreen = () => {
   return (
-    <div className={IntroScreenContainer}>
-      <LoadingSpinner size={200} />
-    </div>
+    <motion.div
+      className={IntroScreenContainer}
+      variants={containerVariants}
+      initial="hidden"
+      animate="visible"
+      transition={{ duration: 0.6, ease: "easeInOut" }}
+      exit={{ opacity: 0 }}
+    >
+      <motion.div variants={topTextVariants} className={topText}>
+        밤하늘의 별빛처럼, 자유로운 인터랙션 실시간 에디터
+      </motion.div>
+      <NoctaIcon size={200} />
+      <motion.div variants={bottomTextVariants} className={bottomText}>
+        Nocta
+      </motion.div>
+      <div className={overLayContainer}></div>
+    </motion.div>
   );
 };