@0610studio/zs-ui 0.0.1

package/src/notify/PopOver/PopOverMenu.tsx

@@ -0,0 +1,95 @@
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import { BackHandler, Dimensions, LayoutChangeEvent, Pressable } from "react-native";
+import Animated, { FadeInUp, FadeOutUp } from "react-native-reanimated";
+import { useNotify } from "../../model/useNotify";
+import ModalBackground from "../ui/ModalBackground";
+import { PopOverMenuProps } from "../../model/types";
+
+// 화면 높이 가져오기
+const WINDOW_HEIGHT = Dimensions.get('window').height;
+
+function PopOverMenu({
+  px,
+  py,
+  component
+}: PopOverMenuProps): JSX.Element | null {
+  const [isContentVisible, setIsContentVisible] = useState<boolean>(false);
+  const [contentWidth, setContentWidth] = useState<number>(0);
+  const [contentHeight, setContentHeight] = useState<number>(0);
+  const { popOverVisible, setPopOverVisible } = useNotify();
+  const timerRef = useRef<number | null>(null);
+
+  // 뒤로가기 버튼 처리 핸들러
+  const handleBackPress = useCallback((): boolean => {
+    if (popOverVisible) {
+      setIsContentVisible(false);
+      setPopOverVisible(false);
+      return true; // 뒤로가기 액션을 막음
+    }
+    return false; // 기본 동작 허용
+  }, [popOverVisible, setPopOverVisible]);
+
+  // 뒤로가기 이벤트 리스너 추가 및 제거
+  useEffect(() => {
+    const backHandler = BackHandler.addEventListener('hardwareBackPress', handleBackPress);
+
+    return () => backHandler.remove();
+  }, [handleBackPress]);
+
+  // 레이아웃 크기 계산
+  const handleLayout = useCallback((event: LayoutChangeEvent): void => {
+    setContentWidth(event.nativeEvent.layout.width || 0);
+    setContentHeight(event.nativeEvent.layout.height || 0);
+  }, []);
+
+  // PopOver가 보일 때 콘텐츠를 딜레이 후 보여줌
+  useEffect(() => {
+    if (popOverVisible) {
+      if (timerRef.current) {
+        clearTimeout(timerRef.current);
+      }
+
+      timerRef.current = setTimeout(() => {
+        setIsContentVisible(true);
+      }, 200);
+    }
+
+    return () => {
+      if (timerRef.current) {
+        clearTimeout(timerRef.current);
+        timerRef.current = null;
+      }
+    };
+  }, [popOverVisible]);
+
+  // 화면 크기에 따른 위치 조정
+  const isVerticalOverflow = WINDOW_HEIGHT < (py + contentHeight);
+  const isHorizontalOverflow = Dimensions.get('window').width > (px + contentWidth);
+
+  if (!popOverVisible) return null;
+
+  return (
+    <ModalBackground isCenter={false} onPress={() => setPopOverVisible(false)}>
+      {isContentVisible && (
+        <Animated.View
+          entering={FadeInUp}
+          exiting={FadeOutUp}
+        >
+          {/* PopOver의 위치를 세밀하게 조정 */}
+          <Pressable
+            style={{
+              position: 'absolute',
+              top: py - (isVerticalOverflow ? (contentHeight + 10) : 0),
+              left: px - contentWidth + (isHorizontalOverflow ? contentWidth : 0),
+            }}
+            onLayout={handleLayout}
+          >
+            {component}
+          </Pressable>
+        </Animated.View>
+      )}
+    </ModalBackground>
+  );
+}
+
+export default PopOverMenu;

package/src/notify/SnackbarNotify/index.tsx

@@ -0,0 +1,43 @@
+import React, { ReactNode } from "react";
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { StyleSheet, View } from "react-native";
+import { CustomSnackbarProps } from "../../model/types";
+import SnackbarItem from "./ui/SnackbarItem";
+import { useNotify } from "../../model/useNotify";
+
+const SnackbarNotify = ({
+  customSnackbar
+}: {
+  customSnackbar?: (props: CustomSnackbarProps) => ReactNode
+}) => {
+  const { top } = useSafeAreaInsets();
+  const { snackItemStack, hideSnackBar } = useNotify();
+
+  return snackItemStack ? (
+    <View style={[styles.container, { paddingTop: top }]}>
+      {
+        snackItemStack.map((snackItem, index) => {
+          return (
+            <SnackbarItem
+              key={index}
+              customSnackbar={customSnackbar}
+              snackItem={snackItem}
+              hideSnackBar={hideSnackBar}
+            />
+          );
+        })
+      }
+    </View>
+  ) : null;
+};
+
+const styles = StyleSheet.create({
+  container: {
+    zIndex: 9997,
+    width: '100%',
+    alignItems: 'center',
+    position: 'absolute',
+  },
+});
+
+export default SnackbarNotify;

