Arooming · Arooming · Mar 29, 2024 · Mar 29, 2024 · Mar 29, 2024 · Apr 1, 2024
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,45 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules
+jspm_packages
+
+# Optional npm cache directory
+.npm
+
+# Optional REPL history
+.node_repl_history
+.next
+
+# Optional add
+.DS_Store
+
+.env.local
+
+.vscode
diff --git a/README.md b/README.md
@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
diff --git a/app/favicon.ico b/app/favicon.ico
diff --git a/app/follow-list/page.tsx b/app/follow-list/page.tsx
@@ -0,0 +1,25 @@
+"use client";
+
+import Loading from "@/common/Loading";
+import FollowList from "@/component/FollowList";
+import UserInfo from "@/component/UserInfo";
+import useGetFollowInfo from "@/libs/hook/useGetFollowInfo";
+import useGetUserInfo from "@/libs/hook/useGetUserInfo";
+import React from "react";
+
+const page = () => {
+  const { isLoading: userInfoLoading, data: userInfoData } = useGetUserInfo();
+  const { isLoading: followInfoLoading, data: followInfoData } =
+    useGetFollowInfo();
+
+  return userInfoLoading || followInfoLoading ? (
-  return userInfoLoading || followInfoLoading ? (
+const isLoading = useInfoLoading || followInfoLoading
+  return isLoading ? (
-  return userInfoLoading || followInfoLoading ? (
+const isLoading = useInfoLoading || followInfoLoading
+  return isLoading ? (
+    <Loading />
+  ) : (
+    <React.Fragment>
+      {userInfoData && <UserInfo userInfoData={userInfoData} />}
+      {followInfoData && <FollowList followInfoData={followInfoData} />}
+    </React.Fragment>
+  );
+};
+
+export default page;
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -0,0 +1,26 @@
+import CommonLayout from "@/common/CommonLayout";
+import type { Metadata } from "next";
+import { Inter } from "next/font/google";
+import React from "react";
+import "../style/global.css";
+
+const inter = Inter({ subsets: ["latin"] });
+
+export const metadata: Metadata = {
+  title: "Follow Detector",
+  description: "Following by Follow Detector App",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="ko">
+      <CommonLayout>
+        <body className={inter.className}>{children}</body>
+      </CommonLayout>
-      <CommonLayout>
-        <body className={inter.className}>{children}</body>
-      </CommonLayout>
+      <CommonLayout>
+       {children}
+      </CommonLayout>
-      <CommonLayout>
-        <body className={inter.className}>{children}</body>
-      </CommonLayout>
+      <CommonLayout>
+       {children}
+      </CommonLayout>
+    </html>
+  );
+}
diff --git a/app/page.tsx b/app/page.tsx
@@ -0,0 +1,66 @@
+"use client";
+
+import Link from "next/link";
+import { ChangeEvent, useState } from "react";
+import * as styles from "../style/Home/Home.css";
+
+export interface UserTypes {
+  login?: string;
+  bio?: string;
+  avatar_url?: string;
+}
+
+export default function Home() {
+  const [token, setToken] = useState("");
+
+  const handleChangeInput = (e: ChangeEvent<HTMLInputElement>) => {
+    setToken(e.target.value);
+  };
+
+  const handleClickBtn = () => {
+    sessionStorage.setItem("token", token);
+  };
+
+  return (
+    <main className={styles.HomeWrapper}>
+      <section className={styles.HomeContents}>
+        <div className={styles.TokenLinkBox}>
+          <Link
+            href={"https://github.com/settings/tokens"}
+            className={styles.TokenLinkBtn}
+          >
+            Github Token 만들러 가기
+          </Link>
+          <p className={styles.TokenInfoText}>
+            ﹒ 토큰 발급 시 권한 user(Update ALL user data)를 체크해주세요!
+          </p>
+        </div>
+
+        <article className={styles.TokenInputBox}>
+          <input
+            type="text"
+            placeholder="Github Token을 입력해주세요"
+            onChange={handleChangeInput}
+            className={styles.TokenInput}
+          />
+
+          {/* 추후 수정 방향 */}
+          {/* <Link
+            href={{ pathname: "/follow-list", query: { token: token } }}
+            as={"/follow-list"}
+          > */}
+          <Link href={"/follow-list"}>
+            <button
+              type="button"
+              onClick={handleClickBtn}
+              className={styles.TokenInputNextBtn}
+              disabled={token.length === 0}
+            >
+              나의 맞팔 확인하기
+            </button>
+          </Link>
+        </article>
+      </section>
+    </main>
+  );
+}
diff --git a/common/CommonLayout.tsx b/common/CommonLayout.tsx
@@ -0,0 +1,22 @@
+"use client";
+
+import { Inter } from "next/font/google";
+import React from "react";
+import { QueryClient, QueryClientProvider } from "react-query";
+import Header from "./Header";
+const inter = Inter({ subsets: ["latin"] });
+
+const queryClient = new QueryClient();
+
+const CommonLayout = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <body className={inter.className}>
+      <QueryClientProvider client={queryClient}>
+        <Header />
+        {children}
+      </QueryClientProvider>
+    </body>
+  );
+};
+
+export default CommonLayout;
diff --git a/common/Header.tsx b/common/Header.tsx
@@ -0,0 +1,19 @@
+import img_github_logo_white from "@/public/image/img_github_logo_white.png";
+import Image from "next/image";
+import * as styles from "../style/Common/Header.css";
+
+const Header = () => {
+  return (
+    <header className={styles.HeaderWrapper}>
+      <Image
+        src={img_github_logo_white}
+        alt="깃허브-로고"
+        width={30}
+        height={30}
+      />
+      <h1 className={styles.HeaderTitle}>깃허브 팔로우 탐지기</h1>
+    </header>
+  );
+};
+
+export default Header;
diff --git a/common/ListLayout.tsx b/common/ListLayout.tsx
@@ -0,0 +1,54 @@
+import useDeleteFollower from "@/libs/hook/useDeleteFollower";
+import usePutFollower from "@/libs/hook/usePutFollower";
+import { ListLayoutTypes } from "@/type/user";
+import Image from "next/image";
+import * as styles from "../style/Common/ListLayout.css";
+
+const ListLayout = ({ list, isUserInfo, isFollowingBtn }: ListLayoutTypes) => {
+  const putMuation = usePutFollower();
+  const deleteMutation = useDeleteFollower();
+
+  const handleClickFollowBtn = ({
+    isFollowingBtn,
+    login,
+  }: {
+    isFollowingBtn?: boolean;
+    login: string;
+  }) => {
+    isFollowingBtn ? putMuation.mutate(login) : deleteMutation.mutate(login);
+  };
+
+  return list.map(({ login, avatar_url }) => {
+    return (
+      <ul key={login} className={styles.contentsWrapper}>
+        {avatar_url && (
+          <Image
+            width={130}
+            height={130}
+            src={avatar_url}
+            alt={"유저-이미지"}
+            priority={true}
+            style={{ marginTop: "1rem" }}
+          />
+        )}
+        <div className={styles.followWrapper}>
+          <p className={styles.loginInfo}>{login}</p>
+
+          {!isUserInfo && (
+            <button
+              type="button"
+              className={isFollowingBtn ? styles.followBtn : styles.unfollowBtn}
+              onClick={() =>
+                login && handleClickFollowBtn({ isFollowingBtn, login })
+              }
+            >
+              {isFollowingBtn ? "팔로우" : "언팔로우"}
+            </button>
+          )}
+        </div>
+      </ul>
+    );
+  });
+};
+
+export default ListLayout;
diff --git a/common/Loading.tsx b/common/Loading.tsx
@@ -0,0 +1,17 @@
+"use client";
+
+import Lottie from "lottie-react";
+import animationData from "../public/lottie/lottie.json";
+import * as styles from "../style/Common/Loading.css";
+
+const Loading = () => {
+  return (
+    <section className={styles.LoadingPageItemContainer}>
+      <article className={styles.LottieWrapper}>
+        <Lottie animationData={animationData} />
+      </article>
+    </section>
+  );
+};
+
+export default Loading;
diff --git a/component/FollowList.tsx b/component/FollowList.tsx
@@ -0,0 +1,46 @@
+import ListLayout from "@/common/ListLayout";
+import { FollowInfoDataTypes } from "@/type/user";
+import * as styles from "../style/FollowList/FollowList.css";
+
+const FollowList = ({
+  followInfoData,
+}: {
+  followInfoData: FollowInfoDataTypes;
+}) => {
+  const { followingData, followersData } = followInfoData;
+
+  const matchedList = followersData.filter((follower) => {
+    return followingData.some(
+      (following) => following.login === follower.login
+    );
+  });
+
+  const unfollowingList = followersData.filter((follower) => {
+    return !matchedList.includes(follower);
+  });
+
+  const user = [matchedList, unfollowingList];
-  const user = [matchedList, unfollowingList];
+  const getUserList = useMemo( () => {
+    const matchedList = followersData.filter((follower) => {
+    return followingData.some(
+      (following) => following.login === follower.login
+    );
+  });
+
+  const unfollowingList = followersData.filter((follower) => {
+    return !matchedList.includes(follower);
+  });
+  
+  return [matchedList, unfollowingList]
+  }, [followersData, followingData])
-  const user = [matchedList, unfollowingList];
+  const getUserList = useMemo( () => {
+    const matchedList = followersData.filter((follower) => {
+    return followingData.some(
+      (following) => following.login === follower.login
+    );
+  });
+
+  const unfollowingList = followersData.filter((follower) => {
+    return !matchedList.includes(follower);
+  });
+  
+  return [matchedList, unfollowingList]
+  }, [followersData, followingData])
+
+  return (
+    <section className={styles.followListWrapper}>
+      {user.map((list, idx) => {
+        return (
+          <article key={idx} className={styles.listWrapper}>
+            <div className={styles.titleWrapper}>
+              <p className={styles.title}>
+                {list === matchedList
+                  ? "맞팔 중인 사용자"
+                  : "내가 팔로우 안 한 사용자"}
+              </p>
+              <p className={styles.title}>{`${list.length} 명`}</p>
+            </div>
+
+            <ListLayout list={list} isUserInfo={false} isFollowingBtn={list !== matchedList} />
-              <p className={styles.title}>
-                {list === matchedList
-                  ? "맞팔 중인 사용자"
-                  : "내가 팔로우 안 한 사용자"}
-              </p>
-              <p className={styles.title}>{`${list.length} 명`}</p>
-            </div>
-
-            <ListLayout list={list} isUserInfo={false} isFollowingBtn={list !== matchedList} />
+const isMatchedList = list ===matchedList
+              <p className={styles.title}>
+                {isMatchedList
+                  ? "맞팔 중인 사용자"
+                  : "내가 팔로우 안 한 사용자"}
+              </p>
+              <p className={styles.title}>{`${list.length} 명`}</p>
+            </div>
+
+            <ListLayout list={list} isUserInfo={false} isFollowingBtn={!isMtachedList} />
-              <p className={styles.title}>
-                {list === matchedList
-                  ? "맞팔 중인 사용자"
-                  : "내가 팔로우 안 한 사용자"}
-              </p>
-              <p className={styles.title}>{`${list.length} 명`}</p>
-            </div>
-
-            <ListLayout list={list} isUserInfo={false} isFollowingBtn={list !== matchedList} />
+const isMatchedList = list ===matchedList
+              <p className={styles.title}>
+                {isMatchedList
+                  ? "맞팔 중인 사용자"
+                  : "내가 팔로우 안 한 사용자"}
+              </p>
+              <p className={styles.title}>{`${list.length} 명`}</p>
+            </div>
+
+            <ListLayout list={list} isUserInfo={false} isFollowingBtn={!isMtachedList} />
+          </article>
+        );
+      })}
+    </section>
+  );
+};
+
+export default FollowList;
diff --git a/component/UserInfo.tsx b/component/UserInfo.tsx
@@ -0,0 +1,13 @@
+import ListLayout from "@/common/ListLayout";
+import { UserProfileInfoTypes } from "@/type/user";
+import * as styles from "../style/User/User.css";
+
+const UserInfo = ({ userInfoData }: { userInfoData: UserProfileInfoTypes }) => {
+  return (
+    <section className={styles.userInfoWrapper}>
+      <ListLayout list={[userInfoData]} isUserInfo={true} />
+    </section>
+  );
+};
+
+export default UserInfo;
diff --git a/libs/api/deleteFollower.ts b/libs/api/deleteFollower.ts
@@ -0,0 +1,8 @@
+import { client } from ".";
+
+const deleteFollower = async (login: string) => {
+  const { data } = await client().delete(`/user/following/${login}`);
+  return data;
+};
+
+export default deleteFollower;