hom-add-func-56 <- hom-add-func#56

src/components/common/CardView.tsx

@@ -0,0 +1,45 @@
+import type { Key, ReactNode } from 'react';
+
+import clsx from 'clsx';
+
+export interface CardViewProps<T> {
+  items: readonly T[];
+  getKey: (item: T, index: number) => Key;
+
+  renderCard: (item: T) => ReactNode;
+
+  className?: string;
+  itemClassName?: string;
+  empty?: ReactNode;
+  ariaLabel?: string;
+}
+
+export function CardView<T>({
+  items,
+  getKey,
+  renderCard,
+  className,
+  itemClassName,
+  empty,
+  ariaLabel,
+}: CardViewProps<T>) {
+  if (items.length === 0) {
+    return <div className="cardView__empty">{empty ?? 'No items'}</div>;
+  }
+
+  return (
+    <div className={clsx('cardView', className)} role="list" aria-label={ariaLabel}>
+      {items.map((item, index) => (
+        <div
+          key={getKey(item, index)}
+          className={clsx('cardView__item', itemClassName)}
+          role="listitem"
+        >
+          {renderCard(item)}
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export default CardView;

src/components/common/FileDropzone.tsx

@@ -1,5 +1,7 @@
 import { useRef, useState } from 'react';
 
+import clsx from 'clsx';
+
 import UploadIcon from '@/assets/icons/icon-upload.svg?react';
 import type { FileDropProps } from '@/types/uploadFile';
 
@@ -13,6 +15,8 @@ export default function FileDropzone({
   progress = 0,
 }: FileDropProps) {
   const inputRef = useRef<HTMLInputElement | null>(null);
+  // dragCounter : 실제로 영역을 완전히 벗어났을 때만 카운터를 false로 바꿈
+  const dragCounter = useRef(0);
   const [isDragging, setIsDragging] = useState(false);
 
   const openFileDialog = () => {
@@ -27,21 +31,34 @@ export default function FileDropzone({
     onFilesSelected(files);
   };
 
-  const handleDragEnterOrOver = (e: React.DragEvent<HTMLButtonElement>) => {
+  const handleDragEnter = (e: React.DragEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (disabled) return;
+    // 드래그가 영역 안에 있는 동안 지속적으로 true 유지
+    dragCounter.current += 1;
+    setIsDragging(true);
+  };
+
+  const handleDragOver = (e: React.DragEvent<HTMLButtonElement>) => {
     e.preventDefault();
     e.stopPropagation();
-    if (!disabled) setIsDragging(true);
   };
 
   const handleDragLeave = (e: React.DragEvent<HTMLButtonElement>) => {
     e.preventDefault();
     e.stopPropagation();
-    setIsDragging(false);
+    if (disabled) return;
+    // 자식 요소 진입/이탈에서 발생하는 잦은 leave 이벤트로 하이라이트가 꺼지는 현상을 방지
+    dragCounter.current = Math.max(0, dragCounter.current - 1);
+    if (dragCounter.current === 0) setIsDragging(false);
   };
 
   const handleDrop = (e: React.DragEvent<HTMLButtonElement>) => {
     e.preventDefault();
     e.stopPropagation();
+    // 드롭 시 카운터 초기화해서 다음 드래그 상태가 꼬이지 않도록 함
+    dragCounter.current = 0;
     setIsDragging(false);
     handleFiles(e.dataTransfer.files);
   };
@@ -64,27 +81,24 @@ export default function FileDropzone({
         type="button"
         onClick={openFileDialog}
         disabled={disabled}
-        onDragEnter={handleDragEnterOrOver}
-        onDragOver={handleDragEnterOrOver}
+        onDragEnter={handleDragEnter}
+        onDragOver={handleDragOver}
         onDragLeave={handleDragLeave}
         onDrop={handleDrop}
-        className={[
+        className={clsx(
           'group relative w-full overflow-hidden rounded-2xl border bg-white px-8 py-14 shadow-sm transition focus:ring-1 focus:ring-gray-200',
           disabled ? 'cursor-not-allowed opacity-60' : 'cursor-pointer hover:bg-gray-100',
           showDragOverlay ? 'border-gray-900 ring-1 ring-gray-200' : 'border-gray-200',
-        ].join(' ')}
+        )}
       >
         {/* 드래그/업로드 중이면 블러/흐리게 */}
         <div
-          className={[
+          className={clsx(
             'flex flex-col items-center gap-4 transition',
-            showDragOverlay || showUploadOverlay ? 'blur-sm opacity-40' : '',
-          ].join(' ')}
+            (showDragOverlay || showUploadOverlay) && 'blur-sm opacity-40',
+          )}
         >
-          <div
-            className="flex h-12 w-12 items-center justify-center rounded-full bg-gray-800
-                      transition group-hover:bg-gray-900"
-          >
+          <div className="flex h-12 w-12 items-center justify-center rounded-full bg-gray-800 transition group-hover:bg-gray-900">
             <UploadIcon className="h-5 w-5 text-white" />
           </div>
           <div className="space-y-2 text-center">

src/components/common/ListView.tsx

@@ -0,0 +1,55 @@
+import type { Key, ReactNode } from 'react';
+
+import clsx from 'clsx';
+
+export interface ListViewProps<T> {
+  items: readonly T[];
+  getKey: (item: T, index: number) => Key;
+
+  renderLeading?: (item: T) => ReactNode;
+  renderTrailing?: (item: T) => ReactNode;
+  renderInfo: (item: T) => ReactNode;
+
+  className?: string;
+  itemClassName?: string;
+  empty?: ReactNode;
+  ariaLabel?: string;
+}
+
+export function ListView<T>({
+  items,
+  getKey,
+  renderLeading,
+  renderTrailing,
+  renderInfo,
+  className,
+  itemClassName,
+  empty,
+  ariaLabel,
+}: ListViewProps<T>) {
+  if (items.length === 0) {
+    return <div className="listView__empty">{empty ?? 'No items'}</div>;
+  }
+
+  return (
+    <div className={clsx('listView', className)} role="list" aria-label={ariaLabel}>
+      {items.map((item, index) => (
+        <div
+          key={getKey(item, index)}
+          className={clsx('listView__item', itemClassName)}
+          role="listitem"
+        >
+          {renderLeading && <div className="listView__leading">{renderLeading(item)}</div>}
+
+          <div className="listView__content">{renderInfo(item)}</div>
+
+          {renderTrailing && (
+            <div className="listView__trailing ml-auto shrink-0">{renderTrailing(item)}</div>
+          )}
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export default ListView;

src/components/common/index.ts

@@ -16,3 +16,5 @@ export { default as SlideImage } from './SlideImage';
 export { Spinner } from './Spinner';
 export { default as FileDropzone } from './FileDropzone';
 export { default as ProgressBar } from './ProgressBar';
+export { default as ListView } from './ListView';
+export { default as CardView } from './CardView';

src/components/home/ProjectsSection.tsx

@@ -1,20 +1,36 @@
-import type { CardItems } from '@/types/project';
+import { useState } from 'react';
 
+import type { ViewMode } from '@/types/home';
+import type { ProjectItem } from '@/types/project';
+
+import { CardView, Modal } from '../common';
 import ProjectCard from '../projects/ProjectCard';
 import { ProjectCardSkeleton } from '../projects/ProjectCardSkeleton';
 import ProjectHeader from '../projects/ProjectHeader';
+import ProjectList from '../projects/ProjectList';
 
 const SKELETON_CARD_COUNT = 9;
+const SKELETON_LIST_COUNT = 6;
 
 type Props = {
   isLoading: boolean;
   query: string;
   onChangeQuery: (value: string) => void;
-  projects: CardItems[];
+  projects: ProjectItem[];
+  viewMode: ViewMode;
+  onChangeViewMode: (viewMode: ViewMode) => void;
 };
 
-export default function ProjectsSection({ isLoading, query, onChangeQuery, projects }: Props) {
+export default function ProjectsSection({
+  isLoading,
+  query,
+  onChangeQuery,
+  projects,
+  viewMode,
+  onChangeViewMode,
+}: Props) {
   const hasProjects = projects.length > 0;
+  const [deleteTarget, setDeleteTarget] = useState<ProjectItem | null>(null);
 
   if (!isLoading && !hasProjects) return null;
 
@@ -26,16 +42,75 @@ export default function ProjectsSection({ isLoading, query, onChangeQuery, proje
       </div>
 
       {/* 검색 */}
-      <ProjectHeader value={query} onChange={onChangeQuery} />
+      <ProjectHeader
+        value={query}
+        onChange={onChangeQuery}
+        viewMode={viewMode}
+        onChangeViewMode={onChangeViewMode}
+      />
 
-      {/* 프레젠테이션 목록 */}
-      <div className="mt-6 grid grid-cols-2 gap-4 lg:grid-cols-3">
-        {isLoading
-          ? Array.from({ length: SKELETON_CARD_COUNT }).map((_, index) => (
+      {viewMode === 'card' ? (
+        isLoading ? (
+          <div className="mt-6 grid grid-cols-2 gap-4 lg:grid-cols-3">
+            {Array.from({ length: SKELETON_CARD_COUNT }).map((_, index) => (
               <ProjectCardSkeleton key={index} />
-            ))
-          : projects.map((project) => <ProjectCard key={project.id} {...project} />)}
-      </div>
+            ))}
+          </div>
+        ) : (
+          <CardView
+            items={projects}
+            getKey={(item) => item.id}
+            className="mt-6 grid grid-cols-2 gap-4 lg:grid-cols-3"
+            renderCard={(item) => (
+              <ProjectCard item={item} onDeleteClick={(target) => setDeleteTarget(target)} />
+            )}
+          />
+        )
+      ) : isLoading ? (
+        <div className="mt-6 flex flex-col gap-3">
+          {Array.from({ length: SKELETON_LIST_COUNT }).map((_, index) => (
+            <div
+              key={index}
+              className="h-20 rounded-2xl border border-gray-200 bg-white p-4 animate-pulse"
+            />
+          ))}
+        </div>
+      ) : (
+        <ProjectList items={projects} className="mt-6" onDeleteClick={setDeleteTarget} />
+      )}
+
+      <Modal
+        isOpen={Boolean(deleteTarget)}
+        onClose={() => setDeleteTarget(null)}
+        title="발표 삭제"
+        size="sm"
+      >
+        <div className="flex flex-col gap-1">
+          <p className="text-body-m-bold">{deleteTarget?.title}</p>
+          <p className="text-body-m">해당 발표를 정말 삭제하시겠습니까?</p>
+        </div>
+
+        <div className="mt-7 flex items-center justify-center gap-3 text-body-s">
+          <button
+            className="flex-1 rounded-lg bg-gray-200 py-3 text-main"
+            type="button"
+            onClick={() => setDeleteTarget(null)}
+          >
+            취소
+          </button>
+          <button
+            className="flex-1 rounded-lg py-3 bg-main text-gray-100"
+            type="button"
+            onClick={() => {
+              // TODO : 실제 삭제 호출 : deleteTarget?.id
+              // 서버/스토어 붙이면 여기에서 mutation 호출하고 성공 시 목록 갱신
+              setDeleteTarget(null);
+            }}
+          >
+            삭제
+          </button>
+        </div>
+      </Modal>
     </section>
   );
 }