Merge pull request #226 from LikeLion-at-DGU/dev

🚀 Deploy
LikeLion-at-DGU · Aug 3, 2024 · 22d706c · 22d706c
2 parents 5e0b351 + 6fbb502
commit 22d706c
Show file tree

Hide file tree

Showing 6 changed files with 80 additions and 81 deletions.
diff --git a/src/apis/mypage.js b/src/apis/mypage.js
@@ -10,10 +10,10 @@ export const getMyPContent = async () => {
   }
 };
 
-export const patchroutineCategory = async (prefer_routine) => {
+export const patchroutineCategory = async (preferred_routine_categories) => {
   try {
     const response = await instance.patch("/api/accounts/custom-routines/", {
-      prefer_routine,
+      preferred_routine_categories,
     });
     if (response.status == 200) {
       return true;

diff --git a/src/components/PrivacyContent/styled.js b/src/components/PrivacyContent/styled.js
@@ -1,14 +1,15 @@
 import styled from "styled-components";
-import BACKGROUND from "../../assets/background.svg";
 
 export const Wrapper = styled.div`
   display: flex;
   flex-direction: column;
   align-items: center;
+  align-self: center;
   justify-content: flex-start;
   margin-top: 1rem;
-  background-image: url(${BACKGROUND});
-
+  padding: 3rem;
+  background-color: #78a1b5;
+  margin-bottom: 30rem;
   width: 100%;
 
   .backBtn {
@@ -27,10 +28,10 @@ export const Wrapper = styled.div`
 
   .title {
     color: #fff;
-    align-self: flex-start;
+    align-self: center;
     padding: 1rem;
     font-family: "AppleSDGothicNeoM";
-    font-size: 16px;
+    font-size: 20px;
     font-style: normal;
     font-weight: 400;
     line-height: normal;

diff --git a/src/components/RoutineChange/RoutineChange.jsx b/src/components/RoutineChange/RoutineChange.jsx
@@ -48,6 +48,7 @@ const ChangeRoutine = () => {
         selectedCategories.push(i + 1);
       }
     });
+    console.log("patch 값:", selectedCategories);
     const isSuccess = await patchroutineCategory(selectedCategories);
     if (isSuccess) {
       navigate("/mypage");
@@ -59,9 +60,7 @@ const ChangeRoutine = () => {
 
   return (
     <S.RoutineLayout>
-      <S.TitleView>
-        <S.CutomTitle>{TITLE[0]}</S.CutomTitle>
-      </S.TitleView>
+      <S.CutomTitle>{TITLE[0]}</S.CutomTitle>
       <S.CategoryView>
         {ROUTINE_CATEGORY.map((category, index) => (
           <Box

diff --git a/src/components/RoutineChange/styled.js b/src/components/RoutineChange/styled.js
@@ -8,13 +8,10 @@ export const RoutineLayout = styled.div`
   flex-direction: column;
   gap: 3rem;
   background-image: url(${BACKGROUND});
-`;
-export const TitleView = styled.div`
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  padding: 7.5%;
-  gap: 1rem;
+  @media (min-height: 720px) {
+    justify-content: flex-start;
+    gap: 2rem;
+  }
 `;
 
 export const CategoryView = styled.div`

diff --git a/src/pages/MyPage/MyPage.jsx b/src/pages/MyPage/MyPage.jsx
@@ -42,7 +42,7 @@ const MyPage = () => {
   const handleBackBtnClick = () => setIsPrivacyVisible(false);
 
   return (
-    <S.Layout>
+    <>
       {isPrivacyVisible ? (
         <WrapperContent
           selectedText={selectedContent}
@@ -53,70 +53,72 @@ const MyPage = () => {
         <ChangeRoutine />
       ) : (
         <>
-          <Header $margin={"1rem 0 0 0"} $padding={"1rem 1rem 0 1rem"}>
-            마이페이지
-          </Header>
-          <S.MypageWrapper>
-            <S.Container>
-              <S.StarImg src={LOGO} />
-              <S.info>
-                <div>{myData.nickname}</div>
-              </S.info>
-            </S.Container>
-          </S.MypageWrapper>
-          <S.MypageWrapper>
-            <div className="MyStar">즐겨찾는 스타</div>
-            {myData.celebs.length === 0 ? (
-              <div className="emptytext">챌린지를 시작해보세요!</div>
-            ) : (
-              myData.celebs.map((item) => (
-                <MyStar
-                  key={item.id}
-                  src={item.photo}
-                  star={item.name}
-                  career={item.profession}
-                  count={item.routines_added_count}
-                />
-              ))
+          <S.Layout>
+            <Header $margin={"1rem 0 0 0"} $padding={"1rem 1rem 0 1rem"}>
+              마이페이지
+            </Header>
+            <S.MypageWrapper>
+              <S.Container>
+                <S.StarImg src={LOGO} />
+                <S.info>
+                  <div>{myData.nickname}</div>
+                </S.info>
+              </S.Container>
+            </S.MypageWrapper>
+            <S.MypageWrapper>
+              <div className="MyStar">즐겨찾는 스타</div>
+              {myData.celebs.length === 0 ? (
+                <div className="emptytext">챌린지를 시작해보세요!</div>
+              ) : (
+                myData.celebs.map((item) => (
+                  <MyStar
+                    key={item.id}
+                    src={item.photo}
+                    star={item.name}
+                    career={item.profession}
+                    count={item.routines_added_count}
+                  />
+                ))
+              )}
+            </S.MypageWrapper>
+            <S.MypageWrapper>
+              <div className="MyStar">개인정보</div>
+              <button className="Privacy" onClick={handleRoutineChangeClick}>
+                맞춤형 루틴 수정
+              </button>
+              <button className="Privacy" onClick={handleSubscribeClick}>
+                구독관리
+              </button>
+              <button
+                className="Privacy"
+                onClick={() => handlePrivacyClick("이용약관")}
+              >
+                이용약관
+              </button>
+              <button
+                className="Privacy"
+                onClick={() => handlePrivacyClick("개인정보처리방침")}
+              >
+                개인정보처리방침
+              </button>
+              <button className="Privacy" onClick={handleLogoutClick}>
+                로그아웃
+              </button>
+            </S.MypageWrapper>
+            {isLogoutVisible && (
+              <Modal onClose={handleCloseModal}>
+                <Logout onClose={handleCloseModal} />
+              </Modal>
             )}
-          </S.MypageWrapper>
-          <S.MypageWrapper>
-            <div className="MyStar">개인정보</div>
-            <button className="Privacy" onClick={handleRoutineChangeClick}>
-              맞춤형 루틴 수정
-            </button>
-            <button className="Privacy" onClick={handleSubscribeClick}>
-              구독관리
-            </button>
-            <button
-              className="Privacy"
-              onClick={() => handlePrivacyClick("이용약관")}
-            >
-              이용약관
-            </button>
-            <button
-              className="Privacy"
-              onClick={() => handlePrivacyClick("개인정보처리방침")}
-            >
-              개인정보처리방침
-            </button>
-            <button className="Privacy" onClick={handleLogoutClick}>
-              로그아웃
-            </button>
-          </S.MypageWrapper>
-          {isLogoutVisible && (
-            <Modal onClose={handleCloseModal}>
-              <Logout onClose={handleCloseModal} />
-            </Modal>
-          )}
-          {isSubscribeVisible && (
-            <Modal onClose={handleCloseModal}>
-              <S.subscribeBox>오픈예정입니다.</S.subscribeBox>
-            </Modal>
-          )}
+            {isSubscribeVisible && (
+              <Modal onClose={handleCloseModal}>
+                <S.subscribeBox>서비스 준비중입니다.</S.subscribeBox>
+              </Modal>
+            )}
+          </S.Layout>
         </>
       )}
-    </S.Layout>
+    </>
   );
 };
 

diff --git a/src/pages/MyPage/styled.js b/src/pages/MyPage/styled.js
@@ -6,12 +6,12 @@ export const Layout = styled.div`
   flex-direction: column;
   justify-content: space-around;
   gap: 5px;
-  margin-bottom: 20rem;
+  margin-bottom: 30rem;
   @media (min-height: 720px) {
     justify-content: flex-start;
     gap: 40px;
     height: 640px;
-    margin-bottom: 20rem;
+    margin-bottom: 10rem;
   }
 
   .MyStar {