feat: 잔디 detail 모바일 반응형 추가

42Statistics · Dec 3, 2023 · c578a1d · c578a1d
1 parent 859e67f
commit c578a1d
Show file tree

Hide file tree

Showing 4 changed files with 92 additions and 10 deletions.
diff --git a/app/src/Profile/dashboard-contents/General/GrassActivity/TotalGrassActivity.tsx b/app/src/Profile/dashboard-contents/General/GrassActivity/TotalGrassActivity.tsx
@@ -91,7 +91,7 @@ const GridLayout = styled.div`
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   grid-template-rows: repeat(2, 1fr);
-  gap: 10px; // Add the desired gap between grid areas
+  gap: 10px;
   width: 100%;
   height: 100%;
 `;
@@ -100,14 +100,14 @@ const GridArea = styled.div`
   display: flex;
   justify-content: center;
   align-items: center;
-  border: 1px solid #ccc; // Add a border or styling as needed
+  border: 1px solid #ccc;
   border-radius: 10px;
 `;
 
 const Divider = styled.div`
-  flex: 1; // Divide the remaining space
+  flex: 1;
   height: 1px;
   margin-top: 1rem;
   margin-right: 1rem;
-  background-color: #ccc; // Divider의 색상을 설정하세요
+  background-color: #ccc;
 `;
diff --git a/app/src/Profile/dashboard-contents/General/GrassActivity/index.tsx b/app/src/Profile/dashboard-contents/General/GrassActivity/index.tsx
@@ -15,6 +15,8 @@ import { HStack, VStack, Body1MediumText } from '@shared/ui-kit';
 import { dailyActivityAtom } from '../atoms/dailyActivityAtom';
 import { useAtomValue } from 'jotai';
 import { parseDailyActivity } from './utils/parseDailyActivity';
+import { useDeviceType } from '@shared/utils/react-responsive/useDeviceType';
+import { Device } from '@shared/types/Device';
 
 const GET_PERSONAL_ACTIVITY_LOG = gql(/* GraphQL */ `
   query GetPersonalActivityLog(
@@ -47,6 +49,7 @@ export const GrassActivity = () => {
   const { login } = useContext(UserProfileContext);
   const { date, records } = useAtomValue(dailyActivityAtom);
   const { dailyRecords, timeRecord } = parseDailyActivity(records);
+  const device = useDeviceType();
 
   const title = '활동 내역';
 
@@ -81,10 +84,10 @@ export const GrassActivity = () => {
         <HStack style={{ marginLeft: '1rem' }}>
           <Body1MediumText>{title}</Body1MediumText>
         </HStack>
-        <HStack w="100%" h="100%">
+        <DetailLayout device={device}>
           <TotalGrassActivity />
           <DailyGrassActivity time={{ date, timeRecord }} data={data} />
-        </HStack>
+        </DetailLayout>
       </VStack>
     </Layout>
   );
@@ -95,3 +98,11 @@ const Layout = styled.div`
   height: 100%;
   padding: 2.4rem;
 `;
+
+const DetailLayout = styled.div<{ device: Device | null }>`
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: ${({ device }) => (device === 'mobile' ? 'column' : 'row')};
+  align-items: center;
+`;
diff --git a/app/src/Profile/dashboard-frames/profileGeneralPageDashboardMobileRows.ts b/app/src/Profile/dashboard-frames/profileGeneralPageDashboardMobileRows.ts
@@ -0,0 +1,61 @@
+import type { DashboardTempType } from '@shared/types/Dashboard';
+
+export const profileGeneralPageDashboardMobileRows: DashboardTempType[] = [
+  {
+    items: [
+      {
+        rowSpan: 1,
+        colSpan: 1,
+        elementId: 0,
+      },
+      {
+        rowSpan: 1,
+        colSpan: 1,
+        elementId: 6,
+      },
+      {
+        rowSpan: 1,
+        colSpan: 1,
+        elementId: 4,
+      },
+      {
+        rowSpan: 1,
+        colSpan: 1,
+        elementId: 1,
+      },
+      {
+        rowSpan: 1,
+        colSpan: 1,
+        elementId: 3,
+      },
+      {
+        rowSpan: 1,
+        colSpan: 1,
+        elementId: 7,
+      },
+    ],
+  },
+  {
+    items: [
+      {
+        rowSpan: 2,
+        colSpan: 3,
+        elementId: 12,
+      },
+    ],
+  },
+  {
+    items: [
+      {
+        rowSpan: 4,
+        colSpan: 2,
+        elementId: 13,
+      },
+      {
+        rowSpan: 2,
+        colSpan: 1,
+        elementId: 9,
+      },
+    ],
+  },
+];
diff --git a/app/src/Profile/pages/General/index.tsx b/app/src/Profile/pages/General/index.tsx
@@ -9,9 +9,12 @@ import { profileGeneralPageDashboardRows } from '@/Profile/dashboard-frames/prof
 import { Footer } from '@core/components/Footer';
 import { DashboardTemp } from '@shared/components/Dashboard/DashboardTemp';
 import { Seo } from '@shared/components/Seo';
+import { useDeviceType } from '@shared/utils/react-responsive/useDeviceType';
+import { profileGeneralPageDashboardMobileRows } from '@/Profile/dashboard-frames/profileGeneralPageDashboardMobileRows';
 
 const ProfileGeneralPage = () => {
   const { login } = useContext(UserProfileContext);
+  const device = useDeviceType();
 
   // FIXME: DailyActivities에서만 쓰는데 굳이 여기서 쓸 필요 없음.
   const { data } = useQuery(GET_PERSONAL_GENERAL_ZERO_COST_BY_LOGIN, {
@@ -30,10 +33,17 @@ const ProfileGeneralPage = () => {
       <BeginAtContext.Provider
         value={beginAt !== undefined ? new Date(beginAt) : new Date()}
       >
-        <DashboardTemp
-          contents={profileGeneralPageDashboardContents}
-          rows={profileGeneralPageDashboardRows}
-        />
+        {device !== 'mobile' ? (
+          <DashboardTemp
+            contents={profileGeneralPageDashboardContents}
+            rows={profileGeneralPageDashboardRows}
+          />
+        ) : (
+          <DashboardTemp
+            contents={profileGeneralPageDashboardContents}
+            rows={profileGeneralPageDashboardMobileRows}
+          />
+        )}
       </BeginAtContext.Provider>
       <Footer />
     </>