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

MurakawaTakuya · Jan 10, 2025 · 7330a60 · 7330a60
1 parent bde7ecf
commit 7330a60
Show file tree

Hide file tree

Showing 3 changed files with 104 additions and 17 deletions.
diff --git 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
@@ -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,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
@@ -117,7 +117,7 @@ export default function Top() {
           友達の投稿を見たいなら、あなたも投稿しましょう
         </StyledTypography>
         <StyledTypography level="body-md">
-          友達の投稿を表示するには、あなたの完了した目標をシェアしましょう。あなたが最後に投稿した時間より後の目標の画像はモザイクがかかっています。
+          友達の投稿を表示するには、あなたの完了した目標をシェアしましょう。あなたが最後に投稿した時間より後の目標の画像はモザイクがかかっています。(ゲストログインの場合は特別に表示されます)
         </StyledTypography>
         {/* TODO: 正式に実装したら画像を新しくする */}
         <img src="/img/blur.webp" />