From 917bef73b0c2eba467c816b3481ef9f75f21867f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EB=AF=BC=EA=B1=B4=ED=9D=AC?= Date: Wed, 5 Nov 2025 23:14:32 +0900 Subject: [PATCH] =?UTF-8?q?issue=20#=20=ED=9A=8C=EC=9B=90=EA=B0=80?= =?UTF-8?q?=EC=9E=85=20=ED=99=94=EB=A9=B4=20=EA=B5=AC=ED=98=84=20=EC=A4=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 54 ++++++++++++++++++++++++++ package.json | 1 + src/App.tsx | 30 ++++++++++----- src/data/AuthData.ts | 5 +++ src/data/RoutingData.ts | 20 ++++++++++ src/data/UserInfoData.ts | 5 +++ src/layouts/Layout.tsx | 23 +++++++++++ src/request/user/LoginRequest.ts | 0 src/store/authStore.ts | 13 +++++++ src/ui/component/Header.tsx | 16 ++++---- src/ui/component/RoutingData.ts | 20 ---------- src/ui/component/SideBar.tsx | 16 +++++--- src/ui/page/signup/SignUpPage.tsx | 64 ++++++++----------------------- 13 files changed, 176 insertions(+), 91 deletions(-) create mode 100644 src/data/AuthData.ts create mode 100644 src/data/RoutingData.ts create mode 100644 src/data/UserInfoData.ts create mode 100644 src/layouts/Layout.tsx create mode 100644 src/request/user/LoginRequest.ts create mode 100644 src/store/authStore.ts delete mode 100644 src/ui/component/RoutingData.ts diff --git a/package-lock.json b/package-lock.json index c52217d..26e9f81 100644 --- a/package-lock.json +++ b/package-lock.json @@ -50,6 +50,7 @@ "react-dom": "^19.1.1", "react-hook-form": "^7.66.0", "react-resizable-panels": "^3.0.6", + "react-router-dom": "^7.9.5", "recharts": "^2.15.4", "sonner": "^2.0.7", "tailwind-merge": "^3.3.1", @@ -4069,6 +4070,15 @@ "dev": true, "license": "MIT" }, + "node_modules/cookie": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.0.2.tgz", + "integrity": "sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA==", + "license": "MIT", + "engines": { + "node": ">=18" + } + }, "node_modules/cross-spawn": { "version": "7.0.6", "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz", @@ -5773,6 +5783,44 @@ "react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc" } }, + "node_modules/react-router": { + "version": "7.9.5", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.9.5.tgz", + "integrity": "sha512-JmxqrnBZ6E9hWmf02jzNn9Jm3UqyeimyiwzD69NjxGySG6lIz/1LVPsoTCwN7NBX2XjCEa1LIX5EMz1j2b6u6A==", + "license": "MIT", + "dependencies": { + "cookie": "^1.0.1", + "set-cookie-parser": "^2.6.0" + }, + "engines": { + "node": ">=20.0.0" + }, + "peerDependencies": { + "react": ">=18", + "react-dom": ">=18" + }, + "peerDependenciesMeta": { + "react-dom": { + "optional": true + } + } + }, + "node_modules/react-router-dom": { + "version": "7.9.5", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.9.5.tgz", + "integrity": "sha512-mkEmq/K8tKN63Ae2M7Xgz3c9l9YNbY+NHH6NNeUmLA3kDkhKXRsNb/ZpxaEunvGo2/3YXdk5EJU3Hxp3ocaBPw==", + "license": "MIT", + "dependencies": { + "react-router": "7.9.5" + }, + "engines": { + "node": ">=20.0.0" + }, + "peerDependencies": { + "react": ">=18", + "react-dom": ">=18" + } + }, "node_modules/react-smooth": { "version": "4.0.4", "resolved": "https://registry.npmjs.org/react-smooth/-/react-smooth-4.0.4.tgz", @@ -5960,6 +6008,12 @@ "semver": "bin/semver.js" } }, + "node_modules/set-cookie-parser": { + "version": "2.7.2", + "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.2.tgz", + "integrity": "sha512-oeM1lpU/UvhTxw+g3cIfxXHyJRc/uidd3yK1P242gzHds0udQBYzs3y8j4gCCW+ZJ7ad0yctld8RYO+bdurlvw==", + "license": "MIT" + }, "node_modules/shebang-command": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz", diff --git a/package.json b/package.json index bfecb36..4ea66b0 100644 --- a/package.json +++ b/package.json @@ -52,6 +52,7 @@ "react-dom": "^19.1.1", "react-hook-form": "^7.66.0", "react-resizable-panels": "^3.0.6", + "react-router-dom": "^7.9.5", "recharts": "^2.15.4", "sonner": "^2.0.7", "tailwind-merge": "^3.3.1", diff --git a/src/App.tsx b/src/App.tsx index 73b0313..8854ef5 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,16 +1,26 @@ -import { useState } from 'react' -import reactLogo from './assets/react.svg' -import viteLogo from '/vite.svg' -import './App.css' -import SignUpPage from './ui/page/signup/SignUpPage' +import { useState } from 'react'; +import reactLogo from './assets/react.svg'; +import viteLogo from '/vite.svg'; +import './App.css'; +import SignUpPage from './ui/page/signup/SignUpPage'; +import Layout from './layouts/Layout'; +import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom'; +import { useAuthStore } from './store/authStore'; +import { PageRouting } from './data/RoutingData'; function App() { - + const { authData } = useAuthStore(); + return ( -
- -
- ) + + + }> + } path={PageRouting["SIGN_UP"].path} /> + {!(authData?.isLogedIn) ? } path="*" /> : null} + + + + ); } export default App diff --git a/src/data/AuthData.ts b/src/data/AuthData.ts new file mode 100644 index 0000000..8805e52 --- /dev/null +++ b/src/data/AuthData.ts @@ -0,0 +1,5 @@ +export type AuthData = { + accessToken: string; + refreshToken: string; + isLogedIn: boolean; +} \ No newline at end of file diff --git a/src/data/RoutingData.ts b/src/data/RoutingData.ts new file mode 100644 index 0000000..6af9b19 --- /dev/null +++ b/src/data/RoutingData.ts @@ -0,0 +1,20 @@ +type PageRoutingInfo = { + path: string; + title: string; +} + +export const PageRouting: Record = { + LOGIN: { path: "login", title: "" }, + SIGN_UP: { path: "signup", title: "" }, + RESET_PASSWORD: { path: "reset-password", title: "" }, + HOME: { path: "home", title: "홈" }, + SCHEDULES: { path: "schedules", title: "일정" }, + SCHEDULES_NEW: { path: "schedules/new", title: "일정 생성" }, + SCHEDULES_EDIT: { path: "schedules/edit", title: "일정 수정" }, + SCHEDULES_DETAIL: { path: "schedules/detail", title: "일정 상세" }, + USER_INFO: { path: "info", title: "사용자 정보" }, + USER_FOLLOWING: { path: "info/following", title: "팔로잉 목록" }, + USER_FOLLOWER: { path: "info/follower", title: "팔로워 목록" }, + SETTINGS: { path: "settings", title: "설정" }, + NOT_FOUD: { path: "not-found", title: "존재하지 않는 페이지" }, +} as const; \ No newline at end of file diff --git a/src/data/UserInfoData.ts b/src/data/UserInfoData.ts new file mode 100644 index 0000000..22054da --- /dev/null +++ b/src/data/UserInfoData.ts @@ -0,0 +1,5 @@ +export type UserInfoData = { + name: string; + nickname: string; + email: string; +} \ No newline at end of file diff --git a/src/layouts/Layout.tsx b/src/layouts/Layout.tsx new file mode 100644 index 0000000..7a92732 --- /dev/null +++ b/src/layouts/Layout.tsx @@ -0,0 +1,23 @@ +import SideBar from "@/ui/component/SideBar"; +import { Outlet } from "react-router-dom"; +import { SidebarProvider } from "@/components/ui/sidebar"; +import Header from "@/ui/component/Header"; +import { useAuthStore } from '@/store/authStore'; + +export default function Layout() { + const { authData } = useAuthStore(); + + return ( + + +
+ { authData?.isLogedIn ?
: null} + {/*
*/} + +
+ + ); +} \ No newline at end of file diff --git a/src/request/user/LoginRequest.ts b/src/request/user/LoginRequest.ts new file mode 100644 index 0000000..e69de29 diff --git a/src/store/authStore.ts b/src/store/authStore.ts new file mode 100644 index 0000000..7fd58fb --- /dev/null +++ b/src/store/authStore.ts @@ -0,0 +1,13 @@ +import type { AuthData } from '@/data/AuthData'; +import { create } from 'zustand'; + +interface AuthStoreProps { + authData: AuthData | undefined; + login: (data: AuthData) => void; +} + +export const useAuthStore = create((set) => ({ + authData: undefined, + login: (data: AuthData) => set({ authData: data }), + logout: () => set({ authData: undefined }) +})); \ No newline at end of file diff --git a/src/ui/component/Header.tsx b/src/ui/component/Header.tsx index 4800614..bcd0230 100644 --- a/src/ui/component/Header.tsx +++ b/src/ui/component/Header.tsx @@ -1,14 +1,14 @@ import { Label } from '@/components/ui/label'; import { SidebarTrigger } from '@/components/ui/sidebar'; +import { Separator } from '@/components/ui/separator'; import { useState } from 'react'; -import Routing from './RoutingData'; export default function Header() { - return ( -
- - - -
- ); + return ( +
+ + + +
+ ); } \ No newline at end of file diff --git a/src/ui/component/RoutingData.ts b/src/ui/component/RoutingData.ts deleted file mode 100644 index 98842ee..0000000 --- a/src/ui/component/RoutingData.ts +++ /dev/null @@ -1,20 +0,0 @@ -type PageRoutingInfo = { - path: string; - title: string; -} - -export const PageRouting: Record = { - LOGIN: { path: "login", title: "" }, - SIGN_UP: { path: "signup", title: "" }, - RESET_PASSWORD: { path: "reset-password", title: "" }, - HOME: { path: "home", title: "홈" }, - SCHEDULES: { path: "schedules", title: "일정" }, - SCHEDULES_NEW: { path: "schedules/new", title: "일정 생성" }, - SCHEDULES_EDIT: { path: "schedules/edit", title: "일정 수정" }, - SCHEDULES_DETAIL: { path: "schedules/detail", title: "일정 상세" }, - USER_INFO: { path: "info", title: "사용자 정보" }, - USER_FOLLOWING: { path: "info/following", title: "팔로잉 목록" }, - USER_FOLLOWER: { path: "info/follower", title: "팔로워 목록" }, - SETTINGS: { path: "settings", title: "설정" }, - NOT_FOUD: { path: "not-found", title: "존재하지 않는 페이지" }, -} as const; \ No newline at end of file diff --git a/src/ui/component/SideBar.tsx b/src/ui/component/SideBar.tsx index 8d6dda9..4aace1d 100644 --- a/src/ui/component/SideBar.tsx +++ b/src/ui/component/SideBar.tsx @@ -1,11 +1,15 @@ import { useState } from 'react'; import { - Sidebar, - SidebarContent, - SidebarFooter, - SidebarHeader -} from './components/ui/sidebar'; + Sidebar, + SidebarContent, + SidebarFooter, + SidebarHeader +} from '@/components/ui/sidebar'; export default function SideBar() { - return () + return ( + + + + ); } \ No newline at end of file diff --git a/src/ui/page/signup/SignUpPage.tsx b/src/ui/page/signup/SignUpPage.tsx index 816b58d..8277097 100644 --- a/src/ui/page/signup/SignUpPage.tsx +++ b/src/ui/page/signup/SignUpPage.tsx @@ -1,58 +1,28 @@ -import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'; import { useState } from 'react'; -import { format } from 'date-fns'; import { Label } from '@/components/ui/label'; -import { Calendar } from '@/components/ui/calendar'; import { Button } from '@/components/ui/button'; import { Input } from '@/components/ui/input'; +import { + Card, + CardContent, + CardDescription, + CardHeader, + CardTitle +} from '@/components/ui/card'; +import { Form, FormField } from '@/components/ui/form'; export default function SignUpPage() { const [open, setOpen] = useState(false); - const [date, setDate] = useState(new Date()); - return ( -
-
- - - - - - - - format(month, "yyyy년 MM월") - }} - onSelect={(date) => { - if (date) { - setDate(date); - setOpen(false); - } - }} - selected={date} - defaultMonth={date} - captionLayout="dropdown" - /> - - - -
+
+ + + 로그인 + + + + +
); } \ No newline at end of file