-
- 몇 시에
-
- 다녀오셨나요?
-
-
배변을 시작한 시간부터 적어주면 좋아요
+
+
+
-
08:00 오전
-
-
+
);
};
diff --git a/src/app/info/time/time.css.ts b/src/app/info/time/styles/time.css.ts
similarity index 100%
rename from src/app/info/time/time.css.ts
rename to src/app/info/time/styles/time.css.ts
diff --git a/src/app/info/time/styles/timePicker.css.ts b/src/app/info/time/styles/timePicker.css.ts
new file mode 100644
index 0000000..62cfc67
--- /dev/null
+++ b/src/app/info/time/styles/timePicker.css.ts
@@ -0,0 +1,9 @@
+import { style } from "@vanilla-extract/css";
+
+export const hourText = style({
+ fontSize: "70px",
+});
+
+export const amPmText = style({
+ fontSize: "35px",
+});
diff --git a/src/app/login/hook/index.ts b/src/app/login/hook/index.ts
deleted file mode 100644
index d8185f6..0000000
--- a/src/app/login/hook/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { useAuth } from "./useAuth";
diff --git a/src/app/my/page.tsx b/src/app/my/page.tsx
index ad5da5e..3bc953b 100644
--- a/src/app/my/page.tsx
+++ b/src/app/my/page.tsx
@@ -8,9 +8,9 @@ import { paddingSprinkles } from "../styles/padding.css";
import { gray300 } from "../styles/colors.css";
import { buttonOutLine, pointer } from "../styles/global.css";
import { useRouter } from "next/navigation";
-import { inputStyle } from "../styles/common/input.css";
import { useEffect, useState } from "react";
import { LocalStorage } from "../types/localStorageSchema";
+import { inputStyle } from "../components/common/input.css";
const Page = () => {
const router = useRouter();
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 4760acd..45d8cfc 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,4 +1,4 @@
-import LoginPage from "./login/loginPage";
+import LoginPage from "./auth/login/loginPage";
const page = () => {
return
;
diff --git a/src/app/record/components/calenderDropDown.tsx b/src/app/record/components/calenderDropDown.tsx
new file mode 100644
index 0000000..124e8f3
--- /dev/null
+++ b/src/app/record/components/calenderDropDown.tsx
@@ -0,0 +1,61 @@
+import { useRef, useEffect } from "react";
+import { dropDownButton, dropDownList, dropDownUL } from "../styles/datepicker.css";
+import { useCalenderContext } from "./recordCalender";
+
+const CalenderDropDown = () => {
+ const { startDateState, setStartDateState, isShow, setIsShow } = useCalenderContext();
+
+ const dropDownRef = useRef
(null);
+
+ const currentYear = new Date().getFullYear();
+ const currentMonth = new Date().getMonth();
+
+ const months = Array.from({ length: currentMonth + 1 }, (_, i) => ({
+ value: i,
+ label: `${currentYear}.${String(i + 1).padStart(2, "0")}`,
+ }));
+
+ const onClickDate = (month: number) => {
+ setIsShow(false);
+ setStartDateState(new Date(currentYear, month, 1));
+ };
+
+ useEffect(() => {
+ const onClickOutside = (event: MouseEvent) => {
+ if (dropDownRef.current && !dropDownRef.current.contains(event.target as Node)) {
+ setIsShow(false);
+ }
+ };
+
+ document.addEventListener("mousedown", onClickOutside);
+ return () => {
+ document.removeEventListener("mousedown", onClickOutside);
+ };
+ }, []);
+
+ return (
+
+
+ {isShow && (
+
+ {months.map((month) => (
+ -
+
+
+ ))}
+
+ )}
+
+
+
+
+ );
+};
+
+export default RecordPopup;
diff --git a/src/app/record/components/recordCalender.tsx b/src/app/record/components/recordCalender.tsx
new file mode 100644
index 0000000..1c4cf7b
--- /dev/null
+++ b/src/app/record/components/recordCalender.tsx
@@ -0,0 +1,78 @@
+import DatePicker from "react-datepicker";
+import "react-datepicker/dist/react-datepicker.css";
+import { ko } from "date-fns/locale/ko";
+import { flexSprinklesFc } from "@/app/components/common/utils/flex";
+import { gray300 } from "@/app/styles/colors.css";
+import { caption2 } from "@/app/styles/font.css";
+import { recordDateSection } from "../styles/record.css";
+
+import { datepickerWapper } from "../styles/datepicker.css";
+import { useRecordStore } from "@/app/store/record/recordStore";
+import { createContext, Dispatch, SetStateAction, useContext, useState } from "react";
+import CalenderDropDown from "./calenderDropDown";
+
+type CalenderContext = {
+ isShow: boolean;
+ setIsShow: Dispatch>;
+ startDateState: Date;
+ setStartDateState: (state: Date) => void;
+};
+
+const CalenderContext = createContext(undefined);
+
+const RecordCalender = ({ children }: { children: React.ReactNode }) => {
+ const [isShow, setIsShow] = useState(false);
+ const startDateState = useRecordStore((state) => state.startDate);
+ const setStartDateState = useRecordStore((state) => state.setStartDate);
+
+ return (
+
+ <>{children}
+
+ );
+};
+
+export const useCalenderContext = () => {
+ const context = useContext(CalenderContext);
+
+ if (!context) throw new Error("recordCalender 내에서 사용하기");
+
+ return context;
+};
+
+const Calender = () => {
+ const { startDateState, setStartDateState } = useCalenderContext();
+
+ const startOfYear = new Date(startDateState.getFullYear(), 0, 1);
+ return (
+ <>
+
+
+ 오늘 하루를 기록해 볼까요?
+
+ {
+ if (date !== null) {
+ setStartDateState(date);
+ }
+ }}
+ inline
+ minDate={startOfYear}
+ maxDate={new Date()}
+ renderCustomHeader={() => <>}
+ />
+
+ );
+};
+
+RecordCalender.Calender = Calender;
+
+export default RecordCalender;
diff --git a/src/app/record/layout.tsx b/src/app/record/layout.tsx
index 77f2bbe..7b27bc3 100644
--- a/src/app/record/layout.tsx
+++ b/src/app/record/layout.tsx
@@ -1,5 +1,5 @@
import Navigation from "../components/common/Navigation";
-import { recordWrapper, recordContainer } from "./record.css";
+import { recordContainer, recordWrapper } from "./styles/record.css";
const layout = ({ children }: { children: React.ReactNode }) => {
return (
diff --git a/src/app/record/page.tsx b/src/app/record/page.tsx
index 10f42e4..753305a 100644
--- a/src/app/record/page.tsx
+++ b/src/app/record/page.tsx
@@ -1,386 +1,31 @@
"use client";
import Image from "next/image";
-import { caption2, paragraph, paragraph3, semiBold } from "../styles/font.css";
-import { colors, gray150, gray300, gray400 } from "../styles/colors.css";
-import { paddingSprinkles } from "../styles/padding.css";
-import Memo from "../components/common/Memo";
-import Popup from "../components/common/Popup";
import { useRouter } from "next/navigation";
import { flexSprinklesFc } from "../components/common/utils/flex";
-import Button from "../components/common/Button";
-import { useState } from "react";
-import { pointer } from "../styles/global.css";
-import { recordDateSection, recordDate, plusIconBox, plusIcon } from "./record.css";
-import DateCircle from "../components/record/DateCircle";
+import { plusIconBox, plusIcon } from "./styles/record.css";
+import "react-datepicker/dist/react-datepicker.css";
+import RecordCalender from "./components/recordCalender";
+import RecordPopup from "./components/popup";
const Page = () => {
const router = useRouter();
- const [click, setClick] = useState(false);
+
return (
<>
- {click && (
-
-
-
-
- )}
+ {/* */}
-
-
- 오늘 하루를 기록해 볼까요?
-
-
-
-
일
-
월
-
화
-
수
-
목
-
금
-
토
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
) => void;
+
+ stoolAttributes: StoolAttributes;
+ setStoolAttributes: (attributes: Partial
) => void;
+
+ recordNote: string;
+ setRecordNote: (note: string) => void;
+};
+
+export const useInfoStore = create()(
+ immer((set) => ({
+ bowelTime: {
+ hour: 0,
+ minute: 0,
+ },
+ setBowelTime: (time) =>
+ set((draft) => {
+ draft.bowelTime = {
+ ...draft.bowelTime,
+ ...time,
+ };
+ }),
+
+ stoolAttributes: { consistency: "thin", shapeType: "poop-1" },
+ setStoolAttributes: (attributes) =>
+ set((draft) => {
+ draft.stoolAttributes = { ...draft.stoolAttributes, ...attributes };
+ }),
+
+ recordNote: "",
+ setRecordNote: (note) =>
+ set((draft) => {
+ draft.recordNote = note;
+ }),
+ }))
+);
+
+export default useInfoStore;
diff --git a/src/app/store/login/loginStore.ts b/src/app/store/login/loginStore.ts
deleted file mode 100644
index 3575f54..0000000
--- a/src/app/store/login/loginStore.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import { create } from "zustand";
-import { immer } from "zustand/middleware/immer";
-
-type LoginUiStore = {
- isLoginPopup: boolean;
- setIsLoginPopup: (state: boolean) => void;
-
- loginMessage: null | string;
- setLoginMessage: (state: string) => void;
-};
-
-export const useLoginUiStore = create()(
- immer((set) => ({
- isLoginPopup: false,
- setIsLoginPopup: (state) => {
- set((draft) => {
- draft.isLoginPopup = state;
- });
- },
- loginMessage: null,
- setLoginMessage: (state) => {
- set((draft) => {
- draft.loginMessage = state;
- });
- },
- }))
-);
diff --git a/src/app/store/popup/PopupStore.ts b/src/app/store/popup/PopupStore.ts
new file mode 100644
index 0000000..ce030d0
--- /dev/null
+++ b/src/app/store/popup/PopupStore.ts
@@ -0,0 +1,28 @@
+import { MessageType } from "@/app/types/schemas";
+import { create } from "zustand";
+import { immer } from "zustand/middleware/immer";
+
+type PopupStore = {
+ isPopup: boolean;
+ setIsPopup: (state: boolean) => void;
+
+ message: MessageType;
+ setMessage: (MessageType: string) => void;
+};
+
+export const usePopupStore = create()(
+ immer((set) => ({
+ isPopup: false,
+ setIsPopup: (state) => {
+ set((draft) => {
+ draft.isPopup = state;
+ });
+ },
+ message: null,
+ setMessage: (state) => {
+ set((draft) => {
+ draft.message = state;
+ });
+ },
+ }))
+);
diff --git a/src/app/store/record/recordStore.ts b/src/app/store/record/recordStore.ts
new file mode 100644
index 0000000..c08f0b1
--- /dev/null
+++ b/src/app/store/record/recordStore.ts
@@ -0,0 +1,18 @@
+import { create } from "zustand";
+import { immer } from "zustand/middleware/immer";
+
+type RecordStore = {
+ startDate: Date;
+ setStartDate: (state: Date) => void;
+};
+
+export const useRecordStore = create()(
+ immer((set) => ({
+ startDate: new Date(),
+ setStartDate: (state) => {
+ set((draft) => {
+ draft.startDate = state;
+ });
+ },
+ }))
+);
diff --git a/src/app/types/localStorageSchema.ts b/src/app/types/localStorageSchema.ts
index 81878f3..bd108d9 100644
--- a/src/app/types/localStorageSchema.ts
+++ b/src/app/types/localStorageSchema.ts
@@ -6,6 +6,7 @@ export type LocalStorageSchema = {
signup: z.infer;
signin: z.infer;
goal: string;
+ recordNote: string;
};
type LocalStorageMapper = {
@@ -35,7 +36,7 @@ export class LocalStorage {
}
set(target: LocalStorageSchema[T]): void {
- const value = this.mapper.toJson(target);
+ const value = target === "" ? JSON.stringify("") : this.mapper.toJson(target);
localStorage.setItem(this.key, value);
}
diff --git a/src/app/types/schemas.ts b/src/app/types/schemas.ts
new file mode 100644
index 0000000..1321506
--- /dev/null
+++ b/src/app/types/schemas.ts
@@ -0,0 +1,4 @@
+import { z } from "zod";
+
+export const messageSchema = z.string().nullable();
+export type MessageType = z.infer;