feat: design filtering

Nexters · Aug 7, 2024 · c2971ac · c2971ac
1 parent 851b41e
commit c2971ac
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 16 deletions.
diff --git a/src/components/editor/sidebar-element-settings-tab.tsx b/src/components/editor/sidebar-element-settings-tab.tsx
@@ -59,19 +59,15 @@ export default function SidebarElementSettingsTab(props: Props) {
   };
 
   return (
-    <Accordion
-      type="multiple"
-      className="w-full border-t"
-      defaultValue={["Map"]}
-    >
+    <Accordion type="multiple" className="w-full" defaultValue={["Map"]}>
       <SheetHeader className="p-6">
         <SheetTitle>{editor.state.selectedElement.name} 설정</SheetTitle>
       </SheetHeader>
 
       {!Array.isArray(editor.state.selectedElement.content) &&
         editor.state.selectedElement.type === "map" && (
           <>
-            <AccordionItem value="Map" className="py-2">
+            <AccordionItem value="Map" className="border-0 border-t py-2">
               <AccordionTrigger className="px-6 py-2">주소</AccordionTrigger>
               <AccordionContent className="flex flex-col justify-center gap-2 px-6 py-1">
                 <Input
@@ -85,7 +81,7 @@ export default function SidebarElementSettingsTab(props: Props) {
           </>
         )}
 
-      <AccordionItem value="Advance" className="border-t bg-secondary/50">
+      <AccordionItem value="Advance" className="mt-auto border-t bg-muted/50">
         <AccordionTrigger className="px-6">고급 설정</AccordionTrigger>
         <AccordionContent className="flex flex-col gap-2 p-0">
           <AdvanceMode />

diff --git a/src/components/editor/sidebar-elements-tab.tsx b/src/components/editor/sidebar-elements-tab.tsx
@@ -63,9 +63,9 @@ export default function SidebarElementsTab(props: Props) {
           도구상자의 항목들을 작업 공간에 끌어다 놓을 수 있습니다.
         </SheetDescription>
       </SheetHeader>
-      <AccordionItem value="Layout" className="border-y-[1px] px-6 py-0">
-        <AccordionTrigger>Layout</AccordionTrigger>
-        <AccordionContent className="flex flex-wrap gap-6">
+      <AccordionItem value="Layout" className="border-y-[1px]">
+        <AccordionTrigger className="px-6">Layout</AccordionTrigger>
+        <AccordionContent className="flex flex-wrap gap-6 px-6">
           {elements
             .filter((element) => element.group === "layout")
             .map((element) => (
@@ -81,9 +81,9 @@ export default function SidebarElementsTab(props: Props) {
             ))}
         </AccordionContent>
       </AccordionItem>
-      <AccordionItem value="Elements" className="px-6 py-0">
-        <AccordionTrigger>Elements</AccordionTrigger>
-        <AccordionContent className="flex flex-wrap gap-6">
+      <AccordionItem value="Elements">
+        <AccordionTrigger className="px-6">Elements</AccordionTrigger>
+        <AccordionContent className="flex flex-wrap gap-6 px-6">
           {elements
             .filter((element) => element.group === "elements")
             .map((element) => (

diff --git a/src/components/editor/sidebar-settings-tab.tsx b/src/components/editor/sidebar-settings-tab.tsx
@@ -14,7 +14,7 @@ export default function SidebarSettingsTab(props: Props) {
   const { editor, dispatch } = useEditor();
 
   return (
-    <Accordion type="multiple" className="w-full border-t" defaultValue={[]}>
+    <Accordion type="multiple" className="w-full" defaultValue={[]}>
       <SheetHeader className="p-6">
         <SheetTitle>초대장 설정</SheetTitle>
         <SheetDescription>

diff --git a/src/components/editor/sidebar.tsx b/src/components/editor/sidebar.tsx
@@ -53,7 +53,7 @@ export default function EditorSidebar() {
         <SheetContent
           side="right"
           className={cn(
-            "z-[80] mt-[85px] w-[50px] overflow-hidden p-0 shadow-none transition-all",
+            "z-[80] mt-[86px] w-[50px] overflow-hidden p-0 shadow-none transition-all",
             editor.state.isPreviewMode && "hidden",
           )}
         >
@@ -80,7 +80,7 @@ export default function EditorSidebar() {
         <SheetContent
           side="right"
           className={cn(
-            "z-[40] mr-[62px] mt-[85px] h-full w-[320px] overflow-hidden border-r p-0 shadow-none transition-all",
+            "z-[40] mr-[62px] mt-[86px] h-full w-[320px] overflow-hidden border-r p-0 shadow-none transition-all",
             editor.state.isPreviewMode && "hidden",
           )}
         >