[FIX] PickTagPicker 망가지는 UI 해결

frontend/techpick/src/components/PickTagPicker/PickTagAutocompleteDialog.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { useEffect, useRef, useState } from 'react';
-import { flip, useFloating } from '@floating-ui/react';
+import type { CSSProperties } from 'react';
 import { DialogTitle, Description } from '@radix-ui/react-dialog';
 import * as VisuallyHidden from '@radix-ui/react-visually-hidden';
 import { Command } from 'cmdk';
@@ -38,9 +38,10 @@ import { PickInfoType, TagType } from '@/types';
 export function PickTagAutocompleteDialog({
   open,
   onOpenChange,
-  container,
   pickInfo,
   selectedTagList,
+  floatingStyles,
+  setFloating,
 }: PickTagAutocompleteDialogProps) {
   const [tagInputValue, setTagInputValue] = useState('');
   const [canCreateTag, setCanCreateTag] = useState(false);
@@ -49,16 +50,7 @@ export function PickTagAutocompleteDialog({
   const isCreateFetchPendingRef = useRef<boolean>(false);
   const randomNumber = useRef<number>(getRandomInt());
   const tagIdOrderedList = selectedTagList.map((tag) => tag.id);
-  const { refs, floatingStyles, update } = useFloating({
-    middleware: [
-      flip({
-        fallbackAxisSideDirection: 'start',
-      }),
-    ],
-  });
-
   const tagAutocompleteDialogRef = useRef<HTMLDivElement>(null);
-
   const { tagList, fetchingTagState, createTag } = useTagStore();
   const { updatePickInfo } = usePickStore();
   const { isDarkMode } = useThemeStore();
@@ -82,7 +74,7 @@ export function PickTagAutocompleteDialog({
     }
 
     const newTagIdOrderedList = [...tagIdOrderedList, tag.id];
-    update();
+
     focusTagInput();
     clearTagInputValue();
     updatePickInfo(pickInfo.parentFolderId, {
@@ -135,48 +127,41 @@ export function PickTagAutocompleteDialog({
 
         onOpenChange(open);
       }}
-      container={container?.current ?? undefined}
       className={tagDialogPortalLayout}
       filter={filterCommandItems}
-      ref={tagAutocompleteDialogRef}
+      style={{ ...floatingStyles }}
+      ref={setFloating}
     >
       <VisuallyHidden.Root>
         <DialogTitle>tag autocomplete</DialogTitle>
         <Description>select tag</Description>
       </VisuallyHidden.Root>
 
       {/**선택한 태그 리스트 */}
-      <div ref={refs.setReference}>
-        <SelectedTagListLayout ref={selectedTagListRef} focusStyle="focus">
-          {selectedTagList.map((tag) => (
-            <SelectedTagItem key={tag.id} tag={tag}>
-              <DeselectTagButton
-                tag={tag}
-                onClick={() => {
-                  focusTagInput();
-                  update();
-                }}
-                pickInfo={pickInfo}
-                selectedTagList={selectedTagList}
-              />
-            </SelectedTagItem>
-          ))}
-
-          <Command.Input
-            className={commandInputStyle}
-            ref={tagInputRef}
-            value={tagInputValue}
-            onValueChange={setTagInputValue}
-          />
-        </SelectedTagListLayout>
-      </div>
+      <SelectedTagListLayout ref={selectedTagListRef} focusStyle="focus">
+        {selectedTagList.map((tag) => (
+          <SelectedTagItem key={tag.id} tag={tag}>
+            <DeselectTagButton
+              tag={tag}
+              onClick={() => {
+                focusTagInput();
+              }}
+              pickInfo={pickInfo}
+              selectedTagList={selectedTagList}
+            />
+          </SelectedTagItem>
+        ))}
+
+        <Command.Input
+          className={commandInputStyle}
+          ref={tagInputRef}
+          value={tagInputValue}
+          onValueChange={setTagInputValue}
+        />
+      </SelectedTagListLayout>
       {/**전체 태그 리스트 */}
 
-      <Command.List
-        className={tagListStyle}
-        ref={refs.setFloating}
-        style={{ ...floatingStyles }}
-      >
+      <Command.List className={tagListStyle}>
         {fetchingTagState.isPending && (
           <Command.Loading className={tagListLoadingStyle}>
             <BarLoader color={colorVars.color.font} />
@@ -230,14 +215,17 @@ export function PickTagAutocompleteDialog({
 
       {/**DeleteTagDialog를 닫고도 Command.Dialog가 켜져있기위해서 Command.Dialog 내부에 있어야합니다.*/}
       <DeleteTagDialog />
+      <div ref={tagAutocompleteDialogRef}></div>
     </Command.Dialog>
   );
 }
 
 interface PickTagAutocompleteDialogProps {
   open: boolean;
   onOpenChange: (open: boolean) => void;
-  container?: React.RefObject<HTMLElement>;
   pickInfo: PickInfoType;
   selectedTagList: TagType[];
+  setFloating: ((node: HTMLElement | null) => void) &
+    ((node: HTMLElement | null) => void);
+  floatingStyles: CSSProperties;
 }

frontend/techpick/src/components/PickTagPicker/PickTagPicker.tsx

@@ -1,6 +1,7 @@
 'use client';
 
-import { forwardRef, useRef, useState } from 'react';
+import { forwardRef, useState } from 'react';
+import { autoUpdate, shift, useFloating } from '@floating-ui/react';
 import { useUpdatePickStore } from '@/stores';
 import { SelectedTagItem } from '../SelectedTagItem';
 import { PickTagAutocompleteDialog } from './PickTagAutocompleteDialog';
@@ -15,8 +16,18 @@ import { PickInfoType, TagType } from '@/types';
 export const PickTagPicker = forwardRef<HTMLDivElement, PickTagPickerProps>(
   function PickTagPickerWithRef({ pickInfo, selectedTagList }, tabFocusRef) {
     const [open, setOpen] = useState(false);
-    const tagInputContainerRef = useRef<HTMLDivElement>(null);
     const { setCurrentUpdateTagPickId } = useUpdatePickStore();
+    const { refs, floatingStyles } = useFloating({
+      strategy: 'fixed',
+      placement: 'bottom-start',
+
+      whileElementsMounted: autoUpdate,
+      middleware: [
+        shift({
+          crossAxis: true,
+        }),
+      ],
+    });
 
     const openDialog = () => {
       setOpen(true);
@@ -32,31 +43,35 @@ export const PickTagPicker = forwardRef<HTMLDivElement, PickTagPickerProps>(
     };
 
     return (
-      <div ref={tagInputContainerRef} className={tagPickerLayout}>
-        <div
-          className={tagDialogTriggerLayout}
-          onDoubleClick={openDialog}
-          onKeyDown={onEnterKeyDown}
-          tabIndex={0}
-          ref={tabFocusRef}
-        >
-          {selectedTagList.length === 0 && (
-            <p className={tagPickerPlaceholderStyle}>태그를 넣어주세요</p>
-          )}
-          <SelectedTagListLayout>
-            {selectedTagList.map((tag) => (
-              <SelectedTagItem key={tag.name} tag={tag} />
-            ))}
-          </SelectedTagListLayout>
-        </div>
+      <div>
+        <div ref={refs.setReference} />
+        <div className={tagPickerLayout}>
+          <div
+            className={tagDialogTriggerLayout}
+            onDoubleClick={openDialog}
+            onKeyDown={onEnterKeyDown}
+            tabIndex={0}
+            ref={tabFocusRef}
+          >
+            {selectedTagList.length === 0 && (
+              <p className={tagPickerPlaceholderStyle}>태그를 넣어주세요</p>
+            )}
+            <SelectedTagListLayout>
+              {selectedTagList.map((tag) => (
+                <SelectedTagItem key={tag.name} tag={tag} />
+              ))}
+            </SelectedTagListLayout>
+          </div>
 
-        <PickTagAutocompleteDialog
-          open={open}
-          onOpenChange={setOpen}
-          container={tagInputContainerRef}
-          pickInfo={pickInfo}
-          selectedTagList={selectedTagList}
-        />
+          <PickTagAutocompleteDialog
+            open={open}
+            onOpenChange={setOpen}
+            pickInfo={pickInfo}
+            selectedTagList={selectedTagList}
+            setFloating={refs.setFloating}
+            floatingStyles={floatingStyles}
+          />
+        </div>
       </div>
     );
   }

frontend/techpick/src/components/PickTagPicker/pickTagAutocompleteDialog.css.ts

@@ -4,8 +4,6 @@ import { colorVars, fontSize } from 'techpick-shared';
 const { color } = colorVars;
 
 export const tagDialogPortalLayout = style({
-  position: 'absolute',
-  top: '0',
   zIndex: '1',
   backgroundColor: colorVars.lightGray,
   boxShadow: '4px 4px 0px 0px rgba(0, 0, 0, 0.2)',
@@ -27,7 +25,8 @@ export const commandInputStyle = style({
 export const tagListStyle = style({
   minWidth: '288px',
   maxHeight: '150px',
-  border: `1px solid black`,
+  border: `1px solid ${colorVars.gold8}`,
+  borderTop: `0.5px solid ${colorVars.gold8}`,
   overflowY: 'auto',
 
   '::-webkit-scrollbar': {

frontend/techpick/src/components/SelectedTagListLayout/SelectedTagListLayout.css.ts

@@ -18,7 +18,8 @@ export type ListLayoutHeightVariantKeyTypes =
 
 export const SelectedTagListLayoutFocusStyleVariant = styleVariants({
   focus: {
-    border: `1px solid ${colorVars.color.inputBorderFocus}`,
+    border: `1px solid ${colorVars.gold8}`,
+    borderBottom: `0.5px solid ${colorVars.gold8}`,
   },
   none: {},
 });