From de980f22c9f6ad59bf9b913a24a232fb3d186c6d Mon Sep 17 00:00:00 2001 From: hwanheejung Date: Mon, 19 Aug 2024 22:55:10 +0900 Subject: [PATCH 1/5] #91 fix: qa --- .../(onboarding)/login/_components/Policy.tsx | 12 +++++-- .../signup/_components/ProfileForm.tsx | 13 +++---- .../signup/_components/steps/BirthDtForm.tsx | 30 ++++++++++------ .../signup/_components/steps/GenderForm.tsx | 21 +++++++----- .../signup/_components/steps/NicknameForm.tsx | 14 ++++++-- src/components/HamburgerMenu/Menu.tsx | 34 +++++++++++-------- 6 files changed, 82 insertions(+), 42 deletions(-) diff --git a/src/app/(onboarding)/login/_components/Policy.tsx b/src/app/(onboarding)/login/_components/Policy.tsx index 3cf60be..10e9f65 100644 --- a/src/app/(onboarding)/login/_components/Policy.tsx +++ b/src/app/(onboarding)/login/_components/Policy.tsx @@ -11,10 +11,18 @@ const Policy = () => {
시작하기 버튼을 누르시면 POLABO의 - 과 + + 과
- 에 동의하게 됩니다. + + 에 동의하게 됩니다.
) diff --git a/src/app/(onboarding)/signup/_components/ProfileForm.tsx b/src/app/(onboarding)/signup/_components/ProfileForm.tsx index 9f79240..df6663e 100644 --- a/src/app/(onboarding)/signup/_components/ProfileForm.tsx +++ b/src/app/(onboarding)/signup/_components/ProfileForm.tsx @@ -3,7 +3,6 @@ import { updateProfile } from '@/lib' import { UserProfile } from '@/types' import { useSession } from 'next-auth/react' -import { useRouter } from 'next/navigation' import Indicator from './Indicator' import { ProfileProvider } from './contexts/ProfileContext' import { useStep } from './contexts/StepContext' @@ -14,24 +13,26 @@ import NicknameForm from './steps/NicknameForm' const ProfileForm = () => { const { step } = useStep() const { data: session, update } = useSession() - const router = useRouter() - const handleSubmit = async (newProfile: UserProfile) => { + const handleSubmit = async (newProfile: UserProfile): Promise => { if (session?.profile !== newProfile) { const serverRes = await updateProfile(newProfile) + if (serverRes.code === 'SUCCESS') { update({ profile: newProfile }) - router.push('/signup/complete') + return true } + return false } + return true } return (
- {step === 1 && } - {step === 2 && } + {step === 1 && } + {step === 2 && } {step === 3 && }
diff --git a/src/app/(onboarding)/signup/_components/steps/BirthDtForm.tsx b/src/app/(onboarding)/signup/_components/steps/BirthDtForm.tsx index 45973d9..8e2bb11 100644 --- a/src/app/(onboarding)/signup/_components/steps/BirthDtForm.tsx +++ b/src/app/(onboarding)/signup/_components/steps/BirthDtForm.tsx @@ -1,23 +1,32 @@ import BirthDateInput from '@/components/BirthDateInput' import Button from '@/components/Button' -import Link from 'next/link' -import { useState } from 'react' -import { validateBirthDt } from '@/lib/utils/validation' import BirthInvalidModal from '@/components/Modal/BirthInvalidModal' +import { validateBirthDt } from '@/lib/utils/validation' +import { useState } from 'react' +import { UserProfile } from '@/types' import { useProfile } from '../contexts/ProfileContext' import { useStep } from '../contexts/StepContext' -const BirthDtForm = () => { - const { newName, newBirthDt, setBirthDt } = useProfile() +const BirthDtForm = ({ + handleSubmit, +}: { + handleSubmit: (profile: UserProfile) => Promise +}) => { + const { newName, newBirthDt, setBirthDt, newGender } = useProfile() const { nextStep } = useStep() const [hasError, setHasError] = useState(false) const [modalOpen, setModalOpen] = useState(false) - const handleSubmit = async () => { + const onSubmit = async () => { if (validateBirthDt(newBirthDt!) === false) { setModalOpen(true) return } + await handleSubmit({ + nickName: newName, + birthDt: newBirthDt, + gender: newGender, + }) nextStep() } @@ -43,16 +52,17 @@ const BirthDtForm = () => { size="lg" className="mb-5 mt-auto w-full" disabled={hasError || !newBirthDt} - onClick={handleSubmit} + onClick={onSubmit} > 다음 - nextStep()} className="mb-6 text-center text-md font-semiBold text-gray-400" > 다음에 할게요 - + void + handleSubmit: (profile: UserProfile) => Promise }) => { const { newName, newBirthDt, newGender, setGender } = useProfile() const [hasError, setHasError] = useState(false) + const router = useRouter() useEffect(() => { if (newGender === 'NONE') { @@ -19,6 +21,15 @@ const GenderForm = ({ } else setHasError(false) }, [newGender]) + const onSubmit = async () => { + const res = await handleSubmit({ + nickName: newName, + birthDt: newBirthDt, + gender: newGender, + }) + if (res) router.push('/signup/complete') + } + return (
@@ -38,13 +49,7 @@ const GenderForm = ({ size="lg" className="mb-5 mt-auto w-full" disabled={hasError} - onClick={() => - handleSubmit({ - nickName: newName, - birthDt: newBirthDt, - gender: newGender, - }) - } + onClick={onSubmit} > 완료 diff --git a/src/app/(onboarding)/signup/_components/steps/NicknameForm.tsx b/src/app/(onboarding)/signup/_components/steps/NicknameForm.tsx index d3d8c06..105c85d 100644 --- a/src/app/(onboarding)/signup/_components/steps/NicknameForm.tsx +++ b/src/app/(onboarding)/signup/_components/steps/NicknameForm.tsx @@ -4,11 +4,16 @@ import Button from '@/components/Button' import NicknameInput from '@/components/TextInput/NicknameInput' import SketchIcon from 'public/icons/sketchIcons-1.svg' import { useState } from 'react' +import { UserProfile } from '@/types' import { useProfile } from '../contexts/ProfileContext' import { useStep } from '../contexts/StepContext' -const NicknameForm = () => { - const { setNewName } = useProfile() +const NicknameForm = ({ + handleSubmit, +}: { + handleSubmit: (profile: UserProfile) => Promise +}) => { + const { newName, setNewName, newBirthDt, newGender } = useProfile() const [nickname, setNickname] = useState('') const [hasError, setHasError] = useState(false) const isEmpty = nickname.length === 0 @@ -17,6 +22,11 @@ const NicknameForm = () => { const createNickname = async () => { setNewName(nickname) + await handleSubmit({ + nickName: newName, + birthDt: newBirthDt, + gender: newGender, + }) nextStep() } diff --git a/src/components/HamburgerMenu/Menu.tsx b/src/components/HamburgerMenu/Menu.tsx index e7f817c..e63b034 100644 --- a/src/components/HamburgerMenu/Menu.tsx +++ b/src/components/HamburgerMenu/Menu.tsx @@ -59,19 +59,13 @@ const MyMenu = ({ ) -const ServiceMenu = ({ - text, - onClick, -}: { - text: string - onClick: React.ComponentProps<'div'>['onClick'] -}) => ( -
( + {text} -
+ ) const Logout = () => { @@ -124,10 +118,22 @@ const Menu = () => { )}
- {}} /> - {}} /> - {}} /> - {}} /> + + + +
{status === 'authenticated' && } From f7488459cc0307deffde66b376ac1f483597c5d3 Mon Sep 17 00:00:00 2001 From: hwanheejung Date: Wed, 21 Aug 2024 09:41:31 +0900 Subject: [PATCH 2/5] =?UTF-8?q?#91=20fix:=20=ED=96=84=EB=B2=84=EA=B1=B0?= =?UTF-8?q?=EB=A9=94=EB=89=B4=20=EB=A9=94=EC=9D=B8=EB=B2=84=ED=8A=BC=20?= =?UTF-8?q?=EB=88=8C=EB=A0=80=EC=9D=84=EB=95=8C=20=ED=99=88=EC=9D=B4?= =?UTF-8?q?=EB=A9=B4=20=EB=A9=94=EB=89=B4=20close?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/HamburgerMenu/Drawer.tsx | 70 +++++-------------- .../HamburgerMenu/DrawerContext.tsx | 44 ++++++++++++ src/components/HamburgerMenu/Menu.tsx | 10 +++ src/components/HamburgerMenu/index.tsx | 11 +-- 4 files changed, 80 insertions(+), 55 deletions(-) create mode 100644 src/components/HamburgerMenu/DrawerContext.tsx diff --git a/src/components/HamburgerMenu/Drawer.tsx b/src/components/HamburgerMenu/Drawer.tsx index b485e3f..79f7ec8 100644 --- a/src/components/HamburgerMenu/Drawer.tsx +++ b/src/components/HamburgerMenu/Drawer.tsx @@ -1,25 +1,9 @@ 'use client' import CloseIcon from 'public/icons/close.svg' -import { - ReactNode, - createContext, - useContext, - useEffect, - useMemo, - useState, -} from 'react' +import { ReactNode, useEffect } from 'react' import ReactDOM from 'react-dom' - -interface DrawerContextProps { - isVisible: boolean - onClose: () => void -} - -const DrawerContext = createContext({ - isVisible: false, - onClose: () => {}, -}) +import { useDrawer } from './DrawerContext' const DrawerOverlay = ({ children, @@ -28,11 +12,11 @@ const DrawerOverlay = ({ children: ReactNode closeOnClick: boolean }) => { - const { isVisible, onClose } = useContext(DrawerContext) + const { isVisible, setClose } = useDrawer() const handleClick = (event: React.MouseEvent) => { if (closeOnClick && event.target === event.currentTarget) { - onClose() + setClose() } } @@ -55,19 +39,13 @@ interface DrawerProps { } const Drawer = ({ children, isOpen, onClose }: DrawerProps) => { - const [isVisible, setIsVisible] = useState(false) - - const closeModal = () => { - setIsVisible(false) - } + const { isVisible, setClose, setOpen } = useDrawer() useEffect(() => { if (isOpen) { - requestAnimationFrame(() => { - setIsVisible(true) - }) + requestAnimationFrame(() => setOpen()) } else { - closeModal() + setClose() } }, [isOpen]) @@ -77,29 +55,19 @@ const Drawer = ({ children, isOpen, onClose }: DrawerProps) => { } } - const context = useMemo( - () => ({ - isVisible, - onClose: closeModal, - }), - [isVisible], - ) - return isOpen ? ReactDOM.createPortal(
- - -
- {children} -
- - + +
+ {children} +
+
, document.getElementById('modal-root') as HTMLElement, ) @@ -107,11 +75,11 @@ const Drawer = ({ children, isOpen, onClose }: DrawerProps) => { } const DrawerClose = () => { - const { onClose } = useContext(DrawerContext) + const { setClose } = useDrawer() return ( ) } diff --git a/src/components/HamburgerMenu/DrawerContext.tsx b/src/components/HamburgerMenu/DrawerContext.tsx new file mode 100644 index 0000000..3ad844a --- /dev/null +++ b/src/components/HamburgerMenu/DrawerContext.tsx @@ -0,0 +1,44 @@ +'use client' + +import { ReactNode, createContext, useContext, useMemo, useState } from 'react' + +interface DrawerContextProps { + isVisible: boolean + setClose: () => void + setOpen: () => void +} + +const DrawerContext = createContext({ + isVisible: false, + setClose: () => {}, + setOpen: () => {}, +}) + +export const DrawerProvider = ({ children }: { children: ReactNode }) => { + const [isVisible, setIsVisible] = useState(false) + + const setClose = () => setIsVisible(false) + + const setOpen = () => setIsVisible(true) + + const value = useMemo( + () => ({ + isVisible, + setClose, + setOpen, + }), + [isVisible], + ) + + return ( + {children} + ) +} + +export const useDrawer = () => { + const context = useContext(DrawerContext) + if (context === undefined) { + throw new Error('Error at useDrawer') + } + return context +} diff --git a/src/components/HamburgerMenu/Menu.tsx b/src/components/HamburgerMenu/Menu.tsx index e63b034..da14a2a 100644 --- a/src/components/HamburgerMenu/Menu.tsx +++ b/src/components/HamburgerMenu/Menu.tsx @@ -1,11 +1,13 @@ import { signOut, useSession } from 'next-auth/react' import Link from 'next/link' +import { usePathname } from 'next/navigation' import LogoutModalIcon from 'public/icons/linkShare.svg' import PersonIcon from 'public/icons/person.svg' import PinIcon from 'public/icons/pinFilled.svg' import PolaroidIcon from 'public/icons/polaroid.svg' import { ReactNode, useState } from 'react' import Modal from '../Modal' +import { useDrawer } from './DrawerContext' const Profile = ({ onClick, @@ -29,10 +31,17 @@ const Profile = ({ } const Main = () => { + const pathName = usePathname() + const { setClose } = useDrawer() return ( { + if (pathName === '/') { + setClose() + } + }} > POLABO 메인 @@ -97,6 +106,7 @@ const Logout = () => { const Menu = () => { const { status } = useSession() + return (
{}} /> diff --git a/src/components/HamburgerMenu/index.tsx b/src/components/HamburgerMenu/index.tsx index 09912c3..875b27c 100644 --- a/src/components/HamburgerMenu/index.tsx +++ b/src/components/HamburgerMenu/index.tsx @@ -4,6 +4,7 @@ import HamburgerIcon from 'public/icons/hamburger.svg' import { useState } from 'react' import Drawer from './Drawer' import Menu from './Menu' +import { DrawerProvider } from './DrawerContext' const Hamburger = ({ className = '', @@ -18,10 +19,12 @@ const Hamburger = ({ onClick={() => setIsOpen(true)} className="cursor-pointer" /> - setIsOpen(false)}> - - - + + setIsOpen(false)}> + + + +
) } From 8414493948f920279431b7303b654b80d074d4f5 Mon Sep 17 00:00:00 2001 From: hwanheejung Date: Wed, 21 Aug 2024 10:06:30 +0900 Subject: [PATCH 3/5] #91 style: header grid to flex --- src/components/Header/index.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx index 2754ca3..16eddbc 100644 --- a/src/components/Header/index.tsx +++ b/src/components/Header/index.tsx @@ -16,17 +16,17 @@ const Header = ({ }: HeaderProps) => { return ( <> -
-
{leftButton}
-
+
+
{leftButton}
+
{title}
-
+
{description}
-
{rightButton}
+
{rightButton}
From 63092cfe1377496b7042d476fe45c23f57ca3bbe Mon Sep 17 00:00:00 2001 From: hwanheejung Date: Wed, 21 Aug 2024 14:47:53 +0900 Subject: [PATCH 4/5] =?UTF-8?q?#91=20style:=20tutorial=20=EB=94=94?= =?UTF-8?q?=EC=9E=90=EC=9D=B8=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/icons/onboarding-polaroid.svg | 60 +++++++++++++++++++ public/icons/onboarding-twopolaroids.svg | 33 ++++++++++ .../_components/Tutorial/Tooltip.tsx | 19 ++++-- .../_components/Tutorial/Tooltips.tsx | 23 ++++--- .../[boardId]/_components/Tutorial/index.tsx | 8 +++ 5 files changed, 127 insertions(+), 16 deletions(-) create mode 100644 public/icons/onboarding-polaroid.svg create mode 100644 public/icons/onboarding-twopolaroids.svg diff --git a/public/icons/onboarding-polaroid.svg b/public/icons/onboarding-polaroid.svg new file mode 100644 index 0000000..87096c6 --- /dev/null +++ b/public/icons/onboarding-polaroid.svg @@ -0,0 +1,60 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/public/icons/onboarding-twopolaroids.svg b/public/icons/onboarding-twopolaroids.svg new file mode 100644 index 0000000..3aa4a9d --- /dev/null +++ b/public/icons/onboarding-twopolaroids.svg @@ -0,0 +1,33 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/app/(board)/board/[boardId]/_components/Tutorial/Tooltip.tsx b/src/app/(board)/board/[boardId]/_components/Tutorial/Tooltip.tsx index c220ccf..b1c1252 100644 --- a/src/app/(board)/board/[boardId]/_components/Tutorial/Tooltip.tsx +++ b/src/app/(board)/board/[boardId]/_components/Tutorial/Tooltip.tsx @@ -20,7 +20,7 @@ const Triangle = ({ className?: React.ComponentProps<'div'>['className'] }) => (
-
+
) @@ -36,7 +36,7 @@ const Box = ({ return (
@@ -46,9 +46,20 @@ const Box = ({ ) } -const Content = ({ children }: { children: ReactNode }) => { +const Content = ({ + children, + className = '', +}: { + children: ReactNode + className?: React.ComponentProps<'div'>['className'] +}) => { return ( -
+
{children}
) diff --git a/src/app/(board)/board/[boardId]/_components/Tutorial/Tooltips.tsx b/src/app/(board)/board/[boardId]/_components/Tutorial/Tooltips.tsx index 02bdb46..0c7cdb8 100644 --- a/src/app/(board)/board/[boardId]/_components/Tutorial/Tooltips.tsx +++ b/src/app/(board)/board/[boardId]/_components/Tutorial/Tooltips.tsx @@ -1,22 +1,20 @@ 'use client' -import Step1Icon from 'public/icons/linkShare.svg' -import Step2Icon from 'public/icons/sticker_polaroid.svg' +import Step1Icon from 'public/icons/onboarding-twopolaroids.svg' +import Step2Icon from 'public/icons/onboarding-polaroid.svg' import Tooltip from './Tooltip' export const Step1Tooltip = () => { return ( - } - sendToBack - className="-left-[270px]" - /> + } sendToBack className="-left-[230px]" /> - 친구들에게 보드를 공유해보세요! + + 친구들에게 보드를 공유해보세요! + @@ -28,14 +26,15 @@ export const Step2Tooltip = () => { } - className="-left-[130px] -translate-y-3/4" + className="-left-[270px] -translate-y-1/4" /> - - {`보드 주제와 맞는\n 사진을 올려 보드를 꾸며주세요!`} + + 보드 주제와 맞는 사진 + {`을 올려 \n 보드를 꾸며주세요!`} diff --git a/src/app/(board)/board/[boardId]/_components/Tutorial/index.tsx b/src/app/(board)/board/[boardId]/_components/Tutorial/index.tsx index b9a03bc..9850716 100644 --- a/src/app/(board)/board/[boardId]/_components/Tutorial/index.tsx +++ b/src/app/(board)/board/[boardId]/_components/Tutorial/index.tsx @@ -49,6 +49,7 @@ const Tutorial = ({ zIndex: 10, boxShadow: '0 0 0 9999px rgba(0, 0, 0, 0.6)', pointerEvents: 'none', + // border: '2px dotted red', }) setTopBox({ @@ -81,6 +82,13 @@ const Tutorial = ({ {isOpen && ( <>
+
Date: Wed, 21 Aug 2024 15:37:29 +0900 Subject: [PATCH 5/5] #91 fix: birthDt undefined error --- .../signup/_components/steps/BirthDtForm.tsx | 8 +++++--- src/app/mypage/profileEdit/_components/ProfileForm.tsx | 9 ++++++--- 2 files changed, 11 insertions(+), 6 deletions(-) diff --git a/src/app/(onboarding)/signup/_components/steps/BirthDtForm.tsx b/src/app/(onboarding)/signup/_components/steps/BirthDtForm.tsx index 8e2bb11..881e1e0 100644 --- a/src/app/(onboarding)/signup/_components/steps/BirthDtForm.tsx +++ b/src/app/(onboarding)/signup/_components/steps/BirthDtForm.tsx @@ -18,9 +18,11 @@ const BirthDtForm = ({ const [modalOpen, setModalOpen] = useState(false) const onSubmit = async () => { - if (validateBirthDt(newBirthDt!) === false) { - setModalOpen(true) - return + if (newBirthDt) { + if (validateBirthDt(newBirthDt) === false) { + setModalOpen(true) + return + } } await handleSubmit({ nickName: newName, diff --git a/src/app/mypage/profileEdit/_components/ProfileForm.tsx b/src/app/mypage/profileEdit/_components/ProfileForm.tsx index 117430a..626fb55 100644 --- a/src/app/mypage/profileEdit/_components/ProfileForm.tsx +++ b/src/app/mypage/profileEdit/_components/ProfileForm.tsx @@ -49,9 +49,11 @@ const ProfileForm = ({ children }: { children: ReactNode }) => { />
{ - if (validateBirthDt(newBirthDt!) === false) { - setModalOpen(true) - return + if (newBirthDt) { + if (validateBirthDt(newBirthDt) === false) { + setModalOpen(true) + return + } } const newProfile = { @@ -59,6 +61,7 @@ const ProfileForm = ({ children }: { children: ReactNode }) => { birthDt: newBirthDt, gender: newGender, } + if (session?.profile !== newProfile) { const serverRes = await updateProfile(newProfile)