[FEAT] PickRecord 입력 UI 개선 및 수정중일 때 drag&drop 방지

frontend/techpick/package.json

@@ -35,7 +35,6 @@
     "es-toolkit": "^1.26.1",
     "immer": "^10.1.1",
     "ky": "^1.7.2",
-    "lodash": "^4.17.21",
     "lucide-react": "^0.447.0",
     "next": "14.2.9",
     "randomcolor": "^0.6.2",
@@ -48,6 +47,7 @@
     "react-dom": "^18",
     "react-hot-toast": "^2.4.1",
     "react-spinners": "^0.14.1",
+    "react-textarea-autosize": "^8.5.5",
     "react-virtualized-auto-sizer": "^1.0.24",
     "react-window": "^1.8.10",
     "react-window-infinite-loader": "^1.0.9",
@@ -74,7 +74,6 @@
     "@testing-library/jest-dom": "^6.5.0",
     "@testing-library/react": "^16.0.1",
     "@types/dompurify": "^3",
-    "@types/lodash": "^4",
     "@types/node": "^22.5.4",
     "@types/randomcolor": "^0.5.9",
     "@types/react": "^18",

frontend/techpick/src/components/PickListViewer/PickDndListItem.tsx

@@ -22,7 +22,7 @@ export function PickDndListItem({ pickInfo }: PickViewDnDItemComponentProps) {
     setSelectedPickIdList,
     isDragging,
   } = usePickStore();
-  const { setCurrentPickIdToNull } = useUpdatePickStore();
+  const { setCurrentUpdateTitlePickIdToNull } = useUpdatePickStore();
   const { id: pickId, parentFolderId } = pickInfo;
   const isSelected = selectedPickIdList.includes(pickId);
   const {
@@ -75,7 +75,7 @@ export function PickDndListItem({ pickInfo }: PickViewDnDItemComponentProps) {
       return;
     }
 
-    setCurrentPickIdToNull();
+    setCurrentUpdateTitlePickIdToNull();
     selectSinglePick(pickId);
   };
 

frontend/techpick/src/components/PickListViewer/PickListItem.tsx

