Feat: 맞팔 탐지 페이지 구현

.gitignore

@@ -13,10 +13,12 @@ dist-ssr
 *.local
 
 .env
+.env.development
 *.pem
 
 # Editor directories and files
 .vscode/*
+.cursor/*
 !.vscode/extensions.json
 .idea
 .DS_Store

biome.json

@@ -12,7 +12,10 @@
   "linter": {
     "enabled": true,
     "rules": {
-      "recommended": true
+      "recommended": true,
+      "correctness": {
+        "useExhaustiveDependencies": "warn"
+      }
     }
   },
   "javascript": {

package.json

@@ -28,6 +28,7 @@
     "ky": "^1.7.4",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
+    "react-hot-toast": "^2.6.0",
     "react-router": "^7.1.1"
   },
   "devDependencies": {

src/App.tsx

@@ -1,5 +1,5 @@
+import { router } from "@/Router";
 import { GlobalStyles } from "@/common/styles/GlobalStyles";
-import { router } from "@/router";
 import { Theme } from "@radix-ui/themes";
 import "@radix-ui/themes/styles.css";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
@@ -15,7 +15,6 @@ const queryClient = new QueryClient({
     },
     mutations: {
       retry: 0,
-      throwOnError: true,
     },
   },
 });

src/Follow/apis/follow.ts

@@ -0,0 +1,48 @@
+import { apiClient } from "@/common/api";
+
+export type FollowDetectType = "mutual" | "follow-only" | "followed-only";
+
+export interface FollowDetectUser {
+  githubUserId: number;
+  username: string;
+  profileImgUrl: string;
+}
+
+export interface FollowDetectResponse {
+  userList: FollowDetectUser[];
+  lastPage: boolean;
+  totalUserCount: number;
+  lastSyncAt: string;
+}
+
+export async function queryFollowDetect({
+  detectType,
+  lastGithubUserId,
+}: { detectType: FollowDetectType; lastGithubUserId?: number }) {
+  const poll = async () => {
+    const response = await apiClient.get<FollowDetectResponse>(`api/v1/users/me/followings/${detectType}`, {
+      searchParams: lastGithubUserId ? { lastGithubUserId } : undefined,
+    });
+
+    if (response.status === 202) {
+      await new Promise((resolve) => setTimeout(resolve, 500));
+      return poll();
+    }
+
+    return response;
+  };
+
+  return poll();
+}
+
+export async function createFollowUser(githubUserId: FollowDetectUser["githubUserId"]) {
+  return apiClient.post<FollowDetectResponse>(`api/v1/follow/${githubUserId}`);
+}
+
+export async function createFollowRefresh() {
+  return apiClient.post<null>("api/v1/users/me/followings/refresh");
+}
+
+export async function deleteUnfollowUser(githubUserId: FollowDetectUser["githubUserId"]) {
+  return apiClient.delete<FollowDetectResponse>(`api/v1/unfollow/${githubUserId}`);
+}

src/Follow/components/DetectTypeSelector.tsx

@@ -0,0 +1,31 @@
+import type { FollowDetectType } from "@/Follow/apis/follow";
+import { colors } from "@/common/styles/theme";
+import { SegmentedControl } from "@radix-ui/themes";
+
+interface Props {
+  value: FollowDetectType;
+  onChange: (value: FollowDetectType) => void;
+}
+
+export function DetectTypeSelector({ value, onChange }: Props) {
+  return (
+    <SegmentedControl.Root
+      defaultValue="mutual"
+      radius="large"
+      size="3"
+      value={value}
+      onValueChange={onChange}
+      variant="classic"
+      css={{
+        position: "sticky",
+        top: 0,
+        border: `1px solid ${colors.gray4}`,
+        boxShadow: "0 0 3px 0 rgba(0, 0, 0, 0.1)",
+      }}
+    >
+      <SegmentedControl.Item value="mutual">맞팔</SegmentedControl.Item>
+      <SegmentedControl.Item value="followed-only">상대만 팔로우</SegmentedControl.Item>
+      <SegmentedControl.Item value="follow-only">나만 팔로우</SegmentedControl.Item>
+    </SegmentedControl.Root>
+  );
+}

src/Follow/components/FollowList.tsx

@@ -0,0 +1,76 @@
+import type { FollowDetectResponse, FollowDetectType } from "@/Follow/apis/follow";
+import { useCreateFollowUser } from "@/Follow/hooks/apis/useCreateFollowUser";
+import { useDeleteUnfollowUser } from "@/Follow/hooks/apis/useDeleteUnfollowUser";
+import UserListItemCard from "@/common/components/UserListItemCard";
+import UserProfileAvatar from "@/common/components/UserProfileAvatar";
+import { Button, Flex } from "@radix-ui/themes";
+import { Text } from "@radix-ui/themes";
+import toast, { Toaster } from "react-hot-toast";
+
+interface FollowListProps {
+  type: FollowDetectType;
+  userList: FollowDetectResponse["userList"];
+}
+
+export function FollowList({ type, userList }: FollowListProps) {
+  const { mutateAsync: unfollow } = useDeleteUnfollowUser();
+  const { mutateAsync: follow } = useCreateFollowUser();
+
+  return (
+    <>
+      <Flex direction="column" gap="2" css={{ padding: "0 2rem" }}>
+        {userList.map((user) => (
+          <UserListItemCard key={user.githubUserId}>
+            <Flex justify="between" align="center">
+              <Flex gap="4" align="center">
+                <UserProfileAvatar src={user.profileImgUrl} />
+
+                <Text size="2" weight="medium">
+                  {user.username}
+                </Text>
+              </Flex>
+              <Flex gap="3">
+                {type === "followed-only" ? (
+                  <Button
+                    color="indigo"
+                    variant="soft"
+                    size="1"
+                    css={{ cursor: "pointer" }}
+                    onClick={async () => {
+                      try {
+                        await follow(user.githubUserId);
+                        toast.success("팔로우에 성공했습니다.");
+                      } catch (e) {
+                        toast.error("팔로우에 실패했습니다. 다시 시도해주세요");
+                      }
+                    }}
+                  >
+                    Follow
+                  </Button>
+                ) : (
+                  <Button
+                    color="indigo"
+                    variant="soft"
+                    size="1"
+                    css={{ cursor: "pointer" }}
+                    onClick={async () => {
+                      try {
+                        await unfollow(user.githubUserId);
+                        toast.success("언팔로우에 성공했습니다.");
+                      } catch (e) {
+                        toast.error("언팔로우에 실패했습니다. 다시 시도해주세요");
+                      }
+                    }}
+                  >
+                    Unfollow
+                  </Button>
+                )}
+              </Flex>
+            </Flex>
+          </UserListItemCard>
+        ))}
+      </Flex>
+      <Toaster position="bottom-center" />
+    </>
+  );
+}