-
+
{expression}
: {meaning}
{sentence && (
-
+
{idx === -1 ? (
sentence
) : (
<>
{sentence.slice(0, idx)}
-
+
{sentence.slice(idx, idx + expression.length)}
{sentence.slice(idx + expression.length)}
@@ -60,11 +59,11 @@ export default function ListContent({
{memo && (
)}
diff --git a/src/app/(protected)/_components/modal/word/ModalBody.tsx b/src/app/(protected)/_components/modal/word/ModalBody.tsx
index 2ba16ff..e35c17d 100644
--- a/src/app/(protected)/_components/modal/word/ModalBody.tsx
+++ b/src/app/(protected)/_components/modal/word/ModalBody.tsx
@@ -11,7 +11,7 @@ type ModalBodyProps = {
export default function ModalBody({ register, errors }: ModalBodyProps) {
const InputStyles =
- "w-full border border-gray-300 px-3 py-2 text-sm text-black placeholder place-gray-100 focus:outline-none focus:ring-1 transition";
+ "w-full border border-gray-300 px-3 py-2 rounded-md text-sm text-black placeholder place-gray-100 focus:outline-none focus:ring-1 transition";
const SelectStyles =
"w-full appearance-none rounded-md border border-gray-300 px-3 py-2 pr-10 text-sm text-black bg-white focus:outline-none focus:ring-1 transition";
diff --git a/src/app/(protected)/dashboard/_components/RecentWords.tsx b/src/app/(protected)/dashboard/_components/RecentWords.tsx
index 09cdfd1..1868c7f 100644
--- a/src/app/(protected)/dashboard/_components/RecentWords.tsx
+++ b/src/app/(protected)/dashboard/_components/RecentWords.tsx
@@ -12,9 +12,7 @@ import ErrorState from "@/components/error-state/ErrorState";
export function RecentWords() {
const { data, isLoading, isError } = useWordsQuery();
const isMobile = useMobileSize();
-
const words = data?.words.slice(0, isMobile ? 2 : 4) ?? [];
-
return (
diff --git a/src/app/(protected)/dashboard/_components/record/RecordChart.tsx b/src/app/(protected)/dashboard/_components/record/RecordChart.tsx
index 61bee39..7b975a0 100644
--- a/src/app/(protected)/dashboard/_components/record/RecordChart.tsx
+++ b/src/app/(protected)/dashboard/_components/record/RecordChart.tsx
@@ -9,31 +9,25 @@ import { RecordChartToggle } from "./RecordLineChart/RecordChartToggle";
import { RecordChartView } from "./RecordLineChart/RecordChartView";
import { useAllWordsQuery } from "@/hooks/queries/words/useAllWordsQuery";
import EmptyState from "@/components/empty-state/EmptyState";
+import { Period, PERIOD_LABELS } from "@/types/chartPeriod";
export function RecordChart() {
const { data: words } = useAllWordsQuery();
const { dailyData, monthlyData, yearlyData } = useRecordChartData(words);
- const [period, setPeriod] = useState<"daily" | "monthly" | "yearly">("daily");
+ const [period, setPeriod] = useState
("daily");
- const chartData =
- period === "daily"
- ? dailyData
- : period === "monthly"
- ? monthlyData
- : yearlyData;
+ const chartDataMap: Record = {
+ daily: dailyData,
+ monthly: monthlyData,
+ yearly: yearlyData,
+ };
return (
@@ -42,7 +36,7 @@ export function RecordChart() {
{words?.length === 0 ? (
아직 저장된 표현가 없습니다.
) : (
-
+
)}
);
diff --git a/src/app/(protected)/dashboard/_components/record/RecordLineChart/RecordChartToggle.tsx b/src/app/(protected)/dashboard/_components/record/RecordLineChart/RecordChartToggle.tsx
index a2a6724..9f7277f 100644
--- a/src/app/(protected)/dashboard/_components/record/RecordLineChart/RecordChartToggle.tsx
+++ b/src/app/(protected)/dashboard/_components/record/RecordLineChart/RecordChartToggle.tsx
@@ -1,18 +1,11 @@
import Button from "@/components/button/Button";
-
-type Period = "daily" | "monthly" | "yearly";
+import { Period, PERIOD_OPTIONS } from "@/types/chartPeriod";
type Props = {
period: Period;
onChange: (period: Period) => void;
};
-const PERIOD_OPTIONS: { value: Period; label: string }[] = [
- { value: "daily", label: "일간" },
- { value: "monthly", label: "월간" },
- { value: "yearly", label: "연간" },
-];
-
export function RecordChartToggle({ period, onChange }: Props) {
return (
diff --git a/src/app/(protected)/dashboard/_components/record/RecordLineChart/RecordChartView.tsx b/src/app/(protected)/dashboard/_components/record/RecordLineChart/RecordChartView.tsx
index 4f470f0..c57a571 100644
--- a/src/app/(protected)/dashboard/_components/record/RecordLineChart/RecordChartView.tsx
+++ b/src/app/(protected)/dashboard/_components/record/RecordLineChart/RecordChartView.tsx
@@ -34,13 +34,13 @@ export function RecordChartView({ data }: ChartProps) {
fontSize: "12px",
borderRadius: "8px",
borderColor: "#E5E7EB",
- color: "#000",
+ color: "#1a1a1a",
}}
/>
diff --git a/src/app/(protected)/dashboard/_components/record/RecordLineChart/useRecordChartData.ts b/src/app/(protected)/dashboard/_components/record/RecordLineChart/useRecordChartData.ts
index 956e804..908d516 100644
--- a/src/app/(protected)/dashboard/_components/record/RecordLineChart/useRecordChartData.ts
+++ b/src/app/(protected)/dashboard/_components/record/RecordLineChart/useRecordChartData.ts
@@ -1,52 +1,20 @@
-// useRecordChartData.ts
import { WordsRequest } from "@/api/types/words";
+import { DATE_SLICE, defaultChart } from "@/utils/defaultChart";
import { useMemo } from "react";
export function useRecordChartData(words?: WordsRequest[]) {
- const dailyData = useMemo(() => {
- if (!words) return [];
-
- const map = new Map
();
-
- words.forEach((item) => {
- const dateKey = item.created_at.slice(0, 10);
- map.set(dateKey, (map.get(dateKey) ?? 0) + 1);
- });
-
- return Array.from(map.entries())
- .sort(([a], [b]) => a.localeCompare(b))
- .map(([date, count]) => ({ label: date, count }));
- }, [words]);
-
- const monthlyData = useMemo(() => {
- if (!words) return [];
-
- const map = new Map();
-
- words.forEach((item) => {
- const dateKey = item.created_at.slice(0, 7);
- map.set(dateKey, (map.get(dateKey) ?? 0) + 1);
- });
-
- return Array.from(map.entries())
- .sort(([a], [b]) => a.localeCompare(b))
- .map(([date, count]) => ({ label: date, count }));
- }, [words]);
-
- const yearlyData = useMemo(() => {
- if (!words) return [];
-
- const map = new Map();
-
- words.forEach((item) => {
- const dateKey = item.created_at.slice(0, 4);
- map.set(dateKey, (map.get(dateKey) ?? 0) + 1);
- });
-
- return Array.from(map.entries())
- .sort(([a], [b]) => a.localeCompare(b))
- .map(([date, count]) => ({ label: date, count }));
- }, [words]);
+ const dailyData = useMemo(
+ () => defaultChart(words, DATE_SLICE.daily),
+ [words],
+ );
+ const monthlyData = useMemo(
+ () => defaultChart(words, DATE_SLICE.monthly),
+ [words],
+ );
+ const yearlyData = useMemo(
+ () => defaultChart(words, DATE_SLICE.yearly),
+ [words],
+ );
return { dailyData, monthlyData, yearlyData };
}
diff --git a/src/app/(protected)/dashboard/page.tsx b/src/app/(protected)/dashboard/page.tsx
index 3c6c602..f884f46 100644
--- a/src/app/(protected)/dashboard/page.tsx
+++ b/src/app/(protected)/dashboard/page.tsx
@@ -21,15 +21,13 @@ export default function DashboardPage() {
>
-
);
}
diff --git a/src/app/globals.css b/src/app/globals.css
index 77b3327..7e1c085 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -14,7 +14,7 @@
}
.dark {
- --background: #121212;
+ --background: #222;
--foreground: #e5e7eb;
}
diff --git a/src/components/button/Button.tsx b/src/components/button/Button.tsx
index 0e61cf6..2c7f7ab 100644
--- a/src/components/button/Button.tsx
+++ b/src/components/button/Button.tsx
@@ -18,20 +18,20 @@ type ButtonProps =
});
const baseStyles =
- "inline-flex items-center justify-center gap-1 rounded-full text-sm font-medium transition-all focus:outline-none cursor-pointer hover:-translate-y-1 group-hover:-translate-y-1";
+ "inline-flex items-center justify-center gap-1 rounded-md text-sm font-medium transition-all focus:outline-none cursor-pointer hover:-translate-y-1 group-hover:-translate-y-1";
const variantStyles: Record = {
default: `
bg-point text-white
- px-4 py-3.5
+ p-2 md:px-4 md:py-3.5
`,
outline: `
border border-point text-point
bg-transparent
- px-4 py-3.5
+ p-2 md:px-4 md:py-3.5
hover:bg-point
dark:hover:bg-point
- dark:hover:text-white
+ hover:text-white
`,
text: `
diff --git a/src/components/input/Input.tsx b/src/components/input/Input.tsx
index 22cb282..d00656d 100644
--- a/src/components/input/Input.tsx
+++ b/src/components/input/Input.tsx
@@ -47,7 +47,7 @@ const Input = forwardRef(
onClick={onClick}
autoFocus={autoFocus}
className={clsx(
- "w-full rounded-full px-5 py-3.5 text-sm transition focus:outline-none",
+ "w-full rounded-md px-5 py-3.5 text-sm transition focus:outline-none",
errors
? "border border-red-500 focus:ring-2 focus:ring-red-500"
: "border border-gray-100 focus:ring-2 shadow-md focus:ring-gray-900",
diff --git a/src/hooks/queries/words/querykey.ts b/src/hooks/queries/words/querykey.ts
index 8670389..e4c1f0e 100644
--- a/src/hooks/queries/words/querykey.ts
+++ b/src/hooks/queries/words/querykey.ts
@@ -6,7 +6,7 @@ export const wordsQueryKeys = {
filter: FilterValue;
keyword: string;
wordId: string | null;
- page?: number;
+ page: number;
pageSize: number;
}) => [...wordsQueryKeys.all, params] as const,
};
diff --git a/src/hooks/queries/words/useWordsQuery.ts b/src/hooks/queries/words/useWordsQuery.ts
index 48ada24..baa4ba5 100644
--- a/src/hooks/queries/words/useWordsQuery.ts
+++ b/src/hooks/queries/words/useWordsQuery.ts
@@ -1,41 +1,18 @@
import { useQuery } from "@tanstack/react-query";
import { getWords } from "@/api/words";
-import { FILTERS, FilterValue } from "@/constants/filter";
import wordsQueryKeys from "./querykey";
-type UseWordsQueryParams = {
- filter?: FilterValue;
- keyword?: string;
- wordId?: string | null;
- page?: number;
- pageSize?: number;
-};
+import { WordsQueryRequest } from "@/api/types/words";
+import { FILTERS } from "@/constants/filter";
export function useWordsQuery({
filter = FILTERS.ALL,
keyword = "",
- wordId = "",
+ wordId = null,
page = 1,
pageSize = 20,
-}: UseWordsQueryParams = {}) {
+}: WordsQueryRequest = {}) {
return useQuery({
- queryKey: wordsQueryKeys.list({
- filter,
- keyword,
- wordId,
- page,
- pageSize,
- }),
- queryFn: () =>
- getWords({
- filter,
- keyword,
- wordId,
- page,
- pageSize,
- range: {
- from: (page - 1) * pageSize,
- to: page * pageSize - 1,
- },
- }),
+ queryKey: wordsQueryKeys.list({ filter, keyword, wordId, page, pageSize }),
+ queryFn: () => getWords({ filter, keyword, wordId, page, pageSize }),
staleTime: 1000 * 60 * 5,
gcTime: 1000 * 60 * 10,
});
diff --git a/src/hooks/useMobileSize.ts b/src/hooks/useMobileSize.ts
index 630ef50..ef9cc7a 100644
--- a/src/hooks/useMobileSize.ts
+++ b/src/hooks/useMobileSize.ts
@@ -5,7 +5,7 @@ export function useMobileSize() {
useEffect(() => {
const check = () => {
- setIsSm(window.innerWidth < 640); // tailwind sm 기준
+ setIsSm(window.innerWidth < 640);
};
check();
diff --git a/src/types/chartPeriod.ts b/src/types/chartPeriod.ts
new file mode 100644
index 0000000..1ad763d
--- /dev/null
+++ b/src/types/chartPeriod.ts
@@ -0,0 +1,13 @@
+export type Period = "daily" | "monthly" | "yearly";
+
+export const PERIOD_LABELS: Record = {
+ daily: "일일 기록",
+ monthly: "월간 기록",
+ yearly: "연간 기록",
+};
+
+export const PERIOD_OPTIONS: { value: Period; label: string }[] = [
+ { value: "daily", label: "일간" },
+ { value: "monthly", label: "월간" },
+ { value: "yearly", label: "연간" },
+];
diff --git a/src/utils/defaultChart.ts b/src/utils/defaultChart.ts
new file mode 100644
index 0000000..0ac3bfb
--- /dev/null
+++ b/src/utils/defaultChart.ts
@@ -0,0 +1,21 @@
+import { WordsRequest } from "@/api/types/words";
+
+export const DATE_SLICE = {
+ daily: 10,
+ monthly: 7,
+ yearly: 4,
+} as const;
+
+export function defaultChart(words: WordsRequest[] | undefined, num: number) {
+ if (!words) return [];
+ const map = new Map();
+
+ words.forEach((item) => {
+ const dateKey = item.created_at.slice(0, num);
+ map.set(dateKey, (map.get(dateKey) ?? 0) + 1);
+ });
+
+ return Array.from(map.entries())
+ .sort(([a], [b]) => a.localeCompare(b))
+ .map(([date, count]) => ({ label: date, count }));
+}
From 477653c766d5f01b7e27fd8e4d20b2d8508b8697 Mon Sep 17 00:00:00 2001
From: Jeong Daseul <98886223+goodaseul@users.noreply.github.com>
Date: Wed, 25 Mar 2026 21:38:03 +0900
Subject: [PATCH 13/18] =?UTF-8?q?refactor:=20chartPeriod=20=EB=A5=BC=20con?=
=?UTF-8?q?stants=20=ED=8F=B4=EB=8D=94=EB=A1=9C=20=EC=9D=B4=EB=8F=99=20:?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../_components/record/RecordChart.tsx | 2 +-
.../RecordLineChart/RecordChartToggle.tsx | 2 +-
src/{types => constants}/chartPeriod.ts | 0
src/types/word.ts | 21 ++++++++++---------
4 files changed, 13 insertions(+), 12 deletions(-)
rename src/{types => constants}/chartPeriod.ts (100%)
diff --git a/src/app/(protected)/dashboard/_components/record/RecordChart.tsx b/src/app/(protected)/dashboard/_components/record/RecordChart.tsx
index 7b975a0..cbb0802 100644
--- a/src/app/(protected)/dashboard/_components/record/RecordChart.tsx
+++ b/src/app/(protected)/dashboard/_components/record/RecordChart.tsx
@@ -9,7 +9,7 @@ import { RecordChartToggle } from "./RecordLineChart/RecordChartToggle";
import { RecordChartView } from "./RecordLineChart/RecordChartView";
import { useAllWordsQuery } from "@/hooks/queries/words/useAllWordsQuery";
import EmptyState from "@/components/empty-state/EmptyState";
-import { Period, PERIOD_LABELS } from "@/types/chartPeriod";
+import { Period, PERIOD_LABELS } from "@/constants/chartPeriod";
export function RecordChart() {
const { data: words } = useAllWordsQuery();
diff --git a/src/app/(protected)/dashboard/_components/record/RecordLineChart/RecordChartToggle.tsx b/src/app/(protected)/dashboard/_components/record/RecordLineChart/RecordChartToggle.tsx
index 9f7277f..a98cc91 100644
--- a/src/app/(protected)/dashboard/_components/record/RecordLineChart/RecordChartToggle.tsx
+++ b/src/app/(protected)/dashboard/_components/record/RecordLineChart/RecordChartToggle.tsx
@@ -1,5 +1,5 @@
import Button from "@/components/button/Button";
-import { Period, PERIOD_OPTIONS } from "@/types/chartPeriod";
+import { Period, PERIOD_OPTIONS } from "@/constants/chartPeriod";
type Props = {
period: Period;
diff --git a/src/types/chartPeriod.ts b/src/constants/chartPeriod.ts
similarity index 100%
rename from src/types/chartPeriod.ts
rename to src/constants/chartPeriod.ts
diff --git a/src/types/word.ts b/src/types/word.ts
index cc4daad..810677d 100644
--- a/src/types/word.ts
+++ b/src/types/word.ts
@@ -7,6 +7,12 @@ export type WordFormInput = Pick<
"id" | "expression" | "meaning" | "sentence" | "usage" | "memo"
>;
+type BaseFormProps = {
+ title: string;
+ description: string;
+ closeModal: () => void;
+};
+
type BaseWord = {
expression: string;
meaning: string;
@@ -22,20 +28,15 @@ export type WordUpdateInput = BaseWord & {
};
export type FormType = WordCreateInput | WordUpdateInput;
+
export type WordFormProps =
- | {
+ | (BaseFormProps & {
mode: "create";
initialValues: WordCreateInput;
onSubmit: (item: WordCreateInput) => void;
- title: string;
- description: string;
- closeModal: () => void;
- }
- | {
+ })
+ | (BaseFormProps & {
mode: "update";
initialValues: WordUpdateInput;
onSubmit: (item: WordUpdateInput) => void;
- title: string;
- description: string;
- closeModal: () => void;
- };
+ });
From 7d0387c659260d89d6aa87330f408afa875f6816 Mon Sep 17 00:00:00 2001
From: Jeong Daseul <98886223+goodaseul@users.noreply.github.com>
Date: Wed, 25 Mar 2026 21:43:36 +0900
Subject: [PATCH 14/18] =?UTF-8?q?style:=20=EB=8B=A4=ED=81=AC=EB=AA=A8?=
=?UTF-8?q?=EB=93=9C=20bg=20=EC=83=89=EC=83=81=20=EC=A7=80=EC=9A=B0?=
=?UTF-8?q?=EA=B8=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/components/button/ThemeButton.tsx | 3 +--
1 file changed, 1 insertion(+), 2 deletions(-)
diff --git a/src/components/button/ThemeButton.tsx b/src/components/button/ThemeButton.tsx
index aa081ac..9567acd 100644
--- a/src/components/button/ThemeButton.tsx
+++ b/src/components/button/ThemeButton.tsx
@@ -16,8 +16,7 @@ export function ThemeToggle() {
return (