Merge pull request #92 from DDD-Community/fix/91

[FIX/91] QA
DDD-Community · Aug 21, 2024 · c186955 · c186955
2 parents 783d64a + 2ccecf5
commit c186955
Show file tree

Hide file tree

Showing 16 changed files with 305 additions and 124 deletions.
diff --git a/public/icons/onboarding-polaroid.svg b/public/icons/onboarding-polaroid.svg
diff --git a/public/icons/onboarding-twopolaroids.svg b/public/icons/onboarding-twopolaroids.svg
diff --git 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']
 }) => (
   <div className={twMerge('absolute right-3 -z-10', className)}>
-    <div className="h-8 w-8 rotate-[30deg] skew-y-[30deg] scale-x-[0.866] transform rounded-lg bg-gray-0" />
+    <div className="h-8 w-8 rotate-[30deg] skew-y-[30deg] scale-x-[0.866] transform rounded-lg bg-gray-950" />
   </div>
 )
 
@@ -36,7 +36,7 @@ const Box = ({
   return (
     <div
       className={twMerge(
-        'absolute right-0 top-0 z-20 flex flex-col items-end justify-end rounded-md bg-gray-0',
+        'absolute right-0 top-0 z-20 flex flex-col items-end justify-end rounded-md bg-gray-950 text-gray-0',
         className,
       )}
     >
@@ -46,9 +46,20 @@ const Box = ({
   )
 }
 
-const Content = ({ children }: { children: ReactNode }) => {
+const Content = ({
+  children,
+  className = '',
+}: {
+  children: ReactNode
+  className?: React.ComponentProps<'div'>['className']
+}) => {
   return (
-    <div className="mb-[3px] whitespace-pre-line text-center text-md font-semiBold">
+    <div
+      className={twMerge(
+        'mb-[3px] whitespace-pre-line text-center text-md',
+        className,
+      )}
+    >
       {children}
     </div>
   )

diff --git 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 (
     <Tooltip className="absolute right-4 top-[115%]">
-      <Tooltip.Icon
-        icon={<Step1Icon className="scale-150" />}
-        sendToBack
-        className="-left-[270px]"
-      />
+      <Tooltip.Icon icon={<Step1Icon />} sendToBack className="-left-[230px]" />
       <Tooltip.Box
         className="w-[270px] px-[18px] py-[15px]"
         trianglePos="-top-[0%] -translate-y-[20%]"
       >
-        <Tooltip.Content>친구들에게 보드를 공유해보세요!</Tooltip.Content>
+        <Tooltip.Content>
+          친구들에게 <span className="font-semiBold">보드를 공유</span>해보세요!
+        </Tooltip.Content>
         <Tooltip.NextBtn hasNext />
       </Tooltip.Box>
     </Tooltip>
@@ -28,14 +26,15 @@ export const Step2Tooltip = () => {
     <Tooltip className="absolute -top-[220%] right-4">
       <Tooltip.Icon
         icon={<Step2Icon />}
-        className="-left-[130px] -translate-y-3/4"
+        className="-left-[270px] -translate-y-1/4"
       />
       <Tooltip.Box
-        className="w-[260px] px-[18px] py-5"
+        className="w-[300px] px-[18px] py-5"
         trianglePos="-bottom-[0%] translate-y-[20%]"
       >
-        <Tooltip.Content>
-          {`보드 주제와 맞는\n  사진을 올려 보드를 꾸며주세요!`}
+        <Tooltip.Content className="pl-[58px] text-left">
+          <span className="font-semiBold">보드 주제와 맞는 사진</span>
+          {`을 올려 \n 보드를 꾸며주세요!`}
         </Tooltip.Content>
         <Tooltip.NextBtn hasNext={false} />
       </Tooltip.Box>

diff --git 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 && (
         <>
           <div style={overlayStyle}>
+            <div
+              className="pointer-events-none absolute left-[50%] top-[50%] -translate-x-[50%] -translate-y-[50%] rounded-full border-2 border-dotted border-gray-300"
+              style={{
+                width: 'calc(100% + 10px)',
+                height: 'calc(100% + 10px)',
+              }}
+            />
             <div
               className="pointer-events-auto fixed left-0 h-dvh w-screen"
               style={topBox}

diff --git a/src/app/(onboarding)/login/_components/Policy.tsx b/src/app/(onboarding)/login/_components/Policy.tsx
@@ -11,10 +11,18 @@ const Policy = () => {
     <div className="text-center text-xxs text-gray-400">
       <div>
         시작하기 버튼을 누르시면 POLABO의
-        <LinkTo text="서비스 이용약관" link="" />과
+        <LinkTo
+          text="서비스 이용약관"
+          link="https://hwanheejung.notion.site/POLABO-292cb07b2fd74d7488aa4b684c67eb9a?pvs=74"
+        />
+        과
       </div>
       <div>
-        <LinkTo text="개인정보 처리방침" link="" />에 동의하게 됩니다.
+        <LinkTo
+          text="개인정보 처리방침"
+          link="https://hwanheejung.notion.site/POLABO-3c07098b731e419a92da9916c81c35f1"
+        />
+        에 동의하게 됩니다.
       </div>
     </div>
   )

diff --git 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<boolean> => {
     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 (
     <div className="flex w-full flex-1 flex-col px-10">
       <Indicator />
       <ProfileProvider>
-        {step === 1 && <NicknameForm />}
-        {step === 2 && <BirthDtForm />}
+        {step === 1 && <NicknameForm handleSubmit={handleSubmit} />}
+        {step === 2 && <BirthDtForm handleSubmit={handleSubmit} />}
         {step === 3 && <GenderForm handleSubmit={handleSubmit} />}
       </ProfileProvider>
     </div>