From e3c4fd2a067451fa936575f0700c68d81e549231 Mon Sep 17 00:00:00 2001 From: diwoni <70441308+Diwoni@users.noreply.github.com> Date: Mon, 21 Oct 2024 01:19:28 +0900 Subject: [PATCH 01/11] =?UTF-8?q?Refactor(senior-register):=20=EC=8B=9C?= =?UTF-8?q?=EB=8B=88=EC=96=B4=20=EB=93=B1=EB=A1=9D=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EB=B6=84=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../guard/register/SeniorRegisterPage.tsx | 96 +----------------- src/pages/guard/register/components/index.ts | 1 + .../senior-register-box/SeniorRegisterBox.tsx | 98 +++++++++++++++++++ .../components/senior-register-box/index.ts | 1 + 4 files changed, 103 insertions(+), 93 deletions(-) create mode 100644 src/pages/guard/register/components/senior-register-box/SeniorRegisterBox.tsx create mode 100644 src/pages/guard/register/components/senior-register-box/index.ts diff --git a/src/pages/guard/register/SeniorRegisterPage.tsx b/src/pages/guard/register/SeniorRegisterPage.tsx index 530eabe7..9b01d732 100644 --- a/src/pages/guard/register/SeniorRegisterPage.tsx +++ b/src/pages/guard/register/SeniorRegisterPage.tsx @@ -1,21 +1,10 @@ -import { useState } from 'react'; - import { SeniorInfo } from './components'; +import SeniorRegisterBox from './components/senior-register-box/SeniorRegisterBox'; import { SENIOR_DATA } from './data'; -import { Box, Flex, Input, Text } from '@chakra-ui/react'; +import { Box, Flex } from '@chakra-ui/react'; import styled from '@emotion/styled'; export const SeniorRegisterPage = () => { - const [name, setName] = useState(''); - const [seniorName, setSeniorName] = useState(''); - const [phoneNumber, setPhoneNumber] = useState(''); - - const handleRegister = () => { - setName(''); - setSeniorName(''); - setPhoneNumber(''); - }; - return ( { ))} - - - 등록 이름 - setName(e.target.value)} - /> - - - 시니어의 성함 - setSeniorName(e.target.value)} - /> - - - 시니어의 전화번호 - setPhoneNumber(e.target.value)} - /> - - 시니어 등록 - + ); }; @@ -61,59 +27,3 @@ const Container = styled(Box)` position: relative; height: 100vh; `; - -const RegisterBox = styled(Box)` - position: absolute; - bottom: 0; - width: 100%; - height: 360px; - left: 50%; - transform: translateX(-50%); - max-width: 370px; - display: flex; - flex-direction: column; - align-items: center; - background-color: var(--color-white-gray); - border: 1px solid var(--color-white-gray); - border-radius: 15px; -`; - -const InputBox = styled(Box)` - width: 300px; - height: 80px; - display: flex; - flex-direction: column; - margin: 0.5rem; -`; - -const InputText = styled(Text)` - font-size: 18px; - font-weight: bold; - margin-bottom: 0.5rem; -`; - -const RegisterInput = styled(Input)` - background-color: var(--color-white); - border: none; - font-size: 1rem; -`; - -const StyledButton = styled.button` - width: 300px; - height: 40px; - background-color: #c69090; - color: #ffffff; - border: none; - border-radius: 5px; - cursor: pointer; - font-size: 16px; - transition: background-color 0.3s; - - &:hover { - background-color: #a67070; - } - - &:active { - transform: scale(0.98); - } -`; diff --git a/src/pages/guard/register/components/index.ts b/src/pages/guard/register/components/index.ts index f70b7392..f1362dbd 100644 --- a/src/pages/guard/register/components/index.ts +++ b/src/pages/guard/register/components/index.ts @@ -1 +1,2 @@ export * from './senior-info'; +export * from './senior-register-box'; diff --git a/src/pages/guard/register/components/senior-register-box/SeniorRegisterBox.tsx b/src/pages/guard/register/components/senior-register-box/SeniorRegisterBox.tsx new file mode 100644 index 00000000..3d56a56e --- /dev/null +++ b/src/pages/guard/register/components/senior-register-box/SeniorRegisterBox.tsx @@ -0,0 +1,98 @@ +import { useState } from 'react'; + +import { Box, Input, Text } from '@chakra-ui/react'; +import styled from '@emotion/styled'; + +const SeniorRegisterBox = () => { + const [name, setName] = useState(''); + const [seniorName, setSeniorName] = useState(''); + const [phoneNumber, setPhoneNumber] = useState(''); + + const handleRegister = () => { + setName(''); + setSeniorName(''); + setPhoneNumber(''); + }; + + return ( + + + 등록 이름 + setName(e.target.value)} /> + + + 시니어의 성함 + setSeniorName(e.target.value)} + /> + + + 시니어의 전화번호 + setPhoneNumber(e.target.value)} + /> + + 시니어 등록 + + ); +}; + +export default SeniorRegisterBox; + +const RegisterBox = styled(Box)` + position: absolute; + bottom: 0; + width: 100%; + height: 360px; + left: 50%; + transform: translateX(-50%); + max-width: 370px; + display: flex; + flex-direction: column; + align-items: center; + background-color: var(--color-white-gray); + border: 1px solid var(--color-white-gray); + border-radius: 15px; +`; + +const InputBox = styled(Box)` + width: 300px; + height: 80px; + display: flex; + flex-direction: column; + margin: 0.5rem; +`; + +const InputText = styled(Text)` + font-size: 18px; + font-weight: bold; + margin-bottom: 0.5rem; +`; + +const RegisterInput = styled(Input)` + background-color: var(--color-white); + border: none; + font-size: 1rem; +`; + +const StyledButton = styled.button` + width: 300px; + height: 40px; + background-color: #c69090; + color: #ffffff; + border: none; + border-radius: 5px; + cursor: pointer; + font-size: 16px; + transition: background-color 0.3s; + + &:hover { + background-color: #a67070; + } + + &:active { + transform: scale(0.98); + } +`; diff --git a/src/pages/guard/register/components/senior-register-box/index.ts b/src/pages/guard/register/components/senior-register-box/index.ts new file mode 100644 index 00000000..1ca6c0c4 --- /dev/null +++ b/src/pages/guard/register/components/senior-register-box/index.ts @@ -0,0 +1 @@ +export { default as SeniorRegisterBox } from './SeniorRegisterBox'; From 5c75f83ff0b6ec7a3fe0fcb8c7bd9a110a09da65 Mon Sep 17 00:00:00 2001 From: diwoni <70441308+Diwoni@users.noreply.github.com> Date: Mon, 21 Oct 2024 16:31:00 +0900 Subject: [PATCH 02/11] =?UTF-8?q?Refactor(senior-register):=20react-hook-f?= =?UTF-8?q?orm=20=EC=9C=BC=EB=A1=9C=20=EC=8B=9C=EB=8B=88=EC=96=B4=20?= =?UTF-8?q?=EB=93=B1=EB=A1=9D=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20?= =?UTF-8?q?=EB=B6=84=EB=A6=AC=20=EB=B0=8F=20=EB=A6=AC=ED=8C=A9=ED=86=A0?= =?UTF-8?q?=EB=A7=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../senior-register-box/SeniorFormField.tsx | 53 ++++++++++++++ .../senior-register-box/SeniorRegisterBox.tsx | 69 +++++++++---------- .../components/senior-register-box/index.ts | 1 + src/pages/guard/register/index.ts | 1 + src/pages/guard/register/types/index.ts | 4 ++ src/pages/guard/register/types/index.tsx | 0 6 files changed, 90 insertions(+), 38 deletions(-) create mode 100644 src/pages/guard/register/components/senior-register-box/SeniorFormField.tsx create mode 100644 src/pages/guard/register/types/index.ts delete mode 100644 src/pages/guard/register/types/index.tsx diff --git a/src/pages/guard/register/components/senior-register-box/SeniorFormField.tsx b/src/pages/guard/register/components/senior-register-box/SeniorFormField.tsx new file mode 100644 index 00000000..9f29dc05 --- /dev/null +++ b/src/pages/guard/register/components/senior-register-box/SeniorFormField.tsx @@ -0,0 +1,53 @@ +import { UseFormRegister } from 'react-hook-form'; + +import { SeniorRegisterValues } from '../../types'; +import { Box, Input, Text } from '@chakra-ui/react'; +import styled from '@emotion/styled'; + +type Props = { + label: string; + placeholder: string; + error?: string; + registerProps: ReturnType>; +}; + +const SeniorFormField = ({ + label, + placeholder, + error, + registerProps, +}: Props) => { + return ( + + + + {error && {error}} + + ); +}; + +export default SeniorFormField; + +const FieldContainer = styled(Box)` + display: flex; + flex-direction: column; + width: 100%; +`; + +const Label = styled(Text)` + font-size: 18px; + font-weight: bold; + margin-bottom: 0.5rem; +`; + +const StyledInput = styled(Input)` + background-color: var(--color-white); + border: none; + font-size: 1rem; + margin-bottom: 0.5rem; +`; + +const ErrorMessage = styled(Text)` + color: red; + font-size: 14px; +`; diff --git a/src/pages/guard/register/components/senior-register-box/SeniorRegisterBox.tsx b/src/pages/guard/register/components/senior-register-box/SeniorRegisterBox.tsx index 3d56a56e..b7a768a3 100644 --- a/src/pages/guard/register/components/senior-register-box/SeniorRegisterBox.tsx +++ b/src/pages/guard/register/components/senior-register-box/SeniorRegisterBox.tsx @@ -1,40 +1,48 @@ -import { useState } from 'react'; +import { useForm } from 'react-hook-form'; -import { Box, Input, Text } from '@chakra-ui/react'; +import { SeniorRegisterValues } from '../../types'; +import SeniorFormField from './SeniorFormField'; +import { Box } from '@chakra-ui/react'; import styled from '@emotion/styled'; const SeniorRegisterBox = () => { - const [name, setName] = useState(''); - const [seniorName, setSeniorName] = useState(''); - const [phoneNumber, setPhoneNumber] = useState(''); + const { + register, + handleSubmit, + formState: { errors }, + } = useForm(); - const handleRegister = () => { - setName(''); - setSeniorName(''); - setPhoneNumber(''); + const onSubmit = (data: SeniorRegisterValues) => { + console.log(data); }; return ( - + - 등록 이름 - setName(e.target.value)} /> - - - 시니어의 성함 - setSeniorName(e.target.value)} + - 시니어의 전화번호 - setPhoneNumber(e.target.value)} + - 시니어 등록 + 시니어 등록 ); }; @@ -59,24 +67,9 @@ const RegisterBox = styled(Box)` const InputBox = styled(Box)` width: 300px; - height: 80px; - display: flex; - flex-direction: column; margin: 0.5rem; `; -const InputText = styled(Text)` - font-size: 18px; - font-weight: bold; - margin-bottom: 0.5rem; -`; - -const RegisterInput = styled(Input)` - background-color: var(--color-white); - border: none; - font-size: 1rem; -`; - const StyledButton = styled.button` width: 300px; height: 40px; diff --git a/src/pages/guard/register/components/senior-register-box/index.ts b/src/pages/guard/register/components/senior-register-box/index.ts index 1ca6c0c4..f12a913e 100644 --- a/src/pages/guard/register/components/senior-register-box/index.ts +++ b/src/pages/guard/register/components/senior-register-box/index.ts @@ -1 +1,2 @@ export { default as SeniorRegisterBox } from './SeniorRegisterBox'; +export { default as SeniorFormField } from './SeniorFormField'; diff --git a/src/pages/guard/register/index.ts b/src/pages/guard/register/index.ts index e795c5b8..21da6742 100644 --- a/src/pages/guard/register/index.ts +++ b/src/pages/guard/register/index.ts @@ -2,3 +2,4 @@ export { SeniorRegisterPage } from './SeniorRegisterPage'; export * from './components'; export * from './data'; +export * from './types'; diff --git a/src/pages/guard/register/types/index.ts b/src/pages/guard/register/types/index.ts new file mode 100644 index 00000000..e67a5786 --- /dev/null +++ b/src/pages/guard/register/types/index.ts @@ -0,0 +1,4 @@ +export type SeniorRegisterValues = { + seniorName: string; + seniorPhoneNumber: string; +}; diff --git a/src/pages/guard/register/types/index.tsx b/src/pages/guard/register/types/index.tsx deleted file mode 100644 index e69de29b..00000000 From 886b42a120ba8fe4e2a2ac3a36472a4a99d7eca6 Mon Sep 17 00:00:00 2001 From: diwoni <70441308+Diwoni@users.noreply.github.com> Date: Mon, 21 Oct 2024 17:06:22 +0900 Subject: [PATCH 03/11] =?UTF-8?q?Feat(senior-register):=20=EC=8B=9C?= =?UTF-8?q?=EB=8B=88=EC=96=B4=20=EC=A1=B0=ED=9A=8C=20API=20=EC=97=B0?= =?UTF-8?q?=EB=8F=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/guard/register/SeniorRegisterPage.tsx | 16 +++++++++++++--- .../senior-info/senior-info-box/SeniorInfo.tsx | 14 +++++--------- src/shared/hooks/index.ts | 1 + .../hooks/phone-number/formatPhoneNumber.ts | 4 ++++ src/shared/hooks/phone-number/index.ts | 1 + 5 files changed, 24 insertions(+), 12 deletions(-) create mode 100644 src/shared/hooks/phone-number/formatPhoneNumber.ts create mode 100644 src/shared/hooks/phone-number/index.ts diff --git a/src/pages/guard/register/SeniorRegisterPage.tsx b/src/pages/guard/register/SeniorRegisterPage.tsx index 9b01d732..8fa213ac 100644 --- a/src/pages/guard/register/SeniorRegisterPage.tsx +++ b/src/pages/guard/register/SeniorRegisterPage.tsx @@ -1,10 +1,20 @@ +import { useGetAllSeniorInfo } from '../mypage'; import { SeniorInfo } from './components'; import SeniorRegisterBox from './components/senior-register-box/SeniorRegisterBox'; -import { SENIOR_DATA } from './data'; import { Box, Flex } from '@chakra-ui/react'; import styled from '@emotion/styled'; export const SeniorRegisterPage = () => { + const { data: seniors, isLoading, isError } = useGetAllSeniorInfo(); + console.log(seniors); + if (isLoading) { + return
Loading...
; + } + + if (isError) { + return
Error: {isError}
; + } + return ( { flexGrow={1} overflowY='auto' > - {SENIOR_DATA.map((senior) => ( - + {seniors?.map((senior) => ( + ))} diff --git a/src/pages/guard/register/components/senior-info/senior-info-box/SeniorInfo.tsx b/src/pages/guard/register/components/senior-info/senior-info-box/SeniorInfo.tsx index c5b8adef..66c294c1 100644 --- a/src/pages/guard/register/components/senior-info/senior-info-box/SeniorInfo.tsx +++ b/src/pages/guard/register/components/senior-info/senior-info-box/SeniorInfo.tsx @@ -1,10 +1,10 @@ +import { formatPhoneNumber } from '@/shared'; import { Box, Flex, Text } from '@chakra-ui/react'; import styled from '@emotion/styled'; type SeniorInfoType = { - title: string; - name: string; - phoneNumber: string; + seniorName: string; + seniorPhoneNumber: string; }; const SeniorInfo = ({ senior }: { senior: SeniorInfoType }) => { @@ -16,15 +16,11 @@ const SeniorInfo = ({ senior }: { senior: SeniorInfoType }) => { > - {senior.title} + {senior.seniorName} - - 성함 - {senior.name} - 전화번호 - {senior.phoneNumber} + {formatPhoneNumber(senior.seniorPhoneNumber)} diff --git a/src/shared/hooks/index.ts b/src/shared/hooks/index.ts index 86d45520..1d40b502 100644 --- a/src/shared/hooks/index.ts +++ b/src/shared/hooks/index.ts @@ -1,3 +1,4 @@ export { useIntersectionObserver } from './useIntersectionObserver'; export type { UseIntersectionObserverProps } from './useIntersectionObserver'; export * from './point'; +export * from './phone-number'; diff --git a/src/shared/hooks/phone-number/formatPhoneNumber.ts b/src/shared/hooks/phone-number/formatPhoneNumber.ts new file mode 100644 index 00000000..b1b379a4 --- /dev/null +++ b/src/shared/hooks/phone-number/formatPhoneNumber.ts @@ -0,0 +1,4 @@ +export const formatPhoneNumber = (phone: string) => { + const match = phone.match(/(\d{3})(\d{4})(\d{4})/); + return match ? `${match[1]}-${match[2]}-${match[3]}` : phone; +}; diff --git a/src/shared/hooks/phone-number/index.ts b/src/shared/hooks/phone-number/index.ts new file mode 100644 index 00000000..df702efa --- /dev/null +++ b/src/shared/hooks/phone-number/index.ts @@ -0,0 +1 @@ +export { formatPhoneNumber } from './formatPhoneNumber'; From 5ba8cb72af6717735ae6ba8f83e786ebbe09ac64 Mon Sep 17 00:00:00 2001 From: diwoni <70441308+Diwoni@users.noreply.github.com> Date: Mon, 21 Oct 2024 17:07:19 +0900 Subject: [PATCH 04/11] =?UTF-8?q?Feat(phone-number):=20=EC=A0=84=ED=99=94?= =?UTF-8?q?=EB=B2=88=ED=98=B8=20=ED=8F=AC=EB=A7=B7=ED=8C=85=20hook=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/shared/hooks/phone-number/formatPhoneNumber.ts | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/shared/hooks/phone-number/formatPhoneNumber.ts b/src/shared/hooks/phone-number/formatPhoneNumber.ts index b1b379a4..5b821922 100644 --- a/src/shared/hooks/phone-number/formatPhoneNumber.ts +++ b/src/shared/hooks/phone-number/formatPhoneNumber.ts @@ -2,3 +2,8 @@ export const formatPhoneNumber = (phone: string) => { const match = phone.match(/(\d{3})(\d{4})(\d{4})/); return match ? `${match[1]}-${match[2]}-${match[3]}` : phone; }; + +export const parsePhoneNumber = (phone: string) => { + const match = phone.match(/(\d{3})-(\d{3})-(\d{4})/); + return match ? `${match[1]}${match[2]}${match[3]}` : phone; +}; From 888a61e117390d04a24d16875c62f287b21d75c6 Mon Sep 17 00:00:00 2001 From: diwoni <70441308+Diwoni@users.noreply.github.com> Date: Mon, 21 Oct 2024 17:43:46 +0900 Subject: [PATCH 05/11] =?UTF-8?q?Feat(senior-register):=20=EC=8B=9C?= =?UTF-8?q?=EB=8B=88=EC=96=B4=20=EC=B6=94=EA=B0=80=20API=20=EC=97=B0?= =?UTF-8?q?=EB=8F=99=20=EB=B0=8F=20=EC=A0=84=ED=99=94=EB=B2=88=ED=98=B8=20?= =?UTF-8?q?=ED=8F=AC=EB=A7=B7=ED=8C=85=20hook=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../guard/register/api/add-senior-info.api.ts | 9 +++++++++ src/pages/guard/register/api/hooks/index.ts | 1 + .../register/api/hooks/useAddSeniorInfo.ts | 20 +++++++++++++++++++ src/pages/guard/register/api/index.ts | 4 ++++ src/pages/guard/register/api/types/index.ts | 1 + .../types/senior-register.type.ts} | 0 .../senior-info-box/SeniorInfo.tsx | 4 ++-- .../senior-register-box/SeniorRegisterBox.tsx | 11 ++++++++-- src/pages/guard/register/index.ts | 1 - .../hooks/phone-number/formatPhoneNumber.ts | 6 +++--- src/shared/hooks/phone-number/index.ts | 2 +- 11 files changed, 50 insertions(+), 9 deletions(-) create mode 100644 src/pages/guard/register/api/add-senior-info.api.ts create mode 100644 src/pages/guard/register/api/hooks/index.ts create mode 100644 src/pages/guard/register/api/hooks/useAddSeniorInfo.ts create mode 100644 src/pages/guard/register/api/index.ts create mode 100644 src/pages/guard/register/api/types/index.ts rename src/pages/guard/register/{types/index.ts => api/types/senior-register.type.ts} (100%) diff --git a/src/pages/guard/register/api/add-senior-info.api.ts b/src/pages/guard/register/api/add-senior-info.api.ts new file mode 100644 index 00000000..4644b882 --- /dev/null +++ b/src/pages/guard/register/api/add-senior-info.api.ts @@ -0,0 +1,9 @@ +import { allSeniorInfoPath } from '../../mypage/api/all-senior-info.api'; +import { SeniorRegisterValues as SeniorRegisterRequest } from './types/senior-register.type'; +import { fetchInstance } from '@/shared/api/instance'; + +// 시니어 추가 +export const addSeniorInfo = async (seniorInfo: SeniorRegisterRequest) => { + const response = await fetchInstance.post(allSeniorInfoPath(), seniorInfo); + return response.data; +}; diff --git a/src/pages/guard/register/api/hooks/index.ts b/src/pages/guard/register/api/hooks/index.ts new file mode 100644 index 00000000..d06ef5c8 --- /dev/null +++ b/src/pages/guard/register/api/hooks/index.ts @@ -0,0 +1 @@ +export { useAddSeniorInfo } from './useAddSeniorInfo'; diff --git a/src/pages/guard/register/api/hooks/useAddSeniorInfo.ts b/src/pages/guard/register/api/hooks/useAddSeniorInfo.ts new file mode 100644 index 00000000..48c90fae --- /dev/null +++ b/src/pages/guard/register/api/hooks/useAddSeniorInfo.ts @@ -0,0 +1,20 @@ +import { addSeniorInfo } from '../add-senior-info.api'; +import { SeniorRegisterValues as SeniorRegisterRequest } from '../types/senior-register.type'; +import { useMutation, UseMutationResult } from '@tanstack/react-query'; + +export const useAddSeniorInfo = (): UseMutationResult< + string, + Error, + SeniorRegisterRequest +> => { + return useMutation({ + mutationFn: (seniorInfo: SeniorRegisterRequest) => + addSeniorInfo(seniorInfo), + onSuccess: (data: string) => { + alert(data); + }, + onError: (error: Error) => { + console.error(error); + }, + }); +}; diff --git a/src/pages/guard/register/api/index.ts b/src/pages/guard/register/api/index.ts new file mode 100644 index 00000000..d7cf5918 --- /dev/null +++ b/src/pages/guard/register/api/index.ts @@ -0,0 +1,4 @@ +export { addSeniorInfo } from './add-senior-info.api'; + +export * from './hooks'; +export * from './types'; diff --git a/src/pages/guard/register/api/types/index.ts b/src/pages/guard/register/api/types/index.ts new file mode 100644 index 00000000..0c1223b8 --- /dev/null +++ b/src/pages/guard/register/api/types/index.ts @@ -0,0 +1 @@ +export type { SeniorRegisterValues } from './senior-register.type'; diff --git a/src/pages/guard/register/types/index.ts b/src/pages/guard/register/api/types/senior-register.type.ts similarity index 100% rename from src/pages/guard/register/types/index.ts rename to src/pages/guard/register/api/types/senior-register.type.ts diff --git a/src/pages/guard/register/components/senior-info/senior-info-box/SeniorInfo.tsx b/src/pages/guard/register/components/senior-info/senior-info-box/SeniorInfo.tsx index 66c294c1..8a77aba0 100644 --- a/src/pages/guard/register/components/senior-info/senior-info-box/SeniorInfo.tsx +++ b/src/pages/guard/register/components/senior-info/senior-info-box/SeniorInfo.tsx @@ -30,8 +30,8 @@ const SeniorInfo = ({ senior }: { senior: SeniorInfoType }) => { const SeniorInfoContainer = styled(Flex)` width: 100%; max-width: 330px; - height: 6rem; - min-height: 6rem; + height: 5rem; + min-height: 5rem; background-color: var(--color-secondary); border: 1px solid var(--color-secondary); border-radius: 10px; diff --git a/src/pages/guard/register/components/senior-register-box/SeniorRegisterBox.tsx b/src/pages/guard/register/components/senior-register-box/SeniorRegisterBox.tsx index b7a768a3..542630c6 100644 --- a/src/pages/guard/register/components/senior-register-box/SeniorRegisterBox.tsx +++ b/src/pages/guard/register/components/senior-register-box/SeniorRegisterBox.tsx @@ -1,7 +1,8 @@ import { useForm } from 'react-hook-form'; -import { SeniorRegisterValues } from '../../types'; +import { SeniorRegisterValues, useAddSeniorInfo } from '../../api'; import SeniorFormField from './SeniorFormField'; +import { parsePhoneNumber } from '@/shared'; import { Box } from '@chakra-ui/react'; import styled from '@emotion/styled'; @@ -11,9 +12,15 @@ const SeniorRegisterBox = () => { handleSubmit, formState: { errors }, } = useForm(); + const { mutate: postSeniorInfo } = useAddSeniorInfo(); const onSubmit = (data: SeniorRegisterValues) => { - console.log(data); + const requestSeniorData = { + seniorName: data.seniorName, + seniorPhoneNumber: parsePhoneNumber(data.seniorPhoneNumber), + }; + console.log(requestSeniorData); + postSeniorInfo(requestSeniorData); }; return ( diff --git a/src/pages/guard/register/index.ts b/src/pages/guard/register/index.ts index 21da6742..e795c5b8 100644 --- a/src/pages/guard/register/index.ts +++ b/src/pages/guard/register/index.ts @@ -2,4 +2,3 @@ export { SeniorRegisterPage } from './SeniorRegisterPage'; export * from './components'; export * from './data'; -export * from './types'; diff --git a/src/shared/hooks/phone-number/formatPhoneNumber.ts b/src/shared/hooks/phone-number/formatPhoneNumber.ts index 5b821922..33aba0c5 100644 --- a/src/shared/hooks/phone-number/formatPhoneNumber.ts +++ b/src/shared/hooks/phone-number/formatPhoneNumber.ts @@ -1,9 +1,9 @@ -export const formatPhoneNumber = (phone: string) => { +export const formatPhoneNumber = (phone: string): string => { const match = phone.match(/(\d{3})(\d{4})(\d{4})/); return match ? `${match[1]}-${match[2]}-${match[3]}` : phone; }; -export const parsePhoneNumber = (phone: string) => { - const match = phone.match(/(\d{3})-(\d{3})-(\d{4})/); +export const parsePhoneNumber = (phone: string): string => { + const match = phone.match(/(\d{3})-(\d{4})-(\d{4})/); return match ? `${match[1]}${match[2]}${match[3]}` : phone; }; diff --git a/src/shared/hooks/phone-number/index.ts b/src/shared/hooks/phone-number/index.ts index df702efa..48b86920 100644 --- a/src/shared/hooks/phone-number/index.ts +++ b/src/shared/hooks/phone-number/index.ts @@ -1 +1 @@ -export { formatPhoneNumber } from './formatPhoneNumber'; +export { formatPhoneNumber, parsePhoneNumber } from './formatPhoneNumber'; From 5952db3431763bb2293dcabcbb9ed8ece1e8015c Mon Sep 17 00:00:00 2001 From: diwoni <70441308+Diwoni@users.noreply.github.com> Date: Mon, 21 Oct 2024 21:37:22 +0900 Subject: [PATCH 06/11] =?UTF-8?q?Feat(senior-register)=20:=20=EC=8B=9C?= =?UTF-8?q?=EB=8B=88=EC=96=B4=20=EC=A0=95=EB=B3=B4=20=EC=88=98=EC=A0=95=20?= =?UTF-8?q?=EB=B0=8F=20=EC=82=AD=EC=A0=9C=20API=20=EC=97=B0=EB=8F=99(refet?= =?UTF-8?q?ch=20=EC=A0=81=EC=9A=A9)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../guard/register/SeniorRegisterPage.tsx | 6 +- .../guard/register/api/add-senior-info.api.ts | 9 -- src/pages/guard/register/api/hooks/index.ts | 2 + .../register/api/hooks/useAddSeniorInfo.ts | 12 +- .../register/api/hooks/useDeleteSeniorInfo.ts | 18 +++ .../register/api/hooks/useEditSeniorInfo.ts | 24 ++++ src/pages/guard/register/api/index.ts | 2 +- .../guard/register/api/senior-info.api.ts | 30 +++++ .../senior-info-box/SeniorInfo.tsx | 119 ++++++++++++++++-- .../senior-register-box/SeniorFormField.tsx | 2 +- .../senior-register-box/SeniorRegisterBox.tsx | 5 +- src/pages/guard/register/index.ts | 1 + src/shared/assets/delete-icon.svg | 4 + src/shared/assets/edit-icon.svg | 4 + src/shared/assets/index.ts | 2 + 15 files changed, 206 insertions(+), 34 deletions(-) delete mode 100644 src/pages/guard/register/api/add-senior-info.api.ts create mode 100644 src/pages/guard/register/api/hooks/useDeleteSeniorInfo.ts create mode 100644 src/pages/guard/register/api/hooks/useEditSeniorInfo.ts create mode 100644 src/pages/guard/register/api/senior-info.api.ts create mode 100644 src/shared/assets/delete-icon.svg create mode 100644 src/shared/assets/edit-icon.svg create mode 100644 src/shared/assets/index.ts diff --git a/src/pages/guard/register/SeniorRegisterPage.tsx b/src/pages/guard/register/SeniorRegisterPage.tsx index 8fa213ac..bc044152 100644 --- a/src/pages/guard/register/SeniorRegisterPage.tsx +++ b/src/pages/guard/register/SeniorRegisterPage.tsx @@ -5,7 +5,7 @@ import { Box, Flex } from '@chakra-ui/react'; import styled from '@emotion/styled'; export const SeniorRegisterPage = () => { - const { data: seniors, isLoading, isError } = useGetAllSeniorInfo(); + const { data: seniors, isLoading, isError, refetch } = useGetAllSeniorInfo(); console.log(seniors); if (isLoading) { return
Loading...
; @@ -25,10 +25,10 @@ export const SeniorRegisterPage = () => { overflowY='auto' > {seniors?.map((senior) => ( - + ))} - + ); }; diff --git a/src/pages/guard/register/api/add-senior-info.api.ts b/src/pages/guard/register/api/add-senior-info.api.ts deleted file mode 100644 index 4644b882..00000000 --- a/src/pages/guard/register/api/add-senior-info.api.ts +++ /dev/null @@ -1,9 +0,0 @@ -import { allSeniorInfoPath } from '../../mypage/api/all-senior-info.api'; -import { SeniorRegisterValues as SeniorRegisterRequest } from './types/senior-register.type'; -import { fetchInstance } from '@/shared/api/instance'; - -// 시니어 추가 -export const addSeniorInfo = async (seniorInfo: SeniorRegisterRequest) => { - const response = await fetchInstance.post(allSeniorInfoPath(), seniorInfo); - return response.data; -}; diff --git a/src/pages/guard/register/api/hooks/index.ts b/src/pages/guard/register/api/hooks/index.ts index d06ef5c8..a772528f 100644 --- a/src/pages/guard/register/api/hooks/index.ts +++ b/src/pages/guard/register/api/hooks/index.ts @@ -1 +1,3 @@ export { useAddSeniorInfo } from './useAddSeniorInfo'; +export { useDeleteSeniorInfo } from './useDeleteSeniorInfo'; +export { useEditSeniorInfo } from './useEditSeniorInfo'; diff --git a/src/pages/guard/register/api/hooks/useAddSeniorInfo.ts b/src/pages/guard/register/api/hooks/useAddSeniorInfo.ts index 48c90fae..3498a74d 100644 --- a/src/pages/guard/register/api/hooks/useAddSeniorInfo.ts +++ b/src/pages/guard/register/api/hooks/useAddSeniorInfo.ts @@ -1,17 +1,17 @@ -import { addSeniorInfo } from '../add-senior-info.api'; +import { addSeniorInfo } from '../senior-info.api'; import { SeniorRegisterValues as SeniorRegisterRequest } from '../types/senior-register.type'; import { useMutation, UseMutationResult } from '@tanstack/react-query'; -export const useAddSeniorInfo = (): UseMutationResult< - string, - Error, - SeniorRegisterRequest -> => { +// 시니어 추가 훅 +export const useAddSeniorInfo = ( + refetchCallback: () => void +): UseMutationResult => { return useMutation({ mutationFn: (seniorInfo: SeniorRegisterRequest) => addSeniorInfo(seniorInfo), onSuccess: (data: string) => { alert(data); + refetchCallback(); }, onError: (error: Error) => { console.error(error); diff --git a/src/pages/guard/register/api/hooks/useDeleteSeniorInfo.ts b/src/pages/guard/register/api/hooks/useDeleteSeniorInfo.ts new file mode 100644 index 00000000..ae77c42e --- /dev/null +++ b/src/pages/guard/register/api/hooks/useDeleteSeniorInfo.ts @@ -0,0 +1,18 @@ +import { deleteSeniorInfo } from '../senior-info.api'; +import { useMutation, UseMutationResult } from '@tanstack/react-query'; + +// 시니어 삭제 훅 +export const useDeleteSeniorInfo = ( + refetchCallback: () => void +): UseMutationResult => { + return useMutation({ + mutationFn: (seniorId: number) => deleteSeniorInfo(seniorId), + onSuccess: (data: string) => { + alert(data); + refetchCallback(); + }, + onError: (error: Error) => { + console.error(error); + }, + }); +}; diff --git a/src/pages/guard/register/api/hooks/useEditSeniorInfo.ts b/src/pages/guard/register/api/hooks/useEditSeniorInfo.ts new file mode 100644 index 00000000..83892b00 --- /dev/null +++ b/src/pages/guard/register/api/hooks/useEditSeniorInfo.ts @@ -0,0 +1,24 @@ +import { editSeniorInfo } from '../senior-info.api'; +import { SeniorRegisterValues as SeniorRegisterRequest } from '../types/senior-register.type'; +import { useMutation, UseMutationResult } from '@tanstack/react-query'; + +// 시니어 수정 훅 +export const useEditSeniorInfo = ( + refetchCallback: () => void +): UseMutationResult< + string, + Error, + { seniorId: number; seniorInfo: SeniorRegisterRequest } +> => { + return useMutation({ + mutationFn: ({ seniorId, seniorInfo }) => + editSeniorInfo(seniorId, seniorInfo), + onSuccess: (data: string) => { + alert(data); + refetchCallback(); // 새로 데이터 가져오기 (콜백함수) + }, + onError: (error: Error) => { + console.error(error); + }, + }); +}; diff --git a/src/pages/guard/register/api/index.ts b/src/pages/guard/register/api/index.ts index d7cf5918..1a8f47eb 100644 --- a/src/pages/guard/register/api/index.ts +++ b/src/pages/guard/register/api/index.ts @@ -1,4 +1,4 @@ -export { addSeniorInfo } from './add-senior-info.api'; +export { addSeniorInfo } from './senior-info.api'; export * from './hooks'; export * from './types'; diff --git a/src/pages/guard/register/api/senior-info.api.ts b/src/pages/guard/register/api/senior-info.api.ts new file mode 100644 index 00000000..c2301e1e --- /dev/null +++ b/src/pages/guard/register/api/senior-info.api.ts @@ -0,0 +1,30 @@ +import { SeniorRegisterValues as SeniorRegisterRequest } from './types/senior-register.type'; +import { fetchInstance } from '@/shared/api/instance'; + +export const seniorInfoPath = () => '/api/guards/senior'; + +// 시니어 추가 +export const addSeniorInfo = async (seniorInfo: SeniorRegisterRequest) => { + const response = await fetchInstance.post(seniorInfoPath(), seniorInfo); + return response.data; +}; + +// 시니어 삭제 +export const deleteSeniorInfo = async (seniorId: number) => { + const response = await fetchInstance.delete( + seniorInfoPath() + `/${seniorId}` + ); + return response.data; +}; + +// 시니어 정보 수정 +export const editSeniorInfo = async ( + seniorId: number, + seniorInfo: SeniorRegisterRequest +) => { + const response = await fetchInstance.put( + seniorInfoPath() + `/${seniorId}`, + seniorInfo + ); + return response.data; +}; diff --git a/src/pages/guard/register/components/senior-info/senior-info-box/SeniorInfo.tsx b/src/pages/guard/register/components/senior-info/senior-info-box/SeniorInfo.tsx index 8a77aba0..8d6ce92a 100644 --- a/src/pages/guard/register/components/senior-info/senior-info-box/SeniorInfo.tsx +++ b/src/pages/guard/register/components/senior-info/senior-info-box/SeniorInfo.tsx @@ -1,28 +1,125 @@ +import { useState } from 'react'; + +import { useDeleteSeniorInfo, useEditSeniorInfo } from '../../../api'; import { formatPhoneNumber } from '@/shared'; -import { Box, Flex, Text } from '@chakra-ui/react'; +import { deleteIcon, editIcon } from '@/shared/assets'; +import { Box, Flex, Text, Image, Input } from '@chakra-ui/react'; import styled from '@emotion/styled'; type SeniorInfoType = { seniorName: string; seniorPhoneNumber: string; + seniorId: number; }; -const SeniorInfo = ({ senior }: { senior: SeniorInfoType }) => { +const SeniorInfo = ({ + senior, + refetch, +}: { + senior: SeniorInfoType; + refetch: () => void; +}) => { + const [isEditing, setIsEditing] = useState(false); + const [seniorName, setSeniorName] = useState(senior.seniorName); + const [seniorPhoneNumber, setSeniorPhoneNumber] = useState( + senior.seniorPhoneNumber + ); + + const deleteMutation = useDeleteSeniorInfo(refetch); + const editMutation = useEditSeniorInfo(refetch); + + const handleDelete = () => { + deleteMutation.mutate(senior.seniorId); + }; + + const handleEdit = () => { + editMutation.mutate({ + seniorId: senior.seniorId, + seniorInfo: { seniorName, seniorPhoneNumber }, + }); + setIsEditing(false); + }; + return ( - - - {senior.seniorName} - - - 전화번호 - {formatPhoneNumber(senior.seniorPhoneNumber)} - - + {isEditing ? ( + + + setSeniorName(e.target.value)} + placeholder='이름을 입력하세요' + size='sm' + bg='var(--color-white)' + border='1px solid var(--color-white)' + borderRadius='10px' + /> + setSeniorPhoneNumber(e.target.value)} + placeholder='전화번호를 입력하세요' + bg='var(--color-white)' + border='1px solid var(--color-white)' + borderRadius='10px' + size='sm' + /> + + + 저장 + + + ) : ( + + + + {senior.seniorName} + + + setIsEditing(true)} + /> + + + + + 전화번호 + {formatPhoneNumber(senior.seniorPhoneNumber)} + + + )} ); }; diff --git a/src/pages/guard/register/components/senior-register-box/SeniorFormField.tsx b/src/pages/guard/register/components/senior-register-box/SeniorFormField.tsx index 9f29dc05..d439bf29 100644 --- a/src/pages/guard/register/components/senior-register-box/SeniorFormField.tsx +++ b/src/pages/guard/register/components/senior-register-box/SeniorFormField.tsx @@ -1,6 +1,6 @@ import { UseFormRegister } from 'react-hook-form'; -import { SeniorRegisterValues } from '../../types'; +import { SeniorRegisterValues } from '../../api'; import { Box, Input, Text } from '@chakra-ui/react'; import styled from '@emotion/styled'; diff --git a/src/pages/guard/register/components/senior-register-box/SeniorRegisterBox.tsx b/src/pages/guard/register/components/senior-register-box/SeniorRegisterBox.tsx index 542630c6..96d12e65 100644 --- a/src/pages/guard/register/components/senior-register-box/SeniorRegisterBox.tsx +++ b/src/pages/guard/register/components/senior-register-box/SeniorRegisterBox.tsx @@ -6,20 +6,19 @@ import { parsePhoneNumber } from '@/shared'; import { Box } from '@chakra-ui/react'; import styled from '@emotion/styled'; -const SeniorRegisterBox = () => { +const SeniorRegisterBox = ({ refetch }: { refetch: () => void }) => { const { register, handleSubmit, formState: { errors }, } = useForm(); - const { mutate: postSeniorInfo } = useAddSeniorInfo(); + const { mutate: postSeniorInfo } = useAddSeniorInfo(refetch); const onSubmit = (data: SeniorRegisterValues) => { const requestSeniorData = { seniorName: data.seniorName, seniorPhoneNumber: parsePhoneNumber(data.seniorPhoneNumber), }; - console.log(requestSeniorData); postSeniorInfo(requestSeniorData); }; diff --git a/src/pages/guard/register/index.ts b/src/pages/guard/register/index.ts index e795c5b8..c2af5082 100644 --- a/src/pages/guard/register/index.ts +++ b/src/pages/guard/register/index.ts @@ -2,3 +2,4 @@ export { SeniorRegisterPage } from './SeniorRegisterPage'; export * from './components'; export * from './data'; +export * from './api'; diff --git a/src/shared/assets/delete-icon.svg b/src/shared/assets/delete-icon.svg new file mode 100644 index 00000000..c153dad3 --- /dev/null +++ b/src/shared/assets/delete-icon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/shared/assets/edit-icon.svg b/src/shared/assets/edit-icon.svg new file mode 100644 index 00000000..d4eb690d --- /dev/null +++ b/src/shared/assets/edit-icon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/shared/assets/index.ts b/src/shared/assets/index.ts new file mode 100644 index 00000000..18e64c15 --- /dev/null +++ b/src/shared/assets/index.ts @@ -0,0 +1,2 @@ +export { default as deleteIcon } from './delete-icon.svg'; +export { default as editIcon } from './edit-icon.svg'; From bb650b465cc584fcd794c9b93f02a05d6ad227e9 Mon Sep 17 00:00:00 2001 From: diwoni <70441308+Diwoni@users.noreply.github.com> Date: Mon, 21 Oct 2024 21:59:09 +0900 Subject: [PATCH 07/11] =?UTF-8?q?Style(senior-register):=20=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EB=A0=88=EC=9D=B4=EC=95=84=EC=9B=83=20?= =?UTF-8?q?=EC=A1=B0=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../guard/register/SeniorRegisterPage.tsx | 26 ++++++++++++------- .../senior-register-box/SeniorRegisterBox.tsx | 10 +++---- .../components/features/header/Header.tsx | 1 + 3 files changed, 22 insertions(+), 15 deletions(-) diff --git a/src/pages/guard/register/SeniorRegisterPage.tsx b/src/pages/guard/register/SeniorRegisterPage.tsx index bc044152..60847a8f 100644 --- a/src/pages/guard/register/SeniorRegisterPage.tsx +++ b/src/pages/guard/register/SeniorRegisterPage.tsx @@ -6,28 +6,22 @@ import styled from '@emotion/styled'; export const SeniorRegisterPage = () => { const { data: seniors, isLoading, isError, refetch } = useGetAllSeniorInfo(); - console.log(seniors); + if (isLoading) { return
Loading...
; } if (isError) { - return
Error: {isError}
; + return
Error
; } return ( - + {seniors?.map((senior) => ( ))} - + ); @@ -36,4 +30,16 @@ export const SeniorRegisterPage = () => { const Container = styled(Box)` position: relative; height: 100vh; + display: flex; + flex-direction: column; +`; + +const SeniorInfoContainer = styled(Flex)` + flex-grow: 1; + overflow-y: auto; + height: 70vh; + flex-direction: column; + align-items: center; `; + +export default SeniorRegisterPage; diff --git a/src/pages/guard/register/components/senior-register-box/SeniorRegisterBox.tsx b/src/pages/guard/register/components/senior-register-box/SeniorRegisterBox.tsx index 96d12e65..18144347 100644 --- a/src/pages/guard/register/components/senior-register-box/SeniorRegisterBox.tsx +++ b/src/pages/guard/register/components/senior-register-box/SeniorRegisterBox.tsx @@ -27,7 +27,7 @@ const SeniorRegisterBox = ({ refetch }: { refetch: () => void }) => { void }) => { void }) => { export default SeniorRegisterBox; const RegisterBox = styled(Box)` - position: absolute; - bottom: 0; + position: relative; width: 100%; - height: 360px; + height: auto; left: 50%; transform: translateX(-50%); max-width: 370px; @@ -86,6 +85,7 @@ const StyledButton = styled.button` cursor: pointer; font-size: 16px; transition: background-color 0.3s; + margin-bottom: 10px; &:hover { background-color: #a67070; diff --git a/src/shared/components/features/header/Header.tsx b/src/shared/components/features/header/Header.tsx index 73f66e76..2cde532c 100644 --- a/src/shared/components/features/header/Header.tsx +++ b/src/shared/components/features/header/Header.tsx @@ -44,6 +44,7 @@ const HeaderBox = styled.header` justify-content: center; align-items: center; background-color: var(--color-white); + z-index: 999; `; const Icon = styled(Image)` From d279feab2fc5df3604dd56a2ffdcddf6e8cd99d0 Mon Sep 17 00:00:00 2001 From: diwoni <70441308+Diwoni@users.noreply.github.com> Date: Mon, 21 Oct 2024 22:29:12 +0900 Subject: [PATCH 08/11] =?UTF-8?q?Style(point-log):=20=ED=8F=AC=EC=9D=B8?= =?UTF-8?q?=ED=8A=B8=20=EB=82=B4=EC=97=AD=20=20=EC=83=81=ED=83=9C=EC=97=90?= =?UTF-8?q?=20=EB=94=B0=EB=9D=BC=20=ED=8F=AC=EC=9D=B8=ED=8A=B8=20=EC=8A=A4?= =?UTF-8?q?=ED=83=80=EC=9D=BC=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../mypage/point-log-box/PointLogBox.tsx | 27 +++++++++++++++++-- 1 file changed, 25 insertions(+), 2 deletions(-) diff --git a/src/shared/components/features/mypage/point-log-box/PointLogBox.tsx b/src/shared/components/features/mypage/point-log-box/PointLogBox.tsx index 0e0e3141..6a70ada3 100644 --- a/src/shared/components/features/mypage/point-log-box/PointLogBox.tsx +++ b/src/shared/components/features/mypage/point-log-box/PointLogBox.tsx @@ -2,7 +2,7 @@ import { useState } from 'react'; import PointLogImg from '../../../../assets/point-log-icon.png'; import { getPointStatusLabel, useGetPointLogs } from '@/shared/hooks'; -import { Box, Image } from '@chakra-ui/react'; +import { Box, Image, Text } from '@chakra-ui/react'; import styled from '@emotion/styled'; const PointLogBox = () => { @@ -40,7 +40,25 @@ const PointLogBox = () => { {item.content} - {item.price.toLocaleString()} + + {(item.status === 'SPEND_COMPLETE' || + item.status === 'WITHDRAW_COMPLETE' + ? '-' + : item.status === 'EARN' || + item.status === 'CHARGE_COMPLETE' + ? '+' + : '') + item.price.toLocaleString()} + @@ -153,3 +171,8 @@ const DetailText = styled(Box)` font-size: 16px; font-weight: 600; `; + +const PriceText = styled(Text)` + font-size: 16px; + font-weight: 600; +`; From 3a620e4da3c9f2cc51bc2976446be6616482bab0 Mon Sep 17 00:00:00 2001 From: diwoni <70441308+Diwoni@users.noreply.github.com> Date: Mon, 21 Oct 2024 22:32:18 +0900 Subject: [PATCH 09/11] =?UTF-8?q?Style(signup-page):=20=ED=9A=8C=EC=9B=90?= =?UTF-8?q?=EA=B0=80=EC=9E=85=20=EC=8B=9C=20=EC=A0=84=ED=99=94=EB=B2=88?= =?UTF-8?q?=ED=98=B8=20'-'=20=EC=A0=9C=EA=B1=B0=ED=95=B4=EC=84=9C=20API=20?= =?UTF-8?q?=EC=9A=94=EC=B2=AD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/common/register/RegisterPage.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/common/register/RegisterPage.tsx b/src/pages/common/register/RegisterPage.tsx index a35b932f..c6a8b1ff 100644 --- a/src/pages/common/register/RegisterPage.tsx +++ b/src/pages/common/register/RegisterPage.tsx @@ -4,6 +4,7 @@ import { useForm } from 'react-hook-form'; import { RegisterFields, RegisterType, Tos } from './components'; import { useRegister } from './store/hooks'; import { FormValues } from './types'; +import { parsePhoneNumber } from '@/shared'; import { BasicButton } from '@/shared/components'; import { Divider } from '@chakra-ui/react'; import styled from '@emotion/styled'; @@ -29,12 +30,11 @@ const RegisterPage = () => { const requestData = { name: data.name, - phoneNumber: data.phoneNumber, + phoneNumber: parsePhoneNumber(data.phoneNumber), email: 'test1@example.com', // 임시 (카카오 로그인 후 넘겨받기) isSinitto, }; console.log(requestData); - // 회원가입 API 호출 mutation.mutate(requestData); }; From 28ab5172d91953f5c0a05227bcd82e1757c814af Mon Sep 17 00:00:00 2001 From: diwoni <70441308+Diwoni@users.noreply.github.com> Date: Mon, 21 Oct 2024 23:01:16 +0900 Subject: [PATCH 10/11] =?UTF-8?q?Docs:=20=EC=A0=84=ED=99=94=EB=B2=88?= =?UTF-8?q?=ED=98=B8=20=ED=8F=AC=EB=A7=B7=ED=8C=85=20=EA=B4=80=EB=A0=A8=20?= =?UTF-8?q?=ED=95=A8=EC=88=98=20=ED=8C=8C=EC=9D=BC=20=EC=9D=B4=EB=8F=99=20?= =?UTF-8?q?(hooks=20->=20utils)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/shared/index.ts | 1 + src/shared/utils/index.ts | 1 + src/shared/{hooks => utils}/phone-number/formatPhoneNumber.ts | 0 src/shared/{hooks => utils}/phone-number/index.ts | 0 4 files changed, 2 insertions(+) rename src/shared/{hooks => utils}/phone-number/formatPhoneNumber.ts (100%) rename src/shared/{hooks => utils}/phone-number/index.ts (100%) diff --git a/src/shared/index.ts b/src/shared/index.ts index 8ec826f3..634e7aa1 100644 --- a/src/shared/index.ts +++ b/src/shared/index.ts @@ -3,3 +3,4 @@ export * from './constants'; export * from './hooks'; export * from './provider'; export * from './types'; +export * from './utils'; diff --git a/src/shared/utils/index.ts b/src/shared/utils/index.ts index d2cfe48f..5be19105 100644 --- a/src/shared/utils/index.ts +++ b/src/shared/utils/index.ts @@ -1 +1,2 @@ export { handleCallbackError } from './handle-callback-error'; +export * from './phone-number'; diff --git a/src/shared/hooks/phone-number/formatPhoneNumber.ts b/src/shared/utils/phone-number/formatPhoneNumber.ts similarity index 100% rename from src/shared/hooks/phone-number/formatPhoneNumber.ts rename to src/shared/utils/phone-number/formatPhoneNumber.ts diff --git a/src/shared/hooks/phone-number/index.ts b/src/shared/utils/phone-number/index.ts similarity index 100% rename from src/shared/hooks/phone-number/index.ts rename to src/shared/utils/phone-number/index.ts From af91b04b533b28115536d278b63f337d3e1224f5 Mon Sep 17 00:00:00 2001 From: diwoni <70441308+Diwoni@users.noreply.github.com> Date: Tue, 22 Oct 2024 00:46:30 +0900 Subject: [PATCH 11/11] =?UTF-8?q?Chore:=20=EC=BD=94=EB=93=9C=EB=A6=AC?= =?UTF-8?q?=EB=B7=B0=20=EB=B0=98=EC=98=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/guard/register/api/index.ts | 6 +++++- src/shared/components/features/header/Header.tsx | 2 +- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/src/pages/guard/register/api/index.ts b/src/pages/guard/register/api/index.ts index 1a8f47eb..b65e5352 100644 --- a/src/pages/guard/register/api/index.ts +++ b/src/pages/guard/register/api/index.ts @@ -1,4 +1,8 @@ -export { addSeniorInfo } from './senior-info.api'; +export { + addSeniorInfo, + deleteSeniorInfo, + editSeniorInfo, +} from './senior-info.api'; export * from './hooks'; export * from './types'; diff --git a/src/shared/components/features/header/Header.tsx b/src/shared/components/features/header/Header.tsx index 2cde532c..2c5e200a 100644 --- a/src/shared/components/features/header/Header.tsx +++ b/src/shared/components/features/header/Header.tsx @@ -44,7 +44,7 @@ const HeaderBox = styled.header` justify-content: center; align-items: center; background-color: var(--color-white); - z-index: 999; + z-index: 10; `; const Icon = styled(Image)`