Feature/bookmark

src/components/bookmarks/BookmarkForm.tsx

@@ -0,0 +1,175 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { BookmarkFormData, Bookmark } from '@/types/bookmark';
+
+interface BookmarkFormProps {
+  bookmark?: Bookmark; // 수정 모드일 때 전달
+  onSubmit: (data: BookmarkFormData) => Promise<void>;
+  onCancel: () => void;
+  isLoading?: boolean;
+}
+
+export default function BookmarkForm({
+  bookmark,
+  onSubmit,
+  onCancel,
+  isLoading,
+}: BookmarkFormProps) {
+  const [formData, setFormData] = useState<BookmarkFormData>({
+    custom_name: '',
+    custom_url: '',
+    favicon: '',
+  });
+
+  const [errors, setErrors] = useState<Partial<BookmarkFormData>>({});
+
+  useEffect(() => {
+    if (bookmark) {
+      setFormData({
+        custom_name: bookmark.custom_name,
+        custom_url: bookmark.custom_url,
+        favicon: bookmark.favicon || '',
+      });
+    }
+  }, [bookmark]);
+
+  const validateForm = (): boolean => {
+    const newErrors: Partial<BookmarkFormData> = {};
+
+    if (!formData.custom_name.trim()) {
+      newErrors.custom_name = '북마크 이름을 입력해주세요.';
+    }
+
+    if (!formData.custom_url.trim()) {
+      newErrors.custom_url = 'URL을 입력해주세요.';
+    } else if (!isValidUrl(formData.custom_url)) {
+      newErrors.custom_url = '올바른 URL 형식이 아닙니다.';
+    }
+
+    setErrors(newErrors);
+    return Object.keys(newErrors).length === 0;
+  };
+
+  const isValidUrl = (url: string): boolean => {
+    try {
+      new URL(url);
+      return true;
+    } catch {
+      return false;
+    }
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+
+    if (!validateForm()) return;
+
+    try {
+      await onSubmit(formData);
+    } catch (error) {
+      console.error('Form submission error:', error);
+    }
+  };
+
+  const handleChange = (field: keyof BookmarkFormData, value: string) => {
+    setFormData((prev: BookmarkFormData) => ({ ...prev, [field]: value }));
+    // 에러가 있었다면 입력시 제거
+    if (errors[field]) {
+      setErrors((prev: Partial<BookmarkFormData>) => ({
+        ...prev,
+        [field]: undefined,
+      }));
+    }
+  };
+
+  return (
+    <form onSubmit={handleSubmit} className="space-y-4">
+      {/* 북마크 이름 */}
+      <div>
+        <label
+          htmlFor="custom_name"
+          className="block text-sm font-medium text-gray-700 mb-1"
+        >
+          북마크 이름 *
+        </label>
+        <input
+          id="custom_name"
+          type="text"
+          value={formData.custom_name}
+          onChange={(e) => handleChange('custom_name', e.target.value)}
+          className={`w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 ${
+            errors.custom_name ? 'border-red-500' : 'border-gray-300'
+          }`}
+          placeholder="예: 인터파크 티켓"
+          disabled={isLoading}
+        />
+        {errors.custom_name && (
+          <p className="mt-1 text-sm text-red-600">{errors.custom_name}</p>
+        )}
+      </div>
+
+      {/* URL */}
+      <div>
+        <label
+          htmlFor="custom_url"
+          className="block text-sm font-medium text-gray-700 mb-1"
+        >
+          URL *
+        </label>
+        <input
+          id="custom_url"
+          type="url"
+          value={formData.custom_url}
+          onChange={(e) => handleChange('custom_url', e.target.value)}
+          className={`w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 ${
+            errors.custom_url ? 'border-red-500' : 'border-gray-300'
+          }`}
+          placeholder="https://example.com"
+          disabled={isLoading}
+        />
+        {errors.custom_url && (
+          <p className="mt-1 text-sm text-red-600">{errors.custom_url}</p>
+        )}
+      </div>
+
+      {/* 파비콘 URL (선택사항) */}
+      <div>
+        <label
+          htmlFor="favicon"
+          className="block text-sm font-medium text-gray-700 mb-1"
+        >
+          파비콘 URL (선택사항)
+        </label>
+        <input
+          id="favicon"
+          type="url"
+          value={formData.favicon}
+          onChange={(e) => handleChange('favicon', e.target.value)}
+          className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+          placeholder="https://example.com/favicon.ico"
+          disabled={isLoading}
+        />
+      </div>
+
+      {/* 버튼들 */}
+      <div className="flex justify-end gap-2 pt-4">
+        <button
+          type="button"
+          onClick={onCancel}
+          disabled={isLoading}
+          className="px-4 py-2 text-sm font-medium text-gray-700 bg-gray-100 border border-gray-300 rounded-md hover:bg-gray-200 disabled:opacity-50"
+        >
+          취소
+        </button>
+        <button
+          type="submit"
+          disabled={isLoading}
+          className="px-4 py-2 text-sm font-medium text-white bg-blue-600 border border-transparent rounded-md hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed"
+        >
+          {isLoading ? '처리중...' : bookmark ? '수정' : '추가'}
+        </button>
+      </div>
+    </form>
+  );
+}

