Merge pull request #25 from Kernel360/2-feature-로그인-페이지

2 feature 로그인 페이지 폼 구현 및 멀티-root layout 구조 변경
Kernel360 · Jan 13, 2025 · 55d0b1b · 55d0b1b
2 parents 5a3d98c + 76ada6e
commit 55d0b1b
Show file tree

Hide file tree

Showing 22 changed files with 4,755 additions and 67 deletions.
diff --git a/app/favicon.ico → app/(home)/favicon.ico b/app/favicon.ico → app/(home)/favicon.ico
diff --git a/app/(home)/layout.tsx b/app/(home)/layout.tsx
@@ -0,0 +1,34 @@
+import type { Metadata } from "next";
+
+import { Provider } from "@/src/components/ui/provider";
+import { Box, Container, Flex } from "@chakra-ui/react";
+import Header from "@/src/components/layouts/Header";
+import Sidebar from "@/src/components/layouts/Sidebar";
+import { MSWComponent } from "@/src/components/common/MSWComponent";
+import { SidebarProvider } from "@/src/context/SidebarContext";
+
+export const metadata: Metadata = {
+  title: "FlowSync",
+  description: "The World Best PMS Service",
+};
+
+const RootLayout = (props: { children: React.ReactNode }) => {
+  const { children } = props;
+  return (
+    <Provider>
+      <Header />
+      <Container maxWidth={"100%"} display="flex" flexDirection="row" margin={0} padding={0}>
+        <SidebarProvider>
+          <Sidebar />
+        </SidebarProvider>
+        <Flex width="100%" height="100%" align="center" justify="center">
+          <Box maxW="container.xl" width="100%" height="100%" p={10}>
+            {children}
+          </Box>
+        </Flex>
+      </Container>
+    </Provider>
+  );
+};
+
+export default RootLayout;
diff --git a/app/page.tsx → app/(home)/page.tsx b/app/page.tsx → app/(home)/page.tsx
diff --git a/app/(home)/projects/[projectId]/page.tsx b/app/(home)/projects/[projectId]/page.tsx
@@ -0,0 +1,3 @@
+import ProjectPage from "@/src/components/pages/ProjectPage";
+
+export default ProjectPage;
diff --git a/.../[projectId]/tasks/[taskId]/edit/page.tsx → .../[projectId]/tasks/[taskId]/edit/page.tsx b/.../[projectId]/tasks/[taskId]/edit/page.tsx → .../[projectId]/tasks/[taskId]/edit/page.tsx
diff --git a/...jects/[projectId]/tasks/[taskId]/page.tsx → ...jects/[projectId]/tasks/[taskId]/page.tsx b/...jects/[projectId]/tasks/[taskId]/page.tsx → ...jects/[projectId]/tasks/[taskId]/page.tsx
@@ -1,8 +1,8 @@
 "use client";
 
 import { Box, Text } from "@chakra-ui/react";
-import { mockData } from "../../../../../src/data/task_data";
-import { mockComments } from "../../../../../src/data/task_comments_data";
+import { mockData } from "@/src/data/task_data";
+import { mockComments } from "@/src/data/task_comments_data";
 import TaskContent from "@/src/components/common/TaskContents";
 import TaskComments from "@/src/components/common/TaskComments";
 import CommentBox from "@/src/components/common/CommentBox";
