Merge pull request #265 from BCSDLab/feature/#271

fix: 탭/패드 사이즈에서 컨텐츠 가려지는 문제
BCSDLab · Feb 26, 2024 · af73f13 · af73f13
2 parents d52d67c + d0af3b2
commit af73f13
Show file tree

Hide file tree

Showing 3 changed files with 79 additions and 59 deletions.
diff --git a/src/pages/Follow/index.module.scss b/src/pages/Follow/index.module.scss
@@ -3,7 +3,6 @@
 .template {
   width: 100%;
   height: 100vh;
-  margin-left: 100px;
   padding-top: 60px;
   box-sizing: border-box;
 

diff --git a/src/pages/Setting/PC/PcSetting.module.scss b/src/pages/Setting/PC/PcSetting.module.scss
@@ -1,18 +1,45 @@
 $title: #ff7f23;
 
-.formContainer {
-  padding-right: 100px;
-  padding-bottom: 40px;
+.container {
+  width: 100%;
+  height: calc(100vh - 80px);
   display: flex;
   flex-direction: column;
-  align-items: flex-end;
+  align-items: center;
+  white-space: nowrap;
 }
 
-.selectContainer {
+.setting {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  box-sizing: border-box;
+  padding: 15px;
+}
+
+.menu {
+  width: 246px;
+  height: 100%;
+  margin-top: 160px;
+  display: flex;
+  flex-direction: column;
+
+  &__title {
+    font-size: 32px;
+    color: $title;
+    font-weight: 700;
+    margin-bottom: 70px;
+  }
+}
+
+.select-container {
   display: flex;
   flex-direction: column;
-  gap: 15px;
   align-items: flex-start;
+  gap: 15px;
 }
 
 .select {
@@ -49,27 +76,17 @@ $title: #ff7f23;
   }
 }
 
-.container {
+.content {
   display: flex;
+  flex-direction: row;
   align-items: center;
   justify-content: center;
-  width: 100%;
-  height: calc(100vh - 80px);
 }
 
-.setting {
-  width: 246px;
-  height: 100%;
-  margin-top: 160px;
+.formContainer {
   display: flex;
   flex-direction: column;
-
-  &__title {
-    font-size: 32px;
-    color: $title;
-    font-weight: 700;
-    margin-bottom: 70px;
-  }
+  align-items: flex-end;
 }
 
 .title {

diff --git a/src/pages/Setting/PC/index.tsx b/src/pages/Setting/PC/index.tsx
@@ -12,50 +12,54 @@ export default function PcSetting() {
   return (
     <div className={styles.container}>
       <div className={styles.setting}>
-        <div className={styles.setting__title}>설정</div>
-        <div className={styles.selectContainer}>
-          <div className={styles.select}>
-            <div className={cn({
-              [styles.select__mark]: true,
-              [styles['select__mark--appear']]: isAccount,
-            })}
-            />
-            <button
-              className={cn({
-                [styles.select__button]: true,
-                [styles['select__button--selected']]: isAccount,
+        <div className={styles.menu}>
+          <div className={styles.menu__title}>설정</div>
+          <div className={styles['select-container']}>
+            <div className={styles.select}>
+              <div className={cn({
+                [styles.select__mark]: true,
+                [styles['select__mark--appear']]: isAccount,
               })}
-              type="button"
-              onClick={() => setIsAccount(true)}
-            >
-              계정관리
-
-            </button>
-          </div>
-          <div className={styles.select}>
-            <div className={cn({
-              [styles.select__mark]: true,
-              [styles['select__mark--appear']]: !isAccount,
-            })}
-            />
-            <button
-              className={cn({
-                [styles.select__button]: true,
-                [styles['select__button--selected']]: !isAccount,
+              />
+              <button
+                className={cn({
+                  [styles.select__button]: true,
+                  [styles['select__button--selected']]: isAccount,
+                })}
+                type="button"
+                onClick={() => setIsAccount(true)}
+              >
+                계정관리
+              </button>
+            </div>
+            <div className={styles.select}>
+              <div className={cn({
+                [styles.select__mark]: true,
+                [styles['select__mark--appear']]: !isAccount,
               })}
-              type="button"
-              onClick={() => setIsAccount(false)}
-            >
-              서비스
-
-            </button>
+              />
+              <button
+                className={cn({
+                  [styles.select__button]: true,
+                  [styles['select__button--selected']]: !isAccount,
+                })}
+                type="button"
+                onClick={() => setIsAccount(false)}
+              >
+                서비스
+              </button>
+            </div>
           </div>
         </div>
+
+        <div className={styles.content}>
+          {isAccount ? <ManageAccount /> : <Service />}
+        </div>
       </div>
-      {isAccount ? <ManageAccount /> : <Service />}
-      <div className={styles.copyright}>
+
+      <footer className={styles.copyright}>
         <Copyright />
-      </div>
+      </footer>
     </div>
   );
 }