side-pool · dididy · Nov 17, 2021 · Nov 16, 2021 · Nov 16, 2021 · Nov 16, 2021
diff --git a/src/components/Comment/MyCommentList/MyCommentList.module.scss b/src/components/Comment/MyCommentList/MyCommentList.module.scss
@@ -5,4 +5,9 @@
     margin-bottom: 20px;
     width: 100%;
   }
+
+  .myCommentTypography {
+    @include flex_row();
+    padding: 70px 0px;
+  }
 }
diff --git a/src/components/Comment/MyCommentList/index.tsx b/src/components/Comment/MyCommentList/index.tsx
@@ -2,15 +2,28 @@ import React from 'react';
 import styles from './MyCommentList.module.scss';
 import MyCommentContainer from '@src/components/Comment/MyCommentContainer';
 import { useReadMyComment } from '@src/hooks/useMyPageQuery';
+import Typography from '@src/components/common/Typography';
 
 const MyCommentList = () => {
   const { data } = useReadMyComment();
 
   return (
     <div className={styles.MyCommentList}>
-      {data?.map((each) => (
-        <MyCommentContainer key={each.id} {...each} />
-      ))}
+      {(data || []).length > 0 ? (
+        <>
+          {data?.map((each) => (
+            <MyCommentContainer key={each.id} {...each} />
+          ))}
+        </>
+      ) : (
+        <Typography
+          className={styles.myCommentTypography}
+          fontSize="md"
+          textColor="lightGray"
+        >
+          아직 작성된 글이 없습니다.
+        </Typography>
+      )}
     </div>
   );
 };