@@ -12,14 +12,12 @@ import BackButton from "@/src/components/common/backButton";
 export default function ProjectTaskPage() {
   const taskId = useParams().taskId as string;
 
-  const task = Object.values(mockData).find(
-    (task) => task.id === Number(taskId)
-  );
+  const task = Object.values(mockData).find(task => task.id === Number(taskId));
 
   const comments =
     mockComments.data
-      .find((item) => item.taskId === Number(taskId))
-      ?.comments.map((comment) => ({
+      .find(item => item.taskId === Number(taskId))
+      ?.comments.map(comment => ({
         ...comment,
         id: comment.id.toString(),
       })) || []; // 댓글이 없으면 빈 배열
@@ -29,16 +27,7 @@ export default function ProjectTaskPage() {
   }
 
   return (
-    <Box
-      maxW="1000px"
-      w={"100%"}
-      mx="auto"
-      mt={10}
-      p={6}
-      borderWidth={1}
-      borderRadius="lg"
-      boxShadow="md"
-    >
+    <Box maxW="1000px" w={"100%"} mx="auto" mt={10} p={6} borderWidth={1} borderRadius="lg" boxShadow="md">
       <BackButton />
       {/* 글 컴포넌트 */}
       <TaskContent task={task} />

diff --git a/app/projects/[projectId]/tasks/new/page.tsx → ...)/projects/[projectId]/tasks/new/page.tsx b/app/projects/[projectId]/tasks/new/page.tsx → ...)/projects/[projectId]/tasks/new/page.tsx
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -17,27 +17,7 @@ const RootLayout = (props: { children: React.ReactNode }) => {
   const useMsw = process.env.USE_MSW === "true";
   return (
     <html suppressHydrationWarning>
-      <body>
-        <Provider>
-          <Header />
-          <Container
-            maxWidth={"100%"}
-            display="flex"
-            flexDirection="row"
-            margin={0}
-            padding={0}
-          >
-            <SidebarProvider>
-              <Sidebar />
-            </SidebarProvider>
-            <Flex width="100%" height="100%" align="center" justify="center">
-              <Box maxW="container.xl" width="100%" height="100%" p={10}>
-                {useMsw ? <MSWComponent>{children}</MSWComponent> : children}
-              </Box>
-            </Flex>
-          </Container>
-        </Provider>
-      </body>
+      <body>{useMsw ? <MSWComponent>{children}</MSWComponent> : children}</body>
     </html>
   );
 };

diff --git a/app/login/favicon.ico b/app/login/favicon.ico
diff --git a/app/login/find-password/page.tsx b/app/login/find-password/page.tsx
@@ -1,3 +1,3 @@
-import findPasswordPage from "@/src/components/pages/FindPasswordPage";
+import FindPasswordPage from "@/src/components/pages/FindPasswordPage";
 
-export default findPasswordPage;
+export default FindPasswordPage;
diff --git a/app/login/layout.tsx b/app/login/layout.tsx
@@ -0,0 +1,31 @@
+import type { Metadata } from "next";
+import { Provider } from "@/src/components/ui/provider";
+import { Box, Flex } from "@chakra-ui/react";
+
+export const metadata: Metadata = {
+  title: "FlowSync",
+  description: "The World Best PMS Service",
+};
+
+const RootLayout = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <Provider>
+      {/* 로그인 페이지 중앙 정렬 레이아웃 */}
+      <Flex
+        direction="column"
+        align="center"
+        justify="center"
+        minHeight="100vh"
+        backgroundColor="gray.50"
+        padding="3"
+        overflow="hidden" // 스크롤 제거
+      >
+        <Box width="100%" maxW="500px" borderRadius="md" bg="white" boxShadow="lg" padding="1">
+          {children}
+        </Box>
+      </Flex>
+    </Provider>
+  );
+};
+
+export default RootLayout;
diff --git a/app/projects/[projectId]/tasks/page.tsx b/app/projects/[projectId]/tasks/page.tsx
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/api/auth.ts b/src/api/auth.ts
@@ -10,14 +10,14 @@ export const fetchUserPermissions = async (): Promise<PermissionsResponse> => {
   return response.data;
 };
 
-// 로그인 API 호출
-export const login = async (email: string, password: string): Promise<void> => {
-  const response = await axiosInstance.post("/auth/login", { email, password });
-  console.log(response.data.message); // 성공 메시지 출력
+// 로그인 API 호출 ()
+export const login = async (email: string, password: string): Promise<{ token: string; user: { id: string; name: string } }> => {
+  const response = await axiosInstance.post("/login", { email, password });
+  return response.data; // { token, user }
 };
 
 // 로그아웃 API 호출
 export const logout = async (): Promise<void> => {
-  await axiosInstance.post("/auth/logout");
+  await axiosInstance.post("/logout");
   console.log("로그아웃 성공!");
-};
+};
diff --git a/src/api/axiosInstance.ts b/src/api/axiosInstance.ts
@@ -5,14 +5,14 @@ const axiosInstance = axios.create({
   timeout: 10000, // 요청 타임아웃 설정 (10초)
   headers: {
     "Content-Type": "application/json",
-  }
+  },
+  // withCredentials: true,
 });
 
 // 응답 인터셉터 추가
 axiosInstance.interceptors.response.use(
-  (response) => response,
-  (error) => {
-
+  response => response,
+  error => {
     // 개발 단계에서 에러를 중앙관리하기위한 구문
     // 추후 중앙화된 로깅 도구를 사용하거나 제거
     // 에러 처리는 개별 컴포넌트에서 진행
@@ -27,4 +27,4 @@ axiosInstance.interceptors.response.use(
   }
 );
 
-export default axiosInstance;
+export default axiosInstance;
diff --git a/src/components/common/LoginInputForm.tsx b/src/components/common/LoginInputForm.tsx
@@ -0,0 +1,41 @@
+import { LoginFormData } from "@/src/types/loginForm";
+
+export default function LoginInputForm({ label, id, type, placeholder, onChange, className = "" }: LoginFormData & { className?: string; onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void }) {
+  return (
+    <div className={`inputField ${className}`} style={{ width: "100%", marginBottom: "16px" }}>
+      <label
+        htmlFor={id}
+        className="label"
+        style={{
+          display: "block",
+          marginBottom: "8px",
+          fontSize: "14px",
+          fontWeight: "bold",
+          color: "#4A5568",
+          textAlign: "left",
+        }}
+      >
+        {label}
+        <span style={{ color: "red", marginLeft: "4px" }}>*</span>
+      </label>
+      <input
+        id={id}
+        type={type}
+        placeholder={placeholder}
+        className="input"
+        onChange={onChange}
+        style={{
+          width: "100%",
+          padding: "10px",
+          border: "1px solid #CBD5E0",
+          borderRadius: "4px",
+          fontSize: "14px",
+          outline: "none",
+          transition: "border-color 0.2s ease",
+        }}
+        onFocus={e => (e.target.style.borderColor = "#00a8ff")}
+        onBlur={e => (e.target.style.borderColor = "#CBD5E0")}
+      />
+    </div>
+  );
+}
diff --git a/src/components/pages/FindPasswordPage/index.tsx b/src/components/pages/FindPasswordPage/index.tsx
@@ -1,5 +1,5 @@
-function findPasswordPage() {
+function FindPasswordPage() {
   return <h1>비밀번호 찾기</h1>;
 }
 
-export default findPasswordPage;
+export default FindPasswordPage;
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import ProjectPage from "@/src/components/pages/ProjectPage";

		export default ProjectPage;