src/components/bookmarks/BookmarkItem.tsx

@@ -0,0 +1,153 @@
+'use client';
+
+import { Bookmark } from '@/types/bookmark';
+
+interface BookmarkItemProps {
+  bookmark: Bookmark;
+  onEdit: (bookmark: Bookmark) => void;
+  onDelete: (id: number) => void;
+  onCheckTime: (bookmark: Bookmark) => void;
+  viewMode: 'grid' | 'list';
+}
+
+export default function BookmarkItem({
+  bookmark,
+  onEdit,
+  onDelete,
+  onCheckTime,
+  viewMode,
+}: BookmarkItemProps) {
+  const getFaviconUrl = (url: string) => {
+    try {
+      const urlObj = new URL(url);
+      return `${urlObj.origin}/favicon.ico`;
+    } catch {
+      return null;
+    }
+  };
+
+  const faviconUrl = getFaviconUrl(bookmark.custom_url);
+
+  if (viewMode === 'list') {
+    return (
+      <div 
+        className="bg-gray-50 border border-gray-200 rounded-xl p-6 hover:border-indigo-500 transition-all cursor-pointer group"
+        onClick={() => onCheckTime(bookmark)}
+      >
+        <div className="flex items-center gap-4">
+          {/* 아이콘 */}
+          <div 
+            className="w-12 h-12 rounded-lg flex items-center justify-center text-xl text-white flex-shrink-0"
+          >
+            {bookmark.favicon && faviconUrl ? (
+              <img 
+                src={faviconUrl} 
+                alt={bookmark.custom_name}
+                className="w-8 h-8 rounded"
+                onError={(e) => {
+                  e.currentTarget.style.display = 'none';
+                  const nextElement = e.currentTarget.nextElementSibling as HTMLElement;
+                  if (nextElement) nextElement.style.display = 'block';
+                }}
+              />
+            ) : null}
+            <span style={{ display: bookmark.favicon && faviconUrl ? 'none' : 'block' }}>
+            </span>
+          </div>
+
+          {/* 내용 */}
+          <div className="flex-1 min-w-0">
+            <h3 className="text-lg font-semibold text-gray-900 truncate">
+              {bookmark.custom_name}
+            </h3>
+            <p className="text-sm text-gray-600 truncate">
+              {bookmark.custom_url}
+            </p>
+          </div>
+
+          {/* 액션 버튼들 */}
+          <div className="flex gap-2">
+            <button
+              onClick={(e) => {
+                e.stopPropagation();
+                onEdit(bookmark);
+              }}
+              className="px-3 py-1.5 text-xs font-medium text-blue-700 bg-blue-50 border border-blue-200 rounded-md hover:bg-blue-100 transition-colors"
+            >
+              수정
+            </button>
+            <button
+              onClick={(e) => {
+                e.stopPropagation();
+                onDelete(bookmark.id);
+              }}
+              className="px-3 py-1.5 text-xs font-medium text-red-700 bg-red-50 border border-red-200 rounded-md hover:bg-red-100 transition-colors"
+            >
+              삭제
+            </button>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  // Grid view
+  return (
+    <div 
+      className="bg-gray-50 border border-gray-200 rounded-xl p-6 text-center hover:border-indigo-500 transition-all cursor-pointer group"
+      onClick={() => onCheckTime(bookmark)}
+    >
+      {/* 아이콘 */}
+      <div 
+        className="w-12 h-12 rounded-lg mx-auto mb-4 flex items-center justify-center text-xl text-white"
+      >
+        {bookmark.favicon && faviconUrl ? (
+          <img 
+            src={faviconUrl} 
+            alt={bookmark.custom_name}
+            className="w-8 h-8 rounded"
+            onError={(e) => {
+              e.currentTarget.style.display = 'none';
+              const nextElement = e.currentTarget.nextElementSibling as HTMLElement;
+              if (nextElement) nextElement.style.display = 'block';
+            }}
+          />
+        ) : null}
+        <span style={{ display: bookmark.favicon && faviconUrl ? 'none' : 'block' }}>
+        </span>
+      </div>
+
+      {/* 제목 */}
+      <h3 className="text-base font-semibold text-gray-900 mb-2 truncate">
+        {bookmark.custom_name}
+      </h3>
+
+      {/* URL */}
+      <p className="text-xs text-gray-600 mb-4 break-all">
+        {bookmark.custom_url}
+      </p>
+
+      {/* 액션 버튼들 */}
+      <div className="flex gap-2 justify-center">
+        <button
+          onClick={(e) => {
+            e.stopPropagation();
+            onEdit(bookmark);
+          }}
+          className="px-2.5 py-1 text-xs font-medium text-blue-700 bg-blue-50 border border-blue-200 rounded hover:bg-blue-100 transition-colors"
+        >
+          수정
+        </button>
+        <button
+          onClick={(e) => {
+            e.stopPropagation();
+            onDelete(bookmark.id);
+          }}
+          className="px-2.5 py-1 text-xs font-medium text-red-700 bg-red-50 border border-red-200 rounded hover:bg-red-100 transition-colors"
+        >
+          삭제
+        </button>
+      </div>
+    </div>
+  );
+}