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

chore: add pr template

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;