From cad64fad34537cbe43e8d5ea91c82a428e53bf9e Mon Sep 17 00:00:00 2001 From: zzuzzu0205 Date: Tue, 17 Oct 2023 14:34:30 +0900 Subject: [PATCH 1/2] =?UTF-8?q?[Design]=EC=9C=A0=EC=A0=80=20=EC=A0=95?= =?UTF-8?q?=EB=B3=B4=EC=9E=85=EB=A0=A5=EC=B0=BD=20=EB=94=94=EC=9E=90?= =?UTF-8?q?=EC=9D=B8=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../userInformation/JAtoms.ts | 2 +- .../userInformation/index.tsx | 109 ++++++++++++------ .../userInformation/useUserInformation.ts | 14 +-- 3 files changed, 80 insertions(+), 45 deletions(-) diff --git a/src/app/organisms/identityVerification/userInformation/JAtoms.ts b/src/app/organisms/identityVerification/userInformation/JAtoms.ts index 4b9d691..067352b 100644 --- a/src/app/organisms/identityVerification/userInformation/JAtoms.ts +++ b/src/app/organisms/identityVerification/userInformation/JAtoms.ts @@ -1,6 +1,6 @@ import { atom } from "jotai"; -export const userNameAtom = atom(""); +export const genderAtom = atom(""); export const nickNameAtom = atom(""); export const birthAtom = atom(""); \ No newline at end of file diff --git a/src/app/organisms/identityVerification/userInformation/index.tsx b/src/app/organisms/identityVerification/userInformation/index.tsx index f62121b..0463a21 100644 --- a/src/app/organisms/identityVerification/userInformation/index.tsx +++ b/src/app/organisms/identityVerification/userInformation/index.tsx @@ -8,20 +8,20 @@ import Label from "@/app/atoms/Label" import { flexRowCentering, flexColumnCentering } from "@/app/styles/flex"; import { useState } from "react" import {poppinsMediumFontStyle, poppinsLargeFontStyle,robotoMediumCenterFontStyle,poppinsSmallFontStyle} from "@/app/styles/font" -import { userNameAtom, nickNameAtom, birthAtom } from './JAtoms'; +import { nickNameAtom, genderAtom , birthAtom } from './JAtoms'; import { useAtom } from 'jotai/react'; import useUserInformation from "./useUserInformation" export default function userInformation(){ - const [userName] = useAtom(userNameAtom); const [nickName] = useAtom(nickNameAtom); + const [gender, setGender] = useAtom(genderAtom); const [birth] = useAtom(birthAtom); const { - handleNameChange, handleNickNameChange, - handleBirthChange + handleGenderChange, + handleBirthChange, } = useUserInformation(); return( @@ -30,26 +30,22 @@ export default function userInformation(){ - + - - - - - + + + + + + @@ -57,24 +53,27 @@ export default function userInformation(){ onChange={handleBirthChange} value={birth} placeholder="생년월일 6자리" - width={341} + width={314} height={46}/> - - + + + +
+ ) } const wrapperStyle = { - width: "480px", - height: "500px", borderRadius: "15px", backgroundColor: "rgba(255, 255, 255, 0.95)", margin : "auto", @@ -82,16 +81,20 @@ const wrapperStyle = { } const headerStyle = { - marginTop : "15px", + marginTop : "38px", ...poppinsLargeFontStyle } const textStyle = { marginTop: "20px", - marginBottom : "10px", + marginBottom : "58px", ...flexRowCentering, ...robotoMediumCenterFontStyle, } +const nickNameWrapperStyle = { + marginLeft : "84px", + marginRight : "84px" +} const InputStyle = { gap : "30px", @@ -108,17 +111,48 @@ const nickNameInputStyle = { border : "1px solid black", borderRadius : "10px", padding : "0px 0px 0px 8px", - marginBottom : "20px", - marginTop : "5px", + marginBottom : "10px", + marginTop : "4px", ...poppinsMediumFontStyle } +const genderButtonStyle = { + width : "158px", + height : "36px", + borderRadius: "10px", + gap : "30px", + marginTop : "4px", + marginBottom : "10px", + }; +const manBtnStyle = { + marginRight : "10px", + ...genderButtonStyle +} + const selectedGenderStyle = { + ...genderButtonStyle, + background:'#3700B3', + color:'#FFFFFF' + }; + + const unselectedGenderStyle = { + ...genderButtonStyle, + background:'#FFFFFF', + color:'#575757' + }; const birthWrapperStyle = { ...flexColumnCentering } +const btnWrapperStyle = { + marginTop : "79px", + marginBottom: "30px", + display: 'flex', + justifyContent: 'space-between', + ...robotoMediumCenterFontStyle +} + const enabledBtnStyle = { - width : "341px", + width : "123px", height : "40px", gap : "8px", background: "#3700B3", @@ -127,18 +161,19 @@ const enabledBtnStyle = { padding: "6px 12px 6px 12px", ...poppinsMediumFontStyle, textAlign: "center" as const, - marginTop : "20px", } const disabledBtnStyle = { - width : "341px", + width : "123px", height : "40px", gap : "8px", - background : "#FFFFFF" , + background : "#D9D9D9" , borderRadius: "30px", - color: "#575757", + color: "#FFFFFF", padding: "6px 12px 6px 12px", ...poppinsMediumFontStyle, textAlign: "center" as const, - marginTop : "20px", +} +const spacerStyle = { + width: '229px', // 여기서 원하는 px 값을 설정 } \ No newline at end of file diff --git a/src/app/organisms/identityVerification/userInformation/useUserInformation.ts b/src/app/organisms/identityVerification/userInformation/useUserInformation.ts index 267d5a4..834cdeb 100644 --- a/src/app/organisms/identityVerification/userInformation/useUserInformation.ts +++ b/src/app/organisms/identityVerification/userInformation/useUserInformation.ts @@ -1,13 +1,9 @@ // userInformation/useUserInformation.ts import { useAtom } from "jotai"; -import { userNameAtom, nickNameAtom, birthAtom } from './JAtoms'; +import { nickNameAtom, genderAtom, birthAtom } from './JAtoms'; export default function useUserInformation() { - const [userName, setUserName] = useAtom(userNameAtom); - const handleNameChange = (event: React.ChangeEvent) => { - setUserName(event.target.value); - }; const [nickName, setNickName] = useAtom(nickNameAtom); const handleNickNameChange = (event: React.ChangeEvent) => { @@ -24,10 +20,14 @@ export default function useUserInformation() { } } }; - + const [, setGender] = useAtom(genderAtom); + const handleGenderChange = (newGender: 'male' | 'female') => { + setGender(newGender); + }; return{ - handleNameChange, + handleNickNameChange, handleBirthChange, + handleGenderChange, } } From c528a6f80513fee9a7c9df5eb78c56fba99cf01d Mon Sep 17 00:00:00 2001 From: zzuzzu0205 Date: Tue, 17 Oct 2023 19:26:49 +0900 Subject: [PATCH 2/2] =?UTF-8?q?[Design]verification=20=EB=94=94=EC=9E=90?= =?UTF-8?q?=EC=9D=B8=20=EB=B0=8F=20=ED=8F=B4=EB=8D=94=20=EB=B6=84=EB=A6=AC?= =?UTF-8?q?=20=EC=99=84=EB=A3=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../organisms/identityVerification/index.tsx | 11 +- .../userInformation/RandomIcon.js | 11 ++ .../userInformation/useUserInformation.ts | 14 ++ .../{index.tsx => userInformation.tsx} | 39 +++-- .../verification/JAtoms.ts | 5 + .../verification/useVerification.ts | 43 ++++++ .../{index.tsx => verification.tsx} | 135 +++++++++++------- src/app/page.tsx | 4 +- 8 files changed, 193 insertions(+), 69 deletions(-) create mode 100644 src/app/organisms/identityVerification/userInformation/RandomIcon.js rename src/app/organisms/identityVerification/userInformation/{index.tsx => userInformation.tsx} (81%) create mode 100644 src/app/organisms/identityVerification/verification/JAtoms.ts create mode 100644 src/app/organisms/identityVerification/verification/useVerification.ts rename src/app/organisms/identityVerification/verification/{index.tsx => verification.tsx} (60%) diff --git a/src/app/organisms/identityVerification/index.tsx b/src/app/organisms/identityVerification/index.tsx index 8126ba1..ff554e9 100644 --- a/src/app/organisms/identityVerification/index.tsx +++ b/src/app/organisms/identityVerification/index.tsx @@ -2,19 +2,20 @@ import React, { useState } from 'react'; import { Provider } from 'jotai' import Box from "../../atoms/Box"; -import UserInformation from './userInformation'; -import Verification from './verification'; +import UserInformation from './userInformation/userInformation'; +import Verification from './verification/verification'; import { flexColumnCentering } from "@/app/styles/flex"; export default function IdentityVerification(){ - const [state, setState] = useState("profileEdit") + const [state, setState] = useState("auth") const handleComponent = () => { switch (state) { case 'profileEdit': - return ; + return ; case 'auth': - return ; + return ; + } } return( diff --git a/src/app/organisms/identityVerification/userInformation/RandomIcon.js b/src/app/organisms/identityVerification/userInformation/RandomIcon.js new file mode 100644 index 0000000..bff74f6 --- /dev/null +++ b/src/app/organisms/identityVerification/userInformation/RandomIcon.js @@ -0,0 +1,11 @@ + +import React from 'react'; + +const RandomIcon = () => ( + + {/* 배경화면 설정 */} + {/* 아이콘 색상 설정 */} + +); + +export default RandomIcon; \ No newline at end of file diff --git a/src/app/organisms/identityVerification/userInformation/useUserInformation.ts b/src/app/organisms/identityVerification/userInformation/useUserInformation.ts index 834cdeb..325000b 100644 --- a/src/app/organisms/identityVerification/userInformation/useUserInformation.ts +++ b/src/app/organisms/identityVerification/userInformation/useUserInformation.ts @@ -24,10 +24,24 @@ export default function useUserInformation() { const handleGenderChange = (newGender: 'male' | 'female') => { setGender(newGender); }; + const adjectives = ["심심한", "열심히하는", "유능한", "창조적인", "재미있는"]; + const nouns = ["사과", "사자", "컴퓨터", "공학자", "음악가"]; + function generateRandomNickname() { + const randomAdjective = adjectives[Math.floor(Math.random() * adjectives.length)]; + const randomNoun = nouns[Math.floor(Math.random() * nouns.length)]; + const randomNumber = Math.floor(Math.random() * 100) + 1; // 1 ~ 100 사이의 랜덤 정수 + + return `${randomAdjective} ${randomNoun}${randomNumber}`; + } + function handleRandomNickNameChange(){ + setNickName(generateRandomNickname()); + } return{ handleNickNameChange, handleBirthChange, handleGenderChange, + generateRandomNickname, + handleRandomNickNameChange, } } diff --git a/src/app/organisms/identityVerification/userInformation/index.tsx b/src/app/organisms/identityVerification/userInformation/userInformation.tsx similarity index 81% rename from src/app/organisms/identityVerification/userInformation/index.tsx rename to src/app/organisms/identityVerification/userInformation/userInformation.tsx index 0463a21..40b3452 100644 --- a/src/app/organisms/identityVerification/userInformation/index.tsx +++ b/src/app/organisms/identityVerification/userInformation/userInformation.tsx @@ -8,20 +8,22 @@ import Label from "@/app/atoms/Label" import { flexRowCentering, flexColumnCentering } from "@/app/styles/flex"; import { useState } from "react" import {poppinsMediumFontStyle, poppinsLargeFontStyle,robotoMediumCenterFontStyle,poppinsSmallFontStyle} from "@/app/styles/font" -import { nickNameAtom, genderAtom , birthAtom } from './JAtoms'; +import { nickNameAtom, genderAtom , birthAtom, } from './JAtoms'; import { useAtom } from 'jotai/react'; import useUserInformation from "./useUserInformation" - +import RandomIcon from './RandomIcon'; export default function userInformation(){ const [nickName] = useAtom(nickNameAtom); const [gender, setGender] = useAtom(genderAtom); const [birth] = useAtom(birthAtom); - + const { handleNickNameChange, handleGenderChange, handleBirthChange, + generateRandomNickname, + handleRandomNickNameChange } = useUserInformation(); return( @@ -34,12 +36,18 @@ export default function userInformation(){ - +
+ + +
@@ -98,17 +106,18 @@ const nickNameWrapperStyle = { const InputStyle = { gap : "30px", - border : "1px solid black", + border: "1px solid #0000001A", borderRadius : "10px", padding : "0px 0px 0px 5px", marginBottom : "20px", marginTop : "5px", + ...poppinsMediumFontStyle } const nickNameInputStyle = { gap : "30px", - border : "1px solid black", + border: "1px solid #0000001A", borderRadius : "10px", padding : "0px 0px 0px 8px", marginBottom : "10px", @@ -119,6 +128,7 @@ const genderButtonStyle = { width : "158px", height : "36px", borderRadius: "10px", + border: "1px solid #0000001A", gap : "30px", marginTop : "4px", marginBottom : "10px", @@ -148,6 +158,7 @@ const btnWrapperStyle = { marginBottom: "30px", display: 'flex', justifyContent: 'space-between', + alignItems: 'center', // 이 부분 추가 ...robotoMediumCenterFontStyle } @@ -161,6 +172,8 @@ const enabledBtnStyle = { padding: "6px 12px 6px 12px", ...poppinsMediumFontStyle, textAlign: "center" as const, + border: "1px solid #0000001A", + } const disabledBtnStyle = { @@ -173,7 +186,9 @@ const disabledBtnStyle = { padding: "6px 12px 6px 12px", ...poppinsMediumFontStyle, textAlign: "center" as const, + border: "1px solid #0000001A", + } const spacerStyle = { - width: '229px', // 여기서 원하는 px 값을 설정 + width: '229px', } \ No newline at end of file diff --git a/src/app/organisms/identityVerification/verification/JAtoms.ts b/src/app/organisms/identityVerification/verification/JAtoms.ts new file mode 100644 index 0000000..c83fe64 --- /dev/null +++ b/src/app/organisms/identityVerification/verification/JAtoms.ts @@ -0,0 +1,5 @@ +import { atom } from "jotai"; + +export const selectedTelecomAtom = atom(''); +export const phoneNumberAtom = atom(''); +export const authCodeAtom = atom(''); \ No newline at end of file diff --git a/src/app/organisms/identityVerification/verification/useVerification.ts b/src/app/organisms/identityVerification/verification/useVerification.ts new file mode 100644 index 0000000..e544da7 --- /dev/null +++ b/src/app/organisms/identityVerification/verification/useVerification.ts @@ -0,0 +1,43 @@ +import { useAtom } from 'jotai'; +import { selectedTelecomAtom, phoneNumberAtom, authCodeAtom } from './JAtoms'; + +export default function useVerification() { + const [selectedTelecom, setSelectedTelecom] = useAtom(selectedTelecomAtom); + const [phoneNumber, setPhoneNumber] = useAtom(phoneNumberAtom); + const [authCode, setAuthCode] = useAtom(authCodeAtom); + + const handleChange = (event: React.ChangeEvent) => { + setSelectedTelecom(event.target.value); + }; + + const handlePhoneChange = (event: React.ChangeEvent) => { + const value = event.target.value; + // 숫자만 입력 가능하도록 처리 + if (!value || /^[0-9\b]+$/.test(value)) { + // 11자리 제한 추가 + if (value.length <= 11) { + setPhoneNumber(value); + } + } + }; + + const handleAuthChange = (event: React.ChangeEvent) => { + const value = event.target.value; + // 숫자만 입력 가능하도록 처리 + if (!value || /^[0-9\b]+$/.test(value)) { + // 6자리 제한 추가 + if (value.length <= 6) { + setAuthCode(value); + } + } + }; + + return{ + selectedTelecom, + phoneNumber, + authCode, + handleChange, + handlePhoneChange, + handleAuthChange, + } +} \ No newline at end of file diff --git a/src/app/organisms/identityVerification/verification/index.tsx b/src/app/organisms/identityVerification/verification/verification.tsx similarity index 60% rename from src/app/organisms/identityVerification/verification/index.tsx rename to src/app/organisms/identityVerification/verification/verification.tsx index e952843..3594865 100644 --- a/src/app/organisms/identityVerification/verification/index.tsx +++ b/src/app/organisms/identityVerification/verification/verification.tsx @@ -8,44 +8,24 @@ import Label from "@/app/atoms/Label" import { flexRowCentering, flexColumnCentering } from "@/app/styles/flex"; import { useState } from "react" import {poppinsMediumFontStyle, poppinsLargeFontStyle,robotoMediumCenterFontStyle,poppinsSmallFontStyle} from "@/app/styles/font" - +import useVerification from "./useVerification" +import { useAtom } from 'jotai'; +import { selectedTelecomAtom, phoneNumberAtom, authCodeAtom } from './JAtoms'; export default function verification(){ - const [selectedTelecom, setSelectedTelecom] = useState(''); - + const telecomOptions = [ { value: 'skt', label: 'SKT' }, { value: 'lg', label: 'LG U+' }, { value: 'kt', label: 'KT' } ]; - - const handleChange = (event: React.ChangeEvent) => { - setSelectedTelecom(event.target.value); - }; - - const [phoneNumber, setPhoneNumber] = useState("") - const handlePhoneChange = (event: React.ChangeEvent) => { - const value = event.target.value; - // 숫자만 입력 가능하도록 처리 - if (!value || /^[0-9\b]+$/.test(value)) { - // 11자리 제한 추가 - if (value.length <= 11) { - setPhoneNumber(value); - } - } - }; - - const [authCode, setAuthCode] = useState("") - const handleAuthChange = (event: React.ChangeEvent) => { - const value = event.target.value; - // 숫자만 입력 가능하도록 처리 - if (!value || /^[0-9\b]+$/.test(value)) { - // 6자리 제한 추가 - if (value.length <= 6) { - setAuthCode(value); - } - } - }; + const {selectedTelecom, + phoneNumber, + authCode, + handleChange, + handlePhoneChange, + handleAuthChange} + = useVerification(); return( @@ -54,7 +34,8 @@ export default function verification(){ - + + + - + - - + ) } @@ -96,47 +90,67 @@ const wrapperStyle = { height: "500px", borderRadius: "15px", backgroundColor: "rgba(255, 255, 255, 0.95)", - margin : "auto", ...flexColumnCentering, } const headerStyle = { + marginTop : "38px", ...poppinsLargeFontStyle } const textStyle = { marginTop: "20px", - marginBottom : "20px", + marginBottom : "38px", ...flexRowCentering, ...robotoMediumCenterFontStyle, } - const phoneBoxStyle = { - marginBottom : "10px" + marginBottom : "10px", + marginLeft : "83px", + marginRight : "83px", + ...flexRowCentering } const dropdownStyle = { - width : "105px", - height : "71px", + + width : "68px", + height : "46px", borderRadius : "8px", + border: "1px solid #0000001A", + marginTop : "10px", + marginBottom :"10px", ...poppinsMediumFontStyle } const phoneNumberInputStyle = { - gap : "8px", - marginLeft :"20px", + width : "174px", + height : "46px", + marginLeft :"6px", + marginRight : "6px", + padding : "0px", + paddingLeft : "6px", + border: "1px solid #0000001A", ...poppinsMediumFontStyle, } +const phoneNumberBtn = { + width : "59px", + height : "46px", + borderRadius : "10px", + border: "1px solid #0000001A", +} const authCodeWrapperStyle = { + width : "314px", ...flexColumnCentering } const authCodeStyle = { + width: "314px", + height : "46px", marginTop: "10px", - marginBottom : "80px", - padding: "6px 12px 6px 12px", + padding : "0px", + paddingLeft : "6px", } const enabledBtnStyle = { - width : "341px", + width : "123px", height : "40px", gap : "8px", background: "#3700B3", @@ -144,17 +158,38 @@ const enabledBtnStyle = { color: "#FFFFFF", padding: "6px 12px 6px 12px", ...poppinsMediumFontStyle, + border: "1px solid #0000001A", + textAlign: "center" as const, } const disabledBtnStyle = { - width : "341px", + width : "123px", height : "40px", gap : "8px", - background: "#DBDBDB", + background : "#D9D9D9" , borderRadius: "30px", - color: "#575757", + color: "#FFFFFF", padding: "6px 12px 6px 12px", ...poppinsMediumFontStyle, + border: "1px solid #0000001A", + textAlign: "center" as const, +} +const flexColumn = { + display: "flex", + flexDirection: "column", + justifyContent: "center", + }; + + const btnWrapperStyle = { + marginTop : "79px", + marginBottom: "30px", + display: 'flex', + justifyContent: 'space-between', + alignItems: 'center', + ...robotoMediumCenterFontStyle +} +const spacerStyle = { + width: '229px', } \ No newline at end of file diff --git a/src/app/page.tsx b/src/app/page.tsx index 9af0064..42c5b0d 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,9 +1,9 @@ "use client" import React from "react"; import UserForm from "./organisms/userForm"; -import Verification from "./organisms/identityVerification/verification"; +import Verification from "./organisms/identityVerification/verification/verification"; import IdentityVerification from "./organisms/identityVerification"; -import UserInformation from "./organisms/identityVerification/userInformation"; +import UserInformation from "./organisms/identityVerification/userInformation/userInformation"; import "./page.css" import { css, Global } from '@emotion/react'; import Account from "./organisms/userForm/signin/accountInfo/accountInfo";