Skip to content

Commit

Permalink
Merge: Feature -> Develop
Browse files Browse the repository at this point in the history
시작 페이지 구현
  • Loading branch information
chominju02 authored Nov 14, 2024
2 parents 89d954f + 6082f7f commit ef4c5bd
Show file tree
Hide file tree
Showing 4 changed files with 72 additions and 2 deletions.
4 changes: 3 additions & 1 deletion src/Routes.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ import { RecordPage } from "./pages/RecordPage";
import { ResultPage } from "./pages/ResultPage";
import { RootLayout } from "@/layouts/RootLayout";
import { RedirectPage } from "./pages/RedirectPage";
import { HomePage } from "./pages/HomePage";


export const Router = () => {
Expand All @@ -31,7 +32,8 @@ export const Router = () => {
<Global styles={[resetStyles, rootStyles]} />
<Routes>
<Route path="/" element={<RootLayout />}>
<Route path="/" element={<MainPage />}></Route>
<Route path="/" element={<HomePage />}></Route>
<Route path="/main" element={<MainPage />}></Route>
<Route path="/login" element={<LoginPage />}></Route>
<Route path="/redirection" element={<RedirectPage />} />

Expand Down
37 changes: 37 additions & 0 deletions src/pages/HomePage/index.style.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
import { keyframes, css } from "@emotion/react";
import styled from "@emotion/styled";

// 페이드아웃 애니메이션 정의
const fadeOut = keyframes`
from {
opacity: 1;
}
to {
opacity: 0;
}
`;

// fade prop의 타입 정의
interface ContainerProps {
fade: boolean;
}

// 애니메이션 스타일이 적용된 컨테이너
export const Container = styled.div<ContainerProps>`
max-width: 400px;
height: 100vh;
max-height: 956px;
margin: 0 auto;
background-color: var(--color-primary);
display: flex;
align-items: center;
justify-content: center;
/* 페이드아웃 애니메이션을 조건부로 적용 */
${({ fade }) =>
fade &&
css`
animation: ${fadeOut} 1s ease forwards;
`}
`;
31 changes: 31 additions & 0 deletions src/pages/HomePage/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
// HomePage.tsx
import React, { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";
import * as Styles from "./index.style";

export const HomePage: React.FC = () => {
const navigate = useNavigate();
const [fade, setFade] = useState(false);

useEffect(() => {
// 3초 후 페이드아웃 시작
const fadeTimer = setTimeout(() => setFade(true), 1500);

// 페이드아웃 애니메이션 후 페이지 이동
const navigateTimer = setTimeout(() => {
navigate("/login");
}, 2000);

// 타이머 정리
return () => {
clearTimeout(fadeTimer);
clearTimeout(navigateTimer);
};
}, [navigate]);

return (
<Styles.Container fade={fade}>
<img src="" alt="LOGO" />
</Styles.Container>
);
};
2 changes: 1 addition & 1 deletion src/pages/RedirectPage/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ export const RedirectPage = () => {
const response = await kakaoLoginCallback(code);
setTokens(response.accessToken, response.refreshToken);
// 리다이렉트할 경로를 로컬스토리지에서 가져오고, 기본값을 "/"로 설정
const redirectPath = localStorage.getItem("redirectPath") || "/";
const redirectPath = localStorage.getItem("redirectPath") || "/main";
localStorage.removeItem("redirectPath"); // 사용 후 경로 삭제
navigate(redirectPath);
} catch (error) {
Expand Down

0 comments on commit ef4c5bd

Please sign in to comment.