diff --git a/src/components/Idea/MyIdeaList/MyIdeaList.module.scss b/src/components/Idea/MyIdeaList/MyIdeaList.module.scss
@@ -1,19 +1,21 @@
 .MyIdeaList {
-    @include flex_col(flex-start);
+  @include flex_col(flex-start);
+  width: 100%;
+
+  .grid {
+    @include flex_row(flex-start, flex-start);
+
     width: 100%;
-
-    .grid {
-      @include flex_row(flex-start, flex-start);
-
-      width: 100%;
-
-      .gridColumn {
-        @include flex_col(flex-start);
-        background-clip: padding-box;
-        > div {
-          margin-bottom: 30px;
-        }
+
+    .gridColumn {
+      @include flex_col(flex-start);
+      background-clip: padding-box;
+      > div {
+        margin-bottom: 30px;
       }
     }
   }
-
+  .myIdeaTypography {
+    padding: 70px 0px;
+  }
+}
diff --git a/src/components/Idea/MyIdeaList/index.tsx b/src/components/Idea/MyIdeaList/index.tsx
@@ -5,6 +5,7 @@ import styles from './MyIdeaList.module.scss';
 import Spinner from '@src/components/common/Spinner';
 import IdeaMiniCardContainer from '@src/components/Idea/IdeaMiniCardContainer';
 import { useReadMyIdea } from '@src/hooks/useMyPageQuery';
+import Typography from '@src/components/common/Typography';
 
 const BREAKPOINT_COLS = {
   default: 4,
@@ -19,16 +20,26 @@ const MyIdeaList = () => {
   return (
     <div className={styles.MyIdeaList}>
       {isLoading && <Spinner />}
-      <Masonry
-        breakpointCols={BREAKPOINT_COLS}
-        className={styles.grid}
-        columnClassName={styles.gridColumn}
-      >
-        {!isError &&
-          data?.map((each) => (
-            <IdeaMiniCardContainer {...each} key={each.id} />
-          ))}
-      </Masonry>
+      {(data || []).length > 0 ? (
+        <Masonry
+          breakpointCols={BREAKPOINT_COLS}
+          className={styles.grid}
+          columnClassName={styles.gridColumn}
+        >
+          {!isError &&
+            data?.map((each) => (
+              <IdeaMiniCardContainer {...each} key={each.id} />
+            ))}
+        </Masonry>
+      ) : (
+        <Typography
+          className={styles.myIdeaTypography}
+          fontSize="md"
+          textColor="lightGray"
+        >
+          아직 작성된 글이 없습니다.
+        </Typography>
+      )}
     </div>
   );
 };

diff --git a/src/components/MySideList/MySideList.module.scss b/src/components/MySideList/MySideList.module.scss
@@ -1,20 +1,23 @@
 .MySideList {
-    @include flex_col(flex-start);
+  @include flex_col(flex-start);
+  width: 100%;
+
+  .grid {
+    @include flex_row(flex-start, flex-start);
+
     width: 100%;
-
-    .grid {
-      @include flex_row(flex-start, flex-start);
-
-      width: 100%;
-      padding-top: 22px;
-
-      .gridColumn {
-        @include flex_col(flex-start);
-        background-clip: padding-box;
-        > div {
-          margin-bottom: 30px;
-        }
+    padding-top: 22px;
+
+    .gridColumn {
+      @include flex_col(flex-start);
+      background-clip: padding-box;
+      > div {
+        margin-bottom: 30px;
       }
     }
   }
-
+
+  .mySideTypography {
+    padding: 70px 0px;
+  }
+}
diff --git a/src/components/MySideList/index.tsx b/src/components/MySideList/index.tsx
@@ -6,6 +6,7 @@ import { useMyReadSides } from '@src/hooks/useSideQuery';
 import Spinner from '@src/components/common/Spinner';
 import SideCard from '@src/components//SideCard';
 import { useSideState } from '@src/store';
+import Typography from '@src/components/common/Typography';
 
 const BREAKPOINT_COLS = {
   default: 4,
@@ -21,13 +22,24 @@ const MySideList = () => {
   return (
     <div className={styles.MySideList}>
       {isLoading && <Spinner />}
-      <Masonry
-        breakpointCols={BREAKPOINT_COLS}
-        className={styles.grid}
-        columnClassName={styles.gridColumn}
-      >
-        {!isError && data?.map((each) => <SideCard {...each} key={each.id} />)}
-      </Masonry>
+      {(data || []).length > 0 ? (
+        <Masonry
+          breakpointCols={BREAKPOINT_COLS}
+          className={styles.grid}
+          columnClassName={styles.gridColumn}
+        >
+          {!isError &&
+            data?.map((each) => <SideCard {...each} key={each.id} />)}
+        </Masonry>
+      ) : (
+        <Typography
+          className={styles.mySideTypography}
+          fontSize="md"
+          textColor="lightGray"
+        >
+          아직 작성된 글이 없습니다.
+        </Typography>
+      )}
     </div>
   );
 };

diff --git a/src/pages/MyPage/MyPage.module.scss b/src/pages/MyPage/MyPage.module.scss
@@ -57,6 +57,11 @@
         margin-bottom: 50px;
         overflow-x: auto;
         gap: 20px;
+        .myAlarmTypography {
+          @include flex_row();
+          width: 100%;
+          padding: 70px 0px;
+        }
       }
     }
 

diff --git a/src/pages/MyPage/index.tsx b/src/pages/MyPage/index.tsx
@@ -11,6 +11,8 @@ import { useReadAlarm } from '@src/hooks/useMyPageQuery';
 import MyIdeaList from '@src/components/Idea/MyIdeaList';
 import MyCommentList from '@src/components/Comment/MyCommentList';
 import AlarmCardContainer from '@src/components/AlarmCardContainer';
+import useModalControl from '@src/hooks/useModalControl';
+import AlertModal from '@src/components/modals/AlertModal';
 
 interface MyPageProps {
   handleToTop?: () => void;
@@ -26,7 +28,14 @@ const MyPage = ({ handleToTop }: MyPageProps) => {
 
   const { data } = useGetUser(isAuth ?? false);
 
-  const { data: alarmData } = useReadAlarm();
+  const { data: alarmData } = useReadAlarm(isAuth ?? false);
+
+  const {
+    isModalVisible: isAlertVisible,
+    modalMessage: alertMessage,
+    showModal: showAlert,
+    hideModal: hideAlert,
+  } = useModalControl();
 
   return (
     <div className={styles.MyPage}>
@@ -44,23 +53,40 @@ const MyPage = ({ handleToTop }: MyPageProps) => {
           />
           <div className={styles.buttonArea}>
             <Button variant="text">회원정보수정</Button>
-            <Button variant="text">탈퇴하기</Button>
+            <Button
+              variant="text"
+              onClick={() =>
+                showAlert(
+                  '[email protected] 로 메일을 주시면 48시간 내에 처리하겠습니다.',
+                )
+              }
+            >
+              탈퇴하기
+            </Button>
           </div>
         </div>
-        {(alarmData || [])?.length > 0 && (
-          <div className={styles.alertContainer}>
-            <div className={styles.alertTitle}>
-              <Typography fontSize="md" textColor="black">
-                알람
-              </Typography>
-            </div>
-            <div className={styles.alarmCardArea}>
-              {alarmData?.map((props) => (
+        <div className={styles.alertContainer}>
+          <div className={styles.alertTitle}>
+            <Typography fontSize="md" textColor="black">
+              알람
+            </Typography>
+          </div>
+          <div className={styles.alarmCardArea}>
+            {(alarmData || [])?.length > 0 ? (
+              alarmData?.map((props) => (
                 <AlarmCardContainer key={props.id} {...props} />
-              ))}
-            </div>
+              ))
+            ) : (
+              <Typography
+                className={styles.myAlarmTypography}
+                fontSize="md"
+                textColor="lightGray"
+              >
+                새로운 알람이 없습니다.
+              </Typography>
+            )}
           </div>
-        )}
+        </div>
         <div className={styles.myContentContainer}>
           <div className={styles.tabArea}>
             <Button variant="text" onClick={() => setCurrentTab(MY_SIDE)}>
@@ -109,6 +135,14 @@ const MyPage = ({ handleToTop }: MyPageProps) => {
         iconName="expand_less"
         onClick={handleToTop}
       />
+      {isAlertVisible && (
+        <AlertModal
+          content={alertMessage}
+          handleConfirm={() => {
+            hideAlert();
+          }}
+        />
+      )}
     </div>
   );
 };

diff --git a/src/pages/SidePage/SidePage.module.scss b/src/pages/SidePage/SidePage.module.scss
@@ -18,6 +18,10 @@
       backdrop-filter: blur(30px);
 
       z-index: 100;
+
+      &.isGithubVisible {
+        z-index: 0;
+      }
 
       .Typography {
         width: fit-content;

diff --git a/src/pages/SidePage/index.tsx b/src/pages/SidePage/index.tsx
@@ -53,7 +53,7 @@ const SidePage = ({ handleToTop }: SidePageProps) => {
   } = useModalControl();
 
   const {
-    isModalVisible: isIdeaFormVisible,
+    isModalVisible: isGithubVisible,
     showModal: showGithubModal,
     hideModal: hideGithubModal,
   } = useModalControl();
@@ -66,7 +66,12 @@ const SidePage = ({ handleToTop }: SidePageProps) => {
   return (
     <div className={styles.SidePage}>
       <div className={styles.sideCardContainer}>
-        <div className={styles.sidePageTopArea}>
+        <div
+          className={cn(
+            styles.sidePageTopArea,
+            isGithubVisible && styles.isGithubVisible,
+          )}
+        >
           <Typography fontSize="xxl" fontWeight="bold">
             사이드
           </Typography>
@@ -173,7 +178,7 @@ const SidePage = ({ handleToTop }: SidePageProps) => {
           iconName="add"
         />
       )}
-      {isIdeaFormVisible && (
+      {isGithubVisible && (
         <SideGithubModal hideModal={hideGithubModal} showAlert={showAlert} />
       )}
       {isAlertVisible && (