diff --git a/src/App.jsx b/src/App.jsx index 100d5d1..fade35e 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -21,7 +21,7 @@ function App() { // 바텀nav바를 숨길 경로들 const hideBottomNavPaths = [ - "/splash", + "/onboarding", "/signup", "/login", "/chat/room/buy", @@ -33,7 +33,7 @@ function App() { // 탑nav바를 숨길 경로들 const hideTopNavPaths = [ - "/splash", + "/onboarding", "/login", "/signup", "/chat/room/final", @@ -51,8 +51,8 @@ function App() { return ( <> - } /> - } /> + } /> + } /> } /> } /> } /> diff --git a/src/assets/logoNoBg.svg b/src/assets/logoNoBg.svg index 48385d2..f2d2342 100644 --- a/src/assets/logoNoBg.svg +++ b/src/assets/logoNoBg.svg @@ -1,31 +1,5 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + diff --git a/src/assets/onBoardingSlide1.svg b/src/assets/onBoardingSlide1.svg index b6e1732..70c6996 100644 --- a/src/assets/onBoardingSlide1.svg +++ b/src/assets/onBoardingSlide1.svg @@ -1,79 +1,81 @@ - - - - - - - - - - - - - + + + + + + + + + + + + + - - - - - - - - - - + + + + + + + + + + - - - - - - - - + + + + + + + + + + + + + + + - - - - - - + - - + + - - + + - - + + - + - - + + - - + + - - + + - + - + - + @@ -89,7 +91,7 @@ - + @@ -102,7 +104,7 @@ - + @@ -112,13 +114,16 @@ - - + + + + + - - + + - - + + diff --git a/src/assets/onBoardingSlide2.svg b/src/assets/onBoardingSlide2.svg index c9825ac..27b0b36 100644 --- a/src/assets/onBoardingSlide2.svg +++ b/src/assets/onBoardingSlide2.svg @@ -1,79 +1,81 @@ - - - - - - - - - - - - + + + + + + + + + + + + - - - - - - - - - - - + + + + + + + + + + + - - - - - - - - + + + + + + + + + + + + + + + - - - - - - + - - + + - - + + - - + + - + - - + + - - + + - - + + - + - + - + @@ -89,7 +91,7 @@ - + @@ -102,7 +104,7 @@ - + @@ -112,13 +114,16 @@ - - + + + + + - - + + - - + + diff --git a/src/assets/onBoardingSlide3.svg b/src/assets/onBoardingSlide3.svg index e422502..48f523d 100644 --- a/src/assets/onBoardingSlide3.svg +++ b/src/assets/onBoardingSlide3.svg @@ -1,71 +1,73 @@ - - - - - - - - - - - - + + + + + + + + + + + + - - - + + + - - - - - - - - + + + + + + + + + + + + + + + - - - - - - + - - + + - - + + - - + + - + - - + + - - + + - - + + - + - + - + @@ -81,7 +83,7 @@ - + @@ -94,7 +96,7 @@ - + @@ -104,13 +106,16 @@ - - + + + + + - - + + - - + + diff --git a/src/assets/popular.jpg b/src/assets/popular.jpg new file mode 100644 index 0000000..f0d8acf Binary files /dev/null and b/src/assets/popular.jpg differ diff --git a/src/assets/popular2.jpeg b/src/assets/popular2.jpeg new file mode 100644 index 0000000..f3eddaf Binary files /dev/null and b/src/assets/popular2.jpeg differ diff --git a/src/assets/popular3.jpeg b/src/assets/popular3.jpeg new file mode 100644 index 0000000..7212a0c Binary files /dev/null and b/src/assets/popular3.jpeg differ diff --git a/src/assets/splashLogo.svg b/src/assets/splashLogo.svg new file mode 100644 index 0000000..118300a --- /dev/null +++ b/src/assets/splashLogo.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/components/TopNav.jsx b/src/components/TopNav.jsx index 3e91063..65e09cd 100644 --- a/src/components/TopNav.jsx +++ b/src/components/TopNav.jsx @@ -6,6 +6,7 @@ import NotificationActiveIcon from "../assets/icons/activeIcons/notificationIcon import PlaceIcon from "../assets/icons/placeIcon.svg"; import DownArrowIcon from "../assets/icons/downArrowIcon.svg"; import DownArrowBlueIcon from "../assets/icons/downArrowBlueIcon.svg"; +import LogoNoBg from "../assets/logoNoBg.svg"; import { useGeoLocation } from "../hooks/useGeoLocation"; import { getDongFromCoords } from "../utils/getDongFromCoords"; import { getCoordsFromDong } from "../utils/getCoordsFromDong"; @@ -96,9 +97,18 @@ const TopNav = () => { }} > {shouldHideNav ? ( - - {navTitle} - +
+ Logo + + {navTitle} + +
) : ( <> {"PlaceIcon"} diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx index 400a455..b63a77d 100644 --- a/src/pages/Home.jsx +++ b/src/pages/Home.jsx @@ -10,6 +10,9 @@ import heartFilled from "../assets/icons/heartFilled.svg"; import star from "../assets/icons/star.svg"; import locationIcon from "../assets/icons/locationIcon.svg"; import locationWhiteIcon from "../assets/icons/locationWhiteIcon.svg"; +import popular from "../assets/popular.jpg"; +import popular2 from "../assets/popular2.jpeg"; +import popular3 from "../assets/popular3.jpeg"; const Container = styled.div` width: 100%; @@ -282,6 +285,13 @@ const Home = () => { startDate: "2025-08-20", endDate: "2025-09-10", }, + { + status: "이용중", + popupName: "청주시 감성 스튜디오", + address: "팝콩시 팝콩동", + startDate: "2025-08-23", + endDate: "2025-09-15", + }, ]; // 최근 인기 매물 @@ -289,7 +299,7 @@ const Home = () => { { spcaeId: 1, spcaeName: "진주시 감성 스튜디오", - imageUrl: [], + imageUrl: [popular], address: "00시 00동 00-0번지", rating: 4.0, rentalFee: 100000, @@ -298,12 +308,21 @@ const Home = () => { { spcaeId: 2, spcaeName: "울주시 감성 스튜디오", - imageUrl: [], + imageUrl: [popular2], address: "00시 00동 00-0번지", rating: 4.5, rentalFee: 200000, isWished: true, }, + { + spcaeId: 3, + spcaeName: "울산시 감성 스튜디오", + imageUrl: [popular3], + address: "00시 00동 00-0번지", + rating: 4.3, + rentalFee: 300000, + isWished: true, + }, ]); // 내 주변 팝업스토어 @@ -322,6 +341,20 @@ const Home = () => { startDate: "2025-08-20", endDate: "2025-09-10", }, + { + popupId: 3, + name: "청주시 팝업", + address: "청주시 청주동", + startDate: "2025-08-20", + endDate: "2025-09-10", + }, + { + popupId: 4, + name: "강원시 팝업", + address: "강원시 강원동", + startDate: "2025-08-20", + endDate: "2025-09-10", + }, ]; const handleLookAround = () => { diff --git a/src/pages/OnBoarding.jsx b/src/pages/OnBoarding.jsx index 0bbf195..8a321a1 100644 --- a/src/pages/OnBoarding.jsx +++ b/src/pages/OnBoarding.jsx @@ -25,7 +25,7 @@ const OnboardingContainer = styled.div` const SwiperWrapper = styled.div` position: absolute; - top: 80px; + top: 10vh; left: 50%; transform: translateX(-50%); width: 100%; @@ -44,7 +44,7 @@ const SlideImage = styled.img` const BottomWrapper = styled.div` position: absolute; - bottom: 150px; + bottom: 20vh; left: 50%; transform: translateX(-50%); display: flex; diff --git a/src/pages/Splash.jsx b/src/pages/Splash.jsx index 46f9f31..c1b8638 100644 --- a/src/pages/Splash.jsx +++ b/src/pages/Splash.jsx @@ -2,7 +2,7 @@ import { useEffect } from "react"; import { useNavigate } from "react-router-dom"; import styled from "styled-components"; -import LogoNoBg from "../assets/logoNoBg.svg"; +import SplashLogo from "../assets/splashLogo.svg"; const SplashContainer = styled.div` display: flex; @@ -10,15 +10,14 @@ const SplashContainer = styled.div` justify-content: center; align-items: center; position: fixed; + top: 0; left: 50%; transform: translateX(-50%); width: 100vw; min-width: 300px; max-width: 500px; height: 100%; - background: var( - --a, - linear-gradient(208deg, #36d1dc 7.17%, #4ba7e1 50.72%, #5b86e5 93.44%) + background: var(--default2); ); gap: 22px; `; @@ -39,7 +38,7 @@ const Splash = () => { useEffect(() => { // 2초 후 자동 이동 const timer = setTimeout(() => { - navigate("/"); // 온보딩 페이지로 이동 + navigate("/onboarding"); // 온보딩 페이지로 이동 }, 2000); return () => clearTimeout(timer); @@ -47,8 +46,7 @@ const Splash = () => { return ( - 로고 - 팝콩: 나만의 팝업 공간 + 로고 ); }; diff --git a/src/stores/useSignupStore.js b/src/stores/useSignupStore.js index 488922b..0eb2889 100644 --- a/src/stores/useSignupStore.js +++ b/src/stores/useSignupStore.js @@ -4,6 +4,8 @@ const useSignupStore = create((set) => ({ step: 1, // 1: 계정 선택, 2: 개인정보 입력, 3: 회원가입 성공 userType: null, // 'host' 또는 'guest' name: "", // 이름 전역 상태 추가 + profileImage: null, // 프로필 사진 (File 또는 URL) + attachments: [], // 첨부 파일들 (File 배열) // 다음 단계로 이동 setNextStep: (nextStep, navigate) => { @@ -20,8 +22,23 @@ const useSignupStore = create((set) => ({ if (nextStep === 3 && navigate) navigate("/home"); }, - // 이름 설정 + // 회원 정보 업데이트 setName: (name) => set({ name }), + setProfileImage: (fileOrUrl) => set({ profileImage: fileOrUrl }), + addAttachment: (file) => + set((state) => ({ attachments: [...state.attachments, file] })), + removeAttachment: (index) => + set((state) => ({ + attachments: state.attachments.filter((_, i) => i !== index), + })), + resetSignup: () => + set({ + step: 1, + userType: null, + name: "", + profileImage: null, + attachments: [], + }), })); export default useSignupStore;