Refactor: type 정리

src/components/asset/Asset/index.tsx

@@ -1,4 +1,4 @@
-import { AssetType } from '@/types'
+import { AssetType, BreakpointType } from '@/types'
 import { Layout } from 'react-grid-layout'
 import GithubAsset from '../GithubAsset'
 import TextAsset from '../TextAsset'
@@ -7,7 +7,7 @@ import CardAsset from '../CardAsset'
 
 interface AssetProps {
   asset: AssetType
-  breakpoint: string
+  breakpoint: BreakpointType
   layout: Layout | undefined
 }
 

src/components/asset/AssetEditor/index.tsx

@@ -1,4 +1,4 @@
-import { AssetType } from '@/types'
+import { AssetType, BreakpointType, CommandType } from '@/types'
 import { Layout } from 'react-grid-layout'
 import ImageAssetEditor from '../ImageAssetEditor'
 import GithubAssetEditor from '../GithubAssetEditor'
@@ -7,14 +7,10 @@ import CardAssetEditor from '../CardAssetEditor'
 
 interface AssetEditorProps {
   asset: AssetType
-  breakpoint: string
+  breakpoint: BreakpointType
   layout?: Layout
   onUpdate: (updatedAsset: AssetType) => void
-  onDelete: (
-    id: string,
-    layoutId: string,
-    command?: 'save' | 'update' | 'delete',
-  ) => void
+  onDelete: (id: string, layoutId: string, command?: CommandType) => void
   onChangeEditMode: () => void
 }
 

src/components/asset/CardAsset/index.tsx

