diff --git a/src/app/boards/[id]/page.tsx b/src/app/boards/[id]/page.tsx
index 1c7aa9f..4e366e3 100644
--- a/src/app/boards/[id]/page.tsx
+++ b/src/app/boards/[id]/page.tsx
@@ -2,11 +2,15 @@ import { PostList } from "@/app/components/PostList";
export default async function BoardDetail({ params, searchParams }: { params: { id: string }; searchParams?: { sort?: "recent" | "popular" } }) {
const sort = searchParams?.sort ?? "recent";
+ // 보드 slug 조회 (새 글 페이지 프리셋 전달)
+ const res = await fetch(`${process.env.NEXT_PUBLIC_BASE_URL ?? ""}/api/boards`, { cache: "no-store" });
+ const { boards } = await res.json();
+ const board = (boards || []).find((b: any) => b.id === params.id);
return (
diff --git a/src/app/components/UploadButton.tsx b/src/app/components/UploadButton.tsx
index 7b33251..e1bcf90 100644
--- a/src/app/components/UploadButton.tsx
+++ b/src/app/components/UploadButton.tsx
@@ -8,6 +8,8 @@ type Props = {
maxWidth?: number;
maxHeight?: number;
quality?: number; // 0..1
+ aspectRatio?: number; // width/height, e.g., 1 for square, 16/9 for widescreen
+ watermarkText?: string; // optional watermark text
};
async function readFileAsDataUrl(file: File): Promise {
@@ -19,26 +21,61 @@ async function readFileAsDataUrl(file: File): Promise {
});
}
-async function resizeImageToBlob(dataUrl: string, opts: { maxWidth: number; maxHeight: number; quality: number }): Promise {
+function drawWatermark(ctx: CanvasRenderingContext2D, text: string, canvas: HTMLCanvasElement) {
+ const padding = 8;
+ ctx.save();
+ ctx.font = "bold 14px sans-serif";
+ const metrics = ctx.measureText(text);
+ const textW = metrics.width;
+ const textH = 14;
+ const x = canvas.width - textW - padding * 2;
+ const y = canvas.height - textH - padding;
+ ctx.fillStyle = "rgba(0,0,0,0.35)";
+ ctx.fillRect(x - padding, y - padding, textW + padding * 2, textH + padding * 2);
+ ctx.fillStyle = "#fff";
+ ctx.fillText(text, x, y + textH);
+ ctx.restore();
+}
+
+async function transformImageToBlob(
+ dataUrl: string,
+ opts: { maxWidth: number; maxHeight: number; quality: number; aspectRatio?: number; watermarkText?: string }
+): Promise {
const img = document.createElement("img");
img.decoding = "async";
img.loading = "eager";
img.src = dataUrl;
await new Promise((res, rej) => { img.onload = () => res(null); img.onerror = rej; });
- const { naturalWidth: w, naturalHeight: h } = img;
- const scale = Math.min(1, opts.maxWidth / w || 1, opts.maxHeight / h || 1);
- const targetW = Math.max(1, Math.round(w * scale));
- const targetH = Math.max(1, Math.round(h * scale));
+ let srcW = img.naturalWidth || 1;
+ let srcH = img.naturalHeight || 1;
+ let sx = 0, sy = 0, sW = srcW, sH = srcH;
+ if (opts.aspectRatio && opts.aspectRatio > 0) {
+ const targetRatio = opts.aspectRatio;
+ const currentRatio = srcW / srcH;
+ if (currentRatio > targetRatio) {
+ // too wide -> crop width
+ sW = Math.round(srcH * targetRatio);
+ sx = Math.round((srcW - sW) / 2);
+ } else if (currentRatio < targetRatio) {
+ // too tall -> crop height
+ sH = Math.round(srcW / targetRatio);
+ sy = Math.round((srcH - sH) / 2);
+ }
+ }
+ const scale = Math.min(1, opts.maxWidth / sW || 1, opts.maxHeight / sH || 1);
+ const targetW = Math.max(1, Math.round(sW * scale));
+ const targetH = Math.max(1, Math.round(sH * scale));
const canvas = document.createElement("canvas");
canvas.width = targetW;
canvas.height = targetH;
const ctx = canvas.getContext("2d");
if (!ctx) throw new Error("Canvas unsupported");
- ctx.drawImage(img, 0, 0, targetW, targetH);
+ ctx.drawImage(img, sx, sy, sW, sH, 0, 0, targetW, targetH);
+ if (opts.watermarkText) drawWatermark(ctx, opts.watermarkText, canvas);
return await new Promise((resolve) => canvas.toBlob((b) => resolve(b as Blob), "image/webp", opts.quality));
}
-export function UploadButton({ onUploaded, multiple = false, maxWidth = 1600, maxHeight = 1600, quality = 0.9 }: Props) {
+export function UploadButton({ onUploaded, multiple = false, maxWidth = 1600, maxHeight = 1600, quality = 0.9, aspectRatio, watermarkText }: Props) {
const { show } = useToast();
const [loading, setLoading] = useState(false);
async function onChange(e: React.ChangeEvent) {
@@ -49,7 +86,7 @@ export function UploadButton({ onUploaded, multiple = false, maxWidth = 1600, ma
for (const f of files) {
// 클라에서 리사이즈 및 webp 변환
const dataUrl = await readFileAsDataUrl(f);
- const blob = await resizeImageToBlob(dataUrl, { maxWidth, maxHeight, quality });
+ const blob = await transformImageToBlob(dataUrl, { maxWidth, maxHeight, quality, aspectRatio, watermarkText });
const fd = new FormData();
fd.append("file", new File([blob], `${Date.now()}.webp`, { type: "image/webp" }));
const r = await fetch("/api/uploads", { method: "POST", body: fd });
diff --git a/src/app/posts/new/page.tsx b/src/app/posts/new/page.tsx
index 91dd04e..89bd7ea 100644
--- a/src/app/posts/new/page.tsx
+++ b/src/app/posts/new/page.tsx
@@ -5,7 +5,7 @@ import { useToast } from "@/app/components/ui/ToastProvider";
import { UploadButton } from "@/app/components/UploadButton";
import { Editor } from "@/app/components/Editor";
-export default function NewPostPage({ searchParams }: { searchParams?: { boardId?: string } }) {
+export default function NewPostPage({ searchParams }: { searchParams?: { boardId?: string; boardSlug?: string } }) {
const router = useRouter();
const { show } = useToast();
const [form, setForm] = useState({ boardId: searchParams?.boardId ?? "", title: "", content: "" });
@@ -34,7 +34,11 @@ export default function NewPostPage({ searchParams }: { searchParams?: { boardId
setForm({ ...form, boardId: e.target.value })} />
setForm({ ...form, title: e.target.value })} />
setForm({ ...form, content: v })} placeholder="내용을 입력하세요" />
- setForm((f) => ({ ...f, content: `${f.content}\n` }))} />
+ setForm((f) => ({ ...f, content: `${f.content}\n` }))}
+ {...(searchParams?.boardSlug ? require("@/lib/photoPresets").getPhotoPresetBySlug(searchParams.boardSlug) : {})}
+ />
);
diff --git a/src/lib/photoPresets.ts b/src/lib/photoPresets.ts
new file mode 100644
index 0000000..0d1694b
--- /dev/null
+++ b/src/lib/photoPresets.ts
@@ -0,0 +1,23 @@
+export type UploadOptions = {
+ aspectRatio?: number;
+ watermarkText?: string;
+ maxWidth?: number;
+ maxHeight?: number;
+ quality?: number;
+};
+
+const presetsBySlug: Record = {
+ // 제휴업소 사진형 보드: 정사각형 권장, 워터마크 표시
+ "partners-photos": { aspectRatio: 1, watermarkText: "msgapp", maxWidth: 1600, maxHeight: 1600, quality: 0.9 },
+ // 방문후기: 4:3 비율 권장, 워터마크 없음
+ reviews: { aspectRatio: 4 / 3, maxWidth: 1920, maxHeight: 1920, quality: 0.9 },
+};
+
+const defaultPreset: UploadOptions = { maxWidth: 1600, maxHeight: 1600, quality: 0.9 };
+
+export function getPhotoPresetBySlug(slug?: string | null): UploadOptions {
+ if (!slug) return defaultPreset;
+ return presetsBySlug[slug] ?? defaultPreset;
+}
+
+
diff --git a/todolist.txt b/todolist.txt
index 05e0a7a..facb764 100644
--- a/todolist.txt
+++ b/todolist.txt
@@ -66,7 +66,7 @@
9.2 이미지/파일 업로드 서버 처리 및 검증 o
9.3 리사이즈/웹포맷 최적화 및 용량 제한 o
9.4 붙여넣기/드래그 삽입, 캡션/대체텍스트 o
-9.5 사진 중심 카테고리 프리셋(해상도/비율/워터마크 옵션)
+9.5 사진 중심 카테고리 프리셋(해상도/비율/워터마크 옵션) o
[관리자(Admin)]
10.1 대시보드 핵심 지표 위젯
@@ -88,7 +88,6 @@
12.3 XSS 콘텐츠 정제 규칙 정의/적용
12.4 비밀번호 정책/자동 로그아웃/감사 로그 설정
12.5 금칙어 정책/DB 운영 절차 수립
-화
[배포/운영]
13.1 환경변수 파일 체계 및 비밀키 전략
13.2 CI 파이프라인 구성(테스트/빌드/린트)