Merge commit '33cef5eb723bb2450866999436eac71baac0cfa0' into iipbs/common/main

.gitignore

@@ -19,3 +19,4 @@ apps/fo/.next/**/*
 
 # env
 .env*
+.qodo

README.md

@@ -192,3 +192,8 @@ http://dev.onasys.co.kr:8000
 
 ## Swagger
 http://dev.onasys.co.kr:8000/webjars/swagger-ui/index.html?urls.primaryName=attach-service
+
+## 개발 가이드
+- 사이드바 메뉴 클릭 시 "menuCd" 데이터 쿠키 저장 처리 
+- 쿠키명 : menu-code-key 
+- 해당 메뉴 쿠키 데이터 가져와 페이지 권한 및 상당 Breadcrumb 데이터 전달 처리 

apps/common/feature/.gitignore

@@ -0,0 +1,40 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+.env*

apps/common/feature/.prettierrc

@@ -0,0 +1,3 @@
+{
+  "plugins": ["prettier-plugin-tailwindcss"]
+}

apps/common/feature/app/(with-base-layout)/board/page.tsx

@@ -0,0 +1,2 @@
+import { BoardPage } from "@/pages/board";
+export default BoardPage;

apps/common/feature/app/(with-base-layout)/layout.tsx

@@ -0,0 +1,35 @@
+"use client";
+
+import { usePathname, useRouter } from "next/navigation";
+import { useQueryClient } from "@tanstack/react-query";
+import type { MenuItem } from "@common/components/api";
+import { BaseLayout } from "@common/components/ui";
+import { useMenuStore } from "@/shared/lib";
+import { PageLayout } from "@/shared/ui/page-layout";
+
+export default function WithBaseLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const router = useRouter();
+  const pathname = usePathname();
+  const queryClient = useQueryClient();
+
+  const { setCurrentMenuInfo } = useMenuStore((state) => state);
+
+  const handleMenuClick = (item: MenuItem) => {
+    setCurrentMenuInfo(item);
+    router.push(item.urlPath);
+  };
+
+  return (
+    <BaseLayout
+      queryClient={queryClient}
+      currentPath={pathname ?? ""}
+      handleMenuClick={handleMenuClick}
+    >
+      <PageLayout>{children}</PageLayout>
+    </BaseLayout>
+  );
+}

apps/common/feature/app/(with-base-layout)/loading.tsx

@@ -0,0 +1,2 @@
+import { SkeletonPage } from "@/shared/ui/skeleton-page";
+export default SkeletonPage;

apps/common/feature/app/api/proxy/[...url]/route.ts

@@ -0,0 +1,100 @@
+import {
+  ACCESS_TOKEN,
+  AUTH_USER_ID,
+  CLAIM_NAME,
+  REFRESH_TOKEN,
+  SERVER_API_URL,
+  SITE_ID,
+} from "@/shared/config";
+import { cookies } from "next/headers";
+import { NextResponse } from "next/server";
+
+async function handler(
+  request: Request,
+  params: { url: string[] },
+  method: "GET" | "POST" | "PUT" | "DELETE",
+) {
+  const cookieStore = await cookies();
+  const headers: Record<string, string> = {
+    "Content-Type": "application/json",
+    "X-Site-Id": SITE_ID,
+  };
+  let body = {};
+  const isRefreshHandler = params.url.includes("refresh");
+
+  // silent refresh
+  if (isRefreshHandler) {
+    const refreshToken = cookieStore.get(REFRESH_TOKEN);
+    headers[CLAIM_NAME] = refreshToken?.value ?? "";
+
+    if (!headers[CLAIM_NAME]) {
+      return NextResponse.json({ message: "Can't refresh" }, { status: 401 });
+    }
+  }
+
+  try {
+    if (!isRefreshHandler) {
+      body = await request.json();
+    }
+
+    const result = await fetch(`${SERVER_API_URL}/${params.url.join("/")}`, {
+      method,
+      headers,
+      body: JSON.stringify(body),
+    });
+
+    if (!result.ok) {
+      return NextResponse.json(
+        { message: "Invalid Credentials" },
+        { status: 401 },
+      );
+    }
+
+    const accessToken = result.headers.get(ACCESS_TOKEN);
+    const refreshToken = result.headers.get(REFRESH_TOKEN);
+    const userId = result.headers.get(AUTH_USER_ID);
+
+    if (accessToken && userId) {
+      const response = NextResponse.json({
+        [ACCESS_TOKEN]: accessToken,
+        [AUTH_USER_ID]: userId,
+      });
+
+      if (refreshToken) {
+        cookieStore.set(REFRESH_TOKEN, refreshToken, {
+          httpOnly: true,
+          sameSite: "lax",
+          path: "/",
+        });
+      }
+
+      return response;
+    }
+
+    return NextResponse.json(
+      { message: "Invalid Credentials" },
+      { status: 401 },
+    );
+  } catch (error) {
+    return NextResponse.json(
+      { message: "Server Error", error },
+      { status: 500 },
+    );
+  }
+}
+
+export async function POST(
+  request: Request,
+  props: { params: Promise<{ url: string[] }> },
+) {
+  const params = await props.params;
+  return handler(request, params, "POST");
+}
+
+export async function PUT(
+  request: Request,
+  props: { params: Promise<{ url: string[] }> },
+) {
+  const params = await props.params;
+  return handler(request, params, "PUT");
+}

apps/common/feature/app/auth/login/page.tsx

@@ -0,0 +1,2 @@
+import { LoginPage } from "@/pages/auth/login";
+export default LoginPage;

apps/common/feature/app/layout.tsx

@@ -0,0 +1,8 @@
+import type { Metadata } from "next";
+import { App } from "@/app";
+
+export const metadata: Metadata = {
+  title: "유역하수도 통합 정보플랫폼",
+};
+
+export default App;

apps/common/feature/eslint.config.mjs

@@ -0,0 +1,21 @@
+import { dirname } from "path";
+import { fileURLToPath } from "url";
+import { FlatCompat } from "@eslint/eslintrc";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const compat = new FlatCompat({
+  baseDirectory: __dirname,
+});
+
+const eslintConfig = [
+  ...compat.extends("next/core-web-vitals", "next/typescript"),
+  {
+    rules: {
+      "react-hooks/exhaustive-deps": "off",
+    },
+  },
+];
+
+export default eslintConfig;

apps/common/feature/middleware.ts

@@ -0,0 +1,37 @@
+import { NextRequest, NextResponse } from "next/server";
+import { CLAIM_NAME, AUTH_USER_ID } from "./src/shared/config";
+
+const serverApiUrl = process.env.NEXT_PUBLIC_SERVER_API_URL;
+
+export function middleware(req: NextRequest) {
+  const pathname = req.nextUrl.pathname;
+  const searchParams = req.nextUrl.searchParams;
+
+  if (pathname.startsWith("/server")) {
+    const queryParams = searchParams.toString();
+    const newUrl = `${serverApiUrl}${pathname.replace("/server", "")}${
+      queryParams ? `?${queryParams}` : ""
+    }`;
+    return NextResponse.rewrite(new URL(newUrl));
+  }
+
+  if (pathname.startsWith("/attach-service")) {
+    const requestHeaders = new Headers(req.headers);
+    const token = req.cookies.get(CLAIM_NAME)?.value;
+    const userId = req.cookies.get(AUTH_USER_ID)?.value;
+    const newUrl = `${serverApiUrl}${pathname}`;
+
+    if (token) requestHeaders.set(CLAIM_NAME, token);
+    if (userId) requestHeaders.set(AUTH_USER_ID, userId);
+
+    return NextResponse.rewrite(new URL(newUrl), {
+      headers: requestHeaders,
+    });
+  }
+
+  return NextResponse.next();
+}
+
+export const config = {
+  matcher: ["/server/:path*", "/attach-service/:path*"],
+};

apps/common/feature/next.config.ts

@@ -0,0 +1,5 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {};
+
+export default nextConfig;

apps/common/feature/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "feature",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev -p 13000",
+    "build": "next build",
+    "start": "next start -p 13000",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@common/assets": "workspace:*",
+    "@common/components": "workspace:*",
+    "@frontend-opensource/use-react-hooks": "^1.1.4",
+    "@hookform/resolvers": "^4.1.3",
+    "@minoru/react-dnd-treeview": "^3.5.0",
+    "@radix-ui/react-label": "^2.1.2",
+    "@radix-ui/react-slot": "^1.1.2",
+    "@tanstack/react-query": "^5.67.1",
+    "@tanstack/react-table": "^8.21.2",
+    "@tinymce/tinymce-react": "^6.1.0",
+    "axios": "^1.8.1",
+    "chart.js": "^4.4.8",
+    "dayjs": "^1.11.13",
+    "js-cookie": "^3.0.5",
+    "next": "15.1.7",
+    "react-chartjs-2": "^5.3.0",
+    "react-dnd": "^16.0.1",
+    "react-hook-form": "^7.54.2",
+    "tailwindcss-animate": "^1.0.7",
+    "tus-js-client": "^4.3.1",
+    "zod": "^3.24.2",
+    "zustand": "^5.0.3"
+  },
+  "devDependencies": {
+    "@eslint/eslintrc": "^3",
+    "@faker-js/faker": "^9.5.0",
+    "@types/js-cookie": "^3.0.6",
+    "@types/node": "^22.13.1",
+    "@types/webpack": "^5.28.5",
+    "eslint": "^9",
+    "eslint-config-next": "15.1.7",
+    "postcss": "^8",
+    "prettier": "^3.4.2",
+    "prettier-plugin-tailwindcss": "^0.6.11",
+    "steiger": "^0.5.5",
+    "tailwindcss": "^3.4.1",
+    "typescript": "^5"
+  }
+}

apps/common/feature/postcss.config.mjs

@@ -0,0 +1,8 @@
+/** @type {import('postcss-load-config').Config} */
+const config = {
+  plugins: {
+    tailwindcss: {},
+  },
+};
+
+export default config;

apps/common/feature/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/feature/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/feature/src/app/providers/index.ts

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

apps/common/feature/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/feature/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;
+  }
+}

apps/common/feature/src/entities/attachment/api/attachment-service.ts

@@ -0,0 +1,43 @@
+import { client } from "@/shared/api";
+import { ENDPOINT } from "@/shared/config";
+import type {
+  Attachment,
+  AttachmentService,
+} from "../model/attachment-interface";
+
+export class AttachmentApiService implements AttachmentService {
+  public async getAttachments(atflCd: string): Promise<Attachment[]> {
+    const response = await client.get<Attachment[]>(
+      `${ENDPOINT.ATTACH_SERVICE.ATTACHMENTS}/${atflCd}`,
+    );
+    return response.data;
+  }
+
+  public async deleteAttachment(atflId: string): Promise<void> {
+    await client.delete(`${ENDPOINT.ATTACH_SERVICE.ATTACHMENTS}/${atflId}`);
+  }
+
+  public async deleteAttachmentByAtflCd(atflCd: string): Promise<void> {
+    await client.delete(
+      `${ENDPOINT.ATTACH_SERVICE.ATTACHMENTS}/atflCd/${atflCd}`,
+    );
+  }
+
+  public async getImageUrl(atflId: string): Promise<string> {
+    if (!atflId) return "";
+    const response = await fetch(`${ENDPOINT.ATTACH_SERVICE.IMAGES}/${atflId}`);
+    const blob = await response.blob();
+    return URL.createObjectURL(blob);
+  }
+
+  public async getImageUrlByAtflCd(atflCd: string): Promise<string> {
+    if (!atflCd) return "";
+    const response = await fetch(
+      `${ENDPOINT.ATTACH_SERVICE.IMAGES}/atflCd/${atflCd}`,
+    );
+    const blob = await response.blob();
+    return URL.createObjectURL(blob);
+  }
+}
+
+export const AttachmentApi = new AttachmentApiService();

apps/common/feature/src/entities/attachment/index.ts

@@ -0,0 +1 @@
+export { AttachmentApi } from "./api/attachment-service";

apps/common/feature/src/entities/attachment/model/attachment-interface.ts