@@ -1,13 +1,13 @@
-import { AssetType } from '@/types'
+import { BreakpointType, CardAssetType } from '@/types'
 import Image from 'next/image'
 import Link from 'next/link'
 import { TbLink } from 'react-icons/tb'
 
 interface CardAssetProps {
-  asset: AssetType
+  asset: CardAssetType
   width: number
   height: number
-  breakpoint: string
+  breakpoint: BreakpointType
 }
 
 function CardAsset({ asset, width, height, breakpoint }: CardAssetProps) {

src/components/asset/CardAssetEditor/index.tsx

@@ -1,4 +1,4 @@
-import { AssetType } from '@/types'
+import { BreakpointType, CardAssetType, CommandType } from '@/types'
 import { useRef, useState } from 'react'
 import { TbLink, TbCrop, TbPhotoEdit, TbPhotoPlus } from 'react-icons/tb'
 import { useRecoilState } from 'recoil'
@@ -13,16 +13,12 @@ import InputToolbar from '../../toolbar/InputToolbar'
 import ImageCropModal from '../../modal/ImageCropModal'
 
 interface CardAssetEditorProps {
-  asset: AssetType
+  asset: CardAssetType
   width: number
   height: number
-  breakpoint: string
-  onUpdate: (updatedAsset: AssetType) => void
-  onDelete: (
-    id: string,
-    layoutId: string,
-    command?: 'save' | 'update' | 'delete',
-  ) => void
+  breakpoint: BreakpointType
+  onUpdate: (updatedAsset: CardAssetType) => void
+  onDelete: (id: string, layoutId: string, command?: CommandType) => void
   onChangeEditMode: () => void
 }
 

src/components/asset/GithubAsset/index.tsx

@@ -1,9 +1,9 @@
-import { Activity, AssetType } from '@/types'
+import { Activity, GithubAssetType } from '@/types'
 import GitHubCalendar from 'react-github-calendar'
 import Link from 'next/link'
 
 interface GithubAssetProps {
-  asset: AssetType
+  asset: GithubAssetType
   width: number
 }
 

src/components/asset/GithubAssetEditor/index.tsx

@@ -1,4 +1,4 @@
-import { Activity, AssetType } from '@/types'
+import { Activity, CommandType, GithubAssetType } from '@/types'
 import { useMemo, useState } from 'react'
 import GitHubCalendar from 'react-github-calendar'
 import { useRecoilState } from 'recoil'
@@ -10,14 +10,10 @@ import DeleteGridItemButton from '../DeleteGridItemButton'
 import InputToolbar from '../../toolbar/InputToolbar'
 
 interface GithubAssetEditorProps {
-  asset: AssetType
+  asset: GithubAssetType
   width: number
-  onUpdate: (updatedAsset: AssetType) => void
-  onDelete: (
-    id: string,
-    layoutId: string,
-    command?: 'save' | 'update' | 'delete',
-  ) => void
+  onUpdate: (updatedAsset: GithubAssetType) => void
+  onDelete: (id: string, layoutId: string, command?: CommandType) => void
 }
 
 function GithubAssetEditor({

src/components/asset/ImageAsset/index.tsx

@@ -1,10 +1,10 @@
-import { AssetType } from '@/types'
+import { BreakpointType, ImageAssetType } from '@/types'
 import { TbLink } from 'react-icons/tb'
 import Image from 'next/image'
 
 interface ImageAssetProps {
-  breakpoint: string
-  asset: AssetType
+  breakpoint: BreakpointType
+  asset: ImageAssetType
 }
 
 function ImageAsset({ asset, breakpoint }: ImageAssetProps) {

src/components/asset/ImageAssetEditor/index.tsx

@@ -1,4 +1,4 @@
-import { AssetType } from '@/types'
+import { BreakpointType, CommandType, ImageAssetType } from '@/types'
 import { useState, useRef } from 'react'
 import { TbLink, TbCrop, TbPhotoPlus } from 'react-icons/tb'
 import useToggle from '@/hooks/useToggle'
@@ -14,16 +14,12 @@ import InputToolbar from '../../toolbar/InputToolbar'
 import ImageCropModal from '../../modal/ImageCropModal'
 
 interface ImageAssetEditorProps {
-  asset: AssetType
+  asset: ImageAssetType
   w: number
   h: number
-  breakpoint: string
-  onUpdate: (updatedAsset: AssetType) => void
-  onDelete: (
-    id: string,
-    layoutId: string,
-    command?: 'save' | 'update' | 'delete',
-  ) => void
+  breakpoint: BreakpointType
+  onUpdate: (updatedAsset: ImageAssetType) => void
+  onDelete: (id: string, layoutId: string, command?: CommandType) => void
   onChangeEditMode: () => void
 }
 

src/components/asset/TextAsset/index.tsx

@@ -1,8 +1,8 @@
-import { AssetType } from '@/types'
+import { TextAssetType } from '@/types'
 import 'react-quill/dist/quill.snow.css'
 
 interface TextAssetProps {
-  asset: AssetType
+  asset: TextAssetType
 }
 
 function TextAsset({ asset }: TextAssetProps) {

src/components/asset/TextAssetEditor/index.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react'
-import { AssetType } from '@/types'
+import { CommandType, TextAssetType } from '@/types'
 import dynamic from 'next/dynamic'
 import 'react-quill/dist/quill.snow.css'
 import { useRecoilState } from 'recoil'
@@ -38,13 +38,9 @@ const formats = [
 ]
 
 interface TextAssetEditorProps {
-  asset: AssetType
-  onUpdate: (updatedAsset: AssetType) => void
-  onDelete: (
-    id: string,
-    layoutId: string,
-    command?: 'save' | 'update' | 'delete',
-  ) => void
+  asset: TextAssetType
+  onUpdate: (updatedAsset: TextAssetType) => void
+  onDelete: (id: string, layoutId: string, command?: CommandType) => void
   onChangeEditMode: () => void
 }
 

src/components/toolbar/Toolbar/index.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react'
 import { FaGithub } from 'react-icons/fa6'
 import useOutsideClick from '@/hooks/useOutsideClick'
-import { ToolType } from '@/types'
+import { AssetType, BreakpointType, ToolType } from '@/types'
 import {
   TbEdit,
   TbSlideshow,
@@ -13,10 +13,9 @@ import InputToolbar from '../InputToolbar'
 
 interface ToolbarProps {
   isMobileMode: boolean
-  breakpoint: string
+  breakpoint: BreakpointType
   toggleMobileMode: () => void
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  onAdd: (name: ToolType, value?: any) => void
+  onAdd: (name: ToolType, value: AssetType['value']) => void
 }
 
 function Toolbar({
@@ -75,7 +74,7 @@ function Toolbar({
         className="p-1 rounded-lg hover:bg-gray-200 active:bg-gray-200"
         aria-label="content"
         onClick={() => {
-          onAdd('content', { content: null })
+          onAdd('content', { content: '' })
           resetToolbar()
         }}
       >
@@ -89,9 +88,10 @@ function Toolbar({
         onClick={() => {
           onAdd('card', {
             imageUrl: '',
+            link: '',
+            pos: { md: { x: 50, y: 50 }, lg: { x: 50, y: 50 } },
             title: '',
             description: '',
-            link: '',
           })
           resetToolbar()
         }}

src/containers/portfolio/AssetGridLayout.tsx

@@ -3,7 +3,7 @@
 import Logo from '@/components/common/Logo'
 import Asset from '@/components/asset/Asset'
 import { LG_BREAKPOINT, MD_BREAKPOINT } from '@/constants/layout'
-import { UserData } from '@/types'
+import { BreakpointType, UserData } from '@/types'
 import { useEffect, useMemo, useState } from 'react'
 import { Layouts, Responsive, WidthProvider } from 'react-grid-layout'
 import Link from 'next/link'
@@ -16,7 +16,7 @@ interface AssetGridLayoutProps {
 }
 
 function AssetGridLayout({ portfolio, layouts }: AssetGridLayoutProps) {
-  const [breakpoint, setBreakpoint] = useState('')
+  const [breakpoint, setBreakpoint] = useState<BreakpointType | null>(null)
   const [rowHeight, setRowHeight] = useState(168)
 
   useEffect(() => {
@@ -31,6 +31,7 @@ function AssetGridLayout({ portfolio, layouts }: AssetGridLayoutProps) {
 
   const assetsGrid = useMemo(
     () =>
+      breakpoint &&
       portfolio.assets.map((asset) => (
         <div key={asset.layoutId} className="flex">
           <Asset
@@ -60,7 +61,7 @@ function AssetGridLayout({ portfolio, layouts }: AssetGridLayoutProps) {
           isDraggable={false}
           isResizable={false}
           onBreakpointChange={(newBreakpoint) => {
-            setBreakpoint(newBreakpoint)
+            setBreakpoint(newBreakpoint as BreakpointType)
           }}
           onWidthChange={(width, margin, cols) => {
             setRowHeight((width - (cols + 1) * margin[0]) / cols)

src/containers/portfolio/AssetGridLayoutEditor.tsx

@@ -8,7 +8,13 @@ import {
 } from '@/constants/layout'
 import useToggle from '@/hooks/useToggle'
 import activeAssetIdState from '@/recoil/atoms/activeAssetState'
-import { AssetType, ToolType, UserData } from '@/types'
+import {
+  AssetType,
+  BreakpointType,
+  CommandType,
+  ToolType,
+  UserData,
+} from '@/types'
 import { useEffect, useState } from 'react'
 import { Layouts, Responsive, WidthProvider } from 'react-grid-layout'
 import { useRecoilValue } from 'recoil'
@@ -18,13 +24,9 @@ const ResponsiveGridLayout = WidthProvider(Responsive)
 interface AssetGridLayoutEditorProps {
   portfolio: UserData
   layouts?: Layouts
-  onAdd: (name: ToolType, value?: string) => void
+  onAdd: (name: ToolType, value: AssetType['value']) => void
   onUpdate: (updatedAsset: AssetType) => void
-  onDelete: (
-    id: string,
-    layoutId: string,
-    command?: 'save' | 'update' | 'delete',
-  ) => void
+  onDelete: (id: string, layoutId: string, command?: CommandType) => void
   onLayoutChange: (currentLayout: Layouts) => void
 }
 
@@ -36,7 +38,7 @@ function AssetGridLayoutEditor({
   onDelete,
   onLayoutChange,
 }: AssetGridLayoutEditorProps) {
-  const [breakpoint, setBreakpoint] = useState('')
+  const [breakpoint, setBreakpoint] = useState<BreakpointType | null>(null)
   const [rowHeight, setRowHeight] = useState(168)
   const [isEditMode, toggle] = useToggle(false)
   const [isMobileMode, setIsMobileMode] = useState(false)
@@ -65,6 +67,8 @@ function AssetGridLayoutEditor({
     }
   }, [isMobileMode])
 
+  if (!breakpoint) return null
+
   return (
     <div className="w-full md:ml-80">
       <div
@@ -88,7 +92,7 @@ function AssetGridLayoutEditor({
           draggableCancel={PREVENT_DRAG_DEFAULTS.join(',')}
           resizeHandle={<ResizeHandler handleAxis="se" />}
           onBreakpointChange={(newBreakpoint) => {
-            setBreakpoint(newBreakpoint)
+            setBreakpoint(newBreakpoint as BreakpointType)
           }}
           onLayoutChange={(_, currentLayout) => {
             onLayoutChange(currentLayout)

src/containers/portfolio/PortfolioEditor.tsx

@@ -1,7 +1,14 @@
 'use client'
 
 import 'react-grid-layout/css/styles.css'
-import { AssetType, SocialLinks, ToolType, UserData } from '@/types'
+import {
+  AssetType,
+  AssetValueType,
+  CommandType,
+  SocialLinks,
+  ToolType,
+  UserData,
+} from '@/types'
 import React, { useEffect, useState } from 'react'
 import { Layouts } from 'react-grid-layout'
 import { v4 as uuidv4 } from 'uuid'
@@ -90,21 +97,18 @@ export default function PortfolioEditor({ username }: PortfolioEditorProps) {
     return null
   }
 
-  const handleAdd = (name: ToolType, value?: string) => {
-    const id = uuidv4()
-    const layoutId = uuidv4()
+  const handleAdd = (name: ToolType, value: AssetValueType) => {
+    const newAsset = {
+      id: uuidv4(),
+      layoutId: uuidv4(),
+      type: name,
+      command: 'save',
+      value,
+    } as AssetType
+
     setPortfolio({
       ...portfolio,
-      assets: [
-        ...portfolio.assets,
-        {
-          id,
-          layoutId,
-          type: name,
-          command: 'save',
-          value,
-        },
-      ],
+      assets: [...portfolio.assets, newAsset],
     })
   }
 
@@ -138,7 +142,7 @@ export default function PortfolioEditor({ username }: PortfolioEditorProps) {
   const handleDelete = (
     id: string,
     layoutId: string,
-    command?: 'save' | 'update' | 'delete',
+    command?: CommandType,
   ) => {
     if (command === 'save') {
       // 새로 저장된 경우 filter로 삭제