diff --git a/src/app/login/SocialLogin.tsx b/src/app/login/SocialLogin.tsx new file mode 100644 index 0000000..4a69d93 --- /dev/null +++ b/src/app/login/SocialLogin.tsx @@ -0,0 +1,61 @@ +'use client'; + +import Naver from '@/shared/assets/icons/naver.svg'; +import Kakao from '@/shared/assets/icons/kakao.svg'; +import Google from '@/shared/assets/icons/google.svg'; +import tw from '@/shared/utills/tw'; +import Welcome from './Welcome'; +import { useState } from 'react'; + +function SocialLogin() { + const [isModalOpen, setIsModalOpen] = useState(false); + + const socialButtons = [ + { + id: 'naver', + label: 'Naver 로그인', + icon: , + style: 'bg-[#00C73C]', + }, + { + id: 'kakao', + label: 'Kakao 로그인', + icon: , + style: 'bg-[#FEE500] text-primary', + }, + { + id: 'google', + label: 'Google 로그인', + icon: , + style: 'bg-[#EBEBEB] text-primary', + }, + ]; + + // TODO: 백엔드 연동 로직 구현 필요 + const handleLogin = (id: string) => { + console.log(id); + setIsModalOpen(true); + }; + + return ( + <> +
+ {socialButtons.map(({ id, label, icon, style }) => ( + + ))} +
+ + {/* 웰컴 모달 (임시) */} + setIsModalOpen(false)} /> + + ); +} +export default SocialLogin; diff --git a/src/app/login/Welcome.tsx b/src/app/login/Welcome.tsx new file mode 100644 index 0000000..98666bd --- /dev/null +++ b/src/app/login/Welcome.tsx @@ -0,0 +1,56 @@ +'use client'; + +import Image from 'next/image'; + +import Button from '@/shared/components/button/Button'; +import ModalLayout from '@/shared/components/modalPop/ModalLayout'; +import Ssury from '@/shared/assets/ssury/ssury_jump.webp'; +import { useRouter } from 'next/navigation'; + +interface Props { + open: boolean; + onClose: () => void; +} + +function Welcome({ open, onClose }: Props) { + const router = useRouter(); + + return ( + + + + + } + > +
+
+ +
+
+ + ); +} +export default Welcome; diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx new file mode 100644 index 0000000..34b091e --- /dev/null +++ b/src/app/login/page.tsx @@ -0,0 +1,30 @@ +import Image from 'next/image'; +import type { Metadata } from 'next'; +import loginBg from '@/shared/assets/images/login_bg.webp'; +import SocialLogin from './SocialLogin'; + +export const metadata: Metadata = { + title: 'SSOUL | 로그인', + description: '칵테일을 좋아하는 사람들을 위한 서비스 로그인 페이지', +}; + +function Page() { + return ( +
+
+ +
+ +
+

로그인

+

3초 로그인으로 SSOUL을 가볍게 즐겨보세요🍸

+
+ + +
+ ); +} +export default Page; diff --git a/src/shared/assets/icons/google.svg b/src/shared/assets/icons/google.svg new file mode 100644 index 0000000..0136eee --- /dev/null +++ b/src/shared/assets/icons/google.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/src/shared/assets/icons/kakao.svg b/src/shared/assets/icons/kakao.svg new file mode 100644 index 0000000..f1ec235 --- /dev/null +++ b/src/shared/assets/icons/kakao.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/shared/assets/icons/naver.svg b/src/shared/assets/icons/naver.svg new file mode 100644 index 0000000..80c3146 --- /dev/null +++ b/src/shared/assets/icons/naver.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/shared/assets/images/login_bg.webp b/src/shared/assets/images/login_bg.webp new file mode 100644 index 0000000..27723e7 Binary files /dev/null and b/src/shared/assets/images/login_bg.webp differ diff --git a/src/shared/components/modalPop/ModalLayout.tsx b/src/shared/components/modalPop/ModalLayout.tsx index b2d63ea..63d4725 100644 --- a/src/shared/components/modalPop/ModalLayout.tsx +++ b/src/shared/components/modalPop/ModalLayout.tsx @@ -75,7 +75,12 @@ function ModalLayout({ {children &&
{children}
} {buttons && ( -
+
{buttons}
)} diff --git a/src/shared/components/scrollTop/ScrollTopBtn.tsx b/src/shared/components/scrollTop/ScrollTopBtn.tsx index 8414015..3db9d6a 100644 --- a/src/shared/components/scrollTop/ScrollTopBtn.tsx +++ b/src/shared/components/scrollTop/ScrollTopBtn.tsx @@ -1,10 +1,11 @@ 'use client'; import Arrow from '@/shared/assets/icons/arrow_up_24.svg'; -import { useEffect, useRef } from 'react'; +import { useEffect, useRef, useState } from 'react'; function ScrollTopBtn() { const animationRef = useRef(null); + const [isVisible, setIsVisible] = useState(false); // scrollTop 버튼 클릭 시 const scrollToTop = () => { @@ -24,16 +25,23 @@ function ScrollTopBtn() { } }; + const handleScroll = () => { + const currentScroll = document.documentElement.scrollTop || document.body.scrollTop; + setIsVisible(currentScroll > 30); + }; + + window.addEventListener('scroll', handleScroll, { passive: true }); window.addEventListener('wheel', cancelScroll, { passive: true }); window.addEventListener('touchstart', cancelScroll, { passive: true }); return () => { + window.removeEventListener('scroll', handleScroll); window.removeEventListener('wheel', cancelScroll); window.removeEventListener('touchstart', cancelScroll); }; }, []); - // if (!isVisible) return null; + if (!isVisible) return null; return (