package/src/notify/SnackbarNotify/ui/SnackbarItem.tsx

@@ -0,0 +1,103 @@
+import React, { ReactNode, useEffect, useCallback } from "react";
+import { Platform, StyleSheet, TouchableOpacity } from "react-native";
+import Animated, { FadeInUp, FadeOutUp } from "react-native-reanimated";
+import { CustomSnackbarProps, SnackItem } from "../../../model/types";
+import ViewAtom from "../../../ui/atoms/ViewAtom";
+import { ZSText } from "../../../ui";
+import { useTheme } from "../../../model/useThemeProvider";
+
+const Snackbar = ({
+  customSnackbar,
+  snackItem,
+  hideSnackBar,
+}: {
+  customSnackbar?: (props: CustomSnackbarProps) => ReactNode;
+  snackItem: SnackItem;
+  hideSnackBar: (index: number) => void;
+}) => {
+  const { type, message, snackbarDuration } = snackItem;
+  const { palette } = useTheme();
+
+  const closeSnackbar = useCallback(() => {
+    hideSnackBar(snackItem.index);
+  }, [hideSnackBar, snackItem.index]);
+
+  useEffect(() => {
+    const closeTimeout = setTimeout(closeSnackbar, snackbarDuration);
+
+    return () => clearTimeout(closeTimeout);
+  }, [snackbarDuration, closeSnackbar]);
+
+  return (
+    <Animated.View
+      style={[styles.container, styles.aosShadow, styles.snackbarWrapper]}
+      entering={FadeInUp}
+      exiting={FadeOutUp}
+    >
+      <TouchableOpacity
+        style={[styles.container, styles.iosShadow, styles.touchable]}
+        activeOpacity={1}
+        onPress={closeSnackbar}
+      >
+        {customSnackbar ? (
+          customSnackbar({ snackType: type, snackMessage: message })
+        ) : (
+          <ViewAtom
+            style={[
+              styles.snackBar,
+              { backgroundColor: type === "error" ? palette.background.danger : palette.background.success },
+            ]}
+          >
+            <ViewAtom style={styles.messageContainer}>
+              <ZSText>{message}</ZSText>
+            </ViewAtom>
+          </ViewAtom>
+        )}
+      </TouchableOpacity>
+    </Animated.View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    borderRadius: 16,
+    backgroundColor: "white",
+  },
+  iosShadow: {
+    ...Platform.select({
+      ios: {
+        shadowColor: "rgb(50, 50, 50)",
+        shadowOpacity: 0.12,
+        shadowRadius: 5,
+        shadowOffset: { height: 3, width: 0 },
+      },
+    }),
+  },
+  aosShadow: {
+    ...Platform.select({
+      android: { elevation: 5 },
+    }),
+  },
+  snackbarWrapper: {
+    width: "94%",
+    marginTop: 10,
+  },
+  touchable: {
+    width: "100%",
+  },
+  snackBar: {
+    borderRadius: 16,
+    paddingHorizontal: 10,
+    paddingVertical: 18,
+    flexDirection: "row",
+    alignItems: "center",
+    width: "100%",
+  },
+  messageContainer: {
+    flex: 1,
+    flexDirection: "column",
+    marginLeft: 10,
+  },
+});
+
+export default Snackbar;

package/src/notify/index.ts

@@ -0,0 +1,21 @@
+import AlertNotify from './AlertNotify';
+import BottomSheetNotify from './BottomSheetNotify';
+import SnackbarNotify from './SnackbarNotify';
+import BSTextInput from './BottomSheetNotify/ui/BSTextInput';
+import * as useNotifyProvider from '../model/useNotifyProvider';
+import { useNotify } from '../model/useNotify';
+import PopOverButton from './PopOver/PopOverButton';
+import PopOverMenu from './PopOver/PopOverMenu';
+import * as types from '../model/types';
+
+export {
+  AlertNotify,
+  BottomSheetNotify,
+  SnackbarNotify,
+  useNotifyProvider,
+  useNotify,
+  BSTextInput,
+  PopOverButton,
+  PopOverMenu,
+  types,
+}

package/src/notify/ui/ModalBackground.tsx

