From b126e1e4c87fc74b0e5fb9959736f937ca8a0914 Mon Sep 17 00:00:00 2001 From: ovoxiix Date: Mon, 15 Jan 2024 00:15:38 +0900 Subject: [PATCH 01/60] =?UTF-8?q?design:=20Preview=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EB=A7=88=ED=81=AC=EC=97=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/icons/ic-register-search.svg | 28 ++++++ src/assets/icons/ic-register-side.svg | 17 ++++ src/components/Register/Preview/index.tsx | 113 +++++++++++++++++++++- 3 files changed, 157 insertions(+), 1 deletion(-) create mode 100644 src/assets/icons/ic-register-search.svg create mode 100644 src/assets/icons/ic-register-side.svg diff --git a/src/assets/icons/ic-register-search.svg b/src/assets/icons/ic-register-search.svg new file mode 100644 index 00000000..529f6fe7 --- /dev/null +++ b/src/assets/icons/ic-register-search.svg @@ -0,0 +1,28 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/icons/ic-register-side.svg b/src/assets/icons/ic-register-side.svg new file mode 100644 index 00000000..738f61e4 --- /dev/null +++ b/src/assets/icons/ic-register-side.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/src/components/Register/Preview/index.tsx b/src/components/Register/Preview/index.tsx index 12b5681f..3a311d9c 100644 --- a/src/components/Register/Preview/index.tsx +++ b/src/components/Register/Preview/index.tsx @@ -1,7 +1,35 @@ import styled from '@emotion/styled'; +import search from '@assets/icons/ic-register-search.svg'; +import side from '@assets/icons/ic-register-side.svg'; + const Preview = () => { - return Preview; + return ( + +
+ + + + 쿠폰 미리보기 ㅣ + 고객님들께 제공 될 쿠폰 이미지를 확인해보세요! +
+ + + + + 쿠폰의 이름은 고객 화면에서는 노출되지 않습니다. + + 고객 분들께는 대상고객+할인정보명으로 보여집니다. + + + + ); }; export default Preview; @@ -11,4 +39,87 @@ const PreviewContainer = styled.div` min-height: 430px; margin: 60px 0px 30px; + border-radius: 20px; + + box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25); +`; + +const Header = styled.div` + width: 95%; + height: 13%; + + padding: 3%; + border-radius: 5px 50px 50px 5px; + + display: flex; + align-items: center; + gap: 4px; + + color: #fff; + + background: linear-gradient(89deg, #3182f6 0%, #6ab2ff 111.65%); + box-shadow: 2px 2px 3px 0px rgba(0, 0, 0, 0.25); +`; + +const IconWrapper = styled.div` + width: 28px; + height: 28px; + + overflow: hidden; +`; + +const PreviewIcon = styled.img` + width: 60px; + height: 60px; + + object-position: -17px 0; +`; + +const Title = styled.span` + font-size: 1.1vw; +`; + +const Subtitle = styled.span` + font-size: 0.9vw; +`; + +const Coupon = styled.div` + position: relative; + + width: 380px; + height: 189px; + + margin: 8% auto; + border-radius: 13px; + + box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.25); + + overflow: hidden; +`; + +const SideImage = styled.img` + position: absolute; + top: 0; + right: 0; +`; + +const Description = styled.div` + display: flex; + flex-direction: column; + align-items: center; + gap: 8px; + + font-size: 15px; +`; + +const FirstLine = styled.div` + color: #979c9e; +`; + +const SecondLine = styled.div` + color: #404446; + + & > span { + font-weight: 700; + } `; From 09567d71ded42bbb4893bcd4040b5f5f767c6a00 Mon Sep 17 00:00:00 2001 From: ovoxiix Date: Tue, 16 Jan 2024 00:02:13 +0900 Subject: [PATCH 02/60] =?UTF-8?q?design:=20=EA=B3=B5=ED=86=B5=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20InputField=20=EB=A7=88=ED=81=AC?= =?UTF-8?q?=EC=97=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Register/common/InputField/index.tsx | 59 +++++++++++++++++++ src/components/Register/common/index.tsx | 1 + src/types/register.ts | 17 ++++++ 3 files changed, 77 insertions(+) create mode 100644 src/components/Register/common/InputField/index.tsx diff --git a/src/components/Register/common/InputField/index.tsx b/src/components/Register/common/InputField/index.tsx new file mode 100644 index 00000000..c632aaf9 --- /dev/null +++ b/src/components/Register/common/InputField/index.tsx @@ -0,0 +1,59 @@ +import styled from '@emotion/styled'; +import theme from '@styles/theme'; + +import { + InputFieldProps, + InputFieldStyleProps, + ContainerStyleProps +} from '@/types/register'; + +const InputField = ({ + placeholder, + text, + whichInput, + currentInput, + onInputChange +}: InputFieldProps) => { + const handleInput = (e: React.FormEvent) => { + onInputChange(e); + }; + + return ( + + + {text} + + ); +}; + +export default InputField; + +const Container = styled.div` + position: relative; + + display: ${props => (props.$isSelected ? 'block' : 'none')}; +`; + +const Input = styled.input` + width: 245px; + height: 39px; + + padding: 0 ${props => (props.$text === '원' ? '28px' : '61px')}; + border-radius: 5px; + border: 1px solid ${theme.colors.hover}; + outline: none; + + font-size: 15px; + text-align: right; +`; + +const Text = styled.span` + position: absolute; + top: 10px; + left: ${props => (props.$text === '원' ? '219px' : '186px')}; +`; diff --git a/src/components/Register/common/index.tsx b/src/components/Register/common/index.tsx index f182a5a6..048e1b9d 100644 --- a/src/components/Register/common/index.tsx +++ b/src/components/Register/common/index.tsx @@ -1,3 +1,4 @@ export { default as InputContainer } from './InputContainer'; export { default as InputButton } from './InputButton'; export { default as InputAccordion } from './InputAccordion'; +export { default as InputField } from './InputField'; diff --git a/src/types/register.ts b/src/types/register.ts index 64537226..32849140 100644 --- a/src/types/register.ts +++ b/src/types/register.ts @@ -25,6 +25,23 @@ export type ButtonStyleProps = { src: string; }; +// InputField +export type InputFieldProps = { + placeholder: string; + text: string; + whichInput: number; + currentInput: number; + onInputChange: (e: React.FormEvent) => void; +}; + +export type InputFieldStyleProps = { + $text: string; +}; + +export type ContainerStyleProps = { + $isSelected: boolean; +}; + // Stepper export type StepperProps = { steps: { From e0ca5717437363832a86cb920b700e8bd683431f Mon Sep 17 00:00:00 2001 From: ovoxiix Date: Tue, 16 Jan 2024 04:29:45 +0900 Subject: [PATCH 03/60] =?UTF-8?q?modify:=20=ED=83=80=EC=9E=85=20=EC=9D=B4?= =?UTF-8?q?=EB=A6=84=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Register/common/InputField/index.tsx | 4 ++-- src/types/register.ts | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/Register/common/InputField/index.tsx b/src/components/Register/common/InputField/index.tsx index c632aaf9..80b8b847 100644 --- a/src/components/Register/common/InputField/index.tsx +++ b/src/components/Register/common/InputField/index.tsx @@ -4,7 +4,7 @@ import theme from '@styles/theme'; import { InputFieldProps, InputFieldStyleProps, - ContainerStyleProps + InputFieldContainerStyleProps } from '@/types/register'; const InputField = ({ @@ -33,7 +33,7 @@ const InputField = ({ export default InputField; -const Container = styled.div` +const Container = styled.div` position: relative; display: ${props => (props.$isSelected ? 'block' : 'none')}; diff --git a/src/types/register.ts b/src/types/register.ts index 32849140..9ac45eef 100644 --- a/src/types/register.ts +++ b/src/types/register.ts @@ -38,7 +38,7 @@ export type InputFieldStyleProps = { $text: string; }; -export type ContainerStyleProps = { +export type InputFieldContainerStyleProps = { $isSelected: boolean; }; From 01fa7c7fb4c3bf56ef4ef9fa9f00cc0f7080ec08 Mon Sep 17 00:00:00 2001 From: ovoxiix Date: Tue, 16 Jan 2024 06:30:35 +0900 Subject: [PATCH 04/60] =?UTF-8?q?design:=20=EA=B3=B5=ED=86=B5=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20InputCheckBox=20=EB=A7=88?= =?UTF-8?q?=ED=81=AC=EC=97=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/icons/ic-register-checked.svg | 6 ++ src/assets/icons/ic-register-unchecked.svg | 6 ++ .../Register/common/InputCheckBox/index.tsx | 74 +++++++++++++++++++ src/components/Register/common/index.tsx | 1 + src/types/register.ts | 21 ++++++ 5 files changed, 108 insertions(+) create mode 100644 src/assets/icons/ic-register-checked.svg create mode 100644 src/assets/icons/ic-register-unchecked.svg create mode 100644 src/components/Register/common/InputCheckBox/index.tsx diff --git a/src/assets/icons/ic-register-checked.svg b/src/assets/icons/ic-register-checked.svg new file mode 100644 index 00000000..3ef74d38 --- /dev/null +++ b/src/assets/icons/ic-register-checked.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/assets/icons/ic-register-unchecked.svg b/src/assets/icons/ic-register-unchecked.svg new file mode 100644 index 00000000..ba860ac6 --- /dev/null +++ b/src/assets/icons/ic-register-unchecked.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/components/Register/common/InputCheckBox/index.tsx b/src/components/Register/common/InputCheckBox/index.tsx new file mode 100644 index 00000000..c314f7e0 --- /dev/null +++ b/src/components/Register/common/InputCheckBox/index.tsx @@ -0,0 +1,74 @@ +import { useState } from 'react'; +import styled from '@emotion/styled'; + +import theme from '@styles/theme'; +import { + InputCheckBoxProps, + InputCheckBoxContainerStyleProps, + LabelStyleProps, + CheckIconStyleProps +} from '@/types/register'; +import checked from '@assets/icons/ic-register-checked.svg'; +import unchecked from '@assets/icons/ic-register-unchecked.svg'; + +const InputCheckBox = ({ + id, + whichInput, + currentInput, + text, + onChecked +}: InputCheckBoxProps) => { + const [isChecked, setIsChecked] = useState(false); + + const handleCheckBox = () => { + if (onChecked) { + onChecked(prev => !prev); + } + setIsChecked(prev => !prev); + }; + + return ( + + + + + ); +}; + +export default InputCheckBox; + +const Container = styled.div` + display: ${props => (props.$isSelected ? 'flex' : 'none')}; + align-items: center; +`; + +const CheckBox = styled.input` + display: none; +`; + +const Label = styled.label` + display: flex; + align-items: center; + + color: ${props => (props.$isChecked ? theme.colors.hover : '#757676')}; + font-size: 15px; +`; + +const CheckIcon = styled.div` + width: 20px; + height: 20px; + + margin-right: 5px; + + background: url(${props => props.$src}) no-repeat; +`; diff --git a/src/components/Register/common/index.tsx b/src/components/Register/common/index.tsx index 048e1b9d..5a758a81 100644 --- a/src/components/Register/common/index.tsx +++ b/src/components/Register/common/index.tsx @@ -2,3 +2,4 @@ export { default as InputContainer } from './InputContainer'; export { default as InputButton } from './InputButton'; export { default as InputAccordion } from './InputAccordion'; export { default as InputField } from './InputField'; +export { default as InputCheckBox } from './InputCheckBox'; diff --git a/src/types/register.ts b/src/types/register.ts index 9ac45eef..e6bcacec 100644 --- a/src/types/register.ts +++ b/src/types/register.ts @@ -42,6 +42,27 @@ export type InputFieldContainerStyleProps = { $isSelected: boolean; }; +// InputCheckBox +export type InputCheckBoxProps = { + id: string; + whichInput: number; + currentInput: number; + text: string; + onChecked?: React.Dispatch>; +}; + +export type InputCheckBoxContainerStyleProps = { + $isSelected: boolean; +}; + +export type LabelStyleProps = { + $isChecked: boolean; +}; + +export type CheckIconStyleProps = { + $src: string; +}; + // Stepper export type StepperProps = { steps: { From 7ee079d123f9fee8d16ff03b9f4b80244e9c3560 Mon Sep 17 00:00:00 2001 From: ovoxiix Date: Tue, 16 Jan 2024 07:11:19 +0900 Subject: [PATCH 05/60] =?UTF-8?q?feat:=20InputButton=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=EC=97=90=20=EC=83=81=ED=83=9C=20=EB=B3=80?= =?UTF-8?q?=ED=99=94=20=EB=A1=9C=EC=A7=81=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Register/Steps/FirstStep/index.tsx | 7 ++++++ .../Register/common/InputButton/index.tsx | 22 +++++++++++++++++-- src/types/register.ts | 2 ++ 3 files changed, 29 insertions(+), 2 deletions(-) diff --git a/src/components/Register/Steps/FirstStep/index.tsx b/src/components/Register/Steps/FirstStep/index.tsx index fbed05ec..7ae91b97 100644 --- a/src/components/Register/Steps/FirstStep/index.tsx +++ b/src/components/Register/Steps/FirstStep/index.tsx @@ -1,8 +1,11 @@ +import { useState } from 'react'; import styled from '@emotion/styled'; import { InputContainer, InputButton } from '@components/Register/common'; const FirstStep = () => { + const [currentInput, setCurrentInput] = useState(0); + return ( <> @@ -37,12 +40,16 @@ const FirstStep = () => { id="price" name="discountType" buttonName="정액 할인" + value={1} + onButtonClick={setCurrentInput} /> diff --git a/src/components/Register/common/InputButton/index.tsx b/src/components/Register/common/InputButton/index.tsx index 1e0035cf..8a8f60c5 100644 --- a/src/components/Register/common/InputButton/index.tsx +++ b/src/components/Register/common/InputButton/index.tsx @@ -3,7 +3,20 @@ import theme from '@styles/theme'; import { InputButtonProps } from '@/types/register'; -const InputButton = ({ type, id, name, buttonName }: InputButtonProps) => { +const InputButton = ({ + type, + id, + name, + buttonName, + value, + onButtonClick +}: InputButtonProps) => { + const handleToggle = () => { + if (value && onButtonClick) { + onButtonClick(value); + } + }; + return ( <> { type={type} name={name} /> - + ); }; diff --git a/src/types/register.ts b/src/types/register.ts index e6bcacec..fc12117c 100644 --- a/src/types/register.ts +++ b/src/types/register.ts @@ -12,6 +12,8 @@ export type InputButtonProps = { id: string; name: string; buttonName: string; + value?: number; + onButtonClick?: React.Dispatch>; }; // InputAccordion From 21dd48a5249a572cb129291207621608127fb22d Mon Sep 17 00:00:00 2001 From: ovoxiix Date: Tue, 16 Jan 2024 07:49:06 +0900 Subject: [PATCH 06/60] =?UTF-8?q?design:=20=EC=A0=95=EB=B3=B4=20=EC=9E=85?= =?UTF-8?q?=EB=A0=A5=20=EB=8B=A8=EA=B3=84=20=EC=B6=94=EA=B0=80=20=EB=A7=88?= =?UTF-8?q?=ED=81=AC=EC=97=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Register/Steps/FirstStep/index.tsx | 61 ++++++++++++++++++- src/types/register.ts | 5 ++ 2 files changed, 65 insertions(+), 1 deletion(-) diff --git a/src/components/Register/Steps/FirstStep/index.tsx b/src/components/Register/Steps/FirstStep/index.tsx index 7ae91b97..f1415000 100644 --- a/src/components/Register/Steps/FirstStep/index.tsx +++ b/src/components/Register/Steps/FirstStep/index.tsx @@ -1,10 +1,19 @@ import { useState } from 'react'; import styled from '@emotion/styled'; -import { InputContainer, InputButton } from '@components/Register/common'; +import { + InputContainer, + InputButton, + InputField, + InputCheckBox +} from '@components/Register/common'; +import { LimitWrapperStyleProps } from '@/types/register'; const FirstStep = () => { const [currentInput, setCurrentInput] = useState(0); + const [isLimit, setIsLimit] = useState(false); + + const handleInput = (e: React.FormEvent) => {}; return ( <> @@ -52,6 +61,40 @@ const FirstStep = () => { onButtonClick={setCurrentInput} /> + + + + + + + + + + ); @@ -87,3 +130,19 @@ const ButtonWrapper = styled.div` display: flex; gap: 23px; `; + +const ContentWrapper = styled.div` + width: 100%; + + margin-top: 9px; + + display: inline-block; +`; + +const InnerContentWrapper = styled.div` + display: flex; +`; + +const LimitWrapper = styled.div` + display: ${props => (props.$isLimit ? 'block' : 'none')}; +`; diff --git a/src/types/register.ts b/src/types/register.ts index fc12117c..59623819 100644 --- a/src/types/register.ts +++ b/src/types/register.ts @@ -98,3 +98,8 @@ export type StepTitleProps = { }[]; currentStep: number; }; + +// FirstStep +export type LimitWrapperStyleProps = { + $isLimit: boolean; +}; From 44f787c4d8b32578ec58733a918b2e5dd891af8a Mon Sep 17 00:00:00 2001 From: ovoxiix Date: Tue, 16 Jan 2024 08:27:03 +0900 Subject: [PATCH 07/60] =?UTF-8?q?refactor:=20=EA=B3=B5=ED=86=B5=20?= =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20InputWrapper=20=EA=B5=AC?= =?UTF-8?q?=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Register/common/InputWrapper/index.tsx | 23 +++++++++++++++++++ src/components/Register/common/index.tsx | 1 + src/types/register.ts | 11 +++++++++ 3 files changed, 35 insertions(+) create mode 100644 src/components/Register/common/InputWrapper/index.tsx diff --git a/src/components/Register/common/InputWrapper/index.tsx b/src/components/Register/common/InputWrapper/index.tsx new file mode 100644 index 00000000..cc834604 --- /dev/null +++ b/src/components/Register/common/InputWrapper/index.tsx @@ -0,0 +1,23 @@ +import styled from '@emotion/styled'; + +import { InputWrapperProps, WrapperStyleProps } from '@/types/register'; + +const InputWrapper = ({ + whichInput, + currentInput, + children +}: InputWrapperProps) => { + return ( + {children} + ); +}; + +export default InputWrapper; + +const Wrapper = styled.div` + width: 100%; + + margin-top: 9px; + + display: ${props => (props.$isSelected ? 'inline-block' : 'none')}; +`; diff --git a/src/components/Register/common/index.tsx b/src/components/Register/common/index.tsx index 5a758a81..3eb1ceee 100644 --- a/src/components/Register/common/index.tsx +++ b/src/components/Register/common/index.tsx @@ -3,3 +3,4 @@ export { default as InputButton } from './InputButton'; export { default as InputAccordion } from './InputAccordion'; export { default as InputField } from './InputField'; export { default as InputCheckBox } from './InputCheckBox'; +export { default as InputWrapper } from './InputWrapper'; diff --git a/src/types/register.ts b/src/types/register.ts index 59623819..da1bf327 100644 --- a/src/types/register.ts +++ b/src/types/register.ts @@ -65,6 +65,17 @@ export type CheckIconStyleProps = { $src: string; }; +// InputWrapper +export type InputWrapperProps = { + whichInput: number; + currentInput: number; + children: ReactNode; +}; + +export type WrapperStyleProps = { + $isSelected: boolean; +}; + // Stepper export type StepperProps = { steps: { From 9b19f30eb33cb8a2f85e514d9d5de91f42a77ffc Mon Sep 17 00:00:00 2001 From: ovoxiix Date: Tue, 16 Jan 2024 09:16:10 +0900 Subject: [PATCH 08/60] =?UTF-8?q?refactor:=20=EB=B0=98=EB=B3=B5=EC=A0=81?= =?UTF-8?q?=EC=9D=B8=20=EC=9A=94=EC=86=8C=20InputWrapper=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=EB=A1=9C=20=EB=B6=84=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Register/Steps/FirstStep/index.tsx | 44 +++++++++---------- .../Register/common/InputCheckBox/index.tsx | 15 ++----- .../Register/common/InputField/index.tsx | 22 +++------- src/types/register.ts | 12 ----- 4 files changed, 31 insertions(+), 62 deletions(-) diff --git a/src/components/Register/Steps/FirstStep/index.tsx b/src/components/Register/Steps/FirstStep/index.tsx index f1415000..f5a2fe53 100644 --- a/src/components/Register/Steps/FirstStep/index.tsx +++ b/src/components/Register/Steps/FirstStep/index.tsx @@ -5,7 +5,8 @@ import { InputContainer, InputButton, InputField, - InputCheckBox + InputCheckBox, + InputWrapper } from '@components/Register/common'; import { LimitWrapperStyleProps } from '@/types/register'; @@ -61,40 +62,45 @@ const FirstStep = () => { onButtonClick={setCurrentInput} /> - + - + + + - - + + + + - - + + ); @@ -132,14 +138,6 @@ const ButtonWrapper = styled.div` `; const ContentWrapper = styled.div` - width: 100%; - - margin-top: 9px; - - display: inline-block; -`; - -const InnerContentWrapper = styled.div` display: flex; `; diff --git a/src/components/Register/common/InputCheckBox/index.tsx b/src/components/Register/common/InputCheckBox/index.tsx index c314f7e0..fbcfa5f5 100644 --- a/src/components/Register/common/InputCheckBox/index.tsx +++ b/src/components/Register/common/InputCheckBox/index.tsx @@ -4,20 +4,13 @@ import styled from '@emotion/styled'; import theme from '@styles/theme'; import { InputCheckBoxProps, - InputCheckBoxContainerStyleProps, LabelStyleProps, CheckIconStyleProps } from '@/types/register'; import checked from '@assets/icons/ic-register-checked.svg'; import unchecked from '@assets/icons/ic-register-unchecked.svg'; -const InputCheckBox = ({ - id, - whichInput, - currentInput, - text, - onChecked -}: InputCheckBoxProps) => { +const InputCheckBox = ({ id, text, onChecked }: InputCheckBoxProps) => { const [isChecked, setIsChecked] = useState(false); const handleCheckBox = () => { @@ -28,7 +21,7 @@ const InputCheckBox = ({ }; return ( - + ` - display: ${props => (props.$isSelected ? 'flex' : 'none')}; +const Container = styled.div` + display: flex; align-items: center; `; diff --git a/src/components/Register/common/InputField/index.tsx b/src/components/Register/common/InputField/index.tsx index 80b8b847..accad221 100644 --- a/src/components/Register/common/InputField/index.tsx +++ b/src/components/Register/common/InputField/index.tsx @@ -1,25 +1,15 @@ import styled from '@emotion/styled'; import theme from '@styles/theme'; -import { - InputFieldProps, - InputFieldStyleProps, - InputFieldContainerStyleProps -} from '@/types/register'; - -const InputField = ({ - placeholder, - text, - whichInput, - currentInput, - onInputChange -}: InputFieldProps) => { +import { InputFieldProps, InputFieldStyleProps } from '@/types/register'; + +const InputField = ({ placeholder, text, onInputChange }: InputFieldProps) => { const handleInput = (e: React.FormEvent) => { onInputChange(e); }; return ( - + ` +const Container = styled.div` position: relative; - display: ${props => (props.$isSelected ? 'block' : 'none')}; + margin-right: 10px; `; const Input = styled.input` diff --git a/src/types/register.ts b/src/types/register.ts index da1bf327..dd13f3c5 100644 --- a/src/types/register.ts +++ b/src/types/register.ts @@ -31,8 +31,6 @@ export type ButtonStyleProps = { export type InputFieldProps = { placeholder: string; text: string; - whichInput: number; - currentInput: number; onInputChange: (e: React.FormEvent) => void; }; @@ -40,23 +38,13 @@ export type InputFieldStyleProps = { $text: string; }; -export type InputFieldContainerStyleProps = { - $isSelected: boolean; -}; - // InputCheckBox export type InputCheckBoxProps = { id: string; - whichInput: number; - currentInput: number; text: string; onChecked?: React.Dispatch>; }; -export type InputCheckBoxContainerStyleProps = { - $isSelected: boolean; -}; - export type LabelStyleProps = { $isChecked: boolean; }; From 33d2551917d214814830c2c4596fea85ff8debb9 Mon Sep 17 00:00:00 2001 From: ovoxiix Date: Tue, 16 Jan 2024 09:30:33 +0900 Subject: [PATCH 09/60] =?UTF-8?q?feat:=20=EC=9E=85=EB=A0=A5=20=EC=A0=9C?= =?UTF-8?q?=ED=95=9C=20=ED=95=A8=EC=88=98=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Register/Steps/FirstStep/index.tsx | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/src/components/Register/Steps/FirstStep/index.tsx b/src/components/Register/Steps/FirstStep/index.tsx index f5a2fe53..4b79c573 100644 --- a/src/components/Register/Steps/FirstStep/index.tsx +++ b/src/components/Register/Steps/FirstStep/index.tsx @@ -14,7 +14,14 @@ const FirstStep = () => { const [currentInput, setCurrentInput] = useState(0); const [isLimit, setIsLimit] = useState(false); - const handleInput = (e: React.FormEvent) => {}; + const handleInput = (e: React.FormEvent) => { + const inputValue = e.currentTarget.value; + const filteredValue = inputValue.replace(/[^0-9]/g, ''); + + if (inputValue !== filteredValue) { + e.currentTarget.value = filteredValue; + } + }; return ( <> From b7b72cf8fdd71b656e0b913f5d54c2832d84f018 Mon Sep 17 00:00:00 2001 From: ovoxiix Date: Tue, 16 Jan 2024 09:57:58 +0900 Subject: [PATCH 10/60] =?UTF-8?q?modify:=20=EB=B3=80=EC=88=98=20=EC=9D=B4?= =?UTF-8?q?=EB=A6=84=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Register/Steps/FirstStep/index.tsx | 8 ++++---- src/components/Register/common/InputCheckBox/index.tsx | 6 +++--- src/types/register.ts | 4 ++-- 3 files changed, 9 insertions(+), 9 deletions(-) diff --git a/src/components/Register/Steps/FirstStep/index.tsx b/src/components/Register/Steps/FirstStep/index.tsx index 4b79c573..9e475e34 100644 --- a/src/components/Register/Steps/FirstStep/index.tsx +++ b/src/components/Register/Steps/FirstStep/index.tsx @@ -12,7 +12,7 @@ import { LimitWrapperStyleProps } from '@/types/register'; const FirstStep = () => { const [currentInput, setCurrentInput] = useState(0); - const [isLimit, setIsLimit] = useState(false); + const [isLimited, setIsLimited] = useState(false); const handleInput = (e: React.FormEvent) => { const inputValue = e.currentTarget.value; @@ -92,11 +92,11 @@ const FirstStep = () => { - + ` - display: ${props => (props.$isLimit ? 'block' : 'none')}; + display: ${props => (props.$isLimited ? 'block' : 'none')}; `; diff --git a/src/components/Register/common/InputCheckBox/index.tsx b/src/components/Register/common/InputCheckBox/index.tsx index fbcfa5f5..44d526c9 100644 --- a/src/components/Register/common/InputCheckBox/index.tsx +++ b/src/components/Register/common/InputCheckBox/index.tsx @@ -10,12 +10,12 @@ import { import checked from '@assets/icons/ic-register-checked.svg'; import unchecked from '@assets/icons/ic-register-unchecked.svg'; -const InputCheckBox = ({ id, text, onChecked }: InputCheckBoxProps) => { +const InputCheckBox = ({ id, text, onCheck }: InputCheckBoxProps) => { const [isChecked, setIsChecked] = useState(false); const handleCheckBox = () => { - if (onChecked) { - onChecked(prev => !prev); + if (onCheck) { + onCheck(prev => !prev); } setIsChecked(prev => !prev); }; diff --git a/src/types/register.ts b/src/types/register.ts index dd13f3c5..0b6f3ebe 100644 --- a/src/types/register.ts +++ b/src/types/register.ts @@ -42,7 +42,7 @@ export type InputFieldStyleProps = { export type InputCheckBoxProps = { id: string; text: string; - onChecked?: React.Dispatch>; + onCheck?: React.Dispatch>; }; export type LabelStyleProps = { @@ -100,5 +100,5 @@ export type StepTitleProps = { // FirstStep export type LimitWrapperStyleProps = { - $isLimit: boolean; + $isLimited: boolean; }; From 54ecf23ce6602188e02e3c5ba52810c1d6bd8d54 Mon Sep 17 00:00:00 2001 From: ovoxiix Date: Tue, 16 Jan 2024 18:02:01 +0900 Subject: [PATCH 11/60] =?UTF-8?q?feat:=20InputButton=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EC=B2=B4=ED=81=AC=EB=B0=95=EC=8A=A4=20?= =?UTF-8?q?=EB=A1=9C=EC=A7=81=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Register/common/InputButton/index.tsx | 7 ++++++- src/types/register.ts | 1 + 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/src/components/Register/common/InputButton/index.tsx b/src/components/Register/common/InputButton/index.tsx index 8a8f60c5..df162ea6 100644 --- a/src/components/Register/common/InputButton/index.tsx +++ b/src/components/Register/common/InputButton/index.tsx @@ -9,11 +9,16 @@ const InputButton = ({ name, buttonName, value, + currentInput, onButtonClick }: InputButtonProps) => { const handleToggle = () => { if (value && onButtonClick) { - onButtonClick(value); + if (currentInput) { + value === currentInput ? onButtonClick(0) : onButtonClick(value); + } else { + onButtonClick(value); + } } }; diff --git a/src/types/register.ts b/src/types/register.ts index 0b6f3ebe..5e390495 100644 --- a/src/types/register.ts +++ b/src/types/register.ts @@ -13,6 +13,7 @@ export type InputButtonProps = { name: string; buttonName: string; value?: number; + currentInput?: number; onButtonClick?: React.Dispatch>; }; From 70a17e515b63bed2c2bd4236ae2beddf73230f96 Mon Sep 17 00:00:00 2001 From: ovoxiix Date: Tue, 16 Jan 2024 21:10:05 +0900 Subject: [PATCH 12/60] =?UTF-8?q?design:=20RoomList=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EB=A7=88=ED=81=AC=EC=97=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Steps/SecondStep/RoomList/index.tsx | 36 +++++++++++++++++++ src/types/register.ts | 5 +++ 2 files changed, 41 insertions(+) create mode 100644 src/components/Register/Steps/SecondStep/RoomList/index.tsx diff --git a/src/components/Register/Steps/SecondStep/RoomList/index.tsx b/src/components/Register/Steps/SecondStep/RoomList/index.tsx new file mode 100644 index 00000000..748416a0 --- /dev/null +++ b/src/components/Register/Steps/SecondStep/RoomList/index.tsx @@ -0,0 +1,36 @@ +import styled from '@emotion/styled'; + +import { RoomListProps } from '@/types/register'; + +const RoomList = ({ list }: RoomListProps) => { + return ( + + {list.map((room, index) => { + return {room}; + })} + + ); +}; + +export default RoomList; + +const Container = styled.div` + width: 111px; + max-height: 121px; + + margin-top: -9px; + padding: 10px; + border-radius: 5px; + border: 1px solid #d9d9d9; + + display: flex; + flex-direction: column; + gap: 10px; + + overflow: auto; +`; + +const Room = styled.div` + font-size: 10px; + font-weight: 400; +`; diff --git a/src/types/register.ts b/src/types/register.ts index 5e390495..1778b5e6 100644 --- a/src/types/register.ts +++ b/src/types/register.ts @@ -103,3 +103,8 @@ export type StepTitleProps = { export type LimitWrapperStyleProps = { $isLimited: boolean; }; + +// RoomList +export type RoomListProps = { + list: string[]; +}; From 0b50ec5be4f2ea1fa3df939d3a3bfeb08ba454ba Mon Sep 17 00:00:00 2001 From: ovoxiix Date: Tue, 16 Jan 2024 21:36:15 +0900 Subject: [PATCH 13/60] =?UTF-8?q?design:=20=EC=9C=A0=ED=98=95=20=EC=84=A0?= =?UTF-8?q?=ED=83=9D=20=EB=8B=A8=EA=B3=84=20=EB=8B=A8=EA=B3=84=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80=20=EB=A7=88=ED=81=AC=EC=97=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Register/Steps/SecondStep/index.tsx | 53 ++++++++++++++++++- 1 file changed, 52 insertions(+), 1 deletion(-) diff --git a/src/components/Register/Steps/SecondStep/index.tsx b/src/components/Register/Steps/SecondStep/index.tsx index 306a70fb..4f63a9b1 100644 --- a/src/components/Register/Steps/SecondStep/index.tsx +++ b/src/components/Register/Steps/SecondStep/index.tsx @@ -1,8 +1,29 @@ +import { useState } from 'react'; import styled from '@emotion/styled'; -import { InputContainer, InputButton } from '@components/Register/common'; +import { + InputContainer, + InputButton, + InputCheckBox, + InputWrapper +} from '@components/Register/common'; +import RoomList from './RoomList'; const SecondStep = () => { + const [roomType, setRoomType] = useState(0); + const [toAllRoom, setToAllRoom] = useState(0); + + const list = [ + '디럭스', + '스탠다드 더블', + 'VIP 더블', + '프리미엄 더블', + '패밀리 더블', + '패밀리 더블온돌', + '스탠다드', + '스탠다드 트윈' + ]; + return ( <> @@ -18,8 +39,22 @@ const SecondStep = () => { id="stay" name="roomType" buttonName="숙박" + value={1} + currentInput={roomType} + onButtonClick={setRoomType} /> + + + + + @@ -28,14 +63,26 @@ const SecondStep = () => { id="true" name="toAllRoom" buttonName="모든 객실" + value={1} + onButtonClick={setToAllRoom} /> + + + + + ); @@ -49,3 +96,7 @@ const ButtonWrapper = styled.div` display: flex; gap: 23px; `; + +const ContentWrapper = styled.div` + padding-left: 134px; +`; From 86a876e4d72737f8abda94d48a6fb7f24ba7c5cb Mon Sep 17 00:00:00 2001 From: ovoxiix Date: Tue, 16 Jan 2024 21:51:44 +0900 Subject: [PATCH 14/60] =?UTF-8?q?refactor:=20InputAccordion=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20props=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Register/common/InputAccordion/index.tsx | 4 ++-- src/types/register.ts | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/Register/common/InputAccordion/index.tsx b/src/components/Register/common/InputAccordion/index.tsx index 6f150aae..bae96620 100644 --- a/src/components/Register/common/InputAccordion/index.tsx +++ b/src/components/Register/common/InputAccordion/index.tsx @@ -4,7 +4,7 @@ import styled from '@emotion/styled'; import { InputAccordionProps, ButtonStyleProps } from '@/types/register'; import toggle from '@assets/icons/ic-register-toggle.svg'; -const InputAccordion = ({ title, content }: InputAccordionProps) => { +const InputAccordion = ({ title, children }: InputAccordionProps) => { const [isOpen, setIsOpen] = useState(false); const contentWrapperRef = useRef(null); @@ -32,7 +32,7 @@ const InputAccordion = ({ title, content }: InputAccordionProps) => { /> - {content} + {children} ); diff --git a/src/types/register.ts b/src/types/register.ts index 1778b5e6..2feb0a6d 100644 --- a/src/types/register.ts +++ b/src/types/register.ts @@ -20,7 +20,7 @@ export type InputButtonProps = { // InputAccordion export type InputAccordionProps = { title: string; - content: JSX.Element; + children: ReactNode; }; export type ButtonStyleProps = { From d47b37b6a9ee4c2238a384d026fb7150f37c6b04 Mon Sep 17 00:00:00 2001 From: ovoxiix Date: Wed, 17 Jan 2024 18:35:21 +0900 Subject: [PATCH 15/60] =?UTF-8?q?design:=20=EA=B3=B5=ED=86=B5=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20InputRadio=20=EB=A7=88=ED=81=AC?= =?UTF-8?q?=EC=97=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/icons/ic-register-selected.svg | 6 ++ src/assets/icons/ic-register-unselected.svg | 5 ++ .../Register/common/InputRadio/index.tsx | 81 +++++++++++++++++++ src/components/Register/common/index.tsx | 1 + src/types/register.ts | 12 +++ 5 files changed, 105 insertions(+) create mode 100644 src/assets/icons/ic-register-selected.svg create mode 100644 src/assets/icons/ic-register-unselected.svg create mode 100644 src/components/Register/common/InputRadio/index.tsx diff --git a/src/assets/icons/ic-register-selected.svg b/src/assets/icons/ic-register-selected.svg new file mode 100644 index 00000000..dd4f7943 --- /dev/null +++ b/src/assets/icons/ic-register-selected.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/assets/icons/ic-register-unselected.svg b/src/assets/icons/ic-register-unselected.svg new file mode 100644 index 00000000..527e45d5 --- /dev/null +++ b/src/assets/icons/ic-register-unselected.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/components/Register/common/InputRadio/index.tsx b/src/components/Register/common/InputRadio/index.tsx new file mode 100644 index 00000000..a106dc37 --- /dev/null +++ b/src/components/Register/common/InputRadio/index.tsx @@ -0,0 +1,81 @@ +import styled from '@emotion/styled'; + +import theme from '@styles/theme'; +import { InputRadioProps, InputRadioStyleProps } from '@/types/register'; +import selected from '@assets/icons/ic-register-selected.svg'; +import unselected from '@assets/icons/ic-register-unselected.svg'; + +const InputRadio = ({ id, name, text, children }: InputRadioProps) => { + return ( + + + + {children && ( + {children} + )} + + ); +}; + +export default InputRadio; + +const RadioWrapper = styled.div``; + +const Radio = styled.input` + display: none; + + &:checked + label { + color: ${theme.colors.hover}; + } + + &:checked + label .icon { + background: url(${props => props.$src}); + } + + &:checked ~ .children { + display: block; + } +`; + +const Label = styled.label` + display: inline-block; + + color: #757676; + font-size: 15px; + + cursor: pointer; +`; + +const ContentWrapper = styled.div` + display: flex; + align-items: center; +`; + +const SelectIcon = styled.div` + width: 24px; + height: 24px; + + margin-right: 5px; + + background: url(${props => props.$src}); +`; + +const ChildrenWrapper = styled.div` + margin-top: 6px; + padding-left: 29px; + + display: none; +`; diff --git a/src/components/Register/common/index.tsx b/src/components/Register/common/index.tsx index 3eb1ceee..7d4208e4 100644 --- a/src/components/Register/common/index.tsx +++ b/src/components/Register/common/index.tsx @@ -3,4 +3,5 @@ export { default as InputButton } from './InputButton'; export { default as InputAccordion } from './InputAccordion'; export { default as InputField } from './InputField'; export { default as InputCheckBox } from './InputCheckBox'; +export { default as InputRadio } from './InputRadio'; export { default as InputWrapper } from './InputWrapper'; diff --git a/src/types/register.ts b/src/types/register.ts index 2feb0a6d..b409a67e 100644 --- a/src/types/register.ts +++ b/src/types/register.ts @@ -54,6 +54,18 @@ export type CheckIconStyleProps = { $src: string; }; +// InputRadio +export type InputRadioProps = { + id: string; + name: string; + text: string; + children?: ReactNode; +}; + +export type InputRadioStyleProps = { + $src: string; +}; + // InputWrapper export type InputWrapperProps = { whichInput: number; From 14cf1d0aedf70daae2173628790ef746636e2f5f Mon Sep 17 00:00:00 2001 From: ovoxiix Date: Wed, 17 Jan 2024 18:36:17 +0900 Subject: [PATCH 16/60] =?UTF-8?q?design:=20Radio,=20RadioGroup=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EB=A7=88=ED=81=AC=EC=97=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ThirdStep/RadioGroup/Radio/index.tsx | 49 +++++++++++++++++ .../Steps/ThirdStep/RadioGroup/index.tsx | 52 +++++++++++++++++++ src/types/register.ts | 7 +++ 3 files changed, 108 insertions(+) create mode 100644 src/components/Register/Steps/ThirdStep/RadioGroup/Radio/index.tsx create mode 100644 src/components/Register/Steps/ThirdStep/RadioGroup/index.tsx diff --git a/src/components/Register/Steps/ThirdStep/RadioGroup/Radio/index.tsx b/src/components/Register/Steps/ThirdStep/RadioGroup/Radio/index.tsx new file mode 100644 index 00000000..f45c427b --- /dev/null +++ b/src/components/Register/Steps/ThirdStep/RadioGroup/Radio/index.tsx @@ -0,0 +1,49 @@ +import styled from '@emotion/styled'; + +import theme from '@styles/theme'; +import { RadioProps } from '@/types/register'; + +const Radio = ({ id, name, text }: RadioProps) => { + return ( + <> + + + + ); +}; + +export default Radio; + +const RadioButton = styled.input` + display: none; + + &:checked + label { + border: none; + + color: #fff; + + background-color: ${theme.colors.hover}; + } +`; + +const Label = styled.label` + width: 32px; + height: 32px; + + border-radius: 5px; + border: 1px solid #979c9e; + + display: flex; + justify-content: center; + align-items: center; + + color: #979c9e; + font-size: 12px; + font-weight: 400; + + cursor: pointer; +`; diff --git a/src/components/Register/Steps/ThirdStep/RadioGroup/index.tsx b/src/components/Register/Steps/ThirdStep/RadioGroup/index.tsx new file mode 100644 index 00000000..4614f476 --- /dev/null +++ b/src/components/Register/Steps/ThirdStep/RadioGroup/index.tsx @@ -0,0 +1,52 @@ +import styled from '@emotion/styled'; + +import Radio from './Radio'; + +const RadioGroup = () => { + return ( + + + + + + + + + + ); +}; + +export default RadioGroup; + +const Container = styled.div` + display: flex; + gap: 8px; +`; diff --git a/src/types/register.ts b/src/types/register.ts index b409a67e..27868821 100644 --- a/src/types/register.ts +++ b/src/types/register.ts @@ -120,3 +120,10 @@ export type LimitWrapperStyleProps = { export type RoomListProps = { list: string[]; }; + +// RadioProps +export type RadioProps = { + id: string; + name: string; + text: string; +}; From 2e4738cb99d69d92928fe2e504d18e793461788c Mon Sep 17 00:00:00 2001 From: ovoxiix Date: Wed, 17 Jan 2024 18:37:43 +0900 Subject: [PATCH 17/60] =?UTF-8?q?design:=20=EC=A1=B0=EA=B1=B4=20=EC=84=A0?= =?UTF-8?q?=ED=83=9D=20=EB=8B=A8=EA=B3=84=20=EC=B6=94=EA=B0=80=20=EB=A7=88?= =?UTF-8?q?=ED=81=AC=EC=97=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Register/Steps/ThirdStep/index.tsx | 76 ++++++++++++++++--- 1 file changed, 66 insertions(+), 10 deletions(-) diff --git a/src/components/Register/Steps/ThirdStep/index.tsx b/src/components/Register/Steps/ThirdStep/index.tsx index 9b7d66e8..348edafb 100644 --- a/src/components/Register/Steps/ThirdStep/index.tsx +++ b/src/components/Register/Steps/ThirdStep/index.tsx @@ -1,20 +1,76 @@ -import { InputAccordion } from '@components/Register/common'; +import styled from '@emotion/styled'; + +import theme from '@styles/theme'; +import { + InputAccordion, + InputField, + InputRadio +} from '@components/Register/common'; +import RadioGroup from './RadioGroup'; const ThirdStep = () => { - const temp =
temp
; + const handleInput = (e: React.FormEvent) => { + const inputValue = e.currentTarget.value; + const filteredValue = inputValue.replace(/[^0-9]/g, ''); + + if (inputValue !== filteredValue) { + e.currentTarget.value = filteredValue; + } + }; return ( <> - - + + + + 이상 예약 시 사용 가능 + + + + + + + + + + + ); }; export default ThirdStep; + +const ContentWrapper = styled.div` + display: flex; + align-items: center; +`; + +const Text = styled.span` + color: ${theme.colors.hover}; + font-size: 15px; +`; + +const RadioWrapper = styled.div` + height: 145px; + + display: flex; + flex-direction: column; + gap: 17px; +`; From 48a83975232abed66360e32b1750f3ec9cb3603f Mon Sep 17 00:00:00 2001 From: ovoxiix Date: Wed, 17 Jan 2024 18:38:06 +0900 Subject: [PATCH 18/60] =?UTF-8?q?design:=20InputAccordion=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20css=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Register/common/InputAccordion/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Register/common/InputAccordion/index.tsx b/src/components/Register/common/InputAccordion/index.tsx index bae96620..c4e3e347 100644 --- a/src/components/Register/common/InputAccordion/index.tsx +++ b/src/components/Register/common/InputAccordion/index.tsx @@ -91,5 +91,5 @@ const ContentWrapper = styled.div` `; const Content = styled.div` - padding: 24px 0px 6px; + padding-top: 20px; `; From 677edb19b0eec459fd2d75ee91bb3f94080ea7c4 Mon Sep 17 00:00:00 2001 From: ovoxiix Date: Wed, 17 Jan 2024 18:39:29 +0900 Subject: [PATCH 19/60] =?UTF-8?q?refactor:=20=EB=B6=88=ED=95=84=EC=9A=94?= =?UTF-8?q?=ED=95=9C=20css=20=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Register/StepperController/index.tsx | 16 ++++------------ .../Register/common/InputButton/index.tsx | 8 -------- 2 files changed, 4 insertions(+), 20 deletions(-) diff --git a/src/components/Register/StepperController/index.tsx b/src/components/Register/StepperController/index.tsx index 5cde9913..d6e4b249 100644 --- a/src/components/Register/StepperController/index.tsx +++ b/src/components/Register/StepperController/index.tsx @@ -19,23 +19,15 @@ const StepperController = ({ }; return ( - - - 이전 - 다음 - - + + 이전 + 다음 + ); }; export default StepperController; -const ControllerContainer = styled.div` - display: grid; - grid-column: 2 / 3; - grid-row: 3 / 4; -`; - const InnerControllerContainer = styled.div` display: flex; justify-content: flex-end; diff --git a/src/components/Register/common/InputButton/index.tsx b/src/components/Register/common/InputButton/index.tsx index df162ea6..e50d0007 100644 --- a/src/components/Register/common/InputButton/index.tsx +++ b/src/components/Register/common/InputButton/index.tsx @@ -51,10 +51,6 @@ const Input = styled.input` background-color: ${theme.colors.hover}; } - - &:checked + label + div { - display: block; - } `; const Button = styled.label` @@ -72,8 +68,4 @@ const Button = styled.label` font-size: 15px; cursor: pointer; - - &:has(input:checked) { - background-color: ${theme.colors.hover}; - } `; From 86356f78fa032b928abf43cbe00c6e0c147babbb Mon Sep 17 00:00:00 2001 From: ovoxiix Date: Thu, 18 Jan 2024 02:45:16 +0900 Subject: [PATCH 20/60] =?UTF-8?q?feat:=20=EA=B3=B5=ED=86=B5=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20Backdrop=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common/Backdrop/index.tsx | 47 ++++++++++++++++++++++++ src/components/common/index.tsx | 1 + src/types/register.ts | 9 ++++- 3 files changed, 56 insertions(+), 1 deletion(-) create mode 100644 src/components/common/Backdrop/index.tsx diff --git a/src/components/common/Backdrop/index.tsx b/src/components/common/Backdrop/index.tsx new file mode 100644 index 00000000..d27f3d0a --- /dev/null +++ b/src/components/common/Backdrop/index.tsx @@ -0,0 +1,47 @@ +import { useEffect } from 'react'; +import styled from '@emotion/styled'; + +import { BackdropProps } from '@/types/register'; + +const Backdrop = ({ + backdropRef, + onBackdropClick, + children +}: BackdropProps) => { + useEffect(() => { + document.body.style.overflow = 'hidden'; + return () => { + document.body.style.overflow = 'unset'; + }; + }, []); + + const handleBackdropClick = (e: React.MouseEvent) => { + onBackdropClick(e); + }; + + return ( + + {children} + + ); +}; + +export default Backdrop; + +const Container = styled.div` + position: fixed; + + width: 100vw; + height: 100vh; + + display: flex; + justify-content: center; + align-items: center; + + background: rgba(66, 66, 66, 0.5); + + z-index: 110; +`; diff --git a/src/components/common/index.tsx b/src/components/common/index.tsx index 51b9f107..992e2261 100644 --- a/src/components/common/index.tsx +++ b/src/components/common/index.tsx @@ -1,2 +1,3 @@ export { default as Layout } from './Layout'; export { default as DashboardHeader } from './DashboardHeader'; +export { default as Backdrop } from './Backdrop'; diff --git a/src/types/register.ts b/src/types/register.ts index 27868821..e0ce13b1 100644 --- a/src/types/register.ts +++ b/src/types/register.ts @@ -1,4 +1,11 @@ -import { ReactNode } from 'react'; +import { ReactNode, RefObject } from 'react'; + +// Backdrop +export type BackdropProps = { + backdropRef: RefObject; + onBackdropClick: (e: React.MouseEvent) => void; + children: ReactNode; +}; // InputContainer export type InputContainerProps = { From 5496a9981072b696142e43c83b59340bbc9d31a2 Mon Sep 17 00:00:00 2001 From: ovoxiix Date: Thu, 18 Jan 2024 05:50:23 +0900 Subject: [PATCH 21/60] =?UTF-8?q?feat:=20RoomModal=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/icons/ic-register-close.svg | 6 + .../icons/ic-register-filter-checked.svg | 63 ++++ .../icons/ic-register-filter-unchecked.svg | 6 + .../Steps/SecondStep/RoomModal/index.tsx | 276 ++++++++++++++++++ src/types/register.ts | 13 + 5 files changed, 364 insertions(+) create mode 100644 src/assets/icons/ic-register-close.svg create mode 100644 src/assets/icons/ic-register-filter-checked.svg create mode 100644 src/assets/icons/ic-register-filter-unchecked.svg create mode 100644 src/components/Register/Steps/SecondStep/RoomModal/index.tsx diff --git a/src/assets/icons/ic-register-close.svg b/src/assets/icons/ic-register-close.svg new file mode 100644 index 00000000..4f01ed96 --- /dev/null +++ b/src/assets/icons/ic-register-close.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/assets/icons/ic-register-filter-checked.svg b/src/assets/icons/ic-register-filter-checked.svg new file mode 100644 index 00000000..1f7bff32 --- /dev/null +++ b/src/assets/icons/ic-register-filter-checked.svg @@ -0,0 +1,63 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/icons/ic-register-filter-unchecked.svg b/src/assets/icons/ic-register-filter-unchecked.svg new file mode 100644 index 00000000..f3e0e132 --- /dev/null +++ b/src/assets/icons/ic-register-filter-unchecked.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/components/Register/Steps/SecondStep/RoomModal/index.tsx b/src/components/Register/Steps/SecondStep/RoomModal/index.tsx new file mode 100644 index 00000000..3936f753 --- /dev/null +++ b/src/components/Register/Steps/SecondStep/RoomModal/index.tsx @@ -0,0 +1,276 @@ +import { useState, useRef } from 'react'; +import styled from '@emotion/styled'; + +import { Backdrop } from '@components/common'; +import { + RoomModalProps, + RoomModalStyleProps, + RoomModalButtonStyleProps +} from '@/types/register'; +import close from '@assets/icons/ic-register-close.svg'; +import filterChecked from '@assets/icons/ic-register-filter-checked.svg'; +import filterUnchecked from '@assets/icons/ic-register-filter-unchecked.svg'; +import listChecked from '@assets/icons/ic-register-checked.svg'; +import listUnchecked from '@assets/icons/ic-register-unchecked.svg'; + +const list = [ + { + id: 12, + roomNumber: 101, + roomType: '트윈베드룸', + price: 10000 + }, + { + id: 13, + roomNumber: 102, + roomType: '싱글베드룸', + price: 20000 + } +]; + +const RoomModal = ({ onButtonClick }: RoomModalProps) => { + const backdropRef = useRef(null); + const [selectedRooms, setSelectedRooms] = useState([]); + + const handleClose = () => { + onButtonClick(false); + }; + + const handleApply = () => { + onButtonClick(false); + }; + + const handleBackdropClick = (e: React.MouseEvent) => { + if (e.target === backdropRef.current) { + onButtonClick(false); + } + }; + + const handleSelectAll = (e: React.ChangeEvent) => { + if (e.target.checked) { + const entireList: string[] = []; + list.forEach(room => { + entireList.push(room.roomType); + }); + setSelectedRooms(entireList); + } else { + setSelectedRooms([]); + } + }; + + const handleSelectOne = ( + e: React.ChangeEvent, + roomType: string + ) => { + if (e.target.checked) { + setSelectedRooms(prev => [...prev, roomType]); + } else { + setSelectedRooms(selectedRooms.filter(room => room !== roomType)); + } + }; + + return ( + + +
+ 적용 객실 설정 + +
+ + + + + 객실명 + 객실 금액 + + + {list.map((room, index) => { + return ( + + + + + {room.roomType} + {room.price.toLocaleString()}원 + + ); + })} + +
+ +
+ + + ); +}; + +export default RoomModal; + +const Container = styled.div` + width: 378px; + height: 744px; + + background-color: #fff; + border-radius: 20px; + box-shadow: + 0px 17px 22px 0px rgba(0, 0, 0, 0.05), + -0.73px 0.73px 0.73px -1.46px rgba(255, 255, 255, 0.35) inset; +`; + +const Header = styled.div` + height: 63px; + + padding: 0px 20px; + + display: flex; + justify-content: space-between; + align-items: center; + + font-size: 18px; +`; + +const CloseButton = styled.button` + width: 43px; + height: 43px; + + border: none; + + background: url(${props => props.$src}); + + cursor: pointer; +`; + +const Filter = styled.div` + height: 63px; + + background: linear-gradient( + 122deg, + #111f3f 37.38%, + rgba(26, 40, 73, 0.75) 87.92% + ); + + display: grid; + grid-template-columns: 1fr 2fr 2fr; +`; + +const FilterCell = styled.div` + color: #fff; + font-size: 15px; + + display: flex; + justify-content: center; + align-items: center; +`; + +const SelectAll = styled.input` + display: none; + + &:checked + div { + background: url(${props => props.$src}) no-repeat; + } +`; + +const FilterCheckIcon = styled.div` + width: 21px; + height: 21px; + + background: url(${props => props.$src}) no-repeat; +`; + +const ContentWrapper = styled.div` + height: 512px; + + display: flex; + flex-direction: column; + + box-shadow: + 0px 17px 22px 0px rgba(0, 0, 0, 0.05), + -0.73px 0.73px 0.73px -1.46px rgba(255, 255, 255, 0.35) inset; + + overflow: auto; +`; + +const List = styled.div` + height: 42px; + + display: grid; + grid-template-columns: 1fr 2fr 2fr; +`; + +const ListCell = styled.div` + font-size: 15px; + font-weight: 400; + + display: flex; + justify-content: center; + align-items: center; +`; + +const SelectOne = styled.input` + display: none; + + &:checked + div { + background: url(${props => props.$src}) no-repeat; + } +`; + +const ListCheckIcon = styled.div` + width: 21px; + height: 21px; + + background: url(${props => props.$src}) no-repeat; +`; + +const Footer = styled.div` + height: 106px; + + display: flex; + justify-content: center; + align-items: center; +`; + +const Button = styled.button` + width: 170px; + height: 44px; + + padding: 13px 16px; + border: none; + border-radius: 8px; + + color: #fff; + font-size: 18px; + font-weight: 700; + + background: ${props => (props.$length ? '#022C79' : '#cdcfd0')}; + + cursor: pointer; +`; diff --git a/src/types/register.ts b/src/types/register.ts index e0ce13b1..7a13a005 100644 --- a/src/types/register.ts +++ b/src/types/register.ts @@ -123,6 +123,19 @@ export type LimitWrapperStyleProps = { $isLimited: boolean; }; +// RoomModal +export type RoomModalProps = { + onButtonClick: React.Dispatch>; +}; + +export type RoomModalStyleProps = { + $src: string; +}; + +export type RoomModalButtonStyleProps = { + $length: number; +}; + // RoomList export type RoomListProps = { list: string[]; From 7f7651199c13a57055a86609e53a87c257b19a31 Mon Sep 17 00:00:00 2001 From: ovoxiix Date: Fri, 19 Jan 2024 04:08:30 +0900 Subject: [PATCH 22/60] =?UTF-8?q?design:=20RoolSelectButton=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EB=A7=88=ED=81=AC=EC=97=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../SecondStep/RoomSelectButton/index.tsx | 63 +++++++++++++++++++ src/types/register.ts | 9 +++ 2 files changed, 72 insertions(+) create mode 100644 src/components/Register/Steps/SecondStep/RoomSelectButton/index.tsx diff --git a/src/components/Register/Steps/SecondStep/RoomSelectButton/index.tsx b/src/components/Register/Steps/SecondStep/RoomSelectButton/index.tsx new file mode 100644 index 00000000..5b695418 --- /dev/null +++ b/src/components/Register/Steps/SecondStep/RoomSelectButton/index.tsx @@ -0,0 +1,63 @@ +import styled from '@emotion/styled'; + +import theme from '@styles/theme'; +import { RoomSelectButtonProps } from '@/types/register'; + +const RoomSelectButton = ({ + type, + id, + name, + buttonName, + onButtonClick +}: RoomSelectButtonProps) => { + const handleModal = () => { + onButtonClick(true); + }; + + return ( + <> + + + + ); +}; + +export default RoomSelectButton; + +const Input = styled.input` + display: none; + + &:checked + label { + border: none; + + color: #fff; + + background-color: ${theme.colors.hover}; + } +`; + +const Button = styled.label` + width: 111px; + height: 40px; + + border: 1px solid #979c9e; + border-radius: 5px; + + display: flex; + justify-content: center; + align-items: center; + + color: #979c9e; + font-size: 15px; + + cursor: pointer; +`; diff --git a/src/types/register.ts b/src/types/register.ts index 7a13a005..e4142d61 100644 --- a/src/types/register.ts +++ b/src/types/register.ts @@ -136,6 +136,15 @@ export type RoomModalButtonStyleProps = { $length: number; }; +// RoomSelectButton +export type RoomSelectButtonProps = { + type: string; + id: string; + name: string; + buttonName: string; + onButtonClick: React.Dispatch>; +}; + // RoomList export type RoomListProps = { list: string[]; From 44d2fad54931f4a5843bf6a2bfa623f8f76d8019 Mon Sep 17 00:00:00 2001 From: ovoxiix Date: Fri, 19 Jan 2024 06:31:48 +0900 Subject: [PATCH 23/60] =?UTF-8?q?feat:=20=EC=84=A0=ED=83=9D=20=EA=B0=9D?= =?UTF-8?q?=EC=8B=A4=20=EB=B2=84=ED=8A=BC=EC=97=90=20RoomModal=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=97=B0=EB=8F=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 1 + .../Steps/SecondStep/RoomModal/index.tsx | 20 ++++++++--- .../SecondStep/RoomSelectButton/index.tsx | 2 ++ .../Register/Steps/SecondStep/index.tsx | 36 +++++++++++-------- .../Register/common/InputWrapper/index.tsx | 3 ++ src/types/register.ts | 6 ++++ 6 files changed, 49 insertions(+), 19 deletions(-) diff --git a/index.html b/index.html index 986c9923..a349936f 100644 --- a/index.html +++ b/index.html @@ -9,6 +9,7 @@ 쿨피스 +