Merge pull request #416 from Chaem03/feature/#349

🎨 Design: 맞춤형루틴박스 수정
LikeLion-at-DGU · Aug 6, 2024 · e4d8c3a · e4d8c3a
2 parents e4fe8db + 4605986
commit e4d8c3a
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 14 deletions.
diff --git a/src/components/RoutineChange/styled.js b/src/components/RoutineChange/styled.js
@@ -21,7 +21,7 @@ export const CategoryView = styled.div`
   display: flex;
   flex-wrap: wrap;
   gap: 1rem;
-  width: 280px;
+  width: 270px;
   justify-content: flex-start;
 `;
 export const CutomTitle = styled.p`

diff --git a/src/pages/Share/Share.jsx b/src/pages/Share/Share.jsx
@@ -50,6 +50,8 @@ const SharePage = ({ onBack }) => {
     setIsButtonVisible(false);
     setTimeout(async () => {
       const canvas = await html2canvas(captureRef.current, { useCORS: true });
+      const ctx = canvas.getContext("2d");
+      ctx.filter = "blur(10px)";
       await captureScreenshot(canvas);
       setIsButtonVisible(true);
     }, 100);

diff --git a/src/pages/User/SignUpCustom.jsx b/src/pages/User/SignUpCustom.jsx
@@ -35,17 +35,19 @@ export const SignUpCustom = () => {
         <S.CutomTitle>{TITLE[0]}</S.CutomTitle>
         <S.CustomP color="white">{TITLE[1]}</S.CustomP>
       </S.TitleView>
-      <S.CategoryView>
-        {ROUTINE_CATEGORY.map((category, index) => (
-          <Box
-            onClick={() => handleClick(index)}
-            $select={categoryStatus[index]}
-            key={index}
-          >
-            {category}
-          </Box>
-        ))}
-      </S.CategoryView>
+      <S.CategoryWrapper>
+        <S.CategoryView>
+          {ROUTINE_CATEGORY.map((category, index) => (
+            <Box
+              onClick={() => handleClick(index)}
+              $select={categoryStatus[index]}
+              key={index}
+            >
+              {category}
+            </Box>
+          ))}
+        </S.CategoryView>
+      </S.CategoryWrapper>
       <S.SelectView>
         <Button
           width="50%"

diff --git a/src/pages/User/style.js b/src/pages/User/style.js
@@ -124,10 +124,18 @@ export const ImageFame = styled.img`
   z-index: 2;
 `;
 
+export const CategoryWrapper = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+
 export const CategoryView = styled.div`
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
+  display: flex;
+  flex-wrap: wrap;
   gap: 1rem;
+  width: 270px;
+  justify-content: flex-start;
 `;
 
 export const TitleView = styled.div`