@@ -26,11 +26,11 @@ export function PickListItem({ pickInfo }: PickViewItemComponentProps) {
   const { updatePickInfo } = usePickStore();
   const { openUrlInNewTab } = useOpenUrlInNewTab(link.url);
   const {
-    currentUpdatePickId,
-    setCurrentPickIdToNull,
-    setCurrentUpdatePickId,
+    currentUpdateTitlePickId,
+    setCurrentUpdateTitlePickIdToNull,
+    setCurrentUpdateTitlePickId,
   } = useUpdatePickStore();
-  const isUpdateTitle = currentUpdatePickId === pickInfo.id;
+  const isUpdateTitle = currentUpdateTitlePickId === pickInfo.id;
 
   return (
     <div className={pickListItemLayoutStyle}>
@@ -50,17 +50,17 @@ export function PickListItem({ pickInfo }: PickViewItemComponentProps) {
                 ...pickInfo,
                 title: newTitle,
               });
-              setCurrentPickIdToNull();
+              setCurrentUpdateTitlePickIdToNull();
             }}
             onClickOutSide={() => {
-              setCurrentPickIdToNull();
+              setCurrentUpdateTitlePickIdToNull();
             }}
           />
         ) : (
           <div
             className={pickTitleSectionStyle}
             onClick={(event) => {
-              setCurrentUpdatePickId(pickInfo.id);
+              setCurrentUpdateTitlePickId(pickInfo.id);
               event.stopPropagation();
             }}
             role="button"

frontend/techpick/src/components/PickListViewer/PickTitleInput.tsx

@@ -29,8 +29,6 @@ export function PickTitleInput({
   useEffect(
     function detectOutsideClick() {
       const handleClickOutside = (event: MouseEvent) => {
-        console.log('handleClickOutside work!');
-
         if (
           containerRef.current &&
           !containerRef.current.contains(event.target as Node)

frontend/techpick/src/components/PickRecord/PickDraggableRecord.tsx

@@ -21,7 +21,11 @@ export function PickDraggableRecord({
     setSelectedPickIdList,
     isDragging,
   } = usePickStore();
-  const { setCurrentPickIdToNull } = useUpdatePickStore();
+  const {
+    setCurrentUpdateTitlePickIdToNull,
+    currentUpdateTitlePickId,
+    currentUpdateTagPickId,
+  } = useUpdatePickStore();
   const { id: pickId, parentFolderId } = pickInfo;
   const isSelected = selectedPickIdList.includes(pickId);
   const {
@@ -38,6 +42,9 @@ export function PickDraggableRecord({
       type: 'pick',
       parentFolderId: parentFolderId,
     },
+    disabled:
+      currentUpdateTitlePickId === pickInfo.id ||
+      currentUpdateTagPickId === pickInfo.id,
   });
   const pickElementId = `pickId-${pickId}`;
 
@@ -74,7 +81,7 @@ export function PickDraggableRecord({
       return;
     }
 
-    setCurrentPickIdToNull();
+    setCurrentUpdateTitlePickIdToNull();
     selectSinglePick(pickId);
   };
 

frontend/techpick/src/components/PickRecord/PickRecord.tsx

@@ -31,12 +31,12 @@ export function PickRecord({ pickInfo }: PickViewItemComponentProps) {
   const { updatePickInfo } = usePickStore();
   const { openUrlInNewTab } = useOpenUrlInNewTab(link.url);
   const {
-    currentUpdatePickId,
-    setCurrentPickIdToNull,
-    setCurrentUpdatePickId,
+    currentUpdateTitlePickId,
+    setCurrentUpdateTitlePickId,
+    setCurrentUpdateTitlePickIdToNull,
   } = useUpdatePickStore();
   const [isHovered, setIsHovered] = useState(false);
-  const isUpdateTitle = currentUpdatePickId === pickInfo.id;
+  const isUpdateTitle = currentUpdateTitlePickId === pickInfo.id;
   const { isDragging } = usePickStore();
 
   const filteredSelectedTagList: TagType[] = [];
@@ -57,7 +57,7 @@ export function PickRecord({ pickInfo }: PickViewItemComponentProps) {
       <PickImageColumnLayout>
         <div className={pickImageStyle}>
           {link.imageUrl ? (
-            <Image src={link.imageUrl} alt="" fill />
+            <Image src={link.imageUrl} alt="" fill sizes="96px" />
           ) : (
             <div className={pickEmptyImageStyle} />
           )}
@@ -72,31 +72,30 @@ export function PickRecord({ pickInfo }: PickViewItemComponentProps) {
       <Separator />
 
       <PickTitleColumnLayout>
-        {isUpdateTitle ? (
+        <div
+          className={pickTitleSectionStyle}
+          onDoubleClick={(event) => {
+            setCurrentUpdateTitlePickId(pickInfo.id);
+            event.stopPropagation();
+          }}
+          role="button"
+        >
+          {pick.title}
+        </div>
+        {isUpdateTitle && (
           <PickRecordTitleInput
             initialValue={pick.title}
             onSubmit={(newTitle) => {
               updatePickInfo(pick.parentFolderId, {
                 ...pickInfo,
                 title: newTitle,
               });
-              setCurrentPickIdToNull();
+              setCurrentUpdateTitlePickIdToNull();
             }}
             onClickOutSide={() => {
-              setCurrentPickIdToNull();
+              setCurrentUpdateTitlePickIdToNull();
             }}
           />
-        ) : (
-          <div
-            className={pickTitleSectionStyle}
-            onDoubleClick={(event) => {
-              setCurrentUpdatePickId(pickInfo.id);
-              event.stopPropagation();
-            }}
-            role="button"
-          >
-            {pick.title}
-          </div>
         )}
       </PickTitleColumnLayout>
 

frontend/techpick/src/components/PickRecord/PickRecordOverlay.tsx

@@ -30,12 +30,12 @@ export function PickRecordOverlay({ pickInfo }: PickViewItemComponentProps) {
   const { updatePickInfo } = usePickStore();
   const { openUrlInNewTab } = useOpenUrlInNewTab(link.url);
   const {
-    currentUpdatePickId,
-    setCurrentPickIdToNull,
-    setCurrentUpdatePickId,
+    currentUpdateTitlePickId,
+    setCurrentUpdateTitlePickId,
+    setCurrentUpdateTitlePickIdToNull,
   } = useUpdatePickStore();
 
-  const isUpdateTitle = currentUpdatePickId === pickInfo.id;
+  const isUpdateTitle = currentUpdateTitlePickId === pickInfo.id;
 
   const filteredSelectedTagList: TagType[] = [];
 
@@ -72,17 +72,17 @@ export function PickRecordOverlay({ pickInfo }: PickViewItemComponentProps) {
                 ...pickInfo,
                 title: newTitle,
               });
-              setCurrentPickIdToNull();
+              setCurrentUpdateTitlePickIdToNull();
             }}
             onClickOutSide={() => {
-              setCurrentPickIdToNull();
+              setCurrentUpdateTitlePickIdToNull();
             }}
           />
         ) : (
           <div
             className={pickTitleSectionStyle}
             onClick={(event) => {
-              setCurrentUpdatePickId(pickInfo.id);
+              setCurrentUpdateTitlePickId(pickInfo.id);
               event.stopPropagation();
             }}
             role="button"

frontend/techpick/src/components/PickRecord/PickRecordTitleInput.tsx

@@ -1,9 +1,11 @@
-'use client';
-
 import { useCallback, useEffect, useRef } from 'react';
 import type { KeyboardEvent } from 'react';
+import TextareaAutosize from 'react-textarea-autosize';
 import { isEmptyString } from '@/utils';
-import { pickTitleInputStyle } from './pickRecordTitleInput.css';
+import {
+  pickTitleInputStyle,
+  pickRecordTitleInputLayoutStyle,
+} from './pickRecordTitleInput.css';
 
 export function PickRecordTitleInput({
   onSubmit,
@@ -54,21 +56,30 @@ export function PickRecordTitleInput({
   );
 
   useEffect(
-    function initializeFolderInput() {
+    function initializePickRecordTitleInput() {
       if (textAreaRef.current) {
         textAreaRef.current.value = initialValue;
 
-        // 타이밍 이슈 탓으로 인해 setTimeout 사용
-        setTimeout(() => textAreaRef.current?.focus(), 0);
+        textAreaRef.current?.focus();
+        // 커서를 텍스트의 끝으로 이동
+        textAreaRef.current?.setSelectionRange(
+          initialValue.length,
+          initialValue.length
+        );
       }
     },
     [initialValue]
   );
 
   return (
-    <div ref={containerRef} onClick={(e) => e.stopPropagation()}>
-      <textarea
+    <div
+      ref={containerRef}
+      onClick={(e) => e.stopPropagation()}
+      className={pickRecordTitleInputLayoutStyle}
+    >
+      <TextareaAutosize
         ref={textAreaRef}
+        defaultValue={initialValue}
         onKeyDown={onKeyDown}
         className={pickTitleInputStyle}
       />

frontend/techpick/src/components/PickRecord/pickRecordTitleInput.css.ts

@@ -1,5 +1,16 @@
 import { style } from '@vanilla-extract/css';
-import { typography } from 'techpick-shared';
+import { typography, colorVars, zIndex } from 'techpick-shared';
+
+export const pickRecordTitleInputLayoutStyle = style({
+  position: 'absolute',
+  top: '0',
+  left: '0',
+  zIndex: zIndex.level2,
+  boxShadow: '4px 4px 0px 0px rgba(0, 0, 0, 0.2)',
+  backgroundColor: colorVars.background,
+  width: '528px',
+  minHeight: '40px',
+});
 
 export const pickTitleInputStyle = style({
   margin: 0,
@@ -10,5 +21,4 @@ export const pickTitleInputStyle = style({
   fontSize: typography.fontSize['md'],
   fontWeight: typography.fontWeights['light'],
   fontFamily: 'inherit',
-  boxShadow: '4px 4px 0px 0px rgba(0, 0, 0, 0.2)',
 });

frontend/techpick/src/components/PickRecord/pickTitleColumnLayout.css.ts

@@ -1,6 +1,7 @@
 import { style } from '@vanilla-extract/css';
 
 export const pickTitleColumnLayoutStyle = style({
+  position: 'relative',
   width: '528px',
   flexShrink: 0,
 });

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

@@ -2,10 +2,17 @@
 
 import { useEffect, useRef, useState } from 'react';
 import { flip, useFloating } from '@floating-ui/react';
+import { DialogTitle, Description } from '@radix-ui/react-dialog';
+import * as VisuallyHidden from '@radix-ui/react-visually-hidden';
 import { Command } from 'cmdk';
 import { BarLoader } from 'react-spinners';
 import { colorVars } from 'techpick-shared';
-import { useThemeStore, useTagStore, usePickStore } from '@/stores';
+import {
+  useThemeStore,
+  useTagStore,
+  usePickStore,
+  useUpdatePickStore,
+} from '@/stores';
 import { notifyError, numberToRandomColor } from '@/utils';
 import { DeleteTagDialog } from './DeleteTagDialog';
 import { DeselectTagButton } from './DeselectTagButton';
@@ -55,6 +62,7 @@ export function PickTagAutocompleteDialog({
   const { tagList, fetchingTagState, createTag } = useTagStore();
   const { updatePickInfo } = usePickStore();
   const { isDarkMode } = useThemeStore();
+  const { setCurrentUpdateTagPickIdToNull } = useUpdatePickStore();
 
   const focusTagInput = () => {
     tagInputRef.current?.focus();
@@ -117,12 +125,23 @@ export function PickTagAutocompleteDialog({
   return (
     <Command.Dialog
       open={open}
-      onOpenChange={onOpenChange}
+      onOpenChange={(open) => {
+        if (!open) {
+          setCurrentUpdateTagPickIdToNull();
+        }
+
+        onOpenChange(open);
+      }}
       container={container?.current ?? undefined}
       className={tagDialogPortalLayout}
       filter={filterCommandItems}
       ref={tagAutocompleteDialogRef}
     >
+      <VisuallyHidden.Root>
+        <DialogTitle>tag autocomplete</DialogTitle>
+        <Description>select tag</Description>
+      </VisuallyHidden.Root>
+
       {/**선택한 태그 리스트 */}
       <div ref={refs.setReference}>
         <SelectedTagListLayout ref={selectedTagListRef} focusStyle="focus">

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

@@ -1,6 +1,7 @@
 'use client';
 
 import { forwardRef, useRef, useState } from 'react';
+import { useUpdatePickStore } from '@/stores';
 import { SelectedTagItem } from '../SelectedTagItem';
 import { PickTagAutocompleteDialog } from './PickTagAutocompleteDialog';
 import {
@@ -15,9 +16,11 @@ 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 openDialog = () => {
       setOpen(true);
+      setCurrentUpdateTagPickId(pickInfo.id);
     };
 
     const onEnterKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {