@@ -0,0 +1,89 @@
+'use client';
+
+import { getFollowerList, getFollowingList } from '@/apis/getFollowList';
+import { checkState, followState, followerList, followingList, inputToken, loginClick } from '@/recoil/atoms';
+import { followList } from '@/types/types';
+import { useEffect } from 'react';
+import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil';
+import ListElement from './ListElement';
+
+export default function FollowList() {
+  const [followers, setFollowers] = useRecoilState(followerList);
+  const [followings, setFollowings] = useRecoilState(followingList);
+  const followBtnState = useRecoilValue(followState);
+  const setCheckState = useSetRecoilState(checkState);
+  const inputTokenValue = useRecoilValue(inputToken);
+  const [loginClickState, setLoginClickState] = useRecoilState(loginClick);
+
+  useEffect(() => {
+    getFollowingList(setFollowings, inputTokenValue);
+    getFollowerList(setFollowers, inputTokenValue);
+  }, []);
+
+  const followerID = followers.map(user => user.id);
+  const followingID = followings.map(user => user.id);
+
+  const followEachOther = followings.filter(user => {
+    return followerID.includes(user.id) && user;
+  });
+
+  const notFollowEachOther = followers.filter(user => {
+    return !followingID.includes(user.id) && user;
+  });
+
+  const onClickCheck = () => {
+    setCheckState(true);
+  };
+
+  const onClickRemove = () => {
+    setCheckState(false);
+  };
+
+  useEffect(() => {
+    onClickRemove();
+  }, [followBtnState]);
+
+  function handleClickLogin(login: string) {
+    setLoginClickState(prevlogin => (prevlogin === login ? ' ' : login));
+  }
+
+  useEffect(() => {
+    console.log(loginClickState);
+  }, [loginClickState, setLoginClickState]);
+
+  return (
+    <section className="commonBackground flex h-[480px] w-full flex-col">
+      <div className="flex justify-end gap-[14px] px-[25px] py-[20px]">
+        <button
+          className="commonButton h-[25px] w-[65px] bg-white text-black hover:bg-red hover:text-white"
+          onClick={onClickCheck}>
+          ✔️ 모두 선택
+        </button>
+        <button
+          className="commonButton h-[25px] w-[65px] bg-white text-black hover:bg-red hover:text-white"
+          onClick={onClickRemove}>
+          모두 해지
+        </button>
+      </div>
+      <div className="flex h-[350px] w-[340px] flex-col gap-[20px] overflow-scroll py-[5px]">
+        {followBtnState === 'follow'
+          ? followEachOther.map((user: followList) => {
+              const { id, login, avatar_url } = user;
+              return <ListElement key={id} id={id} login={login} avatar_url={avatar_url} />;
+            })
+          : notFollowEachOther.map((user: followList) => {
+              const { id, login, avatar_url } = user;
+              return (
+                <ListElement
+                  onClick={() => handleClickLogin(login)}
+                  key={id}
+                  id={id}
+                  login={login}
+                  avatar_url={avatar_url}
+                />
+              );
+            })}
+      </div>
+    </section>
+  );
+}

리뷰: 상태에 useEffect를 사용하면 정확히 언제 useEffect 안쪽이 호출되는지 추적하기 힘든 문제가 있어요.
이 경우에는 [공식 문서에서 제시하는 것](https://react.dev/learn/you-might-not-need-an-effect#sharing-logic-between-event-handlers) 처럼 로직을 follow 버튼이 선택되는 곳으로 옮기는 것이 좋을 것 같아요.