@@ -58,22 +57,22 @@ function SectionTitle() {
onClick={() => setIsOpenUser((prev) => !prev)}
aria-label="사용자 정보 팝업"
>
-
- ) {
const navigate = useNavigate();
const { pathname } = useLocation();
const { data: stores, isLoading } = useQuery(storesQueries.getStores());
- const { setStoreId } = useStoreId();
- const [selectedStoreId, setSelectedStoreId] = useState(null);
-
- const selectedStore = useMemo(() => {
- if (selectedStoreId && stores?.stores) {
- const found = stores.stores.find((store) => store.storeId === selectedStoreId);
- if (found) return found;
- }
- return stores?.stores?.[0] ?? null;
- }, [stores, selectedStoreId]);
+ const { storeId, setStoreId } = useStoreId();
const handleCloseMobile = () => {
if (closeMobile) {
@@ -83,6 +74,7 @@ function Sidebar({ closeMobile }: Readonly) {
height={40}
className="hidden md:block md:w-37 lg:w-55"
fetchPriority="high"
+ loading="eager"
/>
![]()
) {
+
)}
diff --git a/src/components/layout/Sidebar.tsx b/src/components/layout/Sidebar.tsx
index 2ef418a..66ec10e 100644
--- a/src/components/layout/Sidebar.tsx
+++ b/src/components/layout/Sidebar.tsx
@@ -1,4 +1,4 @@
-import { useMemo, useState, type ElementType } from "react";
+import type { ElementType } from "react";
import { useQuery } from "@tanstack/react-query";
import { Link, useLocation, useNavigate } from "react-router-dom";
import { storesQueries } from "@/api/stores/queries";
@@ -51,16 +51,7 @@ function Sidebar({ closeMobile }: Readonly
- {isLoading || !selectedStore ? (
+ {isLoading || !storeId ? (
@@ -107,13 +99,13 @@ function Sidebar({ closeMobile }: Readonly) {
}))
: []
}
- value={selectedStore.storeId}
+ value={storeId}
onChange={(item) => {
- setSelectedStoreId(item.id);
setStoreId(item.id);
navigate("/");
+ closeMobile?.();
}}
- defaultText={selectedStore.name}
+ defaultText={stores?.stores?.find((store) => store.storeId === storeId)?.name ?? ""}
triggerClassName={
"bg-primary border-primary text-white text-sm font-semibold lg:text-lg lg:font-bold pl-4 pr-3 lg:pl-5 pr-4 h-12 lg:h-14 w-full min-w-0 overflow-hidden text-ellipsis whitespace-nowrap"
}
diff --git a/src/components/ui/Button/ResponsiveButton.tsx b/src/components/ui/Button/ResponsiveButton.tsx
index ad21dc0..9b59a30 100644
--- a/src/components/ui/Button/ResponsiveButton.tsx
+++ b/src/components/ui/Button/ResponsiveButton.tsx
@@ -69,7 +69,7 @@ function ResponsiveButton(
}),
hideButton(screenSize as ScreenSize),
buttonStyle(buttonConfig?.buttonSize ?? "md", buttonConfig?.className ?? ""),
- commonClassName
+ commonClassName,
)}
disabled={disabled}
type={buttonProps.type ?? "button"}
diff --git a/src/components/ui/Drag/DragList.tsx b/src/components/ui/Drag/DragList.tsx
index 17ec6a7..5ae9deb 100644
--- a/src/components/ui/Drag/DragList.tsx
+++ b/src/components/ui/Drag/DragList.tsx
@@ -52,6 +52,7 @@ interface DraggableListProps {
strategy?: SortingStrategy;
modifiers?: Modifier[];
className?: string;
+ prepend?: ReactNode;
onDragStateChange?: (isDragging: boolean) => void;
}
@@ -64,10 +65,13 @@ export function DragList({
strategy = verticalListSortingStrategy,
modifiers,
className,
+ prepend,
onDragStateChange,
}: Readonly>) {
const sensors = useSensors(
- useSensor(PointerSensor),
+ useSensor(PointerSensor, {
+ activationConstraint: { delay: canDrag ? 0 : 999999, tolerance: 5 },
+ }),
useSensor(KeyboardSensor, {
coordinateGetter: sortableKeyboardCoordinates,
})
@@ -102,7 +106,7 @@ export function DragList({
? [restrictToVerticalAxis, restrictToParentElement]
: [restrictToParentElement];
- return canDrag ? (
+ return (
({
>
- ) : (
- <>{items.map((item, index) => renderItem(item, index))}
);
}
diff --git a/src/components/ui/Image.tsx b/src/components/ui/Image.tsx
index 6ebc7c2..badbafe 100644
--- a/src/components/ui/Image.tsx
+++ b/src/components/ui/Image.tsx
@@ -1,10 +1,12 @@
-import { type ImgHTMLAttributes, type ReactEventHandler, useState } from "react";
+import { type ImgHTMLAttributes, type ReactEventHandler, useEffect, useRef, useState } from "react";
+import cn from "@/lib/utils";
interface ImageProps extends ImgHTMLAttributes {
src: string;
alt: string;
fallbackSrc?: string;
- fill?: boolean;
+ hasBlur?: boolean;
+ imageClassName?: string;
}
export default function Image({
@@ -13,14 +15,44 @@ export default function Image({
onError,
fallbackSrc,
alt,
+ className,
+ hasBlur = false,
+ imageClassName,
...props
}: Readonly) {
+ const wrapperRef = useRef(null);
+
+ const [visible, setVisible] = useState(false);
+ const [loaded, setLoaded] = useState(false);
const [useFallback, setUseFallback] = useState(false);
+ const [error, setError] = useState(false);
+
+ useEffect(() => {
+ const observer = new IntersectionObserver(
+ ([entry]) => {
+ if (entry.isIntersecting) {
+ setVisible(true);
+ observer.disconnect();
+ }
+ },
+ { rootMargin: "200px" }
+ );
+
+ if (wrapperRef.current) observer.observe(wrapperRef.current);
- const cdnSrc = src && src?.trim() !== "" ? `${import.meta.env.VITE_PUBLIC_CDN}/${src}` : "";
- const currentSrc = useFallback && fallbackSrc ? fallbackSrc : cdnSrc;
+ return () => observer.disconnect();
+ }, []);
+
+ const cdnSrc = src && src.trim() !== "" ? `${import.meta.env.VITE_PUBLIC_CDN}/${src}` : "";
+
+ const currentSrc = () => {
+ if (!visible) return "";
+ if (!src || error || (useFallback && fallbackSrc)) return fallbackSrc;
+ return cdnSrc;
+ };
const handleError: ReactEventHandler = (e) => {
+ setError(true);
if (!useFallback) {
setUseFallback(true);
if (!fallbackSrc) {
@@ -29,10 +61,38 @@ export default function Image({
}
};
- if (!currentSrc || currentSrc.trim() === "") {
- return null;
- }
+ const blurClassName = () => {
+ if (hasBlur) {
+ if (loaded) return "blur-0 scale-100";
+ return "blur-sm scale-[1.03]";
+ }
+ return "";
+ };
+
+ return (
+
- *
- *
- *
- * Search
- *
- *
- */
-function InputGroup({ className, ...props }: Readonly>) {
- return (
-
+ {prepend}
{items.map((item, index) => {
const id = keyExtractor(item);
return (
@@ -123,7 +128,5 @@ export function DragList({
+ {/* Skeleton */}
+ {!loaded && visible && hasBlur && (
+
+ )}
- // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
- return 
;
+ {visible && (
+ // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
+ })
setLoaded(true)}
+ draggable={false}
+ className={cn(
+ "h-full w-full object-cover transition-all duration-600",
+ blurClassName(),
+ imageClassName
+ )}
+ {...props}
+ />
+ )}
+
+ );
}
diff --git a/src/components/ui/InputGroup/InputGroup.styles.ts b/src/components/ui/InputGroup/InputGroup.styles.ts
deleted file mode 100644
index f24885b..0000000
--- a/src/components/ui/InputGroup/InputGroup.styles.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-import { cva } from 'class-variance-authority';
-
-export const inputGroupButtonVariants = cva(
- "text-sm shadow-none flex gap-2 items-center",
- {
- variants: {
- size: {
- xs: "h-6 gap-1 px-2 rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-3.5 has-[>svg]:px-2",
- sm: "h-8 px-2.5 gap-1.5 rounded-md has-[>svg]:px-2.5",
- "icon-xs":
- "size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>svg]:p-0",
- "icon-sm": "size-8 p-0 has-[>svg]:p-0",
- },
- },
- defaultVariants: {
- size: "xs",
- },
- })
-
-
-
-
-export const inputGroupAddonVariants = cva(
- "text-muted-foreground flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium select-none [&>svg:not([class*='size-'])]:size-4 [&>kbd]:rounded-[calc(var(--radius)-5px)] group-data-[disabled=true]/input-group:opacity-50",
- {
- variants: {
- align: {
- "inline-start":
- "order-first pl-3 has-[>button]:ml-[-0.45rem] has-[>kbd]:ml-[-0.35rem]",
- "inline-end":
- "order-last pr-3 has-[>button]:mr-[-0.45rem] has-[>kbd]:mr-[-0.35rem]",
- "block-start":
- "order-first w-full justify-start px-3 pt-3 [.border-b]:pb-3 group-has-[>input]/input-group:pt-2.5",
- "block-end":
- "order-last w-full justify-start px-3 pb-3 [.border-t]:pt-3 group-has-[>input]/input-group:pb-2.5",
- },
- },
- defaultVariants: {
- align: "inline-start",
- },
- })
\ No newline at end of file
diff --git a/src/components/ui/InputGroup/InputGroup.tsx b/src/components/ui/InputGroup/InputGroup.tsx
deleted file mode 100644
index 1d22b29..0000000
--- a/src/components/ui/InputGroup/InputGroup.tsx
+++ /dev/null
@@ -1,160 +0,0 @@
-import type { ComponentProps } from "react";
-import { type VariantProps } from "class-variance-authority";
-import Button from "@/components/ui/Button/Button";
-import type { ResponsiveButtonProps } from "@/components/ui/Button/Button.types";
-import Input from "@/components/ui/Input";
-import {
- inputGroupAddonVariants,
- inputGroupButtonVariants,
-} from "@/components/ui/InputGroup/InputGroup.styles";
-import Textarea from "@/components/ui/TextArea";
-import cn from "@/lib/utils";
-
-/**
- *
- * @example
- *