Squashed commit of the following:

commit d0659e0
Merge: 3c9fe3e 12758be
Author: Jeon Jinho <[email protected]>
Date:   Tue Jan 23 17:28:08 2024 +0900

    Merge pull request #144 from team-offonoff/fix/login-flow

    chore: add pr template

commit 12758be
Merge: 415f022 3c9fe3e
Author: Jeon Jinho <[email protected]>
Date:   Tue Jan 23 17:26:00 2024 +0900

    Merge branch 'dev' into fix/login-flow

commit 3c9fe3e
Merge: efac491 b4fd241
Author: Jeon Jinho <[email protected]>
Date:   Tue Jan 23 16:45:28 2024 +0900

    Merge pull request #143 from team-offonoff/Jinho1011-patch-1

    chore: add pr template

commit b4fd241
Author: Jeon Jinho <[email protected]>
Date:   Tue Jan 23 16:05:13 2024 +0900

    Create pull_request_template.md

commit 415f022
Author: 전진호 <[email protected]>
Date:   Tue Jan 23 15:49:28 2024 +0900

    feat: add term mutation api

commit df7633d
Author: 전진호 <[email protected]>
Date:   Tue Jan 23 15:02:58 2024 +0900

    feat: implements Terms component

commit be6d63b
Author: 전진호 <[email protected]>
Date:   Tue Jan 23 15:02:47 2024 +0900

    feat: toggle 약관동의 bottomsheet on submit

commit 3816501
Author: 전진호 <[email protected]>
Date:   Tue Jan 23 15:02:22 2024 +0900

    feat: add transparent props

commit 2bb7340
Author: 전진호 <[email protected]>
Date:   Tue Jan 23 15:02:12 2024 +0900

    feat: add checkbox component

commit e0610a8
Author: 전진호 <[email protected]>
Date:   Tue Jan 23 15:01:59 2024 +0900

    fix: add transparent props to bottomsheet

commit e99a4bf
Author: 전진호 <[email protected]>
Date:   Tue Jan 23 15:01:46 2024 +0900

    feat: add check icon

commit b292c88
Author: 전진호 <[email protected]>
Date:   Mon Jan 22 22:48:06 2024 +0900

    fix: genders value

commit 36779a0
Author: 전진호 <[email protected]>
Date:   Mon Jan 22 22:47:56 2024 +0900

    fix: file name error

commit 75ae65f
Author: 전진호 <[email protected]>
Date:   Mon Jan 22 20:52:04 2024 +0900

    fix: remove funnel from signup

commit a5ca53e
Author: 전진호 <[email protected]>
Date:   Mon Jan 22 20:42:22 2024 +0900

    feat: setUser when user is not newMember

commit e7e2379
Author: 전진호 <[email protected]>
Date:   Mon Jan 22 20:42:00 2024 +0900

    feat: add useAuthStore's user

commit 5e1637b
Author: 전진호 <[email protected]>
Date:   Mon Jan 22 20:41:27 2024 +0900

    fix: make nickname optional

commit f2c1b11
Author: 전진호 <[email protected]>
Date:   Mon Jan 22 20:41:08 2024 +0900

    chore: add serve script

commit ec39b94
Author: 전진호 <[email protected]>
Date:   Mon Jan 22 20:08:30 2024 +0900

    feat: add user store

commit 7392567
Author: 전진호 <[email protected]>
Date:   Mon Jan 22 18:17:14 2024 +0900

    chore: add zustand

commit f95bd5f
Author: 전진호 <[email protected]>
Date:   Mon Jan 22 17:44:43 2024 +0900

    fix: navigate to signup when new member signed up

.github/pull_request_template.md

@@ -0,0 +1,11 @@
+## What is this PR? 🔍
+- 무슨 목적/이유로 구현했는지
+
+### 🛠️ Issue
+- Closes #number
+
+## Changes 📝
+- 작업한 내용 적어주세요
+
+## To Reviewers 📢
+- 이 부분 좀 같이 봐주세요 / 혹은 하고 싶은 말

package.json

@@ -6,6 +6,7 @@
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",
+    "serve": "vite preview",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "lint:css": "stylelint './src/**/*.tsx'",
     "preview": "vite preview",
