비공개 메모 기능 추가 + 아이콘 개선
- 식당별 1:1 비공개 메모 CRUD (user_memos 테이블) - 내 기록에 리뷰/메모 탭 분리 - 백오피스 유저 관리에 메모 수/상세 표시 - 리뷰/메모 작성 시 현재 날짜 기본값 - 지도우선/목록우선 버튼 Material Symbols 아이콘 적용 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
joungmin
194
frontend/src/components/MemoSection.tsx
Normal file
194
frontend/src/components/MemoSection.tsx
Normal file
@@ -0,0 +1,194 @@
|
||||
"use client";
|
||||
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
import { api } from "@/lib/api";
|
||||
import type { Memo } from "@/lib/api";
|
||||
import { useAuth } from "@/lib/auth-context";
|
||||
import Icon from "@/components/Icon";
|
||||
|
||||
interface MemoSectionProps {
|
||||
restaurantId: string;
|
||||
}
|
||||
|
||||
function StarSelector({
|
||||
value,
|
||||
onChange,
|
||||
}: {
|
||||
value: number;
|
||||
onChange: (v: number) => void;
|
||||
}) {
|
||||
return (
|
||||
<div className="flex items-center gap-1">
|
||||
<span className="text-xs text-gray-500 mr-1">별점:</span>
|
||||
{[0.5, 1, 1.5, 2, 2.5, 3, 3.5, 4, 4.5, 5].map((v) => (
|
||||
<button
|
||||
key={v}
|
||||
type="button"
|
||||
onClick={() => onChange(v)}
|
||||
className={`w-6 h-6 text-xs rounded border ${
|
||||
value === v
|
||||
? "bg-yellow-500 text-white border-yellow-600"
|
||||
: "bg-white text-gray-600 border-gray-300 hover:border-yellow-400"
|
||||
}`}
|
||||
>
|
||||
{v}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function StarDisplay({ rating }: { rating: number }) {
|
||||
const stars = [];
|
||||
for (let i = 1; i <= 5; i++) {
|
||||
stars.push(
|
||||
<span key={i} className={rating >= i - 0.5 ? "text-yellow-500" : "text-gray-300"}>
|
||||
★
|
||||
</span>
|
||||
);
|
||||
}
|
||||
return <span className="text-sm">{stars}</span>;
|
||||
}
|
||||
|
||||
export default function MemoSection({ restaurantId }: MemoSectionProps) {
|
||||
const { user } = useAuth();
|
||||
const [memo, setMemo] = useState<Memo | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [showForm, setShowForm] = useState(false);
|
||||
const [editing, setEditing] = useState(false);
|
||||
|
||||
// Form state
|
||||
const [rating, setRating] = useState(3);
|
||||
const [text, setText] = useState("");
|
||||
const [visitedAt, setVisitedAt] = useState(new Date().toISOString().slice(0, 10));
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
|
||||
const loadMemo = useCallback(() => {
|
||||
if (!user) { setLoading(false); return; }
|
||||
setLoading(true);
|
||||
api.getMemo(restaurantId)
|
||||
.then(setMemo)
|
||||
.catch(() => setMemo(null))
|
||||
.finally(() => setLoading(false));
|
||||
}, [restaurantId, user]);
|
||||
|
||||
useEffect(() => {
|
||||
loadMemo();
|
||||
}, [loadMemo]);
|
||||
|
||||
if (!user) return null;
|
||||
|
||||
const startEdit = () => {
|
||||
if (memo) {
|
||||
setRating(memo.rating || 3);
|
||||
setText(memo.memo_text || "");
|
||||
setVisitedAt(memo.visited_at || new Date().toISOString().slice(0, 10));
|
||||
} else {
|
||||
setRating(3);
|
||||
setText("");
|
||||
setVisitedAt(new Date().toISOString().slice(0, 10));
|
||||
}
|
||||
setEditing(true);
|
||||
setShowForm(true);
|
||||
};
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setSubmitting(true);
|
||||
try {
|
||||
const saved = await api.upsertMemo(restaurantId, {
|
||||
rating,
|
||||
memo_text: text || undefined,
|
||||
visited_at: visitedAt || undefined,
|
||||
});
|
||||
setMemo(saved);
|
||||
setShowForm(false);
|
||||
setEditing(false);
|
||||
} finally {
|
||||
setSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDelete = async () => {
|
||||
if (!confirm("메모를 삭제하시겠습니까?")) return;
|
||||
await api.deleteMemo(restaurantId);
|
||||
setMemo(null);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="mt-4">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<Icon name="edit_note" size={18} className="text-brand-600" />
|
||||
<h3 className="font-semibold text-sm">내 메모</h3>
|
||||
<span className="text-[10px] text-gray-400 bg-gray-100 px-1.5 py-0.5 rounded">비공개</span>
|
||||
</div>
|
||||
|
||||
{loading ? (
|
||||
<div className="animate-pulse space-y-2">
|
||||
<div className="h-3 w-32 bg-gray-200 rounded" />
|
||||
<div className="h-3 w-full bg-gray-200 rounded" />
|
||||
</div>
|
||||
) : showForm ? (
|
||||
<form onSubmit={handleSubmit} className="space-y-3 border border-brand-200 rounded-lg p-3 bg-brand-50/30">
|
||||
<StarSelector value={rating} onChange={setRating} />
|
||||
<textarea
|
||||
value={text}
|
||||
onChange={(e) => setText(e.target.value)}
|
||||
placeholder="나만의 메모를 작성하세요 (선택)"
|
||||
className="w-full border rounded p-2 text-sm resize-none"
|
||||
rows={3}
|
||||
/>
|
||||
<div className="flex items-center gap-2">
|
||||
<label className="text-xs text-gray-500">방문일:</label>
|
||||
<input
|
||||
type="date"
|
||||
value={visitedAt}
|
||||
onChange={(e) => setVisitedAt(e.target.value)}
|
||||
className="border rounded px-2 py-1 text-xs"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
type="submit"
|
||||
disabled={submitting}
|
||||
className="px-3 py-1 bg-brand-500 text-white text-sm rounded hover:bg-brand-600 disabled:opacity-50"
|
||||
>
|
||||
{submitting ? "저장 중..." : editing && memo ? "수정" : "저장"}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => { setShowForm(false); setEditing(false); }}
|
||||
className="px-3 py-1 bg-gray-200 text-gray-700 text-sm rounded hover:bg-gray-300"
|
||||
>
|
||||
취소
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
) : memo ? (
|
||||
<div className="border border-brand-200 rounded-lg p-3 bg-brand-50/30">
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
{memo.rating && <StarDisplay rating={memo.rating} />}
|
||||
{memo.visited_at && (
|
||||
<span className="text-xs text-gray-400">방문일: {memo.visited_at}</span>
|
||||
)}
|
||||
</div>
|
||||
{memo.memo_text && (
|
||||
<p className="text-sm text-gray-700 mt-1">{memo.memo_text}</p>
|
||||
)}
|
||||
<div className="flex gap-2 mt-2">
|
||||
<button onClick={startEdit} className="text-xs text-blue-600 hover:underline">수정</button>
|
||||
<button onClick={handleDelete} className="text-xs text-red-600 hover:underline">삭제</button>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<button
|
||||
onClick={startEdit}
|
||||
className="px-3 py-1.5 border border-dashed border-brand-300 text-brand-600 text-sm rounded-lg hover:bg-brand-50 transition-colors"
|
||||
>
|
||||
<Icon name="add" size={14} className="mr-0.5" />
|
||||
메모 작성
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user