feat(onboarding): api 연결

src/app/(sidebar)/(my-info)/apis/useGetOnboadStatus.ts

@@ -0,0 +1,22 @@
+import { http } from '@/apis/http';
+import { useSuspenseQuery } from '@tanstack/react-query';
+
+type Response = {
+  isOnboardComplete: boolean;
+};
+
+export const GET_ONBOARD_STATUS = 'get-onboard-status';
+
+const getOnboardStatus = () => {
+  return http.get<Response>({ url: `/users/onboard-status` });
+};
+
+export const useGetOnboardStatus = () => {
+  return useSuspenseQuery({
+    queryKey: [GET_ONBOARD_STATUS],
+    queryFn: async () => {
+      const res = await getOnboardStatus();
+      return res.data;
+    },
+  });
+};

src/app/(sidebar)/(my-info)/apis/usePutOnboardStatus.ts

@@ -0,0 +1,17 @@
+import { http } from '@/apis/http';
+import { useMutation } from '@tanstack/react-query';
+
+const putOnboardStatus = () => {
+  return http.put<Response>({ url: `/users/onboard-status`, data: { isOnboardComplete: true } });
+};
+
+export const usePutOnboardStatus = () => {
+  const mutate = useMutation({
+    mutationFn: async () => {
+      const res = await putOnboardStatus();
+      return res.data;
+    },
+  });
+
+  return mutate;
+};

src/app/(sidebar)/(my-info)/containers/Onboarding/OnboardingDialog.tsx

@@ -12,6 +12,7 @@ import { LogoLeaf } from './LogoLeaf';
 import Image from 'next/image';
 import { Icon } from '@/system/components';
 import { SwitchCase } from '@/system/utils/SwitchCase';
+import { usePutOnboardStatus } from '../../apis/usePutOnboardStatus';
 
 const MAX_INDEX = 3;
 