@@ -24,7 +25,8 @@
     "react-router-dom": "^6.16.0",
     "styled-components": "^6.0.8",
     "styled-normalize": "^8.0.7",
-    "swiper": "^11.0.4"
+    "swiper": "^11.0.4",
+    "zustand": "^4.5.0"
   },
   "devDependencies": {
     "@storybook/addon-essentials": "^7.4.0",

src/apis/oauth/signup.ts

@@ -1,5 +1,7 @@
 import { useMutation } from '@tanstack/react-query';
 
+import { OAuthResponse } from '@interfaces/api/oauth';
+
 import client from '@apis/fetch';
 
 interface SingnUpRequestDTO {
@@ -10,16 +12,34 @@ interface SingnUpRequestDTO {
   job: string;
 }
 
+type TermsConsetResponseDTO = Omit<OAuthResponse, 'newMember'>;
+
+interface TermsConsentRequestDTO {
+  memberId: number;
+  listen_marketing: boolean;
+}
+
 const signup = (req: SingnUpRequestDTO) => {
   return client.post({
     path: '/auth/signup/profile',
     body: req,
   });
 };
 
+const terms = (req: TermsConsentRequestDTO) => {
+  return client.post<TermsConsetResponseDTO>({
+    path: '/auth/signup/terms',
+    body: req,
+  });
+};
+
 const useSignup = () => {
   return useMutation({ mutationFn: signup });
 };
 
-export { useSignup };
-export type { SingnUpRequestDTO };
+const useTerms = () => {
+  return useMutation({ mutationFn: terms });
+};
+
+export { useSignup, useTerms };
+export type { SingnUpRequestDTO, TermsConsentRequestDTO };

src/assets/icons/index.ts

@@ -6,6 +6,7 @@ import NewAlarmIcon from './alarm-new.svg?react';
 import AppleIcon from './apple.svg?react';
 import BLogoIcon from './b-logo.svg?react';
 import BigDownChevronIcon from './big-down-chevron.svg?react';
+import CheckIcon from './check.svg?react';
 import ClockIcon from './clock.svg?react';
 import CloseIcon from './close.svg?react';
 import CommentIcon from './comment.svg?react';
@@ -37,6 +38,7 @@ export {
   AppleIcon,
   BigDownChevronIcon,
   BLogoIcon,
+  CheckIcon,
   ClockIcon,
   CloseIcon,
   CommentIcon,

src/components/commons/BottomSheet/BottomSheet.tsx

@@ -16,6 +16,7 @@ interface BottomSheetProps {
   setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
   snapPoints?: number[];
   initialSnap?: number;
+  transparent?: boolean;
   children: React.ReactNode;
 }
 
@@ -24,6 +25,7 @@ const BottomSheet = ({
   setIsOpen,
   snapPoints = [0.9, 0.7, 0],
   initialSnap = 0.7,
+  transparent = true,
   children,
 }: BottomSheetProps) => {
   const screenHeight = window.innerHeight;
@@ -110,6 +112,7 @@ const BottomSheet = ({
     <ReactPortal>
       <Backdrop
         onClick={handleOnClickBackdrop}
+        transparent={transparent}
         initial={{ opacity: 0 }}
         animate={{ opacity: 1 }}
         exit={{ opacity: 0 }}
@@ -158,15 +161,16 @@ const HandleBar = styled.div`
   border-radius: 5px;
 `;
 
-const Backdrop = styled(motion.div)`
+const Backdrop = styled(motion.div)<{ transparent: boolean }>`
   position: fixed;
   top: 0;
   left: 0;
   z-index: ${(props) => props.theme.zIndex.sheet};
   width: 100%;
   height: 100%;
 
-  /* background: rgb(0 0 0 / 50%); */
+  ${({ transparent }) =>
+    transparent ? 'background: transparent;' : 'background: rgb(0 0 0 / 50%);'}
 `;
 
 const Wrapper = styled(motion.div)`

src/components/commons/CheckBox/CheckBox.tsx

@@ -0,0 +1,58 @@
+import styled from 'styled-components';
+
+import { CheckIcon } from '@icons/index';
+
+import { Row } from '../Flex/Flex';
+import Text from '../Text/Text';
+
+interface CheckboxProps {
+  id: string;
+  checked: boolean;
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  children: React.ReactNode;
+}
+
+function Checkbox({ id, checked, onChange, children }: CheckboxProps) {
+  return (
+    <Row alignItems="center" gap={16}>
+      <CheckBoxLabel checked={checked} htmlFor={id}>
+        <HiddenCheckbox id={id} type="checkbox" onChange={onChange} checked={checked} />
+        {checked && <CheckIcon width="14px" height="14px" />}
+      </CheckBoxLabel>
+      <label htmlFor={id} style={{ userSelect: 'none' }}>
+        {children}
+      </label>
+    </Row>
+  );
+}
+
+export default Checkbox;
+
+const CheckBoxLabel = styled.label<{ checked: boolean }>`
+  position: relative;
+  display: inline-block;
+  width: 22px;
+  height: 22px;
+  cursor: pointer;
+  background: ${({ checked, theme }) =>
+    checked ? `${theme.colors.purple}` : 'rgb(77 59 124 / 20%)'};
+  border-radius: 3px;
+
+  & > svg {
+    position: absolute;
+    top: 3px;
+    left: 3.5px;
+  }
+`;
+
+const HiddenCheckbox = styled.input`
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: 0;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+  border: 0;
+`;

src/constants/signup.ts

@@ -8,10 +8,10 @@ export const JOBS = [
 export const GENDERS = [
   {
     label: '남성',
-    value: 'male',
+    value: 'MALE',
   },
   {
     label: '여성',
-    value: 'female',
+    value: 'FEMALE',
   },
 ];

src/hooks/useBottomSheet/useBottomSheet.tsx

@@ -5,10 +5,11 @@ import BottomSheet from '@components/commons/BottomSheet/BottomSheet';
 interface UseBottomSheetProps {
   snapPoints?: number[];
   initialSnap?: number;
+  transparent?: boolean;
 }
 
 const useBottomSheet = (props: UseBottomSheetProps) => {
-  const { snapPoints = [0.9, 0.7, 0], initialSnap = 0.7 } = props;
+  const { snapPoints = [0.9, 0.7, 0], initialSnap = 0.7, transparent = true } = props;
   const [isOpen, setIsOpen] = useState(false);
 
   const toggleSheet = useCallback(() => {
@@ -21,6 +22,7 @@ const useBottomSheet = (props: UseBottomSheetProps) => {
       setIsOpen={setIsOpen}
       snapPoints={snapPoints}
       initialSnap={initialSnap}
+      transparent={transparent}
     >
       {children}
     </BottomSheet>

src/interfaces/models/user.ts

@@ -0,0 +1,6 @@
+export interface User {
+  memberId: number;
+  nickname?: string;
+  accessToken?: string;
+  refrehToken?: string;
+}

src/routes/Auth/kakao/KakaoLogin.tsx

@@ -1,13 +1,17 @@
 import React, { useEffect } from 'react';
 import { useNavigate } from 'react-router';
+import { useAuthStore } from 'src/store/auth';
 
 import { kakaoLogin } from '@apis/oauth/kakao';
 
 import { ResponseError } from '@apis/fetch';
 
+import Login from '../login/Login';
+
 import { Container } from './KakaoLogin.styles';
 
 const KakaoLogin = () => {
+  const setUser = useAuthStore((state) => state.setUser);
   const kakaoCode = new URL(window.location.href).searchParams.get('code');
 
   const navigate = useNavigate();
@@ -17,7 +21,14 @@ const KakaoLogin = () => {
       try {
         const response = await kakaoLogin(kakaoCode);
         if (response && response.accessToken) {
-          response.newMember ? navigate('/onboard') : navigate('/');
+          if (response.newMember) {
+            navigate(`/signup`, {
+              state: { memberId: response.memberId },
+            });
+          } else {
+            setUser({ memberId: response.memberId, accessToken: response.accessToken });
+            navigate('/');
+          }
         }
       } catch (err) {
         if (err instanceof ResponseError) {
@@ -38,6 +49,10 @@ const KakaoLogin = () => {
     handleKakaoLogin();
   }, []);
 
-  return <Container>카카오로딩화면</Container>;
+  return (
+    <Container>
+      <Login />
+    </Container>
+  );
 };
 export default KakaoLogin;