@@ -0,0 +1,22 @@
+export interface Attachment {
+  atflCd: string;
+  atflSn: number;
+  atflId: string;
+  physFileNm: string;
+  orgnlFileNm: string;
+  atflFlieSz: number;
+  atflType: string;
+  dwnldNocs: number;
+  delYn: string;
+  lnkgDmnId: string;
+  lnkgDmnNm: string;
+  regDt: string;
+}
+
+export interface AttachmentService {
+  getAttachments: (atflCd: string) => Promise<Attachment[]>;
+  deleteAttachment: (atflId: string) => Promise<void>;
+  deleteAttachmentByAtflCd: (atflCd: string) => Promise<void>;
+  getImageUrl: (atflId: string) => Promise<string>;
+  getImageUrlByAtflCd: (atflCd: string) => Promise<string>;
+}

apps/common/feature/src/entities/auth/api/login-service.ts

@@ -0,0 +1,85 @@
+import { AxiosError } from "axios";
+import {
+  ENDPOINT,
+  JWT_EXPIRATION_TIME,
+  ACCESS_TOKEN,
+  AUTH_USER_ID,
+  CLAIM_NAME,
+} from "@/shared/config";
+import type { LoginService, ILogin } from "../model/login-interface";
+import { tokenManager } from "../lib/token-manager";
+
+export class LoginApiService implements LoginService {
+  private static instance: LoginApiService;
+
+  private constructor() {}
+
+  public static getInstance(): LoginApiService {
+    if (!LoginApiService.instance) {
+      LoginApiService.instance = new LoginApiService();
+    }
+    return LoginApiService.instance;
+  }
+
+  public async login(payload: ILogin): Promise<void> {
+    try {
+      const response = await fetch(`/api/proxy${ENDPOINT.USER_SERVICE.LOGIN}`, {
+        method: "POST",
+        body: JSON.stringify({
+          userId: payload.userId,
+          password: payload.password,
+        }),
+      });
+
+      const data = await response.json();
+      const accessToken = data[ACCESS_TOKEN];
+      const tokenId = data[AUTH_USER_ID];
+
+      if (!accessToken || !tokenId) {
+        throw new Error("Missing required authentication tokens");
+      }
+
+      tokenManager.setToken(CLAIM_NAME, accessToken);
+      tokenManager.setToken(AUTH_USER_ID, tokenId);
+      tokenManager.setupRefreshTimer(
+        () => this.silentRefresh(),
+        JWT_EXPIRATION_TIME,
+      );
+    } catch (error) {
+      if (error instanceof AxiosError) {
+        throw new Error(`Login failed: ${error.response?.data?.message}`);
+      }
+      throw new Error(`Login failed: ${error}`);
+    }
+  }
+
+  public async silentRefresh(): Promise<void> {
+    try {
+      const response = await fetch(
+        `/api/proxy${ENDPOINT.USER_SERVICE.SILENT_REFRESH}`,
+        { method: "PUT" },
+      );
+
+      const data = await response.json();
+      const accessToken = data[ACCESS_TOKEN];
+      const tokenId = data[AUTH_USER_ID];
+
+      if (!accessToken || !tokenId) {
+        throw new Error("Missing required authentication tokens");
+      }
+
+      tokenManager.setToken(CLAIM_NAME, accessToken);
+      tokenManager.setToken(AUTH_USER_ID, tokenId);
+    } catch (error) {
+      tokenManager.clearAuthToken();
+      if (error instanceof AxiosError) {
+        throw new Error(
+          `Silent refresh failed: ${error.response?.data?.message}`,
+        );
+      }
+      throw new Error(`Silent refresh failed: ${error}`);
+    }
+  }
+}
+
+export const LoginApi = LoginApiService.getInstance();

apps/common/feature/src/entities/auth/index.ts

@@ -0,0 +1,2 @@
+export { LoginApi } from "./api/login-service";
+export { AuthWrapper } from "./lib/auth-wrapper";

apps/common/feature/src/entities/auth/lib/token-manager.ts

@@ -0,0 +1,59 @@
+import { AUTH_USER_ID, CLAIM_NAME } from "@/shared/config";
+import { getCookie, setCookie, removeCookie } from "@/shared/lib";
+
+export class TokenManager {
+  private static instance: TokenManager;
+  private refreshTimer: NodeJS.Timeout | null = null;
+
+  private constructor() {}
+
+  public static getInstance(): TokenManager {
+    if (!TokenManager.instance) {
+      TokenManager.instance = new TokenManager();
+    }
+    return TokenManager.instance;
+  }
+
+  public getToken(key: string): string | undefined {
+    return getCookie(key);
+  }
+
+  public setToken(key: string, value: string): void {
+    setCookie(key, value, {
+      secure: window.location.protocol === "https:",
+      sameSite: "lax",
+    });
+  }
+
+  public removeToken(key: string): void {
+    removeCookie(key);
+  }
+
+  public setupRefreshTimer(
+    callback: () => Promise<void>,
+    expirationTime: number,
+  ): void {
+    if (this.refreshTimer) {
+      clearTimeout(this.refreshTimer);
+    }
+
+    this.refreshTimer = setTimeout(() => {
+      callback().catch((error) => {
+        console.error("Silent refresh failed:", error);
+        this.clearAuthToken();
+      });
+    }, expirationTime - 60000);
+  }
+
+  public clearAuthToken(): void {
+    if (this.refreshTimer) {
+      clearTimeout(this.refreshTimer);
+      this.refreshTimer = null;
+    }
+
+    this.removeToken(CLAIM_NAME);
+    this.removeToken(AUTH_USER_ID);
+  }
+}
+
+export const tokenManager = TokenManager.getInstance();

apps/common/feature/src/entities/auth/model/login-interface.ts

@@ -0,0 +1,9 @@
+export interface ILogin {
+  userId: string;
+  password: string;
+}
+
+export interface LoginService {
+  login(payload: ILogin): Promise<void>;
+  silentRefresh(): Promise<void>;
+}

apps/common/feature/src/entities/board/api/board-service.ts

@@ -0,0 +1,21 @@
+import { client } from "@/shared/api";
+import { ENDPOINT } from "@/shared/config";
+import type {
+  BoardPopupList,
+  BoardPopupParams,
+  BoardService,
+} from "../model/board-interface";
+
+export class BoardApiService implements BoardService {
+  public async getBoardPopupList(
+    params: BoardPopupParams,
+  ): Promise<BoardPopupList> {
+    const response = await client.get<BoardPopupList>(
+      `${ENDPOINT.BOARD_SERVICE.BBS}`,
+      { params },
+    );
+    return response.data;
+  }
+}
+
+export const BoardApi = new BoardApiService();

apps/common/feature/src/entities/board/index.ts

@@ -0,0 +1,2 @@
+export { BoardApi } from "./api/board-service";
+export { type BoardPopup } from "./model/board-interface";

apps/common/feature/src/entities/board/model/board-interface.ts

@@ -0,0 +1,42 @@
+import type { PageableList, PageableParams } from "@/shared/model";
+
+export const BOARD_TYPE = {
+  BBSNORMAL: "BBSNORMAL",
+  BBSFAQ: "BBSFAQ",
+  BBSIMAGE: "BBSIMAGE",
+  BBSMOVIE: "BBSMOVIE",
+} as const;
+
+export type BoardType = (typeof BOARD_TYPE)[keyof typeof BOARD_TYPE];
+
+export interface BoardPopupParams extends PageableParams {
+  bbsNm?: string;
+}
+
+export interface BoardPopup {
+  bbsId: number;
+  bbsTypeCd: BoardType;
+  bbsTypeNm: string;
+  bbsNm: string;
+  bbsExpln: string;
+  rfrncUseYn: string;
+  atflUseYn: string;
+  atflMaxCnt: number;
+  atflMaxFileSz: number;
+  ansUseYn: string;
+  cmntUseYn: string;
+  dgstfnEvlUseYn: string;
+  smsUseYn: string;
+  upndFixUseYn: string;
+  pstgPrdUseYn: string;
+  popupUseYn: string;
+  delYn: string;
+  regDt: string;
+  pstCnt: number;
+}
+
+export type BoardPopupList = PageableList<BoardPopup>;
+
+export interface BoardService {
+  getBoardPopupList: (params: BoardPopupParams) => Promise<BoardPopupList>;
+}

apps/common/feature/src/entities/code/@x/posting.ts

@@ -0,0 +1 @@
+export { CodeSelect } from "../ui/code-select";

apps/common/feature/src/entities/code/api/code-service.ts

@@ -0,0 +1,14 @@
+import { client } from "@/shared/api";
+import { ENDPOINT } from "@/shared/config";
+import type { CodeService, ICode } from "../model/code-interface";
+
+export class CodeApiService implements CodeService {
+  public async getCode(upCd: string): Promise<ICode[]> {
+    const response = await client.get<ICode[]>(
+      `${ENDPOINT.CMS_SERVICE.CODE}/${upCd}`,
+    );
+    return response.data;
+  }
+}
+
+export const CodeApi = new CodeApiService();

apps/common/feature/src/entities/code/index.ts

@@ -0,0 +1 @@
+export { CodeSelect } from "./ui/code-select";

apps/common/feature/src/entities/code/model/code-interface.ts

@@ -0,0 +1,9 @@
+export interface ICode {
+  lwpoCd: string;
+  upCd: string;
+  lwpoCdNm: string;
+}
+
+export interface CodeService {
+  getCode(upCd: string): Promise<ICode[]>;
+}

apps/common/feature/src/entities/code/ui/code-select.tsx

