From 6056070421b0096b12214cfae5e1da83ac65e524 Mon Sep 17 00:00:00 2001 From: YuJin Lee Date: Sat, 22 Mar 2025 15:06:08 +0900 Subject: [PATCH 1/5] feat: signup1 --- src/pages/SignupPage/SignupPage.style.ts | 188 ++++++++++++++++++++++ src/pages/SignupPage/SignupPage.tsx | 196 ++++++++++++++++++++++- 2 files changed, 379 insertions(+), 5 deletions(-) diff --git a/src/pages/SignupPage/SignupPage.style.ts b/src/pages/SignupPage/SignupPage.style.ts index e69de29..8959cc1 100644 --- a/src/pages/SignupPage/SignupPage.style.ts +++ b/src/pages/SignupPage/SignupPage.style.ts @@ -0,0 +1,188 @@ +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; +`; \ No newline at end of file diff --git a/src/pages/SignupPage/SignupPage.tsx b/src/pages/SignupPage/SignupPage.tsx index 48b361a..236cc25 100644 --- a/src/pages/SignupPage/SignupPage.tsx +++ b/src/pages/SignupPage/SignupPage.tsx @@ -1,9 +1,195 @@ -const SignupPage = () => { +import BookVector from '../../assets/book_vector.svg' +import { useState } from 'react'; +import { useNavigate } from 'react-router-dom'; + +import { + AppContainer, Header, HeaderContent, BookLogo, HeaderLogo, + Main, ProgressBarContainer, Navigation, NavButton, Indicators, + Dot, SignupContainer, Title, Subtitle, FormGroup, Label, Input, + PasswordContainer, ToggleVisibility, SubmitButton, ForgotPassword, + ForgotLink +} from './SignupPage.style'; + +// Component Interfaces +interface ProgressBarProps { + currentStep: number; + totalSteps: number; + onPrevious: () => void; + onNext: () => void; +} + +const ProgressBar: React.FC = ({ currentStep, totalSteps, onPrevious, onNext }) => { + return ( + + + < + + {Array.from({ length: totalSteps }).map((_, index) => ( + + ))} + + > + + + ); +}; + +const SignupForm: React.FC = () => { + let navigate = useNavigate(); + const [showPassword, setShowPassword] = useState(false); + const [formData, setFormData] = useState({ + name: '', + email: '', + password: '', + confirmPassword: '' + }); + + const handleChange = (e: React.ChangeEvent) => { + const { name, value } = e.target; + setFormData(prev => ({ ...prev, [name]: value })); + }; + + const handleSubmit = (e: React.FormEvent) => { + e.preventDefault(); + // Handle form submission + console.log(formData); + }; + + + + return ( + + 회원가입 + 회원 정보 입력 + +
+ + + + + + + + + + + + + + + + + + + + + + setShowPassword(!showPassword)} + > + 👁️ + + + + + 다음 +
+ + + 이미 계정이 있으신가요? navigate('/')}>로그인 + + + ); +}; + +const WalletForm: React.FC = () => { + let navigate = useNavigate(); + return ( + + 회원가입 + XRP 지갑 연동하기 + +
+ + + + 다음 +
+ + + 이미 계정이 있으신가요? navigate('/')}>로그인 + + + ); +}; + +// Main Component +const SignupPage: React.FC = () => { + const [currentStep, setCurrentStep] = useState(1); + const totalSteps = 2; + + const handlePrevious = () => { + if (currentStep > 1) { + setCurrentStep(prev => prev - 1); + } + }; + + const handleNext = () => { + if (currentStep < totalSteps) { + setCurrentStep(prev => prev + 1); + } + }; + return ( -
-

Signup Page

-
+ +
+ + + XRPedia + +
+
+ + {/* */} + + +
+ ); }; -export default SignupPage; +export default SignupPage; \ No newline at end of file From 4f77e4c17c24587b308cebb6067a5a10ec2ad036 Mon Sep 17 00:00:00 2001 From: YuJin Lee Date: Sat, 22 Mar 2025 16:22:06 +0900 Subject: [PATCH 2/5] feat: signup2_wallet --- src/assets/connect_icon.svg | 5 ++++ src/assets/wallet_icon.svg | 5 ++++ src/pages/SignupPage/SignupPage.style.ts | 29 ++++++++++++++++++++++++ src/pages/SignupPage/SignupPage.tsx | 29 +++++++++++++++++++----- 4 files changed, 62 insertions(+), 6 deletions(-) create mode 100644 src/assets/connect_icon.svg create mode 100644 src/assets/wallet_icon.svg 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/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 8959cc1..87da2a1 100644 --- a/src/pages/SignupPage/SignupPage.style.ts +++ b/src/pages/SignupPage/SignupPage.style.ts @@ -185,4 +185,33 @@ 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; `; \ No newline at end of file diff --git a/src/pages/SignupPage/SignupPage.tsx b/src/pages/SignupPage/SignupPage.tsx index 236cc25..37f13ae 100644 --- a/src/pages/SignupPage/SignupPage.tsx +++ b/src/pages/SignupPage/SignupPage.tsx @@ -1,13 +1,15 @@ 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 { AppContainer, Header, HeaderContent, BookLogo, HeaderLogo, Main, ProgressBarContainer, Navigation, NavButton, Indicators, Dot, SignupContainer, Title, Subtitle, FormGroup, Label, Input, PasswordContainer, ToggleVisibility, SubmitButton, ForgotPassword, - ForgotLink + ForgotLink, WalletButton, WalletButtonContainer, WalletContainer } from './SignupPage.style'; // Component Interfaces @@ -55,8 +57,6 @@ const SignupForm: React.FC = () => { console.log(formData); }; - - return ( 회원가입 @@ -133,16 +133,33 @@ const SignupForm: React.FC = () => { const WalletForm: React.FC = () => { let navigate = useNavigate(); + return ( 회원가입 XRP 지갑 연동하기
+
+ + + +
XRP 지갑이 있다면,
+ 지갑 연동하기 + + + +
+
+ + + +
XRP 지갑이 없다면,
+ 지갑 발급하기 + + +
- - - 다음
From efaf669771265dcb507bdba8d28525f0f2fbf242 Mon Sep 17 00:00:00 2001 From: YuJin Lee Date: Sat, 22 Mar 2025 16:41:30 +0900 Subject: [PATCH 3/5] =?UTF-8?q?feat:=20=EB=8B=A4=EC=9D=8C=20=EB=B2=84?= =?UTF-8?q?=ED=8A=BC=20=ED=81=B4=EB=A6=AD=20=EC=9D=B4=EB=B2=A4=ED=8A=B8=20?= =?UTF-8?q?=EA=B5=AC=ED=98=84=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/SignupPage/SignupPage.tsx | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/src/pages/SignupPage/SignupPage.tsx b/src/pages/SignupPage/SignupPage.tsx index 37f13ae..579d73b 100644 --- a/src/pages/SignupPage/SignupPage.tsx +++ b/src/pages/SignupPage/SignupPage.tsx @@ -36,7 +36,7 @@ const ProgressBar: React.FC = ({ currentStep, totalSteps, onPr ); }; -const SignupForm: React.FC = () => { +const SignupForm: React.FC<{ handleNext: () => void }> = ({ handleNext }) => { let navigate = useNavigate(); const [showPassword, setShowPassword] = useState(false); const [formData, setFormData] = useState({ @@ -121,7 +121,10 @@ const SignupForm: React.FC = () => { - 다음 + { + console.log("다음 버튼 클릭됨"); + handleNext(); + }}>다음 @@ -181,11 +184,11 @@ const SignupPage: React.FC = () => { }; const handleNext = () => { + console.log("handleNext 호출됨! 현재 단계:", currentStep); if (currentStep < totalSteps) { setCurrentStep(prev => prev + 1); } }; - return (
@@ -202,7 +205,8 @@ const SignupPage: React.FC = () => { onNext={handleNext} /> {/* */} - + {/* */} + {currentStep === 1 ? : } From d2ffebc3182de0a3f056bb3379e2f237d2d721bb Mon Sep 17 00:00:00 2001 From: YuJin Lee Date: Sat, 22 Mar 2025 17:05:59 +0900 Subject: [PATCH 4/5] feat: signup_success --- src/assets/succes.svg | 3 ++ src/pages/SignupPage/SignupPage.style.ts | 9 ++++ src/pages/SignupPage/SignupPage.tsx | 56 ++++++++++++++++-------- 3 files changed, 49 insertions(+), 19 deletions(-) create mode 100644 src/assets/succes.svg 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/pages/SignupPage/SignupPage.style.ts b/src/pages/SignupPage/SignupPage.style.ts index 87da2a1..394be4d 100644 --- a/src/pages/SignupPage/SignupPage.style.ts +++ b/src/pages/SignupPage/SignupPage.style.ts @@ -214,4 +214,13 @@ export const WalletButton = styled.button` 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 579d73b..fd90ea2 100644 --- a/src/pages/SignupPage/SignupPage.tsx +++ b/src/pages/SignupPage/SignupPage.tsx @@ -3,34 +3,33 @@ 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 + ForgotLink, WalletButton, WalletButtonContainer, WalletContainer, SuccessMessage } from './SignupPage.style'; // Component Interfaces interface ProgressBarProps { currentStep: number; totalSteps: number; - onPrevious: () => void; - onNext: () => void; } -const ProgressBar: React.FC = ({ currentStep, totalSteps, onPrevious, onNext }) => { +const ProgressBar: React.FC = ({ currentStep, totalSteps }) => { return ( - < + < {Array.from({ length: totalSteps }).map((_, index) => ( ))} - > + > ); @@ -121,10 +120,7 @@ const SignupForm: React.FC<{ handleNext: () => void }> = ({ handleNext }) => { - { - console.log("다음 버튼 클릭됨"); - handleNext(); - }}>다음 + {handleNext();}}>다음 @@ -172,17 +168,40 @@ const WalletForm: React.FC = () => { ); }; +const SuccessForm: React.FC = () => { + let navigate = useNavigate(); + + return ( + + 회원가입 + XRP 지갑 연동하기 + +
+ + + + + Name님의 지갑이

+ 연동 완료되었습니다! + + + +
+ + 회원가입 + + + 이미 계정이 있으신가요? navigate('/')}>로그인 + + + ); +}; + // Main Component const SignupPage: React.FC = () => { const [currentStep, setCurrentStep] = useState(1); const totalSteps = 2; - const handlePrevious = () => { - if (currentStep > 1) { - setCurrentStep(prev => prev - 1); - } - }; - const handleNext = () => { console.log("handleNext 호출됨! 현재 단계:", currentStep); if (currentStep < totalSteps) { @@ -201,12 +220,11 @@ const SignupPage: React.FC = () => { {/* */} {/* */} - {currentStep === 1 ? : } + + {/* {currentStep === 1 ? : } */} From 5ea96f74f0a8e52f1056b5b1c49cfcd6a0130c66 Mon Sep 17 00:00:00 2001 From: YuJin Lee Date: Sat, 22 Mar 2025 17:26:39 +0900 Subject: [PATCH 5/5] =?UTF-8?q?feat:=20=ED=8F=BC=20=EB=8D=B0=EC=9D=B4?= =?UTF-8?q?=ED=84=B0=20=EC=97=B0=EB=8F=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/SignupPage/SignupPage.tsx | 36 ++++++++++++++++------------- 1 file changed, 20 insertions(+), 16 deletions(-) diff --git a/src/pages/SignupPage/SignupPage.tsx b/src/pages/SignupPage/SignupPage.tsx index fd90ea2..f5df229 100644 --- a/src/pages/SignupPage/SignupPage.tsx +++ b/src/pages/SignupPage/SignupPage.tsx @@ -35,19 +35,13 @@ const ProgressBar: React.FC = ({ currentStep, totalSteps }) => ); }; -const SignupForm: React.FC<{ handleNext: () => void }> = ({ handleNext }) => { +const SignupForm: React.FC<{ handleNext: () => void; formData: any; setFormData: any }> = ({ handleNext, formData, setFormData }) => { let navigate = useNavigate(); const [showPassword, setShowPassword] = useState(false); - const [formData, setFormData] = useState({ - name: '', - email: '', - password: '', - confirmPassword: '' - }); const handleChange = (e: React.ChangeEvent) => { const { name, value } = e.target; - setFormData(prev => ({ ...prev, [name]: value })); + setFormData((prev: any) => ({ ...prev, [name]: value })); // 부모 컴포넌트의 상태 업데이트 }; const handleSubmit = (e: React.FormEvent) => { @@ -130,7 +124,7 @@ const SignupForm: React.FC<{ handleNext: () => void }> = ({ handleNext }) => { ); }; -const WalletForm: React.FC = () => { +const WalletForm: React.FC<{ handleNext: () => void }> = ({ handleNext }) => { let navigate = useNavigate(); return ( @@ -161,6 +155,9 @@ const WalletForm: React.FC = () => { + {/* 임의로 넣은 버튼임 */} + 다음 + 이미 계정이 있으신가요? navigate('/')}>로그인 @@ -168,7 +165,7 @@ const WalletForm: React.FC = () => { ); }; -const SuccessForm: React.FC = () => { +const SuccessForm: React.FC<{ formData: any }> = ({ formData }) => { let navigate = useNavigate(); return ( @@ -181,7 +178,7 @@ const SuccessForm: React.FC = () => { - Name님의 지갑이

+ {formData.name}님의 지갑이

연동 완료되었습니다! @@ -200,10 +197,18 @@ const SuccessForm: React.FC = () => { // Main Component const SignupPage: React.FC = () => { const [currentStep, setCurrentStep] = useState(1); - const totalSteps = 2; + 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); } @@ -221,10 +226,9 @@ const SignupPage: React.FC = () => { currentStep={currentStep} totalSteps={totalSteps} /> - {/* */} - {/* */} - - {/* {currentStep === 1 ? : } */} + {currentStep === 1 && } + {currentStep === 2 && } + {currentStep === 3 && }