rename: common/feature -> common/features

apps/common/features/src/app/index.tsx

@@ -0,0 +1,18 @@
+import "./styles/base.css";
+import "./styles/components.css";
+import { AppProvider } from "./providers";
+import { cookies } from "next/headers";
+
+const App = async ({ children }: Readonly<{ children: React.ReactNode }>) => {
+  const theme = (await cookies()).get("site-theme-key");
+
+  return (
+    <html lang="ko" data-theme={theme?.value}>
+      <body>
+        <AppProvider>{children}</AppProvider>
+      </body>
+    </html>
+  );
+};
+
+export { App };

apps/common/features/src/app/providers/app-provider.tsx

@@ -0,0 +1,28 @@
+"use client";
+
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { ConfirmProvider } from "@frontend-opensource/use-react-hooks";
+import { AuthWrapper } from "@/entities/auth";
+import { MenuWrapper } from "@/entities/menu";
+import { StoreProvider } from "@/shared/providers";
+import { AlertDialog } from "@/shared/ui/alert-dialog";
+import { ConfirmDialog } from "@/shared/ui/confirm-dialog";
+
+const AppProvider = ({ children }: Readonly<{ children: React.ReactNode }>) => {
+  const queryClient = new QueryClient();
+  return (
+    <QueryClientProvider client={queryClient}>
+      <StoreProvider>
+        <ConfirmProvider>
+          <AuthWrapper>
+            <MenuWrapper>{children}</MenuWrapper>
+            <AlertDialog />
+            <ConfirmDialog />
+          </AuthWrapper>
+        </ConfirmProvider>
+      </StoreProvider>
+    </QueryClientProvider>
+  );
+};
+
+export { AppProvider };

apps/common/features/src/app/providers/index.ts

@@ -0,0 +1 @@
+export { AppProvider } from "./app-provider";

apps/common/features/src/app/styles/base.css

@@ -0,0 +1,11 @@
+@import "@common/assets/styles/base.css";
+@import "@common/assets/styles/diveicon.css";
+
+@tailwind base;
+@tailwind utilities;
+
+html,
+body {
+  font-family: "Noto Sans KR", sans-serif;
+  font-size: 10px;
+}

apps/common/features/src/app/styles/components.css

@@ -0,0 +1,129 @@
+.card {
+  position: relative;
+  margin: 0.6rem;
+  box-sizing: border-box;
+  min-height: 2rem;
+  border-radius: 0.5rem;
+  padding: 0.6rem;
+  font-size: 1.3rem;
+  color: #666;
+}
+
+.card_width10 {
+  width: calc(10% - 12px);
+}
+
+.card_width20 {
+  width: calc(20% - 12px);
+}
+
+.card_width25 {
+  width: calc(25% - 12px);
+}
+
+.card_width30 {
+  width: calc(30% - 12px);
+}
+
+.card_width33 {
+  width: calc(33.333% - 12px);
+}
+
+.card_width40 {
+  width: calc(40% - 12px);
+}
+
+.card_width45 {
+  width: calc(45% - 12px);
+}
+
+.card_width50 {
+  width: calc(50% - 12px);
+}
+
+.card_width60 {
+  width: calc(60% - 12px);
+}
+
+.card_width66 {
+  width: calc(66.666% - 12px);
+}
+
+.card_width70 {
+  width: calc(70% - 12px);
+}
+
+.card_width75 {
+  width: calc(75% - 12px);
+}
+
+.card_width80 {
+  width: calc(80% - 12px);
+}
+
+.card_width90 {
+  width: calc(90% - 12px);
+}
+
+.card_width100 {
+  width: calc(100% - 12px);
+}
+
+.card_nopadding {
+  padding: 0 !important;
+}
+
+.card_nomargin {
+  width: 100%;
+  margin: 0 !important;
+  padding: 0 !important;
+}
+
+.topline {
+  border-top: 1px solid #ccc;
+}
+
+.bottomline {
+  border-bottom: 1px solid #e6eef3;
+  background: #fff;
+}
+
+.card-border {
+  border: 1px solid #dbe2e6;
+  background-color: rgba(255, 255, 255, 0.6);
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+}
+
+.card-header {
+  margin-top: -0.6rem;
+  margin-left: -0.6rem;
+  margin-right: -0.6rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-bottom: 1px solid #e1e7eb;
+  padding: 1rem;
+}
+
+.card-footer {
+  margin-left: -0.6rem;
+  margin-right: -0.6rem;
+  margin-top: 0.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-top: 1px solid #e1e7eb;
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+}
+
+/* 블랙 테마 */
+[data-theme="black"] {
+  .card-border {
+    background-color: rgba(255, 255, 255, 0.065);
+    border-color: #38383a;
+  }
+  .card-header {
+    border-bottom-color: #3f4042;
+  }
+}