diff --git a/.gitignore b/.gitignore index bfdd87b0a..29f6a6643 100644 --- a/.gitignore +++ b/.gitignore @@ -6,6 +6,3 @@ node_modules # misc .DS_Store - -# env -.env* \ No newline at end of file diff --git a/apps/cs/.env.local b/apps/cs/.env.local new file mode 100644 index 000000000..0648024ff --- /dev/null +++ b/apps/cs/.env.local @@ -0,0 +1,2 @@ +NEXT_PUBLIC_PORT=3000 +NEXT_PUBLIC_SERVER_API_URL=http://192.168.0.102:8000 diff --git a/apps/cs/.gitignore b/apps/cs/.gitignore index 5ef6a5207..5340dd9a1 100644 --- a/apps/cs/.gitignore +++ b/apps/cs/.gitignore @@ -30,9 +30,6 @@ yarn-debug.log* yarn-error.log* .pnpm-debug.log* -# env files (can opt-in for committing if needed) -.env* - # vercel .vercel diff --git a/apps/cs/app/(with-base-layout)/layout.tsx b/apps/cs/app/(with-base-layout)/layout.tsx new file mode 100644 index 000000000..cbcaee847 --- /dev/null +++ b/apps/cs/app/(with-base-layout)/layout.tsx @@ -0,0 +1,11 @@ +"use client"; + +import { BaseLayout } from "@common/components/ui"; + +export default function WithBaseLayout({ + children, +}: { + children: React.ReactNode; +}) { + return {children}; +} diff --git a/apps/cs/app/site/page.tsx b/apps/cs/app/(with-base-layout)/site/page.tsx similarity index 100% rename from apps/cs/app/site/page.tsx rename to apps/cs/app/(with-base-layout)/site/page.tsx diff --git a/apps/cs/app/site/register/[id]/page.tsx b/apps/cs/app/(with-base-layout)/site/register/[id]/page.tsx similarity index 100% rename from apps/cs/app/site/register/[id]/page.tsx rename to apps/cs/app/(with-base-layout)/site/register/[id]/page.tsx diff --git a/apps/cs/app/site/register/page.tsx b/apps/cs/app/(with-base-layout)/site/register/page.tsx similarity index 100% rename from apps/cs/app/site/register/page.tsx rename to apps/cs/app/(with-base-layout)/site/register/page.tsx diff --git a/apps/cs/middleware.ts b/apps/cs/middleware.ts new file mode 100644 index 000000000..e7b03dddc --- /dev/null +++ b/apps/cs/middleware.ts @@ -0,0 +1,19 @@ +import { NextRequest, NextResponse } from "next/server"; + +const serverApiUrl = + process.env.NEXT_PUBLIC_SERVER_API_URL ?? "http://localhost:3000"; + +export function middleware(req: NextRequest) { + const pathname = req.nextUrl.pathname; + if (pathname.startsWith("/server")) { + return NextResponse.rewrite( + `${serverApiUrl}${pathname.replace("/server", "")}`, + ); + } + + return NextResponse.next(); +} + +export const config = { + matcher: "/server/:path*", +}; diff --git a/apps/cs/next.config.ts b/apps/cs/next.config.ts index fd2a3a156..5e3560133 100644 --- a/apps/cs/next.config.ts +++ b/apps/cs/next.config.ts @@ -1,9 +1,6 @@ import type { NextConfig } from "next"; import webpack from "webpack"; -const serverApiUrl = - process.env.NEXT_PUBLIC_SERVER_API_URL || "http://localhost:3000"; - const nextConfig: NextConfig = { webpack: (config) => { config.plugins.push( @@ -36,14 +33,6 @@ const nextConfig: NextConfig = { return config; }, - async rewrites() { - return [ - { - source: "/server/:path*", - destination: `${serverApiUrl}/:path*`, - }, - ]; - }, }; export default nextConfig; diff --git a/apps/cs/package.json b/apps/cs/package.json index 05c224ea3..402f0d414 100644 --- a/apps/cs/package.json +++ b/apps/cs/package.json @@ -11,6 +11,7 @@ "dependencies": { "@common/assets": "workspace:*", "@common/components": "workspace:*", + "@frontend-opensource/use-react-hooks": "^1.1.4", "@hookform/resolvers": "^4.1.3", "@radix-ui/react-label": "^2.1.2", "@radix-ui/react-slot": "^1.1.2", diff --git a/apps/cs/src/entities/site/api/site-service.ts b/apps/cs/src/entities/site/api/site-service.ts index 478143392..1c9d34361 100644 --- a/apps/cs/src/entities/site/api/site-service.ts +++ b/apps/cs/src/entities/site/api/site-service.ts @@ -25,6 +25,15 @@ export class SiteApiService implements SiteService { return response.data; } + public async createSite(data: SiteFormData): Promise { + const validatedData = siteFormSchema.parse(data); + const response = await client.post( + `${ENDPOINT.CMS_SERVICE.SITES}`, + validatedData, + ); + return response.data; + } + public async modifySite(siteId: string, data: SiteFormData): Promise { const validatedData = siteFormSchema.parse(data); const response = await client.put( @@ -34,11 +43,9 @@ export class SiteApiService implements SiteService { return response.data; } - public async createSite(data: SiteFormData): Promise { - const validatedData = siteFormSchema.parse(data); - const response = await client.post( - `${ENDPOINT.CMS_SERVICE.SITES}`, - validatedData, + public async deleteSite(siteId: string): Promise { + const response = await client.delete( + `${ENDPOINT.CMS_SERVICE.SITES}/${siteId}`, ); return response.data; } diff --git a/apps/cs/src/pages/auth/login/ui/login-page.tsx b/apps/cs/src/pages/auth/login/ui/login-page.tsx index 39a8b7411..c8eb1e2f9 100644 --- a/apps/cs/src/pages/auth/login/ui/login-page.tsx +++ b/apps/cs/src/pages/auth/login/ui/login-page.tsx @@ -1,3 +1,5 @@ +"use client"; + import Image from "next/image"; import { images } from "@common/assets"; import { LoginApi } from "@/entities/auth/login"; diff --git a/apps/cs/src/pages/site/ui/modify-page.tsx b/apps/cs/src/pages/site/ui/modify-page.tsx index 5534c75bc..982f12472 100644 --- a/apps/cs/src/pages/site/ui/modify-page.tsx +++ b/apps/cs/src/pages/site/ui/modify-page.tsx @@ -40,11 +40,17 @@ function ModifyPage({ siteId }: { siteId: string }) { const { mutateAsync: modifySite } = useMutation({ mutationFn: (data: SiteFormData) => SiteApi.modifySite(siteId, data), onSuccess: () => { - setIsModifySuccess(true); + setMessage("수정되었습니다."); }, }); - const [isModifySuccess, setIsModifySuccess] = useState(false); + const { mutateAsync: deleteSite } = useMutation({ + mutationFn: () => SiteApi.deleteSite(siteId), + onSuccess: () => { + setMessage("삭제되었습니다."); + }, + }); + const [message, setMessage] = useState(""); const form = useForm({ resolver: zodResolver(siteFormSchema), @@ -64,11 +70,16 @@ function ModifyPage({ siteId }: { siteId: string }) { return ( - - router.back()}> + + router.back()}>
-

