✨ 로그인 완료

일단 로컬 스토리지 다 넣었습니다....

src/api/common.ts

@@ -1,16 +1,22 @@
+import { getStorage } from "@/util/storage";
 import axios from "axios";
 
-const instance = axios.create({ baseURL: process.env.NEXT_PUBLIC_API_URL });
+const api = axios.create({
+  baseURL: process.env.NEXT_PUBLIC_API_URL,
+  headers: {
+    Authorization: `Bearer ${getStorage("ACCESS_TOKEN")}`,
+  },
+});
 
-instance.interceptors.request.use(
+api.interceptors.request.use(
   (instance) => {
     return instance;
   },
   (error) => {
     throw new Error(error);
   },
 );
-instance.interceptors.response.use(
+api.interceptors.response.use(
   (instance) => {
     return instance;
   },
@@ -19,4 +25,4 @@ instance.interceptors.response.use(
   },
 );
 
-export default instance;
+export default api;

src/app/kakao/page.tsx

@@ -1,10 +1,91 @@
-import { useEffect } from "react";
+"use client";
+
+import Button from "@/components/common/Button";
+import { BottomSheet } from "@/components/common/bottomSheet/BottomSheet";
+import AgreeAllButton from "@/components/kakao/AgreeAllButton";
+import Term from "@/components/kakao/Term";
+import TERMS from "@/constants/terms";
+import { setStorage } from "@/util/storage";
+import { useRouter } from "next/navigation";
+import { useEffect, useState } from "react";
+import styled from "styled-components";
 
 const Kakao = () => {
+  const router = useRouter();
+  const [agreedTerms, setAgreeTerms] = useState<number[]>([]);
+
+  const setTokens = () => {
+    const searchParams = new URL(window.location.href).searchParams;
+    const accessToken = searchParams.get("accessToken");
+    const refreshToken = searchParams.get("refreshToken");
+
+    if (accessToken && refreshToken) {
+      setStorage("ACCESS_TOKEN", accessToken);
+      setStorage("REFRESH_TOKEN", refreshToken);
+    }
+  };
+  const handleCheckAllClick = () => {
+    if (agreedTerms.length === TERMS.length) {
+      setAgreeTerms([]);
+    } else {
+      setAgreeTerms(TERMS.map((_, index) => index));
+    }
+  };
+  const handleCheckClick = (index: number) => {
+    if (agreedTerms.includes(index)) {
+      setAgreeTerms((prev) => prev.filter((prevIndex) => prevIndex !== index));
+    } else {
+      setAgreeTerms((prev) => prev.concat([index]));
+    }
+  };
+  const handleSignUpClick = async () => {
+    if (agreedTerms.length === TERMS.length) {
+      setTokens();
+      router.push("/on-boarding");
+    }
+  };
+
   useEffect(() => {
-    let code = new URL(window.location.href).searchParams.get("code");
-    console.log("code ==> ", code);
+    let token = new URL(window.location.href).searchParams.get("accessToken");
+
+    if (!token) {
+      router.push("/");
+    }
   }, []);
+
+  return (
+    <BottomSheet visible={true} handleOverlayClick={() => {}}>
+      <BottomSheetWrap>
+        <AgreeAllButton onClick={handleCheckAllClick} checked={agreedTerms.length === TERMS.length} />
+        <TermList>
+          {TERMS.map((term, index) => {
+            return (
+              <Term
+                key={term.title}
+                title={term.title}
+                link={term.link}
+                onCheckClick={() => handleCheckClick(index)}
+                checked={agreedTerms.includes(index)}
+              />
+            );
+          })}
+        </TermList>
+        <Button disabled={!(agreedTerms.length === TERMS.length)} onClick={handleSignUpClick} width="100%">
+          가입 완료
+        </Button>
+      </BottomSheetWrap>
+    </BottomSheet>
+  );
 };
 
 export default Kakao;
+
+const BottomSheetWrap = styled.div`
+  padding-bottom: 20px;
+`;
+const TermList = styled.div`
+  padding: 12px 16px 24px 16px;
+  > * + * {
+    margin-top: 9px;
+  }
+`;

src/app/on-boarding/page.tsx

@@ -1,5 +1,22 @@
+"use client";
+
+import { useEffect } from "react";
+
 const OnBoarding = () => {
-  return <div>온보딩</div>;
+  useEffect(() => {}, []);
+
+  return (
+    <div>
+      온보딩
+      <button
+        onClick={() => {
+          console.log("znzlemf", document.cookie);
+        }}
+      >
+        쿠키들
+      </button>
+    </div>
+  );
 };
 
 export default OnBoarding;

src/components/common/CheckBox.tsx

@@ -37,6 +37,8 @@ const CheckBox: FC<CheckBoxProps> = (props) => {
 export default CheckBox;
 
 const CheckBoxWrap = styled.label`
+  display: flex;
+  align-items: center;
   input {
     display: none;
   }

src/components/kakao/AgreeAllButton.tsx

@@ -0,0 +1,34 @@
+"use client";
+
+import styled from "styled-components";
+import CheckBox from "../common/CheckBox";
+import colors from "@/styles/colors";
+import { getFonts } from "@/styles/fonts";
+import { FC } from "react";
+
+interface AgreeAllButtonProps {
+  onClick: () => void;
+  checked: boolean;
+}
+
+const AgreeAllButton: FC<AgreeAllButtonProps> = ({ onClick, checked }) => {
+  return (
+    <AgreeAllButtonWrap>
+      <CheckBox type="background" checked={checked} onClick={onClick} />
+      전체 동의
+    </AgreeAllButtonWrap>
+  );
+};
+
+export default AgreeAllButton;
+const AgreeAllButtonWrap = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 16px;
+  width: 100%;
+  border: 1px solid ${colors.GRAY[2]};
+  border-radius: 12px;
+  ${getFonts("H4_SEMIBOLD")}
+  color:${colors.FONT_LIGHT.PRIMARY};
+`;

src/components/kakao/Term.tsx

@@ -0,0 +1,47 @@
+"use client";
+
+import colors from "@/styles/colors";
+import { getFonts } from "@/styles/fonts";
+import CaretIcon from "@/svg/CaretIcon";
+import { FC } from "react";
+import styled from "styled-components";
+import CheckBox from "../common/CheckBox";
+
+interface TermProps {
+  title: string;
+  link: string;
+  checked: boolean;
+  onCheckClick: () => void;
+}
+
+const Term: FC<TermProps> = ({ title, link, checked, onCheckClick }) => {
+  const handleShowDetailClick = () => {};
+
+  return (
+    <TermWrap>
+      <TermTitleWrap>
+        <CheckBox checked={checked} onClick={onCheckClick} />
+        <span>{title}</span>
+      </TermTitleWrap>
+      <TermDetailButton onClick={handleShowDetailClick} />
+    </TermWrap>
+  );
+};
+
+export default Term;
+
+const TermWrap = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+`;
+const TermTitleWrap = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 0 12px;
+  ${getFonts("H5_REGULAR")}
+  color:${colors.FONT_LIGHT.PRIMARY};
+`;
+const TermDetailButton = styled(CaretIcon.right)`
+  cursor: pointer;
+`;

src/components/workThrough/WorkThroughContent.tsx

@@ -1,6 +1,5 @@
 "use client";
 
-import DeleteIcon from "@/svg/DeleteIcon";
 import { FC, ReactNode } from "react";
 import styled from "styled-components";
 
@@ -22,36 +21,7 @@ const WorkThroughContent: FC<WorkThroughContentProps> = ({ header, content, blur
   );
 };
 
-const WorkThroughMainHeader = () => {
-  return (
-    <>
-      <WorkThroughHeader>
-        <SkipButton />
-      </WorkThroughHeader>
-      <div>
-        <Image src={"/images/logo_1.png"} />
-      </div>
-    </>
-  );
-};
-
-export default Object.assign(WorkThroughContent, {
-  mainHeader: WorkThroughMainHeader,
-});
-
-const WorkThroughHeader = styled.div`
-  display: flex;
-  justify-content: flex-end;
-  padding: 20px;
-`;
-
-const SkipButton = styled(DeleteIcon)`
-  cursor: pointer;
-`;
-const Image = styled.img`
-  width: 30px;
-  height: 30px;
-`;
+export default Object.assign(WorkThroughContent);
 
 const WorkThroughWrap = styled.div`
   flex: 1;
@@ -60,7 +30,6 @@ const WorkThroughWrap = styled.div`
   height: 30px;
   overflow: hidden;
 `;
-
 const Content = styled.div`
   margin: 60px auto 0px auto;
   width: 70%;

src/components/workThrough/WorkThroughMain.tsx

@@ -0,0 +1,42 @@
+"use client";
+
+import colors from "@/styles/colors";
+import { getFonts } from "@/styles/fonts";
+import styled from "styled-components";
+
+const Main = () => {
+  return (
+    <MainWrap>
+      <MainContentWrap>
+        <img src="/images/logo_1.png" width="157px" />
+        <MainTitle>모두를 위한 공모주</MainTitle>
+        <MainDescription>복잡한 신청 과정을 한 큐에! 누구나 쉽게 시작하는 공모주</MainDescription>
+      </MainContentWrap>
+    </MainWrap>
+  );
+};
+
+export default Main;
+
+const MainWrap = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: calc(100% - 120px);
+`;
+const MainContentWrap = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 220px;
+`;
+const MainTitle = styled.h1`
+  margin-top: 20px;
+  ${getFonts("H1_BOLD")}
+  color:${colors.FONT_LIGHT.PRIMARY};
+`;
+const MainDescription = styled.div`
+  margin-top: 8px;
+  ${getFonts("H3_REGULAR")};
+  color: ${colors.FONT_LIGHT.SECONDARY};
+`;