@@ -24,6 +25,8 @@ export function OnboardingDialog({}: OnboardingDialogProps) {
   const [currentIndex, setCurrentIndex] = useState(0);
   const [open, setOpen] = useState(true);
 
+  const { mutate: putOnboardStatus } = usePutOnboardStatus();
+
   const onNextClick = () => {
     if (currentIndex < MAX_INDEX) {
       setCurrentIndex(currentIndex + 1);
@@ -55,9 +58,14 @@ export function OnboardingDialog({}: OnboardingDialogProps) {
         if (step !== 'finish') {
           return;
         }
+        console.log('!!!');
         setOpen(false);
+        putOnboardStatus();
       }}>
-      <DialogContent className="p-0 w-auto max-w-[auto] bg-[transparent] border-none" style={{ boxShadow: 'none' }}>
+      <DialogContent
+        className="p-0 w-auto max-w-[auto] bg-[transparent] border-none"
+        style={{ boxShadow: 'none' }}
+        hasClose={false}>
         <motion.div
           variants={{
             text: {},

src/app/(sidebar)/(my-info)/page.tsx

@@ -15,6 +15,7 @@ import { InfoCardSkeleton } from './components/InfoCardSkeleton';
 import { AsyncBoundaryWithQuery } from '@/lib';
 import { Onboarding } from './containers/Onboarding/Onboarding';
 import { useRouter, useSearchParams } from 'next/navigation';
+import { useGetOnboardStatus } from './apis/useGetOnboadStatus';
 
 const getType = (typeParam: string | null) => {
   if (typeParam && INFO_TYPES.includes(typeParam as InfoType)) {
@@ -31,6 +32,8 @@ export default function MyInfo() {
   const [showHeader, setShowHeader] = useState(false);
   const headerRef = useRef<HTMLDivElement>(null);
 
+  const { isOnboardComplete } = useGetOnboardStatus().data;
+
   const typeParam = searchParams.get('type');
   const currentCardType = getType(typeParam);
 
@@ -42,8 +45,6 @@ export default function MyInfo() {
 
   useScroll(headerRef, (y) => setShowHeader(y > 192));
 
-  const params = useSearchParams();
-
   return (
     <div ref={headerRef} className="max-h-[100vh] w-full overflow-auto">
       <div className="mx-auto max-w-[1700px] py-[64px] px-[80px] bg-neutral-1">
@@ -132,7 +133,7 @@ export default function MyInfo() {
           pendingFallback={<InfoCardSkeleton count={4} />}>
           <InfoCardList cardType={currentCardType} />
         </AsyncBoundaryWithQuery>
-        <If condition={params.get('onboarding') === 'true'}>
+        <If condition={!isOnboardComplete}>
           <Onboarding />
         </If>
       </div>

src/system/components/Dialog/Dialog.tsx

@@ -5,6 +5,7 @@ import * as DialogPrimitive from '@radix-ui/react-dialog';
 
 import { cn } from '@/utils';
 import { Icon } from '..';
+import { If } from '@/system/utils/If';
 
 const Dialog = DialogPrimitive.Root;
 
@@ -31,8 +32,8 @@ DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
 
 const DialogContent = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
->(({ className, children, ...props }, ref) => (
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & { hasClose?: boolean }
+>(({ className, children, hasClose = true, ...props }, ref) => (
   <DialogPortal>
     <DialogOverlay />
     <DialogPrimitive.Content
@@ -43,10 +44,12 @@ const DialogContent = React.forwardRef<
       )}
       {...props}>
       {children}
-      <DialogPrimitive.Close className="absolute right-20 top-20 rounded-sm opacity-70 ring-offset-white transition-opacity hover:opacity-100 focus:outline-none disabled:pointer-events-none data-[state=open]:bg-slate-100 data-[state=open]:text-slate-500 dark:ring-offset-slate-950 dark:focus:ring-slate-300 dark:data-[state=open]:bg-slate-800 dark:data-[state=open]:text-slate-400">
-        <Icon name="x" color="#878A93" />
-        <span className="sr-only">Close</span>
-      </DialogPrimitive.Close>
+      <If condition={hasClose}>
+        <DialogPrimitive.Close className="absolute right-20 top-20 rounded-sm opacity-70 ring-offset-white transition-opacity hover:opacity-100 focus:outline-none disabled:pointer-events-none data-[state=open]:bg-slate-100 data-[state=open]:text-slate-500 dark:ring-offset-slate-950 dark:focus:ring-slate-300 dark:data-[state=open]:bg-slate-800 dark:data-[state=open]:text-slate-400">
+          <Icon name="x" color="#878A93" />
+          <span className="sr-only">Close</span>
+        </DialogPrimitive.Close>
+      </If>
     </DialogPrimitive.Content>
   </DialogPortal>
 ));

src/system/components/Icon/SVG/ArrowUp.tsx

@@ -2,7 +2,7 @@ import { IconBaseType } from './type';
 export function ArrowUp({ size, color = '#F9F9FA' }: IconBaseType) {
   return (
     <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox={`0 0 ${size} ${size}`} fill="none">
-      <path d="M5.5 11.5L12 5M12 5L18.5 11.5M12 5V20.5" stroke={color} stroke-width="1.5" />
+      <path d="M5.5 11.5L12 5M12 5L18.5 11.5M12 5V20.5" stroke={color} strokeWidth="1.5" />
     </svg>
   );
 }

src/system/components/Icon/SVG/Downloads.tsx

@@ -4,11 +4,11 @@ import { IconBaseType } from './type';
 export function Downloads({ size, color }: IconBaseType) {
   return (
     <svg width={size} height={size} viewBox="0 0 20 20" fill="none">
-      <path d="M4.16406 12.3333V15.6666H15.8307V12.3333" stroke={color} stroke-width="1.25" />
+      <path d="M4.16406 12.3333V15.6666H15.8307V12.3333" stroke={color} strokeWidth="1.25" />
       <path
         d="M10 2.33325V10.6666M10 10.6666L13.75 6.91659M10 10.6666L6.25 6.91659"
         stroke={color}
-        stroke-width="1.25"
+        strokeWidth="1.25"
       />
     </svg>
   );