Review용 PR

.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

.gitignore

@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

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.

apis/follow/deleteFollower.ts

@@ -0,0 +1,7 @@
+import { instance } from "..";
+
+export const deleteFollower = async (username: string) => {
+  const response = await instance.delete(`/user/following/${username}`);
+
+  return response;
+};

apis/follow/putFollower.ts

@@ -0,0 +1,7 @@
+import { instance } from "..";
+
+export const putFollower = async (username: string) => {
+  const response = await instance.put(`/user/following/${username}`);
+
+  return response;
+};

apis/index.ts

@@ -0,0 +1,15 @@
+import axios, { AxiosInstance } from "axios";
+
+export const instance: AxiosInstance = axios.create({
+  baseURL: process.env.NEXT_PUBLIC_BASE_URL,
+  headers: {
+    Accept: "application/vnd.github+json",
+    "X-GitHub-Api-Version": "2022-11-28",
+    "If-None-Match": "",
+  },
+});
+
+// token 입력 후 헤더에 저장하는 함수
+export const setInstanceToken = (token: string) => {
+  instance.defaults.headers.common["Authorization"] = `Bearer ${token}`;
+};

apis/user/getUserFollowInfo.ts

@@ -0,0 +1,16 @@
+import { UserTypes } from "@/types/user/UserTypes";
+import { instance } from "..";
+
+const PER_PAGE = 100;
+
+export const getUserFollowInfo = async () => {
+  const { data: followingData } = await instance.get<Array<UserTypes>>(
+    `/user/following?per_page=${PER_PAGE}`
+  );
+
+  const { data: followersData } = await instance.get<Array<UserTypes>>(
+    `user/followers?per_page=${PER_PAGE}`
+  );
+
+  return { followingData, followersData };
+};

apis/user/getUserProfileInfo.ts

@@ -0,0 +1,7 @@
+import { UserProfileInfoTypes } from "@/types/user/UserTypes";
+import { instance } from "..";
+
+export const getUserProfileInfo = async () => {
+  const { data } = await instance.get<UserProfileInfoTypes>("/user");
+  return data;
+};

app/(home)/page.tsx

@@ -0,0 +1,27 @@
+import TokenInputContainer from "@/components/home/TokenInputContainer.tsx";
+import Link from "next/link";
+import * as styles from "../../styles/home/HomeContainerStyle.css.ts";
+
+const HomePage = () => {
+  return (
+    <section className={styles.HomeWrapper}>
+      <article className={styles.TokenBoxContainer}>
+        <div className={styles.TokenLinkBox}>
+          <Link
+            href={"https://github.com/settings/tokens"}
+            className={styles.TokenLinkBtn}
+            target="_blank"
+          >
+            Github Token 만들러 가기
+          </Link>
+          <p className={styles.TokenInfoText}>
+            ﹒ 토큰 발급 시 권한 user(Update ALL user data)를 체크해주세요!
+          </p>
+        </div>
+        <TokenInputContainer />
+      </article>
+    </section>
+  );
+};
+
+export default HomePage;

app/follow-list/page.tsx

@@ -0,0 +1,47 @@
+"use client";
+
+import { setInstanceToken } from "@/apis";
+import Error from "@/components/common/Error";
+import FollowList from "@/components/follow-list/FollowList";
+import UserProfile from "@/components/follow-list/UserProfile";
+import FollowListSkeleton from "@/components/follow-list/skeletonUi/FollowListSkeleton";
+import { useGetCombinedUserInfo } from "@/hooks/user/useGetCombinedUserInfo";
+import { getSessionStorageHandler } from "@/utils/getSessionStorageHandler";
+import * as styles from "../../styles/follow-list/FollowListPageContainerStyle.css";
+
+const FollowListPage = () => {
+  const token: string | null =
+    typeof window !== "undefined"
+      ? getSessionStorageHandler().getItem("token")
+      : null;
+  const isHasToken =
+    typeof window !== "undefined" &&
+    getSessionStorageHandler().hasItem("token");
+
+  const { isLoading, error, data } = useGetCombinedUserInfo();
+
+  if (!isHasToken || !token) return <Error />;
+  setInstanceToken(token);
+
+  const userProfileData = data[0];
+  const followData = data[1];
+
+  return (
+    <section className={styles.FollowListPageWrapper}>
+      {isLoading && <FollowListSkeleton />}
+      {error && <Error />}
+      {!isLoading && !error && (
+        <UserProfile
+          userProfile={userProfileData}
+          followCnt={{
+            following: followData.followingData.length,
+            followers: followData.followersData.length,
+          }}
+        />
+      )}
+      {!isLoading && !error && <FollowList followData={followData} />}
+    </section>
+  );
+};
+
+export default FollowListPage;

app/layout.tsx

