feat: 온보딩 및 튜토리얼 페이지 구현

src/app/api/keys.ts

@@ -1,5 +1,6 @@
 export const LOCAL_STORAGE_KEY_SERVER = "FIN_THE_PEN_SERVER";
 export const LOCAL_STORAGE_KEY_USERS = "FIN_THE_PEN_USERS";
+export const LOCAL_STORAGE_KEY_ONBOARDING = "FIN_THE_PEN_ONBOARDING";
 export const SESSION_STORAGE_KEY_TOKEN = "FIN_THE_PEN_TOKEN";
 export const LOCAL_STORAGE_KEY_SCHEDULES = "FIN_THE_PEN_SCHEDULES";
 export const LOCAL_STORAGE_KEY_TEMPLATE = "FIN_THE_PEN_TEMPLATE";

src/components/OnBorading/OnBoarding.tsx

@@ -0,0 +1,71 @@
+import { Box, Button, Drawer, Stack } from "@mui/material";
+import Header from "@components/OnBorading/components/Header";
+import { Autoplay } from "swiper/modules";
+import { Swiper, SwiperSlide } from "swiper/react";
+import { onboardings } from "@components/OnBorading/components/OnBoardingCard/asets.ts";
+import OnBoardingCard from "@components/OnBorading/components/OnBoardingCard";
+import { useState } from "react";
+import Stepper from "@components/common/Stepper";
+
+function OnBoarding({ handleClose }: { handleClose: () => void }) {
+ const [swiperIndex, setSwiperIndex] = useState(0);
+ return (
+ <Drawer
+ open={true}
+ anchor="bottom"
+ onClose={handleClose}
+ sx={{
+ height: "100dvh",
+ ".MuiPaper-root.MuiDrawer-paper": {
+ maxHeight: "100dvh",
+ height: "100dvh",
+ },
+ }}
+ >
+ <Stack
+ justifyContent="space-between"
+ alignItems="center"
+ height="100dvh"
+ width="100dvw"
+ >
+ <Header onClickHandler={handleClose} />
+ <Stack spacing="25px" alignItems="center">
+ <Swiper
+ spaceBetween={30}
+ centeredSlides={true}
+ autoplay={{
+ delay: 2000,
+ disableOnInteraction: false,
+ }}
+ loop={true}
+ onActiveIndexChange={(e) => setSwiperIndex(e.realIndex)}
+ modules={[Autoplay]}
+ className="mySwiper"
+ style={{ width: "320px" }}
+ >
+ {onboardings.map((onboarding, index) => (
+ <SwiperSlide>
+ <OnBoardingCard key={index} onboarding={onboarding} />
+ </SwiperSlide>
+ ))}
+ </Swiper>
+ <Stepper size={onboardings.length} focused={swiperIndex} />
+ </Stack>
+ <Box
+ sx={{
+ paddingX: "20px",
+ paddingTop: "8px",
+ paddingBottom: "20px",
+ width: "100dvw",
+ }}
+ >
+ <Button variant="contained" onClick={handleClose} fullWidth>
+ 핀더펜 시작하기
+ </Button>
+ </Box>
+ </Stack>
+ </Drawer>
+ );
+}
+
+export default OnBoarding;

src/components/OnBorading/components/Header/Header.tsx

@@ -0,0 +1,27 @@
+import { Stack, Typography } from "@mui/material";
+import logo from "@assets/logos/logo_purple.png";
+import React from "react";
+import ClearRoundedIcon from "@mui/icons-material/ClearRounded";
+
+function Header({ onClickHandler }: { onClickHandler: () => void }) {
+ return (
+ <Stack
+ direction="row"
+ px={2.5}
+ justifyContent="space-between"
+ alignItems="center"
+ height="40px"
+ width="100dvw"
+ >
+ <Stack direction="row" alignItems="center" spacing={1}>
+ <img src={logo} alt="logo" width="40px" height="40px" />
+ <Typography variant="h4" color="primary">
+ 핀더펜
+ </Typography>
+ </Stack>
+ <ClearRoundedIcon onClick={onClickHandler} />
+ </Stack>
+ );
+}
+
+export default Header;

src/components/OnBorading/components/Header/index.ts

@@ -0,0 +1,3 @@
+import Header from "@components/OnBorading/components/Header/Header.tsx";
+
+export default Header;

src/components/OnBorading/components/OnBoardingCard/OnBoardingCard.tsx

@@ -0,0 +1,25 @@
+import { Box, Stack } from "@mui/material";
+import { IOnboarding } from "@components/OnBorading/components/OnBoardingCard/asets.ts";
+
+function OnBoardingCard({ onboarding }: { onboarding: IOnboarding }) {
+ return (
+ <Stack spacing="25px">
+ <Box
+ fontSize={24}
+ fontWeight={600}
+ whiteSpace="pre-line"
+ textAlign="center"
+ >
+ {onboarding.title}
+ </Box>
+ <img
+ src={onboarding.image}
+ width={320}
+ height={320}
+ alt={onboarding.title}
+ />
+ </Stack>
+ );
+}
+
+export default OnBoardingCard;

src/components/OnBorading/components/OnBoardingCard/asets.ts

@@ -0,0 +1,17 @@
+import onboarding1 from "@assets/icons/onboarding1.svg";
+import onboarding2 from "@assets/icons/onboarding2.svg";
+import onboarding3 from "@assets/icons/onboarding3.svg";
+
+export interface IOnboarding {
+ title: string;
+ image: string;
+}
+
+export const onboardings: IOnboarding[] = [
+ { title: "일정이 많아지면\n지출도 높아지시나요?", image: onboarding1 },
+ { title: "계획된 일정에 맞는\n자산관리도 필요하신가요?", image: onboarding2 },
+ {
+ title: "캘린더와 가계부를\n통합한 핀더펜을 사용해보세요",
+ image: onboarding3,
+ },
+];

src/components/OnBorading/components/OnBoardingCard/index.ts

@@ -0,0 +1,3 @@
+import OnBoardingCard from "@components/OnBorading/components/OnBoardingCard/OnBoardingCard.tsx";
+
+export default OnBoardingCard;

src/components/OnBorading/index.ts

@@ -0,0 +1,3 @@
+import OnBoarding from "@components/OnBorading/OnBoarding.tsx";
+
+export default OnBoarding;