Feature: 온보딩 페이지 퍼널 패턴 적용, api 연동(로그인 처리 완료)

package.json

@@ -22,12 +22,14 @@
     "@radix-ui/react-tabs": "^1.1.0",
     "@radix-ui/react-toggle": "^1.1.0",
     "@tanstack/react-query": "^5.83.0",
+    "@use-funnel/react-router-dom": "^0.0.14",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "cmdk": "^1.0.0",
     "lucide-react": "^0.525.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
+    "react-hot-toast": "^2.5.2",
     "react-router-dom": "^7.7.0",
     "tailwind-merge": "^3.3.1"
   },

src/App.tsx

@@ -1,16 +1,11 @@
 import { Outlet } from "react-router-dom";
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import GlobalLayout from "./components/layout/GlobalLayout";
 
-const queryClient = new QueryClient();
-
 function App() {
   return (
-    <QueryClientProvider client={queryClient}>
-      <GlobalLayout>
-        <Outlet />
-      </GlobalLayout>
-    </QueryClientProvider>
+    <GlobalLayout>
+      <Outlet />
+    </GlobalLayout>
   );
 }
 

src/components/common/LocationSelector.tsx

@@ -0,0 +1,126 @@
+import { useEffect } from "react";
+import { Button } from "@/components/ui/button";
+import { MapPin, Loader2 } from "lucide-react";
+import { useLocationQuery } from "@/hooks/queries/useLocationQuery";
+
+interface LocationSelectorProps {
+  onLocationChange: (location: { lng: number; lat: number }) => void;
+  initialLocation?: { lng: number; lat: number } | null;
+}
+
+export const LocationSelector = ({
+  onLocationChange,
+  initialLocation,
+}: LocationSelectorProps) => {
+  const { location, isLoading, isError, refetchLocation } = useLocationQuery();
+
+  useEffect(() => {
+    if (location && !initialLocation) {
+      onLocationChange(location);
+    }
+  }, [location, onLocationChange, initialLocation]);
+
+  const handleGetLocation = async () => {
+    try {
+      await refetchLocation();
+    } catch (error) {
+      console.error("위치 가져오기 실패:", error);
+    }
+  };
+
+  const getStatus = () => {
+    if (isLoading) return "loading";
+    if (isError) return "error";
+    if (location) return "success";
+    return "initial";
+  };
+
+  const status = getStatus();
+
+  return (
+    <div className="space-y-3">
+      {status === "initial" && (
+        <div className="bg-brand-surface rounded-lg p-4 border-none">
+          <div className="flex items-center gap-3 mb-3">
+            <MapPin className="text-brand-primary" />
+            <span className="text-sm font-medium">위치 정보 수집</span>
+          </div>
+          <p className="text-sm text-brand-text mb-4">
+            주변 개발자와의 연결을 위해 위치 정보가 필요합니다. 브라우저에서
+            위치 정보 접근을 허용해주세요.
+          </p>
+          <Button
+            onClick={handleGetLocation}
+            className="w-full bg-brand-primary hover:bg-brand-primary/90 text-black">
+            위치 정보 가져오기
+          </Button>
+        </div>
+      )}
+
+      {status === "loading" && (
+        <div className="bg-brand-surface rounded-lg p-4 border-none">
+          <div className="flex items-center gap-3 mb-3">
+            <Loader2 className="text-brand-primary animate-spin" />
+            <span className="text-sm font-medium">위치 정보 수집 중...</span>
+          </div>
+          <p className="text-sm text-brand-text">
+            GPS 신호를 받고 있습니다. 잠시만 기다려주세요.
+          </p>
+        </div>
+      )}
+
+      {status === "success" && location && (
+        <div className="bg-brand-surface rounded-lg p-4 border-none">
+          <div className="flex items-center gap-3 mb-3">
+            <MapPin className="text-brand-primary" />
+            <span className="text-sm font-medium text-brand-primary">
+              위치 정보 수집 완료
+            </span>
+          </div>
+          {location.address ? (
+            <div className="space-y-2">
+              <p className="text-sm text-white font-medium">
+                현재 위치: {location.address}
+              </p>
+              <p className="text-xs text-brand-text/70">
+                * 약간의 오차가 있을 수 있습니다.
+              </p>
+            </div>
+          ) : (
+            <p className="text-sm text-brand-text">
+              위도: {location.lat.toFixed(6)}, 경도: {location.lng.toFixed(6)}
+            </p>
+          )}
+          <Button
+            onClick={handleGetLocation}
+            variant="outline"
+            size="sm"
+            className="w-full mt-2 bg-transparent border-brand-primary text-brand-primary hover:bg-brand-primary hover:text-black">
+            위치 다시 가져오기
+          </Button>
+        </div>
+      )}
+
+      {status === "error" && (
+        <div className="bg-brand-surface rounded-lg p-4 border border-red-500/20">
+          <div className="flex items-center gap-3 mb-3">
+            <MapPin className="text-red-500" />
+            <span className="text-sm font-medium text-red-500">
+              위치 정보 오류
+            </span>
+          </div>
+          <p className="text-sm text-brand-text mb-4">
+            위치 정보를 가져오는 중 오류가 발생했습니다.
+          </p>
+          <Button
+            onClick={handleGetLocation}
+            variant="outline"
+            size="sm"
+            className="bg-transparent border-red-500 text-red-500 hover:bg-red-500 hover:text-white">
+            다시 시도
+          </Button>
+        </div>
+      )}
+    </div>
+  );
+};

