/achievementsと/unlockedのスクロール可能にした

SystemEngineeringTeam · Sep 6, 2024 · 271c3a6 · 271c3a6
1 parent 84439c9
commit 271c3a6
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 40 deletions.
diff --git a/src/pages/achievements/index.tsx b/src/pages/achievements/index.tsx
@@ -13,7 +13,7 @@ import { type Achievement } from "@/types/post-data/achievements";
 
 const BoxStyle = styled(Box)`
   margin: 0 auto;
-  height: 100%;
+  height: 80vh;
   overflow: scroll;
 `;
 
@@ -24,18 +24,20 @@ export default function Page(): ReactElement {
   return match(swrAchievements)
     .with(S.Loading, () => <div>Loading...</div>)
     .with(S.Success, ({ data }) => (
-      <BoxStyle width="70%">
+      <>
         <Box mt="20vh" />
-        {data.map((achievement) => {
-          const typedAchievement = achievement as unknown as Achievement;
-          return (
-            <AchievementCard
-              key={achievement.id}
-              achievement={typedAchievement}
-            />
-          );
-        })}
-      </BoxStyle>
+        <BoxStyle width="70%">
+          {data.map((achievement) => {
+            const typedAchievement = achievement as unknown as Achievement;
+            return (
+              <AchievementCard
+                key={achievement.id}
+                achievement={typedAchievement}
+              />
+            );
+          })}
+        </BoxStyle>
+      </>
     ))
     .otherwise(({ data, error }) => (
       <ErrorScreen error={handleSWRError(data, error)} />

diff --git a/src/pages/members/index.tsx b/src/pages/members/index.tsx
@@ -46,7 +46,6 @@ export default function Page(): ReactElement {
             return <MemberCard key={m.email} member={m} point={point} />;
           })}
         </BoxStyle>
-          <Box mt="20vh" />
       </>
     ))
     .otherwise(({ data, error }) => (

diff --git a/src/pages/unlocked/index.tsx b/src/pages/unlocked/index.tsx
@@ -18,7 +18,7 @@ import { type UnlockedAchievement } from "@/types/post-data/unlocked-achievement
 
 const BoxStyle = styled(Box)`
   margin: 0 auto;
-  height: 100%;
+  height: 80vh;
   overflow: scroll;
 `;
 
@@ -83,34 +83,36 @@ export default function Page(): ReactElement {
         data: { achievements, unlockedAchievements, currentMember },
         mutate,
       }) => (
-        <BoxStyle width="70%">
+        <>
           <Box mt="20vh" />
-          {achievements.map((achievement) => {
-            const isUnlocked = unlockedAchievements.some(
-              (u) => u.achievementID === achievement.id,
-            );
+          <BoxStyle width="70%">
+            {achievements.map((achievement) => {
+              const isUnlocked = unlockedAchievements.some(
+                (u) => u.achievementID === achievement.id,
+              );
 
-            return (
-              <UnlockableCard
-                key={achievement.id}
-                achievement={achievement}
-                isDisabled={isUILocked}
-                isUnlocked={isUnlocked}
-                setIsUnlocked={(u) => {
-                  void handleUnlockToggle(
-                    achievement.id,
-                    unlockedAchievements,
-                    currentMember,
-                    u,
-                    async () => {
-                      await mutate();
-                    },
-                  );
-                }}
-              />
-            );
-          })}
-        </BoxStyle>
+              return (
+                <UnlockableCard
+                  key={achievement.id}
+                  achievement={achievement}
+                  isDisabled={isUILocked}
+                  isUnlocked={isUnlocked}
+                  setIsUnlocked={(u) => {
+                    void handleUnlockToggle(
+                      achievement.id,
+                      unlockedAchievements,
+                      currentMember,
+                      u,
+                      async () => {
+                        await mutate();
+                      },
+                    );
+                  }}
+                />
+              );
+            })}
+          </BoxStyle>
+        </>
       ),
     )
     .otherwise(({ data, error }) => (