From a7b50bd189237d20427ddc0970eef86636a74502 Mon Sep 17 00:00:00 2001 From: dmdgpdi <33450285+dmdgpdi@users.noreply.github.com> Date: Wed, 27 Nov 2024 19:32:17 +0900 Subject: [PATCH 1/6] =?UTF-8?q?fix:=20TagPicker=20=EC=9E=98=20=EB=B3=B4?= =?UTF-8?q?=EC=9D=B4=EA=B2=8C=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/techpick/src/components/pickDraggableListLayout.css.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/frontend/techpick/src/components/pickDraggableListLayout.css.ts b/frontend/techpick/src/components/pickDraggableListLayout.css.ts index afb3150a..9fd159b9 100644 --- a/frontend/techpick/src/components/pickDraggableListLayout.css.ts +++ b/frontend/techpick/src/components/pickDraggableListLayout.css.ts @@ -3,4 +3,6 @@ import { style } from '@vanilla-extract/css'; export const pickDraggableListLayoutStyle = style({ width: 'fit-content', overflowY: 'scroll', + /**paddingBottom이 없다면 TagPicker가 짤리게 됩니다.*/ + paddingBottom: '160px', }); From 24843729ed6192efbedbb42da9b81aa06891523a Mon Sep 17 00:00:00 2001 From: dmdgpdi <33450285+dmdgpdi@users.noreply.github.com> Date: Wed, 27 Nov 2024 20:40:59 +0900 Subject: [PATCH 2/6] =?UTF-8?q?fix:=20PickTagPicker=20=EC=9D=B4=EC=83=81?= =?UTF-8?q?=ED=95=9C=20=EB=A0=8C=EB=8D=94=EB=A7=81=20=ED=95=B4=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../PickTagAutocompleteDialog.tsx | 76 ++++++++----------- .../PickTagPicker/PickTagPicker.tsx | 71 ++++++++++------- .../pickTagAutocompleteDialog.css.ts | 2 - 3 files changed, 77 insertions(+), 72 deletions(-) diff --git a/frontend/techpick/src/components/PickTagPicker/PickTagAutocompleteDialog.tsx b/frontend/techpick/src/components/PickTagPicker/PickTagAutocompleteDialog.tsx index 0697905f..e8358ccb 100644 --- a/frontend/techpick/src/components/PickTagPicker/PickTagAutocompleteDialog.tsx +++ b/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(false); const randomNumber = useRef(getRandomInt()); const tagIdOrderedList = selectedTagList.map((tag) => tag.id); - const { refs, floatingStyles, update } = useFloating({ - middleware: [ - flip({ - fallbackAxisSideDirection: 'start', - }), - ], - }); - const tagAutocompleteDialogRef = useRef(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,10 +127,10 @@ export function PickTagAutocompleteDialog({ onOpenChange(open); }} - container={container?.current ?? undefined} className={tagDialogPortalLayout} filter={filterCommandItems} - ref={tagAutocompleteDialogRef} + style={{ ...floatingStyles }} + ref={setFloating} > tag autocomplete @@ -146,37 +138,30 @@ export function PickTagAutocompleteDialog({ {/**선택한 태그 리스트 */} -
- - {selectedTagList.map((tag) => ( - - { - focusTagInput(); - update(); - }} - pickInfo={pickInfo} - selectedTagList={selectedTagList} - /> - - ))} - - - -
+ + {selectedTagList.map((tag) => ( + + { + focusTagInput(); + }} + pickInfo={pickInfo} + selectedTagList={selectedTagList} + /> + + ))} + + + {/**전체 태그 리스트 */} - + {fetchingTagState.isPending && ( @@ -230,6 +215,7 @@ export function PickTagAutocompleteDialog({ {/**DeleteTagDialog를 닫고도 Command.Dialog가 켜져있기위해서 Command.Dialog 내부에 있어야합니다.*/} +
); } @@ -237,7 +223,9 @@ export function PickTagAutocompleteDialog({ interface PickTagAutocompleteDialogProps { open: boolean; onOpenChange: (open: boolean) => void; - container?: React.RefObject; pickInfo: PickInfoType; selectedTagList: TagType[]; + setFloating: ((node: HTMLElement | null) => void) & + ((node: HTMLElement | null) => void); + floatingStyles: CSSProperties; } diff --git a/frontend/techpick/src/components/PickTagPicker/PickTagPicker.tsx b/frontend/techpick/src/components/PickTagPicker/PickTagPicker.tsx index f19c0e9e..238b79ff 100644 --- a/frontend/techpick/src/components/PickTagPicker/PickTagPicker.tsx +++ b/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,17 @@ import { PickInfoType, TagType } from '@/types'; export const PickTagPicker = forwardRef( function PickTagPickerWithRef({ pickInfo, selectedTagList }, tabFocusRef) { const [open, setOpen] = useState(false); - const tagInputContainerRef = useRef(null); const { setCurrentUpdateTagPickId } = useUpdatePickStore(); + const { refs, floatingStyles } = useFloating({ + strategy: 'fixed', + + whileElementsMounted: autoUpdate, + middleware: [ + shift({ + crossAxis: true, + }), + ], + }); const openDialog = () => { setOpen(true); @@ -32,31 +42,40 @@ export const PickTagPicker = forwardRef( }; return ( -
-
- {selectedTagList.length === 0 && ( -

태그를 넣어주세요

- )} - - {selectedTagList.map((tag) => ( - - ))} - -
+
+
+
+
+ {selectedTagList.length === 0 && ( +

태그를 넣어주세요

+ )} + + {selectedTagList.map((tag) => ( + + ))} + +
- + +
); } diff --git a/frontend/techpick/src/components/PickTagPicker/pickTagAutocompleteDialog.css.ts b/frontend/techpick/src/components/PickTagPicker/pickTagAutocompleteDialog.css.ts index 0b7eaae0..5f269ee0 100644 --- a/frontend/techpick/src/components/PickTagPicker/pickTagAutocompleteDialog.css.ts +++ b/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)', From 5253b30854ac6b469f26223a41a6d6f58262184e Mon Sep 17 00:00:00 2001 From: dmdgpdi <33450285+dmdgpdi@users.noreply.github.com> Date: Wed, 27 Nov 2024 20:47:18 +0900 Subject: [PATCH 3/6] =?UTF-8?q?chore:=20=EA=B3=B5=EB=B0=B1=20=EC=A0=9C?= =?UTF-8?q?=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../techpick/src/components/PickTagPicker/PickTagPicker.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/frontend/techpick/src/components/PickTagPicker/PickTagPicker.tsx b/frontend/techpick/src/components/PickTagPicker/PickTagPicker.tsx index 238b79ff..8394b67e 100644 --- a/frontend/techpick/src/components/PickTagPicker/PickTagPicker.tsx +++ b/frontend/techpick/src/components/PickTagPicker/PickTagPicker.tsx @@ -20,6 +20,8 @@ export const PickTagPicker = forwardRef( const { refs, floatingStyles } = useFloating({ strategy: 'fixed', + placement: 'bottom-start', + whileElementsMounted: autoUpdate, middleware: [ shift({ From e240899cae90d2271a2c4c061d309900e2ef9555 Mon Sep 17 00:00:00 2001 From: dmdgpdi <33450285+dmdgpdi@users.noreply.github.com> Date: Wed, 27 Nov 2024 20:44:06 +0900 Subject: [PATCH 4/6] =?UTF-8?q?design:=20=EA=B0=80=EB=A6=AC=EB=8A=94=20?= =?UTF-8?q?=EC=98=81=EC=97=AD=20=EA=B0=9C=EC=84=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/PickTagPicker/PickTagPicker.tsx | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/frontend/techpick/src/components/PickTagPicker/PickTagPicker.tsx b/frontend/techpick/src/components/PickTagPicker/PickTagPicker.tsx index 8394b67e..7dc838a8 100644 --- a/frontend/techpick/src/components/PickTagPicker/PickTagPicker.tsx +++ b/frontend/techpick/src/components/PickTagPicker/PickTagPicker.tsx @@ -19,6 +19,7 @@ export const PickTagPicker = forwardRef( const { setCurrentUpdateTagPickId } = useUpdatePickStore(); const { refs, floatingStyles } = useFloating({ strategy: 'fixed', + placement: 'bottom-start', placement: 'bottom-start', @@ -45,13 +46,8 @@ export const PickTagPicker = forwardRef( return (
+
-
Date: Wed, 27 Nov 2024 20:52:19 +0900 Subject: [PATCH 5/6] =?UTF-8?q?design:=20=ED=95=84=EC=9A=94=EC=97=86?= =?UTF-8?q?=EB=8A=94=20=EC=8A=A4=ED=83=80=EC=9D=BC=20=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../techpick/src/components/PickTagPicker/PickTagPicker.tsx | 2 -- frontend/techpick/src/components/pickDraggableListLayout.css.ts | 2 -- 2 files changed, 4 deletions(-) diff --git a/frontend/techpick/src/components/PickTagPicker/PickTagPicker.tsx b/frontend/techpick/src/components/PickTagPicker/PickTagPicker.tsx index 7dc838a8..369fd8a7 100644 --- a/frontend/techpick/src/components/PickTagPicker/PickTagPicker.tsx +++ b/frontend/techpick/src/components/PickTagPicker/PickTagPicker.tsx @@ -21,8 +21,6 @@ export const PickTagPicker = forwardRef( strategy: 'fixed', placement: 'bottom-start', - placement: 'bottom-start', - whileElementsMounted: autoUpdate, middleware: [ shift({ diff --git a/frontend/techpick/src/components/pickDraggableListLayout.css.ts b/frontend/techpick/src/components/pickDraggableListLayout.css.ts index 9fd159b9..afb3150a 100644 --- a/frontend/techpick/src/components/pickDraggableListLayout.css.ts +++ b/frontend/techpick/src/components/pickDraggableListLayout.css.ts @@ -3,6 +3,4 @@ import { style } from '@vanilla-extract/css'; export const pickDraggableListLayoutStyle = style({ width: 'fit-content', overflowY: 'scroll', - /**paddingBottom이 없다면 TagPicker가 짤리게 됩니다.*/ - paddingBottom: '160px', }); From 3f5471ace2d36f041f0fa8ce70cd6bf502eed3ad Mon Sep 17 00:00:00 2001 From: dmdgpdi <33450285+dmdgpdi@users.noreply.github.com> Date: Wed, 27 Nov 2024 20:59:52 +0900 Subject: [PATCH 6/6] =?UTF-8?q?design:=20border=20=EC=83=89=20=EB=B3=80?= =?UTF-8?q?=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/PickTagPicker/pickTagAutocompleteDialog.css.ts | 3 ++- .../SelectedTagListLayout/SelectedTagListLayout.css.ts | 3 ++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/frontend/techpick/src/components/PickTagPicker/pickTagAutocompleteDialog.css.ts b/frontend/techpick/src/components/PickTagPicker/pickTagAutocompleteDialog.css.ts index 5f269ee0..8a3c6117 100644 --- a/frontend/techpick/src/components/PickTagPicker/pickTagAutocompleteDialog.css.ts +++ b/frontend/techpick/src/components/PickTagPicker/pickTagAutocompleteDialog.css.ts @@ -25,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': { diff --git a/frontend/techpick/src/components/SelectedTagListLayout/SelectedTagListLayout.css.ts b/frontend/techpick/src/components/SelectedTagListLayout/SelectedTagListLayout.css.ts index 111c3156..2ed14fe7 100644 --- a/frontend/techpick/src/components/SelectedTagListLayout/SelectedTagListLayout.css.ts +++ b/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: {}, });