@coldsurf/ocean-road 1.13.2

package/src/extensions/dropdown/dropdown.menu-item.tsx

@@ -0,0 +1,237 @@
+import { overlay } from 'overlay-kit';
+import {
+  type MouseEvent,
+  type MouseEventHandler,
+  type ReactNode,
+  type Ref,
+  forwardRef,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+  useState,
+} from 'react';
+import { MenuItem } from '../menu-item';
+import { Dropdown } from './dropdown';
+import type { DropdownMenuItemRef } from './dropdown.types';
+
+const SPACER_HEIGHT = 8;
+
+type Props<DataItemT> = {
+  isCurrent: boolean;
+  icon?: ReactNode;
+  title: ReactNode;
+  dropdownData: Array<DataItemT>;
+  renderDropdownItem: (item: DataItemT) => ReactNode;
+  backdrop?: boolean;
+  absolute?: boolean;
+  isLoading?: boolean;
+  onClose?: () => void;
+  onMouseEnter?: (e: MouseEvent<HTMLDivElement>, params: { openDropdown: () => void }) => void;
+  onMouseLeave?: (e: MouseEvent<HTMLDivElement>, params: { closeDropdown: () => void }) => void;
+  onClick?: (e: MouseEvent<HTMLDivElement>, params: { openDropdown: () => void }) => void;
+};
+
+export const DropdownMenuItem = forwardRef(function DropdownMenuItemComponent<DataItemT>(
+  {
+    isCurrent,
+    icon,
+    title,
+    dropdownData,
+    renderDropdownItem,
+    backdrop = false,
+    absolute = false,
+    isLoading,
+    onClose,
+    onMouseEnter,
+    onMouseLeave,
+    onClick,
+  }: Props<DataItemT>,
+  ref: Ref<DropdownMenuItemRef>
+) {
+  const [isOpenDropdown, setIsOpenDropdown] = useState(false);
+
+  const menuItemRef = useRef<HTMLDivElement>(null);
+
+  const canShowDropdown = dropdownData.length > 0 || isLoading;
+
+  const openDropdown = useCallback(() => {
+    if (absolute) {
+      const rect = menuItemRef.current?.getBoundingClientRect();
+      if (!rect) return;
+      const renderItem = (item: (typeof dropdownData)[number], index: number) => (
+        <div
+          key={index.toString()}
+          onClick={(e) => e.stopPropagation()}
+          onKeyDown={(e) => e.stopPropagation()}
+        >
+          {renderDropdownItem(item)}
+        </div>
+      );
+      overlay.open(
+        ({ close, isOpen }) =>
+          isOpen && (
+            <Dropdown
+              edge="left"
+              backdrop={backdrop}
+              preventScroll={false}
+              isOpen={isOpen}
+              animate={backdrop}
+              onClose={close}
+              position={{
+                top: rect.bottom + window.scrollY, // Bottom of button
+                left: rect.left + window.scrollX, // Left of button
+              }}
+            >
+              {dropdownData.map(renderItem)}
+            </Dropdown>
+          )
+      );
+    } else {
+      requestAnimationFrame(() => {
+        if (canShowDropdown) {
+          const rect = menuItemRef.current?.getBoundingClientRect();
+          if (!rect) return;
+          setIsOpenDropdown(true);
+        }
+      });
+    }
+  }, [absolute, dropdownData, renderDropdownItem, backdrop, canShowDropdown]);
+
+  const closeDropdownHoverLeave = useCallback((_: MouseEvent<HTMLDivElement>) => {
+    // const container = e.currentTarget;
+    // const nextTarget = e.relatedTarget as Node | null;
+
+    // nextTarget 이 Container 내부라면: close 방지
+    // if (container.contains(nextTarget)) {
+    //   return;
+    // }
+
+    setIsOpenDropdown(false);
+  }, []);
+
+  const close = useCallback(() => {
+    onClose?.();
+    setIsOpenDropdown(false);
+    overlay.closeAll();
+  }, [onClose]);
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      close: () => {
+        setIsOpenDropdown(false);
+        overlay.closeAll();
+      },
+    }),
+    []
+  );
+
+  const handleClick = useCallback<MouseEventHandler<HTMLDivElement>>(
+    (e) => {
+      e.stopPropagation();
+      onClick?.(e, { openDropdown });
+    },
+    [onClick, openDropdown]
+  );
+
+  const handleMouseEnter = useCallback<MouseEventHandler<HTMLDivElement>>(
+    (evt) => {
+      onMouseEnter?.(evt, {
+        openDropdown,
+      });
+    },
+    [onMouseEnter, openDropdown]
+  );
+
+  const handleMouseLeave = useCallback<MouseEventHandler<HTMLDivElement>>(
+    (e) => {
+      onMouseLeave?.(e, {
+        closeDropdown: () => closeDropdownHoverLeave(e),
+      });
+    },
+    [closeDropdownHoverLeave, onMouseLeave]
+  );
+
+  useEffect(() => {
+    if (!menuItemRef.current) return;
+    const handleOutsideClick = (event: globalThis.MouseEvent) => {
+      const target = event.target as Node;
+
+      if (!target || !target.isConnected) {
+        return;
+      }
+
+      const isOutside = menuItemRef.current && !menuItemRef.current.contains(target);
+
+      if (isOutside) {
+        setIsOpenDropdown(false);
+      }
+    };
+
+    window.addEventListener('mousedown', handleOutsideClick, {});
+
+    return () => window.removeEventListener('mousedown', handleOutsideClick, {});
+  }, []);
+
+  return (
+    <>
+      <MenuItem
+        ref={menuItemRef}
+        isCurrent={isCurrent}
+        icon={icon}
+        onClick={handleClick}
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
+        style={{
+          position: 'relative',
+        }}
+      >
+        {title}
+        {!absolute && isOpenDropdown && canShowDropdown && (
+          <div
+            style={{
+              position: 'absolute',
+              top: '100%',
+              minWidth: '100%', // 버튼 너비만큼 확보
+              width: 'auto', // renderItem이 더 넓으면 확장 허용
+              left: 0,
+            }}
+          >
+            {/* Spacer */}
+            <div
+              style={{
+                height: `${SPACER_HEIGHT}px`,
+                background: 'transparent',
+                cursor: 'default',
+              }}
+            />
+            <Dropdown
+              // currently leave edge value to left
+              edge="left"
+              backdrop={backdrop}
+              preventScroll={false}
+              isOpen
+              animate={backdrop}
+              isLoading={isLoading}
+              onClose={close}
+            >
+              {dropdownData.map((item, index) => (
+                <div
+                  key={index.toString()}
+                  onClick={(e) => e.stopPropagation()}
+                  onKeyDown={(e) => e.stopPropagation()}
+                >
+                  {renderDropdownItem(item)}
+                </div>
+              ))}
+            </Dropdown>
+          </div>
+        )}
+      </MenuItem>
+    </>
+  );
+}) as <DataItemT>(props: Props<DataItemT> & { ref?: Ref<DropdownMenuItemRef> }) => JSX.Element;
+
+// @ts-expect-error
+DropdownMenuItem.displayName = 'Dropdown.MenuItem';

