perf: 타입스크립트 성능 개선 적용 (#203)

apps/web/src/components/atoms/ScrollElement/index.tsx

@@ -1,23 +1,29 @@
 'use client';
 
 import {
-  createElement, JSX, useEffect, useRef,
+  ComponentProps,
+  createElement,
+  ElementType,
+  useEffect,
+  useRef,
 } from 'react';
 
 import clsx from 'clsx';
 
 import styles from './index.module.scss';
 
-type Props<ElementType extends keyof JSX.IntrinsicElements> =
-  JSX.IntrinsicElements[ElementType] & {
-    elementType?: keyof JSX.IntrinsicElements;
-    activeParam: string;
-    targetParam?: string;
-    scrollIntoViewOptions?: ScrollIntoViewOptions;
-  };
+type ScrollElementProps<E extends ElementType> = {
+  elementType?: E;
+  activeParam: string;
+  targetParam?: string;
+  scrollIntoViewOptions?: ScrollIntoViewOptions;
+};
 
-function ScrollElement<E extends keyof JSX.IntrinsicElements>({
-  elementType = 'div', activeParam, children, className, targetParam, scrollIntoViewOptions, ...props
+type Props<E extends ElementType> =
+  ScrollElementProps<E> & Omit<ComponentProps<E>, keyof ScrollElementProps<E>>;
+
+function ScrollElement<E extends ElementType>({
+  elementType, activeParam, children, className, targetParam, scrollIntoViewOptions, ...props
 }: Props<E>) {
   const containerRef = useRef<Element>(null);
 
@@ -29,7 +35,7 @@ function ScrollElement<E extends keyof JSX.IntrinsicElements>({
 
   return (
     createElement(
-      elementType,
+      elementType || 'div',
       {
         ...props,
         ref: containerRef,

apps/web/src/components/molecules/LinkConverter/index.tsx

@@ -1,18 +1,22 @@
-import { createElement, Fragment, JSX } from 'react';
+import {
+  ComponentProps, createElement, ElementType, Fragment,
+} from 'react';
 
 import ExternalLink from '@/components/atoms/ExternalLink';
 
 import styles from './index.module.scss';
 
-type Props<ElementType extends keyof JSX.IntrinsicElements> =
-JSX.IntrinsicElements[ElementType] & {
-  elementType?: keyof JSX.IntrinsicElements;
+type LinkConverterProps<E extends ElementType> = {
+  elementType?: E;
   className?: string;
   text: string;
 };
 
-function LinkConverter<E extends keyof JSX.IntrinsicElements>({
-  className, text, elementType = 'div', ...props
+type Props<E extends ElementType> =
+  LinkConverterProps<E> & Omit<ComponentProps<E>, keyof LinkConverterProps<E>>;
+
+function LinkConverter<E extends ElementType>({
+  className, text, elementType, ...props
 }: Props<E>) {
   const urlRegex = /(https?:\/\/[^\s]+)/g;
 
@@ -27,7 +31,7 @@ function LinkConverter<E extends keyof JSX.IntrinsicElements>({
 
   return (
     createElement(
-      elementType,
+      elementType || 'div',
       {
         ...props,
         className,