From 7330a60bf261ca161ad62b583457196dd0b46e22 Mon Sep 17 00:00:00 2001
From: MurakawaTakuya <murakawatakuya5@gmail.com>
Date: Fri, 10 Jan 2025 18:37:43 +0900
Subject: [PATCH] =?UTF-8?q?=E6=9C=80=E5=BE=8C=E3=81=AB=E5=AE=8C=E4=BA=86?=
 =?UTF-8?q?=E3=81=97=E3=81=9F=E7=9B=AE=E6=A8=99=E4=BB=A5=E9=99=8D=E3=81=AE?=
 =?UTF-8?q?=E7=94=BB=E5=83=8F=E3=81=AB=E3=83=A2=E3=82=B6=E3=82=A4=E3=82=AF?=
 =?UTF-8?q?=E3=82=92=E3=81=8B=E3=81=91=E3=82=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/Components/DashBoard/DashBoard.tsx | 29 +++++++++
 src/Components/Progress/Progress.tsx   | 90 +++++++++++++++++++++-----
 src/app/page.tsx                       |  2 +-
 3 files changed, 104 insertions(+), 17 deletions(-)

diff --git a/src/Components/DashBoard/DashBoard.tsx b/src/Components/DashBoard/DashBoard.tsx
index 721546e6..3da00114 100644
--- a/src/Components/DashBoard/DashBoard.tsx
+++ b/src/Components/DashBoard/DashBoard.tsx
@@ -5,6 +5,7 @@ import {
   fetchResult,
   handleFetchResultError,
 } from "@/utils/API/Result/fetchResult";
+import { useUser } from "@/utils/UserContext";
 import CircularProgress from "@mui/joy/CircularProgress";
 import Typography from "@mui/joy/Typography";
 import LinearProgress from "@mui/material/LinearProgress";
