Merge: Fix -> Develop

Page layout 수정
GDG-Hackathon-77ia · Nov 15, 2024 · 5b02329 · 5b02329
2 parents 11ae642 + 398cfb7
commit 5b02329
Show file tree

Hide file tree

Showing 11 changed files with 34 additions and 30 deletions.
diff --git a/src/hooks/CharacterSettingPage/useSettingCharacter.tsx b/src/hooks/CharacterSettingPage/useSettingCharacter.tsx
@@ -1,8 +1,9 @@
 import { useState } from "react";
+
 import { acquirePet, updatePetName } from "@/apis/pet/pet";
 
 export const useSettingCharacter = (type: "new" | "edit") => {
-    const [characterName, setCharacterName] = useState<string>("character");
+    const [characterName, setCharacterName] = useState<string>("단이");
     const [message, setMessage] = useState<string>("");
 
     const handleCharacterName = async (name: string) => {
@@ -29,4 +30,4 @@ export const useSettingCharacter = (type: "new" | "edit") => {
     };
 
     return { characterName, message, setCharacterName, handleCharacterName };
-};
+};
diff --git a/src/hooks/CharacterStartPage/useGetCharacterName.tsx b/src/hooks/CharacterStartPage/useGetCharacterName.tsx
@@ -14,6 +14,7 @@ export const useGetCharacterName = () => {
     useEffect(() => {
         fetchData();
     }, [fetchData]);
+    console.log(data);
 
-    return { data };
+    return { data, fetchData };
 };
diff --git a/src/pages/CharacterSettingPage/index.tsx b/src/pages/CharacterSettingPage/index.tsx
@@ -1,9 +1,12 @@
 import { useRef, useCallback, useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
+
 import { Button } from "@/components/Button";
 import { Temp } from "@/components/Temp";
 import { Text } from "@/components/Text";
+
 import { useSettingCharacter } from "@/hooks/CharacterSettingPage/useSettingCharacter";
+
 import * as Styles from "./index.style";
 
 export const CharacterSettingPage = () => {
@@ -24,10 +27,10 @@ export const CharacterSettingPage = () => {
         }
     }, [message]);
 
-    const updateName = useCallback(() => {
+    const updateName = useCallback(async () => {
         if (inputRef.current) {
             const newName = inputRef.current.value;
-            handleCharacterName(newName); // 새 이름 설정 및 API 호출
+            await handleCharacterName(newName); // 새 이름 설정 및 API 호출
         }
         handlePopUp();
     }, [handleCharacterName, handlePopUp]);
@@ -85,4 +88,4 @@ export const CharacterSettingPage = () => {
             )}
         </Styles.Container>
     );
-};
+};
diff --git a/src/pages/CheckEndPage/index.style.ts b/src/pages/CheckEndPage/index.style.ts
@@ -1,8 +1,8 @@
 import styled from "@emotion/styled";
 
 export const Container = styled.div`
-    max-width: 400px;
-    height: 100vh;
+    max-width: 440px;
+    height: min(100vh, 956px);
     margin: 0 auto;
 
     background-color: var(--color-primary);

diff --git a/src/pages/CheckPage/index.style.ts b/src/pages/CheckPage/index.style.ts
@@ -7,8 +7,8 @@ export const Container = styled.div`
     align-items: center;
     gap: 30px;
 
-    max-width: 400px;
-    height: 100%;
+    max-width: 440px;
+    height: min(100vh, 956px);
     margin: 0 auto;
 
     padding-bottom: 30px;

diff --git a/src/pages/CheckStartPage/index.style.ts b/src/pages/CheckStartPage/index.style.ts
@@ -1,10 +1,10 @@
 import styled from "@emotion/styled";
 
 export const Container = styled.div`
-    max-width: 400px;
-    height: 100vh;
+    max-width: 440px;
+    height: min(100vh, 956px);
     margin: 0 auto;
-    
+
     background-color: var(--color-primary);
     display: flex;
     flex-direction: column;

diff --git a/src/pages/MainPage/index.style.ts b/src/pages/MainPage/index.style.ts
@@ -2,7 +2,7 @@ import styled from "@emotion/styled";
 
 export const Container = styled.div`
     max-width: 400px;
-    height: 100%;
+    height: 100vh;
     margin: 0 auto;
 
     display: flex;

diff --git a/src/pages/MemoPage/index.style.ts b/src/pages/MemoPage/index.style.ts
@@ -1,12 +1,13 @@
 import styled from "@emotion/styled";
+
 import { Text } from "../../components/Text";
 
 export const ScreenContainer = styled.div`
     display: flex;
     flex-direction: column;
     align-items: center;
-    max-width: 400px;
-    height: 100vh;
+    max-width: 440px;
+    height: min(100vh, 956px);
     margin: 0 auto;
     gap: 30px;
 `;
@@ -66,8 +67,7 @@ export const DateItem = styled.div<{ isSelected: boolean; isToday: boolean }>`
     cursor: pointer;
     font-size: 16px;
     color: ${({ isSelected }) => (isSelected ? "#ffffff" : "#333")};
-    background-color: ${({ isSelected, isToday }) =>
-        isSelected ? "#4caf50" : isToday ? "#e0e0e0" : "transparent"};
+    background-color: ${({ isSelected, isToday }) => (isSelected ? "#4caf50" : isToday ? "#e0e0e0" : "transparent")};
     border-radius: 20px;
     padding: 5px 10px;
     min-width: 60px;
@@ -126,7 +126,7 @@ export const AddButton = styled.button`
     cursor: pointer;
     background-color: #4caf50;
     color: #ffffff;
-    
+
     border-radius: 30px;
     width: 70px;
     height: 48px;
@@ -189,4 +189,4 @@ export const ButtonContainer = styled.div`
     display: flex;
     justify-content: space-between;
     gap: 10px;
-`;
+`;
diff --git a/src/pages/MyPage/index.style.ts b/src/pages/MyPage/index.style.ts
@@ -1,11 +1,10 @@
 import styled from "@emotion/styled";
 
 export const Container = styled.div`
-    max-width: 400px;
-    height: 100vh;
-    max-height: 956px;
+    max-width: 440px;
+    height: min(100vh, 956px);
     margin: 0 auto;
-    
+
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -57,7 +56,7 @@ export const EditButton = styled.button`
     margin-left: 10px;
     font-size: 12px;
     font-weight: bold;
-    padding: 4px 8px; 
+    padding: 4px 8px;
     cursor: pointer;
     background-color: var(--color-primary);
     color: var(--color-white);

diff --git a/src/pages/RecordPage/index.style.ts b/src/pages/RecordPage/index.style.ts
@@ -4,8 +4,8 @@ import leftArrow from "@/assets/leftArrow.png";
 import rightArrow from "@/assets/rightArrow.png";
 
 export const Container = styled.div`
-    max-width: 400px;
-    height: 100%;
+    max-width: 440px;
+    height: min(100vh, 956px);
     margin: 0 auto;
 
     display: flex;

diff --git a/src/pages/ResultPage/index.style.ts b/src/pages/ResultPage/index.style.ts
@@ -2,10 +2,10 @@
 import styled from "@emotion/styled";
 
 export const Container = styled.div`
-    max-width: 400px;
-    height: 100vh;
+    max-width: 440px;
+    height: min(100vh, 956px);
     margin: 0 auto;
-    
+
     display: flex;
     flex-direction: column;
     align-items: center;