AppBar Component 개발

src/app/login/Login.tsx

@@ -0,0 +1,14 @@
+import { DefaultLayout } from "@/layout/DefaultLayout";
+import SocialLoginButton from "@/component/button/SocialLoginButton";
+import { kakaoLogin } from "./kakao/kakaoLogin";
+import { googleLogin } from "./google/googleLogin";
+
+const Login = () => {
+  return (
+    <DefaultLayout appBarVisible={false}>
+      <SocialLoginButton type="kakao" handler={kakaoLogin} />
+      <SocialLoginButton type="google" handler={googleLogin} />
+    </DefaultLayout>
+  );
+};
+export default Login;

src/app/login/google/googleLogin.tsx

@@ -0,0 +1,3 @@
+export function googleLogin() {
+  console.log("구글 로그인 시도");
+}

src/app/login/KakaoLogin.tsx → src/app/login/kakao/kakaoLogin.tsx

@@ -1,18 +1,6 @@
-const Login = () => {
+export function kakaoLogin() {
   const REST_API_KEY: string = import.meta.env.VITE_REST_API_KEY;
   const REDIRECT_URI: string = import.meta.env.VITE_REDIRECT_URI;
   const link = `https://kauth.kakao.com/oauth/authorize?client_id=${REST_API_KEY}&redirect_uri=${REDIRECT_URI}&response_type=code`;
-
-  const loginHandler = () => {
-    window.location.href = link;
-  };
-
-  return (
-    <div>
-      <button type="button" onClick={loginHandler}>
-        Hello Kakao Login
-      </button>
-    </div>
-  );
-};
-export default Login;
+  window.location.href = link;
+}

src/component/common/Icon/Icon.tsx

@@ -14,7 +14,7 @@ type Props = {
 
 const DEFAULT_ICON_COLOR = "#000000";
 
-function Icon({ icon, color = DEFAULT_ICON_COLOR, size = "0.2rem", onClick }: Props) {
+function Icon({ icon, color = DEFAULT_ICON_COLOR, size = "2rem", onClick }: Props) {
   const SVGIcon = icons[icon];
   const widthRem = typeof size === "number" ? `${size}rem` : size;
 

src/component/common/appBar/index.tsx

@@ -0,0 +1,68 @@
+import { css } from "@emotion/react";
+import { useNavigate } from "react-router-dom";
+import Icon from "../Icon/Icon";
+
+export type AppBarProps = {
+  title?: string;
+  LeftComp?: React.ReactNode;
+  RightComp?: React.ReactNode;
+};
+
+//FIXME: 색깔 디자인 토큰에 따라 변경
+const Back = () => {
+  const navigate = useNavigate();
+
+  return (
+    <Icon
+      icon="ic_back"
+      onClick={() => {
+        navigate(-1);
+      }}
+    />
+  );
+};
+
+//FIXME : 디자인 토큰에 따라 색깔 변경, 폰트 수정
+const AppBar = ({ title, LeftComp = <Back />, RightComp = <div></div> }: AppBarProps) => {
+  return (
+    <>
+      <div
+        css={css`
+          width: 100%;
+          max-width: 48rem;
+          height: 4.8rem;
+          padding: 0 2rem;
+          background-color: transparent;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          position: fixed;
+          left: 50%;
+          transform: translateX(-50%);
+          box-sizing: border-box;
+        `}
+      >
+        {LeftComp}
+        <div
+          css={css`
+            position: absolute;
+            left: 50%;
+            transform: translateX(-50%);
+            font-size: 1.8rem;
+          `}
+        >
+          {title}
+        </div>
+        {RightComp}
+      </div>
+      <div
+        css={css`
+          width: 100%;
+          height: 4.8rem;
+        `}
+      />
+    </>
+  );
+};
+
+export default AppBar;

src/layout/DefaultLayout.tsx

@@ -1,15 +1,16 @@
 import { css } from "@emotion/react";
 import { Fragment, PropsWithChildren } from "react";
+import AppBar from "@/component/common/appBar";
+import { AppBarProps } from "@/component/common/appBar";
 
-export function DefaultLayout({ children }: PropsWithChildren) {
+type DefaultLayoutProps = PropsWithChildren<AppBarProps> & {
+  appBarVisible?: boolean;
+};
+
+export function DefaultLayout({ children, title, appBarVisible = true, LeftComp, RightComp }: DefaultLayoutProps) {
   return (
     <Fragment>
-      {/* FIXME: 헤더 컴포넌트 작업 시, 해당 헤더 엘리먼트 제거 */}
-      <header
-        css={css`
-          height: 4.6rem;
-        `}
-      />
+      {appBarVisible && <AppBar title={title} LeftComp={LeftComp} RightComp={RightComp} />}
       <main
         css={css`
           flex: 1 1 0;

src/router/index.tsx

@@ -2,6 +2,7 @@ import { Fragment } from "react";
 import { createBrowserRouter, RouterProvider } from "react-router-dom";
 
 import MainPage from "@/app/MainPage.tsx"; /* FIXME - 실제 메인 페이지 작성 후 대체해주세요. */
+import Login from "@/app/login/Login";
 import Staging from "@/app/test/Staging.tsx";
 import GlobalLayout from "@/layout/GlobalLayout.tsx";
 
@@ -14,6 +15,10 @@ const routerChildren = [
     path: "/staging",
     element: <Staging />,
   },
+  {
+    path: "/login",
+    element: <Login />,
+  },
 ];
 
 const router = createBrowserRouter([
@@ -26,4 +31,4 @@ const router = createBrowserRouter([
 ]);
 export const Routers = () => {
   return <RouterProvider router={router} />;
-};
+};