fix: Page layout 수정

GDG-Hackathon-77ia · Nov 15, 2024 · 944d17c · 944d17c
1 parent 41dd413
commit 944d17c
Show file tree

Hide file tree

Showing 8 changed files with 20 additions and 19 deletions.
diff --git a/src/components/PageBar/index.style.ts b/src/components/PageBar/index.style.ts
@@ -4,7 +4,8 @@ import backArrow from "../../assets/backarrow.png";
 
 export const Container = styled.div`
     height: 70px;
-    width: 100%;
+    width: 440px;
+    margin: 0 auto;
 
     background-color: var(--color-white);
     border-bottom-style: solid;

diff --git a/src/pages/CharacterPage/index.style.ts b/src/pages/CharacterPage/index.style.ts
@@ -1,14 +1,13 @@
 import styled from "@emotion/styled";
 
 export const Container = styled.div`
-    max-width: 400px;
+    max-width: 440px;
     height: 100vh;
     margin: 0 auto;
 
     display: flex;
     flex-direction: column;
     justify-content: center;
-    align-items: center;
 
     gap: 60px;
 `;
@@ -48,12 +47,23 @@ export const Logo = styled.button`
 
 export const CharacterItem = styled.div`
     width: 100%;
+    position: relative; /* 자식 요소들 위치 고정을 위한 상대 위치 */
 
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     gap: 20px;
+    
+    & > *:first-child {
+        position: absolute;
+        top: -30px; /* 상단 텍스트 위치 고정 */
+    }
+    
+    & > *:last-child {
+        position: absolute;
+        bottom: -30px; /* 하단 텍스트 위치 고정 */
+    }
 `;
 
 export const BarContainer = styled.div`
@@ -79,4 +89,4 @@ export const ButtonContainer = styled.div`
     display: flex;
     align-items: center;
     justify-content: space-between;
-`;
+`;
diff --git a/src/pages/ChatPage/index.style.ts b/src/pages/ChatPage/index.style.ts
@@ -28,9 +28,6 @@ export const FixedHeader = styled.div`
     position: fixed;
     top: 0;
     left: 0;
-
-    z-index: 10;
-    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
 `;
 
 export const ChatContainer = styled.div`

diff --git a/src/pages/CheckStartPage/index.style.ts b/src/pages/CheckStartPage/index.style.ts
@@ -20,9 +20,9 @@ export const TextContainer = styled.div`
 `;
 
 export const Wrapper = styled.div`
-    margin-top: 300px;
+    margin-top: 200px;
     display: flex;
     flex-direction: column;
     align-items: center;
-    gap: 120px;
+    gap: 220px;
 `;
diff --git a/src/pages/MainPage/index.style.ts b/src/pages/MainPage/index.style.ts
@@ -10,7 +10,7 @@ export const Container = styled.div`
     justify-content: center;
     align-items: center;
 
-    gap: 40px;
+    gap: 20px;
 `;
 
 export const Header = styled.div`
@@ -56,7 +56,7 @@ export const HeaderIcons = styled.div`
 
 export const QContainer = styled.button`
     width: 100%;
-    min-height: 200px;
+    min-height: 120px;
 
     background-color: var(--color-secondary);
 
@@ -66,7 +66,7 @@ export const QContainer = styled.button`
     flex-direction: column;
 
     padding: 30px;
-    gap: 40px;
+    gap: 30px;
 
     margin-top: 20px;
 

diff --git a/src/pages/PointRecordPage/index.style.ts b/src/pages/PointRecordPage/index.style.ts
@@ -18,8 +18,6 @@ export const FixedHeader = styled.div`
     top: 0;
     left: 0;
     width: 100%;
-    z-index: 10;
-    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
 `;
 
 export const RecordContainer = styled.div`

diff --git a/src/pages/RecordPage/index.style.ts b/src/pages/RecordPage/index.style.ts
@@ -117,6 +117,4 @@ export const FixedHeader = styled.div`
     top: 0;
     left: 0;
     width: 100%;
-    z-index: 10;
-    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
 `;
diff --git a/src/pages/WriteDiaryPage/index.style.ts b/src/pages/WriteDiaryPage/index.style.ts
@@ -22,9 +22,6 @@ export const FixedHeader = styled.div`
     position: fixed;
     top: 0;
     left: 0;
-
-    z-index: 10;
-    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
 `;
 
 export const TextContainer = styled.div`