${realSearchText}`
+ )
+ }}
+ />
+
+ ))}
+
+
+ ) : null}
+
+ {!resultExist && isStartSearch ? (
+
+ ๊ฒ์ ๊ฒฐ๊ณผ๊ฐ ์กด์ฌํ์ง ์์์! ใ
ใ
+
+ ) : (
+
+ {Object.entries(searchResult).map(([day, expenseList]) => (
+
+ ))}
+
+ )}
+
+
+ );
+};
+
+export default Search;
+
+const SearchContainer = styled.div`
+ position: relative;
+ top: 20px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ min-width: 100%;
+ min-height: 800px;
+ max-width: 100;
+ max-height: 800px;
+`;
+
+const SearchTitle = styled.div`
+ font-weight: 700;
+ font-size: 2em;
+ margin: 24px;
+`;
+
+const SearchInputContainer = styled.div`
+ position: relative;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ gap: 12px;
+ width: 330px;
+ max-width: 330px;
+ height: 45px;
+ border: 0;
+ svg {
+ width: 30px;
+ height: 30px;
+ path {
+ }
+ }
+`;
+
+const SearchInput = styled(Input)`
+ width: 300px;
+ height: 50px;
+ outline: none;
+ border-radius: 10px;
+ border: 1px solid var(--base-color-grey);
+ padding-left: 10px;
+ background-color: #ffffff;
+`;
+
+const SearchResultContainer = styled.div``;
+
+const AutoSearchContainer = styled.div`
+ position: relative;
+ display: block;
+ width: 300px;
+ min-height: 100px;
+ border: 2px solid var(--base-color-grey);
+ border-radius: 10px;
+ padding: 15px;
+ margin-right: 40px;
+ background-color: #ffffff;
+ z-index: 9;
+ &.active {
+ display: none;
+ }
+`;
+
+const AutoSearchWrap = styled.ul``;
+
+const AutoSearchData = styled.li`
+ list-style: none;
+ padding: 6px 8px;
+ width: 100%;
+ font-size: 14px;
+ font-weight: bold;
+ z-index: 4;
+ letter-spacing: 2px;
+ &:hover {
+ background-color: #edf5f5;
+ cursor: pointer;
+ }
+ position: relative;
+ img {
+ position: absolute;
+ right: 5px;
+ width: 18px;
+ top: 50%;
+ transform: translateY(-50%);
+ }
+`;
+
+const ResultContainer = styled.div`
+ display: block;
+ position: absolute;
+ top: 150px;
+`;
diff --git a/src/store/useExpensesStore.ts b/src/store/useExpensesStore.ts
new file mode 100644
index 00000000..04a7b383
--- /dev/null
+++ b/src/store/useExpensesStore.ts
@@ -0,0 +1,24 @@
+import { create } from "zustand";
+import { searchRes, search } from "@/types/apiTypes";
+
+type Store = {
+ yearList: searchRes;
+ setYearList: (lists: searchRes) => void;
+ totalLists: searchRes;
+ setTotalLists: (lists: searchRes) => void;
+ monthList: searchRes;
+ setMonthList: (lists: searchRes) => void;
+ dayList: { [key: string]: search[] };
+ setDayList: (lists: { [key: string]: search[] }) => void;
+};
+
+export const useExpensesStore = create
((set) => ({
+ totalLists: [],
+ setTotalLists: (lists: searchRes) => set({ totalLists: lists }),
+ yearList: [],
+ setYearList: (lists: searchRes) => set({ yearList: lists }),
+ monthList: [],
+ setMonthList: (lists: searchRes) => set({ monthList: lists }),
+ dayList: {},
+ setDayList: (lists: { [key: string]: search[] }) => set({ dayList: lists })
+}));
diff --git a/src/store/useTimeStore.ts b/src/store/useTimeStore.ts
new file mode 100644
index 00000000..74123627
--- /dev/null
+++ b/src/store/useTimeStore.ts
@@ -0,0 +1,38 @@
+import { create } from "zustand";
+
+type Store = {
+ currentYear: string;
+ setCurrentYear: (year: string) => void;
+ currentMonth: string;
+ setCurrentMonth: (month: string) => void;
+ currentDay: string;
+ setCurrentDay: (day: string) => void;
+ currentHour: string;
+ setCurrentHour: (hour: string) => void;
+ currentMinute: string;
+ setCurrentMinute: (minute: string) => void;
+ currentFullDate: string;
+ setFullDate: (fulldate: string) => void;
+};
+
+const dateFormat = (currentNumber: string) => {
+ if (currentNumber.length === 1) {
+ return `0${currentNumber}`;
+ } else return currentNumber;
+};
+
+export const useTimeStore = create((set) => ({
+ currentYear: String(new Date().getFullYear()),
+ setCurrentYear: (year: string) => set({ currentYear: year }),
+ currentMonth: dateFormat(String(new Date().getMonth() + 1)),
+ setCurrentMonth: (month: string) => set({ currentMonth: dateFormat(month) }),
+ currentDay: dateFormat(String(new Date().getDate())),
+ setCurrentDay: (day: string) => set({ currentDay: dateFormat(day) }),
+ currentHour: dateFormat(String(new Date().getHours())),
+ setCurrentHour: (hour: string) => set({ currentHour: dateFormat(hour) }),
+ currentMinute: dateFormat(String(new Date().getMinutes())),
+ setCurrentMinute: (minute: string) => set({ currentMinute: dateFormat(minute) }),
+
+ currentFullDate: String(new Date().toISOString),
+ setFullDate: (fullDate: string) => set({ currentFullDate: fullDate })
+}));
diff --git a/src/store/useUserStore.ts b/src/store/useUserStore.ts
new file mode 100644
index 00000000..b3b1d176
--- /dev/null
+++ b/src/store/useUserStore.ts
@@ -0,0 +1,94 @@
+import { create } from "zustand";
+import { v4 as uuidv4 } from "uuid";
+
+type Store = {
+ userId: string | null;
+ userNickname: string | null;
+ initializeUserId: () => void;
+};
+
+const adjectives = [
+ "ํ๋ณตํ",
+ "๋น๋๋",
+ "์ฆ๊ฑฐ์ด",
+ "๋งค๋ ฅ์ ์ธ",
+ "์ด์ ์ ์ธ",
+ "์ ์พํ",
+ "์ฌ๋์ค๋ฌ์ด",
+ "์ฐฝ์กฐ์ ์ธ",
+ "์ ๋น๋ก์ด",
+ "ํ๋ คํ",
+ "์ฐ์ํ",
+ "์ฉ๊ฐํ",
+ "์์ ๋ก์ด",
+ "๋์ฒ์ ์ธ",
+ "ํ๊ธฐ์ฐฌ",
+ "ํํ๋ก์ด",
+ "๊ท์ฌ์ด",
+ "๊ธฐ๋ฌํ",
+ "์ฌ๋ ค๊น์",
+ "์์ํ",
+ "๊ทผ๋ฉดํ",
+ "์ฑ์คํ",
+ "๋๋ดํ",
+ "์๋์ค๋ฌ์ด",
+ "๊ฐ๋ ฅํ",
+ "๊ธฐ๋ถ์ข์",
+ "์น์ ํ",
+ "๊ธฐ์",
+ "๋ฐ์",
+ "๋ฉ์ง"
+];
+
+const animals = [
+ "์ฌ์",
+ "ํ ๋ผ",
+ "ํธ๋์ด",
+ "์ฝ๋ผ๋ฆฌ",
+ "์์ญ์ด",
+ "ํญ๊ท",
+ "๊ณ ์์ด",
+ "๊ฐ์์ง",
+ "ํ ๋ฆฌ์นธ",
+ "๊ธฐ๋ฆฐ",
+ "์ฌ์ด",
+ "๊ณฐ",
+ "ํ๋ค",
+ "๋๋",
+ "๊ฐ๋งค๊ธฐ",
+ "๋
์๋ฆฌ",
+ "๋น๋๊ธฐ",
+ "ํ์คํฐ",
+ "์ฌ๋ง์ฌ์ฐ",
+ "์ฝ์๋ผ",
+ "ํ ๋ฆฌ์นธ",
+ "๋ฌผ์",
+ "๋๋ฌด๋๋ณด",
+ "ํ๋
์ด",
+ "๋ค๋์ฅ",
+ "์๋์ฝ๋ค",
+ "ํ๋ผ๋ฐ๊ณ ",
+ "์ฝ๋ฟ์",
+ "๊ธฐ๋ฆฐ",
+ "ํฐ๋ผ๋
ธ์ฌ์ฐ๋ฅด์ค"
+];
+
+export const useUserStore = create((set) => ({
+ userId: localStorage.getItem("userId"),
+ userNickname: localStorage.getItem("userNickname"),
+
+ initializeUserId: () => {
+ let id = localStorage.getItem("userId");
+ let nickname = localStorage.getItem("userNickname");
+ if (!id || !nickname) {
+ id = uuidv4();
+ localStorage.setItem("userId", id);
+
+ const randomAdj = adjectives[Math.floor(Math.random() * adjectives.length)];
+ const randomAnimal = animals[Math.floor(Math.random() * animals.length)];
+ nickname = `${randomAdj} ${randomAnimal}`;
+ localStorage.setItem("userNickname", nickname);
+ }
+ set({ userId: id, userNickname: nickname });
+ }
+}));
diff --git a/src/styles/GlobalStyles.styles.ts b/src/styles/GlobalStyles.styles.ts
new file mode 100644
index 00000000..7da77ac0
--- /dev/null
+++ b/src/styles/GlobalStyles.styles.ts
@@ -0,0 +1,64 @@
+import { createGlobalStyle } from "styled-components";
+
+const GlobalStyles = createGlobalStyle`
+ :root {
+ --base-color-white: #f5f5f5;
+ --base-color-lightgrey: #f2f2f2;
+ --base-color-grey: #d9d9d9;
+ --base-color-black: #333333;
+ --point-color-blue: #47b8e0;
+ --point-color-yellow: #ffc952;
+ --point-color-green: #34be3a;
+ --point-color-red: #ff7473;
+
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ position : relative;
+ top: calc(50% - 422px);
+ bottom: 0;
+ left: 0;
+ right: 0;
+ margin: 0 auto;
+ width: 390px;
+ height: 844px;
+ /* background-color: var(--base-color-black); */
+ /* box-shadow: 0 4px 10px -4px var(--point-color-green); */
+ }
+
+ * {
+ font-family: 'SUITE Variable', 'sans-serif';
+ box-sizing: border-box;
+ }
+
+ a {
+ text-decoration: none;
+ color: var(--base-color-black);
+ }
+
+ h1 {
+ font-weight: 700;
+ }
+
+ h3 {
+ font-weight: 400;
+ }
+
+ div {
+ font-weight: 400;
+ }
+ ul {
+ padding: 0;
+ }
+ input, textarea, button {
+ appearance: none;
+ -moz-appearance: none;
+ -webkit-appearance: none;
+ border-radius: 0;
+ -webkit-border-radius: 0;
+ -moz-border-radius: 0;
+}
+`;
+
+export default GlobalStyles;
diff --git a/src/types/apiTypes.ts b/src/types/apiTypes.ts
new file mode 100644
index 00000000..82f255d6
--- /dev/null
+++ b/src/types/apiTypes.ts
@@ -0,0 +1,90 @@
+// 1. ์๋น ๊ธฐ๋ก ์์ฑ api
+// POST /expenses
+// Content-Type: application/json
+export interface ExpenseReq {
+ amount: number;
+ userId: string;
+ category: string;
+ date: string;
+}
+// ์๋ต ๋ฐ์ดํฐ
+export interface ExpenseRes {
+ message: string;
+}
+
+// 2. ์๋น ํ๋ชฉ ๋ชฉ๋ก API Request
+// GET /categories?userId={userId}
+// requestBody ์์
+// ์๋ต ๋ฐ์ดํฐ
+export type categoryRes = string[];
+
+// 3. ๊ฒ์์ด์ ํด๋นํ๋ ์๋น ํญ๋ชฉ ๋ฐ ๊ธ์ก ์กฐํ api
+// GET /expenses/search?q={keyword}&userId={userId}
+// requestBody ์์
+// ์๋ต ๋ฐ์ดํฐ
+export type searchRes = search[];
+export interface search {
+ _id: string;
+ amount: number;
+ userId: string;
+ category: string;
+ date: string;
+}
+
+// 4. ์ผ๋ณ, ์ฃผ๋ณ, ์๋ณ ์๋น ์กฐํ
+// GET /expenses/summary?period={period}&userId={userId}
+// period : daily, weekly, monthly
+// ์์ฒญ ๋ฐ์ดํฐ ์์
+// ์๋ต ๋ฐ์ดํฐ
+export type periodRes = period[];
+export interface period {
+ _id: string;
+ totalAmount: number;
+}
+
+// 5. ์๋น ๊ธฐ๋ก ์์
+// PUT /expenses/${search._Id}
+// ์์ฒญ ๋ฐ์ดํฐ
+export interface editExpenseReq {
+ amount: number;
+ userId: string;
+ category: string;
+ date: string;
+}
+// ์๋ต ๋ฐ์ดํฐ
+export interface editExpenseRes {
+ message: string;
+}
+
+// 6. ์๋น๊ธฐ๋ก ์ญ์
+// DELETE /expenses/${search._Id}
+// ์์ฒญ ๋ฐ์ดํฐ ์์
+// ์๋ต ๋ฐ์ดํฐ
+export interface deleteExpenseRes {
+ message: string;
+}
+
+// 7. ์๋น๊ธฐ๋ก ๋ฌ๋ ฅ ํธ์ถ
+// GET /expenses/calendar?year=2023&month=7&userId={userId}
+// ์์ฒญ ๋ฐ์ดํฐ ์์
+// ์๋ต ๋ฐ์ดํฐ
+export interface calendarRes {
+ [key: string]: calendarItem[];
+}
+interface calendarItem {
+ _id: string;
+ amount: number;
+ userId: string;
+ category: string;
+ date: string;
+}
+
+// ์นดํ
๊ณ ๋ฆฌ์ ํด๋นํ๋ ์๋น ํญ๋ชฉ ๋ฐ ๊ธ์ก ์กฐํ
+// GET /expenses/category?q={keyword}&userId={userId}
+// ์์ฒญ ๋ฐ์ดํฐ ์์
+// ์๋ต ๋ฐ์ดํฐ
+export type searchCategoryRes = search[];
+
+export interface ObjectData {
+ [key: string]: search[];
+}
diff --git a/src/types/common.ts b/src/types/common.ts
new file mode 100644
index 00000000..24e4cfb2
--- /dev/null
+++ b/src/types/common.ts
@@ -0,0 +1,25 @@
+export type pixabayRes = pixabayHit[];
+export interface pixabayHit {
+ id: number;
+ pageURL: string;
+ type: string;
+ tags: string;
+ previewURL: string;
+ previewWidth: number;
+ previewHeight: number;
+ webformatURL: string;
+ webformatWidth: number;
+ webformatHeight: number;
+ largeImageURL: string;
+ imageWidth: number;
+ imageHeight: number;
+ imageSize: number;
+ views: number;
+ downloads: number;
+ collections: number;
+ likes: number;
+ comments: number;
+ user_id: number;
+ user: string;
+ userImageURL: string;
+}
diff --git a/src/utils/date.ts b/src/utils/date.ts
new file mode 100644
index 00000000..7dbd945d
--- /dev/null
+++ b/src/utils/date.ts
@@ -0,0 +1,57 @@
+import moment from "moment";
+
+// ํน์ ์ผ์ ๊ธฐ์ค ํด๋น ์ฃผ์ฐจ ๊ตฌํ๊ธฐ
+export const getWeekNumber = (dateFrom = new Date()) => {
+ // ํด๋น ๋ ์ง (์ผ)
+ const currentDate = dateFrom.getDate();
+
+ // ์ด๋ฒ ๋ฌ 1์ผ๋ก ์ง์
+ const startOfMonth = new Date(dateFrom.setDate(1));
+
+ // ์ด๋ฒ ๋ฌ 1์ผ์ด ๋ฌด์จ ์์ผ์ธ์ง ํ์ธ
+ const weekDay = startOfMonth.getDay(); // 0: Sun ~ 6: Sat
+
+ // ((์์ผ - 1) + ํด๋น ๋ ์ง) / 7์ผ๋ก ๋๋๊ธฐ = N ์ฃผ์ฐจ
+ return Math.ceil((weekDay + currentDate) / 7);
+};
+
+// ํน์ ์ผ์ ๊ธฐ์ค ํด๋น ์ฃผ์ฐจ ์์์ผ/์ข
๋ฃ์ผ ๊ตฌํ๊ธฐ
+export const getWeekRange = (dateFrom = new Date(), weekNumber: number) => {
+ // ์ด๋ฒ ๋ฌ 1์ผ๋ก ์ง์
+ const startOfMonth = new Date(dateFrom.setDate(1));
+
+ // ์ด๋ฒ ๋ฌ 1์ผ์ด ๋ฌด์จ ์์ผ์ธ์ง ํ์ธ
+ const weekDay = startOfMonth.getDay(); // 0: Sun ~ 6: Sat
+
+ // ์ฃผ์ฐจ์ ์์ ๋ ์ง ๊ณ์ฐ
+ const startDate = new Date(startOfMonth.setDate(1 + (weekNumber - 1) * 7 - weekDay));
+
+ // ์ฃผ์ฐจ์ ๋ ๋ ์ง ๊ณ์ฐ
+ const endDate = new Date(startDate);
+ endDate.setDate(endDate.getDate() + 6);
+
+ return [startDate, endDate];
+};
+
+export const getWeeksOfMonth = (year: number, month: number) => {
+ const weeks: string[] = [];
+ const firstDay = moment(`${year}-${month.toString().padStart(2, "0")}-01`);
+ const lastDay = firstDay.clone().endOf("month");
+
+ let currentWeekStart = firstDay.clone().startOf("week");
+ let currentWeekEnd = currentWeekStart.clone().endOf("week");
+
+ while (currentWeekStart.isSameOrBefore(lastDay)) {
+ weeks.push(`${currentWeekStart.format("MM-DD")} ~ ${currentWeekEnd.format("MM-DD")}`);
+ currentWeekStart.add(1, "week");
+ currentWeekEnd.add(1, "week");
+ }
+
+ return weeks;
+};
+
+export const getMonthRange = (year: number, month: number) => {
+ const firstDay = moment(`${year}-${month.toString().padStart(2, "0")}-01`);
+ const lastDay = firstDay.clone().endOf("month");
+ return `${firstDay.format("MM-DD")} ~ ${lastDay.format("MM-DD")}`;
+};
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
new file mode 100644
index 00000000..11f02fe2
--- /dev/null
+++ b/src/vite-env.d.ts
@@ -0,0 +1 @@
+///
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 00000000..05f81ff0
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,27 @@
+{
+ "compilerOptions": {
+ "baseUrl": ".",
+ "paths": { "@/*": ["src/*"] },
+ "target": "ES2021",
+ "useDefineForClassFields": true,
+ "lib": ["ES2021", "DOM", "DOM.Iterable"],
+ "module": "ESNext",
+ "skipLibCheck": true,
+
+ /* Bundler mode */
+ "moduleResolution": "bundler",
+ "allowImportingTsExtensions": true,
+ "resolveJsonModule": true,
+ "isolatedModules": true,
+ "noEmit": true,
+ "jsx": "react-jsx",
+
+ /* Linting */
+ "strict": true,
+ "noUnusedLocals": true,
+ "noUnusedParameters": true,
+ "noFallthroughCasesInSwitch": true
+ },
+ "include": ["src", "src/custom.d.ts"],
+ "references": [{ "path": "./tsconfig.node.json" }]
+}
diff --git a/tsconfig.node.json b/tsconfig.node.json
new file mode 100644
index 00000000..42872c59
--- /dev/null
+++ b/tsconfig.node.json
@@ -0,0 +1,10 @@
+{
+ "compilerOptions": {
+ "composite": true,
+ "skipLibCheck": true,
+ "module": "ESNext",
+ "moduleResolution": "bundler",
+ "allowSyntheticDefaultImports": true
+ },
+ "include": ["vite.config.ts"]
+}
diff --git a/vite.config.ts b/vite.config.ts
new file mode 100644
index 00000000..1479f0e7
--- /dev/null
+++ b/vite.config.ts
@@ -0,0 +1,12 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import tsconfigPaths from "vite-tsconfig-paths";
+
+// https://vitejs.dev/config/
+export default defineConfig({
+ plugins: [react(), tsconfigPaths()],
+ optimizeDeps: {
+ exclude: ["dayjs/plugin/isBetween"]
+ },
+ base: "/moayo"
+});
| 
| 
| 
+|Search ํ์ด์ง|Main ํ์ด์ง
+
-E.g, KDT0_BaeJinHo
+### Deployment
-ํ์ฌ ์ ์ฅ์๋ฅผ ๋ก์ปฌ์ ํด๋ก (Clone)ํฉ๋๋ค.
-์์ ์ ๋ณธ๋ช
์ผ๋ก ๋ธ๋์น๋ฅผ ์์ฑํฉ๋๋ค.(๊ตฌ๋ถ ๊ฐ๋ฅํ๋๋ก ๋ณธ๋ช
์ ๊ผญ ํ์ค์นผ์ผ์ด์ค๋ก ํ์ํ์ธ์, git branch KDTX_BaeJinHo)
-์์ ์ ๋ณธ๋ช
๋ธ๋์น์์ ๊ณผ์ ๋ฅผ ์ํํฉ๋๋ค.
-๊ณผ์ ์ํ์ด ์๋ฃ๋๋ฉด, ์์ ์ ๋ณธ๋ช
๋ธ๋์น๋ฅผ ์๊ฒฉ ์ ์ฅ์์ ํธ์(Push)ํฉ๋๋ค.(main ๋ธ๋์น์ ํธ์ํ์ง ์๋๋ก ๊ผญ ์ฃผ์ํ์ธ์, git push origin KDTX_BaeJinHo)
-์ ์ฅ์์์ main ๋ธ๋์น๋ฅผ ๋์์ผ๋ก Pull Request ์์ฑํ๋ฉด, ๊ณผ์ ์ ์ถ์ด ์๋ฃ๋ฉ๋๋ค!(E.g, main <== KDTX_BaeJinHo)
-main ํน์ ๋ค๋ฅธ ์ฌ๋์ ๋ธ๋์น๋ก ์ ๋ ๋ณํฉํ์ง ์๋๋ก ์ฃผ์ํ์ธ์!
-Pull Request์์ ๋ณด์ด๋ ์ค๋ช
์ ๋ค๋ฅธ ์ฌ๋๋ค์ด ์ดํดํ๊ธฐ ์ฝ๋๋ก ๊ผผ๊ผผํ๊ฒ ์์ฑํ์ธ์!
-Pull Request์์ ๊ณผ์ ์ ์ถ ํ ์ ๋ ๋ณํฉ(Merge)ํ์ง ์๋๋ก ์ฃผ์ํ์ธ์!
-๊ณผ์ ์ํ ๋ฐ ์ ์ถ ๊ณผ์ ์์ ๋ฌธ์ ๊ฐ ๋ฐ์ํ ๊ฒฝ์ฐ, ๋ฐ๋ก ๋ด๋น ๋ฉํ ๋ ๊ฐ์ฌ์์ ์๊ธฐํ์ธ์!
+
+### Environment
-[ํ์ ๊ตฌํ]
-์ง์ถ ๋ด์ญ ์
๋ ฅ ํผ (์ง์ถ ๊ธ์ก, ์ง์ถํญ๋ชฉ, ์ง์ถ ๋ ์ง)
-์ง์ถ ๋ด์ญ ๋ชฉ๋ก(์ผ๋ฐ ๋ฆฌ์คํธํ, ์นผ๋ ๋ ํ ํ๊ธฐ ๊ฐ๋ฅ)
-์ง์ถ ๋ด์ญ ์์ ๋ฐ ์ญ์
+
