Merge: Feature -> Develop

수정
GDG-Hackathon-77ia · Nov 15, 2024 · 73f5e7d · 73f5e7d
2 parents 475380f + a08d587
commit 73f5e7d
Show file tree

Hide file tree

Showing 6 changed files with 57 additions and 25 deletions.
diff --git a/src/pages/CharacterPage/index.style.ts b/src/pages/CharacterPage/index.style.ts
@@ -3,13 +3,14 @@ import styled from "@emotion/styled";
 import logoImg from "@/assets/logo/logo.png";
 
 export const Container = styled.div`
-    max-width: 400px;
+    max-width: 440px;
     height: 100vh;
     margin: 0 auto;
 
+    padding: 20px;
+
     display: flex;
     flex-direction: column;
-    justify-content: center;
 
     gap: 60px;
 `;
@@ -58,7 +59,6 @@ export const CharacterItem = styled.div`
 
     display: flex;
     flex-direction: column;
-    justify-content: center;
     align-items: center;
     gap: 20px;
 

diff --git a/src/pages/CharacterPage/index.tsx b/src/pages/CharacterPage/index.tsx
@@ -20,6 +20,14 @@ export const CharacterPage = () => {
     };
 
     const { name, level, experience, refetch } = useGetCharacter();
+    let experience_scale = 0;
+    if (level === 1) {
+        experience_scale = Math.floor(experience / 1.5);
+    } else if (level === 2) {
+        experience_scale = Math.floor(experience / 3);
+    } else {
+        experience_scale = Math.floor(experience / 4.5);
+    }
     const { point, pointRefetch } = useGetPoint();
     const { upgradeExperience } = useUpGradeExperience();
 
@@ -62,7 +70,7 @@ export const CharacterPage = () => {
             </Styles.CharacterItem>
 
             <Styles.BarContainer>
-                <GrowBar1 experience={experience} />
+                <GrowBar1 experience={experience_scale} />
                 <Text size="s" color="gray" weight="normal">
                     보유 포인트: {point} point
                 </Text>

diff --git a/src/pages/MainPage/index.style.ts b/src/pages/MainPage/index.style.ts
@@ -3,13 +3,13 @@ import styled from "@emotion/styled";
 import logoImg from "@/assets/logo/logo.png";
 
 export const Container = styled.div`
-    max-width: 400px;
+    max-width: 440px;
     height: 100vh;
     margin: 0 auto;
 
+    padding: 20px;
     display: flex;
     flex-direction: column;
-    justify-content: center;
     align-items: center;
 
     gap: 20px;

diff --git a/src/pages/MemoPage/index.style.ts b/src/pages/MemoPage/index.style.ts
@@ -80,7 +80,8 @@ export const DateItem = styled.div<{ isSelected: boolean; isToday: boolean }>`
     cursor: pointer;
     font-size: 16px;
     color: ${({ isSelected }) => (isSelected ? "#ffffff" : "#333")};
-    background-color: ${({ isSelected, isToday }) => (isSelected ? "var(--color-primary)" : isToday ? "#e0e0e0" : "transparent")};
+    background-color: ${({ isSelected, isToday }) =>
+        isSelected ? "var(--color-primary)" : isToday ? "#e0e0e0" : "transparent"};
     border-radius: 20px;
     padding: 5px 10px;
     min-width: 60px;
@@ -97,6 +98,10 @@ export const SelectedDate = styled.div`
     width: 100%;
     margin-top: 20px;
     text-align: left;
+
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
 `;
 
 export const DayCounter = styled.div`
@@ -120,8 +125,8 @@ export const MemosContainer = styled.div`
 `;
 
 export const MemoItem = styled.div`
-    padding: 10px;
-    border-radius: 8px;
+    padding: 20px;
+    border-radius: 20px;
     background-color: #e0e0e0;
     font-size: 14px;
     line-height: 1.4;
@@ -193,13 +198,24 @@ export const InputContainer = styled.textarea`
     height: 100px;
     padding: 10px;
     font-size: 16px;
-    border-radius: 4px;
+    border-radius: 15px;
     border: 1px solid #ccc;
     resize: none;
+
+    &:focus {
+        outline: none;
+    }
 `;
 
 export const ButtonContainer = styled.div`
     display: flex;
     justify-content: space-between;
     gap: 10px;
-`;
+`;
+
+export const ContentContainer = styled.div`
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    padding: 20px;
+`;
diff --git a/src/pages/MemoPage/index.tsx b/src/pages/MemoPage/index.tsx
@@ -1,6 +1,8 @@
 import { useState, useRef, useCallback, useEffect } from "react";
 import { useNavigate } from "react-router-dom";
 
+import { Text } from "@/components/Text";
+
 import { Button } from "../../components/Button";
 import { PageBar } from "../../components/PageBar";
 import * as Styles from "./index.style";
@@ -148,18 +150,24 @@ export const MemoPage = (): JSX.Element => {
                 </Styles.Calendar>
             </Styles.UpWrapper>
 
-            <Styles.SelectedDate>
-                <Styles.DayCounter>DAY 1</Styles.DayCounter>
-                <Styles.MemoTitle>메모</Styles.MemoTitle>
-            </Styles.SelectedDate>
-
-            <Styles.MemosContainer>
-                {memos
-                    .filter((memo) => memo.date === selectedDate)
-                    .map((memo, index) => (
-                        <Styles.MemoItem key={index}>{memo.content}</Styles.MemoItem>
-                    ))}
-            </Styles.MemosContainer>
+            <Styles.ContentContainer>
+                <Styles.SelectedDate>
+                    <Text size="m" weight="bold" color="gray">
+                        DAY
+                    </Text>
+                    <Text size="m" weight="bold" color="black">
+                        메모
+                    </Text>
+                </Styles.SelectedDate>
+
+                <Styles.MemosContainer>
+                    {memos
+                        .filter((memo) => memo.date === selectedDate)
+                        .map((memo, index) => (
+                            <Styles.MemoItem key={index}>{memo.content}</Styles.MemoItem>
+                        ))}
+                </Styles.MemosContainer>
+            </Styles.ContentContainer>
 
             {/* 오늘 날짜인 경우에만 추가 버튼 표시 */}
             {selectedDate === today && (

diff --git a/src/pages/WriteDiaryPage/index.tsx b/src/pages/WriteDiaryPage/index.tsx
@@ -57,14 +57,14 @@ export const WriteDiaryPage = () => {
 
             <Styles.QContainer>
                 <Text size="m" weight="bold" color="black">
-                    2. 오늘의 감정은 어땠나요?
+                    2. 당신의 감정을 솔직하게 적어주세요.
                 </Text>
                 <TextArea ref={answer2Ref} variant="primary" width="100%" height="100px"></TextArea>
             </Styles.QContainer>
 
             <Styles.QContainer>
                 <Text size="m" weight="bold" color="black">
-                    3. 오늘의 하루를 한 줄로 표현해보세요.
+                    3. 추가적으로 남기고 싶은 말이 있나요?
                 </Text>
                 <TextArea ref={answer3Ref} variant="primary" width="100%" height="100px"></TextArea>
             </Styles.QContainer>