@@ -0,0 +1,46 @@
+import React, { useMemo } from 'react';
+import { Pressable, StyleSheet } from 'react-native';
+import Animated, { FadeIn, FadeOut } from 'react-native-reanimated';
+import { useTheme } from '../../model/useThemeProvider';
+
+interface ModalBackgroundProps {
+  isCenter?: boolean;
+  children: React.ReactNode;
+  onPress?: () => void;
+}
+
+function ModalBackground({ isCenter = true, children, onPress }: ModalBackgroundProps) {
+  const { palette: { modalBgColor } } = useTheme();
+  const styles = useMemo(() => createStyles(modalBgColor), [modalBgColor]);
+
+  return (
+    <Animated.View
+      style={styles.modalBg}
+      entering={FadeIn.duration(50)}
+      exiting={FadeOut.duration(50)}
+    >
+      <Pressable
+        style={[styles.fullScreen, isCenter && { justifyContent: 'center', alignItems: 'center' }]}
+        onPress={onPress ?? (() => { })}
+      >
+        {children}
+      </Pressable>
+    </Animated.View>
+  );
+}
+
+// 스타일을 생성하는 함수, 모달 배경 색상 인자로 받음
+const createStyles = (modalBgColor: string) =>
+  StyleSheet.create({
+    modalBg: {
+      zIndex: 9997,
+      backgroundColor: modalBgColor,
+      ...StyleSheet.absoluteFillObject,
+    },
+    // 화면 전체를 덮는 Pressable 스타일 추가
+    fullScreen: {
+      ...StyleSheet.absoluteFillObject,
+    },
+  });
+
+export default ModalBackground;

package/src/theme/index.ts

@@ -0,0 +1,3 @@
+export * from './palette';
+export * from './types';
+export * from './typography';

package/src/theme/palette.ts