@@ -0,0 +1,21 @@
+import type { Metadata } from "next";
+
+import Layout from "@/components/Layout";
+import "../styles/globalStyle.css";
+
+export const metadata: Metadata = {
+  title: "github 맞팔 탐지기",
+  description: "github 팔로우 상태를 보여주는 맞팔 탐지기입니다.",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="ko">
+      <Layout>{children}</Layout>
+    </html>
+  );
+}

components/Layout.tsx

@@ -0,0 +1,20 @@
+import { Inter } from "next/font/google";
+import React from "react";
+import * as styles from "../styles/common/LayoutStyle.css";
+import ReactQueryProvider from "./ReactQueryProvider";
+import Header from "./common/Header";
+
+const inter = Inter({ subsets: ["latin"] });
+
+const Layout = ({ children }: React.PropsWithChildren) => {
+  return (
+    <body className={inter.className}>
+      <ReactQueryProvider>
+        <Header />
+        <main className={styles.LayoutMainStyle}>{children}</main>
+      </ReactQueryProvider>
+    </body>
+  );
+};
+
+export default Layout;

components/ReactQueryProvider.tsx

@@ -0,0 +1,13 @@
+"use client";
+
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import React, { useState } from "react";
+
+const ReactQueryProvider = ({ children }: React.PropsWithChildren) => {
+  const [queryClient] = useState(new QueryClient());
+  return (
+    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+  );
+};
+
+export default ReactQueryProvider;

components/common/Error.tsx

@@ -0,0 +1,38 @@
+"use client";
+
+import * as styles from "@/styles/common/ErrorStyle.css";
+import { getSessionStorageHandler } from "@/utils/getSessionStorageHandler";
+import { useRouter } from "next/navigation";
+import { useEffect } from "react";
+
+const Error = () => {
+  const router = useRouter();
+
+  useEffect(() => {
+    // 에러 시 sessionStorage에 있는 token 정보 삭제
+    if (typeof window === undefined) return;
+    if (!getSessionStorageHandler().hasItem) return;
+
+    getSessionStorageHandler().removeItem("token");
+  }, []);
+
+  return (
+    <section className={styles.ErrorWrapper}>
+      <div className={styles.ErrorTxtContainer}>
+        <h2 className={styles.ErrorTitleTxt}>🥺 Error 🥺</h2>
+        <p className={styles.ErrorDescribTxt}>
+          ﹒올바른 token 값인지 확인해주세요
+        </p>
+      </div>
+      <button
+        className={styles.ErrorBackBtn}
+        type="button"
+        onClick={() => router.back()}
+      >
+        이전으로
+      </button>
+    </section>
+  );
+};
+
+export default Error;

components/common/Header.tsx

@@ -0,0 +1,22 @@
+import img_github_logo_white from "@/public/images/img_github_logo_white.png";
+import Image from "next/image";
+import Link from "next/link";
+import * as styles from "../../styles/common/HeaderStyle.css";
+
+const Header = () => {
+  return (
+    <header className={styles.HeaderWrapper}>
+      <Link href="/">
+        <Image
+          src={img_github_logo_white}
+          alt="깃허브-로고"
+          width={30}
+          height={30}
+        />
+      </Link>
+      <h1 className={styles.HeaderTitle}>깃허브 팔로우 탐지기</h1>
+    </header>
+  );
+};
+
+export default Header;

components/follow-list/FollowList.tsx

@@ -0,0 +1,50 @@
+import { LIST_TYPE } from "@/constants/follow-list/LIST_TYPE";
+import { UserFollowInfoDataTypes } from "@/types/user/UserTypes";
+import { useMemo } from "react";
+import * as styles from "../../styles/follow-list/FollowListStyle.css";
+import FollowListDetailWrapper from "./FollowListDetailWrapper";
+
+const FollowList = ({
+  followData,
+}: {
+  followData: UserFollowInfoDataTypes;
+}) => {
+  const { followingData, followersData } = followData;
+
+  const getIsMatchInfo = useMemo(() => {
+    // 맞팔 중인 사람들 리스트
+    const matchedList = followersData.filter((follower) => {
+      return followingData.some(
+        (following) => following.login === follower.login
+      );
+    });
+
+    // 나를 팔로우 한 사람들 중 내가 팔로우 하지 않은 사람들 리스트
+    const unMatchedList = followersData.filter((follower) => {
+      return !matchedList.includes(follower);
+    });
+
+    return [
+      { type: LIST_TYPE.unMatched, list: unMatchedList },
+      { type: LIST_TYPE.matched, list: matchedList },
+    ];
+  }, [followersData, followingData]);
+
+  const matchListData = getIsMatchInfo;
+
+  return (
+    <article className={styles.FollowListWrapper}>
+      {matchListData.map(({ type, list }) => {
+        return (
+          <FollowListDetailWrapper
+            key={type}
+            listType={type}
+            targetMatchList={list}
+          />
+        );
+      })}
+    </article>
+  );
+};
+
+export default FollowList;