From ada14e0003765df47308abca4e4e2fbf673a7af1 Mon Sep 17 00:00:00 2001 From: bicochan Date: Mon, 24 Mar 2025 17:52:35 +0900 Subject: [PATCH 01/13] =?UTF-8?q?feat:=20=EC=82=AC=EC=9D=B4=ED=8A=B8=20?= =?UTF-8?q?=ED=8F=BC=20=EB=8F=84=EB=A9=94=EC=9D=B8=20=EC=9E=91=EC=97=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/cs/src/entities/site/model/site-interface.ts | 2 ++ apps/cs/src/pages/site/model/table-columns.tsx | 4 ++-- apps/cs/src/pages/site/ui/site-form.tsx | 8 +++++--- 3 files changed, 9 insertions(+), 5 deletions(-) diff --git a/apps/cs/src/entities/site/model/site-interface.ts b/apps/cs/src/entities/site/model/site-interface.ts index 6edc1e69e..ae14297ae 100644 --- a/apps/cs/src/entities/site/model/site-interface.ts +++ b/apps/cs/src/entities/site/model/site-interface.ts @@ -16,6 +16,7 @@ export interface ISite { useYn: string; regDt: string; rgTrNm: string; + dmnAddr: string; } export interface ISiteDetail extends SiteFormData { @@ -44,6 +45,7 @@ export const siteFormSchema = z.object({ bkmkIcon: z.string().max(100).nullable(), useYn: z.string(), siteSkn: z.string().max(10).nullable(), + dmnAddr: z.string().nullable(), }); export type SiteFormData = z.infer; diff --git a/apps/cs/src/pages/site/model/table-columns.tsx b/apps/cs/src/pages/site/model/table-columns.tsx index ce68b93ee..2a07ce4b1 100644 --- a/apps/cs/src/pages/site/model/table-columns.tsx +++ b/apps/cs/src/pages/site/model/table-columns.tsx @@ -17,8 +17,8 @@ const columns = [ id: "siteNm", header: "사이트명", }), - columnHelper.accessor("siteAddr", { - id: "siteAddr", + columnHelper.accessor("dmnAddr", { + id: "dmnAddr", header: "대표 URL", }), columnHelper.accessor("bscSiteYn", { diff --git a/apps/cs/src/pages/site/ui/site-form.tsx b/apps/cs/src/pages/site/ui/site-form.tsx index 50feb8ec6..5ad735ec2 100644 --- a/apps/cs/src/pages/site/ui/site-form.tsx +++ b/apps/cs/src/pages/site/ui/site-form.tsx @@ -43,10 +43,12 @@ function SiteForm({ form, siteId, handleSave, handleDelete }: SiteFormProps) { const [onConfirm, setOnConfirm] = useState(false); const [isIpManagementOpen, setIsIpManagementOpen] = useState(false); const [isDomainManagementOpen, setIsDomainManagementOpen] = useState(false); - const [domainUrl, setDomainUrl] = useState(""); const handleSaveDomain = (rows: Domain[]) => { - setDomainUrl(rows.find((row) => row.rprsDmnYn === "Y")?.dmnAddr || ""); + form.setValue( + "dmnAddr", + rows.find((row) => row.rprsDmnYn === "Y")?.dmnAddr || "", + ); }; const onSubmit = async (data: SiteFormData) => { @@ -211,7 +213,7 @@ function SiteForm({ form, siteId, handleSave, handleDelete }: SiteFormProps) {
- {domainUrl} + {form.watch("dmnAddr")}
Date: Tue, 25 Mar 2025 09:48:14 +0900 Subject: [PATCH 02/13] =?UTF-8?q?feat:=20icon=20finder=20=EA=B2=80?= =?UTF-8?q?=EC=83=89=20=EA=B8=B0=EB=8A=A5=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/src/ui/icon-finder/index.tsx | 42 +++++++++++++++---- .../common/components/src/ui/input/index.tsx | 3 +- 2 files changed, 34 insertions(+), 11 deletions(-) diff --git a/packages/common/components/src/ui/icon-finder/index.tsx b/packages/common/components/src/ui/icon-finder/index.tsx index 62e6e195a..db8f6d1bd 100644 --- a/packages/common/components/src/ui/icon-finder/index.tsx +++ b/packages/common/components/src/ui/icon-finder/index.tsx @@ -1,19 +1,34 @@ import { useState } from "react"; -import { Button } from "../button"; -import { Dialog, DialogContent, DialogTrigger } from "../dialog"; import { cn } from "../../lib"; +import { Button } from "../button"; +import { + Dialog, + DialogContent, + DialogHeader, + DialogTitle, + DialogTrigger, +} from "../dialog"; +import { Input } from "../input"; import iconNames from "./data"; type IconFinderProps = { - handleClick: (icon: string) => void; + handleClick?: (icon: string) => void; }; const IconFinder = ({ handleClick }: IconFinderProps) => { const [selectedIcon, setSelectedIcon] = useState(""); + const [inputValue, setInputValue] = useState(""); + const [filteredIconNames, setFilteredIconNames] = useState(iconNames); const handleIconClick = (icon: string) => { setSelectedIcon(icon); - handleClick(icon); + handleClick?.(icon); + }; + + const handleInputChange = (e: React.ChangeEvent) => { + const value = e.target.value; + setInputValue(value); + setFilteredIconNames(iconNames.filter((icon) => icon.includes(value))); }; return ( @@ -24,10 +39,19 @@ const IconFinder = ({ handleClick }: IconFinderProps) => { 아이콘 찾기 - -
+ + + 아이콘 찾기 + +
+
- {iconNames.map((icon) => ( + {filteredIconNames.map((icon) => ( - - {icon} + + {icon}
); }; diff --git a/packages/common/components/src/ui/input/index.tsx b/packages/common/components/src/ui/input/index.tsx index a980f0ebd..d53c6a199 100644 --- a/packages/common/components/src/ui/input/index.tsx +++ b/packages/common/components/src/ui/input/index.tsx @@ -3,7 +3,7 @@ import * as React from "react"; import { cn } from "../../lib/utils"; const Input = React.forwardRef>( - ({ className, type, value, ...props }, ref) => { + ({ className, type, ...props }, ref) => { return ( >( "flex h-[3.2rem] w-full rounded-md border border-input bg-form px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-placeholder focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm", className, )} - value={value ?? ""} ref={ref} {...props} /> From 2aee109912f762a3c5a2d9ec80578944a0b1462a Mon Sep 17 00:00:00 2001 From: bicochan Date: Tue, 25 Mar 2025 10:55:15 +0900 Subject: [PATCH 03/13] =?UTF-8?q?feat:=20=ED=8A=B8=EB=A6=AC=20=EB=A9=94?= =?UTF-8?q?=EB=89=B4=20dnd=20=EB=A1=9C=EC=A7=81=20=EC=9E=91=EC=97=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/cs/src/pages/menu/lib/utils.ts | 7 ++++--- apps/cs/src/pages/menu/ui/menu-tree.tsx | 3 ++- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/apps/cs/src/pages/menu/lib/utils.ts b/apps/cs/src/pages/menu/lib/utils.ts index 304feac48..723023d8c 100644 --- a/apps/cs/src/pages/menu/lib/utils.ts +++ b/apps/cs/src/pages/menu/lib/utils.ts @@ -37,7 +37,6 @@ export const generateNewTreeData = ( return { menuCd: node.data?.menuCd, name: node.data?.menuKornNm, - sortSeq: node.data?.sortSeq, icon: node.data?.iconNm, }; }; @@ -45,7 +44,8 @@ export const generateNewTreeData = ( const treeMenu: TreeMenu = { ...baseNode(dragSource), parentId: dropTargetId === 0 ? null : (dropTargetId as number), - levelNo: (dropTarget?.data?.levelNo ?? 0) + 1, + sortSeq: dropTarget?.data?.children?.length ?? 0 + 1, + levelNo: dropTarget?.data?.levelNo ?? 0 + 1, }; const result: TreeMenu = { @@ -53,7 +53,8 @@ export const generateNewTreeData = ( children: childNodes.map((child) => ({ ...baseNode(child), parentId: child.data?.parentId === 0 ? null : (dropTargetId as number), - levelNo: (treeMenu?.levelNo ?? 0) + 1, + sortSeq: child.data?.sortSeq, + levelNo: treeMenu?.levelNo ?? 0 + 1, })), }; diff --git a/apps/cs/src/pages/menu/ui/menu-tree.tsx b/apps/cs/src/pages/menu/ui/menu-tree.tsx index cab0bafcc..c38f98654 100644 --- a/apps/cs/src/pages/menu/ui/menu-tree.tsx +++ b/apps/cs/src/pages/menu/ui/menu-tree.tsx @@ -73,6 +73,7 @@ function MenuTree({ treeData, siteId }: MenuTreeProps) { draggingSource: "", placeholder: "", }} + sort={false} /> ); @@ -114,7 +115,7 @@ function MenuNode({ {data?.children?.length && ( { From 92f67ce1a3f20aea8d3ff004691b34c2fd321b9a Mon Sep 17 00:00:00 2001 From: bicochan Date: Tue, 25 Mar 2025 14:23:16 +0900 Subject: [PATCH 04/13] =?UTF-8?q?feat:=20=ED=8A=B8=EB=A6=AC=20=EB=A9=94?= =?UTF-8?q?=EB=89=B4=EB=AA=85=20=EC=88=98=EC=A0=95=20=EC=9E=91=EC=97=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/cs/eslint.config.mjs | 5 + apps/cs/src/pages/menu/api/menu-service.ts | 11 +- apps/cs/src/pages/menu/lib/utils.ts | 36 +++++- .../cs/src/pages/menu/model/menu-interface.ts | 9 +- apps/cs/src/pages/menu/ui/menu-node.tsx | 116 ++++++++++++++++++ apps/cs/src/pages/menu/ui/menu-page.tsx | 6 +- apps/cs/src/pages/menu/ui/menu-tree.tsx | 79 ++---------- 7 files changed, 179 insertions(+), 83 deletions(-) create mode 100644 apps/cs/src/pages/menu/ui/menu-node.tsx diff --git a/apps/cs/eslint.config.mjs b/apps/cs/eslint.config.mjs index c85fb67c4..9109635e9 100644 --- a/apps/cs/eslint.config.mjs +++ b/apps/cs/eslint.config.mjs @@ -11,6 +11,11 @@ const compat = new FlatCompat({ const eslintConfig = [ ...compat.extends("next/core-web-vitals", "next/typescript"), + { + rules: { + "react-hooks/exhaustive-deps": "off", + }, + }, ]; export default eslintConfig; diff --git a/apps/cs/src/pages/menu/api/menu-service.ts b/apps/cs/src/pages/menu/api/menu-service.ts index bb5dd45f4..4fe6c845a 100644 --- a/apps/cs/src/pages/menu/api/menu-service.ts +++ b/apps/cs/src/pages/menu/api/menu-service.ts @@ -3,20 +3,27 @@ import { ENDPOINT } from "@/shared/config"; import type { Menu, MenuService, TreeMenu } from "../model/menu-interface"; export class MenuApiService implements MenuService { - public async getMenuList(siteId: string): Promise { + public async getTreeMenuList(siteId: string): Promise { const response = await client.get( `${ENDPOINT.CMS_SERVICE.MENUS}/${siteId}/tree`, ); return response.data; } - public async modifyMenu(siteId: string, data: TreeMenu[]): Promise { + public async modifyTreeMenu(siteId: string, data: TreeMenu[]): Promise { const response = await client.put( `${ENDPOINT.CMS_SERVICE.MENUS}/${siteId}/tree`, data, ); return response.data; } + + public async modifyMenuName(menuCd: number, name: string): Promise { + const response = await client.put( + `${ENDPOINT.CMS_SERVICE.MENUS}/${menuCd}/${name}`, + ); + return response.data; + } } export const MenuApi = new MenuApiService(); diff --git a/apps/cs/src/pages/menu/lib/utils.ts b/apps/cs/src/pages/menu/lib/utils.ts index 723023d8c..a7bc514a3 100644 --- a/apps/cs/src/pages/menu/lib/utils.ts +++ b/apps/cs/src/pages/menu/lib/utils.ts @@ -44,8 +44,8 @@ export const generateNewTreeData = ( const treeMenu: TreeMenu = { ...baseNode(dragSource), parentId: dropTargetId === 0 ? null : (dropTargetId as number), - sortSeq: dropTarget?.data?.children?.length ?? 0 + 1, - levelNo: dropTarget?.data?.levelNo ?? 0 + 1, + sortSeq: (dropTarget?.data?.children?.length ?? 0) + 1, + levelNo: (dropTarget?.data?.levelNo ?? 0) + 1, }; const result: TreeMenu = { @@ -54,9 +54,39 @@ export const generateNewTreeData = ( ...baseNode(child), parentId: child.data?.parentId === 0 ? null : (dropTargetId as number), sortSeq: child.data?.sortSeq, - levelNo: treeMenu?.levelNo ?? 0 + 1, + levelNo: (treeMenu?.levelNo ?? 0) + 1, })), }; return result; }; + +export const handleSelectNode = + (callback: (node: NodeModel) => void) => (node: NodeModel) => { + callback(node); + }; + +export const handleDropNode = + (callback: (newTree: TreeMenu) => void) => + (newTree: NodeModel[], options: DropOptions) => { + const newTreeData = generateNewTreeData(newTree, options); + if (!newTreeData) return; + callback(newTreeData); + }; + +export const handleNodeTextChange = + (treeData: NodeModel[]) => + (callback: (newTree: NodeModel[]) => void) => + (id: NodeModel["id"], value: string) => { + const newTree = treeData.map((node) => { + if (node.id === id) { + return { + ...node, + text: value, + }; + } + + return node; + }); + callback(newTree); + }; diff --git a/apps/cs/src/pages/menu/model/menu-interface.ts b/apps/cs/src/pages/menu/model/menu-interface.ts index 09e473d07..fc22c462c 100644 --- a/apps/cs/src/pages/menu/model/menu-interface.ts +++ b/apps/cs/src/pages/menu/model/menu-interface.ts @@ -53,17 +53,18 @@ export const menuFormSchema = z.object({ MENU_TYPE.BOTTOM, ]), menuLnkgSn: z.number().nullish(), - otptYn: z.enum(["Y", "N"]).default("Y"), + otptYn: z.enum(["Y", "N"]).default("Y").nullish(), prntMenuCd: z.number().nullish(), sortSeq: z.number(), evlUseYn: z.enum(["Y", "N"]).nullish(), qrcd: z.string().nullish(), - useYn: z.enum(["Y", "N"]).default("Y"), + useYn: z.enum(["Y", "N"]).default("Y").nullish(), }); export type MenuFormData = z.infer; export interface MenuService { - getMenuList: (siteId: string) => Promise; - modifyMenu: (siteId: string, data: TreeMenu[]) => Promise; + getTreeMenuList: (siteId: string) => Promise; + modifyTreeMenu: (siteId: string, data: TreeMenu[]) => Promise; + modifyMenuName: (menuCd: number, name: string) => Promise; } diff --git a/apps/cs/src/pages/menu/ui/menu-node.tsx b/apps/cs/src/pages/menu/ui/menu-node.tsx new file mode 100644 index 000000000..f8a150633 --- /dev/null +++ b/apps/cs/src/pages/menu/ui/menu-node.tsx @@ -0,0 +1,116 @@ +import { useState } from "react"; +import { useMutation } from "@tanstack/react-query"; +import type { NodeModel } from "@minoru/react-dnd-treeview"; +import { cn } from "@common/components/lib"; +import { Button, Input } from "@common/components/ui"; +import type { Menu } from "../model/menu-interface"; +import { MenuApi } from "../api/menu-service"; + +type MenuNodeProps = { + node: NodeModel; + depth: number; + isOpen: boolean; + isSelected: boolean; + onToggle: (id: NodeModel["id"]) => void; + onSelect: (node: NodeModel) => void; +}; + +function MenuNode({ + node, + depth, + isOpen, + isSelected, + onToggle, + onSelect, +}: MenuNodeProps) { + const { id, text, data } = node; + const indent = depth * 10 + 5; + + const { mutateAsync: modifyMenuName } = useMutation({ + mutationFn: (nodeName: string) => { + const encodedName = encodeURIComponent(nodeName); + return MenuApi.modifyMenuName(id as number, encodedName); + }, + }); + + const [editMode, setEditMode] = useState(false); + const [nodeName, setNodeName] = useState(text); + + const handleToggle = () => onToggle(id); + const handleSelect = () => onSelect(node); + + const handleSave = async () => { + await modifyMenuName(nodeName); + setEditMode(false); + }; + + return ( +
+
+ {editMode ? ( + <> + setNodeName(e.target.value)} + className="h-[2.5rem] !text-[1.3rem] text-foreground" + /> + + ) : ( + <> + {data?.children?.length && ( + + )} + {text} + + )} +
+ {editMode ? ( +
+ + +
+ ) : ( + + )} +
+ ); +} + +export { MenuNode }; diff --git a/apps/cs/src/pages/menu/ui/menu-page.tsx b/apps/cs/src/pages/menu/ui/menu-page.tsx index 760f86c42..5cc63b627 100644 --- a/apps/cs/src/pages/menu/ui/menu-page.tsx +++ b/apps/cs/src/pages/menu/ui/menu-page.tsx @@ -30,7 +30,7 @@ function MenuPage() { const { data: treeData } = useQuery({ queryKey: [ENDPOINT.CMS_SERVICE.MENUS, siteId], - queryFn: () => MenuApi.getMenuList(siteId), + queryFn: () => MenuApi.getTreeMenuList(siteId), select: (data) => generateTreeData(data), enabled: !!siteId, }); @@ -61,9 +61,9 @@ function MenuPage() { return (
-
+
-
- {filteredIconNames.map((icon) => ( - - ))} -
+
+
+ {filteredIconNames.map((icon) => ( + + ))}
From 517ab0f272829d9e9f3303aa723b803060043a3c Mon Sep 17 00:00:00 2001 From: bicochan Date: Tue, 25 Mar 2025 16:59:54 +0900 Subject: [PATCH 06/13] =?UTF-8?q?chore:=20=EC=BB=B4=ED=8F=AC=EB=84=8C?= =?UTF-8?q?=ED=8A=B8=20=EC=BD=94=EB=93=9C=20=EC=A0=95=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/cs/src/entities/code/ui/code-select.tsx | 5 +---- apps/cs/src/pages/site/ui/modify-page.tsx | 1 + apps/cs/src/pages/site/ui/site-form.tsx | 2 ++ apps/cs/src/pages/site/ui/site-page.tsx | 1 - packages/common/components/src/ui/input/index.tsx | 3 +-- 5 files changed, 5 insertions(+), 7 deletions(-) diff --git a/apps/cs/src/entities/code/ui/code-select.tsx b/apps/cs/src/entities/code/ui/code-select.tsx index 00b3157aa..bd175a8a9 100644 --- a/apps/cs/src/entities/code/ui/code-select.tsx +++ b/apps/cs/src/entities/code/ui/code-select.tsx @@ -11,10 +11,7 @@ import { CodeApi } from "../api/code-service"; type CodeSelectProps = { upCd: string; - value?: string; - defaultValue?: string; - onValueChange?: (value: string) => void; -}; +} & React.ComponentPropsWithoutRef; function CodeSelect({ upCd, defaultValue, ...props }: CodeSelectProps) { const { data: code } = useQuery({ diff --git a/apps/cs/src/pages/site/ui/modify-page.tsx b/apps/cs/src/pages/site/ui/modify-page.tsx index dd9bc2dcf..1f1061f9d 100644 --- a/apps/cs/src/pages/site/ui/modify-page.tsx +++ b/apps/cs/src/pages/site/ui/modify-page.tsx @@ -16,6 +16,7 @@ function ModifyPage({ siteId }: { siteId: string }) { const router = useRouter(); const queryClient = useQueryClient(); const { setMessage: alert } = useAlertStore((state) => state); + const { data: siteDetail } = useQuery({ queryKey: [ENDPOINT.CMS_SERVICE.SITES, siteId], queryFn: () => SiteApi.siteDetail(siteId), diff --git a/apps/cs/src/pages/site/ui/site-form.tsx b/apps/cs/src/pages/site/ui/site-form.tsx index 5ad735ec2..463b5a6fa 100644 --- a/apps/cs/src/pages/site/ui/site-form.tsx +++ b/apps/cs/src/pages/site/ui/site-form.tsx @@ -101,6 +101,7 @@ function SiteForm({ form, siteId, handleSave, handleDelete }: SiteFormProps) { @@ -175,6 +176,7 @@ function SiteForm({ form, siteId, handleSave, handleDelete }: SiteFormProps) { diff --git a/apps/cs/src/pages/site/ui/site-page.tsx b/apps/cs/src/pages/site/ui/site-page.tsx index 6f9626761..33431f316 100644 --- a/apps/cs/src/pages/site/ui/site-page.tsx +++ b/apps/cs/src/pages/site/ui/site-page.tsx @@ -41,7 +41,6 @@ function SitePage() { useEffect(() => { refetch(); - // eslint-disable-next-line react-hooks/exhaustive-deps }, []); return ( diff --git a/packages/common/components/src/ui/input/index.tsx b/packages/common/components/src/ui/input/index.tsx index d53c6a199..11cbca71d 100644 --- a/packages/common/components/src/ui/input/index.tsx +++ b/packages/common/components/src/ui/input/index.tsx @@ -3,10 +3,9 @@ import * as React from "react"; import { cn } from "../../lib/utils"; const Input = React.forwardRef>( - ({ className, type, ...props }, ref) => { + ({ className, ...props }, ref) => { return ( Date: Tue, 25 Mar 2025 17:09:03 +0900 Subject: [PATCH 07/13] =?UTF-8?q?refactor:=20components.css=20postcss?= =?UTF-8?q?=EB=A1=9C=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/cs/src/app/styles/components.css | 62 +++++++++++++------ .../pages/menu/ui/base-bottom-menu-form.tsx | 12 +++- 2 files changed, 53 insertions(+), 21 deletions(-) diff --git a/apps/cs/src/app/styles/components.css b/apps/cs/src/app/styles/components.css index b67efb8f0..b851d5a1e 100644 --- a/apps/cs/src/app/styles/components.css +++ b/apps/cs/src/app/styles/components.css @@ -1,25 +1,49 @@ -@tailwind components; +.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; +} -@layer components { - .card { - @apply relative m-[0.6rem] box-border min-h-[2rem] rounded-[0.5rem] p-[0.6rem] text-[1.3rem] text-[#666]; - } +.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-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 { - @apply border border-[#dbe2e6] bg-[rgba(255,255,255,0.6)] shadow-blur; + border-color: #3f4042; + background-color: rgba(255, 255, 255, 0.065); } .card-header { - @apply -mx-[0.6rem] flex items-center justify-between border-b border-b-[#e1e7eb] p-4; - } - .card-footer { - @apply -mx-[0.6rem] mt-2 flex items-center justify-center border-t border-t-[#e1e7eb] py-4; - } - - [data-theme="black"] { - .card-border { - @apply border-[#3f4042] bg-[rgba(255,255,255,0.065)]; - } - .card-header { - @apply border-b-[#3f4042]; - } + border-bottom-color: #3f4042; } } diff --git a/apps/cs/src/pages/menu/ui/base-bottom-menu-form.tsx b/apps/cs/src/pages/menu/ui/base-bottom-menu-form.tsx index 84527d2da..d8afc344d 100644 --- a/apps/cs/src/pages/menu/ui/base-bottom-menu-form.tsx +++ b/apps/cs/src/pages/menu/ui/base-bottom-menu-form.tsx @@ -70,7 +70,11 @@ export function BaseBottomMenuForm({ render={({ field }) => ( - +
@@ -98,7 +102,11 @@ export function BaseBottomMenuForm({ render={({ field }) => ( - +
From 64d336c2a4af4dc0ada8bd0c9027c8dfbd498918 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=B5=9C=EC=A7=80=EC=B2=A0?= Date: Tue, 25 Mar 2025 17:22:27 +0900 Subject: [PATCH 08/13] =?UTF-8?q?chore:=20package=20=EB=AA=85=EB=A0=B9?= =?UTF-8?q?=EC=96=B4=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/cs/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/cs/package.json b/apps/cs/package.json index 6e774acba..4394eaf17 100644 --- a/apps/cs/package.json +++ b/apps/cs/package.json @@ -3,7 +3,7 @@ "version": "0.0.0", "private": true, "scripts": { - "dev": "NODE_OPTIONS='--inspect' next dev", + "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" From 36c3bcb0b4c1f217f18485b614e3b9bf06bb1818 Mon Sep 17 00:00:00 2001 From: bicochan Date: Tue, 25 Mar 2025 19:00:54 +0900 Subject: [PATCH 09/13] =?UTF-8?q?feat:=20=ED=8A=B8=EB=A6=AC=20=EB=A9=94?= =?UTF-8?q?=EB=89=B4=20dnd=20=EC=88=9C=EC=84=9C=20=EB=B3=80=EA=B2=BD=20?= =?UTF-8?q?=EC=9E=91=EC=97=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/cs/src/pages/menu/lib/utils.ts | 10 +++++++++- apps/cs/src/pages/menu/ui/menu-tree.tsx | 19 ++++++++++++++++--- 2 files changed, 25 insertions(+), 4 deletions(-) diff --git a/apps/cs/src/pages/menu/lib/utils.ts b/apps/cs/src/pages/menu/lib/utils.ts index a7bc514a3..53e79918d 100644 --- a/apps/cs/src/pages/menu/lib/utils.ts +++ b/apps/cs/src/pages/menu/lib/utils.ts @@ -26,8 +26,16 @@ export const generateNewTreeData = ( options: DropOptions, ): TreeMenu | null => { const { dragSourceId, dragSource, dropTargetId, dropTarget } = options; + if (!dragSource?.data) return null; + const siblings = treeData.filter( + (node) => node.parent === dragSource?.parent, + ); + + const newSortSeq = + siblings.findIndex((sibling) => sibling.id === dragSourceId) + 1; + const childNodes = treeData.filter( (node) => node.parent === dragSourceId && node.data, ); @@ -44,7 +52,7 @@ export const generateNewTreeData = ( const treeMenu: TreeMenu = { ...baseNode(dragSource), parentId: dropTargetId === 0 ? null : (dropTargetId as number), - sortSeq: (dropTarget?.data?.children?.length ?? 0) + 1, + sortSeq: newSortSeq, levelNo: (dropTarget?.data?.levelNo ?? 0) + 1, }; diff --git a/apps/cs/src/pages/menu/ui/menu-tree.tsx b/apps/cs/src/pages/menu/ui/menu-tree.tsx index d169d2149..b399747f4 100644 --- a/apps/cs/src/pages/menu/ui/menu-tree.tsx +++ b/apps/cs/src/pages/menu/ui/menu-tree.tsx @@ -56,12 +56,25 @@ function MenuTree({ treeData, siteId }: MenuTreeProps) { classes={{ root: "p-4", container: "flex flex-col", - listItem: "", dropTarget: "!bg-[rgba(32,148,250,0.5)] rounded-sm", - draggingSource: "", - placeholder: "", + placeholder: "relative", }} sort={false} + dropTargetOffset={10} + insertDroppableFirst={false} + canDrop={(_, { dragSource, dropTargetId }) => { + if (dragSource?.parent === dropTargetId) { + return true; + } + }} + placeholderRender={(_, { depth }) => { + return ( +
+ ); + }} /> ); From 752b5fa7891d4b13b432bfe15356fef26c9cc265 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=B5=9C=EC=A7=80=EC=B2=A0?= Date: Tue, 25 Mar 2025 20:20:36 +0900 Subject: [PATCH 10/13] =?UTF-8?q?=09chore:=20component.css=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/cs/src/app/styles/components.css | 38 +++++++++++++++++++++++++++ 1 file changed, 38 insertions(+) diff --git a/apps/cs/src/app/styles/components.css b/apps/cs/src/app/styles/components.css index b851d5a1e..c1eb79210 100644 --- a/apps/cs/src/app/styles/components.css +++ b/apps/cs/src/app/styles/components.css @@ -9,6 +9,44 @@ 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); From f94b8a3f8e30d866ebd23d3250e580b1a3c9c61a Mon Sep 17 00:00:00 2001 From: bicochan Date: Wed, 26 Mar 2025 10:09:38 +0900 Subject: [PATCH 11/13] =?UTF-8?q?fix:=20=ED=8A=B8=EB=A6=AC=20=EB=A9=94?= =?UTF-8?q?=EB=89=B4=20=EC=88=9C=EC=84=9C=20=EB=B3=80=EA=B2=BD=20dnd=20?= =?UTF-8?q?=EB=A1=9C=EC=A7=81=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/cs/src/pages/menu/lib/utils.ts | 4 +--- apps/cs/src/pages/menu/ui/menu-tree.tsx | 2 +- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/apps/cs/src/pages/menu/lib/utils.ts b/apps/cs/src/pages/menu/lib/utils.ts index 53e79918d..333ebad94 100644 --- a/apps/cs/src/pages/menu/lib/utils.ts +++ b/apps/cs/src/pages/menu/lib/utils.ts @@ -29,9 +29,7 @@ export const generateNewTreeData = ( if (!dragSource?.data) return null; - const siblings = treeData.filter( - (node) => node.parent === dragSource?.parent, - ); + const siblings = treeData.filter((node) => node.parent === dropTargetId); const newSortSeq = siblings.findIndex((sibling) => sibling.id === dragSourceId) + 1; diff --git a/apps/cs/src/pages/menu/ui/menu-tree.tsx b/apps/cs/src/pages/menu/ui/menu-tree.tsx index b399747f4..629dd1252 100644 --- a/apps/cs/src/pages/menu/ui/menu-tree.tsx +++ b/apps/cs/src/pages/menu/ui/menu-tree.tsx @@ -60,7 +60,7 @@ function MenuTree({ treeData, siteId }: MenuTreeProps) { placeholder: "relative", }} sort={false} - dropTargetOffset={10} + dropTargetOffset={5} insertDroppableFirst={false} canDrop={(_, { dragSource, dropTargetId }) => { if (dragSource?.parent === dropTargetId) { From 59c57d45d52cfd07e2d2e4b8b2df45333b990a51 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=B5=9C=EC=A7=80=EC=B2=A0?= Date: Wed, 26 Mar 2025 14:05:59 +0900 Subject: [PATCH 12/13] =?UTF-8?q?chore=20:=20=EA=B3=B5=ED=86=B5=20componen?= =?UTF-8?q?ts.css=20=EC=B6=94=EA=B0=80=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../common/assets/src/styles/components.css | 87 +++++++++++++++++++ packages/common/assets/src/styles/index.ts | 1 + packages/common/assets/tsup.config.ts | 1 + 3 files changed, 89 insertions(+) create mode 100644 packages/common/assets/src/styles/components.css diff --git a/packages/common/assets/src/styles/components.css b/packages/common/assets/src/styles/components.css new file mode 100644 index 000000000..c1eb79210 --- /dev/null +++ b/packages/common/assets/src/styles/components.css @@ -0,0 +1,87 @@ +.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-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 { + border-color: #3f4042; + background-color: rgba(255, 255, 255, 0.065); + } + .card-header { + border-bottom-color: #3f4042; + } +} diff --git a/packages/common/assets/src/styles/index.ts b/packages/common/assets/src/styles/index.ts index 807e81006..8b6116d95 100644 --- a/packages/common/assets/src/styles/index.ts +++ b/packages/common/assets/src/styles/index.ts @@ -2,6 +2,7 @@ export const styles = { base: require("./base.css"), diveicon: require("./diveicon.css"), grid: require("./grid.css"), + components: require("./components.css"), } as const; export type StyleType = keyof typeof styles; diff --git a/packages/common/assets/tsup.config.ts b/packages/common/assets/tsup.config.ts index 450a1b173..59c4afaeb 100644 --- a/packages/common/assets/tsup.config.ts +++ b/packages/common/assets/tsup.config.ts @@ -6,6 +6,7 @@ export default defineConfig({ "src/styles/base.css", "src/styles/diveicon.css", "src/styles/grid.css", + "src/styles/components.css", ], format: ["cjs", "esm"], dts: true, From 131ceec61e22d77723a6ccdc1a66fe9ab1c487da Mon Sep 17 00:00:00 2001 From: jcchoi Date: Wed, 26 Mar 2025 14:14:23 +0900 Subject: [PATCH 13/13] Update README.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit components.css 추가 --- README.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 798425682..e74e7e815 100644 --- a/README.md +++ b/README.md @@ -149,7 +149,9 @@ export default nextConfig; ### 6. globals.css(또는 전역 css) 수정 ```css -@import "@common/assets/index.css"; +@import "@common/assets/styles/base.css"; +@import "@common/assets/styles/diveicon.css"; +@import "@common/assets/styles/components.css"; @tailwind base; @tailwind components;