@@ -0,0 +1,374 @@
+import { Theme } from "./types";
+
+export const transparency = {
+  '0%': '00',   // 완전 투명
+  '2%': '05',
+  '4%': '0A',
+  '6%': '0F',
+  '8%': '14',
+  '10%': '1A',
+  '12%': '1F',
+  '14%': '24',
+  '16%': '29',
+  '18%': '2E',
+  '20%': '33',
+  '22%': '38',
+  '24%': '3D',
+  '26%': '42',
+  '28%': '47',
+  '30%': '4D',
+  '32%': '52',
+  '34%': '57',
+  '36%': '5C',
+  '38%': '61',
+  '40%': '66',
+  '42%': '6B',
+  '44%': '70',
+  '46%': '75',
+  '48%': '7A',
+  '50%': '80',
+  '52%': '85',
+  '54%': '8A',
+  '56%': '8F',
+  '58%': '94',
+  '60%': '99',
+  '62%': '9E',
+  '64%': 'A3',
+  '66%': 'A8',
+  '68%': 'AD',
+  '70%': 'B3',
+  '72%': 'B8',
+  '74%': 'BD',
+  '76%': 'C2',
+  '78%': 'C7',
+  '80%': 'CC',
+  '82%': 'D1',
+  '84%': 'D6',
+  '86%': 'DB',
+  '88%': 'E0',
+  '90%': 'E6',
+  '92%': 'EB',
+  '94%': 'F0',
+  '96%': 'F5',
+  '98%': 'FA',
+  '100%': 'FF'  // 완전 불투명
+};
+
+const MODAL_BG_COLOR = {
+  light: '#212B3688',
+  dark: '#00000088'
+}
+
+const SHADOW_COLORS = {
+  light: [
+    'rgba(0, 0, 0, 0.18)',
+    'rgba(0, 0, 0, 0.20)',
+    'rgba(0, 0, 0, 0.22)',
+    'rgba(0, 0, 0, 0.23)',
+    'rgba(0, 0, 0, 0.25)',
+    'rgba(0, 0, 0, 0.27)',
+    'rgba(0, 0, 0, 0.29)',
+    'rgba(0, 0, 0, 0.30)',
+    'rgba(0, 0, 0, 0.32)',
+    'rgba(0, 0, 0, 0.34)',
+  ],
+  dark: [
+    'rgba(255, 255, 255, 0.58)',
+    'rgba(255, 255, 255, 0.60)',
+    'rgba(255, 255, 255, 0.62)',
+    'rgba(255, 255, 255, 0.63)',
+    'rgba(255, 255, 255, 0.65)',
+    'rgba(255, 255, 255, 0.67)',
+    'rgba(255, 255, 255, 0.69)',
+    'rgba(255, 255, 255, 0.70)',
+    'rgba(255, 255, 255, 0.72)',
+    'rgba(255, 255, 255, 0.74)',
+  ]
+}
+
+const LIGHT_COLORS = {
+  primary: {
+    0: '#FFF7E6',
+    5: '#FCEDD0',
+    10: '#F9DAA3', // p-lighter
+    20: '#F5BF64', // p-light
+    30: '#fca54c',
+    40: '#ff9225',
+    50: '#FF9F06', // p-main
+    60: '#DD9434', // p-dark
+    70: '#AC7326', // p-darker
+    80: '#c46500',
+    90: '#995400',
+    100: '#663800',
+    lighter: '#F9DAA3',
+    light: '#F5BF64',
+    main: '#FF9F06',
+    dark: '#DD9434',
+    darker: '#AC7326',
+  },
+  secondary: {
+    0: '#E6F7FF',
+    5: '#D1EDFF',
+    10: '#ADE2FF',
+    20: '#85D4FF',
+    30: '#5CC5FF',
+    40: '#33B7FF',
+    50: '#007FFF',
+    60: '#0075E6',
+    70: '#006ACC',
+    80: '#005FB3',
+    90: '#005499',
+    100: '#003866',
+    main: '#007FFF',
+  },
+  danger: {
+    5: '#FEECF0',
+    10: '#FCD4DE',
+    20: '#F799B1',
+    30: '#F36689',
+    40: '#EF3E5E',
+    50: '#EB003B',
+    60: '#D50136',
+    70: '#8D0023',
+    80: '#5E0018',
+    90: '#2F000C',
+    main: '#EB003B',
+  },
+  warning: {
+    5: '#FFF8E9',
+    10: '#FFEAC1',
+    20: '#FFE2A7',
+    30: '#FFD47C',
+    40: '#FFC550',
+    50: '#FFB724',
+    60: '#98690A',
+    70: '#66490E',
+    80: '#4D370B',
+    90: '#332507',
+    main: '#FFB724',
+  },
+  success: {
+    5: '#EEF7F0',
+    10: '#CEE9D4',
+    20: '#B2DCBB',
+    30: '#8CCA99',
+    40: '#33A14B',
+    50: '#008A1E',
+    60: '#006E18',
+    70: '#005312',
+    80: '#00370C',
+    90: '#002207',
+    main: '#008A1E',
+  },
+  information: {
+    5: '#E9F0FF',
+    10: '#D4E1FF',
+    20: '#A9C3FF',
+    30: '#7DA4FF',
+    40: '#5286FF',
+    50: '#2768FF',
+    60: '#1F53CC',
+    70: '#173E99',
+    80: '#0C1F4D',
+    90: '#040A1A',
+    main: '#2768FF',
+  },
+  grey: {
+    0: '#FFFFFF',
+    5: '#F8F8F8',
+    10: '#F9FAFB',
+    20: '#F4F6F8',
+    30: '#DFE3E8',
+    40: '#C4CDD5',
+    50: '#919EAB',
+    60: '#637381',
+    70: '#454F5B',
+    80: '#1C252E',
+    90: '#141A21',
+    100: '#000000',
+    main: '#F4F6F8',
+  },
+};
+
+const DARK_COLORS = {
+  primary: {
+    ...LIGHT_COLORS.primary,
+    main: '#FF9F06',
+  },
+  secondary: {
+    ...LIGHT_COLORS.secondary,
+    main: '#007FFF',
+  },
+  danger: {
+    ...LIGHT_COLORS.danger,
+    main: '#EB003B',
+  },
+  warning: {
+    ...LIGHT_COLORS.warning,
+    main: '#FFB724',
+  },
+  success: {
+    ...LIGHT_COLORS.success,
+    main: '#008A1E',
+  },
+  information: {
+    ...LIGHT_COLORS.information,
+    main: '#2768FF',
+  },
+  grey: {
+    0: '#000000',
+    5: '#141414',  // layer1
+    10: '#1F1F1F', // layer2
+    20: '#2C2C2C', // neutral
+    30: '#3D3D3D',
+    40: '#4F4F4F',
+    50: '#606060',
+    60: '#737373',
+    70: '#8C8C8C',
+    80: '#bfbfbf',
+    90: '#ededed',
+    100: '#FFFFFF',
+    main: '#2C2C2C',
+  },
+};
+
+const MAIN_COLORS = {
+  light: {
+    primary: LIGHT_COLORS.primary.main,
+    secondary: LIGHT_COLORS.secondary.main,
+    danger: LIGHT_COLORS.danger.main,
+    warning: LIGHT_COLORS.warning.main,
+    success: LIGHT_COLORS.success.main,
+    information: LIGHT_COLORS.information.main,
+    grey: LIGHT_COLORS.grey.main
+  },
+  dark: {
+    primary: DARK_COLORS.primary.main,
+    secondary: DARK_COLORS.secondary.main,
+    danger: DARK_COLORS.danger.main,
+    warning: DARK_COLORS.warning.main,
+    success: DARK_COLORS.success.main,
+    information: DARK_COLORS.information.main,
+    grey: DARK_COLORS.grey.main
+  }
+}
+
+const TEXT_COLORS = {
+  light: {
+    primary: LIGHT_COLORS.grey[80],
+    secondary: LIGHT_COLORS.grey[60],
+    disabled: LIGHT_COLORS.grey[50],
+    danger: LIGHT_COLORS.danger[60],
+    warning: LIGHT_COLORS.warning[60],
+    success: LIGHT_COLORS.success[60],
+    information: LIGHT_COLORS.information[60],
+    white: '#FFFFFF',
+    black: '#000000',
+  },
+  dark: {
+    primary: DARK_COLORS.grey[90],
+    secondary: DARK_COLORS.grey[70],
+    disabled: DARK_COLORS.grey[50],
+    danger: DARK_COLORS.danger[30],
+    warning: DARK_COLORS.warning[30],
+    success: DARK_COLORS.success[30],
+    information: DARK_COLORS.information[30],
+    white: '#FFFFFF',
+    black: '#000000',
+  },
+};
+
+const BORDER_COLORS = {
+  light: {
+    box: LIGHT_COLORS.grey[20],
+    active: LIGHT_COLORS.primary[50],
+    base: LIGHT_COLORS.grey[60],
+    danger: LIGHT_COLORS.danger[10],
+    warning: LIGHT_COLORS.warning[10],
+    success: LIGHT_COLORS.success[10],
+    information: LIGHT_COLORS.information[10],
+  },
+  dark: {
+    box: DARK_COLORS.grey[30],
+    active: DARK_COLORS.primary[50],
+    base: DARK_COLORS.grey[60],
+    danger: DARK_COLORS.danger[70],
+    warning: DARK_COLORS.warning[70],
+    success: DARK_COLORS.success[70],
+    information: DARK_COLORS.information[70],
+  },
+};
+
+const BACKGROUND_COLORS = {
+  light: {
+    layer1: LIGHT_COLORS.grey[5],
+    layer2: LIGHT_COLORS.grey[20],
+    neutral: LIGHT_COLORS.grey[30],
+    base: LIGHT_COLORS.grey[0],
+    danger: LIGHT_COLORS.danger[5],
+    warning: LIGHT_COLORS.warning[5],
+    success: LIGHT_COLORS.success[5],
+    information: LIGHT_COLORS.information[5],
+  },
+  dark: {
+    layer1: DARK_COLORS.grey[5],
+    layer2: DARK_COLORS.grey[20],
+    neutral: DARK_COLORS.grey[30],
+    base: DARK_COLORS.grey[0],
+    danger: DARK_COLORS.danger[80],
+    warning: DARK_COLORS.warning[80],
+    success: DARK_COLORS.success[80],
+    information: DARK_COLORS.information[80],
+  },
+};
+
+const ACTION_COLORS = {
+  light: {
+    hover: LIGHT_COLORS.primary[60],
+    pressed: LIGHT_COLORS.primary[70],
+    disable: LIGHT_COLORS.grey[20],
+  },
+  dark: {
+    hover: DARK_COLORS.primary[60],
+    pressed: DARK_COLORS.primary[70],
+    disable: DARK_COLORS.grey[30],
+  },
+};
+
+const DIVIDER_COLOR = {
+  light: LIGHT_COLORS.grey[50] + transparency['20%'],
+  dark: DARK_COLORS.grey[50] + transparency['20%'],
+};
+
+export default function palette({
+  mode = 'light',
+  themeColors = {},
+}: {
+  mode?: 'light' | 'dark';
+  themeColors?: { light?: Theme; dark?: Theme };
+} = {}): Theme {
+  const colors = mode === 'light' ? LIGHT_COLORS : DARK_COLORS;
+
+  const theme: Theme = {
+    mode,
+    ...colors,
+    text: TEXT_COLORS[mode],
+    border: BORDER_COLORS[mode],
+    background: BACKGROUND_COLORS[mode],
+    action: ACTION_COLORS[mode],
+    divider: DIVIDER_COLOR[mode],
+    elevationShadow: SHADOW_COLORS[mode],
+    modalBgColor: MODAL_BG_COLOR[mode],
+    mainColor: MAIN_COLORS[mode]
+  };
+
+  // 사용자 정의 테마 컬러가 있을 경우 병합
+  if (themeColors?.[mode]) {
+    return {
+      ...theme,
+      ...themeColors[mode],
+    };
+  }
+
+  return theme;
+}