@@ -47,6 +48,11 @@ export default function DashBoard({
   const offset = useRef(0);
   const noMore = useRef(false);
 
+  const [lastPostDate, setLastPostDate] = useState<string | null>(null); // 投稿が0の場合はnull
+
+  const { user } = useUser();
+  const myUserId = user?.userId;
+
   const limit = 10; // limitずつ表示
 
   useEffect(() => {
@@ -162,6 +168,28 @@ export default function DashBoard({
     );
   }, [success, failed, pending, successResults, failedResults, pendingResults]);
 
+  useEffect(() => {
+    if (success) {
+      // ここで最後の投稿のsubmittedAtを取得
+      fetchResult({
+        userId: myUserId,
+        success,
+        failed: false,
+        pending: false,
+        offset: 0,
+        limit: 1,
+      })
+        .then((data) => {
+          if (data.successResults.length > 0) {
+            setLastPostDate(data.successResults[0].post?.submittedAt);
+          }
+        })
+        .catch((error) => {
+          console.error("Error fetching last post date:", error);
+        });
+    }
+  }, [success]);
+
   return (
     <>
       {isLoading ? (
@@ -188,6 +216,7 @@ export default function DashBoard({
             failedResults={failed ? failedResults : []}
             pendingResults={pending ? pendingResults : []}
             orderBy={orderBy}
+            lastPostDate={lastPostDate}
           />
           <div className="bottom" ref={bottomRef}></div>
 
diff --git a/src/Components/Progress/Progress.tsx b/src/Components/Progress/Progress.tsx
index fd0e4a32..be8d6263 100644
--- a/src/Components/Progress/Progress.tsx
+++ b/src/Components/Progress/Progress.tsx
@@ -28,6 +28,11 @@ const successPostIndicatorStyle = {
   },
 };
 
+const blurImageStyle = {
+  filter: "blur(20px)",
+  clipPath: "inset(0)",
+};
+
 const outerBorderColors = {
   success: "#008c328a",
   failed: "#a2000082",
@@ -45,6 +50,7 @@ interface ProgressProps {
   failedResults?: GoalWithIdAndUserData[];
   pendingResults?: GoalWithIdAndUserData[];
   orderBy?: "asc" | "desc";
+  lastPostDate: string | null; // 投稿が0の場合はnull
 }
 
 export default function Progress({
@@ -52,6 +58,7 @@ export default function Progress({
   failedResults = [],
   pendingResults = [],
   orderBy = "desc", // 最新が上位
+  lastPostDate,
 }: ProgressProps) {
   const { user } = useUser();
 
@@ -85,6 +92,12 @@ export default function Progress({
               key={result.goalId}
               result={result as GoalWithIdAndUserData}
               user={user as User}
+              isBlured={
+                result.post?.submittedAt && lastPostDate
+                  ? new Date(result.post.submittedAt) >
+                      new Date(lastPostDate) && user?.loginType !== "Guest"
+                  : true
+              } // ゲストユーザーは特別にモザイクを解除
             />
           );
         } else if (result.type === "failed") {
@@ -112,9 +125,11 @@ export default function Progress({
 const SuccessStep = ({
   result,
   user,
+  isBlured,
 }: {
   result: GoalWithIdAndUserData;
   user: User;
+  isBlured: boolean;
 }) => {
   const [imageURL, setImageURL] = useState("");
   const [imageLoaded, setImageLoaded] = useState(false);
@@ -189,7 +204,13 @@ const SuccessStep = ({
             zIndex: 0,
           }}
         >
-          <div style={{ minHeight: "15vh", display: "flex" }}>
+          <div
+            style={{
+              minHeight: "15vh",
+              display: "flex",
+              justifyContent: "center",
+            }}
+          >
             <CssVarsProvider theme={theme}>
               <Skeleton
                 loading={!imageLoaded}
@@ -200,21 +221,58 @@ const SuccessStep = ({
                 }}
               >
                 {imageURL && (
-                  <img
-                    src={imageURL}
-                    srcSet={imageURL}
-                    style={{
-                      objectFit: "contain",
-                      width: "100%",
-                      maxHeight: "50vh",
-                      margin: "0 auto",
-                      borderRadius: "5px 5px 0 0",
-                      borderBottom: "thin solid #cdcdcd",
-                    }}
-                    loading="lazy"
-                    alt=""
-                    onLoad={() => setImageLoaded(true)}
-                  />
+                  <div style={{ position: "relative", display: "flex" }}>
+                    <img
+                      src={imageURL}
+                      srcSet={imageURL}
+                      style={{
+                        objectFit: "contain",
+                        width: "100%",
+                        maxHeight: "50vh",
+                        margin: "0 auto",
+                        borderRadius: "5px 5px 0 0",
+                        borderBottom: "thin solid #cdcdcd",
+                        ...(isBlured ? blurImageStyle : {}),
+                      }}
+                      loading="lazy"
+                      alt=""
+                      onLoad={() => setImageLoaded(true)}
+                    />
+                    {isBlured && (
+                      <div
+                        style={{
+                          position: "absolute",
+                          top: "53%",
+                          left: "50%",
+                          transform: "translate(-50%, -50%)",
+                          width: "90%",
+                          fontWeight: 700,
+                          textAlign: "center",
+                        }}
+                      >
+                        <CenterIn delay={1}>
+                          <Typography
+                            level="body-lg"
+                            sx={{
+                              color: "black",
+                              textShadow: "0 0 10px rgb(201 228 255)",
+                            }}
+                          >
+                            投稿をするとモザイクが解除されます
+                          </Typography>
+                          <Typography
+                            level="body-sm"
+                            sx={{
+                              color: "black",
+                              textShadow: "0 0 8px rgb(201 228 255)",
+                            }}
+                          >
+                            最後にあなたが完了した目標より後に投稿された画像はモザイクがかかります。自分も目標を達成して共有しましょう!
+                          </Typography>
+                        </CenterIn>
+                      </div>
+                    )}
+                  </div>
                 )}
               </Skeleton>
             </CssVarsProvider>
diff --git a/src/app/page.tsx b/src/app/page.tsx
index d7f8b3d9..42f5204f 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -117,7 +117,7 @@ export default function Top() {
           友達の投稿を見たいなら、あなたも投稿しましょう
         </StyledTypography>
         <StyledTypography level="body-md">
-          友達の投稿を表示するには、あなたの完了した目標をシェアしましょう。あなたが最後に投稿した時間より後の目標の画像はモザイクがかかっています。
+          友達の投稿を表示するには、あなたの完了した目標をシェアしましょう。あなたが最後に投稿した時間より後の目標の画像はモザイクがかかっています。(ゲストログインの場合は特別に表示されます)
         </StyledTypography>
         {/* TODO: 正式に実装したら画像を新しくする */}
         <img src="/img/blur.webp" />