250x250
Notice
Recent Posts
Recent Comments
Link
«   2025/08   »
일 월 화 수 목 금 토
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31
Tags more
Archives
Today
Total
관리 메뉴

y.developer

[TIL] Day 61 Recoil 활용한 부분 본문

카테고리 없음

[TIL] Day 61 Recoil 활용한 부분

y.developer 2023. 12. 29. 23:16
728x90

2023.12.29 금

 

 

 

 

 

DailyC 프로젝트에서 Recoil 사용하기

 

layout.tsx

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body className={jua.className}>
        <RecoilProvider>
          <GetProfile />
          <header className="flex h-[75px] items-center shadow-[0_4px_4px_rgba(0,0,0,0.25)]">
            <div className="container flex w-full items-center justify-between">
              <Link
                href={"/"}
                className="relative flex items-center gap-2 text-3xl text-orange"
              >
                <Image
                  src="/logo.svg"
                  alt="Next.js Logo"
                  width={50}
                  height={50}
                  priority
                />
                DailyC
              </Link>
              <ul className="flex gap-8 text-2xl">
                <Link href={"/write"}>
                  <li>글쓰기</li>
                </Link>
                <Link href={"/profilepage"}>
                  <li>마이페이지</li>
                </Link>
                <LoginAndLogoutBtn />
              </ul>
            </div>
          </header>
          {children}
        </RecoilProvider>
      </body>
    </html>
  );
}

 

 

 

state.ts

import { atom } from "recoil";

export const isLoginState = atom({
  key: "isLoginState",
  default: false,
});

export const userState = atom({
  key: "userState",
  default: {
    id: "",
    email: "",
    nickname: "",
    height: "",
    gender: "",
    userImg: "",
  },
});

 

 

 

LoginAndLogoutBtn.tsx

function LoginAndLogoutBtn() {
  const router = useRouter();
  const [isLogin, setIsLogin] = useRecoilState(isLoginState);

  const hendleLogout = () => {
    if (isLogin === false) return alert("로그인된 이메일이 없습니다.");
    logout();
    setIsLogin(false);
    alert(`로그아웃 되었습니다.
로그인 페이지로 이동합니다.`);
    router.push("/login");
  };

  return (
    <>
      {!isLogin ? (
        <Link href={"/login"}>
          <li>로그인</li>
        </Link>
      ) : (
        <button onClick={hendleLogout}>로그아웃</button>
      )}
    </>
  );
}

export default LoginAndLogoutBtn;

 

 

추후 추가 및 변경사항 있을 수 있음.

정리 필요~!

728x90