@@ -0,0 +1,42 @@
+import { useQuery } from "@tanstack/react-query";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@common/components";
+import { ENDPOINT } from "@/shared/config";
+import { CodeApi } from "../api/code-service";
+
+type CodeSelectProps = {
+  upCd: string;
+} & React.ComponentPropsWithoutRef<typeof Select>;
+
+function CodeSelect({ upCd, defaultValue, ...props }: CodeSelectProps) {
+  const { data: code } = useQuery({
+    queryKey: [ENDPOINT.CMS_SERVICE.CODE, upCd],
+    queryFn: () => CodeApi.getCode(upCd),
+    enabled: !!upCd,
+  });
+
+  const defaultValueText =
+    code?.find((item) => item.lwpoCd === defaultValue)?.lwpoCdNm ?? "선택";
+
+  return (
+    <Select {...props}>
+      <SelectTrigger className="w-[12rem]">
+        <SelectValue placeholder={defaultValueText} />
+      </SelectTrigger>
+      <SelectContent>
+        {code?.map((item) => (
+          <SelectItem key={item.lwpoCd} value={item.lwpoCd}>
+            {item.lwpoCdNm}
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  );
+}
+
+export { CodeSelect };

apps/common/feature/src/entities/editor/api/editor-service.ts

@@ -0,0 +1,19 @@
+import { client } from "@/shared/api";
+import type {
+  EditorService,
+  FileInfo,
+  UploadFile,
+} from "../model/editor-interface";
+import { ENDPOINT } from "@/shared/config";
+
+export class EditorApiService implements EditorService {
+  async uploadImage(data: UploadFile): Promise<FileInfo> {
+    const response = await client.post<FileInfo>(
+      ENDPOINT.ATTACH_SERVICE.EDITOR_UPLOAD,
+      data,
+    );
+    return response.data;
+  }
+}
+
+export const EditorApi = new EditorApiService();

apps/common/feature/src/entities/editor/index.ts

@@ -0,0 +1 @@
+export { Editor } from "./ui/editor";

apps/common/feature/src/entities/editor/lib/blob-to-base64.ts

@@ -0,0 +1,10 @@
+export const blobToBase64 = (blob: Blob): Promise<string> => {
+  return new Promise((resolve) => {
+    const reader = new FileReader();
+    reader.onload = () => {
+      const base64 = reader.result as string;
+      resolve(base64.split(",")[1] || "");
+    };
+    reader.readAsDataURL(blob);
+  });
+};

apps/common/feature/src/entities/editor/lib/generate-file-info.ts

@@ -0,0 +1,16 @@
+import { blobToBase64 } from "./blob-to-base64";
+
+export const generateFileInfo = async (blobInfo: {
+  blob: () => Blob;
+  filename: () => string;
+}) => {
+  const blob = blobInfo.blob();
+  const base64 = await blobToBase64(blob);
+  return {
+    fieldName: `${blob.type.split("/")[1]}`,
+    fileType: blob.type,
+    fileBase64: base64,
+    originalName: blobInfo.filename(),
+    size: blob.size,
+  };
+};

apps/common/feature/src/entities/editor/model/editor-base-config.ts

@@ -0,0 +1,37 @@
+import { SERVER_API_URL } from "@/shared/config";
+
+export const editorBaseConfig = {
+  apiKey: process.env.NEXT_PUBLIC_TINY_API_KEY,
+  init: {
+    language: "ko_KR",
+    height: 500,
+    plugins: [
+      "advlist",
+      "autolink",
+      "lists",
+      "link",
+      "image",
+      "charmap",
+      "preview",
+      "anchor",
+      "searchreplace",
+      "visualblocks",
+      "code",
+      "codesample",
+      "fullscreen",
+      "insertdatetime",
+      "media",
+      "table",
+      "code",
+      "help",
+      "wordcount",
+      "save",
+    ],
+    toolbar: [
+      "undo redo | blocks fontfamily fontsize | bold italic underline strikethrough forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist blockquote | table",
+      "link image",
+    ],
+    images_upload_base_path: SERVER_API_URL,
+    file_picker_types: "image",
+  },
+};

apps/common/feature/src/entities/editor/model/editor-interface.ts

@@ -0,0 +1,20 @@
+export interface UploadFile {
+  fieldName: string;
+  fileType: string;
+  fileBase64: string;
+  originalName: string;
+  size: number;
+}
+
+export interface FileInfo {
+  originalFileName: string;
+  message: string;
+  fileType: string;
+  size: number;
+  uploaded: number;
+  url: string;
+}
+
+export interface EditorService {
+  uploadImage(data: UploadFile): Promise<FileInfo>;
+}

apps/common/feature/src/entities/editor/ui/editor.tsx

@@ -0,0 +1,60 @@
+import { useRef } from "react";
+import {
+  Editor as TinyEditor,
+  type Editor as TinyEditorInstance,
+  type IAllProps,
+} from "@tinymce/tinymce-react";
+import { editorBaseConfig as baseConfig } from "../model/editor-base-config";
+import { generateFileInfo } from "../lib/generate-file-info";
+import { EditorApi } from "../api/editor-service";
+
+const Editor = ({ ...props }: IAllProps) => {
+  const editorRef = useRef<TinyEditorInstance | null>(null);
+
+  const imagesUploadHandler = (blobInfo: {
+    blob: () => Blob;
+    filename: () => string;
+  }) => {
+    return new Promise(async (resolve) => {
+      const fileInfo = await generateFileInfo(blobInfo);
+      const data = await EditorApi.uploadImage(fileInfo);
+      resolve(data.url);
+    });
+  };
+
+  const filePickerCallback = (
+    callback: (base64: string, meta: { title: string }) => void,
+  ) => {
+    const input = document.createElement("input");
+    input.setAttribute("type", "file");
+    input.setAttribute("accept", "image/*");
+    input.onchange = async () => {
+      const file = input.files?.[0];
+      if (!file) return;
+      const reader = new FileReader();
+      reader.onload = async () => {
+        const base64 = reader.result as string;
+        callback(base64, { title: file.name });
+      };
+      reader.readAsDataURL(file);
+    };
+    input.click();
+  };
+
+  return (
+    <TinyEditor
+      {...baseConfig}
+      onInit={(_: unknown, editor: TinyEditorInstance) => {
+        editorRef.current = editor;
+      }}
+      init={{
+        ...baseConfig.init,
+        images_upload_handler: imagesUploadHandler,
+        file_picker_callback: filePickerCallback,
+      }}
+      {...props}
+    />
+  );
+};
+
+export { Editor };

apps/common/feature/src/entities/menu-authority/api/menu-authority-service.ts

@@ -0,0 +1,32 @@
+import { client } from "@/shared/api";
+import { ENDPOINT } from "@/shared/config";
+import type {
+  MenuAuthorityList,
+  MenuAuthorityParams,
+  MenuAuthorityPayloadData,
+  MenuAuthorityService,
+} from "../model/menu-authority-interface";
+
+export class MenuAuthorityApiService implements MenuAuthorityService {
+  public async getMenuAuthorityList(
+    params: MenuAuthorityParams,
+  ): Promise<MenuAuthorityList> {
+    const response = await client.get<MenuAuthorityList>(
+      `${ENDPOINT.CMS_SERVICE.MENU_AUTHRTS}`,
+      { params },
+    );
+    return response.data;
+  }
+
+  public async saveMenuAuthority(
+    data: MenuAuthorityPayloadData[],
+  ): Promise<void> {
+    const response = await client.post<void>(
+      `${ENDPOINT.CMS_SERVICE.MENU_AUTHRTS}`,
+      data,
+    );
+    return response.data;
+  }
+}
+
+export const MenuAuthorityApi = new MenuAuthorityApiService();

apps/common/feature/src/entities/menu-authority/index.ts

@@ -0,0 +1 @@
+export { ManagementAuthorityDialog } from "./ui/management-authority-dialog";

apps/common/feature/src/entities/menu-authority/model/menu-authority-interface.ts

@@ -0,0 +1,41 @@
+import { z } from "zod";
+import type { PageableList, PageableParams } from "@/shared/model";
+
+export interface MenuAuthorityParams extends PageableParams {
+  groupId?: string;
+  menuCd?: number;
+  useYn?: string;
+}
+
+export const menuAuthoritySchema = z.object({
+  groupId: z.string(),
+  groupNm: z.string(),
+  menuCd: z.number(),
+  mngAuthrtYn: z.string(),
+  inqAuthrtYn: z.string(),
+  regAuthrtYn: z.string(),
+  mdfcnAuthrtYn: z.string(),
+  delAuthrtYn: z.string(),
+  useYn: z.string(),
+  mode: z.string(),
+});
+
+export const menuAuthorityPayloadSchema = menuAuthoritySchema.omit({
+  groupNm: true,
+});
+
+export const menuAuthorityFormSchema = z.object({
+  menuAuthority: z.array(menuAuthorityPayloadSchema),
+});
+
+export type MenuAuthority = z.infer<typeof menuAuthoritySchema>;
+export type MenuAuthorityList = PageableList<MenuAuthority>;
+export type MenuAuthorityPayloadData = z.infer<
+  typeof menuAuthorityPayloadSchema
+>;
+export type MenuAuthorityFormData = z.infer<typeof menuAuthorityFormSchema>;
+
+export interface MenuAuthorityService {
+  getMenuAuthorityList(params: MenuAuthorityParams): Promise<MenuAuthorityList>;
+  saveMenuAuthority(data: MenuAuthorityPayloadData[]): Promise<void>;
+}

apps/common/feature/src/entities/menu-authority/model/menu-authority-table-columns.tsx

@@ -0,0 +1,117 @@
+import type { ColumnDef } from "@tanstack/react-table";
+import type { UseFormReturn } from "react-hook-form";
+import { Checkbox } from "@common/components/ui";
+import type {
+  MenuAuthority,
+  MenuAuthorityFormData,
+  MenuAuthorityPayloadData,
+} from "./menu-authority-interface";
+
+export const createColumns = (
+  form: UseFormReturn<MenuAuthorityFormData>,
+): ColumnDef<MenuAuthority>[] => {
+  const getCurrentRow = (i: number) => form.watch("menuAuthority")[i];
+
+  const handleCheckedChange =
+    (i: number, key: keyof MenuAuthorityPayloadData) => (checked: boolean) => {
+      if (getCurrentRow(i)?.mode === "R") {
+        form.setValue(`menuAuthority.${i}.mode`, "U");
+      }
+      form.setValue(`menuAuthority.${i}.${key}`, checked ? "Y" : "N");
+    };
+
+  return [
+    {
+      accessorKey: "groupNm",
+      header: "그룹명",
+    },
+    {
+      accessorKey: "mngAuthrtYn",
+      header: "관리권한",
+      cell: ({ row }) => {
+        return (
+          <Checkbox
+            checked={getCurrentRow(row.index)?.mngAuthrtYn === "Y"}
+            onCheckedChange={(checked) => {
+              if (checked) {
+                handleCheckedChange(
+                  row.index,
+                  "regAuthrtYn",
+                )(checked as boolean);
+                handleCheckedChange(
+                  row.index,
+                  "mdfcnAuthrtYn",
+                )(checked as boolean);
+                handleCheckedChange(
+                  row.index,
+                  "delAuthrtYn",
+                )(checked as boolean);
+                handleCheckedChange(
+                  row.index,
+                  "inqAuthrtYn",
+                )(checked as boolean);
+              }
+              handleCheckedChange(row.index, "mngAuthrtYn")(checked as boolean);
+            }}
+          />
+        );
+      },
+    },
+    {
+      accessorKey: "regAuthrtYn",
+      header: "등록권한",
+      cell: ({ row }) => {
+        return (
+          <Checkbox
+            checked={getCurrentRow(row.index)?.regAuthrtYn === "Y"}
+            onCheckedChange={(checked) => {
+              if (checked) {
+                handleCheckedChange(
+                  row.index,
+                  "inqAuthrtYn",
+                )(checked as boolean);
+              }
+              handleCheckedChange(row.index, "regAuthrtYn")(checked as boolean);
+            }}
+          />
+        );
+      },
+    },
+    {
+      accessorKey: "mdfcnAuthrtYn",
+      header: "수정권한 ",
+      cell: ({ row }) => {
+        return (
+          <Checkbox
+            checked={getCurrentRow(row.index)?.mdfcnAuthrtYn === "Y"}
+            onCheckedChange={handleCheckedChange(row.index, "mdfcnAuthrtYn")}
+          />
+        );
+      },
+    },
+    {
+      accessorKey: "delAuthrtYn",
+      header: "삭제권한",
+      cell: ({ row }) => {
+        return (
+          <Checkbox
+            checked={getCurrentRow(row.index)?.delAuthrtYn === "Y"}
+            onCheckedChange={handleCheckedChange(row.index, "delAuthrtYn")}
+          />
+        );
+      },
+    },
+    {
+      accessorKey: "inqAuthrtYn",
+      header: "조회권한",
+      cell: ({ row }) => {
+        return (
+          <Checkbox
+            checked={getCurrentRow(row.index)?.inqAuthrtYn === "Y"}
+            onCheckedChange={handleCheckedChange(row.index, "inqAuthrtYn")}
+          />
+        );
+      },
+    },
+  ];
+};

apps/common/feature/src/entities/menu-authority/ui/management-authority-dialog.tsx

@@ -0,0 +1,101 @@
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useMutation, useQuery } from "@tanstack/react-query";
+import { getCoreRowModel, useReactTable } from "@tanstack/react-table";
+import { useConfirm } from "@frontend-opensource/use-react-hooks";
+import {
+  Button,
+  DataTable,
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@common/components/ui";
+import { ENDPOINT } from "@/shared/config";
+import { useAlertStore } from "@/shared/lib/use-alert-store";
+import {
+  menuAuthorityFormSchema,
+  type MenuAuthorityFormData,
+  type MenuAuthorityPayloadData,
+} from "../model/menu-authority-interface";
+import { createColumns } from "../model/menu-authority-table-columns";
+import { MenuAuthorityApi } from "../api/menu-authority-service";
+
+type ManagementAuthorityDialogProps = {
+  menuCd?: number;
+} & React.ComponentProps<typeof Dialog>;
+
+function ManagementAuthorityDialog({
+  menuCd,
+  ...props
+}: ManagementAuthorityDialogProps) {
+  const { confirm } = useConfirm();
+  const { setMessage: alert } = useAlertStore((state) => state);
+
+  const { data: menuAuthorityList } = useQuery({
+    queryKey: [ENDPOINT.CMS_SERVICE.MENU_AUTHRTS, menuCd],
+    queryFn: () => MenuAuthorityApi.getMenuAuthorityList({ menuCd }),
+    enabled: !!menuCd,
+  });
+
+  const { mutateAsync: saveMenuAuthority } = useMutation({
+    mutationFn: (data: MenuAuthorityPayloadData[]) =>
+      MenuAuthorityApi.saveMenuAuthority(data),
+    onSuccess: () => {
+      alert("저장되었습니다.");
+    },
+  });
+
+  const form = useForm<MenuAuthorityFormData>({
+    resolver: zodResolver(menuAuthorityFormSchema),
+    values: {
+      menuAuthority: menuAuthorityList?.content ?? [],
+    },
+  });
+
+  const table = useReactTable({
+    data: menuAuthorityList?.content ?? [],
+    columns: createColumns(form),
+    getCoreRowModel: getCoreRowModel(),
+  });
+
+  const handleSave = async () => {
+    if (await confirm("저장하시겠습니까?")) {
+      const data = form.getValues("menuAuthority");
+      const filteredData = data.filter((item) => item.mode !== "R");
+      await saveMenuAuthority(filteredData);
+    }
+  };
+
+  return (
+    <Dialog {...props}>
+      <DialogTrigger asChild>
+        <Button className="gap-3" disabled={!menuCd}>
+          <i className="diveicon di-personal-information" />
+          권한관리
+        </Button>
+      </DialogTrigger>
+      <DialogContent className="max-w-[60rem]" aria-describedby={undefined}>
+        <DialogHeader>
+          <DialogTitle>그룹별 메뉴 권한</DialogTitle>
+        </DialogHeader>
+        <DataTable table={table} />
+        <DialogFooter className="!justify-center">
+          <Button size="lg" onClick={handleSave}>
+            저장
+          </Button>
+          <DialogClose asChild>
+            <Button size="lg" color="white">
+              취소
+            </Button>
+          </DialogClose>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+export { ManagementAuthorityDialog };

apps/common/feature/src/entities/menu/api/menu-service.ts

@@ -0,0 +1,14 @@
+import { client } from "@common/components/api";
+import { ENDPOINT } from "@/shared/config";
+import type { MenuItem, MenuService } from "../model/menu-interface";
+
+export class MenuApiService implements MenuService {
+  async getMenuRoles(siteId: string): Promise<MenuItem[]> {
+    const response = await client.get<MenuItem[]>(
+      `${ENDPOINT.CMS_SERVICE.MENU_ROLES}/${siteId}`,
+    );
+    return response.data;
+  }
+}
+
+export const MenuApi = new MenuApiService();

apps/common/feature/src/entities/menu/index.ts

@@ -0,0 +1 @@
+export { MenuWrapper } from "./lib/menu-wrapper";

apps/common/feature/src/entities/menu/lib/menu-wrapper.tsx

@@ -0,0 +1,29 @@
+"use client";
+
+import { useEffect } from "react";
+import { usePathname } from "next/navigation";
+import { SITE_ID } from "@/shared/config";
+import { useMenuStore } from "@/shared/lib";
+import { MenuApi } from "../api/menu-service";
+import { getCurrentMenu } from "./utils";
+
+const MenuWrapper = ({ children }: { children: React.ReactNode }) => {
+  const pathname = usePathname();
+  const { setCurrentMenuInfo } = useMenuStore((state) => state);
+
+  useEffect(() => {
+    (async () => {
+      const menuRoles = await MenuApi.getMenuRoles(SITE_ID);
+      if (!menuRoles) return;
+
+      const currentMenu = getCurrentMenu(menuRoles, pathname ?? "");
+      if (!currentMenu) return;
+
+      setCurrentMenuInfo(currentMenu);
+    })();
+  }, []);
+
+  return <>{children}</>;
+};
+
+export { MenuWrapper };

apps/common/feature/src/entities/menu/lib/utils.ts

@@ -0,0 +1,20 @@
+import type { MenuItem } from "../model/menu-interface";
+
+export const getCurrentMenu = (
+  menus: MenuItem[],
+  pathname: string,
+): MenuItem | null => {
+  for (const menu of menus) {
+    if (
+      menu.urlPath !== "" &&
+      (menu.urlPath === pathname || pathname.startsWith(menu.urlPath))
+    )
+      return menu;
+
+    if (menu.children) {
+      const children = getCurrentMenu(menu.children, pathname);
+      if (children) return children;
+    }
+  }
+  return null;
+};

apps/common/feature/src/entities/menu/model/menu-interface.ts

@@ -0,0 +1,23 @@
+export interface MenuItem {
+  menuCd: number;
+  menuKornNm: string;
+  menuEngNm: string;
+  parentId: number | null;
+  sortSeq: number;
+  iconNm?: string;
+  children: MenuItem[] | null;
+  levelNo: number;
+  urlPath: string;
+  menuLnkgTypeCd: string;
+  menuLnkgSn: number;
+  menuPath: string;
+  qrcd: string;
+  useYn: string;
+  otptYn: string;
+  newWndwYn: string;
+  requiredUrlPath: boolean;
+}
+
+export interface MenuService {
+  getMenuRoles(siteId: string): Promise<MenuItem[]>;
+}

apps/common/feature/src/entities/posting/api/posting-service.ts

@@ -0,0 +1,31 @@
+import { client } from "@/shared/api";
+import { ENDPOINT } from "@/shared/config";
+import type { PageableList } from "@/shared/model";
+import type {
+  PostService,
+  PostingParams,
+  Post,
+  PostPayloadData,
+} from "../model/posting-interface";
+
+export class PostingApiService implements PostService {
+  public async getPostingHistory(
+    params: PostingParams,
+  ): Promise<PageableList<Post>> {
+    const response = await client.get<PageableList<Post>>(
+      `${ENDPOINT.CMS_SERVICE.POSTINGS}`,
+      { params },
+    );
+    return response.data;
+  }
+
+  public async savePosting(data: PostPayloadData[]): Promise<Post[]> {
+    const response = await client.post<Post[]>(
+      `${ENDPOINT.CMS_SERVICE.POSTINGS}`,
+      data,
+    );
+    return response.data;
+  }
+}
+
+export const PostingApi = new PostingApiService();

apps/common/feature/src/entities/posting/index.ts

@@ -0,0 +1,7 @@
+export { PostingApi } from "./api/posting-service";
+export {
+  POSTING_TYPE,
+  type Post,
+  type PostPayloadData,
+} from "./model/posting-interface";
+export { PostingDialog } from "./ui/posting-dialog";

apps/common/feature/src/entities/posting/model/posting-interface.ts

@@ -0,0 +1,50 @@
+import type { PageableList, PageableParams } from "@/shared/model";
+import { z } from "zod";
+
+export const POSTING_TYPE = {
+  POPUP: "POPUP",
+  BANNER: "BANNER",
+  IMAGE: "IMAGE",
+} as const;
+
+export type PostingType = (typeof POSTING_TYPE)[keyof typeof POSTING_TYPE];
+
+export interface PostingParams extends PageableParams {
+  pstgTrgtNo: number;
+}
+
+export const postSchema = z.object({
+  siteId: z.string(),
+  siteNm: z.string(),
+  pstgTypeCd: z.string(),
+  pstgTypeNm: z.string(),
+  pstgTrgtNo: z.number(),
+  pstgBgngDt: z.string().optional(),
+  pstgEndDt: z.string().optional(),
+  pstgPrdSeCd: z.string(),
+  pstgPrdSeNm: z.string(),
+  delYn: z.string(),
+});
+
+export const postPayloadSchema = postSchema
+  .extend({
+    mode: z.string(),
+  })
+  .omit({
+    siteNm: true,
+    pstgTypeNm: true,
+    pstgPrdSeNm: true,
+  });
+
+export const postingFormSchema = z.object({
+  pstg: z.array(postPayloadSchema),
+});
+
+export type Post = z.infer<typeof postSchema>;
+export type PostPayloadData = z.infer<typeof postPayloadSchema>;
+export type PostingFormData = z.infer<typeof postingFormSchema>;
+
+export interface PostService {
+  getPostingHistory: (params: PostingParams) => Promise<PageableList<Post>>;
+  savePosting: (data: PostPayloadData[]) => Promise<Post[]>;
+}

apps/common/feature/src/entities/posting/ui/posting-dialog.tsx

@@ -0,0 +1,323 @@
+import dayjs from "dayjs";
+import { useState } from "react";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useFieldArray, useForm } from "react-hook-form";
+import { useMutation, useQuery } from "@tanstack/react-query";
+import { useConfirm } from "@frontend-opensource/use-react-hooks";
+import {
+  Dialog,
+  DialogTrigger,
+  Button,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  Badge,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+  Checkbox,
+  Select,
+  DateRangePicker,
+  DialogClose,
+  DialogFooter,
+} from "@common/components/ui";
+import { cn } from "@common/components/lib";
+import { CodeSelect } from "@/entities/code/@x/posting";
+import { SiteApi, type Site } from "@/entities/site/@x/posting";
+import type { PageableList } from "@/shared/model";
+import { ENDPOINT } from "@/shared/config";
+import { PostingApi } from "../api/posting-service";
+import {
+  postingFormSchema,
+  type PostingFormData,
+  type PostingType,
+  type PostPayloadData,
+} from "../model/posting-interface";
+import { useAlertStore } from "@/shared/lib/use-alert-store";
+
+type DateRange = {
+  from: string;
+  to?: string;
+};
+
+type PostingTarget = {
+  pstgTrgtNm: string;
+  pstgTrgtNo: number;
+};
+
+type PostingDialogProps = {
+  postingType: PostingType;
+  postingTargets: PostingTarget[];
+};
+
+const POSTING_TYPE_LABEL = {
+  POPUP: "팝업",
+  BANNER: "배너",
+  IMAGE: "이미지",
+} as const;
+
+function PostingDialog({ postingType, postingTargets }: PostingDialogProps) {
+  const { confirm } = useConfirm();
+  const { setMessage: alert } = useAlertStore((state) => state);
+  const [selectedRows, setSelectedRows] = useState<number[]>([]);
+  const [rememberPeriodCode, setRememberPeriodCode] = useState<
+    Record<string, string>
+  >({});
+  const [rememberPeriodDate, setRememberPeriodDate] = useState<
+    Record<string, DateRange | undefined>
+  >({});
+
+  const { data: siteList } = useQuery<PageableList<Site>>({
+    queryKey: [ENDPOINT.CMS_SERVICE.SITES],
+    queryFn: () => SiteApi.getSiteList({}),
+  });
+
+  const { mutateAsync: savePosting } = useMutation({
+    mutationFn: (data: PostPayloadData[]) => PostingApi.savePosting(data),
+    onSuccess: () => {
+      alert("저장되었습니다.");
+    },
+  });
+
+  const form = useForm<PostingFormData>({
+    resolver: zodResolver(postingFormSchema),
+  });
+  const { fields, append, replace } = useFieldArray({
+    control: form.control,
+    name: "pstg",
+  });
+
+  const isFormValid =
+    fields.length && fields.every((field) => field.pstgPrdSeCd !== "");
+
+  const isAllSelected =
+    siteList && selectedRows.length === siteList.content.length;
+
+  const postingPeriod = (siteId: string) => {
+    const periodCode = Number(rememberPeriodCode[siteId]);
+
+    if (periodCode === 99) return "상시";
+
+    return `${dayjs().format("YYYY-MM-DD")} ~ ${dayjs()
+      .add(periodCode, "day")
+      .format("YYYY-MM-DD")}`;
+  };
+
+  const handleOpenChange = (open: boolean) => {
+    if (open) return true;
+    replace([]);
+    setSelectedRows([]);
+    setRememberPeriodCode({});
+    setRememberPeriodDate({});
+  };
+
+  const handleAppendFields = (i: number) => {
+    const siteId = siteList?.content[i]?.siteId ?? "";
+    const newFields = postingTargets.map((target) => ({
+      siteId,
+      pstgTypeCd: postingType,
+      pstgTrgtNo: target.pstgTrgtNo,
+      pstgBgngDt: rememberPeriodDate[siteId]?.from ?? "",
+      pstgEndDt: rememberPeriodDate[siteId]?.to ?? "",
+      pstgPrdSeCd: rememberPeriodCode[siteId] ?? "",
+      delYn: "N",
+      mode: "C",
+    }));
+    append(newFields);
+  };
+
+  const handleUpdateFields =
+    (siteId: string) => (obj: Record<string, unknown>) => {
+      const updatedFields = fields.map((field) =>
+        "siteId" in field && field.siteId === siteId
+          ? { ...field, ...obj }
+          : field,
+      );
+      replace(updatedFields);
+    };
+
+  const handleRemoveFields = (siteId: string) => {
+    const filteredFields = fields.filter(
+      (field) => "siteId" in field && field.siteId !== siteId,
+    );
+    replace(filteredFields);
+  };
+
+  const handleSelectRow = (i: number) => {
+    const isSelected = selectedRows.includes(i);
+    setSelectedRows((prev) =>
+      isSelected ? prev.filter((j) => j !== i) : [...prev, i],
+    );
+
+    if (isSelected) {
+      const siteId = siteList?.content[i]?.siteId;
+      if (!siteId) return;
+      handleRemoveFields(siteId);
+      return;
+    }
+
+    handleAppendFields(i);
+  };
+
+  const handleSelectAll = () => {
+    if (selectedRows.length === (siteList?.content.length ?? 0)) {
+      replace([]);
+      setSelectedRows([]);
+    } else {
+      replace([]);
+      setSelectedRows(siteList?.content.map((_, i) => i) ?? []);
+      siteList?.content.forEach((_, i) => handleAppendFields(i));
+    }
+  };
+
+  const handlePeriodCodeChange = (siteId: string) => (value: string) => {
+    const from = dayjs().format("YYYY-MM-DD 00:00:00");
+    const to = dayjs().add(Number(value), "day").format("YYYY-MM-DD 23:59:59");
+
+    setRememberPeriodCode((prev) => ({
+      ...prev,
+      [siteId]: value,
+    }));
+    setRememberPeriodDate((prev) => ({
+      ...prev,
+      [siteId]: { from, to },
+    }));
+    handleUpdateFields(siteId)({
+      pstgPrdSeCd: value,
+      pstgBgngDt: from,
+      pstgEndDt: to,
+    });
+  };
+
+  const handlePeriodDateChange =
+    (siteId: string) => (value: DateRange | undefined) => {
+      const from = dayjs(value?.from).format("YYYY-MM-DD 00:00:00");
+      const to = dayjs(value?.to).format("YYYY-MM-DD 23:59:59");
+      setRememberPeriodDate((prev) => ({
+        ...prev,
+        [siteId]: { from, to },
+      }));
+      handleUpdateFields(siteId)({
+        pstgBgngDt: from,
+        pstgEndDt: to,
+      });
+    };
+
+  const handleSave = async () => {
+    if (await confirm("저장하시겠습니까?")) {
+      const data = form.getValues("pstg");
+      await savePosting(data);
+    }
+  };
+
+  return (
+    <Dialog onOpenChange={handleOpenChange}>
+      <DialogTrigger asChild>
+        <Button color="emerald" disabled={!postingTargets.length}>
+          <i className="diveicon di-layer" />
+          사이트반영
+        </Button>
+      </DialogTrigger>
+      <DialogContent className="max-w-[68rem]" aria-describedby={undefined}>
+        <DialogHeader>
+          <DialogTitle>사이트 반영</DialogTitle>
+        </DialogHeader>
+        <div className="card bg-accent !p-4">
+          <h3 className="font-semibold">
+            선택된 {POSTING_TYPE_LABEL[postingType]}
+          </h3>
+          <div className="mt-4 flex flex-wrap gap-3">
+            {postingTargets.map((target) => (
+              <Badge key={target.pstgTrgtNo}>
+                <span className="text-xl">{target.pstgTrgtNm}</span>
+              </Badge>
+            ))}
+          </div>
+        </div>
+        <div className="m-2 max-h-[30rem] overflow-auto">
+          <Table variant="secondary">
+            <colgroup>
+              <col width="10%" />
+              <col width="25%" />
+              <col width="65%" />
+            </colgroup>
+            <TableHeader className="sticky top-0 z-10 bg-accent">
+              <TableRow>
+                <TableHead className="!px-0">
+                  <Checkbox
+                    checked={isAllSelected}
+                    onCheckedChange={handleSelectAll}
+                  />
+                </TableHead>
+                <TableHead>사이트명</TableHead>
+                <TableHead>게시 구분</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {siteList?.content.map((site, i) => (
+                <TableRow key={site.siteId}>
+                  <TableCell align="center" className="!px-0">
+                    <Checkbox
+                      checked={selectedRows.includes(i)}
+                      onCheckedChange={() => handleSelectRow(i)}
+                    />
+                  </TableCell>
+                  <TableCell align="center">{site.siteNm}</TableCell>
+                  <TableCell align="left">
+                    <div className="flex items-center gap-4">
+                      <PostingPeriodSelect
+                        onValueChange={handlePeriodCodeChange(site.siteId)}
+                        disabled={!selectedRows.includes(i)}
+                      />
+                      {!!Number(rememberPeriodCode[site.siteId]) && (
+                        <span
+                          className={cn(
+                            "text-lg text-label",
+                            !selectedRows.includes(i) && "text-muted",
+                          )}
+                        >
+                          게시 기간: <u>{postingPeriod(site.siteId)}</u>
+                        </span>
+                      )}
+                      {Number(rememberPeriodCode[site.siteId]) === 0 && (
+                        <DateRangePicker
+                          handleDateChange={(date) =>
+                            handlePeriodDateChange(site.siteId)(
+                              date as DateRange | undefined,
+                            )
+                          }
+                          disabled={!selectedRows.includes(i)}
+                        />
+                      )}
+                    </div>
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </div>
+        <DialogFooter className="!justify-center">
+          <Button size="lg" onClick={handleSave} disabled={!isFormValid}>
+            저장
+          </Button>
+          <DialogClose asChild>
+            <Button size="lg" color="white">
+              취소
+            </Button>
+          </DialogClose>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+function PostingPeriodSelect({
+  ...props
+}: React.ComponentPropsWithoutRef<typeof Select>) {
+  return <CodeSelect upCd="PSTGPRDCD" {...props} />;
+}
+
+export { PostingDialog };

apps/common/feature/src/entities/site/@x/posting.ts

@@ -0,0 +1,2 @@
+export { SiteApi } from "../api/site-service";
+export type { Site } from "../model/site-interface";

apps/common/feature/src/entities/site/api/site-service.ts

@@ -0,0 +1,51 @@
+import { client } from "@/shared/api";
+import { ENDPOINT } from "@/shared/config";
+import {
+  siteFormSchema,
+  type SiteService,
+  type SiteList,
+  type SiteDetail,
+  type SiteParams,
+  type SiteFormData,
+} from "../model/site-interface";
+
+export class SiteApiService implements SiteService {
+  public async getSiteList(params?: SiteParams): Promise<SiteList> {
+    const response = await client.get<SiteList>(
+      `${ENDPOINT.CMS_SERVICE.SITES}`,
+      { params },
+    );
+    return response.data;
+  }
+
+  public async siteDetail(siteId: string): Promise<SiteDetail> {
+    const response = await client.get<SiteDetail>(
+      `${ENDPOINT.CMS_SERVICE.SITES}/${siteId}`,
+    );
+    return response.data;
+  }
+
+  public async createSite(data: SiteFormData): Promise<void> {
+    const validatedData = siteFormSchema.parse(data);
+    const response = await client.post<void>(
+      `${ENDPOINT.CMS_SERVICE.SITES}`,
+      validatedData,
+    );
+    return response.data;
+  }
+
+  public async updateSite(siteId: string, data: SiteFormData): Promise<void> {
+    const validatedData = siteFormSchema.parse(data);
+    const response = await client.put<void>(
+      `${ENDPOINT.CMS_SERVICE.SITES}/${siteId}`,
+      validatedData,
+    );
+    return response.data;
+  }
+
+  public async deleteSite(siteId: string): Promise<void> {
+    await client.delete(`${ENDPOINT.CMS_SERVICE.SITES}/${siteId}`);
+  }
+}
+
+export const SiteApi = new SiteApiService();

apps/common/feature/src/entities/site/index.ts

@@ -0,0 +1,7 @@
+export { SiteApi } from "./api/site-service";
+export {
+  siteFormSchema,
+  type SiteParams,
+  type Site,
+  type SiteFormData,
+} from "./model/site-interface";

apps/common/feature/src/entities/site/model/site-interface.ts

@@ -0,0 +1,59 @@
+import { z } from "zod";
+import type { PageableParams, PageableList } from "@/shared/model";
+
+export interface SiteParams extends PageableParams {
+  siteNm?: string;
+  siteKndCd?: string;
+  useYn?: string;
+}
+
+export interface Site {
+  siteId: string;
+  siteNm: string;
+  siteKindCode: string;
+  bscSiteYn: string;
+  siteAddr: string;
+  useYn: string;
+  regDt: string;
+  rgTrNm: string;
+  dmnAddr: string;
+}
+
+export interface SiteDetail extends SiteFormData {
+  siteId: string;
+  siteKindNm: string;
+  basicSiteYn: string;
+  faxNumber: string;
+  regDt: string;
+  rgTr: string;
+  mdfcnDt: string;
+  mdFr: string;
+  rgTrNm: string;
+  mdfrNm: string;
+}
+
+export const siteFormSchema = z.object({
+  siteId: z.string().max(2).nonempty(),
+  siteNm: z.string().max(100).nonempty(),
+  siteExpln: z.string().max(1000).nullish(),
+  siteKndCd: z.string().max(10).nonempty(),
+  siteAddr: z.string().max(2000).nullish(),
+  faxNo: z.string().max(100).nullish(),
+  telNo: z.string().max(1000).nullish(),
+  lwndCn: z.string().max(2000).nullish(),
+  bscSiteYn: z.string(),
+  bkmkIcon: z.string().max(100).nullish(),
+  useYn: z.string(),
+  siteSkn: z.string().max(10).nullish(),
+  dmnAddr: z.string().nullish(),
+});
+
+export type SiteFormData = z.infer<typeof siteFormSchema>;
+export type SiteList = PageableList<Site>;
+
+export interface SiteService {
+  getSiteList(params: SiteParams): Promise<SiteList>;
+  siteDetail(siteId: string): Promise<SiteDetail>;
+  updateSite(siteId: string, data: SiteFormData): Promise<void>;
+  createSite(data: SiteFormData): Promise<void>;
+}

apps/common/feature/src/pages/auth/login/index.ts

@@ -0,0 +1 @@
+export { LoginPage } from "./ui/login-page";

apps/common/feature/src/pages/auth/login/ui/login-page.tsx

@@ -0,0 +1,129 @@
+"use client";
+
+import Image from "next/image";
+import { images } from "@common/assets";
+import { LoginApi } from "@/entities/auth";
+import "./login.css";
+
+function LoginPage() {
+  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+
+    const formData = new FormData(e.target as HTMLFormElement);
+    const userId = formData.get("id") as string;
+    const password = formData.get("password") as string;
+
+    await LoginApi.login({ userId, password });
+    window.location.href = "/dashboard";
+  };
+
+  return (
+    <div className="login fx">
+      <div className="left_box fx">
+        <div className="text">
+          <h1>
+            하수도정보시스템
+            <br />
+            <span>CMS 통합관리시스템</span>
+          </h1>
+          <p>하수도정보시스템 CMS 통합관리시스템에 오신 것을 환영합니다.</p>
+        </div>
+        <div className="img">
+          <Image src={images.logo} width={229} height={46} alt="logo" />
+        </div>
+      </div>
+      <form
+        id="loginForm"
+        name="loginForm"
+        method="post"
+        onSubmit={handleSubmit}
+      >
+        <div className="login_box fx">
+          <ul className="fx">
+            <li>
+              <h2>ID</h2>
+              <div className="input_st st1">
+                <i className="diveicon di-account-box" />
+                <input
+                  type="text"
+                  className="id"
+                  title="아이디를 입력하세요."
+                  id="id"
+                  name="id"
+                  maxLength={12}
+                />
+              </div>
+            </li>
+            <li>
+              <h2>PASSWORD</h2>
+              <div className="input_st st2">
+                <i className="diveicon di-key" />
+                <input
+                  type="password"
+                  className="input_style"
+                  maxLength={25}
+                  title="비밀번호를 입력하세요."
+                  id="password"
+                  name="password"
+                />
+              </div>
+            </li>
+          </ul>
+          <div className="bottom_box fx">
+            <div className="checks fx">
+              <input
+                type="checkbox"
+                name="checkId"
+                title="로그인ID 저장여부"
+                id="checkId"
+              />
+              <label htmlFor="checkId">아이디저장</label>
+            </div>
+            {/* <a href="javascript:fnUserSearch();" className=" pw_message fx"><i className="xi-external-link"></i>비밀번호 또는 아이디를 잃어버리셨나요?</a> */}
+          </div>
+          <button type="submit" className="login_btn fx">
+            <span>LOGIN</span>
+          </button>
+          <div className="footer">
+            <div className="copy fx">
+              <p>copyright © 2023 KECO. All rights reserved.</p>
+            </div>
+            <div className="fot_btn fx">
+              <a
+                href="https://keco.or.kr/web/lay1/S1T6C1348/contents.do"
+                target="_blank"
+              >
+                개인정보처리방침
+              </a>
+              <a
+                href="https://keco.or.kr/web/lay1/S1T6C1349/contents.do"
+                target="_blank"
+              >
+                저작권정책안내
+              </a>
+              <a
+                href="https://keco.or.kr/web/lay1/S1T6C1350/contents.do"
+                target="_blank"
+              >
+                이메일무단수집거부
+              </a>
+            </div>
+            <p className="addr fx">
+              <span>
+                주소 : (22689) 인천광역시 서구 환경로 42(경서동
+                종합환경연구단지)
+              </span>
+              <span>
+                전화 : (시스템) 032-590-4321, 3752, 4314 / (통 계) 032-590-3723,
+                3722
+              </span>
+              <span>팩스 :032-590-3729</span>
+            </p>
+          </div>
+        </div>
+      </form>
+    </div>
+  );
+}
+
+export { LoginPage };

apps/common/feature/src/pages/auth/login/ui/login.css

@@ -0,0 +1,311 @@
+/**
+* OLYM Cascading Style Sheets
+* File Name : login.css
+* Description : 로그인 스타일시트
+* Author : Web business Team / Choi Hyun Mi
+* Email : desingtj@olym.co.kr
+* Date : 2023.07.20
+* Update : 2023.07.26
+* Copyright(c) 2023 OLYM Communications. All Rights Reserved.
+*/
+html,
+body {
+  background: #fff;
+}
+.fx {
+  display: flex;
+  -ms-display: flex;
+  -webkit-display: flex;
+  box-sizing: border-box;
+}
+.login {
+  width: 100%;
+  height: 100vh;
+}
+.login .left_box {
+  width: 100%;
+  background: url(../../../../../public/images/bg_login.jpg) no-repeat
+    center/cover;
+  flex-direction: column;
+  justify-content: space-between;
+  padding: 7% 5% 5% 5%;
+}
+.login .left_box .text h1 {
+  font-size: 53px;
+  color: #fff;
+}
+.login .left_box .text h1 span {
+  font-weight: 800;
+}
+.login .left_box .text p {
+  margin-top: 40px;
+  font-size: 18px;
+  color: #fff;
+}
+.login .login_box {
+  width: 100%;
+  flex-direction: column;
+  justify-content: center;
+  padding: 4% 12% 4% 6%;
+}
+.login .login_box > ul {
+  flex-direction: column;
+  gap: 40px;
+}
+.login .login_box > ul > li h2 {
+  font-size: 22px;
+  font-weight: 600;
+  color: #2640a5;
+  margin-bottom: 14px;
+}
+.login .login_box > ul > li .input_st {
+  position: relative;
+}
+.login .login_box > ul > li .input_st .diveicon {
+  position: absolute;
+  top: 50%;
+  left: 28px;
+  transform: translateY(-50%);
+  font-family: "Xeicon";
+  font-size: 25px;
+  color: #003288;
+}
+.login .login_box > ul > li input {
+  width: 100%;
+  padding: 20px 20px 20px 70px;
+  background: #f7f7f7;
+  box-sizing: border-box;
+  border: none;
+  border-radius: 5px;
+  font-size: 18px;
+  font-weight: 700;
+  color: #000;
+  height: auto;
+}
+.login .login_box > ul > li input:focus {
+  outline: 1px solid #3c5fe5;
+}
+.login .login_box > ul > li input::placeholder {
+  color: #afabab;
+  font-weight: 500;
+}
+.login .login_box .bottom_box {
+  justify-content: space-between;
+  gap: 20px;
+  padding: 50px 0 45px 0;
+}
+.login .login_box .bottom_box .checks {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.login .login_box .bottom_box .checks input[type="checkbox"] {
+  width: 18px;
+  height: 18px;
+}
+.login .login_box .bottom_box .checks label {
+  font-size: 14px;
+}
+.login .login_box .bottom_box .pw_message {
+  align-items: center;
+  gap: 5px;
+  color: #636363;
+  font-weight: 500;
+  border-bottom: 1px solid #ccc;
+  padding-bottom: 5px;
+}
+.login .login_box .bottom_box .pw_message i {
+  color: #327af5;
+  font-size: 20px;
+}
+.login .login_box .login_btn {
+  position: relative;
+  border-radius: 5px;
+  padding: 24px 15px;
+  background: linear-gradient(
+    to left,
+    #1d3969 0%,
+    #264078 10%,
+    #172558 40%,
+    #162254 50%,
+    #111c43 60%,
+    #111c42 100%
+  );
+  overflow: hidden;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+  color: #fff;
+  cursor: pointer;
+}
+.login .login_box .login_btn span {
+  font-family: "Montserrat";
+  font-size: 19px;
+  font-weight: 700;
+  position: relative;
+}
+.login .login_box .login_btn i {
+  font-size: 22px;
+  transform: translateY(-2px);
+}
+.login .login_box .login_btn:before {
+  display: block;
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  background: linear-gradient(
+    to right,
+    #1d3969 0%,
+    #264078 10%,
+    #172558 40%,
+    #162254 50%,
+    #111c43 60%,
+    #111c42 100%
+  );
+  transition: opacity 0.5s;
+}
+.login .login_box .login_btn:hover::before {
+  opacity: 1;
+}
+.login .footer .copy {
+  margin-top: 36px;
+  justify-content: space-between;
+  align-items: center;
+  gap: 3%;
+}
+.login .footer .copy p {
+  font-size: 13px;
+  color: #d4d4d4;
+  width: 44%;
+  text-align: center;
+}
+.login .footer .copy::before,
+.login .login_box .copy::after {
+  content: "";
+  width: 20%;
+  height: 1px;
+  background: #d4d4d4;
+}
+.login .footer .fot_btn {
+  gap: 20px;
+  margin: 30px 0 10px 0;
+}
+.login .footer .fot_btn a {
+  color: #333;
+  font-weight: 700;
+  font-size: 13px;
+}
+.login .footer .fot_btn a:hover {
+  color: #003288;
+}
+.login .footer .addr {
+  color: #666;
+  font-size: 13px;
+  gap: 3px 20px;
+  flex-wrap: wrap;
+}
+/* 비밀번호 변경 팝업창 */
+.login .modal .modal_container {
+  width: 750px;
+}
+.login .pw_desc {
+  padding: 10px 10px 30px 10px;
+  color: #666;
+}
+.login .pw_desc p {
+  font-size: 1.25rem;
+  color: #000;
+  font-weight: 700;
+  margin-bottom: 10px;
+}
+.login .pw_desc span {
+  color: #f60;
+  font-weight: 700;
+}
+.login .modal .form_write {
+  border-top: 1px solid #ddd;
+  border-bottom: 1px solid #ddd;
+  padding: 20px 50px;
+}
+@media (max-width: 1024px) {
+  .login {
+    flex-direction: column;
+    height: auto;
+  }
+  .login .left_box {
+    padding: 30px;
+    flex-direction: column-reverse;
+    gap: 20px;
+  }
+  .login .left_box .text h1 {
+    font-size: 30px;
+    line-height: 1.2em;
+  }
+  .login .left_box .text p {
+    margin-top: 20px;
+    font-size: 14px;
+  }
+  .login .left_box .img img {
+    height: 40px;
+  }
+  .login .login_box {
+    padding: 30px;
+  }
+  .login .login_box > ul {
+    gap: 20px;
+  }
+  .login .login_box > ul > li h2 {
+    margin-bottom: 7px;
+  }
+  .login .login_box > ul > li .input_st::after {
+    left: 15px;
+    font-size: 20px;
+  }
+  .login .login_box > ul > li input {
+    padding: 15px 10px 15px 50px;
+    font-size: 16px;
+  }
+  .login .login_box .bottom_box {
+    flex-direction: column;
+    align-items: flex-start;
+    padding: 30px 0;
+  }
+  .login .login_box .bottom_box .id_save label {
+    font-size: 14px;
+  }
+  .login .login_box .login_btn {
+    padding: 15px;
+  }
+  .login .login_box .login_btn span {
+    font-size: 16px;
+  }
+  .login .login_box .login_btn i {
+    font-size: 18px;
+    transform: translateY(-1px);
+  }
+  .login .login_box .copy p {
+    width: 100%;
+  }
+  .login .login_box .copy::before,
+  .login .login_box .copy::after {
+    display: none;
+  }
+  .login .footer .addr {
+    font-size: 11px;
+    gap: 3px 10px;
+  }
+  .login .modal .modal_container {
+    width: 90%;
+  }
+  .login .pw_desc {
+    padding: 0 0 20px 0;
+  }
+  .login .modal .form_write {
+    padding: 10px;
+  }
+}
+/* // login */

apps/common/feature/src/pages/board/index.ts

@@ -0,0 +1 @@
+export { BoardPage } from "./ui/board-page";

apps/common/feature/src/pages/board/ui/board-page.tsx

@@ -0,0 +1,5 @@
+function BoardPage() {
+  return <div>게시판 관리</div>;
+}
+
+export { BoardPage };

apps/common/feature/src/shared/api/client.ts

@@ -0,0 +1,8 @@
+import { Client } from "@common/network";
+import { BASE_URL } from "../config/api";
+import { SITE_ID } from "../config/env";
+
+export const client = Client.getInstance({
+  baseURL: BASE_URL,
+  siteId: SITE_ID,
+});

apps/common/feature/src/shared/api/index.ts

@@ -0,0 +1 @@
+export { client } from "./client";

apps/common/feature/src/shared/config/api.ts

@@ -0,0 +1,40 @@
+import { PROXY_HOST } from "./env";
+
+export const BASE_URL = `${PROXY_HOST}/server`;
+
+export const ENDPOINT = {
+  ATTACH_SERVICE: {
+    TUS_UPLOAD: "/attach-service/api/v1/tus/upload",
+    EDITOR_UPLOAD: "/attach-service/api/v1/upload/editor",
+    IMAGES: "/attach-service/api/v1/images",
+    ATTACHMENTS: "/attach-service/api/v1/atfl/attachments",
+  },
+  USER_SERVICE: {
+    LOGIN: "/user-service/login",
+    USERS: "/user-service/api/v1/users",
+    SILENT_REFRESH: "/user-service/api/v1/users/token/refresh",
+    AUTHRTS: "/user-service/api/v1/authorizations",
+    ROLES_AUTHRTS: "/user-service/api/v1/role-authorizations",
+  },
+  CMS_SERVICE: {
+    SITES: "/cms-service/api/v1/sites",
+    IPS: "/cms-service/api/v1/site-ips",
+    DOMAINS: "/cms-service/api/v1/site-dmns",
+    POSTINGS: "/cms-service/api/v1/site-pstgs",
+    CODE: "/cms-service/api/v1/code/cache",
+    MENUS: "/cms-service/api/v1/menus",
+    MENU_ROLES: "/cms-service/api/v1/menu-roles",
+    MENU_AUTHRTS: "/cms-service/api/v1/menu-authrts",
+    CONTENTS: "/cms-service/api/v1/contents",
+    USER_ORGANIZATION: "/cms-service/api/v1/user-ognz",
+    IMAGES: "/cms-service/api/v1/images",
+    BANNERS: "/cms-service/api/v1/bnrs",
+    TEMPLATE: "/cms-service/api/v1/tmplt",
+    TERMS: "/cms-service/api/v1/trms",
+  },
+  BOARD_SERVICE: {
+    BBS: "/board-service/api/v1/bbs",
+  },
+};
+
+export const JWT_EXPIRATION_TIME = 1800000;

apps/common/feature/src/shared/config/env.ts

@@ -0,0 +1,13 @@
+export const PORT = process.env.NEXT_PUBLIC_PORT || "3000";
+export const PROXY_HOST =
+  process.env.NEXT_PUBLIC_PROXY_HOST || `http://localhost:${PORT}`;
+
+export const SERVER_API_URL = process.env.NEXT_PUBLIC_SERVER_API_URL;
+export const SITE_ID = process.env.NEXT_PUBLIC_SITE_ID || "CS";
+
+export const CLAIM_NAME = process.env.NEXT_PUBLIC_CLAIM_NAME || "Authorization";
+export const ACCESS_TOKEN =
+  process.env.NEXT_PUBLIC_ACCESS_TOKEN || "access-token";
+export const REFRESH_TOKEN =
+  process.env.NEXT_PUBLIC_REFRESH_TOKEN || "refresh-token";
+export const AUTH_USER_ID = process.env.NEXT_PUBLIC_AUTH_USER_ID || "token-id";

apps/common/feature/src/shared/config/index.ts

@@ -0,0 +1,2 @@
+export * from "./api";
+export * from "./env";

apps/common/feature/src/shared/lib/cookie.ts

@@ -0,0 +1,29 @@
+import Cookies from "js-cookie";
+
+export function getCookie(name: string): string | undefined {
+  if (typeof window === "undefined") {
+    return undefined;
+  }
+  return Cookies.get(name);
+}
+
+export function setCookie(
+  name: string,
+  value: string,
+  options?: Cookies.CookieAttributes,
+): void {
+  if (typeof window === "undefined") {
+    return;
+  }
+  Cookies.set(name, value, options);
+}
+
+export function removeCookie(
+  name: string,
+  options?: Cookies.CookieAttributes,
+): void {
+  if (typeof window === "undefined") {
+    return;
+  }
+  Cookies.remove(name, options);
+}

apps/common/feature/src/shared/lib/index.ts

@@ -0,0 +1,3 @@
+export { getCookie, setCookie, removeCookie } from "./cookie";
+export { useMenuStore } from "./use-menu-store";
+export { useUserStore } from "./use-user-store";

apps/common/feature/src/shared/lib/use-alert-store.ts

@@ -0,0 +1,14 @@
+import { useStore } from "zustand";
+import { useContext } from "react";
+import type { AlertStore } from "../store/alert-store";
+import { StoreContext } from "../providers/store-provider";
+
+export const useAlertStore = <T>(selector: (store: AlertStore) => T): T => {
+  const storeContext = useContext(StoreContext);
+
+  if (!storeContext) {
+    throw new Error("useAlertStore must be used within StoreProvider");
+  }
+
+  return useStore(storeContext.alertStore, selector);
+};

apps/common/feature/src/shared/lib/use-attachment-store.ts

@@ -0,0 +1,14 @@
+import { useStore } from "zustand";
+import { useContext } from "react";
+import type { AttachmentStore } from "../store/attachment-store";
+import { StoreContext } from "../providers/store-provider";
+
+export const useAttachmentStore = <T>(
+  selector: (store: AttachmentStore) => T,
+): T => {
+  const store = useContext(StoreContext);
+  if (!store) {
+    throw new Error("useAttachmentStore must be used within StoreProvider");
+  }
+  return useStore(store.attachmentStore, selector);
+};

apps/common/feature/src/shared/lib/use-menu-store.ts

@@ -0,0 +1,14 @@
+import { useStore } from "zustand";
+import { useContext } from "react";
+import type { MenuStore } from "../store/menu-store";
+import { StoreContext } from "../providers/store-provider";
+
+export const useMenuStore = <T>(selector: (store: MenuStore) => T): T => {
+  const storeContext = useContext(StoreContext);
+
+  if (!storeContext) {
+    throw new Error("useMenuStore must be used within StoreProvider");
+  }
+
+  return useStore(storeContext.menuStore, selector);
+};

apps/common/feature/src/shared/lib/use-tus.ts

@@ -0,0 +1,64 @@
+import { useEffect, useState } from "react";
+import { type HttpResponse, Upload } from "tus-js-client";
+import { AUTH_USER_ID, CLAIM_NAME, ENDPOINT } from "../config";
+import { useAttachmentStore } from "./use-attachment-store";
+import { getCookie } from "./cookie";
+
+export const useTus = () => {
+  const { attachmentFileCode, setAttachmentFileCode } = useAttachmentStore(
+    (state) => state,
+  );
+
+  const [file, setFile] = useState<File | null>(null);
+  const [upload, setUpload] = useState<Upload | null>(null);
+  const [response, setResponse] = useState<HttpResponse | null>(null);
+  const [progress, setProgress] = useState<number>(0);
+
+  const metadata = {
+    filename: file?.name ?? "",
+    filetype: file?.type ?? "",
+    atflCd: attachmentFileCode,
+  };
+
+  const createUpload = () => {
+    return new Upload(file!, {
+      endpoint: `${ENDPOINT.ATTACH_SERVICE.TUS_UPLOAD}`,
+      chunkSize: 10 * 1024 * 1024,
+      headers: {
+        [CLAIM_NAME]: getCookie(CLAIM_NAME) ?? "",
+        [AUTH_USER_ID]: getCookie(AUTH_USER_ID) ?? "",
+      },
+      metadata,
+      onError(error) {
+        throw new Error(`Failed because: ${error}`);
+      },
+      onProgress(bytesUploaded, bytesTotal) {
+        const percentage = ((bytesUploaded / bytesTotal) * 100).toFixed(2);
+        setProgress(Number(percentage));
+      },
+      onAfterResponse(req, res) {
+        const fileInfo = res.getHeader("X-File-Info");
+        if (fileInfo === undefined || fileInfo === null) return;
+
+        setAttachmentFileCode(JSON.parse(fileInfo)?.atflCd ?? "");
+        setResponse(res);
+      },
+    });
+  };
+
+  useEffect(() => {
+    if (!file) return;
+
+    const upload = createUpload();
+    upload.start();
+    setUpload(upload);
+  }, [file]);
+
+  return {
+    file,
+    upload,
+    response,
+    progress,
+    setFile,
+  };
+};

apps/common/feature/src/shared/lib/use-user-store.ts

@@ -0,0 +1,14 @@
+import { useStore } from "zustand";
+import { useContext } from "react";
+import type { UserStore } from "../store/user-store";
+import { StoreContext } from "../providers/store-provider";
+
+export const useUserStore = <T>(selector: (store: UserStore) => T): T => {
+  const storeContext = useContext(StoreContext);
+
+  if (!storeContext) {
+    throw new Error("useUserStore must be used within StoreProvider");
+  }
+
+  return useStore(storeContext.userStore, selector);
+};

apps/common/feature/src/shared/model/api-interface.ts

@@ -0,0 +1,34 @@
+interface SortConfig {
+  empty: boolean;
+  sorted: boolean;
+  unsorted: boolean;
+}
+
+interface PageableConfig {
+  sort: SortConfig;
+  offset: number;
+  pageNumber: number;
+  pageSize: number;
+  paged: boolean;
+  unpaged: boolean;
+}
+
+export interface PageableList<T> {
+  content: T[];
+  pageable: PageableConfig;
+  sort: SortConfig;
+  totalPages: number;
+  totalElements: number;
+  number: number;
+  numberOfElements: number;
+  size: number;
+  first: boolean;
+  last: boolean;
+  empty: boolean;
+}
+
+export interface PageableParams {
+  page?: number;
+  size?: number;
+  sort?: string[];
+}

apps/common/feature/src/shared/model/index.ts

@@ -0,0 +1 @@
+export * from "./api-interface";

apps/common/feature/src/shared/providers/index.ts

@@ -0,0 +1 @@
+export { StoreProvider } from "./store-provider";

apps/common/feature/src/shared/providers/store-provider.tsx

@@ -0,0 +1,38 @@
+"use client";
+
+import { createContext, useRef } from "react";
+import {
+  createAlertStore,
+  createAttachmentStore,
+  createMenuStore,
+  createUserStore,
+} from "../store";
+
+type StoreContextType = {
+  alertStore: ReturnType<typeof createAlertStore>;
+  attachmentStore: ReturnType<typeof createAttachmentStore>;
+  menuStore: ReturnType<typeof createMenuStore>;
+  userStore: ReturnType<typeof createUserStore>;
+};
+
+export const StoreContext = createContext<StoreContextType | undefined>(
+  undefined,
+);
+
+export const StoreProvider = ({ children }: { children: React.ReactNode }) => {
+  const storeRef = useRef<StoreContextType | null>(null);
+  if (storeRef.current === null) {
+    storeRef.current = {
+      alertStore: createAlertStore(),
+      attachmentStore: createAttachmentStore(),
+      menuStore: createMenuStore(),
+      userStore: createUserStore(),
+    };
+  }
+
+  return (
+    <StoreContext.Provider value={storeRef.current}>
+      {children}
+    </StoreContext.Provider>
+  );
+};

apps/common/feature/src/shared/store/alert-store.ts

@@ -0,0 +1,25 @@
+import { createStore } from "zustand/vanilla";
+
+export type AlertState = {
+  message: string;
+  callback?: () => void;
+};
+
+export type AlertActions = {
+  setMessage: (message: string, callback?: () => void) => void;
+};
+
+export type AlertStore = AlertState & AlertActions;
+
+export const defaultInitState: AlertState = {
+  message: "",
+  callback: undefined,
+};
+
+export const createAlertStore = (initState: AlertState = defaultInitState) => {
+  return createStore<AlertStore>()((set) => ({
+    ...initState,
+    setMessage: (message: string, callback?: () => void) =>
+      set(() => ({ message, callback })),
+  }));
+};

apps/common/feature/src/shared/store/attachment-store.ts

@@ -0,0 +1,25 @@
+import { createStore } from "zustand/vanilla";
+
+export type AttachmentState = {
+  attachmentFileCode: string;
+};
+
+export type AttachmentActions = {
+  setAttachmentFileCode: (attachmentFileCode: string) => void;
+};
+
+export type AttachmentStore = AttachmentState & AttachmentActions;
+
+export const defaultInitState: AttachmentState = {
+  attachmentFileCode: "",
+};
+
+export const createAttachmentStore = (
+  initState: AttachmentState = defaultInitState,
+) => {
+  return createStore<AttachmentStore>()((set) => ({
+    ...initState,
+    setAttachmentFileCode: (attachmentFileCode: string) =>
+      set({ attachmentFileCode }),
+  }));
+};

apps/common/feature/src/shared/store/index.ts

@@ -0,0 +1,4 @@
+export { createAlertStore } from "./alert-store";
+export { createAttachmentStore } from "./attachment-store";
+export { createMenuStore } from "./menu-store";
+export { createUserStore, type IUserInfo } from "./user-store";

apps/common/feature/src/shared/store/menu-store.ts

@@ -0,0 +1,23 @@
+import { createStore } from "zustand/vanilla";
+import type { MenuItem } from "@common/components/api";
+
+export type MenuState = {
+  currentMenuInfo: MenuItem | null;
+};
+
+export type MenuActions = {
+  setCurrentMenuInfo: (menu: MenuItem) => void;
+};
+
+export type MenuStore = MenuState & MenuActions;
+
+export const defaultInitState: MenuState = {
+  currentMenuInfo: null,
+};
+
+export const createMenuStore = (initState: MenuState = defaultInitState) => {
+  return createStore<MenuStore>()((set) => ({
+    ...initState,
+    setCurrentMenuInfo: (menu: MenuItem) => set({ currentMenuInfo: menu }),
+  }));
+};

apps/common/feature/src/shared/store/user-store.ts

@@ -0,0 +1,56 @@
+import { createStore } from "zustand/vanilla";
+
+export interface IUserInfo {
+  regDt: string;
+  mdfcnDt: string;
+  rgtr: string;
+  mdfr: string;
+  userUnqId: string;
+  userId: string;
+  userName: string;
+  email: string;
+  encryptedPassword: string;
+  refreshToken: string;
+  userStateCode: string;
+  lastLoginDate: string;
+  loginFailCount: number;
+  pswdHnt: string;
+  pswdAns: string;
+  mphn: string;
+  telno: string;
+  zip: string;
+  addr: string;
+  daddr: string;
+  laeSeCd: string;
+  ogdpSeCd: string;
+  aprvYn: string;
+  autzrId: string;
+  expryYmd: string;
+  lastPswdChgDt: string;
+  googleId: string;
+  kakaoId: string;
+  naverId: string;
+  isSocialUser: boolean;
+  hasPassword: boolean;
+}
+
+export type UserState = {
+  userInfo: IUserInfo | null;
+};
+
+export type UserActions = {
+  setUserInfo: (userInfo: IUserInfo | null) => void;
+};
+
+export type UserStore = UserState & UserActions;
+
+export const defaultInitState: UserState = {
+  userInfo: null,
+};
+
+export const createUserStore = (initState: UserState = defaultInitState) => {
+  return createStore<UserStore>()((set) => ({
+    ...initState,
+    setUserInfo: (userInfo: IUserInfo | null) => set(() => ({ userInfo })),
+  }));
+};

apps/common/feature/src/shared/ui/alert-dialog.tsx

@@ -0,0 +1,32 @@
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogClose,
+  Button,
+} from "@common/components/ui";
+import { useAlertStore } from "../lib/use-alert-store";
+
+function AlertDialog() {
+  const { message, callback, setMessage } = useAlertStore((state) => state);
+  const handleOpenChange = () => {
+    setMessage("");
+    callback?.();
+  };
+  return (
+    <Dialog open={!!message} onOpenChange={handleOpenChange}>
+      <DialogContent aria-describedby={undefined}>
+        <div className="py-10">
+          <p className="text-center text-[1.4rem] text-foreground">{message}</p>
+        </div>
+        <DialogFooter className="!justify-center">
+          <DialogClose asChild>
+            <Button>확인</Button>
+          </DialogClose>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+export { AlertDialog };

apps/common/feature/src/shared/ui/confirm-dialog.tsx

@@ -0,0 +1,46 @@
+import { useConfirm } from "@frontend-opensource/use-react-hooks";
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogClose,
+  Button,
+  type ButtonProps,
+} from "@common/components/ui";
+
+type ConfirmDialogProps = {
+  open?: boolean;
+  confirmButtonProps?: ButtonProps & { label?: string };
+  cancelButtonProps?: ButtonProps & { label?: string };
+};
+
+function ConfirmDialog({
+  open,
+  confirmButtonProps,
+  cancelButtonProps,
+}: ConfirmDialogProps) {
+  const { message, isOpen, onConfirm, onCancel } = useConfirm();
+  return (
+    <Dialog open={open ?? isOpen} onOpenChange={onCancel}>
+      <DialogContent aria-describedby={undefined}>
+        <div className="py-10">
+          <p className="text-center text-[1.4rem] text-foreground">{message}</p>
+        </div>
+        <DialogFooter className="!justify-center">
+          <DialogClose asChild>
+            <Button onClick={onConfirm} {...confirmButtonProps}>
+              {confirmButtonProps?.label ?? "확인"}
+            </Button>
+          </DialogClose>
+          <DialogClose asChild>
+            <Button onClick={onCancel} color="white" {...cancelButtonProps}>
+              {cancelButtonProps?.label ?? "취소"}
+            </Button>
+          </DialogClose>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+export { ConfirmDialog };

apps/common/feature/src/shared/ui/form.tsx

@@ -0,0 +1,175 @@
+import * as React from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { Slot } from "@radix-ui/react-slot";
+import {
+  Controller,
+  FormProvider,
+  useFormContext,
+  type ControllerProps,
+  type FieldPath,
+  type FieldValues,
+} from "react-hook-form";
+import { cn, Label } from "@common/components";
+
+const Form = FormProvider;
+
+type FormFieldContextValue<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+> = {
+  name: TName;
+};
+
+const FormFieldContext = React.createContext<FormFieldContextValue>(
+  {} as FormFieldContextValue,
+);
+
+const FormField = <
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+>({
+  ...props
+}: ControllerProps<TFieldValues, TName>) => {
+  return (
+    <FormFieldContext.Provider value={{ name: props.name }}>
+      <Controller {...props} />
+    </FormFieldContext.Provider>
+  );
+};
+
+const useFormField = () => {
+  const fieldContext = React.useContext(FormFieldContext);
+  const itemContext = React.useContext(FormItemContext);
+  const { getFieldState, formState } = useFormContext();
+
+  const fieldState = getFieldState(fieldContext.name, formState);
+
+  if (!fieldContext) {
+    throw new Error("useFormField should be used within <FormField>");
+  }
+
+  const { id } = itemContext;
+
+  return {
+    id,
+    name: fieldContext.name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState,
+  };
+};
+
+type FormItemContextValue = {
+  id: string;
+};
+
+const FormItemContext = React.createContext<FormItemContextValue>(
+  {} as FormItemContextValue,
+);
+
+const FormItem = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => {
+  const id = React.useId();
+
+  return (
+    <FormItemContext.Provider value={{ id }}>
+      <div ref={ref} className={cn("space-y-2", className)} {...props} />
+    </FormItemContext.Provider>
+  );
+});
+FormItem.displayName = "FormItem";
+
+const FormLabel = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
+>(({ className, ...props }, ref) => {
+  const { error, formItemId } = useFormField();
+
+  return (
+    <Label
+      ref={ref}
+      className={cn(error && "text-destructive", className)}
+      htmlFor={formItemId}
+      {...props}
+    />
+  );
+});
+FormLabel.displayName = "FormLabel";
+
+const FormControl = React.forwardRef<
+  React.ElementRef<typeof Slot>,
+  React.ComponentPropsWithoutRef<typeof Slot>
+>(({ ...props }, ref) => {
+  const { error, formItemId, formDescriptionId, formMessageId } =
+    useFormField();
+
+  return (
+    <Slot
+      ref={ref}
+      id={formItemId}
+      aria-describedby={
+        !error
+          ? `${formDescriptionId}`
+          : `${formDescriptionId} ${formMessageId}`
+      }
+      aria-invalid={!!error}
+      {...props}
+    />
+  );
+});
+FormControl.displayName = "FormControl";
+
+const FormDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => {
+  const { formDescriptionId } = useFormField();
+
+  return (
+    <p
+      ref={ref}
+      id={formDescriptionId}
+      className={cn("text-[0.8rem] text-muted-foreground", className)}
+      {...props}
+    />
+  );
+});
+FormDescription.displayName = "FormDescription";
+
+const FormMessage = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, children, ...props }, ref) => {
+  const { error, formMessageId } = useFormField();
+  const body = error ? String(error?.message ?? "") : children;
+
+  if (!body) {
+    return null;
+  }
+
+  return (
+    <p
+      ref={ref}
+      id={formMessageId}
+      className={cn("text-[1rem] font-medium text-destructive", className)}
+      {...props}
+    >
+      {body}
+    </p>
+  );
+});
+FormMessage.displayName = "FormMessage";
+
+export {
+  useFormField,
+  Form,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormDescription,
+  FormMessage,
+  FormField,
+};

apps/common/feature/src/shared/ui/page-layout.tsx

@@ -0,0 +1,22 @@
+import { PageTitle } from "@common/components";
+import { useMenuStore } from "../lib/use-menu-store";
+
+function PageLayout({ children }: { children: React.ReactNode }) {
+  const { currentMenuInfo } = useMenuStore((state) => state);
+
+  const menuPaths = currentMenuInfo?.menuPath
+    ?.split(">")
+    .map((path) => path.trim());
+
+  return (
+    <div className="h-auto min-h-full bg-container pb-2">
+      <PageTitle
+        title={currentMenuInfo?.menuKornNm ?? ""}
+        menuPaths={menuPaths ?? []}
+      />
+      {children}
+    </div>
+  );
+}
+
+export { PageLayout };

apps/common/feature/src/shared/ui/skeleton-page.tsx

@@ -0,0 +1,12 @@
+import { Skeleton } from "@common/components/ui/skeleton";
+
+function SkeletonPage() {
+  return (
+    <div className="flex flex-col gap-4 p-6">
+      <Skeleton className="h-[6rem] rounded-xl" />
+      <Skeleton className="h-[60rem] rounded-xl" />
+    </div>
+  );
+}
+
+export { SkeletonPage };

apps/common/feature/src/widgets/form-wrapper/index.ts

@@ -0,0 +1 @@
+export { FormWrapper } from "./ui/form-wrapper";

apps/common/feature/src/widgets/form-wrapper/ui/form-wrapper.tsx

@@ -0,0 +1,68 @@
+import { useRouter } from "next/navigation";
+import { useConfirm } from "@frontend-opensource/use-react-hooks";
+import { type FieldValues, type UseFormReturn } from "react-hook-form";
+import { Button } from "@common/components/ui";
+import { Form } from "@/shared/ui/form";
+
+type FormWrapperProps<T extends FieldValues> = {
+  form: UseFormReturn<T>;
+  children: React.ReactNode;
+  isModifyMode?: boolean;
+  handleSave: (data: T) => Promise<void>;
+  handleDelete?: () => Promise<void>;
+};
+
+function FormWrapper<T extends FieldValues>({
+  form,
+  children,
+  isModifyMode,
+  handleSave,
+  handleDelete,
+}: FormWrapperProps<T>) {
+  const router = useRouter();
+  const { confirm } = useConfirm();
+
+  const onSubmit = async (data: T) => {
+    const confirmMessage = isModifyMode
+      ? "수정하시겠습니까?"
+      : "저장하시겠습니까?";
+
+    if (await confirm(confirmMessage)) {
+      await handleSave(data);
+    }
+  };
+
+  const onDelete = async () => {
+    if (await confirm("삭제하시겠습니까?")) {
+      await handleDelete?.();
+    }
+  };
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)}>
+        {children}
+        <div className="flex justify-center gap-4 pb-12 pt-10">
+          <Button
+            size="lg"
+            color="white"
+            type="button"
+            onClick={() => router.back()}
+          >
+            목록
+          </Button>
+          <Button size="lg" type="submit">
+            저장
+          </Button>
+          {isModifyMode && (
+            <Button size="lg" color="red" type="button" onClick={onDelete}>
+              삭제
+            </Button>
+          )}
+        </div>
+      </form>
+    </Form>
+  );
+}
+
+export { FormWrapper };

apps/common/feature/tailwind.config.ts

@@ -0,0 +1,19 @@
+import type { Config } from "tailwindcss";
+import tailwindcssAnimate from "tailwindcss-animate";
+import presetConfig from "../../../tailwind.config.preset";
+
+export default {
+  presets: [presetConfig],
+  content: [
+    "./src/**/*.{js,ts,jsx,tsx,mdx}",
+    "../../../packages/common/components/src/ui/**/*.{js,ts,jsx,tsx,mdx}",
+  ],
+  theme: {
+    extend: {
+      boxShadow: {
+        blur: "0 0 10px -1px rgba(0, 0, 0, 0.06)",
+      },
+    },
+  },
+  plugins: [tailwindcssAnimate],
+} satisfies Config;

apps/common/feature/tsconfig.json

@@ -0,0 +1,48 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "extends": "../../../tsconfig.base.json",
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "verbatimModuleSyntax": true,
+    "strictNullChecks": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "baseUrl": "./src",
+    "paths": {
+      "@/*": ["./*"],
+      "@common/components/*": ["../../../../packages/common/components/src/*"],
+      "@common/components": ["../../../../packages/common/components/src"],
+      "@common/network/*": ["../../../../packages/common/network/*"],
+      "@common/network": ["../../../../packages/common/network/"]
+    }
+  },
+  "include": [
+    ".eslintrc.*",
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    "**/*.mts",
+    "**/*.js",
+    "**/*.cjs",
+    "**/*.mjs",
+    "**/*.jsx",
+    "**/*.json",
+    ".next/types/**/*.ts"
+  ],
+  "exclude": ["**/node_modules", "**/.*/*"]
+}

apps/cs/.env.local

@@ -1,2 +0,0 @@
-NEXT_PUBLIC_PORT=3000
-NEXT_PUBLIC_SERVER_API_URL=http://192.168.0.102:8000

apps/cs/.gitignore

@@ -36,3 +36,5 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+.env*