diff --git a/public/icons/notebook.webp b/public/icons/landing/notebook.webp similarity index 100% rename from public/icons/notebook.webp rename to public/icons/landing/notebook.webp diff --git a/public/icons/pencil.webp b/public/icons/landing/pencil.webp similarity index 100% rename from public/icons/pencil.webp rename to public/icons/landing/pencil.webp diff --git a/public/images/introduce1.png b/public/images/introduce1.png deleted file mode 100644 index 6e8409b5..00000000 Binary files a/public/images/introduce1.png and /dev/null differ diff --git a/public/images/introduce2.png b/public/images/introduce2.png deleted file mode 100644 index 3705fa16..00000000 Binary files a/public/images/introduce2.png and /dev/null differ diff --git a/public/images/introduce3.png b/public/images/introduce3.png deleted file mode 100644 index d348114e..00000000 Binary files a/public/images/introduce3.png and /dev/null differ diff --git a/public/images/landing/landing-create.png b/public/images/landing/landing-create.png new file mode 100644 index 00000000..96c307af Binary files /dev/null and b/public/images/landing/landing-create.png differ diff --git a/public/images/landing/landing-create2.png b/public/images/landing/landing-create2.png new file mode 100644 index 00000000..6da9d803 Binary files /dev/null and b/public/images/landing/landing-create2.png differ diff --git a/public/images/landing/landing-moim.png b/public/images/landing/landing-moim.png new file mode 100644 index 00000000..f4c1f03c Binary files /dev/null and b/public/images/landing/landing-moim.png differ diff --git a/public/images/landing/landing-signup.png b/public/images/landing/landing-signup.png new file mode 100644 index 00000000..66c14fb3 Binary files /dev/null and b/public/images/landing/landing-signup.png differ diff --git a/public/images/review1.png b/public/images/landing/review1.png similarity index 100% rename from public/images/review1.png rename to public/images/landing/review1.png diff --git a/public/images/review2.png b/public/images/landing/review2.png similarity index 100% rename from public/images/review2.png rename to public/images/landing/review2.png diff --git a/public/images/review3.png b/public/images/landing/review3.png similarity index 100% rename from public/images/review3.png rename to public/images/landing/review3.png diff --git a/public/images/long-card.png b/public/images/long-card.png deleted file mode 100644 index ec00fb97..00000000 Binary files a/public/images/long-card.png and /dev/null differ diff --git a/public/images/rainbow.webp b/public/images/rainbow.webp deleted file mode 100644 index d99911d4..00000000 Binary files a/public/images/rainbow.webp and /dev/null differ diff --git a/public/images/running.png b/public/images/running.png deleted file mode 100644 index aa15f131..00000000 Binary files a/public/images/running.png and /dev/null differ diff --git a/public/video/main-video.webm b/public/video/main-video.webm new file mode 100644 index 00000000..1259e83d Binary files /dev/null and b/public/video/main-video.webm differ diff --git a/src/components/landing/FAQ/FAQItem.tsx b/src/components/FAQ/FAQItem.tsx similarity index 100% rename from src/components/landing/FAQ/FAQItem.tsx rename to src/components/FAQ/FAQItem.tsx diff --git a/src/components/landing/FAQ/index.tsx b/src/components/FAQ/index.tsx similarity index 94% rename from src/components/landing/FAQ/index.tsx rename to src/components/FAQ/index.tsx index 9f3bfe20..f92706e8 100644 --- a/src/components/landing/FAQ/index.tsx +++ b/src/components/FAQ/index.tsx @@ -1,5 +1,5 @@ import { useEffect, useState } from 'react'; -import FAQItem from '@/components/landing/FAQ/FAQItem'; +import FAQItem from '@/components/FAQ/FAQItem'; import { FAQS } from '@/constants/faq'; const DEFAULT_OPEN_IDX = 0; diff --git a/src/components/Landing/LandingFeature.tsx b/src/components/Landing/LandingFeature.tsx new file mode 100644 index 00000000..fffd6c11 --- /dev/null +++ b/src/components/Landing/LandingFeature.tsx @@ -0,0 +1,66 @@ +import { useCallback, useRef, useState } from 'react'; +import { useInView } from 'framer-motion'; +import * as m from 'framer-motion/m'; +import Image from 'next/image'; +import { LANDING_BUTTONS } from '@/constants/landing'; + +export default function LandingFeature() { + const [selectedImage, setSelectedImage] = useState(LANDING_BUTTONS[0].image); + + const ref = useRef(null); + const isInView = useInView(ref, { once: true }); + + const handleButtonClick = useCallback((image: string) => { + setSelectedImage(image); + }, []); + + return ( +
+
+ +
+

+ 만취에서 쉽고 빠르게 모임을 만들고, +
+ 다양한 활동에 참여하세요. +

+

몇번의 클릭만으로 당신의 관심사를 함께할 사람들을 만나보세요.

+
+ + + +
+ main-image +
+ +
+
+ ); +} diff --git a/src/components/Landing/LandingMain.tsx b/src/components/Landing/LandingMain.tsx new file mode 100644 index 00000000..418c87ac --- /dev/null +++ b/src/components/Landing/LandingMain.tsx @@ -0,0 +1,40 @@ +import { useRef } from 'react'; +import { useInView } from 'framer-motion'; +import * as m from 'framer-motion/m'; +import Link from 'next/link'; + +export default function LandingMain() { + const ref = useRef(null); + const isInView = useInView(ref, { once: true }); + + return ( +
+
+
+ +
+
+ +

+ 취미에 만취하다 +
+ 일상에 즐거움을 더하다 +

+

다양한 취미와 함게, 즐거움에 만취하세요!

+

새로운 사람들과 모여 당신만의 특별한 시간을 만들어 보세요.

+ + +
+ ); +} diff --git a/src/components/Landing/LandingPopularList.tsx b/src/components/Landing/LandingPopularList.tsx new file mode 100644 index 00000000..07b8bc4c --- /dev/null +++ b/src/components/Landing/LandingPopularList.tsx @@ -0,0 +1,68 @@ +import { useRef } from 'react'; +import { useInView } from 'framer-motion'; +import * as m from 'framer-motion/m'; +import Image from 'next/image'; +import Link from 'next/link'; +import { POPULAR_MEETINGS } from '@/constants/landing'; +import { cn } from '@/utils/classNames'; + +export default function LandingPopularList() { + const ref = useRef(null); + const isInView = useInView(ref, { once: true }); + + return ( +
+
+ +
+

만취 모임 LIST

+

가장 인기 있는 모임 TOP 5

+

+ 다양한 취미와 관심사를 가진 사람들이 함께하는 인기 모임들을 만나고, 당신만의 특별한 경험을 만들어 보세요. +

+
+
+ 만취 모임 참여하기 +
+ + + {POPULAR_MEETINGS.map(({ title, description, colSpan, image }, i) => ( +
+
+

{title}

+

{description}

+
+
+ + {(i === 0 || i === POPULAR_MEETINGS.length - 1) && image && ( +
+ {`${title} +
+ )} +
+
+ ))} + +
+
+ ); +} diff --git a/src/components/Landing/LandingPrimary.tsx b/src/components/Landing/LandingPrimary.tsx new file mode 100644 index 00000000..b39ba978 --- /dev/null +++ b/src/components/Landing/LandingPrimary.tsx @@ -0,0 +1,11 @@ +export default function LandingPrimary() { + return ( +
+
+

혼자가 아닌 함께, 취미를 더 즐겁게

+

관심사와 취미를 공유할 사람들을 만나보세요.

+

참여하기 쉽고, 새로운 경험이 기다리고 있습니다.

+
+
+ ); +} diff --git a/src/components/Landing/LandingReviewSection.tsx b/src/components/Landing/LandingReviewSection.tsx new file mode 100644 index 00000000..2ff172d9 --- /dev/null +++ b/src/components/Landing/LandingReviewSection.tsx @@ -0,0 +1,57 @@ +import { useRef } from 'react'; +import { useInView } from 'framer-motion'; +import * as m from 'framer-motion/m'; +import Image from 'next/image'; +import Link from 'next/link'; +import { REVIEW_DATA } from '@/constants/landing'; + +export default function LandingReviewSection() { + const ref = useRef(null); + const isInView = useInView(ref, { once: true }); + + return ( +
+
+ +

만취와 함께한 경험을 공유합니다

+

참여자들이 남긴 생생한 후기를 통해 다양한 모임의 실제 경험을 확인해보세요.

+ + + + {REVIEW_DATA.map(({ name, title, content, image }) => ( +
+
+
+ 프로필 사진 +
+
+

{name}

+

{title}

+
+
+

{content}

+
+ {title} +
+
+ ))} + +
+
+ ); +} diff --git a/src/components/Landing/LandingScrollToTop.tsx b/src/components/Landing/LandingScrollToTop.tsx new file mode 100644 index 00000000..d08f151a --- /dev/null +++ b/src/components/Landing/LandingScrollToTop.tsx @@ -0,0 +1,43 @@ +import { useEffect, useState } from 'react'; +import * as m from 'framer-motion/m'; +import { IS_SERVER } from '@/constants/server'; + +export default function LandingScrollToTop() { + const [showScrollTop, setShowScrollTop] = useState(false); + + const scrollToTop = () => { + if (!IS_SERVER) { + window.scrollTo({ top: 0, behavior: 'smooth' }); + } + }; + + useEffect(() => { + const handleScroll = () => { + if (!IS_SERVER) { + setShowScrollTop(window.scrollY > 350); + } + }; + + window.addEventListener('scroll', handleScroll); + return () => window.removeEventListener('scroll', handleScroll); + }, []); + + function ShowScrollTop() { + if (!showScrollTop) return null; + + return ( + + ▲ + + ); + } + + return ShowScrollTop(); +} diff --git a/src/components/landing/CardList/index.tsx b/src/components/landing/CardList/index.tsx deleted file mode 100644 index 2797b964..00000000 --- a/src/components/landing/CardList/index.tsx +++ /dev/null @@ -1,36 +0,0 @@ -/* eslint-disable tailwindcss/no-custom-classname */ -import Image from 'next/image'; -import Link from 'next/link'; - -export function CardList() { - return ( -
-
-
- 만취 모임 LIST - - 지금 가장 인기있는 모임 -
- TOP LIST - - - 다양한 취미와 관심사를 가진 사람들이 함께하는 인기 모임들을 만나고, -
당신만의 특별한 경험을 만들어보세요. - - - 모임 참여하기 - -
-
- 카드 이미지 - 카드 이미지 - 카드 이미지 - 카드 이미지 - 카드 이미지 - 카드 이미지 - 카드 이미지 -
-
-
- ); -} diff --git a/src/components/landing/FeatureSection/index.tsx b/src/components/landing/FeatureSection/index.tsx deleted file mode 100644 index 6df45d81..00000000 --- a/src/components/landing/FeatureSection/index.tsx +++ /dev/null @@ -1,74 +0,0 @@ -/* eslint-disable tailwindcss/no-custom-classname */ -import { useRef } from 'react'; -import { useInView } from 'framer-motion'; -import * as m from 'framer-motion/m'; -import Image from 'next/image'; -import Logo from 'public/logo/logo.png'; - -export default function FeatureSection() { - const ref = useRef(null); - const isInView = useInView(ref, { once: true }); - - return ( -
-
-
- -

- 만취에서 쉽고 빠르게 모임을 만들고, -
- 다양한 활동을 참여하세요. -

- 몇 번의 클릭만으로 당신의 관심사를 함께할 사람들을 만나보세요. - - -
- - - -
-
-
- 예시사진 -
-
- -
-
-
- ); -} diff --git a/src/components/landing/ImageSection/index.tsx b/src/components/landing/ImageSection/index.tsx deleted file mode 100644 index a8e34f97..00000000 --- a/src/components/landing/ImageSection/index.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import Image from 'next/image'; - -export default function ImageSection() { - return ( -
-
-
- 노트북그림 - 그림 그리는그림 -
-
-
- ); -} diff --git a/src/components/landing/IntroduceReview/index.tsx b/src/components/landing/IntroduceReview/index.tsx deleted file mode 100644 index 13369881..00000000 --- a/src/components/landing/IntroduceReview/index.tsx +++ /dev/null @@ -1,63 +0,0 @@ -/* eslint-disable tailwindcss/no-custom-classname */ -/* eslint-disable quotes */ -import Image from 'next/image'; - -export function IntroduceReview() { - return ( -
-
- - 만취와 함께한 경험을 공유합니다. - -
- 참여자들이 남긴 생생한 후기를 통해 다양한 모임의 실제 경험을 엿보세요! -
-
-
- 후기 사진 1 -
- 김민수 - 만취 요리교실 -
- {Array.from({ length: 5 }).map((_, i) => ( - 좋아요 - ))} -
-
-
-
{`"이번 모임은 정말 뜻깊었어요! 처음 만난 분들과 취미에 대해 이야기하며 즐거운 시간을 보냈습니다. 특히 요리 클래스가 인상 깊었고, 새로운 친구들도 많이 사귀었어요. 앞으로도 이런 모임이 자주 열렸으면 좋겠습니다!"`}
-
-
-
- 후기 사진 2 -
- 김민수 - 만취 요리교실 -
- {Array.from({ length: 5 }).map((_, i) => ( - 좋아요 - ))} -
-
-
-
{`"이번 모임은 정말 뜻깊었어요! 처음 만난 분들과 취미에 대해 이야기하며 즐거운 시간을 보냈습니다. 특히 요리 클래스가 인상 깊었고, 새로운 친구들도 많이 사귀었어요. 앞으로도 이런 모임이 자주 열렸으면 좋겠습니다!"`}
-
-
-
- 후기 사진 3 -
- 김민수 - 만취 요리교실 -
- {Array.from({ length: 5 }).map((_, i) => ( - 좋아요 - ))} -
-
-
-
{`"이번 모임은 정말 뜻깊었어요! 처음 만난 분들과 취미에 대해 이야기하며 즐거운 시간을 보냈습니다. 특히 요리 클래스가 인상 깊었고, 새로운 친구들도 많이 사귀었어요. 앞으로도 이런 모임이 자주 열렸으면 좋겠습니다!"`}
-
-
-
- ); -} diff --git a/src/components/landing/IntroduceService/index.tsx b/src/components/landing/IntroduceService/index.tsx deleted file mode 100644 index 402ece3a..00000000 --- a/src/components/landing/IntroduceService/index.tsx +++ /dev/null @@ -1,39 +0,0 @@ -/* eslint-disable tailwindcss/no-custom-classname */ -import Image from 'next/image'; - -export default function IntroduceService() { - return ( -
-
- - 취미로 더 풍부한 일상을, - - 만취에서 시작하세요 - 다양한 취미를 활동, 간편한 참여로 취미를 즐기고 사람들과 함께하세요 -
-
-
-
- 소개 사진 1 -
- 다양한 취미로 활동 제공 - 음악, 스포츠, 요리 등 다양한 취미를 쉽게 찾고 참여할 수 있습니다. -
-
-
- 소개 사진 1 -
- 소셜 네트워크 생성 - 공통된 취미를 가진 사람들과 교류하며 새로운 인연을 맺을 수 있습니다. -
-
-
- 소개 사진 1 -
- 간편한 참여 - 간단한 절차로 모임을 만들거나 참여할 수 있어 누구나 쉽게 즐길 수 있습니다. -
-
-
- ); -} diff --git a/src/components/landing/LandingMain/index.tsx b/src/components/landing/LandingMain/index.tsx deleted file mode 100644 index 03e8c9e4..00000000 --- a/src/components/landing/LandingMain/index.tsx +++ /dev/null @@ -1,39 +0,0 @@ -/* eslint-disable tailwindcss/no-custom-classname */ -import * as m from 'framer-motion/m'; -import Link from 'next/link'; -import ArrowBtn from 'public/icons/ArrowBtn'; - -export default function LandingMain() { - return ( -
-
- -
-
- -

- 취미에 만취하다 -
- 일상에 즐거움을 더하다 -

-

- 다양한 취미와 함께, 즐거움에 만취하세요! -
- 새로운 사람들과 모여 당신만의 특별한 시간을 만들어 보세요! -

- - 만취 모임 참여하기 - - - -
-
- ); -} diff --git a/src/components/landing/MainIntro/index.tsx b/src/components/landing/MainIntro/index.tsx deleted file mode 100644 index 3ea81292..00000000 --- a/src/components/landing/MainIntro/index.tsx +++ /dev/null @@ -1,27 +0,0 @@ -/* eslint-disable tailwindcss/no-custom-classname */ -import Image from 'next/image'; -import Link from 'next/link'; - -export default function MainIntro() { - return ( -
-
- 취미에 만취하다 - 일상에 즐거움을 더하다 -
-
- - 다양한 취미와 함께, 즐거움에 만취하세요 -
- 새로운 사람들과 모여 당신만의 특별한 시간을 만들어 보세요. - -
- - 모임 참여하기 - -
- 모임 이미지 -
-
- ); -} diff --git a/src/components/landing/PopularList/index.tsx b/src/components/landing/PopularList/index.tsx deleted file mode 100644 index 76df4666..00000000 --- a/src/components/landing/PopularList/index.tsx +++ /dev/null @@ -1,54 +0,0 @@ -import { useRef } from 'react'; -import { useInView } from 'framer-motion'; -import * as m from 'framer-motion/m'; -import Link from 'next/link'; - -export default function PopularList() { - const ref = useRef(null); - const isInView = useInView(ref, { once: true }); - - return ( -
-
-
- - 만취 모임 LIST -

지금 가장 인기있는 모임 TOP 리스트

-

- 다양한 취미와 관심사를 가진 사람들이 함께하는 인기 모임들을 만나고, 당신만의 특별한 경험을 만들어 보세요. -

- - 모임 참여하기 - - - -
-
-
-
-
- -
-
-
- ); -} diff --git a/src/components/landing/ReviewSection/index.tsx b/src/components/landing/ReviewSection/index.tsx deleted file mode 100644 index a4bad8a3..00000000 --- a/src/components/landing/ReviewSection/index.tsx +++ /dev/null @@ -1,132 +0,0 @@ -import { useEffect, useRef, useState } from 'react'; -import { useInView } from 'framer-motion'; -import * as m from 'framer-motion/m'; -import Image from 'next/image'; -import Link from 'next/link'; -import Review1 from 'public/images/review1.png'; -import Review2 from 'public/images/review2.png'; -import Review3 from 'public/images/review3.png'; -import { IS_SERVER } from '@/constants/server'; - -export default function ReviewSection() { - const [showScrollTop, setShowScrollTop] = useState(false); - - const ref = useRef(null); - const isInView = useInView(ref, { once: true }); - - const scrollToTop = () => { - if (!IS_SERVER) { - window.scrollTo({ top: 0, behavior: 'smooth' }); - } - }; - - useEffect(() => { - const handleScroll = () => { - if (!IS_SERVER) { - setShowScrollTop(window.scrollY > 350); - } - }; - - window.addEventListener('scroll', handleScroll); - return () => window.removeEventListener('scroll', handleScroll); - }, []); - - return ( - <> -
-
-
- -

만취와 함께한 경험을 공유합니다

- 참여자들이 남긴 생생한 후기를 통해 다양한 모임의 실제 경험을 확인해보세요. - - 후기 보러가기 - - - -
-
- 프로필 사진 -
- 김OO - 만취 토론교실 -
-
-
- 이번 모임은 정말 뜻깊었어요! 처음 만난 분과 취미에 대해 이야기하며 즐거운 시간을 보냈습니다. 특히 요리 클래스가 인상 깊었고, 새로운 친구들도 - 많이 사귀었어요. 앞으로도 이런 모임이 자주 열렸으면 좋겠습니다! -
-
- 후기1 -
-
-
-
- 프로필 사진 -
- 김OO - 만취 토론교실 -
-
-
- 이번 모임은 정말 뜻깊었어요! 처음 만난 분과 취미에 대해 이야기하며 즐거운 시간을 보냈습니다. 특히 요리 클래스가 인상 깊었고, 새로운 친구들도 - 많이 사귀었어요. 앞으로도 이런 모임이 자주 열렸으면 좋겠습니다! -
-
- 후기2 -
-
-
-
- 프로필 사진 -
- 김OO - 만취 토론교실 -
-
-
- 이번 모임은 정말 뜻깊었어요! 처음 만난 분과 취미에 대해 이야기하며 즐거운 시간을 보냈습니다. 특히 요리 클래스가 인상 깊었고, 새로운 친구들도 - 많이 사귀었어요. 앞으로도 이런 모임이 자주 열렸으면 좋겠습니다! -
-
- 후기3 -
-
- -
-
-
-
-
-
- {showScrollTop && ( - - ▲ - - )} - - ); -} diff --git a/src/components/loginSignup/LoginForm/index.tsx b/src/components/loginSignup/LoginForm/index.tsx index ff2ad444..d7807c4c 100644 --- a/src/components/loginSignup/LoginForm/index.tsx +++ b/src/components/loginSignup/LoginForm/index.tsx @@ -46,7 +46,7 @@ export default function LoginForm() {

회원이 아닌가요?{' '} - + 회원가입

diff --git a/src/components/loginSignup/SignupForm/index.tsx b/src/components/loginSignup/SignupForm/index.tsx index a89aab1b..d529d7e4 100644 --- a/src/components/loginSignup/SignupForm/index.tsx +++ b/src/components/loginSignup/SignupForm/index.tsx @@ -50,15 +50,13 @@ export default function SignupForm() { return (
로고 router.push('/main')} priority /> - -
setNick(e.target.value)} /> @@ -71,11 +69,13 @@ export default function SignupForm() { 생성하기

- 이미 회원이신가요?{' '} - + 이미 회원이신가요? + 로그인

+
+ ); } diff --git a/src/components/loginSignup/Social/index.tsx b/src/components/loginSignup/Social/index.tsx index 5676b6cc..81c1cada 100644 --- a/src/components/loginSignup/Social/index.tsx +++ b/src/components/loginSignup/Social/index.tsx @@ -28,15 +28,15 @@ export default function Social() { }; return ( -
-

SNS계정으로 간편 로그인/회원가입

+
+ SNS계정으로 간편 로그인/회원가입
{SOCIALS.map(({ name, color, logo, url }) => ( diff --git a/src/components/shared/ScrollToTop/index.tsx b/src/components/shared/ScrollToTop/index.tsx new file mode 100644 index 00000000..9296e84a --- /dev/null +++ b/src/components/shared/ScrollToTop/index.tsx @@ -0,0 +1,14 @@ +import { useEffect } from 'react'; +import { useRouter } from 'next/router'; + +// 페이지 전환, 즉 pathname이 변경될 때 마다 최상단이 아니라 이전 페이지에 영향을 받는 상황이 생기는 경우가 종종 발생하기 때문에 +// 스크롤을 최상단으로 올려주는 컴포넌트를 만들어줌 +export default function ScrollToTop() { + const { pathname } = useRouter(); + + useEffect(() => { + window.scrollTo(0, 0); + }, [pathname]); + + return null; +} diff --git a/src/components/shared/pageLayout/index.tsx b/src/components/shared/pageLayout/index.tsx index 830f082f..7cf1b7e5 100644 --- a/src/components/shared/pageLayout/index.tsx +++ b/src/components/shared/pageLayout/index.tsx @@ -3,6 +3,7 @@ import { AnimatePresence } from 'framer-motion'; import * as m from 'framer-motion/m'; import GNB from '@/components/shared/GNB'; import Loading from '@/components/shared/Loading'; +import ScrollToTop from '@/components/shared/ScrollToTop'; import { IS_SERVER } from '@/constants/server'; import { useAuthBoundary } from '@/hooks/useAuthBoundary'; import useInternalRouter from '@/hooks/useInternalRouter'; @@ -65,6 +66,7 @@ export default function PageLayout({ children, showHeader = true }: LayoutProps) ) : ( + {children} {/* {shouldShowFooter &&