수정되었습니다.

+

{message}

diff --git a/apps/cs/src/pages/site/ui/site-form.tsx b/apps/cs/src/pages/site/ui/site-form.tsx index c1a5dfc02..2178befca 100644 --- a/apps/cs/src/pages/site/ui/site-form.tsx +++ b/apps/cs/src/pages/site/ui/site-form.tsx @@ -1,8 +1,13 @@ import { useState } from "react"; import { useRouter } from "next/navigation"; +import { useConfirm } from "@frontend-opensource/use-react-hooks"; import { type UseFormReturn } from "react-hook-form"; import { Button, + Dialog, + DialogClose, + DialogContent, + DialogFooter, Input, Label, RadioGroup, @@ -32,10 +37,12 @@ type SiteFormProps = { form: UseFormReturn; siteId?: string; handleSave: (data: SiteFormData) => void; + handleDelete: () => void; }; -function SiteForm({ form, siteId, handleSave }: SiteFormProps) { +function SiteForm({ form, siteId, handleSave, handleDelete }: SiteFormProps) { const router = useRouter(); + const { message, confirm, onConfirm, onCancel } = useConfirm(); const [viewState, setViewState] = useState>({}); const [representativeDomain, setRepresentativeDomain] = useState(""); @@ -56,334 +63,368 @@ function SiteForm({ form, siteId, handleSave }: SiteFormProps) { handleSave(data); }; + const onDelete = async () => { + if (await confirm("정말 삭제하시겠습니까?")) { + handleDelete(); + } + }; + return ( -
- -
-
-

- 사이트 등록/수정 -

-
-
- - - - - - - - 사이트 코드 - - ( - - - - - - - )} - /> - - - - 사이트 구분 - -
+ <> + + +
+
+

+ 사이트 등록/수정 +

+
+
+
+ + + + + + + 사이트 코드 + ( - { - handleViewStateChange("siteKndCd")(value); - field.onChange(value); - }} + className="w-[12rem] !text-[1.3rem]" + disabled={isModifyMode} /> )} /> - {isModifyMode && ( - - )} - - - - - 사이트 디자인 - - ( - - - - - - - )} - /> - - - - 사이트명 - - ( - - - - - - - )} - /> - - - - 사이트 설명 - - ( - - - - - - - )} - /> - - - {isModifyMode && ( + + - 사이트 도메인 + 사이트 구분
-
- {representativeDomain} -
- + ( + + + { + handleViewStateChange("siteKndCd")(value); + field.onChange(value); + }} + /> + + + + )} + /> + {isModifyMode && ( + + )}
- )} - - 사이트 하단 표기 주소 - - ( - - - - - - - )} - /> - - - - 사이트 하단 표기 전화번호 - - ( - - - - - - - )} - /> - - - - 사이트 하단 표기 팩스번호 - - ( - - - - - - - )} - /> - - - - 사이트 하단 표기 내용 - - ( - - - - - - - )} - /> - - - - 북마크 아이콘 - - ( - - - - - - - )} - /> - - - - 기본 사이트 여부 - - ( - - - -
- - -
-
- - -
- - - - - )} - /> - - - - 사용 여부 - - ( - - - -
- - -
-
- - -
- - - - - )} - /> - - - -
+ + 사이트 디자인 + + ( + + + + + + + )} + /> + + + + 사이트명 + + ( + + + + + + + )} + /> + + + + 사이트 설명 + + ( + + + + + + + )} + /> + + + {isModifyMode && ( + + 사이트 도메인 + +
+
+ {representativeDomain} +
+ +
+ + + )} + + 사이트 하단 표기 주소 + + ( + + + + + + + )} + /> + + + + 사이트 하단 표기 전화번호 + + ( + + + + + + + )} + /> + + + + 사이트 하단 표기 팩스번호 + + ( + + + + + + + )} + /> + + + + 사이트 하단 표기 내용 + + ( + + + + + + + )} + /> + + + + 북마크 아이콘 + + ( + + + + + + + )} + /> + + + + 기본 사이트 여부 + + ( + + + +
+ + +
+
+ + +
+ + + + + )} + /> + + + + 사용 여부 + + ( + + + +
+ + +
+
+ + +
+ + + + + )} + /> + + + + +
- -
- - - {isModifyMode && ( - - )} -
-
- + + {isModifyMode && ( + + )} + + + + + +
+

