Merge branch 'develop' into feature/11/icon-component

src/app/test/Staging.tsx

@@ -1,19 +1,21 @@
-import ProgressBar from "@/component/ProgressBar/ProgressBar.tsx";
-import {useState} from "react";
-import {css} from "@emotion/react";
+import Button from "@/component/Button/Button.tsx";
+import { ButtonProvider } from "@/component/Button/ButtonProvider.tsx";
+import { DefaultLayout } from "@/layout/DefaultLayout.tsx";
 
 export default function Staging() {
+  return (
+    <DefaultLayout>
+      <Button> 그냥 그저 그런 버튼 </Button>
+      <Button colorSchema={"gray"}> 그냥 그저 그런 버튼 </Button>
+      <Button colorSchema={"sky"}> 그냥 그저 그런 버튼 </Button>
+      <Button colorSchema={"primary"}> 그냥 그저 그런 버튼 </Button>
 
-    const [page, setPage] = useState(0);
-
-    return (
-        <section css={css`
-            padding-top: 50px;
-        `}>
-            <ProgressBar curPage={page} lastPage={10}/>
-            <div> 현재 페이지 넘버 {page}</div>
-            <button onClick={() => setPage(page + 1)}> 현재 페이지 + 1</button>
-            <button onClick={() => setPage(page - 1)}> 현재 페이지 - 1</button>
-        </section>
-    )
-}
+      <ButtonProvider>
+        <ButtonProvider.Primary>기본 버튼</ButtonProvider.Primary>
+        <ButtonProvider.Sky>하늘색 버튼</ButtonProvider.Sky>
+        <ButtonProvider.Gray>회색 버튼</ButtonProvider.Gray>
+        <ButtonProvider.Primary disabled={true}>비활성화 버튼</ButtonProvider.Primary>
+      </ButtonProvider>
+    </DefaultLayout>
+  );
+}

src/component/Button/Button.tsx

@@ -0,0 +1,47 @@
+import { css } from "@emotion/react";
+import { PropsWithChildren } from "react";
+
+export type ButtonProps = {
+  colorSchema?: string;
+  disabled?: boolean;
+} & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "type">;
+
+export default function Button({ children, colorSchema = "primary", disabled = false, ...props }: PropsWithChildren<ButtonProps>) {
+  return (
+    <button
+      css={css`
+        border-radius: 0.6rem;
+        color: white;
+        background-color: #212529;
+        width: 100%;
+        height: 4.8rem;
+        padding: 1.4rem 0;
+        border: none;
+        font-size: 1.6rem;
+        cursor: pointer;
+
+        // FIXME: 추후 디자인 토큰 나오면 세부 수정 진행 필요
+        ${colorSchema === "sky" &&
+        css`
+          background-color: #608dff;
+        `}
+        ${colorSchema === "gray" &&
+        css`
+          background-color: #f1f3f5;
+          color: #868e96;
+        `}
+      
+        ${disabled &&
+        css`
+          background-color: #c8cccf;
+          color: rgba(33, 37, 41, 0.7);
+          cursor: default;
+        `}
+      `}
+      {...props}
+      disabled={disabled}
+    >
+      {children}
+    </button>
+  );
+}

src/component/Button/ButtonProvider.tsx

@@ -0,0 +1,43 @@
+import { css } from "@emotion/react";
+import { Children, cloneElement, isValidElement, PropsWithChildren } from "react";
+
+import Button, { ButtonProps } from "@/component/Button/Button.tsx";
+
+const Primary = ({ ...props }) => {
+  return <Button colorSchema={"primary"} {...props} />;
+};
+
+const Sky = ({ ...props }) => {
+  return <Button colorSchema={"sky"} {...props} />;
+};
+
+const Gray = ({ ...props }) => {
+  return <Button colorSchema={"gray"} {...props} />;
+};
+
+export const ButtonProvider = ({ children, ...props }: PropsWithChildren<ButtonProps>) => {
+  return (
+    <div
+      css={css`
+        display: flex;
+        flex-direction: column;
+        position: sticky;
+        bottom: 0;
+
+        padding: 4rem 0 2rem 0;
+        margin-top: auto;
+        row-gap: 0.6rem;
+      `}
+    >
+      {Children.map(children, (child) => {
+        if (isValidElement(child)) {
+          return cloneElement(child, { ...props });
+        }
+      })}
+    </div>
+  );
+};
+
+ButtonProvider.Primary = Primary;
+ButtonProvider.Gray = Gray;
+ButtonProvider.Sky = Sky;

src/layout/DefaultLayout.tsx

@@ -0,0 +1,24 @@
+import { css } from "@emotion/react";
+import { Fragment, PropsWithChildren } from "react";
+
+export function DefaultLayout({ children }: PropsWithChildren) {
+  return (
+    <Fragment>
+      {/* FIXME: 헤더 컴포넌트 작업 시, 해당 헤더 엘리먼트 제거 */}
+      <header
+        css={css`
+          height: 4.6rem;
+        `}
+      />
+      <main
+        css={css`
+          flex: 1 1 0;
+          display: flex;
+          flex-direction: column;
+        `}
+      >
+        {children}
+      </main>
+    </Fragment>
+  );
+}

src/layout/GlobalLayout.tsx

@@ -0,0 +1,26 @@
+import { css } from "@emotion/react";
+import { Outlet } from "react-router-dom";
+
+export default function GlobalLayout() {
+  return (
+    <div
+      css={css`
+        width: 100vw;
+        max-width: 48rem;
+        min-height: 100dvh;
+        box-shadow:
+          0 0.1rem 0.3rem 0 rgb(0 0 0 / 0.1),
+          0 0.1rem 0.2rem -0.1rem rgb(0 0 0 / 0.1);
+        margin: 0 auto;
+        padding: 0 2rem;
+        box-sizing: border-box;
+
+        display: flex;
+        flex-direction: column;
+        background-color: #f1f3f5;
+      `}
+    >
+      <Outlet />
+    </div>
+  );
+}

src/router/index.tsx

@@ -2,24 +2,24 @@ import { Fragment } from "react";
 import { createBrowserRouter, RouterProvider } from "react-router-dom";
 
 import MainPage from "@/app/MainPage.tsx"; /* FIXME - 실제 메인 페이지 작성 후 대체해주세요. */
-import { DefaultLayout } from "@/layout/default.tsx";
 import Staging from "@/app/test/Staging.tsx";
+import GlobalLayout from "@/layout/GlobalLayout.tsx";
 
 const routerChildren = [
   {
     path: "/",
     element: <MainPage />,
   },
   {
-    path: '/staging',
-    element: <Staging/>
-  }
+    path: "/staging",
+    element: <Staging />,
+  },
 ];
 
 const router = createBrowserRouter([
   {
     path: "/",
-    element: <DefaultLayout />,
+    element: <GlobalLayout />,
     errorElement: <Fragment />,
     children: routerChildren,
   },