+
+ <span className="font-sekuya">stack plus</span>ν¨κ» ννμ
+ μμκ°μΈμ.
+ </>
+ }
/>
-
- <form
- className="mt-8 grid gap-5 font-pretendard"
- onSubmit={handleSubmit(onSubmit)}
- >
+ <form className="mt-8 grid gap-5" onSubmit={handleSubmit(onSubmit)}>
<Input
type="email"
{...register("email", {
@@ -93,6 +99,7 @@ export default function JoinPage() {
errors={errors.password?.message}
>
<FaRegEyeSlash
+ className="text-black dark:text-white"
onClick={() => {
setPasswordShow((prev) => ({
...prev,
@@ -111,9 +118,10 @@ export default function JoinPage() {
"λΉλ°λ²νΈκ° μΌμΉνμ§ μμ΅λλ€",
})}
placeholder="λΉλ°λ²νΈλ₯Ό λ€μ μ
λ ₯νμΈμ."
- errors={errors.passwordConfirm?.message} // μ¬κΈ° μ£Όλͺ©
+ errors={errors.passwordConfirm?.message}
>
<FaRegEyeSlash
+ className="text-black dark:text-white"
onClick={() => {
setPasswordShow((prev) => ({
...prev,
@@ -128,7 +136,7 @@ export default function JoinPage() {
</Button>
</form>
- <div className="mt-6 text-center text-sm text-gray-500">
+ <div className="mt-6 text-center text-sm text-foreground">
μ΄λ―Έ κ³μ μ΄ μμΌμ κ°μ?
<Button variant="text_underline" href="/login" className="ml-1">
λ‘κ·ΈμΈ
diff --git a/src/app/(public)/landing-page/LadingPage.tsx b/src/app/(public)/landing-page/LadingPage.tsx
index d0e79bc..302c85c 100644
--- a/src/app/(public)/landing-page/LadingPage.tsx
+++ b/src/app/(public)/landing-page/LadingPage.tsx
@@ -1,11 +1,9 @@
-import InfoPage from "./_components/info/Info";
import BannerPage from "./_components/banner/Banner";
import { FeaturePage } from "./_components/feature/Feature";
export default function LandingPage() {
return (
<>
- <InfoPage />
<FeaturePage />
<BannerPage />
</>
diff --git a/src/app/(public)/landing-page/_components/SectionWrapper.tsx b/src/app/(public)/landing-page/_components/SectionWrapper.tsx
index c131ee9..6ba2784 100644
--- a/src/app/(public)/landing-page/_components/SectionWrapper.tsx
+++ b/src/app/(public)/landing-page/_components/SectionWrapper.tsx
@@ -1,27 +1,20 @@
type SectionWrapperProps = {
- bg?: string;
- padding?: string;
-
title: React.ReactNode;
desc: React.ReactNode;
children: React.ReactNode;
};
export default function SectionWrapper({
- bg,
- padding,
title,
desc,
children,
}: SectionWrapperProps) {
return (
- <section
- className={`mx-auto min-h-screen w-full text-center ${bg} ${padding}`}
- >
- <div className="m-auto max-w-6xl min-h-screen flex flex-col justify-center px-4">
- <h2 className="break-keep text-3xl font-bold tracking-tight leading-normal md:text-4xl mb-5">
+ <section className="mx-auto w-full text-center py-30">
+ <div className="m-auto max-w-6xl flex flex-col justify-center px-4">
+ <h2 className="break-keep text-2xl font-bold tracking-tight leading-normal md:text-4xl mb-2 md:mb-5">
{title}
</h2>
- <p className="break-keep text-base leading-relaxed text-gray-600 sm:text-lg">
+ <p className="break-keep text-md leading-relaxed text-muted sm:text-lg">
{desc}
</p>
{children}
diff --git a/src/app/(public)/landing-page/_components/banner/Banner.tsx b/src/app/(public)/landing-page/_components/banner/Banner.tsx
index 1336f73..ce65b2f 100644
--- a/src/app/(public)/landing-page/_components/banner/Banner.tsx
+++ b/src/app/(public)/landing-page/_components/banner/Banner.tsx
@@ -1,37 +1,12 @@
-"use client";
-import Button from "@/components/button/Button";
-import { useUserStore } from "@/store/useUserStore";
-
export default function BannerPage() {
- const { id } = useUserStore();
-
return (
- <section className="bg-linear-to-br from-point/25 to-point/5 text-black py-20">
+ <section className="text-background bg-point py-20 dark:text-white">
<div className="mx-auto max-w-3xl px-6 text-center">
- <h2 className="break-keep text-2xl font-bold tracking-tight">
- μ€λ λ°°μ΄ μμ΄ ννλΆν°
+ <h2 className="break-keep text-xl md:text-2xl font-bold tracking-tight">
+ μ€λ λ°°μ΄ ννλΆν°
<br />
- Stack+μ 차곑차곑 μμ보μΈμ.
+ <span className="font-sekuya">StackPlus</span> μ 차곑차곑 μμ보μΈμ.
</h2>
- {id ? (
- <Button
- href="/dashboard"
- variant="outline"
- type="button"
- className="mt-10 w-40 mx-auto hover:bg-white hover:text-black"
- >
- λμ보λ 보λ¬κ°κΈ°
- </Button>
- ) : (
- <Button
- href="/login"
- variant="outline"
- type="button"
- className="mt-10 w-40 mx-auto hover:bg-white hover:text-black"
- >
- μ§κΈ μμνκΈ°
- </Button>
- )}
</div>
</section>
);
diff --git a/src/app/(public)/landing-page/_components/feature/Feature.tsx b/src/app/(public)/landing-page/_components/feature/Feature.tsx
index fac0928..974a7d5 100644
--- a/src/app/(public)/landing-page/_components/feature/Feature.tsx
+++ b/src/app/(public)/landing-page/_components/feature/Feature.tsx
@@ -1,70 +1,84 @@
import SectionWrapper from "@/app/(public)/landing-page/_components/SectionWrapper";
import { GoBook } from "react-icons/go";
-import { LuPencil } from "react-icons/lu";
-import { LuChartNoAxesCombined } from "react-icons/lu";
+import { LuPencil, LuChartNoAxesCombined } from "react-icons/lu";
import { FaRegBookmark } from "react-icons/fa";
import { IoSearchOutline } from "react-icons/io5";
import { FiTag } from "react-icons/fi";
+import Button from "@/components/button/Button";
const features = [
{
icon: GoBook,
title: "νν λ±λ‘",
- description:
- "μμ΄ ννκ³Ό νκ΅μ΄ λ»μ κ°νΈνκ² λ±λ‘νμΈμ. μλ¬ΈκΉμ§ ν¨κ» μ μ₯ν μ μμ΄μ.",
+ description: "ννκ³Ό λ»μ κ°νΈνκ² λ±λ‘νμΈμ.",
},
{
icon: LuPencil,
title: "λ©λͺ¨ κΈ°λ₯",
- description:
- "ννλ§λ€ λ©λͺ¨λ₯Ό μΆκ°ν΄ ν·κ°λ¦¬λ ν¬μΈνΈλ μ¬μ©λ²μ κΈ°λ‘νμΈμ.",
+ description: "λ©λͺ¨λ₯Ό μΆκ°νμ¬ κΈ°λ‘νμΈμ.",
},
{
icon: LuChartNoAxesCombined,
title: "νμ΅ κΈ°λ‘",
- description:
- "μΌκ°, μκ°, μ°κ° νμ΅ κΈ°λ‘μ μ°¨νΈλ‘ νμΈνκ³ κΎΈμ€ν μ±μ₯νμΈμ.",
+ description: "μΌκ°, μκ°, μ°κ° νμ΅ κΈ°λ‘μ μ°¨νΈλ‘ νμΈνμΈμ.",
},
{
icon: FaRegBookmark,
title: "λΆλ§ν¬",
- description: "μ€μν ννλ λΆλ§ν¬ν΄μ λ°λ‘ λͺ¨μλ³΄κ³ μ§μ€ νμ΅νμΈμ.",
+ description: "μ€μν ννμ λͺ¨μλ³΄κ³ μ§μ€ νμ΅νμΈμ.",
},
{
icon: IoSearchOutline,
title: "κ²μ κΈ°λ₯",
- description: "λ±λ‘ν λͺ¨λ ννλ₯Ό λΉ λ₯΄κ² κ²μνκ³ μ°Ύμλ³Ό μ μμ΄μ.",
+ description: "λ±λ‘ν ννμ λΉ λ₯΄κ² κ²μν μ μμ΄μ.",
},
{
icon: FiTag,
title: "μΉ΄ν
κ³ λ¦¬ λΆλ₯",
- description: "μΌμμν, λΉμ¦λμ€ λ± μ¬μ© μ₯μλ³λ‘ ννλ₯Ό λΆλ₯νμΈμ.",
+ description: "ννμ μΉ΄ν
κ³ λ¦¬λ₯Ό λΆλ₯νμΈμ.",
},
];
export function FeaturePage() {
return (
<SectionWrapper
- title="μμ΄ νμ΅μ μν λͺ¨λ κΈ°λ₯"
- desc="Stack Plusκ° μ 곡νλ κ°λ ₯ν κΈ°λ₯λ€μ λ§λ보μΈμ."
- padding="py-20 md:py-0"
+ title="νμ΅μ μν λͺ¨λ κΈ°λ₯"
+ desc={
+ <>
+ <span className="font-sekuya text-point">StackPlus</span>κ° μ 곡νλ
+ <br className="block md:hidden" />
+ κ°λ ₯ν κΈ°λ₯λ€μ μκ°ν©λλ€.
+ </>
+ }
>
- <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3 text-left mt-10">
+ <div className="grid grid-cols-2 lg:grid-cols-3 gap-4 md:gap-6 mt-10 ">
{features.map((feature) => (
<div
key={feature.title}
- className="group rounded-2xl border border-border p-6 border-gray-200"
+ className="rounded-2xl border
+ border-gray-300 dark:border-gray-100/10 p-5 md:px-2 md:py-10 md:text-center text-left"
>
- <div className="mb-4 inline-flex h-12 w-12 items-center justify-center rounded-xl bg-point/10">
- <feature.icon className="h-6 w-6 text-point" />
+ <div className="flex items-center md:block gap-5">
+ <div
+ className="shrink-0 inline-flex h-10 w-10 md:h-12 md:w-12
+ items-center justify-center rounded-xl bg-point/10"
+ >
+ <feature.icon className="h-5 w-5 md:h-6 md:w-6 text-point" />
+ </div>
+ <h3 className="text-sm md:text-lg mt-0 md:mt-2 font-semibold text-foreground">
+ {feature.title}
+ </h3>
</div>
- <h3 className="mb-2 text-lg font-semibold">{feature.title}</h3>
- <p className="break-keep text-sm leading-relaxed text-muted-foreground">
+
+ <p className="hidden md:block mt-2 text-sm leading-relaxed text-muted-foreground break-keep">
{feature.description}
</p>
</div>
))}
</div>
+ <Button href="./dashboard" type="button" className="mt-10 w-40 mx-auto">
+ μμνκΈ°
+ </Button>
</SectionWrapper>
);
}
diff --git a/src/app/(public)/landing-page/_components/info/Info.tsx b/src/app/(public)/landing-page/_components/info/Info.tsx
deleted file mode 100644
index 335c32a..0000000
--- a/src/app/(public)/landing-page/_components/info/Info.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import SectionWrapper from "@/app/(public)/landing-page/_components/SectionWrapper";
-import Button from "@/components/button/Button";
-
-export default function InfoPage() {
- return (
- <SectionWrapper
- bg="bg-linear-to-br from-point/25 to-point/5"
- title={
- <>
- λλ§μ ννμ₯μΌλ‘ <br />
- <span className="text-point">μμ΄ μ€λ ₯</span>μ μμ보μΈμ.
- </>
- }
- desc={
- <>
- ννλ₯Ό λ±λ‘νκ³ , μλ¬Έκ³Ό λ©λͺ¨λ₯Ό μΆκ°νκ³ , νμ΅ κΈ°λ‘μ μΆμ νμΈμ.
- <br />
- Stack Plusμ ν¨κ» ν¨μ¨μ μΈ μμ΄ νμ΅μ μμνμΈμ.
- </>
- }
- >
- <Button href="./dashboard" type="button" className="mt-10 w-40 mx-auto">
- μμνκΈ°
- </Button>
- </SectionWrapper>
- );
-}
diff --git a/src/app/(public)/login/page.tsx b/src/app/(public)/login/page.tsx
index 2d0d518..fa1c2b9 100644
--- a/src/app/(public)/login/page.tsx
+++ b/src/app/(public)/login/page.tsx
@@ -9,6 +9,7 @@ import { useState } from "react";
import { FaRegEyeSlash } from "react-icons/fa";
import { SubmitHandler, useForm } from "react-hook-form";
import { signIn } from "@/api/auth";
+import { useUserStore } from "@/store/useUserStore";
type LoginInputs = {
email: string;
@@ -25,34 +26,44 @@ export default function LoginPage() {
formState: { errors },
} = useForm<LoginInputs>();
+ const { setUser, setInitialized } = useUserStore();
const onSubmit: SubmitHandler<LoginInputs> = async (formData) => {
try {
- await signIn({
+ const data = await signIn({
email: formData.email,
password: formData.password,
});
+
+ setUser({
+ id: data.user.id,
+ nickname: data.user.user_metadata?.nickname ?? null,
+ });
+ setInitialized();
toast.success("λ‘κ·ΈμΈμ μ±κ³΅νμ΅λλ€.");
router.push("/dashboard");
} catch (error) {
if (error instanceof Error) {
toast.error(error.message);
+ } else {
+ toast.error("λ‘κ·ΈμΈ μ€ μ€λ₯κ° λ°μνμ΅λλ€.");
}
- toast.error("μ μ μλ μ€λ₯κ° λ°μνμ΅λλ€.");
}
};
return (
- <div className="flex min-h-screen items-center justify-center bg-gray-50 px-6">
- <div className="w-full max-w-lg rounded-2xl bg-white p-10 shadow-sm">
+ <div className="flex min-h-screen items-center justify-center px-6">
+ <div className="w-full max-w-lg rounded-2xl p-3 sm:p-10 shadow-sm">
<Title
- title="Welcome!"
- desc="stack plusλ₯Ό μ΄μ©νκΈ° μν΄μ λ‘κ·ΈμΈμ ν΄μ£ΌμΈμ."
+ title="νμν©λλ€"
+ desc={
+ <>
+ <span className="font-sekuya">stack plus</span>λ₯Ό μ΄μ©νκΈ° μν΄μ
+ λ‘κ·ΈμΈμ ν΄μ£ΌμΈμ.
+ </>
+ }
/>
- <form
- className="mt-8 grid gap-5 font-pretendard"
- onSubmit={handleSubmit(onSubmit)}
- >
+ <form className="mt-8 grid gap-5" onSubmit={handleSubmit(onSubmit)}>
<Input
type="email"
{...register("email", {
@@ -79,6 +90,7 @@ export default function LoginPage() {
errors={errors.password?.message}
>
<FaRegEyeSlash
+ className="text-black dark:text-white"
onClick={() => {
setPasswordShow((prev) => !prev);
}}
@@ -89,7 +101,7 @@ export default function LoginPage() {
</Button>
</form>
- <div className="mt-6 text-center text-sm text-gray-500">
+ <div className="mt-6 text-center text-sm text-gray-600">
μμ§ κ³μ μ΄ μμΌμ κ°μ?
<Button variant="text_underline" href="/join" className="ml-1">
νμκ°μ
diff --git a/src/app/favicon.ico b/src/app/favicon.ico
index 0e4457b..aef45ee 100644
Binary files a/src/app/favicon.ico and b/src/app/favicon.ico differ
diff --git a/src/app/globals.css b/src/app/globals.css
index 358623f..7e1c085 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -1,15 +1,32 @@
@import "tailwindcss";
+@custom-variant dark (&:where(.dark, .dark *));
@theme {
- --color-bg: #f8f8f8;
- --color-point: #ceec46;
- --color-text-black: #1a1a1a;
- --color-text-600: #4a5565;
- --color-text-700: #364153;
-
--font-pretendard: var(--font-pretendard);
--font-sekuya: var(--font-sekuya);
+ --color-background: var(--background);
+ --color-foreground: var(--foreground);
+ --color-point: rgba(100, 116, 189, 1);
+}
+
+:root {
+ --background: #f8f9fa;
+ --foreground: #222222;
}
+.dark {
+ --background: #222;
+ --foreground: #e5e7eb;
+}
+
+@layer base {
+ body {
+ background-color: var(--background);
+ color: var(--foreground);
+ transition:
+ background-color 0.3s,
+ color 0.3s;
+ }
+}
*,
*::before,
*::after {
@@ -30,7 +47,6 @@ html {
body {
font-family: var(--font-pretendard), sans-serif;
line-height: 1.5;
- color: var(--color-text-black);
}
button {
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index c597522..c99b321 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -5,6 +5,7 @@ import QueryProvider from "@/providers/QueryProvider";
import localFont from "next/font/local";
import AuthProvider from "@/providers/AuthProvider";
import { Toaster } from "sonner";
+import ThemeProvider from "@/providers/ThemeProvider";
const pretendard = localFont({
src: "../../public/fonts/pretendard/PretendardVariable.woff2",
@@ -39,21 +40,21 @@ export const viewport = {
export default function RootLayout({
children,
-}: Readonly<{
+}: {
children: React.ReactNode;
-}>) {
+}) {
return (
- <html lang="ko">
- <body
- className={`${sekuya.variable} ${pretendard.variable} antialiased`}
- >
- <QueryProvider>
- <AuthProvider>
- <Toaster richColors position="top-center" />
- {children}
- <Footer />
- </AuthProvider>
- </QueryProvider>
+ <html lang="ko" suppressHydrationWarning>
+ <body className={`${sekuya.variable} ${pretendard.variable} antialiased`}>
+ <ThemeProvider>
+ <QueryProvider>
+ <AuthProvider>
+ <Toaster richColors position="top-center" />
+ {children}
+ <Footer />
+ </AuthProvider>
+ </QueryProvider>
+ </ThemeProvider>
</body>
</html>
);
diff --git a/src/components/button/Button.tsx b/src/components/button/Button.tsx
index 00b0c58..2c7f7ab 100644
--- a/src/components/button/Button.tsx
+++ b/src/components/button/Button.tsx
@@ -18,18 +18,43 @@ type ButtonProps =
});
const baseStyles =
- "transition-all inline-flex items-center justify-center gap-1 rounded-full text-sm text-black font-medium 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<ButtonVariant, string> = {
- default: "bg-point px-4 py-3.5",
- outline:
- "border border-point bg-white px-4 py-3.5 hover:bg-point group-hover:bg-point",
- text_underline:
- "p-1 hover:translate-y-0 group-hover:translate-y-0 relative after:absolute after:left-0 after:bottom-0 after:h-[2px] after:w-0 after:bg-current after:transition-all after:duration-300 hover:after:w-full",
- text: "p-1 hover:translate-y-0 group-hover:translate-y-0 relative",
+ default: `
+ bg-point text-white
+ p-2 md:px-4 md:py-3.5
+`,
+
+ outline: `
+ border border-point text-point
+ bg-transparent
+ p-2 md:px-4 md:py-3.5
+ hover:bg-point
+ dark:hover:bg-point
+ hover:text-white
+`,
+
+ text: `
+ p-1 text-foreground
+ hover:translate-y-0 group-hover:translate-y-0
+ `,
+
+ text_underline: `
+ relative inline-block p-1 text-foreground
+ hover:translate-y-0 group-hover:translate-y-0
+
+ after:absolute after:left-0 after:-bottom-1
+ after:h-[2px] after:w-0
+ after:bg-point
+ after:rounded-full
+
+ after:transition-[width] after:duration-300 after:ease-out
+ hover:after:w-full
+`,
};
export default function Button(props: ButtonProps) {
const { children, variant = "default", className = "" } = props;
+
const styles = clsx(baseStyles, variantStyles[variant], className);
if ("href" in props) {
diff --git a/src/components/button/ThemeButton.tsx b/src/components/button/ThemeButton.tsx
new file mode 100644
index 0000000..9567acd
--- /dev/null
+++ b/src/components/button/ThemeButton.tsx
@@ -0,0 +1,31 @@
+"use client";
+import { useMobileSize } from "@/hooks/useMobileSize";
+import { useTheme } from "next-themes";
+import { useEffect, useState } from "react";
+
+export function ThemeToggle() {
+ const { theme, setTheme } = useTheme();
+ const [mounted, setMounted] = useState(false);
+
+ const isMobile = useMobileSize();
+
+ // eslint-disable-next-line react-hooks/set-state-in-effect
+ useEffect(() => setMounted(true), []);
+ if (!mounted) return null;
+
+ return (
+ <button
+ className={`
+ font-sekuya text-sm md:text-md bg-whiterounded-sm px-2 py-1`}
+ onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
+ >
+ {theme === "dark"
+ ? isMobile
+ ? "βοΈ"
+ : "light"
+ : isMobile
+ ? "π"
+ : "dark"}
+ </button>
+ );
+}
diff --git a/src/components/empty-state/EmptyState.tsx b/src/components/empty-state/EmptyState.tsx
index e9c9b1f..bda76ca 100644
--- a/src/components/empty-state/EmptyState.tsx
+++ b/src/components/empty-state/EmptyState.tsx
@@ -11,7 +11,7 @@ export default function EmptyState({
<div
className={`flex w-full items-center justify-center px-4 py-12 ${className}`}
>
- <p className="max-w-sm text-center text-sm text-gray-500 leading-relaxed">
+ <p className="max-w-sm text-center text-sm text-gray-600 leading-relaxed">
{children}
</p>
</div>
diff --git a/src/components/input/Input.tsx b/src/components/input/Input.tsx
index 780f4ca..d00656d 100644
--- a/src/components/input/Input.tsx
+++ b/src/components/input/Input.tsx
@@ -47,7 +47,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
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/components/layout/Footer.tsx b/src/components/layout/Footer.tsx
index 397c37f..d7b75ee 100644
--- a/src/components/layout/Footer.tsx
+++ b/src/components/layout/Footer.tsx
@@ -1,7 +1,7 @@
export default function Footer() {
return (
- <footer className="border-t border-gray-200 py-6">
- <p className="text-center text-xs text-gray-500">
+ <footer className="py-6">
+ <p className="text-center text-xs text-gray-600">
Β© 2025 <span className="font-medium text-gray-700">Stack Plus</span>{" "}
Build your growth
</p>
diff --git a/src/constants/chartPeriod.ts b/src/constants/chartPeriod.ts
new file mode 100644
index 0000000..1ad763d
--- /dev/null
+++ b/src/constants/chartPeriod.ts
@@ -0,0 +1,13 @@
+export type Period = "daily" | "monthly" | "yearly";
+
+export const PERIOD_LABELS: Record<Period, string> = {
+ daily: "μΌμΌ κΈ°λ‘",
+ monthly: "μκ° κΈ°λ‘",
+ yearly: "μ°κ° κΈ°λ‘",
+};
+
+export const PERIOD_OPTIONS: { value: Period; label: string }[] = [
+ { value: "daily", label: "μΌκ°" },
+ { value: "monthly", label: "μκ°" },
+ { value: "yearly", label: "μ°κ°" },
+];
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/providers/AuthProvider.tsx b/src/providers/AuthProvider.tsx
index 977d4e1..2623909 100644
--- a/src/providers/AuthProvider.tsx
+++ b/src/providers/AuthProvider.tsx
@@ -7,18 +7,6 @@ import { getMyProfile } from "@/api/profile";
import { Session } from "@supabase/supabase-js";
import { supabase } from "@/lib/supabase";
-async function getSession() {
- const { data, error } = await supabase.auth.getSession();
- if (error) throw error;
- return data.session;
-}
-
-function subscribeAuthChange(callback: (session: Session | null) => void) {
- return supabase.auth.onAuthStateChange((_, session) => {
- callback(session);
- });
-}
-
export default function AuthProvider({
children,
}: {
@@ -26,47 +14,42 @@ export default function AuthProvider({
}) {
const { setUser, clearUser, setInitialized } = useUserStore();
- useEffect(() => {
- getSession().then(async (session) => {
- if (!session) {
- setInitialized();
- return;
- }
-
- setUser({ id: session.user.id });
-
- try {
- const profile = await getMyProfile(session.user.id);
- setUser({ nickname: profile.nickname });
- } catch (error) {
- console.error("profile λΆλ¬μ€κΈ° μ€ν¨", error);
- } finally {
- setInitialized();
- }
- });
-
- const { data } = subscribeAuthChange(async (session) => {
- if (!session) {
- clearUser();
+ const handleSession = async (session: Session | null) => {
+ if (!session) {
+ clearUser();
+ setInitialized();
+ return;
+ }
+
+ try {
+ const profile = await getMyProfile();
+ if (!profile) {
+ setUser({
+ id: session.user.id,
+ nickname: null,
+ });
return;
}
-
- setUser({ id: session.user.id });
-
- try {
- const profile = await getMyProfile(session.user.id);
- setUser({ nickname: profile.nickname });
- } catch (error) {
- console.error("profile λΆλ¬μ€κΈ° μ€ν¨", error);
- }
-
+ setUser({
+ id: session.user.id,
+ nickname: profile.nickname,
+ });
+ } catch (error) {
+ console.error("νλ‘ν λΆλ¬μ€κΈ° μ€ν¨", JSON.stringify(error));
+ setUser({ id: session.user.id, nickname: null });
+ } finally {
setInitialized();
- });
+ }
+ };
+ useEffect(() => {
+ const { data } = supabase.auth.onAuthStateChange((event, sesseion) => {
+ handleSession(sesseion);
+ });
return () => {
data.subscription.unsubscribe();
};
- }, [setUser, clearUser, setInitialized]);
+ }, []);
return <>{children}</>;
}
diff --git a/src/providers/ThemeProvider.tsx b/src/providers/ThemeProvider.tsx
new file mode 100644
index 0000000..c4ff59c
--- /dev/null
+++ b/src/providers/ThemeProvider.tsx
@@ -0,0 +1,15 @@
+"use client";
+
+import { ThemeProvider as NextThemesProvider } from "next-themes";
+
+export default function ThemeProvider({
+ children,
+}: {
+ children: React.ReactNode;
+}) {
+ return (
+ <NextThemesProvider attribute="class" defaultTheme="system" enableSystem>
+ {children}
+ </NextThemesProvider>
+ );
+}
diff --git a/src/store/useUserStore.ts b/src/store/useUserStore.ts
index 040f1a5..07c1011 100644
--- a/src/store/useUserStore.ts
+++ b/src/store/useUserStore.ts
@@ -1,27 +1,27 @@
import { create } from "zustand";
-interface UserState {
+type UserState = {
id: string | null;
nickname: string | null;
isInitialized: boolean;
+ setInitialized: () => void;
setUser: (
user: Partial<Omit<UserState, "setUser" | "clearUser" | "setInitialized">>,
) => void;
clearUser: () => void;
- setInitialized: () => void;
-}
+};
export const useUserStore = create<UserState>((set) => ({
id: null,
nickname: null,
isInitialized: false,
+ setInitialized: () => {
+ set({ isInitialized: true });
+ },
setUser: (user) => {
set((state) => ({ ...state, ...user }));
},
clearUser: () => {
set({ id: null, nickname: null, isInitialized: true });
},
- setInitialized: () => {
- set({ isInitialized: true });
- },
}));
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;
- };
+ });
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<string, number>();
+
+ 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 }));
+}