diff --git a/frontend/public/assets/images/onboarding/character.png b/frontend/public/assets/images/onboarding/character.png new file mode 100644 index 00000000..026f12dd Binary files /dev/null and b/frontend/public/assets/images/onboarding/character.png differ diff --git a/frontend/public/assets/images/onboarding/slide1.png b/frontend/public/assets/images/onboarding/slide1.png new file mode 100644 index 00000000..9d3ed196 Binary files /dev/null and b/frontend/public/assets/images/onboarding/slide1.png differ diff --git a/frontend/public/assets/images/onboarding/slide10.png b/frontend/public/assets/images/onboarding/slide10.png new file mode 100644 index 00000000..85c5ed0b Binary files /dev/null and b/frontend/public/assets/images/onboarding/slide10.png differ diff --git a/frontend/public/assets/images/onboarding/slide11.png b/frontend/public/assets/images/onboarding/slide11.png new file mode 100644 index 00000000..5d966ab8 Binary files /dev/null and b/frontend/public/assets/images/onboarding/slide11.png differ diff --git a/frontend/public/assets/images/onboarding/slide12.png b/frontend/public/assets/images/onboarding/slide12.png new file mode 100644 index 00000000..cf4a9043 Binary files /dev/null and b/frontend/public/assets/images/onboarding/slide12.png differ diff --git a/frontend/public/assets/images/onboarding/slide13.png b/frontend/public/assets/images/onboarding/slide13.png new file mode 100644 index 00000000..67bd3e55 Binary files /dev/null and b/frontend/public/assets/images/onboarding/slide13.png differ diff --git a/frontend/public/assets/images/onboarding/slide14.png b/frontend/public/assets/images/onboarding/slide14.png new file mode 100644 index 00000000..dea59c9a Binary files /dev/null and b/frontend/public/assets/images/onboarding/slide14.png differ diff --git a/frontend/public/assets/images/onboarding/slide15.png b/frontend/public/assets/images/onboarding/slide15.png new file mode 100644 index 00000000..4616a0c4 Binary files /dev/null and b/frontend/public/assets/images/onboarding/slide15.png differ diff --git a/frontend/public/assets/images/onboarding/slide2.png b/frontend/public/assets/images/onboarding/slide2.png new file mode 100644 index 00000000..9ce0d28c Binary files /dev/null and b/frontend/public/assets/images/onboarding/slide2.png differ diff --git a/frontend/public/assets/images/onboarding/slide3.png b/frontend/public/assets/images/onboarding/slide3.png new file mode 100644 index 00000000..a58c284b Binary files /dev/null and b/frontend/public/assets/images/onboarding/slide3.png differ diff --git a/frontend/public/assets/images/onboarding/slide4.png b/frontend/public/assets/images/onboarding/slide4.png new file mode 100644 index 00000000..5f414e47 Binary files /dev/null and b/frontend/public/assets/images/onboarding/slide4.png differ diff --git a/frontend/public/assets/images/onboarding/slide5.png b/frontend/public/assets/images/onboarding/slide5.png new file mode 100644 index 00000000..7337f19d Binary files /dev/null and b/frontend/public/assets/images/onboarding/slide5.png differ diff --git a/frontend/public/assets/images/onboarding/slide6.png b/frontend/public/assets/images/onboarding/slide6.png new file mode 100644 index 00000000..84dd7d4c Binary files /dev/null and b/frontend/public/assets/images/onboarding/slide6.png differ diff --git a/frontend/public/assets/images/onboarding/slide7.png b/frontend/public/assets/images/onboarding/slide7.png new file mode 100644 index 00000000..a9dda57c Binary files /dev/null and b/frontend/public/assets/images/onboarding/slide7.png differ diff --git a/frontend/public/assets/images/onboarding/slide8.png b/frontend/public/assets/images/onboarding/slide8.png new file mode 100644 index 00000000..63226fd2 Binary files /dev/null and b/frontend/public/assets/images/onboarding/slide8.png differ diff --git a/frontend/public/assets/images/onboarding/slide9.png b/frontend/public/assets/images/onboarding/slide9.png new file mode 100644 index 00000000..69364d59 Binary files /dev/null and b/frontend/public/assets/images/onboarding/slide9.png differ diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 8b9f2dd5..ce94b573 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -1,9 +1,13 @@ import { IndexRoutes } from '@/routes/IndexRoutes.tsx'; import 'App.css'; import { useEffect, useState } from 'react'; +import { loadLocalData, saveLocalData } from '@/utils/common/manageLocalData.ts'; +import { AppConfig } from '@/lib/constants/commonConstants.ts'; +import { Onboarding } from '@/component/onBoarding/Onboarding.tsx'; export const App = () => { const [isMobile, setIsMobile] = useState(true); + const [isFirstVisit, setIsFirstVisit] = useState(false); useEffect(() => { const checkIsMobile = () => { @@ -24,6 +28,23 @@ export const App = () => { return () => window.removeEventListener('resize', checkIsMobile); }, []); + useEffect(() => { + const firstVisit = loadLocalData(AppConfig.KEYS.FIRST_VISIT); + if (firstVisit === null) { + saveLocalData(AppConfig.KEYS.FIRST_VISIT, 'true'); + setIsFirstVisit(true); + } else if (firstVisit === 'true') { + setIsFirstVisit(true); + } else { + setIsFirstVisit(false); + } + }, []); + + const handleOnboardingComplete = () => { + saveLocalData(AppConfig.KEYS.FIRST_VISIT, 'false'); + setIsFirstVisit(false); + }; + if (!isMobile) { return ( <> @@ -37,5 +58,10 @@ export const App = () => { ); } + + if (isFirstVisit) { + return ; + } + return ; }; diff --git a/frontend/src/component/onBoarding/Onboarding.tsx b/frontend/src/component/onBoarding/Onboarding.tsx new file mode 100644 index 00000000..86c4109e --- /dev/null +++ b/frontend/src/component/onBoarding/Onboarding.tsx @@ -0,0 +1,87 @@ +import { useState } from 'react'; +import { onboardingData } from '@/lib/data/onboardingData.ts'; +import { MdClear } from 'react-icons/md'; + +interface IOnboardingProps { + onComplete: () => void; +} + +export const Onboarding = ({ onComplete }: IOnboardingProps) => { + const [currentSlide, setCurrentSlide] = useState(0); + + const handleNext = () => { + if (currentSlide < onboardingData.length - 1) { + setCurrentSlide(currentSlide + 1); + } else { + onComplete(); + } + }; + + const handlePrev = () => { + if (currentSlide > 0) { + setCurrentSlide(currentSlide - 1); + } + }; + + return ( +
+
+
튜토리얼 끝내기
+ +
+ +
+ {`Slide +
+
+ +
+
+ 캐릭터 +
+ {onboardingData[currentSlide].content} +
+
+ +
+ +
+ {onboardingData.map((slide, index) => ( +
+ ))} +
+ +
+
+
+ ); +}; diff --git a/frontend/src/lib/constants/commonConstants.ts b/frontend/src/lib/constants/commonConstants.ts index d284316d..2670e0ba 100644 --- a/frontend/src/lib/constants/commonConstants.ts +++ b/frontend/src/lib/constants/commonConstants.ts @@ -2,6 +2,7 @@ export const KEYS = { LOGIN_USER: 'LUT', LOGIN_TOKEN: 'LUT_TK', BROWSER_TOKEN: 'BRW_TK', + FIRST_VISIT: 'FIRST_VISIT', }; export const AppConfig = { diff --git a/frontend/src/lib/data/onboardingData.ts b/frontend/src/lib/data/onboardingData.ts new file mode 100644 index 00000000..5d21f7f1 --- /dev/null +++ b/frontend/src/lib/data/onboardingData.ts @@ -0,0 +1,71 @@ +interface ISlide { + id: number; + content: string; +} + +export const onboardingData: ISlide[] = [ + { + id: 1, + content: '저희 ‘선따라 길따라’ 서비스가 처음이시라고요? \n제가 사용법을 알려드릴게요!', + }, + { + id: 2, + content: '채널을 생성하고 싶으시다면, \n회원가입 후 로그인을 해주세요!', + }, + { + id: 3, + content: + '로그인 후 본인이 생성해둔 채널들을 확인할 수 있습니다! \n공유하기를 눌러 게스트 별로 링크를 확인할 수도 있어요!', + }, + { + id: 4, + content: '그럼 이제, + 버튼을 눌러 채널을 만들어볼까요?', + }, + { + id: 5, + content: '채널의 제목과 게스트도 \n최대 5명까지 입력 가능합니다!', + }, + { + id: 6, + content: + '하늘색 버튼을 누르면, 게스트별로 (할머니, 할아버지....)\n출발지, 도착지, 경로를 직접 그려줄 수 있어요!', + }, + { + id: 7, + content: '그럼 이제, 출발지와 도착지를 먼저 설정해볼까요?', + }, + { + id: 8, + content: + '1번 버튼을 누르면 검색도 가능하고, \n2번에서처럼 마커를 직접 터치로 찍을 수도 있어요!', + }, + { + id: 9, + content: '그럼 이제 경로를 그려볼까요?', + }, + { + id: 10, + content: '경로는 이렇게 직선 형태로 이어집니다! \n터치를 통해 직선을 이어서 경로를 그려보세요!', + }, + { + id: 11, + content: '이렇게 출발지와 도착지를 이어주면 되겠죠?', + }, + { + id: 12, + content: '모든 사용자에 대한 정보를 입력했다면, \n제작 완료 버튼을 눌러주세요!', + }, + { + id: 13, + content: + '이제 할머니께 링크를 공유해드리면, \n그려둔 경로와 할머니의 실시간 위치를 볼 수 있습니다!', + }, + { + id: 14, + content: '채널을 만든 사람은 이렇게모든 게스트들의 \n경로와 현재 위치도 한 번에 볼 수 있어요!', + }, + { + id: 15, + content: '이제 우리의 캐릭터들과 함께 \n길 안내 서비스를 시작해볼까요?', + }, +];