fix ui

depromeet · Aug 7, 2024 · 3dab4d8 · 3dab4d8
1 parent 579a24d
commit 3dab4d8
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 14 deletions.
diff --git a/src/app/(sidebar)/write/components/TagSelector/useTagSelector.ts b/src/app/(sidebar)/write/components/TagSelector/useTagSelector.ts
@@ -26,7 +26,7 @@ export function useTagSelector({ ...props }: UseTagSelectorProps) {
   const getBaseProps = useCallback(
     (props = {}) => ({
       ref: baseDOMRef,
-      className: cn('w-[660px] flex items-center gap-8 relative', classNames?.base),
+      className: cn('w-[820px] flex items-center gap-8', classNames?.base),
       ...props,
     }),
     [ref, classNames?.base],
@@ -35,7 +35,7 @@ export function useTagSelector({ ...props }: UseTagSelectorProps) {
   const getTriggerProps = useCallback(
     (props = {}) => ({
       className: cn(
-        'w-[624px] h-52 flex gap-8 items-center py-8 pl-16 pr-16 border-1 border-transparent rounded-8 text-neutral-20',
+        'w-[624px] h-40 flex gap-8 items-center py-8 pl-16 pr-16 border-1 border-transparent rounded-8 text-neutral-20',
         isOpen && 'rounded-bl-none rounded-br-none border-neutral-5 bg-neutral-1',
         classNames?.trigger,
       ),
@@ -48,7 +48,7 @@ export function useTagSelector({ ...props }: UseTagSelectorProps) {
   const getContentProps = useCallback(
     () => ({
       className: cn(
-        'absolute top-52 left-36 w-[624px] bg-[white] border-1 rounded-bl-8 rounded-br-8',
+        'absolute top-215 left-188 w-[624px] bg-[white] border-1 rounded-bl-8 rounded-br-8',
         isOpen && `z-[${zIndex.overlay}]`,
         classNames?.content,
       ),

diff --git a/src/app/(sidebar)/write/page.tsx b/src/app/(sidebar)/write/page.tsx
@@ -8,6 +8,13 @@ import { abilityTags, personalityTags, categoryTags, tags, categories } from './
 import { If } from '@/components/If';
 import { cn } from '@/utils';
 import { Spacing } from '@/components/Spacing';
+import { Icon } from '@/system/components';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/system/components/DropdownMenu/DropdownMenu';
 
 const Editor = dynamic(() => import('@/components/Editor/Editor').then(({ Editor }) => Editor), { ssr: false });
 
@@ -16,16 +23,30 @@ export default function Page() {
   const [selectedCategories, setSelectedCategories] = useState<typeof categories>([]);
 
   return (
-    <section className="px-80 pt-64 w-full h-full">
-      <Input
-        placeholder="제목을 입력해주세요."
-        classNames={{ base: 'w-[552px]' }}
-        className="text-24 font-bold px-0 text-input-title border-none"
-      />
+    <section className="w-[820px] pt-64 h-full">
+      <div className="flex justify-between px-80">
+        <Input
+          placeholder="제목을 입력해주세요."
+          classNames={{ base: 'w-[552px]' }}
+          className="text-24 font-bold px-0 text-input-title border-none"
+        />
+        <div className="flex gap-8 items-center text-neutral-20">
+          <p>00.00.00</p>
+
+          <DropdownMenu>
+            <DropdownMenuTrigger>
+              <Icon name="more" color="black" />
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+              <DropdownMenuItem>adsf</DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+      </div>
 
       <Spacing direction="column" size={24} />
 
-      <TagSelector>
+      <TagSelector classNames={{ base: 'px-80' }}>
         <TagSelector.Title>분류</TagSelector.Title>
 
         <TagSelector.Trigger>
@@ -71,7 +92,7 @@ export default function Page() {
         </TagSelector.Content>
       </TagSelector>
 
-      <TagSelector classNames={{ content: 'h-264' }}>
+      <TagSelector classNames={{ base: 'px-80', content: 'h-264' }}>
         <TagSelector.Title>태그</TagSelector.Title>
 
         <TagSelector.Trigger>
@@ -137,7 +158,9 @@ export default function Page() {
 
       <Spacing direction="column" size={20} />
 
-      <Editor />
+      <div style={{ scrollbarWidth: 'thin' }} className="px-80 h-[calc(100vh-264px)] overflow-x-hidden">
+        <Editor />
+      </div>
     </section>
   );
 }
diff --git a/src/components/Editor/Editor.tsx b/src/components/Editor/Editor.tsx
@@ -18,8 +18,8 @@ export function Editor() {
   }
 
   return (
-    <div className="flex w-[660px] h-full px-52" ref={menuContainerRef}>
-      <div className="relative flex flex-col flex-1 h-full overflow-hidden">
+    <div style={{ scrollbarWidth: 'none' }} className="z-[-1] flex w-[660px] relative px-52" ref={menuContainerRef}>
+      <div className="relative flex flex-col flex-1 h-full">
         <EditorContent editor={editor} className="flex-1 overflow-y-auto" />
         <LinkMenu editor={editor} appendTo={menuContainerRef} />
         <TextMenu editor={editor} />