From bcd2cb18b5e1fdac282a97c32c7c29bfd19f68d2 Mon Sep 17 00:00:00 2001 From: seocylucky Date: Sat, 5 Aug 2023 04:54:03 +0900 Subject: [PATCH 1/7] =?UTF-8?q?[#19]=20Feat:=20=ED=9A=8C=EC=9B=90=EA=B0=80?= =?UTF-8?q?=EC=9E=85=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=9E=91=EC=97=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pages/signup.tsx | 265 ++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 264 insertions(+), 1 deletion(-) diff --git a/pages/signup.tsx b/pages/signup.tsx index ffcae6b..ba19733 100644 --- a/pages/signup.tsx +++ b/pages/signup.tsx @@ -1,7 +1,270 @@ +import Spacing from '@/components/reusable/Spacing'; import type { NextPage } from 'next'; +import styled from 'styled-components'; +import theme from '../styles/theme'; +import TextInput from '../components/reusable/TextInput'; +import CheckedBtn from '../components/reusable/Buttons/CheckedBtn'; +import { useState } from 'react'; +import SquareBtn from '../components/reusable/Buttons/SquareBtn'; +import Link from 'next/link'; + +interface AgreeType { + personalInfo: boolean; + adInfo: boolean; +} + +interface FontProps { + size?: 'M' | 'L'; + color?: 'primary' | 'gray'; +} const Signup: NextPage = () => { - return

Signup Page

; + const [name, setName] = useState(''); + const [email, setEmail] = useState(''); + const [password, setPassword] = useState(''); + const [passwordConfirm, setPasswordConfirm] = useState(''); + const [{ personalInfo, adInfo }, setAgree] = useState({ + personalInfo: false, + adInfo: false, + }); + + const [nicknameError, setNicknameError] = useState(''); + const [passwordError, setPasswordError] = useState(''); + const [passwordConfirmError, setPasswordConfirmError] = useState(''); + + const nicknameCheck = /^[가-힣A-Za-z0-9_]{1,10}$/; + const passwordCheck = /^[a-zA-Z0-9~!@#$%^&*()_+|<>?:{}]{8,20}$/; + + const isNicknameValid = (nickname: string): boolean => { + return nicknameCheck.test(nickname); + }; + const isPasswordValid = (password: string): boolean => { + return passwordCheck.test(password); + }; + const isPasswordConfirmValid = (passwordConfirm: string): boolean => { + return password === passwordConfirm; + }; + + const handleNicknameChange = (e: React.ChangeEvent) => { + const newNickname = e.target.value; + setName(newNickname); + setNicknameError(''); + + if (!isNicknameValid(newNickname)) { + setNicknameError('1~10자 이내, 한글, 영문, 특수기호(_) 사용 가능'); + } else { + setNicknameError(''); + } + }; + + const handlePasswordChange = (e: React.ChangeEvent) => { + const newPassword = e.target.value; + setPassword(newPassword); + setPasswordError(''); + + if (!isPasswordValid(newPassword)) { + setPasswordError('8~20자 이내, 문자, 숫자, 특수기호 사용 가능'); + } else { + setPasswordError(''); + } + }; + + const handlePasswordConfirmChange = (e: React.ChangeEvent) => { + const newPasswordConfirm = e.target.value; + setPasswordConfirm(newPasswordConfirm); + setPasswordConfirmError(''); + + if (!isPasswordConfirmValid(newPasswordConfirm)) { + setPasswordConfirmError('비밀번호가 일치하지 않습니다.'); + } else { + setPasswordConfirmError(''); + } + }; + + const checkedAllInfo = personalInfo && adInfo; + + const handleCheck = (e: React.ChangeEvent) => { + const { id, checked } = e.target; + + if (id === 'all') { + setAgree({ + personalInfo: checked, + adInfo: checked, + }); + } else { + setAgree((prevState) => ({ + ...prevState, + [id]: !prevState[id as keyof AgreeType], + })); + } + }; + + return ( + + + 회원가입 + + 회원가입을 하면 숭차로에서 다양한 지식과 답변을 공유할 수 있어요. + + 닉네임 + + + + 이메일 + + + + + + + 비밀번호 + + + + 비밀번호 확인 + + + + + + + + + 약관 전체 동의 + + + + + + + 이용약관 동의 (필수) + + + + + + + 홍보, 설문 관련 정보 동의 (선택) + + + + + + + + + + ); }; export default Signup; + +const Container = styled.div` + width: 640px; + margin: 0 auto; +`; + +const SignupTitle = styled.div` + color: var(--black, #1d1d1d); + font-size: 48px; + font-style: normal; + font-weight: 600; + line-height: normal; +`; + +const SignupText = styled.div` + font-size: ${theme.fontStyles.Text_M.fontSize}px; + font-weight: ${theme.fontStyles.Text_M.fontWeight}; + color: ${theme.colors.gray3}; +`; + +const SubText = styled.div` + font-size: ${theme.fontStyles.Text_L.fontSize}px; + font-weight: ${theme.fontStyles.Text_L.fontWeight}; + color: ${theme.colors.black}; +`; + +const InputFlex = styled.div` + display: flex; + flex-direction: row; + gap: 24px; +`; + +const CheckBoxContainer = styled.div` + display: flex; + flex-direction: column; + gap: 8px; +`; + +const CheckedDiv = styled.div` + display: flex; + flex-direction: row; + align-items: center; +`; + +const CheckedInput = styled.input` + display: inline-block; + width: 25px; + height: 25px; + border: 2px solid ${theme.colors.gray3}; + cursor: pointer; + + &:checked { + accent-color: ${theme.colors.gray3}; + } +`; + +const CheckedLabel = styled.label` + color: ${theme.colors.black}; + font-size: ${(props) => + props.size === 'M' ? theme.fontStyles.Text_M.fontSize : theme.fontStyles.Text_L.fontSize}px; + font-weight: ${(props) => + props.size === 'M' ? theme.fontStyles.Text_M.fontWeight : theme.fontStyles.Text_L.fontWeight}; +`; + +const SpanStyle = styled.span` + color: ${(props) => (props.color === 'primary' ? theme.colors.primary : theme.colors.gray2)}; +`; From 642d314dd1f3b529850e53ba876bc53ea6a1d7ba Mon Sep 17 00:00:00 2001 From: seocylucky Date: Sat, 5 Aug 2023 07:19:37 +0900 Subject: [PATCH 2/7] =?UTF-8?q?[#33]=20Feat:=20Header=20=EC=9E=91=EC=97=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/reusable/Header.tsx | 75 ++++++++++++++++++++++++++++++++++ 1 file changed, 75 insertions(+) create mode 100644 components/reusable/Header.tsx diff --git a/components/reusable/Header.tsx b/components/reusable/Header.tsx new file mode 100644 index 0000000..dfaf343 --- /dev/null +++ b/components/reusable/Header.tsx @@ -0,0 +1,75 @@ +import Link from 'next/link'; +import { styled } from 'styled-components'; +import theme from '../../styles/theme'; +import { usePathname } from 'next/navigation'; + +interface LinkProps { + active: boolean; +} + +const Header = () => { + const pathname = usePathname(); + return ( + + + + + + + + ); +}; + +export default Header; + +const Container = styled.div` + padding-left: 155px; + padding-right: 155px; + width: 100%; + height: 72px; + display: flex; + flex-direction: row; + justify-content: space-between; + background-color: ${theme.colors.white}; + border-bottom: 2px solid ${theme.colors.gray1}; + align-items: center; +`; + +const LogoImg = styled.div` + width: 72px; + height: 72px; + background-image: url('Logo.svg'); +`; + +const Nav = styled.div` + display: flex; + flex-direction: row; + gap: 40px; +`; + +const NavLink = styled.a` + font-size: ${(props) => + props.active ? theme.fontStyles.Text_L.fontSize : theme.fontStyles.Text_M.fontSize}px; + font-weight: ${(props) => + props.active ? theme.fontStyles.Text_L.fontWeight : theme.fontStyles.Text_M.fontWeight}; +`; From be05ecadc734b51bbf54160b73e2a19ab3ccbd53 Mon Sep 17 00:00:00 2001 From: seocylucky Date: Sat, 5 Aug 2023 07:22:27 +0900 Subject: [PATCH 3/7] =?UTF-8?q?[#34]=20Feat:=20Footer=20=EC=9E=91=EC=97=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/reusable/Footer.tsx | 79 ++++++++++++++++++++++++++++++++++ public/whiteLogo.svg | 3 ++ 2 files changed, 82 insertions(+) create mode 100644 components/reusable/Footer.tsx create mode 100644 public/whiteLogo.svg diff --git a/components/reusable/Footer.tsx b/components/reusable/Footer.tsx new file mode 100644 index 0000000..e9108ca --- /dev/null +++ b/components/reusable/Footer.tsx @@ -0,0 +1,79 @@ +import { styled } from 'styled-components'; +import theme from '../../styles/theme'; +import Spacing from './Spacing'; + +interface TextProps { + size: 'M' | 'L'; +} + +const Footer = () => { + return ( + + + + + + Contact + Soongcharo@gmail.com + + + + + + + Copyright ⓒ Soongcharo All Rights Reserved. + + 이용약관 + 숭차로 운영 정책 + 개인정보 처리방침 + + + + ); +}; + +export default Footer; + +const Container = styled.div` + width: 100%; + height: 352px; + padding-left: 240px; + padding-right: 240px; + position: absolute; + bottom: 0; + background-color: ${theme.colors.footer}; + border-bottom: 2px solid ${theme.colors.gray1}; + align-items: center; +`; + +const WhiteLogo = styled.div` + width: 68px; + height: 24px; + background-image: url('whiteLogo.svg'); +`; + +const FooterFlex = styled.div` + display: flex; + flex-direction: row; + justify-content: space-between; +`; + +const TextFlex = styled.div` + display: flex; + flex-direction: row; + gap: 30px; +`; + +const WHiteText = styled.div` + color: ${theme.colors.white}; + font-size: ${(props) => + props.size === 'M' ? theme.fontStyles.Text_M.fontSize : theme.fontStyles.Text_L.fontSize}px; + font-weight: ${(props) => + props.size === 'M' ? theme.fontStyles.Text_M.fontWeight : theme.fontStyles.Text_L.fontWeight}; +`; + +const Line = styled.div` + width: 100%; + height: 1px; + background-color: ${theme.colors.gray2}; +`; diff --git a/public/whiteLogo.svg b/public/whiteLogo.svg new file mode 100644 index 0000000..907335f --- /dev/null +++ b/public/whiteLogo.svg @@ -0,0 +1,3 @@ + + + From dcc75a42312da39666008a78d5eadc38dfa4e156 Mon Sep 17 00:00:00 2001 From: seocylucky Date: Mon, 14 Aug 2023 15:57:08 +0900 Subject: [PATCH 4/7] =?UTF-8?q?Design:=20=ED=91=B8=ED=84=B0=20position=20r?= =?UTF-8?q?elative=EB=A1=9C=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/reusable/Footer.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/reusable/Footer.tsx b/components/reusable/Footer.tsx index e9108ca..eff5321 100644 --- a/components/reusable/Footer.tsx +++ b/components/reusable/Footer.tsx @@ -39,7 +39,7 @@ const Container = styled.div` height: 352px; padding-left: 240px; padding-right: 240px; - position: absolute; + position: relative; bottom: 0; background-color: ${theme.colors.footer}; border-bottom: 2px solid ${theme.colors.gray1}; From d862ef4c6c70c272012cb0114ade2dd2c509c2aa Mon Sep 17 00:00:00 2001 From: seocylucky Date: Mon, 14 Aug 2023 15:57:37 +0900 Subject: [PATCH 5/7] =?UTF-8?q?Remove:=20Header=20=ED=8C=8C=EC=9D=BC=20?= =?UTF-8?q?=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/reusable/Header.tsx | 75 ---------------------------------- 1 file changed, 75 deletions(-) delete mode 100644 components/reusable/Header.tsx diff --git a/components/reusable/Header.tsx b/components/reusable/Header.tsx deleted file mode 100644 index dfaf343..0000000 --- a/components/reusable/Header.tsx +++ /dev/null @@ -1,75 +0,0 @@ -import Link from 'next/link'; -import { styled } from 'styled-components'; -import theme from '../../styles/theme'; -import { usePathname } from 'next/navigation'; - -interface LinkProps { - active: boolean; -} - -const Header = () => { - const pathname = usePathname(); - return ( - - - - - - - - ); -}; - -export default Header; - -const Container = styled.div` - padding-left: 155px; - padding-right: 155px; - width: 100%; - height: 72px; - display: flex; - flex-direction: row; - justify-content: space-between; - background-color: ${theme.colors.white}; - border-bottom: 2px solid ${theme.colors.gray1}; - align-items: center; -`; - -const LogoImg = styled.div` - width: 72px; - height: 72px; - background-image: url('Logo.svg'); -`; - -const Nav = styled.div` - display: flex; - flex-direction: row; - gap: 40px; -`; - -const NavLink = styled.a` - font-size: ${(props) => - props.active ? theme.fontStyles.Text_L.fontSize : theme.fontStyles.Text_M.fontSize}px; - font-weight: ${(props) => - props.active ? theme.fontStyles.Text_L.fontWeight : theme.fontStyles.Text_M.fontWeight}; -`; From d84a5bd49f6c82d8ec769dce0a31da6381512161 Mon Sep 17 00:00:00 2001 From: seocylucky Date: Mon, 14 Aug 2023 16:04:02 +0900 Subject: [PATCH 6/7] =?UTF-8?q?Remove:=20signup=20=ED=8C=8C=EC=9D=BC=20?= =?UTF-8?q?=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pages/signup.tsx | 270 ----------------------------------------------- 1 file changed, 270 deletions(-) delete mode 100644 pages/signup.tsx diff --git a/pages/signup.tsx b/pages/signup.tsx deleted file mode 100644 index ba19733..0000000 --- a/pages/signup.tsx +++ /dev/null @@ -1,270 +0,0 @@ -import Spacing from '@/components/reusable/Spacing'; -import type { NextPage } from 'next'; -import styled from 'styled-components'; -import theme from '../styles/theme'; -import TextInput from '../components/reusable/TextInput'; -import CheckedBtn from '../components/reusable/Buttons/CheckedBtn'; -import { useState } from 'react'; -import SquareBtn from '../components/reusable/Buttons/SquareBtn'; -import Link from 'next/link'; - -interface AgreeType { - personalInfo: boolean; - adInfo: boolean; -} - -interface FontProps { - size?: 'M' | 'L'; - color?: 'primary' | 'gray'; -} - -const Signup: NextPage = () => { - const [name, setName] = useState(''); - const [email, setEmail] = useState(''); - const [password, setPassword] = useState(''); - const [passwordConfirm, setPasswordConfirm] = useState(''); - const [{ personalInfo, adInfo }, setAgree] = useState({ - personalInfo: false, - adInfo: false, - }); - - const [nicknameError, setNicknameError] = useState(''); - const [passwordError, setPasswordError] = useState(''); - const [passwordConfirmError, setPasswordConfirmError] = useState(''); - - const nicknameCheck = /^[가-힣A-Za-z0-9_]{1,10}$/; - const passwordCheck = /^[a-zA-Z0-9~!@#$%^&*()_+|<>?:{}]{8,20}$/; - - const isNicknameValid = (nickname: string): boolean => { - return nicknameCheck.test(nickname); - }; - const isPasswordValid = (password: string): boolean => { - return passwordCheck.test(password); - }; - const isPasswordConfirmValid = (passwordConfirm: string): boolean => { - return password === passwordConfirm; - }; - - const handleNicknameChange = (e: React.ChangeEvent) => { - const newNickname = e.target.value; - setName(newNickname); - setNicknameError(''); - - if (!isNicknameValid(newNickname)) { - setNicknameError('1~10자 이내, 한글, 영문, 특수기호(_) 사용 가능'); - } else { - setNicknameError(''); - } - }; - - const handlePasswordChange = (e: React.ChangeEvent) => { - const newPassword = e.target.value; - setPassword(newPassword); - setPasswordError(''); - - if (!isPasswordValid(newPassword)) { - setPasswordError('8~20자 이내, 문자, 숫자, 특수기호 사용 가능'); - } else { - setPasswordError(''); - } - }; - - const handlePasswordConfirmChange = (e: React.ChangeEvent) => { - const newPasswordConfirm = e.target.value; - setPasswordConfirm(newPasswordConfirm); - setPasswordConfirmError(''); - - if (!isPasswordConfirmValid(newPasswordConfirm)) { - setPasswordConfirmError('비밀번호가 일치하지 않습니다.'); - } else { - setPasswordConfirmError(''); - } - }; - - const checkedAllInfo = personalInfo && adInfo; - - const handleCheck = (e: React.ChangeEvent) => { - const { id, checked } = e.target; - - if (id === 'all') { - setAgree({ - personalInfo: checked, - adInfo: checked, - }); - } else { - setAgree((prevState) => ({ - ...prevState, - [id]: !prevState[id as keyof AgreeType], - })); - } - }; - - return ( - - - 회원가입 - - 회원가입을 하면 숭차로에서 다양한 지식과 답변을 공유할 수 있어요. - - 닉네임 - - - - 이메일 - - - - - - - 비밀번호 - - - - 비밀번호 확인 - - - - - - - - - 약관 전체 동의 - - - - - - - 이용약관 동의 (필수) - - - - - - - 홍보, 설문 관련 정보 동의 (선택) - - - - - - - - - - ); -}; - -export default Signup; - -const Container = styled.div` - width: 640px; - margin: 0 auto; -`; - -const SignupTitle = styled.div` - color: var(--black, #1d1d1d); - font-size: 48px; - font-style: normal; - font-weight: 600; - line-height: normal; -`; - -const SignupText = styled.div` - font-size: ${theme.fontStyles.Text_M.fontSize}px; - font-weight: ${theme.fontStyles.Text_M.fontWeight}; - color: ${theme.colors.gray3}; -`; - -const SubText = styled.div` - font-size: ${theme.fontStyles.Text_L.fontSize}px; - font-weight: ${theme.fontStyles.Text_L.fontWeight}; - color: ${theme.colors.black}; -`; - -const InputFlex = styled.div` - display: flex; - flex-direction: row; - gap: 24px; -`; - -const CheckBoxContainer = styled.div` - display: flex; - flex-direction: column; - gap: 8px; -`; - -const CheckedDiv = styled.div` - display: flex; - flex-direction: row; - align-items: center; -`; - -const CheckedInput = styled.input` - display: inline-block; - width: 25px; - height: 25px; - border: 2px solid ${theme.colors.gray3}; - cursor: pointer; - - &:checked { - accent-color: ${theme.colors.gray3}; - } -`; - -const CheckedLabel = styled.label` - color: ${theme.colors.black}; - font-size: ${(props) => - props.size === 'M' ? theme.fontStyles.Text_M.fontSize : theme.fontStyles.Text_L.fontSize}px; - font-weight: ${(props) => - props.size === 'M' ? theme.fontStyles.Text_M.fontWeight : theme.fontStyles.Text_L.fontWeight}; -`; - -const SpanStyle = styled.span` - color: ${(props) => (props.color === 'primary' ? theme.colors.primary : theme.colors.gray2)}; -`; From 2c1bad5df5b1c06e7bd4fbb2118c879441d57ce9 Mon Sep 17 00:00:00 2001 From: seocylucky Date: Mon, 14 Aug 2023 23:23:54 +0900 Subject: [PATCH 7/7] =?UTF-8?q?Etc:=20=EC=98=A4=ED=83=80=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/reusable/Footer.tsx | 14 +++++++------- pages/_app.tsx | 2 ++ pages/index.tsx | 2 -- 3 files changed, 9 insertions(+), 9 deletions(-) diff --git a/components/reusable/Footer.tsx b/components/reusable/Footer.tsx index eff5321..f2a820b 100644 --- a/components/reusable/Footer.tsx +++ b/components/reusable/Footer.tsx @@ -13,19 +13,19 @@ const Footer = () => { - Contact - Soongcharo@gmail.com + Contact + Soongcharo@gmail.com - Copyright ⓒ Soongcharo All Rights Reserved. + Copyright ⓒ Soongcharo All Rights Reserved. - 이용약관 - 숭차로 운영 정책 - 개인정보 처리방침 + 이용약관 + 숭차로 운영 정책 + 개인정보 처리방침 @@ -64,7 +64,7 @@ const TextFlex = styled.div` gap: 30px; `; -const WHiteText = styled.div` +const WhiteText = styled.div` color: ${theme.colors.white}; font-size: ${(props) => props.size === 'M' ? theme.fontStyles.Text_M.fontSize : theme.fontStyles.Text_L.fontSize}px; diff --git a/pages/_app.tsx b/pages/_app.tsx index fcace32..05cae8e 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -2,6 +2,7 @@ import { AppProps } from 'next/app'; import { RecoilRoot } from 'recoil'; import { QueryClient, QueryClientProvider } from 'react-query'; import { GlobalStyle } from '../styles/globalStyle'; +import Footer from '../components/reusable/Footer'; const MyApp = ({ Component, pageProps }: AppProps) => { const queryClient = new QueryClient(); @@ -11,6 +12,7 @@ const MyApp = ({ Component, pageProps }: AppProps) => { +