고정 게스트북

Author: MiryangJung

app/guestbook/components/bubble.tsx

@@ -1,19 +1,24 @@
-import type { Tables } from "@/types/database-generated.types";
+import type { Guestbook } from "@/data/guestbook/types";
 import { getTzDay } from "@/util/days";
+import { PinIcon } from "lucide-react";
 
 export default function Bubble({
 	message,
 	color,
 	created_at,
-}: Tables<"guestbook">) {
+	pinned,
+}: Guestbook) {
 	return (
 		<div className="flex flex-row justify-end items-end gap-1">
-			<span className="text-[10px] text-primary">
-				{getTzDay(created_at).format("YY.MM")}
-			</span>
+			<div className="flex flex-col items-end gap-1">
+				{pinned && <PinIcon className="h-3 w-3 text-primary stroke-[1.5px]"/>}
+				<span className="text-[10px] text-primary">
+					{getTzDay(created_at).format("YY.MM")}
+				</span>
+			</div>
 			<div
-				className="p-0 break-all leading-6 text-sm max-w-[90%] font-medium px-1 underline decoration-4 underline-offset-0"
-				style={{ textDecorationColor: color }}
+				className="p-0 break-all leading-6 text-sm max-w-[90%] font-medium px-2 py-0.5 border-2"
+				style={{ borderColor: color }}
 			>
 				{message}
 			</div>

app/guestbook/components/message-input.tsx

@@ -11,7 +11,7 @@ export default function MessageInput() {
 		<Input
 			{...register("message")}
 			style={{ borderColor: color }}
-			className="rounded-none border-t-0 border-l-0 border-r-0 border-b-4"
+			className="rounded-none border-2"
 			maxLength={1000}
 		/>
 	);

data/guestbook/make.ts

@@ -19,6 +19,7 @@ export const baseQuery = (
 	client()
 		.from("guestbook")
 		.select("*", options)
+		.order("pinned", { ascending: true })
 		.order("created_at", { ascending: false });
 
 export const makeGetGuestbooks =