Merge pull request #276 from SaekKkanDa/develop

v1.0.0 배포

@types/error.d.ts

@@ -0,0 +1,4 @@
+interface ErrorResponse {
+  code: number;
+  message: string;
+}

base/components/Backdrop.tsx

@@ -0,0 +1,12 @@
+import styled from 'styled-components';
+
+export const Backdrop = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: ${({ theme }) => theme.gray[900]};
+  opacity: 0.6;
+  z-index: 10;
+`;

base/components/Hidden.tsx

@@ -1,33 +1,33 @@
-import { CSSProperties, ReactNode } from 'react';
-import styled from 'styled-components';
-
-export interface HiddenProps {
-  isHidden: boolean;
-  isUseVisibility?: boolean;
-  style?: CSSProperties;
-  children?: ReactNode;
-}
-export function Hidden({
-  isHidden,
-  isUseVisibility = false,
-  style,
-  children,
-}: HiddenProps) {
-  return (
-    <HiddenContainer
-      isHidden={isHidden}
-      isUseVisibility={isUseVisibility}
-      style={style}
-    >
-      {children}
-    </HiddenContainer>
-  );
-}
-
-const HiddenContainer = styled.div<{
-  isHidden: boolean;
-  isUseVisibility: boolean;
-}>`
-  ${({ isUseVisibility, isHidden }) =>
-    isHidden && (isUseVisibility ? 'visiblity : hidden' : 'display : none')}
-`;
+import { CSSProperties, ReactNode } from 'react';
+import styled from 'styled-components';
+
+export interface HiddenProps {
+  isHidden: boolean;
+  isUseVisibility?: boolean;
+  style?: CSSProperties;
+  children?: ReactNode;
+}
+export function Hidden({
+  isHidden,
+  isUseVisibility = false,
+  style,
+  children,
+}: HiddenProps) {
+  return (
+    <HiddenContainer
+      isHidden={isHidden}
+      isUseVisibility={isUseVisibility}
+      style={style}
+    >
+      {children}
+    </HiddenContainer>
+  );
+}
+
+const HiddenContainer = styled.div<{
+  isHidden: boolean;
+  isUseVisibility: boolean;
+}>`
+  ${({ isUseVisibility, isHidden }) =>
+    isHidden && (isUseVisibility ? 'visiblity : hidden' : 'display : none')}
+`;

base/components/ModalBase.tsx

@@ -1,24 +1,32 @@
-import { ReactElement, ReactNode, cloneElement } from 'react';
-import { createPortal } from 'react-dom';
+import { CSSProperties, ReactElement, ReactNode, cloneElement } from 'react';
 import styled from 'styled-components';
 
 import { Hidden } from '@Base/components/Hidden';
+import useCreatePortal from '@Base/hooks/useCreatePortal';
+import { isNil } from '@Base/utils/check';
+import { Backdrop } from '@Base/components/Backdrop';
 
 export interface ModalBaseProps {
   backdropComponent?: ReactElement;
   children?: ReactNode;
   isOpen: boolean;
   onClose?: () => void;
+  hiddenStyle?: CSSProperties;
 }
 
 export function ModalBase({
-  backdropComponent = <DefaultBackdrop />,
+  backdropComponent = <Backdrop />,
   children,
   isOpen,
   onClose,
+  hiddenStyle,
 }: ModalBaseProps) {
+  const createPortal = useCreatePortal();
+
+  if (isNil(createPortal)) return <></>;
+
   return createPortal(
-    <Hidden isHidden={!isOpen}>
+    <Hidden isHidden={!isOpen} style={hiddenStyle}>
       <Container>
         {cloneElement(backdropComponent, { onClick: onClose })}
         {children}
@@ -34,14 +42,3 @@ export const Container = styled.div`
   max-height: 100dvh;
   overflow: hidden;
 `;
-
-export const DefaultBackdrop = styled.div`
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: #27272a;
-  opacity: 0.5;
-  z-index: 10;
-`;

src/hooks/useCountUp.ts → base/hooks/useCountUp.ts

@@ -6,10 +6,16 @@ const easeOutExpo = (rate: number) => {
 };
 
 // 점차 느려지는 count up 함수
-export const useCountUp = (targetNumber: number, duration: number) => {
+export const useCountUp = (
+  targetNumber: number,
+  duration: number,
+  isInView: boolean
+) => {
   const [count, setCount] = useState(0);
 
   useEffect(() => {
+    if (!isInView) return;
+
     const frameRate = 1000 / 60;
     const totalFrame = Math.round(duration / frameRate);
 
@@ -27,7 +33,7 @@ export const useCountUp = (targetNumber: number, duration: number) => {
     return () => {
       clearInterval(counter);
     };
-  }, [duration, targetNumber]);
+  }, [duration, isInView, targetNumber]);
 
   return count;
 };

base/hooks/useCreatePortal.tsx

@@ -0,0 +1,15 @@
+import { useEffect, useState } from 'react';
+import { createPortal } from 'react-dom';
+
+// next js client component should be rendered after window object is created
+// https://stackoverflow.com/questions/75408148/referenceerror-document-is-not-defined-inside-next-js-client-component
+export default function useCreatePortal() {
+  const [isMounted, setIsMounted] = useState(false);
+  useEffect(() => {
+    setIsMounted(true);
+  }, []);
+
+  if (!isMounted) return null;
+
+  return createPortal;
+}

base/hooks/useIntersectionObserver.ts

@@ -0,0 +1,31 @@
+import { useCallback, useEffect, useRef } from 'react';
+
+export const useIntersectionObserver = (
+  onIntersect: (
+    entry: IntersectionObserverEntry,
+    observer: IntersectionObserver
+  ) => void,
+  options?: IntersectionObserverInit
+) => {
+  const ref = useRef<HTMLDivElement>(null);
+
+  const callback = useCallback(
+    (entries: IntersectionObserverEntry[], observer: IntersectionObserver) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) onIntersect(entry, observer);
+      });
+    },
+    [onIntersect]
+  );
+
+  useEffect(() => {
+    if (!ref.current) return;
+
+    const observer = new IntersectionObserver(callback, options);
+    observer.observe(ref.current);
+
+    return () => observer.disconnect();
+  }, [ref, options, callback]);
+
+  return { ref };
+};

base/hooks/useLazyUpdate.tsx

@@ -0,0 +1,24 @@
+import { useEffect, useRef, useState } from 'react';
+
+export interface UseLazyUpateProps<T> {
+  state: T;
+  time?: number;
+}
+
+export default function useLazyUpdate<T>({
+  state,
+  time = 500,
+}: UseLazyUpateProps<T>) {
+  const timeRef = useRef(time);
+  const [localState, setLocalState] = useState(state);
+
+  useEffect(() => {
+    const timoutId = setTimeout(() => setLocalState(state), timeRef.current);
+
+    return () => {
+      clearTimeout(timoutId);
+    };
+  }, [state]);
+
+  return localState;
+}

base/hooks/useModal.tsx

@@ -1,6 +1,6 @@
 import { useCallback, useState } from 'react';
 
-import { isTrue } from '@Base/utils/check';
+import { isNotNil } from '@Base/utils/check';
 
 export interface UseModalProps {
   defaultMessage?: string;
@@ -15,7 +15,7 @@ export function useModal({
   const [message, setMessage] = useState(defaultMessage);
 
   const open = useCallback((message?: string) => {
-    if (isTrue(message)) setMessage(message);
+    if (isNotNil(message)) setMessage(message);
 
     setIsOpen(true);
   }, []);

base/hooks/useTrigger.tsx

@@ -1,31 +1,31 @@
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useRef } from 'react';
 
-import { isFalse } from '@Base/utils/check';
+import { isNil } from '@Base/utils/check';
 
 export interface UseTriggerProps {
   triggerFn?: () => boolean;
   onTrigger?: (reset: () => void) => void;
 }
 
 export function useTrigger({ triggerFn, onTrigger }: UseTriggerProps) {
-  const [isTriggered, setIsTriggered] = useState(false);
+  const isTrigredRef = useRef(false);
 
   const reset = useCallback(() => {
-    setIsTriggered(false);
+    isTrigredRef.current = false;
   }, []);
 
   const trigger = useCallback(() => {
-    setIsTriggered(true);
+    isTrigredRef.current = true;
   }, []);
 
   useEffect(() => {
-    if (isFalse(triggerFn)) return;
+    if (isNil(triggerFn)) return;
 
-    if (triggerFn()) {
-      setIsTriggered(true);
+    if (!isTrigredRef.current && triggerFn()) {
+      isTrigredRef.current = true;
       onTrigger?.(reset);
     }
   }, [onTrigger, reset, triggerFn]);
 
-  return { isTriggered, reset, trigger };
+  return { isTriggered: isTrigredRef.current, reset, trigger };
 }

base/utils/check.ts

@@ -1,22 +1,22 @@
-/**
- * checking object if is null + undefined or not
- * if object is 0, this functions consider as true
- */
-export function isFalse<T>(obj: T | undefined | null): obj is undefined | null {
-  if (obj === undefined || obj === null) return true;
-
-  return false;
-}
-
-/**
- * checking object if is null + undefined or not
- * if object is 0, this functions consider as true
- */
-export function isTrue<T>(obj: T | undefined | null): obj is T {
-  return !isFalse(obj);
-}
-
-export function isEmpty<T extends string | Array<unknown>>(obj: T) {
-  if (obj.length === 0) return true;
-  return false;
-}
+/**
+ * checking object if is null + undefined or not
+ * if object is 0, this functions consider as true
+ */
+export function isNil<T>(obj: T | undefined | null): obj is undefined | null {
+  if (obj === undefined || obj === null) return true;
+
+  return false;
+}
+
+/**
+ * checking object if is null + undefined or not
+ * if object is 0, this functions consider as true
+ */
+export function isNotNil<T>(obj: T | undefined | null): obj is T {
+  return !isNil(obj);
+}
+
+export function isEmpty<T extends string | Array<unknown>>(obj: T) {
+  if (obj.length === 0) return true;
+  return false;
+}

base/utils/dataExtension.ts

@@ -0,0 +1,11 @@
+import { isNil } from '@Base/utils/check';
+
+export function getRandomId() {
+  return Math.random().toString(16).slice(2);
+}
+
+export function withDefault<T>(obj: T | null | undefined, defaultValue: T): T {
+  if (isNil(obj)) return defaultValue;
+
+  return obj;
+}

base/utils/mediaExtension.ts

@@ -0,0 +1,12 @@
+export async function loadImg(src: string) {
+  return new Promise<HTMLImageElement>((resolve, reject) => {
+    const img = new Image();
+    img.onload = () => {
+      resolve(img);
+    };
+    img.onerror = (err) => {
+      reject(err);
+    };
+    img.src = src;
+  });
+}