diff --git a/package-lock.json b/package-lock.json index 1a58419..366ce2a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -19,6 +19,7 @@ "@vercel/analytics": "^1.3.1", "antd": "^5.19.0", "axios": "^1.7.2", + "chromatic": "^11.5.4", "class-variance-authority": "^0.7.0", "clsx": "^2.1.1", "eslint": "^8.57.0", @@ -51,7 +52,6 @@ "@storybook/react-webpack5": "^8.1.10", "@storybook/test": "^8.1.10", "@typescript-eslint/parser": "^5.62.0", - "chromatic": "^11.5.4", "eslint-config-prettier": "^9.1.0", "eslint-plugin-prettier": "^5.1.3", "eslint-plugin-react": "^7.34.3", @@ -13903,7 +13903,6 @@ "version": "11.5.4", "resolved": "https://registry.npmjs.org/chromatic/-/chromatic-11.5.4.tgz", "integrity": "sha512-+J+CopeUSyGUIQJsU6X7CfvSmeVBs0j6LZ9AgF4+XTjI4pFmUiUXsTc00rH9x9W1jCppOaqDXv2kqJJXGDK3mA==", - "dev": true, "bin": { "chroma": "dist/bin.js", "chromatic": "dist/bin.js", diff --git a/package.json b/package.json index 28b1e40..0af0259 100644 --- a/package.json +++ b/package.json @@ -14,6 +14,7 @@ "@vercel/analytics": "^1.3.1", "antd": "^5.19.0", "axios": "^1.7.2", + "chromatic": "^11.5.4", "class-variance-authority": "^0.7.0", "clsx": "^2.1.1", "eslint": "^8.57.0", @@ -76,7 +77,6 @@ "@storybook/react-webpack5": "^8.1.10", "@storybook/test": "^8.1.10", "@typescript-eslint/parser": "^5.62.0", - "chromatic": "^11.5.4", "eslint-config-prettier": "^9.1.0", "eslint-plugin-prettier": "^5.1.3", "eslint-plugin-react": "^7.34.3", diff --git a/src/assets/maru-egg.svg b/src/assets/maru-egg.svg new file mode 100644 index 0000000..3b8125c --- /dev/null +++ b/src/assets/maru-egg.svg @@ -0,0 +1,160 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/onboarding_0.png b/src/assets/onboarding_0.png new file mode 100644 index 0000000..98ec8aa Binary files /dev/null and b/src/assets/onboarding_0.png differ diff --git a/src/assets/onboarding_1.png b/src/assets/onboarding_1.png new file mode 100644 index 0000000..8c9c751 Binary files /dev/null and b/src/assets/onboarding_1.png differ diff --git a/src/assets/onboarding_2.png b/src/assets/onboarding_2.png new file mode 100644 index 0000000..4801644 Binary files /dev/null and b/src/assets/onboarding_2.png differ diff --git a/src/assets/onboarding_3.png b/src/assets/onboarding_3.png new file mode 100644 index 0000000..331ce5e Binary files /dev/null and b/src/assets/onboarding_3.png differ diff --git a/src/assets/onboarding_4.png b/src/assets/onboarding_4.png new file mode 100644 index 0000000..80405cf Binary files /dev/null and b/src/assets/onboarding_4.png differ diff --git a/src/ui/components/molecule/onboarding/onboarding.tsx b/src/ui/components/molecule/onboarding/onboarding.tsx new file mode 100644 index 0000000..c128bd5 --- /dev/null +++ b/src/ui/components/molecule/onboarding/onboarding.tsx @@ -0,0 +1,113 @@ +import React, { useState } from 'react'; +import onboarding_0 from '../../../../assets/onboarding_0.png'; +import onboarding_1 from '../../../../assets/onboarding_1.png'; +import onboarding_2 from '../../../../assets/onboarding_2.png'; +import onboarding_3 from '../../../../assets/onboarding_3.png'; +import onboarding_4 from '../../../../assets/onboarding_4.png'; + +interface OnboardingProps { + onClose: () => void; +} + +const Onboarding = ({ onClose }: OnboardingProps) => { + const [step, setStep] = useState(0); + + const steps = [ + { + image: onboarding_0, + title: '명지대학교 AI 입학문의 챗봇,', + subtitle: '마루에그에 오신 것을 환영합니다!', + description: '1분만에 마루에그의 모든 기능을 알려드려요', + button1Text: '건너뛰기', + button2Text: '시작하기', + }, + { + image: onboarding_1, + title: '수시/정시/편입 타입 지정', + subtitle: '', + description: '클릭 1번으로 필요한 입력 정보를 알려드려요', + button1Text: '건너뛰기', + button2Text: '다음', + }, + { + image: onboarding_2, + title: 'FAQ · 입시결과 · 모집요강 바로가기', + subtitle: '', + description: '자주 가는 페이지는 빠르게 접근할 수 있도록 만들었어요', + button1Text: '건너뛰기', + button2Text: '다음', + }, + { + image: onboarding_3, + title: '모집요강에 있는 정보들을 한번에', + subtitle: '', + description: '질문을 하며 참고할 수 있는 정보를 한곳에 모아놨어요', + button1Text: '건너뛰기', + button2Text: '다음', + }, + { + image: onboarding_4, + title: '질문내용에 적합한 참고자료도 함께', + subtitle: '', + description: '질문을 하며 참고할 수 있는 자료들을 함께 알려드려요', + button1Text: '건너뛰기', + button2Text: '다음', + }, + { + image: onboarding_0, + title: '마루에그와 함께 입학문의로 보다 쉽게', + subtitle: '', + description: '마루에그에 대한 정보가 더 궁금하다면?', + button1Text: '다시보기', + button2Text: '문의하러 가기', + }, + ]; + + const handleNext = () => { + if (step < steps.length - 1) { + setStep(step + 1); + } else { + onClose(); + } + }; + + const handleRestart = () => { + setStep(0); + }; + + return ( +
+
+
+ {/* Image */} +
+ onboarding-step +
+ {/* Text */} +
+

+ {steps[step].title} +
+ {steps[step].subtitle} +

+

{steps[step].description}

+
+ {/* CTA */} +
+ + +
+
+
+
+ ); +}; + +export default Onboarding; diff --git a/src/ui/pages/maru-egg.tsx b/src/ui/pages/maru-egg.tsx index 8b2436a..1a3596d 100644 --- a/src/ui/pages/maru-egg.tsx +++ b/src/ui/pages/maru-egg.tsx @@ -1,18 +1,34 @@ // src/ui/pages/maru-egg.tsx -import React from 'react'; +import React, { useEffect, useState } from 'react'; import Header from '../components/molecule/header/header'; import useTypeStore from '../../store/type-category-store'; import ChatForm from '../components/molecule/chat-form/chat-form'; import ChatSection from '../components/molecule/chat-section/chat-section'; +import Onboarding from '../components/molecule/onboarding/onboarding'; const MaruEgg: React.FC = () => { const { type, category } = useTypeStore(); + const [showOnboarding, setShowOnboarding] = useState(false); + + useEffect(() => { + const isFirstVisit = localStorage.getItem('isFirstVisit') === null; + if (isFirstVisit) { + setShowOnboarding(true); + localStorage.setItem('isFirstVisit', 'false'); + } else { + setShowOnboarding(false); + } + }, []); + + const handleCloseOnboarding = () => { + setShowOnboarding(false); + }; return (
+ {showOnboarding && }
- {type !== undefined && category !== undefined && (
diff --git a/tailwind.config.js b/tailwind.config.js index 2c0b48d..bb8dfbf 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -12,7 +12,6 @@ module.exports = { 'background-default': '#F2F2F3', }, screens: { - 'mobile_sm' : '320px', 'mobile' : '360px', 'desktop' : '769px', },