Merge branch 'main' of https://github.com/jphacks/kz_2404 into feat/k…

…ubosaka/today-asginment

app/package.json

@@ -28,6 +28,7 @@
     "firebase": "^11.0.1",
     "firebase-admin": "^12.7.0",
     "formidable": "^3.5.2",
+    "jotai": "^2.10.2",
     "lucide-react": "^0.453.0",
     "minio": "^8.0.2",
     "next": "14.2.16",

app/src/app/camera/page.tsx

@@ -16,6 +16,10 @@ import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Toaster } from "@/components/ui/sonner";
+import { PointDialog } from "@/components/view/PointDialog";
+import { shapeCaption } from "@/functions/shapeCaption";
+import { postSimilarity } from "@/functions/simirality";
+import { usePointDialogOpen } from "@/lib/atom";
 import type { ScoreResponse, User, todayAssignment } from "@/types";
 import imageCompression from "browser-image-compression";
 import type React from "react";
@@ -93,6 +97,7 @@ const CameraApp = () => {
 	>();
 	const [assignments, setAssignments] = useState<todayAssignment[]>([]);
 	const [isActive, setIsActive] = useState<boolean>(true);
+	const [isPointDialogOpen, setIsPointDialogOpen] = usePointDialogOpen();
 	const [loginUser, setLoginUser] = useState<User>();
 
 	useEffect(() => {
@@ -256,6 +261,7 @@ const CameraApp = () => {
 				if (newAssignments.every((assignment) => assignment.isAnswered)) {
 					setIsActive(false);
 				}
+				setIsPointDialogOpen(true);
 			} catch (error) {
 				setIsUploading(false);
 				console.error("アップロード中にエラーが発生しました:", error);
@@ -282,6 +288,7 @@ const CameraApp = () => {
 		<>
 			{isActive ? (
 				<>
+					{isPointDialogOpen && <PointDialog type="photo" />}
 					<div className="flex items-center justify-center">
 						<Camera
 							ref={camera}

app/src/app/page.tsx

@@ -3,7 +3,9 @@
 import { Button } from "@/components/ui/button";
 import { Card } from "@/components/ui/card";
 import { Progress } from "@/components/ui/progress";
+import { PointDialog } from "@/components/view/PointDialog";
 import Timer from "@/components/view/Timer";
+import { useHasShownOnce, usePointDialogOpen } from "@/lib/atom";
 import type { MyScoreDetail, Score, todayAssignment } from "@/types";
 import { useRouter } from "next/navigation";
 import { useEffect, useState } from "react";
@@ -20,6 +22,10 @@ export default function Home() {
 	const router = useRouter();
 	const [isAnsweredAll, setIsAnsweredAll] = useState(false);
 	const [highestScore, setHighestScore] = useState(0);
+	const [_, setIsPointDialogOpen] = usePointDialogOpen();
+	const [hasShownOnce, setHasShownOnce] = useHasShownOnce();
+
+	// TODO:ログインモーダルが表示されるようにする
 
 	useEffect(() => {
 		const fetchData = async () => {
@@ -92,6 +98,16 @@ export default function Home() {
 		fetchData();
 	}, []);
 
+	// 初回開いたらlocalstorageに保管している
+	// todo 最初のログイン時で開閉を行う。例：firebaseでログイン日を取得できるため今日と一致しているかを比較する.updatedATにログイン日を入れてもいいかも
+	// todo ポイント付与api繋ぎ込み
+	useEffect(() => {
+		if (!hasShownOnce) {
+			setIsPointDialogOpen(true);
+			setHasShownOnce(true);
+		}
+	});
+
 	return (
 		<div className="flex flex-col min-h-screen px-10 py-10 bg-gradient-to-t from-gray-300 via-gray-200 to-gray-50">
 			<div className="flex flex-col items-center justify-center space-y-6">
@@ -176,6 +192,9 @@ export default function Home() {
 							<p className="text-sm mt-2">
 								新しいチャレンジに挑戦してみましょう！
 							</p>
+							<p className="text-sm mt-2">
+								新しいチャレンジに挑戦してみましょう！
+							</p>
 						</div>
 					) : (
 						myScore.map((score) => (

app/src/app/ranking/page.tsx

@@ -1,6 +1,8 @@
 "use client";
 import { Button } from "@/components/ui/button";
+import { PointDialog } from "@/components/view/PointDialog";
 import { ImageList } from "@/components/view/ranking/ImageList";
+import { usePointDialogOpen } from "@/lib/atom";
 import type { todayAssignment } from "@/types";
 import { useEffect, useState } from "react";
 import { BsGrid1X2 } from "react-icons/bs";
@@ -17,6 +19,11 @@ export default function RankingPage() {
 	const [rankingType, setRankingType] = useState<"nomal" | "image">("nomal");
 	const [selectedTopic, setSelectedTopic] = useState(0);
 	const [topics, setTopics] = useState<todayAssignment[]>([]);
+	const [isPointDialogOpen, setIsPointDialogOpen] = usePointDialogOpen();
+
+	const handleClickOpen = () => {
+		setIsPointDialogOpen(true);
+	};
 
 	useEffect(() => {
 		const fetchTopics = async () => {
@@ -33,8 +40,14 @@ export default function RankingPage() {
 		fetchTopics();
 	}, []);
 
+	// TODO 結果発表のタイミングに修正する。
+	useEffect(() => {
+		handleClickOpen();
+	});
+
 	return (
 		<div className="min-h-screen bg-gradient-to-t from-gray-300 via-gray-200 to-gray-50 px-4">
+			{isPointDialogOpen && <PointDialog type="ranking" />}
 			{rankingType === "nomal" && (
 				<>
 					<div className="w-full flex flex-col items-center justify-center sticky top-0 z-10 pt-4">

app/src/components/view/PointDialog.tsx

@@ -0,0 +1,99 @@
+"use client";
+
+import { Calendar, Camera, Trophy, X } from "lucide-react";
+import type * as React from "react";
+
+import { Button } from "@/components/ui/button";
+import {
+	Dialog,
+	DialogContent,
+	DialogHeader,
+	DialogTitle,
+} from "@/components/ui/dialog";
+import { useState } from "react";
+import { useHasShownOnce } from "../../lib/atom";
+
+interface NotificationDialogProps {
+	type: "login" | "photo" | "ranking";
+	customTitle?: string;
+	customMessage?: string;
+	customSubMessage?: string;
+}
+
+export function PointDialog({
+	type = "login",
+	customTitle,
+	customMessage,
+	customSubMessage,
+}: NotificationDialogProps) {
+	const [hasShownOnce, _] = useHasShownOnce();
+	const [isOpen, setIsOpen] = useState<boolean>(hasShownOnce);
+
+	const content = {
+		login: {
+			title: customTitle || "ログイン継続中！",
+			icon: Calendar,
+			iconColor: "text-blue-500",
+			message: customMessage || "1日目",
+			subMessage: customSubMessage || "ポイントを獲得しました！",
+		},
+		photo: {
+			title: customTitle || "撮影に成功しました！",
+			icon: Camera,
+			iconColor: "text-green-500",
+			message: customMessage || "素晴らしい写真です！",
+			subMessage: customSubMessage || "ポイントを獲得しました！",
+		},
+		ranking: {
+			title: customTitle || "ランキング結果発表！",
+			icon: Trophy,
+			iconColor: "text-yellow-500",
+			message: customMessage || "第10位",
+			subMessage: customSubMessage || "ポイントを獲得しました！",
+		},
+	};
+
+	const {
+		title: dialogTitle,
+		icon: Icon,
+		iconColor,
+		message,
+		subMessage,
+	} = content[type];
+
+	return (
+		<Dialog open={isOpen} onOpenChange={setIsOpen}>
+			<DialogContent className="sm:max-w-md max-w-xs mx-auto px-4 rounded-lg">
+				<DialogHeader>
+					<Button
+						variant="ghost"
+						className="absolute right-4 top-4 h-4 w-4 p-0"
+						onClick={() => setIsOpen(false)}
+					>
+						<X className="h-4 w-4" />
+					</Button>
+				</DialogHeader>
+				<DialogTitle>
+					<div className="space-y-2 text-center mt-4">
+						<h2 className="text-xl font-semibold">{dialogTitle}</h2>
+					</div>
+				</DialogTitle>
+				<div className="flex flex-col items-center gap-4">
+					<div className={`rounded-full p-3 ${iconColor} bg-opacity-10`}>
+						<Icon className={`h-10 w-10 ${iconColor}`} />
+					</div>
+					<div className="space-y-2 text-center">
+						<p className="text-sm text-muted-foreground">{message}</p>
+						<p className="text-sm text-muted-foreground">{subMessage}</p>
+					</div>
+					<Button
+						className="mt-4 w-full max-w-[200px] rounded-full"
+						onClick={() => setIsOpen(false)}
+					>
+						閉じる
+					</Button>
+				</div>
+			</DialogContent>
+		</Dialog>
+	);
+}

app/src/lib/atom.ts

@@ -0,0 +1,9 @@
+import { atom, useAtom } from "jotai";
+import { atomWithStorage } from "jotai/utils";
+
+export const pointDialogOpenAtom = atom<boolean>(false);
+
+export const hasShownOnceAtom = atomWithStorage<boolean>("hasShownPointDialog", false);
+
+export const usePointDialogOpen = () => useAtom(pointDialogOpenAtom);
+export const useHasShownOnce = () => useAtom(hasShownOnceAtom);