src/components/common/PositionSelector.tsx

@@ -1,4 +1,3 @@
-import { useState, useEffect } from "react";
 import { Button } from "@/components/ui/button";
 import {
   Accordion,
@@ -8,8 +7,8 @@ import {
 } from "@/components/ui/accordion";
 import { Label } from "@/components/ui/label";
 import { cn } from "@/lib/utils";
-import { fetchPositions } from "@/lib/api";
-import type { PositionCategory } from "@/types/filter";
+import { usePositionsInterests } from "@/hooks/queries/useTags";
+import type { Position } from "@/types/tags.types";
 
 interface PositionSelectorProps {
   selectedPosition: number | null;
@@ -22,60 +21,56 @@ export const PositionSelector = ({
   onPositionChange,
   label = "포지션",
 }: PositionSelectorProps) => {
-  const [positions, setPositions] = useState<PositionCategory[]>([]);
-  const [isLoading, setIsLoading] = useState(true);
-
-  useEffect(() => {
-    const loadPositions = async () => {
-      try {
-        const fetchedPositions = await fetchPositions();
-        setPositions(fetchedPositions);
-      } catch (error) {
-        console.error("포지션 로딩 실패:", error);
-      } finally {
-        setIsLoading(false);
-      }
-    };
-
-    loadPositions();
-  }, []);
+  const { data: positionsInterestsData, isLoading } = usePositionsInterests();
 
   if (isLoading) {
     return <div className="text-center">로딩 중...</div>;
   }
 
+  if (!positionsInterestsData?.positions) {
+    return <div className="text-center">포지션을 불러올 수 없습니다.</div>;
+  }
+
+  const positions = positionsInterestsData.positions;
+
+  // positions를 field별로 그룹화
+  const groupedPositions = positions.reduce((acc, position) => {
+    if (!acc[position.field]) {
+      acc[position.field] = [];
+    }
+    acc[position.field].push(position);
+    return acc;
+  }, {} as Record<string, Position[]>);
+
   return (
     <div className="space-y-3">
       <Label>{label}</Label>
       <Accordion
         type="single"
         collapsible
         className="w-full border rounded-md border-brand-surface">
-        {positions.map((cat) => (
+        {Object.entries(groupedPositions).map(([field, fieldPositions]) => (
           <AccordionItem
-            key={cat.category}
-            value={cat.category}
+            key={field}
+            value={field}
             className="px-4 border-b-brand-surface last:border-b-0">
             <AccordionTrigger className="hover:no-underline">
-              {cat.category}
+              {field}
             </AccordionTrigger>
             <AccordionContent>
               <div className="flex flex-col gap-2 pt-2">
-                {cat.positions.map((pos) => (
+                {fieldPositions.map((position) => (
                   <Button
-                    key={pos.id}
+                    key={position.id}
                     variant="outline"
-                    onClick={() => onPositionChange(pos.id)}
+                    onClick={() => onPositionChange(position.id)}
                     className={cn(
                       "h-auto justify-start text-left whitespace-normal border-transparent bg-brand-surface",
-                      selectedPosition === pos.id &&
+                      selectedPosition === position.id &&
                         "border-brand-primary text-brand-primary border-1"
                     )}>
                     <div className="flex flex-col">
-                      <span className="font-bold">{pos.name}</span>
-                      <span className="text-xs text-brand-text">
-                        {pos.description}
-                      </span>
+                      <span className="font-bold">{position.role}</span>
                     </div>
                   </Button>
                 ))}