Merge pull request #171 from MurakawaTakuya/update-pictures

画像差し替えと細かいバグ修正

.github/workflows/firebase-hosting-pull-request.yml

@@ -25,7 +25,7 @@ jobs:
           NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID: ${{ secrets.NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID }}
           NEXT_PUBLIC_FIREBASE_VAPID_KEY: ${{ secrets.NEXT_PUBLIC_FIREBASE_VAPID_KEY }}
           NEXT_PUBLIC_FIREBASE_RECAPTCHA_SITEKEY: ${{ secrets.NEXT_PUBLIC_FIREBASE_RECAPTCHA_SITEKEY }}
-          IS_STAGING: "true"
+          NEXT_PUBLIC_IS_STAGING: "true"
         run: echo "Environment variables set"
 
       - run: npm ci && npm run build

src/Components/DashBoard/DashBoard.tsx

@@ -7,7 +7,6 @@ import {
 } from "@/utils/API/Result/fetchResult";
 import { useResults } from "@/utils/ResultContext";
 import { useUser } from "@/utils/UserContext";
-import CircularProgress from "@mui/joy/CircularProgress";
 import Typography from "@mui/joy/Typography";
 import LinearProgress from "@mui/material/LinearProgress";
 import { useEffect, useRef, useState } from "react";
@@ -42,12 +41,11 @@ export default function DashBoard({
     noMorePending,
     noMoreFinished,
   } = useResults();
-  const [noResult, setNoResult] = useState<boolean>(false);
-  const [isLoading, setIsLoading] = useState<boolean>(true);
-  const [reachedBottom, setReachedBottom] = useState<boolean>(false);
-  const [isLoadingMore, setIsLoadingMore] = useState<boolean>(false);
+  const [noResult, setNoResult] = useState<boolean>(false); // 目標が一つもない場合
+  const [isLoading, setIsLoading] = useState<boolean>(true); // Dashboardの初期ロード
+  const [reachedBottom, setReachedBottom] = useState<boolean>(false); // 画面下に到達して読み込み
   const bottomRef = useRef<HTMLDivElement>(null);
-  const isAlreadyFetching = useRef(false);
+  const isAlreadyFetching = useRef(false); // 重複してfetchを防ぐ
 
   const { user } = useUser();
   const myUserId = user?.userId;
@@ -61,10 +59,6 @@ export default function DashBoard({
     } else {
       isAlreadyFetching.current = true;
     }
-    // 画面下に到達して既にロード中の場合はreturn
-    if (reachedBottom && !isLoadingMore) {
-      setIsLoadingMore(true);
-    }
     // 全て読み込んだ場合
     if (
       (pending && noMorePending.current) ||
@@ -127,7 +121,6 @@ export default function DashBoard({
         setIsLoading(false);
         setReachedBottom(false);
         isAlreadyFetching.current = false;
-        setIsLoadingMore(false);
       })
       .catch((error) => {
         console.error("Error fetching results:", error);
@@ -176,6 +169,7 @@ export default function DashBoard({
     bottomRef,
   ]);
 
+  // 目標があるか確認
   useEffect(() => {
     if (
       (pending && pendingResults.length === 0) ||
@@ -195,6 +189,7 @@ export default function DashBoard({
     );
   }, [success, failed, pending, successResults, failedResults, pendingResults]);
 
+  // 投稿のモザイク処理
   useEffect(() => {
     if (user?.loginType === "Guest") {
       return;
@@ -262,32 +257,16 @@ export default function DashBoard({
 
           {/* 下に到達した時に続きを表示 */}
           {((pending && !noMorePending.current) ||
-            (success && failed && !noMoreFinished.current)) &&
-            (reachedBottom ? (
-              <div
-                style={{
-                  display: "flex",
-                  justifyContent: "center",
-                  marginTop: "20px",
-                }}
-              >
-                <CircularProgress
-                  color="primary"
-                  variant="soft"
-                  size="lg"
-                  value={30}
-                />
-              </div>
-            ) : (
-              <Typography
-                level="body-md"
-                color="primary"
-                textAlign="center"
-                sx={{ fontWeight: 700 }}
-              >
-                スクロールしてもっと表示
-              </Typography>
-            ))}
+            (success && failed && !noMoreFinished.current)) && (
+            <Typography
+              level="body-md"
+              color={reachedBottom ? "success" : "primary"}
+              textAlign="center"
+              fontWeight={700}
+            >
+              {reachedBottom ? "Loading..." : "Display More"}
+            </Typography>
+          )}
         </div>
       )}
     </>

src/Components/Progress/Reaction.tsx

@@ -180,22 +180,17 @@ export const Reaction = ({
                       border: "none",
                       backgroundColor: "transparent",
                       cursor: "pointer",
+                      fontSize: "28px",
+                      lineHeight: "1",
+                      transition: "0.3s",
+                      filter: `grayscale(${isReacted === key ? 0 : 100}%)`,
+                      opacity: isReacted === key ? 1 : 0.5,
                     }}
                     onClick={() => handleReaction(key)}
                   >
-                    <span
-                      style={{
-                        fontSize: "28px",
-                        lineHeight: "1",
-                        filter: `grayscale(${isReacted === key ? 0 : 100}%)`,
-                        opacity: isReacted === key ? 1 : 0.5,
-                        transition: "0.3s",
-                      }}
-                    >
-                      <motion.div whileTap={{ scale: 0.6 }}>
-                        {reaction.icon}
-                      </motion.div>
-                    </span>
+                    <motion.div whileTap={{ scale: 0.4 }}>
+                      {reaction.icon}
+                    </motion.div>
                   </button>
                   <span>{reaction.count}</span>
                 </React.Fragment>

src/Components/Progress/SuccessStep.tsx

@@ -156,7 +156,7 @@ export const SuccessStep = ({
                   textAlign: "center",
                 }}
               >
-                <CenterIn delay={0.5}>
+                <CenterIn>
                   <Typography
                     level="body-lg"
                     sx={{

src/app/account/page.tsx

@@ -118,6 +118,8 @@ export default function Account() {
                 {!PWAReady && !isPWA && (
                   <Typography color="danger" textAlign="center">
                     PWAを準備中です。しばらくしてからページを更新してください。
+                    <br />
+                    ブラウザの「ホーム画面に追加」からすぐにインストールすることもできます。
                   </Typography>
                 )}
                 {user?.loginType === "Guest" && (

src/utils/Auth/signInWithGoogleAccount.ts

@@ -12,7 +12,8 @@ export const signInWithGoogleAccount = async () => {
     await signInWithPopup(auth, googleProvider);
 
     showSnackBar({
-      message: "Googleアカウントでログインしました",
+      message:
+        "Googleアカウントでログインしました。ユーザーデータを取得しています。",
       type: "success",
     });
   } catch (error) {

src/utils/Auth/signInWithMail.ts

@@ -13,7 +13,8 @@ export const signInWithMail = async (email: string, password: string) => {
   await signInWithEmailAndPassword(auth, email, password)
     .then(() => {
       showSnackBar({
-        message: "メールでログインしました",
+        message:
+          "メールアドレスでログインしました。ユーザーデータを取得しています。",
         type: "success",
       });
     })
@@ -22,7 +23,7 @@ export const signInWithMail = async (email: string, password: string) => {
       console.error("errorMessage:", (error as Error)?.message);
 
       const errorMessage = (error as Error)?.message;
-      let snackBarMessage = "メールでのログインに失敗しました";
+      let snackBarMessage = "メールアドレスでのログインに失敗しました";
 
       if (errorMessage.includes("auth/wrong-password")) {
         snackBarMessage = "パスワードが間違っています";