{message}

+
+ + + + + + + + + + + ); } diff --git a/apps/cs/src/shared/provider/app-provider.tsx b/apps/cs/src/shared/provider/app-provider.tsx index 6c1d45410..175cc6aaa 100644 --- a/apps/cs/src/shared/provider/app-provider.tsx +++ b/apps/cs/src/shared/provider/app-provider.tsx @@ -1,6 +1,6 @@ "use client"; -import { BaseLayout } from "@common/components/ui"; +import { ConfirmProvider } from "@frontend-opensource/use-react-hooks"; import { AuthProvider } from "./auth-provider"; import { CookieProvider } from "./cookie-provider"; import { QueryProvider } from "./query-provider"; @@ -10,7 +10,7 @@ const AppProvider = ({ children }: Readonly<{ children: React.ReactNode }>) => { - {children} + {children} diff --git a/packages/common/components/src/api/index.ts b/packages/common/components/src/api/index.ts index 7616f9e53..6674d19fa 100644 --- a/packages/common/components/src/api/index.ts +++ b/packages/common/components/src/api/index.ts @@ -1 +1,2 @@ +export * from "./client"; export * from "./user"; diff --git a/packages/common/components/src/api/user.ts b/packages/common/components/src/api/user.ts index 478143e09..36e39461d 100644 --- a/packages/common/components/src/api/user.ts +++ b/packages/common/components/src/api/user.ts @@ -1,4 +1,3 @@ -import { useQuery } from "@tanstack/react-query"; import { ENDPOINT } from "../config"; import { client } from "./client"; @@ -36,10 +35,9 @@ export interface IUser { hasPassword: boolean; } -export const useUsersQuery = ({ userUniqId }: { userUniqId: string }) => { - return useQuery({ - queryKey: [ENDPOINT.USER_SERVICE.USERS], - queryFn: () => - client.get(`${ENDPOINT.USER_SERVICE.USERS}/${userUniqId}`), - }); +export const getUserInfo = async (userUniqId: string) => { + const response = await client.get( + `${ENDPOINT.USER_SERVICE.USERS}/${userUniqId}`, + ); + return response.data; }; diff --git a/packages/common/components/src/ui/header/index.tsx b/packages/common/components/src/ui/header/index.tsx index 5baceda02..55bca0be6 100644 --- a/packages/common/components/src/ui/header/index.tsx +++ b/packages/common/components/src/ui/header/index.tsx @@ -1,6 +1,7 @@ +import { useQuery } from "@tanstack/react-query"; import { images } from "@common/assets"; -import { useUsersQuery } from "../../api"; -import { AUTH_USER_ID } from "../../config"; +import { getUserInfo } from "../../api"; +import { AUTH_USER_ID, ENDPOINT } from "../../config"; import { getToken } from "../../lib"; import { DropdownMenu, @@ -10,9 +11,12 @@ import { } from "../dropdown-menu"; import { Button } from "../button"; -export function Header() { - const { data: userInfo } = useUsersQuery({ - userUniqId: getToken(AUTH_USER_ID) ?? "", +export function Header({ viewOnly }: { viewOnly?: boolean }) { + const userUniqId = getToken(AUTH_USER_ID) ?? ""; + const { data: userInfo } = useQuery({ + queryKey: [ENDPOINT.USER_SERVICE.USERS], + queryFn: () => getUserInfo(userUniqId), + enabled: !viewOnly, }); return ( @@ -32,7 +36,7 @@ export function Header() { @@ -40,7 +44,7 @@ export function Header() { 프로필 설정

최종접속일

-

{userInfo?.data.lastLoginDate}

+

{userInfo?.lastLoginDate}

접속 IP

diff --git a/packages/common/components/src/ui/layout/index.ts b/packages/common/components/src/ui/layout/index.ts index 96148b44a..30c069b90 100644 --- a/packages/common/components/src/ui/layout/index.ts +++ b/packages/common/components/src/ui/layout/index.ts @@ -1 +1,2 @@ export { BaseLayout } from "./base"; +export { VBaseLayout } from "./vbase"; diff --git a/packages/common/components/src/ui/layout/vbase.tsx b/packages/common/components/src/ui/layout/vbase.tsx new file mode 100644 index 000000000..5a4ca8df4 --- /dev/null +++ b/packages/common/components/src/ui/layout/vbase.tsx @@ -0,0 +1,28 @@ +import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; + +import { LNB } from "./lnb"; +import { Header } from "../header"; +import { Footer } from "./footer"; + +import "./common.css"; + +const queryClient = new QueryClient(); + +export function VBaseLayout({ children }: { children: React.ReactNode }) { + return ( + +
+
+
+ +
+
+ {children} +
+
+
+
+ + ); +} diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index c5fe9f771..58b9fe203 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -42,6 +42,9 @@ importers: '@common/components': specifier: workspace:* version: link:../../packages/common/components + '@frontend-opensource/use-react-hooks': + specifier: ^1.1.4 + version: 1.1.4 '@hookform/resolvers': specifier: ^4.1.3 version: 4.1.3(react-hook-form@7.54.2) @@ -1140,6 +1143,15 @@ packages: resolution: {integrity: sha512-MDWhGtE+eHw5JW7lq4qhc5yRLS11ERl1c7Z6Xd0a58DozHES6EnNNwUWbMiG4J9Cgj053Bhk8zvlhFYKVhULwg==} dev: false + /@frontend-opensource/use-react-hooks@1.1.4: + resolution: {integrity: sha512-otCSyciL5MVCNNYmdDdg2lEL6rbZ3XX1meYQCzapUSC4V6qx2YxMk1kUbhwEM/+vdxhYzBHsVBGD0rZWl5cgrw==} + dependencies: + async-wave: 1.8.6 + fast-deep-equal: 3.1.3 + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + dev: false + /@hookform/resolvers@4.1.3(react-hook-form@7.54.2): resolution: {integrity: sha512-Jsv6UOWYTrEFJ/01ZrnwVXs7KDvP8XIo115i++5PWvNkNvkrsTfGiLS6w+eJ57CYtUtDQalUWovCZDHFJ8u1VQ==} peerDependencies: @@ -3703,6 +3715,17 @@ packages: engines: {node: '>= 0.4'} dev: true + /async-wave@1.8.6: + resolution: {integrity: sha512-wqWvr0Mrc1TrY92hN9MV0Xebxa6kt+T7QtjZ7FEMv+RUBa/Hfpz/UOgz0rB+7uqVK8TuBSXykOyU/k9gogdLkw==} + dependencies: + is-promise: 4.0.0 + lodash.add: 3.7.0 + lodash.clonedeep: 4.5.0 + lodash.isequal: 4.5.0 + lodash.isfunction: 3.0.9 + lodash.size: 4.2.0 + dev: false + /asynckit@0.4.0: resolution: {integrity: sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==} dev: false @@ -5476,6 +5499,10 @@ packages: resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==} engines: {node: '>=0.12.0'} + /is-promise@4.0.0: + resolution: {integrity: sha512-hvpoI6korhJMnej285dSg6nu1+e6uxs7zG3BYAm5byqDsgJNWwxzM6z6iZiAgQR4TJ30JmBTOwqZUw3WlyH3AQ==} + dev: false + /is-regex@1.2.1: resolution: {integrity: sha512-MjYsKHO5O7mCsmRGxWcLWheFqN9DJ/2TmngvjKXihe6efViPqc274+Fx/4fYj/r03+ESvBdTXK0V6tA3rgez1g==} engines: {node: '>= 0.4'} @@ -5724,10 +5751,31 @@ packages: resolution: {integrity: sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==} dev: true + /lodash.add@3.7.0: + resolution: {integrity: sha512-/uxUZkB6vYiPoGSXADJJE+Ee4W2vU+bxZOFdvJdx+mDgv+qyAO76sWD84Q4FxsMgTjC1+gVFC9YNhdG243QRDw==} + dev: false + + /lodash.clonedeep@4.5.0: + resolution: {integrity: sha512-H5ZhCF25riFd9uB5UCkVKo61m3S/xZk1x4wA6yp/L3RFP6Z/eHH1ymQcGLo7J3GMPfm0V/7m1tryHuGVxpqEBQ==} + dev: false + + /lodash.isequal@4.5.0: + resolution: {integrity: sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ==} + deprecated: This package is deprecated. Use require('node:util').isDeepStrictEqual instead. + dev: false + + /lodash.isfunction@3.0.9: + resolution: {integrity: sha512-AirXNj15uRIMMPihnkInB4i3NHeb4iBtNg9WRWuK2o31S+ePwwNmDPaTL3o7dTJ+VXNZim7rFs4rxN4YU1oUJw==} + dev: false + /lodash.merge@4.6.2: resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==} dev: true + /lodash.size@4.2.0: + resolution: {integrity: sha512-wbu3SF1XC5ijqm0piNxw59yCbuUf2kaShumYBLWUrcCvwh6C8odz6SY/wGVzCWTQTFL/1Ygbvqg2eLtspUVVAQ==} + dev: false + /lodash.sortby@4.7.0: resolution: {integrity: sha512-HDWXG8isMntAyRF5vZ7xKuEvOhT4AhlRt/3czTSjvGUxjYCBVRQY48ViDHyfYz9VIoBkW4TMGQNapx+l3RUwdA==} dev: true