最後に完了した目標以降の画像にモザイクをかける

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,32 @@ export default function DashBoard({
     );
   }, [success, failed, pending, successResults, failedResults, pendingResults]);
 
+  useEffect(() => {
+    if (user?.loginType === "Guest") {
+      return;
+    }
+
+    if (success) {
+      // 最後に成功した目標を取得
+      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 +220,7 @@ export default function DashBoard({
             failedResults={failed ? failedResults : []}
             pendingResults={pending ? pendingResults : []}
             orderBy={orderBy}
+            lastPostDate={lastPostDate}
           />
           <div className="bottom" ref={bottomRef}></div>
 

src/Components/NameUpdate/NameUpdate.tsx

@@ -51,12 +51,9 @@ export default function NameUpdate() {
         console.error("Failed to update displayName: No authenticated user");
       }
 
-      showSnackBar({
-        message: "名前を変更しました",
-        type: "success",
-      });
       setNewName("");
       setOpen(false);
+      window.location.reload();
     } catch (error) {
       console.error("Error updating name:", error);
       showSnackBar({

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,13 +50,15 @@ interface ProgressProps {
   failedResults?: GoalWithIdAndUserData[];
   pendingResults?: GoalWithIdAndUserData[];
   orderBy?: "asc" | "desc";
+  lastPostDate: string | null; // 投稿が0の場合はnull
 }
 
 export default function Progress({
   successResults = [],
   failedResults = [],
   pendingResults = [],
   orderBy = "desc", // 最新が上位
+  lastPostDate,
 }: ProgressProps) {
   const { user } = useUser();
 
@@ -85,6 +92,13 @@ 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" // ゲストユーザーは特別にモザイクを解除
+                  ? false
+                  : true
+              }
             />
           );
         } else if (result.type === "failed") {
@@ -112,9 +126,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 +205,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}
@@ -210,6 +232,7 @@ const SuccessStep = ({
                       margin: "0 auto",
                       borderRadius: "5px 5px 0 0",
                       borderBottom: "thin solid #cdcdcd",
+                      ...(isBlured ? blurImageStyle : {}),
                     }}
                     loading="lazy"
                     alt=""
@@ -218,6 +241,40 @@ const SuccessStep = ({
                 )}
               </Skeleton>
             </CssVarsProvider>
+            {isBlured && imageURL && (
+              <div
+                style={{
+                  position: "absolute",
+                  top: "45%",
+                  left: "50%",
+                  transform: "translate(-50%, -50%)",
+                  width: "85%",
+                  fontWeight: 700,
+                  textAlign: "center",
+                }}
+              >
+                <CenterIn delay={0.5}>
+                  <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>
           <CardContent sx={{ padding: "3px 10px 10px" }}>
             <div

src/app/page.tsx

@@ -114,10 +114,10 @@ export default function Top() {
 
       <CenterIn>
         <StyledTypography level="h3" component="h2">
-          友達の投稿を見たいなら、あなたも投稿しましょう
+          見るだけではなく行動しましょう
         </StyledTypography>
         <StyledTypography level="body-md">
-          友達の投稿を表示するには、あなたの完了した目標をシェアしましょう。あなたが最後に投稿した時間より後の目標の画像はモザイクがかかっています。
+          友達の投稿を表示するには、あなたの完了した目標をシェアしましょう。あなたが最後に投稿した時間より後の目標の画像はモザイクがかかっています。(ゲストログインの場合は特別に表示されます)
         </StyledTypography>
         {/* TODO: 正式に実装したら画像を新しくする */}
         <img src="/img/blur.webp" />