diff --git a/src/apis/auth/auth.ts b/src/apis/auth/auth.ts index cac1ec6..b5a5d2c 100644 --- 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 index e660a0e..37be91a 100644 --- 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 index 17e2547..a9473c1 100644 --- 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; -`; +`; \ No newline at end of file diff --git a/src/pages/ChatPage/index.style.ts b/src/pages/ChatPage/index.style.ts index 2444c53..3ea5521 100644 --- 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 index fc14689..6bea93a 100644 --- 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 index d625190..befe223 100644 --- 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 index 21b7b18..1d8b702 100644 --- a/src/pages/MemoPage/index.style.ts +++ b/src/pages/MemoPage/index.style.ts @@ -31,12 +31,14 @@ 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; @@ -44,6 +46,17 @@ export const Select = styled.select` } `; +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; -`; +`; \ No newline at end of file diff --git a/src/pages/MemoPage/index.tsx b/src/pages/MemoPage/index.tsx index de05af5..d593cf7 100644 --- a/src/pages/MemoPage/index.tsx +++ b/src/pages/MemoPage/index.tsx @@ -22,17 +22,20 @@ export const MemoPage = (): JSX.Element => { const calendarRef = useRef(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 => { setCurrentYear(Number(e.target.value))} value={currentYear}> {[2023, 2024, 2025].map((year) => ( - + ))} setCurrentMonth(Number(e.target.value))} value={currentMonth}> {Array.from({ length: 12 }, (_, i) => i + 1).map((month) => ( - + ))} diff --git a/src/pages/PointRecordPage/index.style.ts b/src/pages/PointRecordPage/index.style.ts index 188a84d..cb5d1b2 100644 --- 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 index dd76f54..e1b3f06 100644 --- 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 index 2d916bc..e7e7c17 100644 --- 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 ( - + navi("/mypage")}/> 작성한 답변들로 분석해보았어요 diff --git a/src/pages/WriteDiaryPage/index.style.ts b/src/pages/WriteDiaryPage/index.style.ts index 85d0034..669ee97 100644 --- 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`