Merge pull request #26 from 8princesses/feat/work-through

Feat/work through

.env.development

@@ -0,0 +1,2 @@
+NEXT_PUBLIC_API_URL=https://api.modumozu.com/
+NEXT_PUBLIC_KAKAO_KEY="5d83cd0432c767f46c20dceb0f8f3947"

.env.production

@@ -1 +1 @@
-NEXT_PUBLIC_API_URL=URL
+NEXT_PUBLIC_API_URL=https://api.modumozu.com/

src/api/common.ts

@@ -1,16 +1,22 @@
-import axios, { AxiosInstance, AxiosRequestConfig } from 'axios';
+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/api/kakao/route.ts

@@ -0,0 +1,13 @@
+import { NextResponse } from "next/server";
+
+export async function GET() {
+  const res = await fetch("https://api.modumozu.com/oauth2/authorization/kakao", {
+    headers: {
+      Accept: "application / json",
+    },
+  });
+  console.log("res ==> ", res);
+  const data = await res.json();
+  console.log("data ==> ", data);
+  return NextResponse.json({ data });
+}

src/app/globals.css

@@ -93,6 +93,7 @@ video {
   border: 0;
   font-family: pretendard, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell,
     "Open Sans", "Helvetica Neue", sans-serif;
+  box-sizing: border-box;
 }
 
 article,
@@ -111,6 +112,10 @@ section {
 
 body {
   line-height: 1;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
 }
 
 ol,

src/app/kakao/page.tsx

@@ -0,0 +1,91 @@
+"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 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/layout.tsx

@@ -19,6 +19,10 @@ export const metadata: Metadata = {
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
     <html lang="ko" className={myFont.className}>
+      <head>
+        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+        <script src="https://developers.kakao.com/sdk/js/kakao.js"></script>
+      </head>
       <body>
         <QueryProviders>
           <StyledComponentsRegistry>

src/app/on-boarding/page.tsx

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

src/app/page.tsx

@@ -1,3 +1,5 @@
+import WorkThrough from "@/components/workThrough";
+
 export default function Home() {
-  return <div>모두모주</div>;
+  return <WorkThrough />;
 }

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/KakaoLoginButton.tsx

@@ -0,0 +1,34 @@
+"use client";
+
+import colors from "@/styles/colors";
+import { getFonts } from "@/styles/fonts";
+import KakaoLoginIcon from "@/svg/KakaoLoginIcon";
+import { FC } from "react";
+import styled from "styled-components";
+
+interface KakaoLoginButtonProps {
+  onClick: () => void;
+}
+
+const KakaoLoginButton: FC<KakaoLoginButtonProps> = ({ onClick }) => {
+  return (
+    <KakaoLoginButtonWrap onClick={onClick}>
+      <KakaoLoginIcon />
+      <span>카카오로 간편 로그인</span>
+    </KakaoLoginButtonWrap>
+  );
+};
+
+export default KakaoLoginButton;
+
+const KakaoLoginButtonWrap = styled.button`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  padding: 6px 0;
+  background-color: #fee500;
+  border-radius: 26px;
+  color: ${colors.FONT_LIGHT.PRIMARY};
+  ${getFonts("BUTTON1_BOLD")}
+`;

src/components/workThrough/WorkThroughContent.tsx

@@ -0,0 +1,43 @@
+"use client";
+
+import { FC, ReactNode } from "react";
+import styled from "styled-components";
+
+interface WorkThroughContentProps {
+  header: ReactNode;
+  content: ReactNode;
+  blur?: boolean;
+}
+
+const WorkThroughContent: FC<WorkThroughContentProps> = ({ header, content, blur = true }) => {
+  return (
+    <>
+      {header}
+      <WorkThroughWrap>
+        <Content>{content}</Content>
+        {blur && <Blur />}
+      </WorkThroughWrap>
+    </>
+  );
+};
+
+export default Object.assign(WorkThroughContent);
+
+const WorkThroughWrap = styled.div`
+  flex: 1;
+  position: relative;
+  margin-top: 20px;
+  height: 30px;
+  overflow: hidden;
+`;
+const Content = styled.div`
+  margin: 60px auto 0px auto;
+  width: 70%;
+`;
+const Blur = styled.div`
+  position: absolute;
+  height: 375px;
+  bottom: 0;
+  width: 100%;
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0) -11.99%, #fff 27.38%);
+`;