From 609f6bf8050a0b3d52ed9b00a3d9719d7382ecce Mon Sep 17 00:00:00 2001 From: ovoxiix Date: Wed, 10 Jan 2024 20:24:32 +0900 Subject: [PATCH 01/50] =?UTF-8?q?design:=20=EC=BF=A0=ED=8F=B0=20=EB=93=B1?= =?UTF-8?q?=EB=A1=9D=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EB=A0=88=EC=9D=B4?= =?UTF-8?q?=EC=95=84=EC=9B=83=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/pages/Register/index.tsx | 71 +++++++++++++++++++++++++++++++++ src/routes/MainRouter/index.tsx | 15 +------ 2 files changed, 73 insertions(+), 13 deletions(-) create mode 100644 src/pages/Register/index.tsx diff --git a/src/pages/Register/index.tsx b/src/pages/Register/index.tsx new file mode 100644 index 00000000..d6468fb8 --- /dev/null +++ b/src/pages/Register/index.tsx @@ -0,0 +1,71 @@ +import styled from '@emotion/styled'; + +const Register = () => { + return ( + + + + 신규 쿠폰 등록하기 + + + + ); +}; + +export default Register; + +const Background = styled.div` + width: 100%; + height: 100%; + + padding: 2.5%; + border-radius: 20px; + + background: linear-gradient( + 115deg, + #fff 0%, + rgba(163, 191, 255, 0.1) 49.57%, + #fff 100% + ); +`; + +const Container = styled.div` + width: 100%; + height: 100%; + + border-radius: 0px 60px; + + background: rgba(255, 255, 255, 0.8); + box-shadow: + 0px 17.525px 21.907px 0px rgba(0, 0, 0, 0.05), + -0.73px 0.73px 0.73px -1.46px rgba(255, 255, 255, 0.35) inset; + backdrop-filter: blur(71px); +`; + +const TitleWrapper = styled.div` + width: 100%; + height: 25%; + + padding: 27px 54px; + + display: flex; + flex-direction: column; + justify-content: space-between; + + border-radius: 0px 60px; + background: rgba(255, 255, 255, 0.9); + box-shadow: + 0px 17.525px 21.907px 0px rgba(0, 0, 0, 0.05), + -0.73px 0.73px 0.73px -1.46px rgba(255, 255, 255, 0.35) inset; + backdrop-filter: blur(71px); +`; + +// FIXME: 폰트 적용 후 수정 필요 +const Title = styled.span` + font-family: Noto Sans KR; + font-size: 26px; + font-style: normal; + font-weight: 700; + line-height: 31.062px; /* 119.468% */ + letter-spacing: -0.78px; +`; diff --git a/src/routes/MainRouter/index.tsx b/src/routes/MainRouter/index.tsx index 2c6ef1c8..cfd87df9 100644 --- a/src/routes/MainRouter/index.tsx +++ b/src/routes/MainRouter/index.tsx @@ -1,5 +1,6 @@ import { Route, Routes } from 'react-router-dom'; import { Layout } from '@components/common'; +import Register from '@pages/Register'; const MainRouter = () => { return ( @@ -51,19 +52,7 @@ const MainRouter = () => { /> - 🧃 쿠폰 등록 페이지 입주 예정 🧃 - - } + element={} /> Date: Thu, 11 Jan 2024 21:05:07 +0900 Subject: [PATCH 02/50] =?UTF-8?q?design:=20=ED=8F=B0=ED=8A=B8=20=EC=A0=81?= =?UTF-8?q?=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/Register/index.tsx | 5 +---- src/styles/GlobalStyle.tsx | 6 ++++++ 2 files changed, 7 insertions(+), 4 deletions(-) diff --git a/src/pages/Register/index.tsx b/src/pages/Register/index.tsx index d6468fb8..5d125ba1 100644 --- a/src/pages/Register/index.tsx +++ b/src/pages/Register/index.tsx @@ -60,12 +60,9 @@ const TitleWrapper = styled.div` backdrop-filter: blur(71px); `; -// FIXME: 폰트 적용 후 수정 필요 const Title = styled.span` - font-family: Noto Sans KR; font-size: 26px; - font-style: normal; font-weight: 700; - line-height: 31.062px; /* 119.468% */ + line-height: 31px; letter-spacing: -0.78px; `; diff --git a/src/styles/GlobalStyle.tsx b/src/styles/GlobalStyle.tsx index 431bc147..9f0ed483 100644 --- a/src/styles/GlobalStyle.tsx +++ b/src/styles/GlobalStyle.tsx @@ -141,6 +141,7 @@ const resetCSS = css` #root { color: ${theme.colors.black}; background: ${theme.colors.background}; + font-family: 'Noto Sans KR'; } *, @@ -148,4 +149,9 @@ const resetCSS = css` *::after { box-sizing: border-box; } + + @font-face { + font-family: 'Noto Sans KR'; + src: url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@500;700&display=swap'); + } `; From d858357df18e286a23f22c82daa298b35c92b8ea Mon Sep 17 00:00:00 2001 From: ovoxiix Date: Thu, 11 Jan 2024 21:07:13 +0900 Subject: [PATCH 03/50] =?UTF-8?q?rename:=20`GlobalStyle`=20=ED=8C=8C?= =?UTF-8?q?=EC=9D=BC=20=EC=9D=B4=EB=A6=84=20`GlobalStyles`=EB=A1=9C=20?= =?UTF-8?q?=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.tsx | 4 ++-- src/styles/{GlobalStyle.tsx => GlobalStyles.tsx} | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) rename src/styles/{GlobalStyle.tsx => GlobalStyles.tsx} (96%) diff --git a/src/App.tsx b/src/App.tsx index 1e1181b4..c6dbafb2 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,4 +1,4 @@ -import GlobalStyle from '@styles/GlobalStyle'; +import GlobalStyles from '@styles/GlobalStyles'; import { ThemeProvider } from '@emotion/react'; import theme from '@styles/theme'; import { BrowserRouter } from 'react-router-dom'; @@ -7,7 +7,7 @@ import { MainRouter } from './routes'; const App = () => { return ( <> - + diff --git a/src/styles/GlobalStyle.tsx b/src/styles/GlobalStyles.tsx similarity index 96% rename from src/styles/GlobalStyle.tsx rename to src/styles/GlobalStyles.tsx index 9f0ed483..824d1a5c 100644 --- a/src/styles/GlobalStyle.tsx +++ b/src/styles/GlobalStyles.tsx @@ -1,11 +1,11 @@ import { css, Global } from '@emotion/react'; import theme from './theme'; -const GlobalStyle = () => { +const GlobalStyles = () => { return ; }; -export default GlobalStyle; +export default GlobalStyles; const resetCSS = css` html, From 0f26182a5a7100f9bf3742dfd15334209d71c96e Mon Sep 17 00:00:00 2001 From: ovoxiix Date: Thu, 11 Jan 2024 23:18:05 +0900 Subject: [PATCH 04/50] =?UTF-8?q?fix:=20path=20alias=EC=97=90=EC=84=9C=20t?= =?UTF-8?q?ypes=20=EA=B2=BD=EB=A1=9C=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- tsconfig.paths.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tsconfig.paths.json b/tsconfig.paths.json index c1fd4d2e..2b7c97d6 100644 --- a/tsconfig.paths.json +++ b/tsconfig.paths.json @@ -7,7 +7,7 @@ "@hooks/*": ["src/hooks/*"], "@pages/*": ["src/pages/*"], "@styles/*": ["src/styles/*"], - "@types/*": ["src/types/*"], + "@/types/*": ["src/types/*"], "@utils/*": ["src/utils/*"], "@api/*": ["src/utils/api/*"], "@constants/*": ["src/utils/constants/*"], From a0bff5d44fd1992a3c0b583869b6c44ecb650b24 Mon Sep 17 00:00:00 2001 From: ovoxiix Date: Thu, 11 Jan 2024 23:20:40 +0900 Subject: [PATCH 05/50] =?UTF-8?q?feat:=20=EC=8A=A4=ED=85=9D=ED=8D=BC=20?= =?UTF-8?q?=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-check.svg | 5 + src/components/Register/Stepper/index.tsx | 128 ++++++++++++++++++ .../Register/StepperController/index.tsx | 60 ++++++++ .../Register/Steps/FirstStep/index.tsx | 5 + .../Register/Steps/FourthStep/index.tsx | 5 + .../Register/Steps/SecondStep/index.tsx | 5 + .../Register/Steps/ThirdStep/index.tsx | 5 + src/components/Register/Steps/index.tsx | 4 + src/components/Register/index.tsx | 2 + src/pages/Register/index.tsx | 37 ++++- src/types/register.ts | 16 +++ 11 files changed, 271 insertions(+), 1 deletion(-) create mode 100644 src/assets/icons/ic-register-check.svg create mode 100644 src/components/Register/Stepper/index.tsx create mode 100644 src/components/Register/StepperController/index.tsx create mode 100644 src/components/Register/Steps/FirstStep/index.tsx create mode 100644 src/components/Register/Steps/FourthStep/index.tsx create mode 100644 src/components/Register/Steps/SecondStep/index.tsx create mode 100644 src/components/Register/Steps/ThirdStep/index.tsx create mode 100644 src/components/Register/Steps/index.tsx create mode 100644 src/components/Register/index.tsx create mode 100644 src/types/register.ts diff --git a/src/assets/icons/ic-register-check.svg b/src/assets/icons/ic-register-check.svg new file mode 100644 index 00000000..078a068e --- /dev/null +++ b/src/assets/icons/ic-register-check.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/components/Register/Stepper/index.tsx b/src/components/Register/Stepper/index.tsx new file mode 100644 index 00000000..f48471f2 --- /dev/null +++ b/src/components/Register/Stepper/index.tsx @@ -0,0 +1,128 @@ +import styled from '@emotion/styled'; +import theme from '@styles/theme'; + +import { StepperProps, NumberProps, LineProps } from '@/types/register'; +import checkMark from '@assets/icons/ic-register-check.svg'; + +const Stepper = ({ currentStep }: StepperProps) => { + const steps = [ + { + title: '정보 입력', + isCurrent: false, + isCompleted: false + }, + { + title: '유형 선택', + isCurrent: false, + isCompleted: false + }, + { + title: '조건 선택', + isCurrent: false, + isCompleted: false + }, + { + title: '노출 기간 선택', + isCurrent: false, + isCompleted: false + } + ]; + + return ( + + {steps.map((step, index) => { + return ( + + + {index + 1} + + + {step.title} + + ··· + + ); + })} + + ); +}; + +export default Stepper; + +const StepperContainer = styled.div` + display: flex; + align-items: center; +`; + +const Step = styled.div` + display: flex; + align-items: center; +`; + +const Number = styled.div` + width: 35px; + height: 35px; + + margin-right: 10px; + padding-top: 3px; + border: 3px solid ${theme.colors.hover}; + border-radius: 50%; + + display: flex; + justify-content: center; + align-items: center; + + color: ${theme.colors.hover}; + font-weight: 700; + line-height: 100%; + letter-spacing: 0.5px; + + &.completed { + background: url(${props => props.src}) center; + + & > span { + display: none; + } + } + + &.disabled { + border: 3px solid #979c9e; + + & > span { + color: #979c9e; + } + } +`; + +const Description = styled.div` + color: ${theme.colors.ink600}; + font-size: 22px; + font-weight: 700; + line-height: 26.148px; + letter-spacing: -0.7px; + + &.disabled { + color: #979c9e; + } +`; + +const Line = styled.div` + margin: 0px 40px; + + display: ${props => (props.$isLastStep === 3 ? 'none' : 'block')}; +`; diff --git a/src/components/Register/StepperController/index.tsx b/src/components/Register/StepperController/index.tsx new file mode 100644 index 00000000..d43eaa19 --- /dev/null +++ b/src/components/Register/StepperController/index.tsx @@ -0,0 +1,60 @@ +import styled from '@emotion/styled'; + +import { StepperControllerProps } from '@/types/register'; + +const StepperController = ({ + currentStep, + onButtonClick +}: StepperControllerProps) => { + const handlePreviousButton = () => { + if (currentStep > 0) { + onButtonClick(prev => prev - 1); + } + }; + + const handleNextButton = () => { + if (currentStep < 3) { + onButtonClick(prev => prev + 1); + } + }; + + return ( + + 이전 + 다음 + + ); +}; + +export default StepperController; + +const ButtonContainer = styled.div` + position: absolute; + bottom: 33px; + right: 65px; + + display: flex; + gap: 27px; +`; + +const ControllerButton = styled.button` + width: 63px; + height: 41px; + + padding: 13px 16px; + + display: flex; + justify-content: center; + align-items: center; + gap: 6px; + flex-shrink: 0; + + border: none; + border-radius: 8px; + background: #1a2849; + cursor: pointer; + + color: #fff; + font-size: 15px; + line-height: 25px; +`; diff --git a/src/components/Register/Steps/FirstStep/index.tsx b/src/components/Register/Steps/FirstStep/index.tsx new file mode 100644 index 00000000..483dedd5 --- /dev/null +++ b/src/components/Register/Steps/FirstStep/index.tsx @@ -0,0 +1,5 @@ +const FirstStep = () => { + return
FirstStep
; +}; + +export default FirstStep; diff --git a/src/components/Register/Steps/FourthStep/index.tsx b/src/components/Register/Steps/FourthStep/index.tsx new file mode 100644 index 00000000..3a5d8786 --- /dev/null +++ b/src/components/Register/Steps/FourthStep/index.tsx @@ -0,0 +1,5 @@ +const FourthStep = () => { + return
FourthStep
; +}; + +export default FourthStep; diff --git a/src/components/Register/Steps/SecondStep/index.tsx b/src/components/Register/Steps/SecondStep/index.tsx new file mode 100644 index 00000000..9b5f60fb --- /dev/null +++ b/src/components/Register/Steps/SecondStep/index.tsx @@ -0,0 +1,5 @@ +const SecondStep = () => { + return
SecondStep
; +}; + +export default SecondStep; diff --git a/src/components/Register/Steps/ThirdStep/index.tsx b/src/components/Register/Steps/ThirdStep/index.tsx new file mode 100644 index 00000000..e46a7f2e --- /dev/null +++ b/src/components/Register/Steps/ThirdStep/index.tsx @@ -0,0 +1,5 @@ +const ThirdStep = () => { + return
ThirdStep
; +}; + +export default ThirdStep; diff --git a/src/components/Register/Steps/index.tsx b/src/components/Register/Steps/index.tsx new file mode 100644 index 00000000..5f09ae91 --- /dev/null +++ b/src/components/Register/Steps/index.tsx @@ -0,0 +1,4 @@ +export { default as FirstStep } from './FirstStep'; +export { default as SecondStep } from './SecondStep'; +export { default as ThirdStep } from './ThirdStep'; +export { default as FourthStep } from './FourthStep'; diff --git a/src/components/Register/index.tsx b/src/components/Register/index.tsx new file mode 100644 index 00000000..5ac6f6ee --- /dev/null +++ b/src/components/Register/index.tsx @@ -0,0 +1,2 @@ +export { default as Stepper } from './Stepper'; +export { default as StepperController } from './StepperController'; diff --git a/src/pages/Register/index.tsx b/src/pages/Register/index.tsx index 5d125ba1..e88fde48 100644 --- a/src/pages/Register/index.tsx +++ b/src/pages/Register/index.tsx @@ -1,12 +1,44 @@ +import { useState } from 'react'; import styled from '@emotion/styled'; +import { Stepper, StepperController } from '@components/Register'; +import { + FirstStep, + SecondStep, + ThirdStep, + FourthStep +} from '@components/Register/Steps'; + const Register = () => { + const [currentStep, setCurrentStep] = useState(0); + + const displayStep = (currentStep: number) => { + switch (currentStep) { + case 0: + return ; + case 1: + return ; + case 2: + return ; + case 3: + return ; + default: + throw new Error(`Unsupported step: ${currentStep}`); + } + }; + return ( 신규 쿠폰 등록하기 + + {displayStep(currentStep)} + ); @@ -30,6 +62,8 @@ const Background = styled.div` `; const Container = styled.div` + position: relative; + width: 100%; height: 100%; @@ -50,7 +84,8 @@ const TitleWrapper = styled.div` display: flex; flex-direction: column; - justify-content: space-between; + justify-content: center; + gap: 25px; border-radius: 0px 60px; background: rgba(255, 255, 255, 0.9); diff --git a/src/types/register.ts b/src/types/register.ts new file mode 100644 index 00000000..569e5490 --- /dev/null +++ b/src/types/register.ts @@ -0,0 +1,16 @@ +export type StepperProps = { + currentStep: number; +}; + +export type StepperStyleProps = { + src: string; + $isLastStep: number; +}; + +export type NumberProps = Pick; +export type LineProps = Pick; + +export interface StepperControllerProps { + currentStep: number; + onButtonClick: React.Dispatch>; +} From 823af557d094c7b0ae138eaace668d4793bf1d28 Mon Sep 17 00:00:00 2001 From: ovoxiix Date: Fri, 12 Jan 2024 06:45:53 +0900 Subject: [PATCH 06/50] =?UTF-8?q?design:=20=EC=BF=A0=ED=8F=B0=20=EB=93=B1?= =?UTF-8?q?=EB=A1=9D=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EB=A0=88=EC=9D=B4?= =?UTF-8?q?=EC=95=84=EC=9B=83=20=EC=B6=94=EA=B0=80=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/components/Register/Preview/index.tsx | 16 ++++ src/components/Register/StepTitle/index.tsx | 69 ++++++++++++++ src/components/Register/Stepper/index.tsx | 27 +----- .../Register/StepperController/index.tsx | 16 ++-- src/components/Register/index.tsx | 2 + src/pages/Register/index.tsx | 90 +++++++++++++++++-- src/types/register.ts | 14 +++ 7 files changed, 195 insertions(+), 39 deletions(-) create mode 100644 src/components/Register/Preview/index.tsx create mode 100644 src/components/Register/StepTitle/index.tsx diff --git a/src/components/Register/Preview/index.tsx b/src/components/Register/Preview/index.tsx new file mode 100644 index 00000000..871bdc1e --- /dev/null +++ b/src/components/Register/Preview/index.tsx @@ -0,0 +1,16 @@ +import styled from '@emotion/styled'; + +const Preview = () => { + return Preview; +}; + +export default Preview; + +const PreviewContainer = styled.div` + width: 100%; + height: 100%; + + display: grid; + grid-column: 2 / 3; + grid-row: 2 / 3; +`; diff --git a/src/components/Register/StepTitle/index.tsx b/src/components/Register/StepTitle/index.tsx new file mode 100644 index 00000000..7c51d50c --- /dev/null +++ b/src/components/Register/StepTitle/index.tsx @@ -0,0 +1,69 @@ +import styled from '@emotion/styled'; +import theme from '@styles/theme'; + +import { StepTitleProps } from '@/types/register'; + +const StepTitle = ({ steps, currentStep }: StepTitleProps) => { + return ( + + + {`${currentStep + 1}. ${steps[currentStep].title}`} + {!currentStep && ( + 이전 쿠폰 정보 불러오기 + )} + {currentStep === 2 && ( + + 쿠폰에 대한 사용 조건을 설정해 주세요! (복수선택 가능) + + )} + + + ); +}; + +export default StepTitle; + +const StepTitleContainer = styled.div` + width: 100%; + height: 100%; + + display: grid; + + font-size: 26px; + font-weight: 700; + line-height: 31px; + letter-spacing: -0.78px; +`; + +const StepTitleWrapper = styled.div` + display: flex; + justify-content: space-between; +`; + +const PreviousCoupon = styled.button` + height: 23px; + + margin-top: 5px; + padding: 0px; + border: none; + + color: ${theme.colors.pink500}; + font-family: 'Noto Sans KR'; + font-size: 15px; + font-weight: 700; + text-decoration: underline; + text-underline-position: under; + + outline: none; + background-color: transparent; + cursor: pointer; +`; + +const Description = styled.span` + margin-top: 10px; + + color: #6c7072; + font-size: 13px; + font-weight: 700; + line-height: 150%; +`; diff --git a/src/components/Register/Stepper/index.tsx b/src/components/Register/Stepper/index.tsx index f48471f2..576661f7 100644 --- a/src/components/Register/Stepper/index.tsx +++ b/src/components/Register/Stepper/index.tsx @@ -4,30 +4,7 @@ import theme from '@styles/theme'; import { StepperProps, NumberProps, LineProps } from '@/types/register'; import checkMark from '@assets/icons/ic-register-check.svg'; -const Stepper = ({ currentStep }: StepperProps) => { - const steps = [ - { - title: '정보 입력', - isCurrent: false, - isCompleted: false - }, - { - title: '유형 선택', - isCurrent: false, - isCompleted: false - }, - { - title: '조건 선택', - isCurrent: false, - isCompleted: false - }, - { - title: '노출 기간 선택', - isCurrent: false, - isCompleted: false - } - ]; - +const Stepper = ({ steps, currentStep }: StepperProps) => { return ( {steps.map((step, index) => { @@ -79,7 +56,7 @@ const Number = styled.div` height: 35px; margin-right: 10px; - padding-top: 3px; + padding-bottom: 2px; border: 3px solid ${theme.colors.hover}; border-radius: 50%; diff --git a/src/components/Register/StepperController/index.tsx b/src/components/Register/StepperController/index.tsx index d43eaa19..15e53d39 100644 --- a/src/components/Register/StepperController/index.tsx +++ b/src/components/Register/StepperController/index.tsx @@ -20,8 +20,10 @@ const StepperController = ({ return ( - 이전 - 다음 + + 이전 + 다음 + ); }; @@ -29,11 +31,15 @@ const StepperController = ({ export default StepperController; const ButtonContainer = styled.div` - position: absolute; - bottom: 33px; - right: 65px; + display: grid; + grid-column: 2 / 3; + grid-row: 3 / 4; +`; +const InnerButtonContainer = styled.div` display: flex; + justify-content: flex-end; + align-items: flex-end; gap: 27px; `; diff --git a/src/components/Register/index.tsx b/src/components/Register/index.tsx index 5ac6f6ee..cd87cd12 100644 --- a/src/components/Register/index.tsx +++ b/src/components/Register/index.tsx @@ -1,2 +1,4 @@ export { default as Stepper } from './Stepper'; export { default as StepperController } from './StepperController'; +export { default as StepTitle } from './StepTitle'; +export { default as Preview } from './Preview'; diff --git a/src/pages/Register/index.tsx b/src/pages/Register/index.tsx index e88fde48..9542cb39 100644 --- a/src/pages/Register/index.tsx +++ b/src/pages/Register/index.tsx @@ -1,7 +1,12 @@ import { useState } from 'react'; import styled from '@emotion/styled'; -import { Stepper, StepperController } from '@components/Register'; +import { + Stepper, + StepperController, + StepTitle, + Preview +} from '@components/Register'; import { FirstStep, SecondStep, @@ -11,6 +16,28 @@ import { const Register = () => { const [currentStep, setCurrentStep] = useState(0); + const steps = [ + { + title: '정보 입력', + isCurrent: false, + isCompleted: false + }, + { + title: '유형 선택', + isCurrent: false, + isCompleted: false + }, + { + title: '조건 선택', + isCurrent: false, + isCompleted: false + }, + { + title: '노출 기간 선택', + isCurrent: false, + isCompleted: false + } + ]; const displayStep = (currentStep: number) => { switch (currentStep) { @@ -32,13 +59,25 @@ const Register = () => { 신규 쿠폰 등록하기 - + - {displayStep(currentStep)} - + + + + {displayStep(currentStep)} + + + + ); @@ -78,14 +117,14 @@ const Container = styled.div` const TitleWrapper = styled.div` width: 100%; - height: 25%; + height: 20%; padding: 27px 54px; display: flex; flex-direction: column; justify-content: center; - gap: 25px; + gap: 25%; border-radius: 0px 60px; background: rgba(255, 255, 255, 0.9); @@ -101,3 +140,36 @@ const Title = styled.span` line-height: 31px; letter-spacing: -0.78px; `; + +const ContentWrapper = styled.div` + position: relative; + + width: 100%; + height: 80%; +`; + +const InnerContentWrapper = styled.div` + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + + width: 90%; + height: 84%; + + display: grid; + grid-template-columns: 1fr 1fr; + grid-template-rows: 66px 430px 80px; + grid-column-gap: 6%; + + overflow: auto; +`; + +const StepWrapper = styled.div` + width: 100%; + height: 100%; + + display: grid; + grid-column: 1 / 2; + grid-row: 2 / 4; +`; diff --git a/src/types/register.ts b/src/types/register.ts index 569e5490..0061efbd 100644 --- a/src/types/register.ts +++ b/src/types/register.ts @@ -1,4 +1,9 @@ export type StepperProps = { + steps: { + title: string; + isCurrent: boolean; + isCompleted: boolean; + }[]; currentStep: number; }; @@ -14,3 +19,12 @@ export interface StepperControllerProps { currentStep: number; onButtonClick: React.Dispatch>; } + +export type StepTitleProps = { + steps: { + title: string; + isCurrent: boolean; + isCompleted: boolean; + }[]; + currentStep: number; +}; From e765ade9661c786dcdf78511b377afb175397fcd Mon Sep 17 00:00:00 2001 From: ovoxiix Date: Fri, 12 Jan 2024 12:44:42 +0900 Subject: [PATCH 07/50] =?UTF-8?q?fix:=20=ED=8F=B0=ED=8A=B8=20=EC=9E=84?= =?UTF-8?q?=EB=B2=A0=EB=94=A9=20=EC=8B=9C=20=EB=B0=9C=EC=83=9D=ED=95=98?= =?UTF-8?q?=EB=8A=94=20=EA=B2=BD=EA=B3=A0=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/styles/GlobalStyles.tsx | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/src/styles/GlobalStyles.tsx b/src/styles/GlobalStyles.tsx index 824d1a5c..046cd286 100644 --- a/src/styles/GlobalStyles.tsx +++ b/src/styles/GlobalStyles.tsx @@ -8,6 +8,8 @@ const GlobalStyles = () => { export default GlobalStyles; const resetCSS = css` + @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@500;600;700&display=swap'); + html, body, div, @@ -149,9 +151,4 @@ const resetCSS = css` *::after { box-sizing: border-box; } - - @font-face { - font-family: 'Noto Sans KR'; - src: url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@500;700&display=swap'); - } `; From 684a611247d5b3d04c9092dc0d95cf1882a93083 Mon Sep 17 00:00:00 2001 From: ovoxiix Date: Fri, 12 Jan 2024 13:05:41 +0900 Subject: [PATCH 08/50] =?UTF-8?q?design:=20=ED=8F=B0=ED=8A=B8=20css=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Register/StepTitle/index.tsx | 7 +++---- src/components/Register/Stepper/index.tsx | 9 +++++---- src/pages/Register/index.tsx | 4 ++-- 3 files changed, 10 insertions(+), 10 deletions(-) diff --git a/src/components/Register/StepTitle/index.tsx b/src/components/Register/StepTitle/index.tsx index 7c51d50c..2ecf3197 100644 --- a/src/components/Register/StepTitle/index.tsx +++ b/src/components/Register/StepTitle/index.tsx @@ -29,8 +29,8 @@ const StepTitleContainer = styled.div` display: grid; - font-size: 26px; - font-weight: 700; + font-size: 24px; + font-weight: 600; line-height: 31px; letter-spacing: -0.78px; `; @@ -50,7 +50,6 @@ const PreviousCoupon = styled.button` color: ${theme.colors.pink500}; font-family: 'Noto Sans KR'; font-size: 15px; - font-weight: 700; text-decoration: underline; text-underline-position: under; @@ -64,6 +63,6 @@ const Description = styled.span` color: #6c7072; font-size: 13px; - font-weight: 700; + letter-spacing: 0.1px; line-height: 150%; `; diff --git a/src/components/Register/Stepper/index.tsx b/src/components/Register/Stepper/index.tsx index 576661f7..0597722e 100644 --- a/src/components/Register/Stepper/index.tsx +++ b/src/components/Register/Stepper/index.tsx @@ -57,7 +57,7 @@ const Number = styled.div` margin-right: 10px; padding-bottom: 2px; - border: 3px solid ${theme.colors.hover}; + border: 2px solid ${theme.colors.hover}; border-radius: 50%; display: flex; @@ -65,7 +65,7 @@ const Number = styled.div` align-items: center; color: ${theme.colors.hover}; - font-weight: 700; + font-weight: 600; line-height: 100%; letter-spacing: 0.5px; @@ -78,7 +78,7 @@ const Number = styled.div` } &.disabled { - border: 3px solid #979c9e; + border: 2px solid #979c9e; & > span { color: #979c9e; @@ -89,12 +89,13 @@ const Number = styled.div` const Description = styled.div` color: ${theme.colors.ink600}; font-size: 22px; - font-weight: 700; + font-weight: 600; line-height: 26.148px; letter-spacing: -0.7px; &.disabled { color: #979c9e; + font-weight: 500; } `; diff --git a/src/pages/Register/index.tsx b/src/pages/Register/index.tsx index 9542cb39..16199977 100644 --- a/src/pages/Register/index.tsx +++ b/src/pages/Register/index.tsx @@ -135,8 +135,8 @@ const TitleWrapper = styled.div` `; const Title = styled.span` - font-size: 26px; - font-weight: 700; + font-size: 24px; + font-weight: 600; line-height: 31px; letter-spacing: -0.78px; `; From 7a2bcf0077fe0933f501f69ec977536185e17ffd Mon Sep 17 00:00:00 2001 From: ovoxiix Date: Fri, 12 Jan 2024 13:51:37 +0900 Subject: [PATCH 09/50] =?UTF-8?q?refactor:=20=ED=83=80=EC=9E=85=20?= =?UTF-8?q?=EC=9D=B4=EB=A6=84=20=EB=B3=80=EA=B2=BD=20=EB=B0=8F=20=ED=83=80?= =?UTF-8?q?=EC=9E=85=20=EB=B6=84=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Register/Stepper/index.tsx | 10 +++++++--- src/types/register.ts | 11 +++++++---- 2 files changed, 14 insertions(+), 7 deletions(-) diff --git a/src/components/Register/Stepper/index.tsx b/src/components/Register/Stepper/index.tsx index 0597722e..10ad2693 100644 --- a/src/components/Register/Stepper/index.tsx +++ b/src/components/Register/Stepper/index.tsx @@ -1,7 +1,11 @@ import styled from '@emotion/styled'; import theme from '@styles/theme'; -import { StepperProps, NumberProps, LineProps } from '@/types/register'; +import { + StepperProps, + NumberStyleProps, + LineStyleProps +} from '@/types/register'; import checkMark from '@assets/icons/ic-register-check.svg'; const Stepper = ({ steps, currentStep }: StepperProps) => { @@ -51,7 +55,7 @@ const Step = styled.div` align-items: center; `; -const Number = styled.div` +const Number = styled.div` width: 35px; height: 35px; @@ -99,7 +103,7 @@ const Description = styled.div` } `; -const Line = styled.div` +const Line = styled.div` margin: 0px 40px; display: ${props => (props.$isLastStep === 3 ? 'none' : 'block')}; diff --git a/src/types/register.ts b/src/types/register.ts index 0061efbd..af354501 100644 --- a/src/types/register.ts +++ b/src/types/register.ts @@ -1,3 +1,4 @@ +// Stepper export type StepperProps = { steps: { title: string; @@ -7,19 +8,21 @@ export type StepperProps = { currentStep: number; }; -export type StepperStyleProps = { +export type NumberStyleProps = { src: string; - $isLastStep: number; }; -export type NumberProps = Pick; -export type LineProps = Pick; +export type LineStyleProps = { + $isLastStep: number; +}; +// StepperController export interface StepperControllerProps { currentStep: number; onButtonClick: React.Dispatch>; } +// StepTitle export type StepTitleProps = { steps: { title: string; From ba96050a3c968c1c96a2d0d042e38d76d2f31d7d Mon Sep 17 00:00:00 2001 From: ovoxiix Date: Fri, 12 Jan 2024 19:57:20 +0900 Subject: [PATCH 10/50] =?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=20InputContainer=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/common/InputContainer/index.tsx | 31 +++++++++++++++++++ src/components/Register/common/index.tsx | 1 + src/types/register.ts | 8 +++++ 3 files changed, 40 insertions(+) create mode 100644 src/components/Register/common/InputContainer/index.tsx create mode 100644 src/components/Register/common/index.tsx diff --git a/src/components/Register/common/InputContainer/index.tsx b/src/components/Register/common/InputContainer/index.tsx new file mode 100644 index 00000000..a2a81acf --- /dev/null +++ b/src/components/Register/common/InputContainer/index.tsx @@ -0,0 +1,31 @@ +import styled from '@emotion/styled'; + +import { InputContainerProps } from '@/types/register'; + +const InputContainer = ({ description, children }: InputContainerProps) => { + return ( +
+ + {description} + {children} + +
+ ); +}; + +export default InputContainer; + +const Container = styled.div` + width: 100%; + + padding: 24px; + border: 1px solid #cdcfd0; + border-radius: 16px; + + display: inline-block; +`; + +const Description = styled.div` + font-size: 18px; + margin-bottom: 30px; +`; diff --git a/src/components/Register/common/index.tsx b/src/components/Register/common/index.tsx new file mode 100644 index 00000000..830be7b6 --- /dev/null +++ b/src/components/Register/common/index.tsx @@ -0,0 +1 @@ +export { default as InputContainer } from './InputContainer'; diff --git a/src/types/register.ts b/src/types/register.ts index af354501..8cbdc6bc 100644 --- a/src/types/register.ts +++ b/src/types/register.ts @@ -1,3 +1,11 @@ +import { ReactNode } from 'react'; + +// InputContainer +export type InputContainerProps = { + description: string; + children: ReactNode; +}; + // Stepper export type StepperProps = { steps: { From e76ae7a88c4f0a3213b1d25aec951f0d3b9783eb Mon Sep 17 00:00:00 2001 From: ovoxiix Date: Sat, 13 Jan 2024 04:41:57 +0900 Subject: [PATCH 11/50] =?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=20InputButton=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/InputButton/index.tsx | 56 +++++++++++++++++++ src/components/Register/common/index.tsx | 1 + src/types/register.ts | 8 +++ 3 files changed, 65 insertions(+) create mode 100644 src/components/Register/common/InputButton/index.tsx diff --git a/src/components/Register/common/InputButton/index.tsx b/src/components/Register/common/InputButton/index.tsx new file mode 100644 index 00000000..1e0035cf --- /dev/null +++ b/src/components/Register/common/InputButton/index.tsx @@ -0,0 +1,56 @@ +import styled from '@emotion/styled'; +import theme from '@styles/theme'; + +import { InputButtonProps } from '@/types/register'; + +const InputButton = ({ type, id, name, buttonName }: InputButtonProps) => { + return ( + <> + + + + ); +}; + +export default InputButton; + +const Input = styled.input` + display: none; + + &:checked + label { + border: none; + + color: #fff; + + background-color: ${theme.colors.hover}; + } + + &:checked + label + div { + display: block; + } +`; + +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; + + &:has(input:checked) { + background-color: ${theme.colors.hover}; + } +`; diff --git a/src/components/Register/common/index.tsx b/src/components/Register/common/index.tsx index 830be7b6..62f577e3 100644 --- a/src/components/Register/common/index.tsx +++ b/src/components/Register/common/index.tsx @@ -1 +1,2 @@ export { default as InputContainer } from './InputContainer'; +export { default as InputButton } from './InputButton'; diff --git a/src/types/register.ts b/src/types/register.ts index 8cbdc6bc..80e80773 100644 --- a/src/types/register.ts +++ b/src/types/register.ts @@ -6,6 +6,14 @@ export type InputContainerProps = { children: ReactNode; }; +// InputButton +export type InputButtonProps = { + type: string; + id: string; + name: string; + buttonName: string; +}; + // Stepper export type StepperProps = { steps: { From a214deb3770256961080d4b95fc4b6189fbc4432 Mon Sep 17 00:00:00 2001 From: ovoxiix Date: Sat, 13 Jan 2024 05:11:56 +0900 Subject: [PATCH 12/50] =?UTF-8?q?design:=20=EC=BF=A0=ED=8F=B0=20=EB=93=B1?= =?UTF-8?q?=EB=A1=9D=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EB=A0=88=EC=9D=B4?= =?UTF-8?q?=EC=95=84=EC=9B=83=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/Preview/index.tsx | 6 +- src/components/Register/StepTitle/index.tsx | 4 +- .../Register/common/InputContainer/index.tsx | 1 + src/pages/Register/index.tsx | 57 ++++++++++++------- 4 files changed, 42 insertions(+), 26 deletions(-) diff --git a/src/components/Register/Preview/index.tsx b/src/components/Register/Preview/index.tsx index 871bdc1e..12b5681f 100644 --- a/src/components/Register/Preview/index.tsx +++ b/src/components/Register/Preview/index.tsx @@ -8,9 +8,7 @@ export default Preview; const PreviewContainer = styled.div` width: 100%; - height: 100%; + min-height: 430px; - display: grid; - grid-column: 2 / 3; - grid-row: 2 / 3; + margin: 60px 0px 30px; `; diff --git a/src/components/Register/StepTitle/index.tsx b/src/components/Register/StepTitle/index.tsx index 2ecf3197..55d20d19 100644 --- a/src/components/Register/StepTitle/index.tsx +++ b/src/components/Register/StepTitle/index.tsx @@ -25,9 +25,7 @@ export default StepTitle; const StepTitleContainer = styled.div` width: 100%; - height: 100%; - - display: grid; + height: 60px; font-size: 24px; font-weight: 600; diff --git a/src/components/Register/common/InputContainer/index.tsx b/src/components/Register/common/InputContainer/index.tsx index a2a81acf..339d2fbb 100644 --- a/src/components/Register/common/InputContainer/index.tsx +++ b/src/components/Register/common/InputContainer/index.tsx @@ -18,6 +18,7 @@ export default InputContainer; const Container = styled.div` width: 100%; + margin-bottom: 30px; padding: 24px; border: 1px solid #cdcfd0; border-radius: 16px; diff --git a/src/pages/Register/index.tsx b/src/pages/Register/index.tsx index 16199977..19aee687 100644 --- a/src/pages/Register/index.tsx +++ b/src/pages/Register/index.tsx @@ -66,16 +66,22 @@ const Register = () => { - - {displayStep(currentStep)} - - + + + + {displayStep(currentStep)} + + + + + + @@ -157,19 +163,32 @@ const InnerContentWrapper = styled.div` width: 90%; height: 84%; - display: grid; - grid-template-columns: 1fr 1fr; - grid-template-rows: 66px 430px 80px; - grid-column-gap: 6%; - overflow: auto; `; -const StepWrapper = styled.div` +const SectionWrapper = styled.div` + position: relative; + width: 100%; + + display: inline-block; +`; + +const LeftSection = styled.div` + width: 47%; + + display: inline-block; +`; + +const RightSection = styled.div` + position: absolute; + top: 0px; + right: 0px; + + width: 47%; height: 100%; - display: grid; - grid-column: 1 / 2; - grid-row: 2 / 4; + display: flex; + flex-direction: column; + justify-content: space-between; `; From 43f65a232de76a781d5aac7d5c7ede25c23aeaaf Mon Sep 17 00:00:00 2001 From: ovoxiix Date: Sat, 13 Jan 2024 05:30:13 +0900 Subject: [PATCH 13/50] =?UTF-8?q?modify:=20=EC=BB=B4=ED=8F=AC=EB=84=8C?= =?UTF-8?q?=ED=8A=B8=20=EC=9D=B4=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/StepTitle/index.tsx | 2 +- .../Register/StepperController/index.tsx | 12 ++++---- .../Register/common/InputContainer/index.tsx | 10 +++---- src/pages/Register/index.tsx | 30 +++++++++---------- 4 files changed, 26 insertions(+), 28 deletions(-) diff --git a/src/components/Register/StepTitle/index.tsx b/src/components/Register/StepTitle/index.tsx index 55d20d19..d86047b0 100644 --- a/src/components/Register/StepTitle/index.tsx +++ b/src/components/Register/StepTitle/index.tsx @@ -7,7 +7,7 @@ const StepTitle = ({ steps, currentStep }: StepTitleProps) => { return ( - {`${currentStep + 1}. ${steps[currentStep].title}`} + {`${currentStep + 1}. ${steps[currentStep].title}`} {!currentStep && ( 이전 쿠폰 정보 불러오기 )} diff --git a/src/components/Register/StepperController/index.tsx b/src/components/Register/StepperController/index.tsx index 15e53d39..5cde9913 100644 --- a/src/components/Register/StepperController/index.tsx +++ b/src/components/Register/StepperController/index.tsx @@ -19,24 +19,24 @@ const StepperController = ({ }; return ( - - + + 이전 다음 - - + + ); }; export default StepperController; -const ButtonContainer = styled.div` +const ControllerContainer = styled.div` display: grid; grid-column: 2 / 3; grid-row: 3 / 4; `; -const InnerButtonContainer = styled.div` +const InnerControllerContainer = styled.div` display: flex; justify-content: flex-end; align-items: flex-end; diff --git a/src/components/Register/common/InputContainer/index.tsx b/src/components/Register/common/InputContainer/index.tsx index 339d2fbb..909be58e 100644 --- a/src/components/Register/common/InputContainer/index.tsx +++ b/src/components/Register/common/InputContainer/index.tsx @@ -4,12 +4,10 @@ import { InputContainerProps } from '@/types/register'; const InputContainer = ({ description, children }: InputContainerProps) => { return ( -
- - {description} - {children} - -
+ + {description} + {children} + ); }; diff --git a/src/pages/Register/index.tsx b/src/pages/Register/index.tsx index 19aee687..80bbdc03 100644 --- a/src/pages/Register/index.tsx +++ b/src/pages/Register/index.tsx @@ -56,17 +56,17 @@ const Register = () => { return ( - - + + 신규 쿠폰 등록하기 - - - - + + + + { onButtonClick={setCurrentStep} /> - - - - + + + + ); }; @@ -106,7 +106,7 @@ const Background = styled.div` ); `; -const Container = styled.div` +const RegisterContainer = styled.div` position: relative; width: 100%; @@ -121,7 +121,7 @@ const Container = styled.div` backdrop-filter: blur(71px); `; -const TitleWrapper = styled.div` +const TitleContainer = styled.div` width: 100%; height: 20%; @@ -147,14 +147,14 @@ const Title = styled.span` letter-spacing: -0.78px; `; -const ContentWrapper = styled.div` +const ContentContainer = styled.div` position: relative; width: 100%; height: 80%; `; -const InnerContentWrapper = styled.div` +const InnerContentContainer = styled.div` position: absolute; top: 50%; left: 50%; @@ -166,7 +166,7 @@ const InnerContentWrapper = styled.div` overflow: auto; `; -const SectionWrapper = styled.div` +const SectionContainer = styled.div` position: relative; width: 100%; From e30a238bf8a76c0dc62e4cd437f271c3ebefc848 Mon Sep 17 00:00:00 2001 From: ovoxiix Date: Sat, 13 Jan 2024 05:31:54 +0900 Subject: [PATCH 14/50] =?UTF-8?q?refactor:=20=EC=86=8D=EC=84=B1=20?= =?UTF-8?q?=EB=82=98=EC=97=B4=20=EC=BB=A8=EB=B2=A4=EC=85=98=20=EC=A0=81?= =?UTF-8?q?=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Register/common/InputContainer/index.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/Register/common/InputContainer/index.tsx b/src/components/Register/common/InputContainer/index.tsx index 909be58e..b90df5c3 100644 --- a/src/components/Register/common/InputContainer/index.tsx +++ b/src/components/Register/common/InputContainer/index.tsx @@ -25,6 +25,7 @@ const Container = styled.div` `; const Description = styled.div` - font-size: 18px; margin-bottom: 30px; + + font-size: 18px; `; From bc411b73300b0df578eb4d44ff6a8dae60df5d6f Mon Sep 17 00:00:00 2001 From: ovoxiix Date: Sat, 13 Jan 2024 23:20:27 +0900 Subject: [PATCH 15/50] =?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=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/FirstStep/index.tsx | 76 ++++++++++++++++++- 1 file changed, 75 insertions(+), 1 deletion(-) diff --git a/src/components/Register/Steps/FirstStep/index.tsx b/src/components/Register/Steps/FirstStep/index.tsx index 483dedd5..af94ceb4 100644 --- a/src/components/Register/Steps/FirstStep/index.tsx +++ b/src/components/Register/Steps/FirstStep/index.tsx @@ -1,5 +1,79 @@ +import styled from '@emotion/styled'; + +import { InputContainer, InputButton } from '@components/Register/common'; + const FirstStep = () => { - return
FirstStep
; + return ( + <> + + + + + + + + + + + + + + + + + + ); }; export default FirstStep; + +const Input = styled.input` + width: 348px; + height: 40px; + + border: none; + border-radius: 30px; + + background-color: #f2f4f5; + + font-size: 15px; + font-weight: 600; + text-indent: 15px; + + outline: none; + + &::placeholder { + color: #979C9e; + } +} +`; + +const ButtonWrapper = styled.div` + display: flex; + gap: 23px; +`; From cbb09e8daab6108aa8903a16023e971f7e9074bd Mon Sep 17 00:00:00 2001 From: ovoxiix Date: Sat, 13 Jan 2024 23:23:23 +0900 Subject: [PATCH 16/50] =?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=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 | 46 ++++++++++++++++++- 1 file changed, 45 insertions(+), 1 deletion(-) diff --git a/src/components/Register/Steps/SecondStep/index.tsx b/src/components/Register/Steps/SecondStep/index.tsx index 9b5f60fb..f63c7208 100644 --- a/src/components/Register/Steps/SecondStep/index.tsx +++ b/src/components/Register/Steps/SecondStep/index.tsx @@ -1,5 +1,49 @@ +import styled from '@emotion/styled'; + +import { InputContainer, InputButton } from '@components/Register/common'; + const SecondStep = () => { - return
SecondStep
; + return ( + <> + + + + + + + + + + + + + + ); }; export default SecondStep; + +const ButtonWrapper = styled.div` + display: flex; + gap: 23px; +`; From eeb0a311786414e0a25a9a743b0794a517ffa14f Mon Sep 17 00:00:00 2001 From: ovoxiix Date: Sat, 13 Jan 2024 23:24:54 +0900 Subject: [PATCH 17/50] =?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=20InputAccordion=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 --- src/assets/icons/ic-register-toggle.svg | 5 + .../Register/common/InputAccordion/index.tsx | 95 +++++++++++++++++++ src/components/Register/common/index.tsx | 1 + src/types/register.ts | 11 +++ 4 files changed, 112 insertions(+) create mode 100644 src/assets/icons/ic-register-toggle.svg create mode 100644 src/components/Register/common/InputAccordion/index.tsx diff --git a/src/assets/icons/ic-register-toggle.svg b/src/assets/icons/ic-register-toggle.svg new file mode 100644 index 00000000..5ee86302 --- /dev/null +++ b/src/assets/icons/ic-register-toggle.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/components/Register/common/InputAccordion/index.tsx b/src/components/Register/common/InputAccordion/index.tsx new file mode 100644 index 00000000..c0b8a1d9 --- /dev/null +++ b/src/components/Register/common/InputAccordion/index.tsx @@ -0,0 +1,95 @@ +import { useState, useRef } from 'react'; +import styled from '@emotion/styled'; + +import { InputAccordionProps, ButtonStyleProps } from '@/types/register'; +import toggle from '@assets/icons/ic-register-toggle.svg'; + +const InputAccordion = ({ description, content }: InputAccordionProps) => { + const [isOpen, setIsOpen] = useState(false); + + const contentWrapperRef = useRef(null); + const contentRef = useRef(null); + + const handleToggle = () => { + if (contentWrapperRef.current && contentRef.current) { + if (isOpen) { + contentWrapperRef.current.style.height = '0px'; + } else { + contentWrapperRef.current.style.height = `${contentRef.current.clientHeight}px`; + } + setIsOpen(prev => !prev); + } + }; + + return ( + +
+ {description} +
+ + {content} + + + ); +}; + +export default InputAccordion; + +const Container = styled.div` + width: 100%; + + margin-bottom: 30px; + padding: 24px; + border: 1px solid #cdcfd0; + border-radius: 16px; + + display: flex; + flex-direction: column; +`; + +const Header = styled.div` + display: flex; + justify-content: space-between; + align-items: center; +`; + +const Description = styled.div` + color: #979c9e; + font-size: 15px; +`; + +const Button = styled.button` + width: 24px; + height: 24px; + + padding: 0px; + border: none; + + background: url(${props => props.src}); + + transform: rotate( + ${props => { + return props.$isOpen ? '180deg' : '0'; + }} + ); + transition: 0.4s; + + cursor: pointer; +`; + +const ContentWrapper = styled.div` + height: 0px; + + overflow: hidden; + + transition: 0.4s; +`; + +const Content = styled.div` + padding: 24px 0px 6px; +`; diff --git a/src/components/Register/common/index.tsx b/src/components/Register/common/index.tsx index 62f577e3..f182a5a6 100644 --- a/src/components/Register/common/index.tsx +++ b/src/components/Register/common/index.tsx @@ -1,2 +1,3 @@ export { default as InputContainer } from './InputContainer'; export { default as InputButton } from './InputButton'; +export { default as InputAccordion } from './InputAccordion'; diff --git a/src/types/register.ts b/src/types/register.ts index 80e80773..9fa1ca0c 100644 --- a/src/types/register.ts +++ b/src/types/register.ts @@ -14,6 +14,17 @@ export type InputButtonProps = { buttonName: string; }; +// InputAccordion +export type InputAccordionProps = { + description: string; + content: JSX.Element; +}; + +export type ButtonStyleProps = { + $isOpen: boolean; + src: string; +}; + // Stepper export type StepperProps = { steps: { From c6682b28d5c364a39f18874f07661e91af6e106a Mon Sep 17 00:00:00 2001 From: ovoxiix Date: Sat, 13 Jan 2024 23:29:40 +0900 Subject: [PATCH 18/50] =?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=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/ThirdStep/index.tsx | 17 ++++++++++++++++- 1 file changed, 16 insertions(+), 1 deletion(-) diff --git a/src/components/Register/Steps/ThirdStep/index.tsx b/src/components/Register/Steps/ThirdStep/index.tsx index e46a7f2e..e7caf0f5 100644 --- a/src/components/Register/Steps/ThirdStep/index.tsx +++ b/src/components/Register/Steps/ThirdStep/index.tsx @@ -1,5 +1,20 @@ +import { InputAccordion } from '@components/Register/common'; + const ThirdStep = () => { - return
ThirdStep
; + const temp =
temp
; + + return ( + <> + + + + ); }; export default ThirdStep; From a76923414040a57cabb0a558a4db0e992199c2a8 Mon Sep 17 00:00:00 2001 From: ovoxiix Date: Sat, 13 Jan 2024 23:41:18 +0900 Subject: [PATCH 19/50] =?UTF-8?q?modify:=20InputContainer,=20InputAccordio?= =?UTF-8?q?n=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20props=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/Steps/FirstStep/index.tsx | 6 +++--- src/components/Register/Steps/SecondStep/index.tsx | 4 ++-- src/components/Register/Steps/ThirdStep/index.tsx | 4 ++-- src/components/Register/common/InputAccordion/index.tsx | 4 ++-- src/components/Register/common/InputContainer/index.tsx | 4 ++-- src/types/register.ts | 4 ++-- 6 files changed, 13 insertions(+), 13 deletions(-) diff --git a/src/components/Register/Steps/FirstStep/index.tsx b/src/components/Register/Steps/FirstStep/index.tsx index af94ceb4..ce70c7e9 100644 --- a/src/components/Register/Steps/FirstStep/index.tsx +++ b/src/components/Register/Steps/FirstStep/index.tsx @@ -5,10 +5,10 @@ import { InputContainer, InputButton } from '@components/Register/common'; const FirstStep = () => { return ( <> - + - + { /> - + { return ( <> - + { /> - + { return ( <> diff --git a/src/components/Register/common/InputAccordion/index.tsx b/src/components/Register/common/InputAccordion/index.tsx index c0b8a1d9..6f150aae 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 = ({ description, content }: InputAccordionProps) => { +const InputAccordion = ({ title, content }: InputAccordionProps) => { const [isOpen, setIsOpen] = useState(false); const contentWrapperRef = useRef(null); @@ -24,7 +24,7 @@ const InputAccordion = ({ description, content }: InputAccordionProps) => { return (
- {description} + {title}