diff --git a/src/assets/connect_icon.svg b/src/assets/connect_icon.svg new file mode 100644 index 0000000..fae45a6 --- /dev/null +++ b/src/assets/connect_icon.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/assets/succes.svg b/src/assets/succes.svg new file mode 100644 index 0000000..2fe853c --- /dev/null +++ b/src/assets/succes.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/wallet_icon.svg b/src/assets/wallet_icon.svg new file mode 100644 index 0000000..c5db350 --- /dev/null +++ b/src/assets/wallet_icon.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/pages/SignupPage/SignupPage.style.ts b/src/pages/SignupPage/SignupPage.style.ts index e69de29..394be4d 100644 --- a/src/pages/SignupPage/SignupPage.style.ts +++ b/src/pages/SignupPage/SignupPage.style.ts @@ -0,0 +1,226 @@ +import styled from 'styled-components'; + +// 전체 컨테이너 +export const AppContainer = styled.div` + font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; + width: 100vw; + min-height: 100vh; + margin: 0; + padding: 0; +`; + +// 헤더 스타일 +export const Header = styled.header` + padding: 15px 20px; + width: 100%; + box-sizing: border-box; +`; + +export const HeaderContent = styled.div` + display: flex; + align-items: center; +`; + +export const BookLogo = styled.img` + height: 24px; + width: auto; + margin-right: 10px; +`; + +export const HeaderLogo = styled.div` + font-size: 20px; + font-weight: 600; + color: #333; +`; + +// 메인 섹션 +export const Main = styled.main` + display: flex; + flex-direction: column; + justify-content: center; + align-items: flex-start; + min-height: calc(100vh - 60px); + padding: 20px; + width: 100%; + box-sizing: border-box; +`; + +export const ProgressBarContainer = styled.div` + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + width: 100%; + align-self: stretch; +`; + +export const Navigation = styled.div` + display: flex; + align-items: center; + justify-content: center; + width: 100%; + max-width: 500px; +`; + +export const NavButton = styled.button` + background: none; + border: none; + cursor: pointer; + font-size: 1.5rem; + color: #888; + + &:focus { + outline: none; + } +`; + +export const Indicators = styled.div` + display: flex; + gap: 1rem; + margin: 0 1rem; +`; + +export interface DotProps { + active: boolean; +} + +export const Dot = styled.div` + width: 15px; + height: 15px; + flex-shrink: 0; + border-radius: 50%; + background-color: ${props => props.active ? '#7C7E83' : '#DEE1E6'}; +`; + +export const SignupContainer = styled.div` + padding: 2rem; + background-color: white; + border-radius: 10px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.05); + width: 100%; + max-width: 500px; + margin: 0 auto; +`; + +export const Title = styled.h1` + color: #171A1F; + text-align: center; + font-family: Archivo; + font-size: 32px; + font-style: normal; + font-weight: 700; +`; + +export const Subtitle = styled.h2` + color: #323842; + text-align: center; + font-family: Archivo; + font-size: 20px; + font-style: normal; + font-weight: 600; + line-height: 30px; /* 150% */ +`; + +export const FormGroup = styled.div` + margin-bottom: 1rem; +`; + +export const Label = styled.label` + display: block; + font-size: 0.9rem; +`; + +export const Input = styled.input` + width: 100%; + padding: 0.75rem; + border: 1px solid #e0e0e0; + border-radius: 5px; + font-size: 1rem; + background-color: #f5f5f5; + + &:focus { + outline: none; + border-color: #5165f6; + } +`; + +export const PasswordContainer = styled.div` + position: relative; +`; + +export const ToggleVisibility = styled.button` + position: absolute; + right: 10px; + top: 50%; + transform: translateY(-50%); + background: none; + border: none; + cursor: pointer; + color: #888; +`; + +export const SubmitButton = styled.button` + width: 100%; + padding: 0.75rem; + background-color: #5165f6; + color: white; + border: none; + border-radius: 5px; + font-size: 1rem; + cursor: pointer; + margin-top: 1rem; + + &:hover { + background-color: #4050d0; + } +`; + +export const ForgotPassword = styled.div` + text-align: center; + margin-top: 1rem; + font-size: 0.9rem; +`; + +export const ForgotLink = styled.a` + color: #5165f6; + cursor: pointer; + margin-left: 0.5rem; +`; + +export const WalletContainer = styled.div` + display: flex; + align-items: center; + gap: 18px; + padding-top:2rem; + padding-bottom:1rem; +`; + +export const WalletButtonContainer = styled.div` + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 8px; + width: 100%; +`; + +export const WalletButton = styled.button` + width: 100%; + padding: 0.75rem; + border-radius: 5px; + border: 1px solid #565E6D; + background: #FFF; + color: black; + font-size: 1rem; + cursor: pointer; + margin-top: 0.5rem; + box-sizing: border-box; +`; + +export const SuccessMessage = styled.h1` + color: #171A1F; +font-family: Archivo; +font-size: 32px; +font-style: normal; +font-weight: 700; +line-height: 48px; /* 150% */ +`; \ No newline at end of file diff --git a/src/pages/SignupPage/SignupPage.tsx b/src/pages/SignupPage/SignupPage.tsx index 48b361a..f5df229 100644 --- a/src/pages/SignupPage/SignupPage.tsx +++ b/src/pages/SignupPage/SignupPage.tsx @@ -1,9 +1,238 @@ -const SignupPage = () => { +import BookVector from '../../assets/book_vector.svg' +import { useState } from 'react'; +import { useNavigate } from 'react-router-dom'; +import WalletIcon from '../../assets/wallet_icon.svg'; +import ConnectIcon from '../../assets/connect_icon.svg' +import SuccessIcon from '../../assets/succes.svg' + +import { + AppContainer, Header, HeaderContent, BookLogo, HeaderLogo, + Main, ProgressBarContainer, Navigation, NavButton, Indicators, + Dot, SignupContainer, Title, Subtitle, FormGroup, Label, Input, + PasswordContainer, ToggleVisibility, SubmitButton, ForgotPassword, + ForgotLink, WalletButton, WalletButtonContainer, WalletContainer, SuccessMessage +} from './SignupPage.style'; + +// Component Interfaces +interface ProgressBarProps { + currentStep: number; + totalSteps: number; +} + +const ProgressBar: React.FC = ({ currentStep, totalSteps }) => { + return ( + + + < + + {Array.from({ length: totalSteps }).map((_, index) => ( + + ))} + + > + + + ); +}; + +const SignupForm: React.FC<{ handleNext: () => void; formData: any; setFormData: any }> = ({ handleNext, formData, setFormData }) => { + let navigate = useNavigate(); + const [showPassword, setShowPassword] = useState(false); + + const handleChange = (e: React.ChangeEvent) => { + const { name, value } = e.target; + setFormData((prev: any) => ({ ...prev, [name]: value })); // 부모 컴포넌트의 상태 업데이트 + }; + + const handleSubmit = (e: React.FormEvent) => { + e.preventDefault(); + // Handle form submission + console.log(formData); + }; + + return ( + + 회원가입 + 회원 정보 입력 + +
+ + + + + + + + + + + + + + + + + + + + + + setShowPassword(!showPassword)} + > + 👁️ + + + + + {handleNext();}}>다음 +
+ + + 이미 계정이 있으신가요? navigate('/')}>로그인 + + + ); +}; + +const WalletForm: React.FC<{ handleNext: () => void }> = ({ handleNext }) => { + let navigate = useNavigate(); + + return ( + + 회원가입 + XRP 지갑 연동하기 + +
+
+ + + +
XRP 지갑이 있다면,
+ 지갑 연동하기 + + + +
+
+ + + +
XRP 지갑이 없다면,
+ 지갑 발급하기 + + +
+ +
+ + {/* 임의로 넣은 버튼임 */} + 다음 + + + 이미 계정이 있으신가요? navigate('/')}>로그인 + + + ); +}; + +const SuccessForm: React.FC<{ formData: any }> = ({ formData }) => { + let navigate = useNavigate(); + + return ( + + 회원가입 + XRP 지갑 연동하기 + +
+ + + + + {formData.name}님의 지갑이

+ 연동 완료되었습니다! + + + +
+ + 회원가입 + + + 이미 계정이 있으신가요? navigate('/')}>로그인 + + + ); +}; + +// Main Component +const SignupPage: React.FC = () => { + const [currentStep, setCurrentStep] = useState(1); + const totalSteps = 3; + + const [formData, setFormData] = useState({ + name: '', + email: '', + password: '', + confirmPassword: '' + }); + + const handleNext = () => { + console.log("handleNext 호출됨! 현재 단계:", currentStep); + console.log("현재 formData 상태:", formData); + if (currentStep < totalSteps) { + setCurrentStep(prev => prev + 1); + } + }; return ( -
-

Signup Page

-
+ +
+ + + XRPedia + +
+
+ + {currentStep === 1 && } + {currentStep === 2 && } + {currentStep === 3 && } + +
+ ); }; -export default SignupPage; +export default SignupPage; \ No newline at end of file