From 3067c17feb088769c72cfc14e7a1c3d94b053362 Mon Sep 17 00:00:00 2001 From: surinkwon Date: Tue, 5 Mar 2024 19:05:43 +0900 Subject: [PATCH 1/5] =?UTF-8?q?feat:=20signup=20=ED=8E=98=EC=9D=B4?= =?UTF-8?q?=EC=A7=80=20=EC=95=A0=EB=8B=88=EB=A9=94=EC=9D=B4=EC=85=98=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 next 버튼 클릭 시 다음 단계로 이동 화면 상단 그라데이션 부분 클릭 시 이전 단계로 이동 --- frontend/src/components/account/JobInput.tsx | 21 ++++--- .../src/components/account/NicknameInput.tsx | 25 +++++--- .../src/components/account/TechStackInput.tsx | 6 +- frontend/src/pages/account/SignupPage.tsx | 62 ++++++++++++++++--- 4 files changed, 88 insertions(+), 26 deletions(-) diff --git a/frontend/src/components/account/JobInput.tsx b/frontend/src/components/account/JobInput.tsx index f5eefa3..8ae8004 100644 --- a/frontend/src/components/account/JobInput.tsx +++ b/frontend/src/components/account/JobInput.tsx @@ -4,13 +4,14 @@ import { JOB_INPUT_INFO, SIGNUP_STEP } from "../../constants/account"; import NextStepButton from "./NextStepButton"; interface JobInputProps { + currentStep: { NUMBER: number; NAME: string }; setCurrentStep: React.Dispatch< React.SetStateAction<{ NUMBER: number; NAME: string }> >; jobRef: React.MutableRefObject; } -const JobInput = ({ setCurrentStep, jobRef }: JobInputProps) => { +const JobInput = ({ currentStep, setCurrentStep, jobRef }: JobInputProps) => { const { Dropdown, selectedOption } = useDropdown({ placeholder: JOB_INPUT_INFO.PLACEHOLDER, options: JOB_INPUT_INFO.OPTIONS, @@ -18,8 +19,6 @@ const JobInput = ({ setCurrentStep, jobRef }: JobInputProps) => { const handleNextButtonClick = () => { setCurrentStep(SIGNUP_STEP.STEP3); - const techElement = document.getElementById("tech"); - techElement?.scrollIntoView({ behavior: "smooth", block: "nearest" }); }; useEffect(() => { @@ -27,8 +26,12 @@ const JobInput = ({ setCurrentStep, jobRef }: JobInputProps) => { }, [selectedOption]); return ( -
-
+
+
저의 주요 직무는 @@ -41,9 +44,11 @@ const JobInput = ({ setCurrentStep, jobRef }: JobInputProps) => { /> 입니다
- - Next - + {currentStep === SIGNUP_STEP.STEP2 && ( + + Next + + )}
); }; diff --git a/frontend/src/components/account/NicknameInput.tsx b/frontend/src/components/account/NicknameInput.tsx index c72f943..15c0b42 100644 --- a/frontend/src/components/account/NicknameInput.tsx +++ b/frontend/src/components/account/NicknameInput.tsx @@ -3,20 +3,23 @@ import { SIGNUP_STEP } from "../../constants/account"; import NextStepButton from "./NextStepButton"; interface NicknameInputProps { + currentStep: { NUMBER: number; NAME: string }; setCurrentStep: React.Dispatch< React.SetStateAction<{ NUMBER: number; NAME: string }> >; nicknameRef: React.MutableRefObject; } -const NicknameInput = ({ setCurrentStep, nicknameRef }: NicknameInputProps) => { +const NicknameInput = ({ + currentStep, + setCurrentStep, + nicknameRef, +}: NicknameInputProps) => { const [inputValue, setInputValue] = useState(""); const [validated] = useState(null); const handleNextButtonClick = () => { setCurrentStep(SIGNUP_STEP.STEP2); - const jobElement = document.getElementById("job"); - jobElement?.scrollIntoView({ behavior: "smooth", block: "nearest" }); }; const handleInputChange = ({ target }: ChangeEvent) => { @@ -25,7 +28,11 @@ const NicknameInput = ({ setCurrentStep, nicknameRef }: NicknameInputProps) => { }; return ( -
+

-
+
{ 입니다
- - Next - + {currentStep === SIGNUP_STEP.STEP1 && ( + + Next + + )}
); }; diff --git a/frontend/src/components/account/TechStackInput.tsx b/frontend/src/components/account/TechStackInput.tsx index 3da4a89..ab7cdaa 100644 --- a/frontend/src/components/account/TechStackInput.tsx +++ b/frontend/src/components/account/TechStackInput.tsx @@ -6,6 +6,10 @@ import NextStepButton from "./NextStepButton"; import CategoryButton from "../common/CategoryButton"; interface TechStackInputProps { + currentStep: { NUMBER: number; NAME: string }; + setCurrentStep: React.Dispatch< + React.SetStateAction<{ NUMBER: number; NAME: string }> + >; techRef: React.MutableRefObject; onSignupButtonClick: () => void; } @@ -26,7 +30,7 @@ const TechStackInput = ({ }; return ( -
+

저의 주요 기술 스택은 diff --git a/frontend/src/pages/account/SignupPage.tsx b/frontend/src/pages/account/SignupPage.tsx index e23e6ba..83d7aaf 100644 --- a/frontend/src/pages/account/SignupPage.tsx +++ b/frontend/src/pages/account/SignupPage.tsx @@ -1,4 +1,4 @@ -import { useRef, useState } from "react"; +import { useEffect, useRef, useState } from "react"; import JobInput from "../../components/account/JobInput"; import NicknameInput from "../../components/account/NicknameInput"; import TechStackInput from "../../components/account/TechStackInput"; @@ -14,22 +14,66 @@ const SignupPage = () => { const jobRef = useRef(null); const techRef = useRef([]); + const handlePrevStepAreaClick = () => { + setCurrentStep((prevStep) => { + if (prevStep.NUMBER === SIGNUP_STEP.STEP3.NUMBER) { + return SIGNUP_STEP.STEP2; + } + + if (prevStep.NUMBER === SIGNUP_STEP.STEP2.NUMBER) { + return SIGNUP_STEP.STEP1; + } + + return prevStep; + }); + }; + const handleSignupButtonClick = () => {}; + useEffect(() => { + switch (currentStep.NUMBER) { + case SIGNUP_STEP.STEP1.NUMBER: + const nicknameInput = document.getElementById("nickname"); + nicknameInput?.scrollIntoView({ block: "center", behavior: "smooth" }); + break; + + case SIGNUP_STEP.STEP2.NUMBER: + const nicknameInputElement = + document.getElementById("nickname-input-box"); + nicknameInputElement?.scrollIntoView({ + behavior: "smooth", + block: "start", + }); + break; + + case SIGNUP_STEP.STEP3.NUMBER: + const jobInputElement = document.getElementById("job-input-box"); + jobInputElement?.scrollIntoView({ behavior: "smooth", block: "start" }); + break; + } + }, [currentStep]); + return (

-
-
- - - +
+
1 && "hover:cursor-pointer" + }`} + onClick={handlePrevStepAreaClick} + >
+
+ + + +
); From c1c85d7f38769b7904567022843d6936fd6d6617 Mon Sep 17 00:00:00 2001 From: surinkwon Date: Wed, 6 Mar 2024 09:22:38 +0900 Subject: [PATCH 2/5] =?UTF-8?q?refactor:=20Dropdown=20=EB=AA=A8=EB=93=88?= =?UTF-8?q?=20=EC=BD=94=EB=93=9C=20=EB=A6=AC=ED=8E=99=ED=86=A0=EB=A7=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 효율적으로 동작할 수 있도록 외부 클릭 로직을 컴포넌트 내부로 옮김 이에 따른 테스트 코드 추가 작성 --- .../src/common/dropdown/useDropdown.test.tsx | 15 ++- frontend/src/common/dropdown/useDropdown.tsx | 94 ++++++++++--------- 2 files changed, 63 insertions(+), 46 deletions(-) diff --git a/frontend/src/common/dropdown/useDropdown.test.tsx b/frontend/src/common/dropdown/useDropdown.test.tsx index 6222171..e8b57d8 100644 --- a/frontend/src/common/dropdown/useDropdown.test.tsx +++ b/frontend/src/common/dropdown/useDropdown.test.tsx @@ -15,7 +15,12 @@ describe("dropdown hook test", () => { options, }); - return ; + return ( +
+

외부

+ ; +
+ ); }; it("드롭다운 클릭 시 잘 펼쳐지는가", () => { @@ -42,4 +47,12 @@ describe("dropdown hook test", () => { expect(screen.getByText(placeholder).textContent).toBe(placeholder); expect(screen.queryByText(options[0])).toBeNull(); }); + + it("외부 클릭 시 드롭다운이 닫히는가", () => { + render(); + fireEvent.click(screen.getByText(placeholder)); + fireEvent.click(screen.getByText("외부")); + + expect(screen.queryByText(options[0])).toBeNull(); + }); }); diff --git a/frontend/src/common/dropdown/useDropdown.tsx b/frontend/src/common/dropdown/useDropdown.tsx index 6eacfe7..09b96df 100644 --- a/frontend/src/common/dropdown/useDropdown.tsx +++ b/frontend/src/common/dropdown/useDropdown.tsx @@ -13,62 +13,66 @@ interface DropdownProps { const useDropdown = ({ placeholder, options }: useDropdownParams) => { const [selectedOption, setSelectedOption] = useState(""); - const [open, setOpen] = useState(false); const dropdownRef = useRef(null); const Dropdown = ({ buttonClassName = "", containerClassName = "", itemClassName = "", - }: DropdownProps) => ( -
- - {open && ( -
    - {options.map((option, index) => ( -
  • handleOptionClick(option)} - className={`${itemClassName} hover:cursor-pointer`} - > - {option} -
    • - ))} -
- )} -
- ); + }: DropdownProps) => { + const [open, setOpen] = useState(false); - const handleButtonClick = () => { - setOpen((prevState) => !prevState); - }; - - const handleOptionClick = (option: string) => { - setSelectedOption(option); - setOpen(false); - }; + const handleButtonClick = () => { + setOpen((prevState) => !prevState); + }; - const handleOutsideClick = ({ target }: MouseEvent) => { - if (dropdownRef.current && !dropdownRef.current.contains(target as Node)) { + const handleOptionClick = (option: string) => { + setSelectedOption(option); setOpen(false); - } - }; - - useEffect(() => { - if (open) { - window.addEventListener("mousedown", handleOutsideClick); - } + }; - return () => { - window.removeEventListener("mousedown", handleOutsideClick); + const handleOutsideClick = ({ target }: MouseEvent) => { + if ( + dropdownRef.current && + !dropdownRef.current.contains(target as Node) + ) { + setOpen(false); + } }; - }, [open]); + + useEffect(() => { + window.addEventListener("click", handleOutsideClick); + + return () => { + window.removeEventListener("click", handleOutsideClick); + }; + }, []); + + return ( +
+ + {open && ( +
    + {options.map((option, index) => ( +
  • handleOptionClick(option)} + className={`${itemClassName} hover:cursor-pointer`} + > + {option} +
    • + ))} +
+ )} +
+ ); + }; return { Dropdown, selectedOption }; }; From 164accd5c7cf5bb5e881929e69eaab164dafbec5 Mon Sep 17 00:00:00 2001 From: surinkwon Date: Wed, 6 Mar 2024 09:40:43 +0900 Subject: [PATCH 3/5] =?UTF-8?q?refactor:=20signup=20page=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EB=B6=84=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 메인 섹션 컴포넌트를 추가로 분리해 page 파일 내부 가독성을 높임 --- .../src/components/account/NicknameInput.tsx | 12 +-- .../{JobInput.tsx => PositionInput.tsx} | 18 ++-- .../components/account/SignupMainSection.tsx | 83 +++++++++++++++++++ .../src/components/account/TechStackInput.tsx | 1 - frontend/src/pages/account/SignupPage.tsx | 68 ++------------- 5 files changed, 108 insertions(+), 74 deletions(-) rename frontend/src/components/account/{JobInput.tsx => PositionInput.tsx} (83%) create mode 100644 frontend/src/components/account/SignupMainSection.tsx diff --git a/frontend/src/components/account/NicknameInput.tsx b/frontend/src/components/account/NicknameInput.tsx index 15c0b42..a702f41 100644 --- a/frontend/src/components/account/NicknameInput.tsx +++ b/frontend/src/components/account/NicknameInput.tsx @@ -1,9 +1,9 @@ import { ChangeEvent, useState } from "react"; -import { SIGNUP_STEP } from "../../constants/account"; import NextStepButton from "./NextStepButton"; +import { SIGNUP_STEP } from "../../constants/account"; interface NicknameInputProps { - currentStep: { NUMBER: number; NAME: string }; + currentStepNumber: number; setCurrentStep: React.Dispatch< React.SetStateAction<{ NUMBER: number; NAME: string }> >; @@ -11,7 +11,7 @@ interface NicknameInputProps { } const NicknameInput = ({ - currentStep, + currentStepNumber, setCurrentStep, nicknameRef, }: NicknameInputProps) => { @@ -30,7 +30,9 @@ const NicknameInput = ({ return (
@@ -64,7 +66,7 @@ const NicknameInput = ({ 입니다
- {currentStep === SIGNUP_STEP.STEP1 && ( + {currentStepNumber === SIGNUP_STEP.STEP1.NUMBER && ( Next diff --git a/frontend/src/components/account/JobInput.tsx b/frontend/src/components/account/PositionInput.tsx similarity index 83% rename from frontend/src/components/account/JobInput.tsx rename to frontend/src/components/account/PositionInput.tsx index 8ae8004..eaf5e7b 100644 --- a/frontend/src/components/account/JobInput.tsx +++ b/frontend/src/components/account/PositionInput.tsx @@ -1,17 +1,21 @@ import { useEffect } from "react"; import useDropdown from "../../common/dropdown/useDropdown"; -import { JOB_INPUT_INFO, SIGNUP_STEP } from "../../constants/account"; import NextStepButton from "./NextStepButton"; +import { JOB_INPUT_INFO, SIGNUP_STEP } from "../../constants/account"; interface JobInputProps { - currentStep: { NUMBER: number; NAME: string }; + currentStepNumber: number; setCurrentStep: React.Dispatch< React.SetStateAction<{ NUMBER: number; NAME: string }> >; jobRef: React.MutableRefObject; } -const JobInput = ({ currentStep, setCurrentStep, jobRef }: JobInputProps) => { +const PositionInput = ({ + currentStepNumber, + setCurrentStep, + jobRef, +}: JobInputProps) => { const { Dropdown, selectedOption } = useDropdown({ placeholder: JOB_INPUT_INFO.PLACEHOLDER, options: JOB_INPUT_INFO.OPTIONS, @@ -28,7 +32,9 @@ const JobInput = ({ currentStep, setCurrentStep, jobRef }: JobInputProps) => { return (
@@ -44,7 +50,7 @@ const JobInput = ({ currentStep, setCurrentStep, jobRef }: JobInputProps) => { /> 입니다
- {currentStep === SIGNUP_STEP.STEP2 && ( + {currentStepNumber === SIGNUP_STEP.STEP2.NUMBER && ( Next @@ -53,4 +59,4 @@ const JobInput = ({ currentStep, setCurrentStep, jobRef }: JobInputProps) => { ); }; -export default JobInput; +export default PositionInput; diff --git a/frontend/src/components/account/SignupMainSection.tsx b/frontend/src/components/account/SignupMainSection.tsx new file mode 100644 index 0000000..b1722aa --- /dev/null +++ b/frontend/src/components/account/SignupMainSection.tsx @@ -0,0 +1,83 @@ +import { useEffect, useRef } from "react"; +import NicknameInput from "./NicknameInput"; +import PositionInput from "./PositionInput"; +import TechStackInput from "./TechStackInput"; +import { SIGNUP_STEP } from "../../constants/account"; + +interface SignupMainSectionProps { + currentStepNumber: number; + setCurrentStep: React.Dispatch< + React.SetStateAction<{ NUMBER: number; NAME: string }> + >; +} + +const SignupMainSection = ({ + currentStepNumber, + setCurrentStep, +}: SignupMainSectionProps) => { + const nicknameRef = useRef(""); + const jobRef = useRef(null); + const techRef = useRef([]); + + const handlePrevStepAreaClick = () => { + setCurrentStep((prevStep) => { + if (prevStep.NUMBER === SIGNUP_STEP.STEP3.NUMBER) { + return SIGNUP_STEP.STEP2; + } + + if (prevStep.NUMBER === SIGNUP_STEP.STEP2.NUMBER) { + return SIGNUP_STEP.STEP1; + } + + return prevStep; + }); + }; + + const handleSignupButtonClick = () => {}; + + useEffect(() => { + switch (currentStepNumber) { + case SIGNUP_STEP.STEP1.NUMBER: + const nicknameInput = document.getElementById("nickname"); + nicknameInput?.scrollIntoView({ block: "center", behavior: "smooth" }); + break; + + case SIGNUP_STEP.STEP2.NUMBER: + const nicknameInputElement = + document.getElementById("nickname-input-box"); + nicknameInputElement?.scrollIntoView({ + behavior: "smooth", + block: "start", + }); + break; + + case SIGNUP_STEP.STEP3.NUMBER: + const jobInputElement = document.getElementById("job-input-box"); + jobInputElement?.scrollIntoView({ behavior: "smooth", block: "start" }); + break; + } + }, [currentStepNumber]); + + return ( +
+
1 && "hover:cursor-pointer" + }`} + onClick={handlePrevStepAreaClick} + >
+
+ + + +
+
+ ); +}; + +export default SignupMainSection; diff --git a/frontend/src/components/account/TechStackInput.tsx b/frontend/src/components/account/TechStackInput.tsx index ab7cdaa..066969e 100644 --- a/frontend/src/components/account/TechStackInput.tsx +++ b/frontend/src/components/account/TechStackInput.tsx @@ -6,7 +6,6 @@ import NextStepButton from "./NextStepButton"; import CategoryButton from "../common/CategoryButton"; interface TechStackInputProps { - currentStep: { NUMBER: number; NAME: string }; setCurrentStep: React.Dispatch< React.SetStateAction<{ NUMBER: number; NAME: string }> >; diff --git a/frontend/src/pages/account/SignupPage.tsx b/frontend/src/pages/account/SignupPage.tsx index 83d7aaf..8e4f1f5 100644 --- a/frontend/src/pages/account/SignupPage.tsx +++ b/frontend/src/pages/account/SignupPage.tsx @@ -1,8 +1,6 @@ -import { useEffect, useRef, useState } from "react"; -import JobInput from "../../components/account/JobInput"; -import NicknameInput from "../../components/account/NicknameInput"; -import TechStackInput from "../../components/account/TechStackInput"; +import { useState } from "react"; import SignupSideBar from "../../components/account/SignupSideBar"; +import SignupMainSection from "../../components/account/SignupMainSection"; import { SIGNUP_STEP } from "../../constants/account"; const SignupPage = () => { @@ -10,48 +8,6 @@ const SignupPage = () => { NUMBER: number; NAME: string; }>(SIGNUP_STEP.STEP1); - const nicknameRef = useRef(""); - const jobRef = useRef(null); - const techRef = useRef([]); - - const handlePrevStepAreaClick = () => { - setCurrentStep((prevStep) => { - if (prevStep.NUMBER === SIGNUP_STEP.STEP3.NUMBER) { - return SIGNUP_STEP.STEP2; - } - - if (prevStep.NUMBER === SIGNUP_STEP.STEP2.NUMBER) { - return SIGNUP_STEP.STEP1; - } - - return prevStep; - }); - }; - - const handleSignupButtonClick = () => {}; - - useEffect(() => { - switch (currentStep.NUMBER) { - case SIGNUP_STEP.STEP1.NUMBER: - const nicknameInput = document.getElementById("nickname"); - nicknameInput?.scrollIntoView({ block: "center", behavior: "smooth" }); - break; - - case SIGNUP_STEP.STEP2.NUMBER: - const nicknameInputElement = - document.getElementById("nickname-input-box"); - nicknameInputElement?.scrollIntoView({ - behavior: "smooth", - block: "start", - }); - break; - - case SIGNUP_STEP.STEP3.NUMBER: - const jobInputElement = document.getElementById("job-input-box"); - jobInputElement?.scrollIntoView({ behavior: "smooth", block: "start" }); - break; - } - }, [currentStep]); return (
@@ -59,22 +15,10 @@ const SignupPage = () => { currentStepName={currentStep.NAME} currentStepNumber={currentStep.NUMBER} /> -
-
1 && "hover:cursor-pointer" - }`} - onClick={handlePrevStepAreaClick} - >
-
- - - -
-
+
); }; From e0b74aa004bb85324512031471d24cc52f9d96ab Mon Sep 17 00:00:00 2001 From: surinkwon Date: Thu, 7 Mar 2024 18:53:28 +0900 Subject: [PATCH 4/5] =?UTF-8?q?style:=20Ref=20=EB=B3=80=EC=88=98=20?= =?UTF-8?q?=EC=9D=B4=EB=A6=84=20=EB=B3=80=EA=B2=BD=20=EB=B0=8F=20=ED=94=84?= =?UTF-8?q?=EB=A6=AC=ED=8B=B0=EC=96=B4=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit jobRef를 백엔드에 맞춰 positionRef로 변경 프리티어 적용으로 인한 줄바꿈 발생 --- .../src/components/account/PositionInput.tsx | 12 +++++----- .../src/components/account/TechStackInput.tsx | 24 ++++++++++++++----- 2 files changed, 24 insertions(+), 12 deletions(-) diff --git a/frontend/src/components/account/PositionInput.tsx b/frontend/src/components/account/PositionInput.tsx index 9d467ef..676303f 100644 --- a/frontend/src/components/account/PositionInput.tsx +++ b/frontend/src/components/account/PositionInput.tsx @@ -8,13 +8,13 @@ interface JobInputProps { setCurrentStep: React.Dispatch< React.SetStateAction<{ NUMBER: number; NAME: string }> >; - jobRef: React.MutableRefObject; + positionRef: React.MutableRefObject; } const PositionInput = ({ currentStepNumber, setCurrentStep, - jobRef, + positionRef, }: JobInputProps) => { const { Dropdown, selectedOption } = useDropdown({ placeholder: JOB_INPUT_INFO.PLACEHOLDER, @@ -26,7 +26,7 @@ const PositionInput = ({ }; useEffect(() => { - jobRef.current = selectedOption; + positionRef.current = selectedOption; }, [selectedOption]); return ( @@ -37,12 +37,12 @@ const PositionInput = ({ : "items-end" }`} > -
+
저의 주요 직무는 입니다
- {currentStepNumber === SIGNUP_STEP.STEP2.NUMBER && ( + {currentStepNumber !== SIGNUP_STEP.STEP3.NUMBER && ( Next diff --git a/frontend/src/components/account/TechStackInput.tsx b/frontend/src/components/account/TechStackInput.tsx index ec1d82e..c0065a2 100644 --- a/frontend/src/components/account/TechStackInput.tsx +++ b/frontend/src/components/account/TechStackInput.tsx @@ -13,7 +13,10 @@ interface TechStackInputProps { onSignupButtonClick: () => void; } -const TechStackInput = ({ techRef, onSignupButtonClick }: TechStackInputProps) => { +const TechStackInput = ({ + techRef, + onSignupButtonClick, +}: TechStackInputProps) => { const { open, close } = useModal(); const [techStackList, setTechStackList] = useState([]); @@ -26,25 +29,34 @@ const TechStackInput = ({ techRef, onSignupButtonClick }: TechStackInputProps) = }; return ( -
+
-

저의 주요 기술 스택은

+

+ 저의 주요 기술 스택은 +

{techStackList.map((techStack) => ( - + ))}

입니다

- 가입하기 + + 가입하기 +
); }; From ffed5da0e0e72950ddc30df427f5900d859133d6 Mon Sep 17 00:00:00 2001 From: surinkwon Date: Thu, 7 Mar 2024 18:55:50 +0900 Subject: [PATCH 5/5] =?UTF-8?q?feat:=203=EB=8B=A8=EA=B3=84=EB=A1=9C=20?= =?UTF-8?q?=EB=84=98=EC=96=B4=EA=B0=80=EB=8A=94=20=EC=8A=A4=ED=81=AC?= =?UTF-8?q?=EB=A1=A4=20=EB=A1=9C=EC=A7=81=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 큰 차이는 없지만 더 주체가 되는 컴포넌트가 중앙에 오는 것으로 명시 CategoryButton 내의 글자가 길어지면 width가 넓어질 수 있도록 min-width, min-height으로 설정 --- .../components/account/SignupMainSection.tsx | 18 ++++++++++-------- .../src/components/common/CategoryButton.tsx | 2 +- 2 files changed, 11 insertions(+), 9 deletions(-) diff --git a/frontend/src/components/account/SignupMainSection.tsx b/frontend/src/components/account/SignupMainSection.tsx index b1722aa..52effd1 100644 --- a/frontend/src/components/account/SignupMainSection.tsx +++ b/frontend/src/components/account/SignupMainSection.tsx @@ -16,7 +16,7 @@ const SignupMainSection = ({ setCurrentStep, }: SignupMainSectionProps) => { const nicknameRef = useRef(""); - const jobRef = useRef(null); + const positionRef = useRef(null); const techRef = useRef([]); const handlePrevStepAreaClick = () => { @@ -36,15 +36,16 @@ const SignupMainSection = ({ const handleSignupButtonClick = () => {}; useEffect(() => { + const nicknameInput = document.getElementById("nickname"); + const nicknameInputElement = document.getElementById("nickname-input-box"); + const techStackInput = document.getElementById("tech"); + switch (currentStepNumber) { case SIGNUP_STEP.STEP1.NUMBER: - const nicknameInput = document.getElementById("nickname"); - nicknameInput?.scrollIntoView({ block: "center", behavior: "smooth" }); + nicknameInput?.scrollIntoView({ behavior: "smooth", block: "center" }); break; case SIGNUP_STEP.STEP2.NUMBER: - const nicknameInputElement = - document.getElementById("nickname-input-box"); nicknameInputElement?.scrollIntoView({ behavior: "smooth", block: "start", @@ -52,8 +53,7 @@ const SignupMainSection = ({ break; case SIGNUP_STEP.STEP3.NUMBER: - const jobInputElement = document.getElementById("job-input-box"); - jobInputElement?.scrollIntoView({ behavior: "smooth", block: "start" }); + techStackInput?.scrollIntoView({ behavior: "smooth", block: "center" }); break; } }, [currentStepNumber]); @@ -70,7 +70,9 @@ const SignupMainSection = ({ - + ( -
+
{category}