package/src/extensions/dropdown/dropdown.result-item.tsx

@@ -0,0 +1,26 @@
+import { semantics } from '@/tokens';
+import styled from '@emotion/styled';
+
+export const DropdownResultItem = styled.div<{ $isActive?: boolean }>`
+  padding-left: 1rem;
+  padding-right: 1rem;
+  padding-top: 0.6rem;
+  padding-bottom: 0.6rem;
+  cursor: pointer;
+
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+
+  color: ${semantics.color.foreground[1]};
+
+  background-color: ${({ $isActive }) => ($isActive ? semantics.color.background[5] : semantics.color.background[3])};
+  white-space: nowrap;
+  display: block;
+
+  &:hover {
+    background-color: ${semantics.color.background[4]};
+  }
+`;
+
+DropdownResultItem.displayName = 'Dropdown.ResultItem';

package/src/extensions/dropdown/dropdown.styled.tsx

@@ -0,0 +1,48 @@
+import { semantics } from '@/tokens';
+import { commonWebkitScrollHideCss } from '@/utils/common-styles';
+import styled from '@emotion/styled';
+import { motion } from 'framer-motion';
+
+export const DropdownMotionDiv = styled(motion.div)<{ $zIndex?: number }>`
+  background-color: transparent;
+
+  position: absolute;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  z-index: ${(props) => props.$zIndex};
+  border-radius: 8px;
+
+  ${commonWebkitScrollHideCss()}
+`;
+
+export const StyledDropdownSpinnerItem = styled.div`
+  padding-left: 1rem;
+  padding-right: 1rem;
+  padding-top: 0.6rem;
+  padding-bottom: 0.6rem;
+
+  background-color: ${semantics.color.background[4]};
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+
+export const StyledDropdownList = styled.ul`
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  border-radius: 8px;
+  ${commonWebkitScrollHideCss()}
+`;
+export const StyledDropdownListItem = styled.li`
+  background-color: transparent;
+
+  &:first-of-type {
+    border-top-left-radius: 8px;
+    border-top-right-radius: 8px;
+  }
+  &:last-of-type {
+    border-bottom-left-radius: 8px;
+    border-bottom-right-radius: 8px;
+  }
+`;

package/src/extensions/dropdown/dropdown.trigger.tsx

@@ -0,0 +1,72 @@
+import {
+  type PropsWithChildren,
+  type ReactNode,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
+import { Dropdown, type DropdownCoreProps } from './dropdown';
+import type { DropdownMenuItemRef } from './dropdown.types';
+
+export const DropdownTrigger = ({
+  renderTriggerNode,
+  triggerRef,
+  children,
+  backdrop,
+  zIndex,
+  edge,
+}: PropsWithChildren<{
+  renderTriggerNode: ({ openDropdown }: { openDropdown: () => void }) => ReactNode;
+  triggerRef: DropdownCoreProps['triggerRef'];
+  backdrop: DropdownCoreProps['backdrop'];
+  zIndex: DropdownCoreProps['zIndex'];
+  edge: DropdownCoreProps['edge'];
+}>) => {
+  const dropdownRef = useRef<DropdownMenuItemRef>(null);
+  const [isDropdownOpen, setIsDropdownOpen] = useState<boolean>(false);
+
+  // Handle dropdown open
+  const openDropdown = useCallback(() => {
+    setIsDropdownOpen(true);
+  }, []);
+
+  const closeDropdown = useCallback(() => {
+    setIsDropdownOpen(false);
+  }, []);
+
+  useEffect(() => {
+    if (backdrop) return;
+    if (!isDropdownOpen) return;
+    if (!dropdownRef.current) return;
+    const handleOutsideClick = (event: globalThis.MouseEvent) => {
+      const target = event.target as Node;
+
+      if (!target || !target.isConnected) {
+        return;
+      }
+      closeDropdown();
+    };
+
+    window.addEventListener('mousedown', handleOutsideClick, {});
+
+    return () => window.removeEventListener('mousedown', handleOutsideClick, {});
+  }, [backdrop, closeDropdown, isDropdownOpen]);
+
+  return (
+    <>
+      {renderTriggerNode({ openDropdown })}
+      <Dropdown
+        ref={dropdownRef}
+        isOpen={isDropdownOpen}
+        onClose={closeDropdown}
+        triggerRef={triggerRef}
+        backdrop={backdrop}
+        zIndex={zIndex}
+        edge={edge}
+      >
+        {children}
+      </Dropdown>
+    </>
+  );
+};

package/src/extensions/dropdown/dropdown.tsx

@@ -0,0 +1,222 @@
+import { Spinner } from '@/base';
+import { usePreventScrollEffect } from '@/utils/use-prevent-scroll-effect';
+import { AnimatePresence, type MotionStyle, motion } from 'framer-motion';
+import {
+  type CSSProperties,
+  type PropsWithChildren,
+  type RefObject,
+  forwardRef,
+  memo,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import {
+  DropdownMotionDiv,
+  StyledDropdownList,
+  StyledDropdownSpinnerItem,
+} from './dropdown.styled';
+import type { DropdownMenuItemRef } from './dropdown.types';
+import { calculatePosition } from './dropdown.utils';
+
+const POSITION_PADDING = 8;
+
+type Position = {
+  top: number;
+  left?: number;
+  right?: number;
+};
+
+type DropdownCoreBaseProps = {
+  isOpen: boolean;
+  onClose: () => void;
+  position?: Position;
+  className?: string;
+  style?: CSSProperties;
+  isLoading?: boolean;
+  backdrop?: boolean;
+  preventScroll?: boolean;
+  animate?: boolean;
+  triggerRef?: RefObject<HTMLElement>;
+  zIndex?: number;
+};
+
+export type DropdownCoreProps = PropsWithChildren<
+  ({ edge: 'left' } & DropdownCoreBaseProps) | ({ edge: 'right' } & DropdownCoreBaseProps)
+>;
+
+const DropdownComponent = forwardRef<DropdownMenuItemRef, DropdownCoreProps>(
+  (
+    {
+      children,
+      isOpen,
+      onClose,
+      position,
+      className,
+      style,
+      isLoading,
+      backdrop = true,
+      preventScroll = true,
+      animate = true,
+      triggerRef,
+      zIndex,
+      edge,
+    },
+    ref
+  ) => {
+    const dropdownRef = useRef<HTMLDivElement>(null);
+    const dropdownVariants = {
+      hidden: { opacity: 0, y: -10 },
+      visible: { opacity: 1, y: 0 },
+      exit: { opacity: 0, y: -10 },
+    };
+
+    const [maxHeight, setMaxHeight] = useState(0);
+    const [innerPosition, setInnerPosition] = useState<Position | undefined>(position);
+
+    const calculateMaxHeight = useCallback(() => {
+      const vh = window.visualViewport?.height ?? window.innerHeight;
+      const domTop = dropdownRef.current?.getBoundingClientRect().top ?? 0;
+
+      const positionTop = domTop + POSITION_PADDING * 2;
+      const nextMax = vh - positionTop;
+
+      return nextMax;
+    }, []);
+
+    useEffect(() => {
+      if (!triggerRef?.current) return;
+
+      if (!isOpen) {
+        setMaxHeight(0);
+        setInnerPosition(undefined);
+        return;
+      }
+
+      const updatePosition = () => {
+        const nextPosition = calculatePosition({
+          triggerRef,
+          dropdownRef,
+          edge,
+        });
+        if (nextPosition) {
+          setInnerPosition(nextPosition);
+        }
+        const nextMax = calculateMaxHeight();
+        setMaxHeight(nextMax);
+      };
+
+      updatePosition(); // 최초 1회
+
+      window.addEventListener('resize', updatePosition);
+      window.addEventListener('scroll', updatePosition, { passive: true });
+
+      return () => {
+        window.removeEventListener('resize', updatePosition);
+        window.removeEventListener('scroll', updatePosition);
+      };
+    }, [calculateMaxHeight, edge, isOpen, triggerRef]);
+
+    usePreventScrollEffect({
+      shouldPrevent: preventScroll && isOpen,
+    });
+
+    useImperativeHandle(ref, () => ({
+      close: () => {
+        // @TODO: close
+      },
+    }));
+
+    const dropdownStyle = useMemo<MotionStyle>(() => {
+      if (edge === 'left') {
+        const value: MotionStyle = {
+          top: triggerRef?.current ? innerPosition?.top : undefined,
+          left: triggerRef?.current ? innerPosition?.left : undefined,
+          maxHeight: triggerRef?.current ? `${maxHeight}px` : undefined,
+          overflowY: 'scroll',
+          scrollbarWidth: 'none',
+          ...style,
+        };
+        return value;
+      }
+
+      const value: MotionStyle = {
+        top: triggerRef?.current ? innerPosition?.top : undefined,
+        right: triggerRef?.current ? innerPosition?.right : undefined,
+        maxHeight: triggerRef?.current ? `${maxHeight}px` : undefined,
+        overflowY: 'scroll',
+        scrollbarWidth: 'none',
+        ...style,
+      };
+      return value;
+    }, [
+      edge,
+      innerPosition?.left,
+      innerPosition?.right,
+      innerPosition?.top,
+      maxHeight,
+      style,
+      triggerRef,
+    ]);
+
+    return (
+      <AnimatePresence>
+        {isOpen && (
+          <>
+            {/* Backdrop */}
+            {backdrop && (
+              <motion.div
+                className="backdrop"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onClose();
+                }}
+                initial={animate ? { opacity: 0 } : undefined}
+                animate={animate ? { opacity: 0.5 } : undefined}
+                exit={animate ? { opacity: 0 } : undefined}
+                style={{
+                  position: 'fixed',
+                  top: 0,
+                  left: 0,
+                  width: '100%',
+                  height: '100%',
+                  backgroundColor: backdrop ? 'black' : 'transparent',
+                  zIndex,
+                  cursor: 'default',
+                }}
+              />
+            )}
+
+            {/* Dropdown */}
+            <DropdownMotionDiv
+              ref={dropdownRef}
+              className={className}
+              initial={animate ? 'hidden' : undefined}
+              animate={animate ? 'visible' : undefined}
+              exit={animate ? 'exit' : undefined}
+              variants={animate ? dropdownVariants : undefined}
+              style={dropdownStyle}
+              $zIndex={typeof zIndex === 'number' ? zIndex + 1 : undefined}
+            >
+              {/* Contents */}
+              {isLoading ? (
+                <StyledDropdownSpinnerItem>
+                  <Spinner />
+                </StyledDropdownSpinnerItem>
+              ) : (
+                <StyledDropdownList>{children}</StyledDropdownList>
+              )}
+            </DropdownMotionDiv>
+          </>
+        )}
+      </AnimatePresence>
+    );
+  }
+);
+
+export const Dropdown = memo(DropdownComponent);
+
+Dropdown.displayName = 'Dropdown.Core';

package/src/extensions/dropdown/dropdown.types.ts

@@ -0,0 +1,3 @@
+export type DropdownMenuItemRef = {
+  close: () => void;
+};

package/src/extensions/dropdown/dropdown.utils.ts

@@ -0,0 +1,40 @@
+import type { RefObject } from 'react';
+
+const POSITION_PADDING = 8;
+
+export function calculatePosition({
+  dropdownRef,
+  triggerRef,
+  edge,
+}: {
+  dropdownRef: RefObject<HTMLElement>;
+  triggerRef: RefObject<HTMLElement>;
+  edge: 'left' | 'right';
+}) {
+  if (!triggerRef?.current) return null;
+
+  const rect = triggerRef.current.getBoundingClientRect();
+
+  const left = rect.left + window.scrollX;
+  const selfWidth = dropdownRef.current?.getBoundingClientRect().width ?? 0;
+
+  if (edge === 'left') {
+    return {
+      top: rect.bottom + window.scrollY + POSITION_PADDING,
+      left:
+        left < 0
+          ? 0
+          : left > window.innerWidth - selfWidth
+            ? window.innerWidth - selfWidth - 10
+            : left,
+    };
+  }
+
+  const documentWidth = document.documentElement.getBoundingClientRect().width;
+  const right = documentWidth - rect.right;
+
+  return {
+    top: rect.bottom + window.scrollY + POSITION_PADDING,
+    right,
+  };
+}

package/src/extensions/dropdown/index.ts

@@ -0,0 +1,14 @@
+import { Dropdown as DropdownCore, type DropdownCoreProps } from './dropdown';
+import { DropdownMenuItem } from './dropdown.menu-item';
+import { DropdownResultItem } from './dropdown.result-item';
+import { DropdownTrigger } from './dropdown.trigger';
+import type { DropdownMenuItemRef } from './dropdown.types';
+
+export const Dropdown = {
+  ResultItem: DropdownResultItem,
+  MenuItem: DropdownMenuItem,
+  Core: DropdownCore,
+  Trigger: DropdownTrigger,
+};
+
+export type { DropdownMenuItemRef, DropdownCoreProps };

package/src/extensions/error-ui/index.ts

@@ -0,0 +1,7 @@
+import { NetworkError } from './network-error';
+import { UnknownError } from './unknown-error';
+
+export const ErrorUI = {
+  NetworkError,
+  UnknownError,
+};

package/src/extensions/error-ui/network-error/index.ts

@@ -0,0 +1 @@
+export * from './network-error';

package/src/extensions/error-ui/network-error/network-error.styled.ts

@@ -0,0 +1,16 @@
+import { Text } from '@/base';
+import styled from '@emotion/styled';
+
+export const StyledErrorContainer = styled.div`
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+`;
+
+export const StyledErrorText = styled(Text)`
+  font-weight: bold;
+  margin: unset;
+  margin-bottom: 1rem;
+`;