Merge pull request #106 from Funssion-SWM/develop

Falling animation - cherry flake로 변경

README.md

@@ -26,6 +26,8 @@
 
 <img src="https://img.shields.io/badge/docker-2496ED?style=for-the-badge&logo=docker&logoColor=white"> <img src="https://img.shields.io/badge/aws-232F3E?style=for-the-badge&logo=amazonaws&logoColor=white"> <img src="https://img.shields.io/badge/git-F05032?style=for-the-badge&logo=git&logoColor=white"> <img src="https://img.shields.io/badge/github-181717?style=for-the-badge&logo=github&logoColor=white"> <img src="https://img.shields.io/badge/github actions-2088FF?style=for-the-badge&logo=githubactions&logoColor=white">
 
+<br/>
+
 ## 화면 구성
 
 |                                                               랜딩 페이지                                                                |                                                                  로그인                                                                   |
@@ -46,6 +48,14 @@
 |                                                               채용 도우미                                                                |                                                               채용자 페이지                                                               |
 |     <img width="90%" alt="job1" src="https://github.com/Funssion-SWM/Frontend/assets/68095803/9c456eea-4b7e-42ad-916c-3f2d22a5599f">     |     <img width="90%" alt="job2" src="https://github.com/Funssion-SWM/Frontend/assets/68095803/24280746-5338-43cf-8cef-b084125b28ad">      |
 
+<br/>
+
+## 아키텍쳐
+
+<p align='center'><img width="90%" src="https://github.com/Funssion-SWM/Frontend/assets/68095803/d4c0f5bb-0786-4b23-90c6-765a00f234aa"/></p>
+
+<br/>
+
 ## 주요 기능
 
 ### 1. 컨텐츠 생산성 향상을 위한 기능
@@ -66,10 +76,12 @@
 
 ### 3. 일반 기능
 
-- 관심 기술 분야를 힌 눈에 확인할 수 있는 마이페이지
+- 관심 기술 분야를 한 눈에 확인할 수 있는 마이페이지
 - 커뮤니티 기능(댓글, 좋아요, 검색, 팔로우/팔로잉)
 - 태그 기반 게시물 추천
 
+<br/>
+
 ## 개발 현황
 
 MVP 개발완료 및 배포 (23.08.14)  

src/app/layout.tsx

@@ -8,7 +8,7 @@ import GoogleAnalytics from '@/components/GoogleAnalytics';
 import ToastProvider from '@/context/ToastProvider';
 import CreationModalProvider from '@/context/CreationModalProvider';
 import CreationModal from '@/components/shared/CreationModal';
-import SnowContainer from '@/components/snow/SnowContainer';
+import FallingContainer from '@/components/falling/FallingContainer';
 
 export const metadata = {
   title: '인포럼 - 무한한 개발 이야기 공간',
@@ -53,7 +53,7 @@ export default async function RootLayout({
             <CreationModal />
           </CreationModalProvider>
         </ToastProvider>
-        <SnowContainer />
+        <FallingContainer />
       </body>
     </html>
   );

src/components/falling/CherryFlake.tsx

@@ -0,0 +1,24 @@
+type Props = {
+  animationDelay: string;
+  fontSize: string;
+  colorDepth: number;
+};
+
+export default function CherryFlake({
+  animationDelay,
+  fontSize,
+  colorDepth,
+}: Props) {
+  return (
+    <p
+      className={`animate-[fall_30s_infinite]  opacity-0 ${
+        { 0: 'text-pink-100', 1: 'text-pink-200', 2: 'text-pink-300' }[
+          colorDepth
+        ]
+      }`}
+      style={{ animationDelay, fontSize }}
+    >
+      {'❀'}
+    </p>
+  );
+}

src/components/snow/SnowContainer.tsx → src/components/falling/FallingContainer.tsx

@@ -1,9 +1,10 @@
+import CherryFlake from './CherryFlake';
 import SnowFlake from './SnowFlake';
 
-const SNOW_FLAKE_NUM = 100;
+const FLAKE_NUM = 100;
 
 export default function SnowContainer() {
-  const arr = Array(SNOW_FLAKE_NUM).fill('');
+  const arr = Array(FLAKE_NUM).fill('');
   return (
     <div className="fixed z-10 flex justify-between w-screen h-screen pointer-events-none">
       {arr.map((el, i) => {
@@ -12,7 +13,7 @@ export default function SnowContainer() {
         const colorDepth = Math.floor(Math.random() * 3);
 
         return (
-          <SnowFlake
+          <CherryFlake
             key={i}
             animationDelay={animationDelay}
             fontSize={fontSize}