Merge pull request #497 from boostcampwm2023/FE/feature/#495-로그인-팝업-컴…

…포넌트-작성

Fe/feature/#495 로그인 팝업 컴포넌트 작성

frontend/src/business/hooks/usePopup/useLoginPopup.tsx

@@ -0,0 +1,17 @@
+import LoginPopup from '@components/Popup/LoginPopup';
+
+import useOverlay from '@business/hooks/useOverlay';
+
+interface UseLoginPopupParams {
+  moveAiChat: () => void;
+}
+
+export function useLoginPopup({ moveAiChat }: UseLoginPopupParams) {
+  const { open } = useOverlay();
+
+  const openLoginPopup = () => {
+    open(() => <LoginPopup moveAiChat={moveAiChat}></LoginPopup>);
+  };
+
+  return { openLoginPopup };
+}

frontend/src/components/Buttons/Button.tsx

@@ -10,15 +10,28 @@ interface ButtonProps {
   children?: React.ReactNode;
   circle?: boolean;
   onClick?: () => void;
+  width?: number;
+  height?: number;
 }
 
-function Button({ size = 'm', color = 'active', disabled = false, children, onClick, circle = false }: ButtonProps) {
+function Button({
+  size = 'm',
+  color = 'active',
+  disabled = false,
+  children,
+  onClick,
+  circle = false,
+  width,
+  height,
+}: ButtonProps) {
   return (
     <button
       disabled={disabled}
       className={`btn flex content-center rounded-full border-transparent hover:scale-110 hover:text-weak 
       ${buttonSizeMap[size]} ${ButtonColorMap[color]} ${!circle && 'pr-20 pl-20'}
-      md:display-bold14 sm:display-bold12 w-fit h-fit min-w-fit min-h-fit`}
+      md:display-bold14 sm:display-bold12
+      ${width ? `w-${width}` : 'w-fit min-w-fit'}
+      ${height ? `w-${height}` : 'h-fit min-h-fit'}`}
       onClick={onClick}
     >
       {children}

frontend/src/components/Buttons/KakaoLoginButton.tsx

@@ -1,15 +1,29 @@
 import { useKakaoOAuth } from '@business/hooks/useAuth';
 
-function KakaoLoginButton() {
+import { Icon } from '@iconify/react/dist/iconify.js';
+
+import Button from './Button';
+
+interface KakaoLoginButtonProps {
+  width?: number;
+}
+
+function KakaoLoginButton({ width }: KakaoLoginButtonProps) {
   const { requestAuthorization } = useKakaoOAuth();
 
   return (
-    <button className="absolute">
-      <img
-        src="/kakao_login_medium_wide.png"
-        onClick={requestAuthorization}
-      />
-    </button>
+    <Button
+      color="kakao"
+      width={width}
+      onClick={requestAuthorization}
+    >
+      <div className="relative w-full h-full text-center">
+        <div className="absolute h-full flex-with-center">
+          <Icon icon="f7:chat-bubble-fill" />
+        </div>
+        <div className="pl-12">카카오로 시작하기</div>
+      </div>
+    </Button>
   );
 }
 

frontend/src/components/Popup/LoginPopup.tsx

@@ -0,0 +1,28 @@
+import { Button, KakaoLoginButton } from '@components/Buttons';
+
+interface LoginPopupProps {
+  moveAiChat: () => void;
+}
+export default function LoginPopup({ moveAiChat }: LoginPopupProps) {
+  return (
+    <div className="w-[100vw] h-[100vh] flex-with-center">
+      <div className="flex flex-col gap-18 surface-content rounded p-24 shadow-popup">
+        <div className="flex-with-center p-16 display-medium16 text-center">
+          로그인을 하면
+          <br />
+          이전 상담 기록을 다시 볼 수 있어요
+        </div>
+        <div className="w-full flex-with-center flex-col gap-16">
+          <KakaoLoginButton width={240} />
+          <Button
+            color="cancel"
+            width={240}
+            onClick={moveAiChat}
+          >
+            로그인 없이 타로 볼래요
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/constants/colors.ts

@@ -5,6 +5,7 @@ export const iconColorMap = {
   textWeak: 'text-weak',
   textWhite: 'text-white-default',
   kakaoIcon: 'kakao-icon',
+  kakao: 'text-kakao',
 };
 
 export type IconColor = keyof typeof iconColorMap;
@@ -15,6 +16,7 @@ export const ButtonColorMap: Record<string, string> = {
   disabled: 'surface-box text-weak',
   dark: 'surface-alt text-white',
   transparent: 'bg-transparent hover:bg-transparent hover:border-transparent',
+  kakao: 'surface-kakao text-kakao',
 };
 
 export type ButtonColor = keyof typeof ButtonColorMap;

frontend/src/pages/HomePage/HomePage.tsx

@@ -1,32 +1,31 @@
 import { useNavigate } from 'react-router-dom';
 
 import Background from '@components/Background';
-import { Button, KakaoLoginButton } from '@components/Buttons';
+import { Button } from '@components/Buttons';
+
+import { useLoginPopup } from '@business/hooks/usePopup/useLoginPopup';
 
 function HomePage() {
   const navigate = useNavigate();
 
-  const moveAiChat = () => {
-    navigate('/chat/ai');
-  };
+  const moveAiChat = () => navigate('/chat/ai');
+
+  const { openLoginPopup } = useLoginPopup({ moveAiChat });
 
   const moveHumanChat = () => {
     navigate('/chat/human', { state: { host: true } });
   };
 
   return (
     <Background>
-      <div>
-        <KakaoLoginButton />
-        <div className="relative top-75 flex gap-36 z-1">
-          <Button onClick={moveAiChat}>AI에게 타로보기</Button>
-          <Button
-            onClick={moveHumanChat}
-            color="dark"
-          >
-            채팅방 개설하기
-          </Button>
-        </div>
+      <div className="relative top-75 flex gap-36 z-1">
+        <Button onClick={openLoginPopup}>AI에게 타로보기</Button>
+        <Button
+          onClick={moveHumanChat}
+          color="dark"
+        >
+          채팅방 개설하기
+        </Button>
       </div>
     </Background>
   );

frontend/tailwind.config.js

@@ -120,6 +120,7 @@ export default {
         '.text-weak': { color: '#879298' },
         '.text-white-default': { color: '#FFFFFF' },
         '.text-white-alt': { color: '#d7dde4' },
+        '.text-kakao': { color: 'rgba(0, 0, 0, 0.9)' },
         '.kakao-icon': { color: '#FEE500' },
         '.display-bold24': themeBase.bold_L,
         '.display-bold16': themeBase.bold_M,
@@ -152,6 +153,7 @@ export default {
         '.surface-content': { background: '#FFFFFF' },
         '.surface-box': { background: '#ECECEC' },
         '.surface-box-alt': { background: '#7390B1' },
+        '.surface-kakao': { background: '#FEE500' },
       };
       addComponents(surfaceTheme);
     },