DD-113-responsive web design (#52)

* Upt. Login logic fix * Del. remove comments * Del. remove temp data * Upt. fix * Upt. time label fix * Add. 로그아웃 / 회원탈퇴 임시 처리 * Add. fix 인증코드 재요청 button align * Upt. reset to default value * Add. fix account setting page align * Add. fix chevron align * Add. * Del. remove console.log * Add. set overflow scroll * Add. add key prop * Add. fix stats error * Add. update import * Add. fix instruction error * DD-113-FE-responsive-web-design (#49) * Upt. Login logic fix * Del. remove comments * Del. remove temp data * Upt. fix * Upt. time label fix * Add. 로그아웃 / 회원탈퇴 임시 처리 * Add. fix 인증코드 재요청 button align * Upt. reset to default value * Add. improve scroll * Add. fix custom calendar err * Add. remove console.log * Add.
ddok-ddak · Apr 1, 2024 · b9f518c · b9f518c
1 parent b5150b6
commit b9f518c
Show file tree

Hide file tree

Showing 8 changed files with 268 additions and 254 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -36,7 +36,7 @@ function App() {
             width: '100vw',
           }}
         >
-          <Box sx={{ width: '100vw', height: '94vh', overflowY: 'scroll' }}>
+          <Box sx={{ width: '100vw', flex: '100vh', overflowY: 'scroll', overflowX: 'hidden' }}>
             <Routes>
               <Route path="/" element={<Navigate to="/statistics" />} />
               <Route path="/login" element={<Login />} />
@@ -75,7 +75,6 @@ function App() {
                 }
               />
               <Route path="/settings/account" element={<AccountSetting />} />
-
               <Route path="/record/edit" element={<EditRecordPage />} />
               <Route path="/category" element={<CategoryPage />} />
               <Route path="/category/edit" element={<EditCategoryPage />} />

diff --git a/src/components/common/CustomCalendar.tsx b/src/components/common/CustomCalendar.tsx
@@ -269,13 +269,16 @@ export const CustomCalendar = (pickerProps: any) => {
     return (
       <Container
         sx={{
-          display: 'flex',
-          flexDirection: 'row',
-          flexWrap: 'wrap',
+          display: 'grid',
+          grid: 'auto-flow / 1fr 1fr 1fr',
+          gridTemplateColumns: 'repeat(3, 1fr)',
+          gridTemplateRows: 'repeat(4, 1fr)',
+          rowGap: '4px',
+          columnGap: '4px',
           height: '225px',
-          width: '300px',
-          p: '16px 8px',
-          m: 1,
+          width: '320px !important',
+          p: 1,
+          m: 0,
         }}
         className="custom-calendar"
       >
@@ -287,15 +290,21 @@ export const CustomCalendar = (pickerProps: any) => {
               : date.month() + 1;
 
           const isSelected = elem === selected;
-          const isPrevDate =
-            switchView === 'BY_YEAR' || periodType === 'BY_YEAR'
-              ? elem < currentYear
-              : elem < currentMonth || date.year() < currentYear;
+          let isPrevDate;
+
+          if (switchView === 'BY_YEAR' || periodType === 'BY_YEAR') {
+            isPrevDate = elem < currentYear;
+          } else {
+            isPrevDate =
+              date.year() === currentYear
+                ? elem < currentMonth
+                : date.year() < currentYear;
+          }
+
           const isCurrentDate =
             switchView === 'BY_YEAR' || periodType === 'BY_YEAR'
               ? elem === currentYear
               : date.year() === currentYear && currentMonth + 1 === elem;
-
           return (
             <Paper
               key={elem}
@@ -304,7 +313,6 @@ export const CustomCalendar = (pickerProps: any) => {
                 flexDirection: 'column',
                 justifyContent: 'center',
                 alignItems: 'center',
-                flex: '0 1 25%',
                 position: 'relative',
               }}
             >

diff --git a/src/components/common/FolderTop.tsx b/src/components/common/FolderTop.tsx
@@ -1,4 +1,4 @@
-const FolderTop = (props: { color: string }) => {
+const FolderTop = (props: { color: string; text: string }) => {
   return (
     <svg
       width="354"
@@ -33,10 +33,14 @@ const FolderTop = (props: { color: string }) => {
         d="M99.875 12.75C100.496 12.75 101 12.2463 101 11.625C101 11.0037 100.496 10.5 99.875 10.5C99.2537 10.5 98.75 11.0037 98.75 11.625C98.75 12.2463 99.2537 12.75 99.875 12.75Z"
         fill="white"
       />
+
       <path
         d="M102.125 15.75C102.746 15.75 103.25 15.2463 103.25 14.625C103.25 14.0037 102.746 13.5 102.125 13.5C101.504 13.5 101 14.0037 101 14.625C101 15.2463 101.504 15.75 102.125 15.75Z"
         fill="white"
       />
+      <text x="39" y="20" style={{ fill: 'white', font: 'bold 15px' }}>
+        {props.text}
+      </text>
       <defs>
         <filter
           id="filter0_d_1168_1062"

diff --git a/src/pages/auth/common/Wrapper.tsx b/src/pages/auth/common/Wrapper.tsx
@@ -7,22 +7,23 @@ const Wrapper = ({
   handlePrevBtn,
   headerComp,
   children,
-}: {
+  }: {
   prevBtnText?: string;
   handlePrevBtn?: () => {} | void;
   headerComp?: ReactNode;
   children: ReactNode;
-}) => {
+  }) => {
   return (
     <Container
+      className='wrapper'
       sx={{
-        display: 'flex',
-        flexDirection: 'column',
-        justifyContent: 'space-between',
-        alignItems: 'center',
-        padding: '0 16px 23px 16px',
-        height: '100vh',
-      }}
+          display: 'flex',
+          flexDirection: 'column',
+          justifyContent: 'space-between',
+          alignItems: 'center',
+          padding: '0 16px 23px 16px',
+          height: '100vh',
+        }}
     >
       <Box
         sx={{

diff --git a/src/pages/category/CategoryPage.tsx b/src/pages/category/CategoryPage.tsx
@@ -183,7 +183,11 @@ const CategoryPage = () => {
     >
       <Spacer y={20} />
 
-      <Box sx={{ display: categoryMode === 'MODEVISIBLE' ? '' : 'none' }}>
+      <Box
+        sx={{
+          display: categoryMode === 'MODEVISIBLE' ? '' : 'none',
+        }}
+      >
         <Container>
           <Typography
             sx={{
@@ -284,67 +288,64 @@ const CategoryPage = () => {
                   justifyContent: 'center',
                 }}
               >
-                <Box>
-                  <FolderTop color={category.color} />
-                  <Typography
-                    sx={{
-                      position: 'absolute',
-                      left: 'calc(50% - 130px)',
-                      marginTop: '-166px',
-                      marginLeft: '-10px',
-                      color: 'white',
-                      fontSize: '16px',
-                      fontWeight: 'bold',
-                    }}
-                  >
-                    {category.name}
-                  </Typography>
-                </Box>
                 <Box
                   sx={{
-                    position: 'absolute',
-                    padding: '16px',
-                    paddingTop: '50px',
-                    width: '299px',
-                    margin: 'auto',
+                    position: 'relative',
                   }}
-                  key={category.name}
                 >
-                  <Grid container gap={1} sx={{ padding: '15px 0px' }}>
-                    {category.subCategories.map((sub, subIdx) => {
-                      if (subIdx < 5) {
-                        return (
-                          <Grid item key={subIdx} width="50px">
-                            {getCategoryIcon(sub)}
-                          </Grid>
-                        );
-                      }
-                      return <></>;
-                    })}
-                    {category.subCategories.length < 5 && (
-                      <Grid item width="60px">
-                        <Circle
-                          label="추가"
-                          labelSize={'10px'}
-                          color={category.color}
-                          size={40}
-                          iconSize={40}
-                          iconName={'add'}
-                          onClick={() => {
-                            setSelectedMainCategory(category);
-                            setSelectedSubCategory({ name: '', iconFile: {} });
-                            navigation('/category/edit', {
-                              state: {
-                                mode: 'add',
-                              },
-                            });
-                          }}
-                        />
-                      </Grid>
-                    )}
-                  </Grid>
+                  <FolderTop color={category.color} text={category.name} />
+                  <Box
+                    sx={{
+                      position: 'absolute',
+                      top: 0,
+                      paddingTop: '50px',
+                      paddingLeft: '20px',
+                      height: 'inherit',
+                      width: 'inherit',
+                    }}
+                    key={category.name}
+                  >
+                    <Grid container gap={1} sx={{ padding: '15px 0px' }}>
+                      {category.subCategories.map((sub, subIdx) => {
+                        if (subIdx < 5) {
+                          return (
+                            <Grid item key={subIdx} width="50px">
+                              {getCategoryIcon(sub)}
+                            </Grid>
+                          );
+                        }
+                        return <></>;
+                      })}
+                      {category.subCategories.length < 5 && (
+                        <Grid item width="50px">
+                          <Circle
+                            label="추가"
+                            labelSize={'10px'}
+                            color={category.color}
+                            size={40}
+                            iconSize={40}
+                            iconName={'add'}
+                            onClick={() => {
+                              setSelectedMainCategory(category);
+                              setSelectedSubCategory({
+                                name: '',
+                                iconFile: {},
+                              });
+                              navigation('/category/edit', {
+                                state: {
+                                  mode: 'add',
+                                },
+                              });
+                            }}
+                          />
+                        </Grid>
+                      )}
+                    </Grid>
+                  </Box>
+
                 </Box>
-                <Spacer y={20} />
+
+                {/* <Spacer y={20} /> */}
               </Box>
             );
           })}

diff --git a/src/pages/record/RecordPage.tsx b/src/pages/record/RecordPage.tsx
@@ -240,11 +240,11 @@ const RecordPage = () => {
   }, []);
 
   return (
-    <Wrapper headerComp={<CommonHeader title={'일주일 기록하기'} />}>
+    <Wrapper headerComp={<CommonHeader title={'일주일 기록하기'}/>}>
       <Box
         sx={{
           width: '100vw',
-          height: '100vh',
+          height: '94vh',
         }}
       >
         <LocalizationProvider dateAdapter={AdapterDayjs}>