Merge pull request #105 from GDG-Hackathon-77ia/feature#77

패이지 레이아웃 수정, 짜잘한 거 수정
GDG-Hackathon-77ia · Nov 15, 2024 · 3fda9cf · 3fda9cf
2 parents 61fc695 + 87622dc
commit 3fda9cf
Show file tree

Hide file tree

Showing 12 changed files with 64 additions and 39 deletions.
diff --git a/src/apis/auth/auth.ts b/src/apis/auth/auth.ts
@@ -50,7 +50,7 @@ export const kakaoLoginCallback_kkia = async (code: string): Promise<{ accessTok
     const response = await axiosInstance.get<{ accessToken: string; refreshToken: string }>(
         "/api/auth/oauth/kakao/callback",
         {
-            baseURL: "https://kkia.backapi.site", // 이 요청에서만 baseURL 설정
+            baseURL: "https://dandani.site", // 이 요청에서만 baseURL 설정
             params: { code },
         },
     );

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`
@@ -58,4 +55,5 @@ export const InputContainer = styled.div`
 export const MessageWrapper = styled.div<{ variant: "AI" | "USER" }>`
     display: flex;
     justify-content: ${(props) => (props.variant === "USER" ? "flex-end" : "flex-start")};
+    color: ${(props) => (props.variant === "USER" ? "white" : "black")}
 `;
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/MemoPage/index.style.ts b/src/pages/MemoPage/index.style.ts
@@ -31,19 +31,32 @@ export const SelectWrapper = styled.div`
 `;
 
 export const Select = styled.select`
-    padding: 5px 10px;
+    padding: 8px 12px;
     font-size: 16px;
     border: 1px solid var(--color-gray);
-    border-radius: 4px;
-    background-color: #ffffff;
-    color: #333;
+    border-radius: 8px;
+    background-color: var(--color-white);
+    color: var(--color-darkgray);
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+    transition: border-color 0.3s;
 
     &:focus {
         outline: none;
         border-color: var(--color-primary);
     }
 `;
 
+export const Option = styled.option`
+    font-size: 16px;
+    padding: 10px;
+    background-color: var(--color-white);
+    color: var(--color-darkgray);
+
+    &:hover {
+        background-color: var(--color-lightgray);
+    }
+`;
+
 export const DateText = styled.div`
     font-size: 20px;
     font-weight: bold;
@@ -67,7 +80,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 ? "var(--color-primary)" : isToday ? "#e0e0e0" : "transparent")};
     border-radius: 20px;
     padding: 5px 10px;
     min-width: 60px;
@@ -124,7 +137,7 @@ export const AddButton = styled.button`
     font-size: 40px;
     padding: 10px 20px;
     cursor: pointer;
-    background-color: #4caf50;
+    background-color: var(--color-primary);
     color: #ffffff;
 
     border-radius: 30px;
@@ -189,4 +202,4 @@ export const ButtonContainer = styled.div`
     display: flex;
     justify-content: space-between;
     gap: 10px;
-`;
+`;
diff --git a/src/pages/MemoPage/index.tsx b/src/pages/MemoPage/index.tsx
@@ -22,17 +22,20 @@ export const MemoPage = (): JSX.Element => {
     const calendarRef = useRef<HTMLDivElement | null>(null);
     const navigate = useNavigate();
 
-    // 오늘 날짜를 문자열 형식으로 가져오기
-    const today = new Date().toISOString().split("T")[0];
+    // 오늘 날짜를 한국 시간대로 가져오기
+    const today = new Date(new Date().getTime() + 9 * 60 * 60 * 1000).toISOString().split("T")[0];
 
     useEffect(() => {
         const fetchMemosForMonth = async () => {
-            const daysInMonth = new Date(currentYear, currentMonth, 0).getDate();
+            // const daysInMonth = new Date(currentYear, currentMonth, 0).getDate();
             const monthMemos: Memo[] = [];
+            const todayDay = new Date(new Date().getTime() + 9 * 60 * 60 * 1000).getDate();
 
-            for (let day = 1; day <= daysInMonth; day++) {
+            for (let day = todayDay - 5; day <= todayDay; day++) {
                 const date = `${currentYear}-${String(currentMonth).padStart(2, "0")}-${String(day).padStart(2, "0")}`;
-                const timestamp = new Date(date).toISOString().split(".")[0];
+                const localDate = new Date(`${date}T00:00:00+09:00`); // 한국 시간대 적용
+                const timestamp = localDate.toISOString().split(".")[0];
+
                 try {
                     const fetchedMemos = await getMemosByDate(timestamp);
                     fetchedMemos.forEach((memo) => {
@@ -55,7 +58,7 @@ export const MemoPage = (): JSX.Element => {
 
     // 오늘 날짜 설정 및 캘린더 위치 조정
     useEffect(() => {
-        const currentDate = new Date();
+        const currentDate = new Date(new Date().getTime() + 9 * 60 * 60 * 1000);
         const formattedDate = `${currentDate.getFullYear()}-${String(currentDate.getMonth() + 1).padStart(2, "0")}-${String(currentDate.getDate()).padStart(2, "0")}`;
         setSelectedDate(formattedDate);
 
@@ -74,7 +77,12 @@ export const MemoPage = (): JSX.Element => {
     const addMemo = useCallback(async () => {
         if (inputRef.current) {
             const content = inputRef.current.value;
-            const newMemo = { date: selectedDate, timestamp: new Date().toISOString().split(".")[0], content };
+
+            // 한국 시간대에 맞춰 timestamp 생성
+            const now = new Date(new Date().getTime() + 9 * 60 * 60 * 1000);
+            const newTimestamp = now.toISOString().slice(0, 19); // 소수점 이하 제외
+
+            const newMemo = { date: selectedDate, timestamp: newTimestamp, content };
             setMemos((prevMemos) => [...prevMemos, newMemo]);
 
             try {
@@ -105,16 +113,16 @@ export const MemoPage = (): JSX.Element => {
                     <Styles.SelectWrapper>
                         <Styles.Select onChange={(e) => setCurrentYear(Number(e.target.value))} value={currentYear}>
                             {[2023, 2024, 2025].map((year) => (
-                                <option key={year} value={year}>
+                                <Styles.Option key={year} value={year}>
                                     {year}년
-                                </option>
+                                </Styles.Option>
                             ))}
                         </Styles.Select>
                         <Styles.Select onChange={(e) => setCurrentMonth(Number(e.target.value))} value={currentMonth}>
                             {Array.from({ length: 12 }, (_, i) => i + 1).map((month) => (
-                                <option key={month} value={month}>
+                                <Styles.Option key={month} value={month}>
                                     {month}월
-                                </option>
+                                </Styles.Option>
                             ))}
                         </Styles.Select>
                     </Styles.SelectWrapper>

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/ResultPage/index.tsx b/src/pages/ResultPage/index.tsx
@@ -4,9 +4,11 @@ import { Text } from "@/components/Text";
 import * as Styles from "./index.style";
 import { TextArea } from "@/components/TextArea";
 import { useGetResult } from "@/hooks/ResultPage/useGetResult";
+import { useNavigate } from "react-router-dom";
 
 export const ResultPage = () => {
     const { data, loading, error } = useGetResult();
+    const navi = useNavigate();
 
     // 로딩 중, 에러, 정상 데이터의 상태에 따라 placeholder 내용을 결정
     const placeholderText = loading
@@ -17,7 +19,7 @@ export const ResultPage = () => {
 
     return (
         <Styles.Container>
-            <PageBar pageName="진단 결과" />
+            <PageBar pageName="진단 결과" onClick={() => navi("/mypage")}/>
             <Styles.TextContainer>
                 <Text size="s" weight="bold">
                     작성한 답변들로 분석해보았어요

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`