+
+
+
+
구글 로그인
+
+
+
+
+
+
+
+
+
+
+
-
-
-
구글 로그인
-
-
-
-
-
-
-
-
-
-
-
+
+
+
-
-
+
-
-
);
}
diff --git a/sona/week7/mission1/src/pages/SortComponent.tsx b/sona/week7/mission1/src/pages/SortComponent.tsx
new file mode 100644
index 00000000..7b8e27f5
--- /dev/null
+++ b/sona/week7/mission1/src/pages/SortComponent.tsx
@@ -0,0 +1,33 @@
+// components/SortOrder.tsx
+import { PAGENATION_ORDER } from "../enums/common";
+
+interface SortOrderProps {
+ sortOrder: PAGENATION_ORDER;
+ setSortOrder: (order: PAGENATION_ORDER) => void;
+}
+
+export default function SortComponent({
+ sortOrder,
+ setSortOrder,
+}: SortOrderProps) {
+ return (
+
+
+
+
+ );
+}
diff --git a/sona/week7/mission1/src/pages/TagItem.tsx b/sona/week7/mission1/src/pages/TagItem.tsx
new file mode 100644
index 00000000..c0e7527c
--- /dev/null
+++ b/sona/week7/mission1/src/pages/TagItem.tsx
@@ -0,0 +1,16 @@
+export function TagItem({
+ tag,
+ onRemove,
+}: {
+ tag: string;
+ onRemove: () => void;
+}) {
+ return (
+
+ );
+}
diff --git a/sona/week7/mission1/src/routes.tsx b/sona/week7/mission1/src/routes.tsx
index f6f9e31e..22144ac8 100644
--- a/sona/week7/mission1/src/routes.tsx
+++ b/sona/week7/mission1/src/routes.tsx
@@ -1,18 +1,26 @@
import { createBrowserRouter, RouteObject } from "react-router-dom";
-import HomePage from "./layout/HomePage";
import NotFoundPage from "./pages/NotFoundPage";
import Login from "./pages/Login";
import SignUp from "./pages/SignUp";
import MyPage from "./pages/MyPage";
import ProtectedLayout from "./layout/ProtectedLayout";
import GoogleLoginRedirectPage from "./pages/GoogleLoginRedirectPage";
+import Layout from "./layout/HomeLayout";
+import Home from "./pages/Home";
+import CardDetail from "./pages/CardDetail";
+import Comment from "./pages/Comment";
+import LpDetailEdit from "./pages/LpDetailEdit";
//로그인 필요없는 페이지
const publicRoutes: RouteObject[] = [
{
path: "/",
- element:
,
+ element:
,
errorElement:
,
children: [
+ {
+ index: true,
+ element:
,
+ },
{
path: "login",
element:
,
@@ -21,6 +29,7 @@ const publicRoutes: RouteObject[] = [
path: "signup",
element:
,
},
+
{ path: "v1/auth/google/callback", element:
},
],
},
@@ -31,7 +40,18 @@ const protectedRoutes: RouteObject[] = [
path: "/",
element:
,
errorElement:
,
- children: [{ path: "my", element:
}],
+ children: [
+ { path: "my", element:
},
+ {
+ path: "lp/:id",
+ element:
,
+ },
+ {
+ path: "lp/:id/comment",
+ element:
,
+ },
+ { path: "lp/:id/edit", element:
},
+ ],
},
];
diff --git a/sona/week7/mission1/src/types/comment.ts b/sona/week7/mission1/src/types/comment.ts
new file mode 100644
index 00000000..db782648
--- /dev/null
+++ b/sona/week7/mission1/src/types/comment.ts
@@ -0,0 +1,23 @@
+import { CursorBasedResponse } from "./common";
+
+export type Author = {
+ id: number;
+ name: string;
+ email: string;
+ bio: null;
+ avatar: null;
+ createdAt: Date;
+ updatedAt: Date;
+};
+
+export type Comment = {
+ id: number;
+ content: string;
+ lpId: number;
+ authorId: number;
+ createdAt: Date;
+ updatedAt: Date;
+ author: Author;
+};
+
+export type ResponseCommentListDto = CursorBasedResponse
;
diff --git a/sona/week7/mission1/src/types/common.ts b/sona/week7/mission1/src/types/common.ts
index 306b3dca..afd2982c 100644
--- a/sona/week7/mission1/src/types/common.ts
+++ b/sona/week7/mission1/src/types/common.ts
@@ -1,6 +1,61 @@
+import { MutationMeta } from "@tanstack/react-query";
+import { PAGENATION_ORDER } from "../enums/common";
+
export type CommenResponse = {
status: boolean;
statusCode: number;
message: string;
data: T;
};
+
+export type CursorBasedResponse = CommenResponse<{
+ data: T;
+ nextCursor: number | null;
+ hasNext: boolean;
+}>;
+
+//lp목록 조회 파라미터
+export type PageDto = {
+ cursor?: number;
+ limit?: number;
+ search?: string;
+ order?: PAGENATION_ORDER;
+};
+
+//comment 목록 조회 파라미터
+export type CommentPageDto = {
+ lpId: number;
+ cursor?: number;
+ limit?: number;
+ order?: PAGENATION_ORDER;
+};
+
+//lp삭제 파라미터
+export type LpDeleteDto = {
+ lpId: number;
+ commentId: number;
+};
+//commentDto
+export type CommentPatchDto = {
+ lpId: number;
+ commentId: number;
+ content: string;
+};
+
+//userEditDto
+export type UserPatchDto = {
+ name: string;
+ bio?: string;
+ avatar?: string;
+};
+
+//author
+export type Author = {
+ id: number;
+ name: string;
+ email: string;
+ bio: null;
+ avatar: null;
+ createdAt: Date;
+ updatedAt: Date;
+};
diff --git a/sona/week7/mission1/src/types/lp.ts b/sona/week7/mission1/src/types/lp.ts
new file mode 100644
index 00000000..2854d11e
--- /dev/null
+++ b/sona/week7/mission1/src/types/lp.ts
@@ -0,0 +1,27 @@
+import { CursorBasedResponse } from "./common";
+
+export type Tag = {
+ id: number;
+ name: string;
+};
+
+export type Likes = {
+ id: number;
+ userId: number;
+ lpId: number;
+};
+
+export type Lp = {
+ id: number;
+ title: string;
+ content: string;
+ thumbnail: string;
+ published: boolean;
+ authorId: number;
+ createdAt: Date;
+ updatedAt: Date;
+ tags: Tag[];
+ likes: Likes[];
+};
+
+export type ResponseLpListDto = CursorBasedResponse;
diff --git a/sona/week7/mission1/src/types/lpDetail.ts b/sona/week7/mission1/src/types/lpDetail.ts
new file mode 100644
index 00000000..1387217d
--- /dev/null
+++ b/sona/week7/mission1/src/types/lpDetail.ts
@@ -0,0 +1,18 @@
+import { Author, CommenResponse } from "./common";
+import { Likes, Tag } from "./lp";
+
+export type LpDetail = {
+ id: number;
+ title: string;
+ content: string;
+ thumbnail: string;
+ published: boolean;
+ authorId: number;
+ createdAt: string; // 또는 Date, 실제 사용하는 포맷에 맞게
+ updatedAt: string;
+ tags: Tag[];
+ likes: Likes[];
+ author: Author;
+};
+
+export type LpDetailResponseDto = CommenResponse;
diff --git a/sona/week7/mission1/src/types/lpPost.ts b/sona/week7/mission1/src/types/lpPost.ts
new file mode 100644
index 00000000..83ea8224
--- /dev/null
+++ b/sona/week7/mission1/src/types/lpPost.ts
@@ -0,0 +1,20 @@
+//Lp응답 type
+export type LpPost = {
+ id: number;
+ title: string;
+ content: string;
+ thumbnail: string;
+ published: boolean;
+ authorId: number;
+ createdAt: Date;
+ updatedAt: Date;
+};
+
+//Lp body파라미터
+export type LpBodyPost = {
+ title: string;
+ content: string;
+ thumbnail: string;
+ tags: string[];
+ published: boolean;
+};
diff --git a/sona/week7/mission1/src/utils/dateCalculate.ts b/sona/week7/mission1/src/utils/dateCalculate.ts
new file mode 100644
index 00000000..8a095e82
--- /dev/null
+++ b/sona/week7/mission1/src/utils/dateCalculate.ts
@@ -0,0 +1,21 @@
+export default function getTimePassed(createdAt: Date) {
+ // const formattedDate = createdAt.replace(/\./g, "-");
+ const diff = new Date().getTime() - createdAt.getTime(); //ms변환
+
+ const sec = diff / 1000; //초
+ const min = sec / 60; //분
+ const hours = min / 60; //시간
+ const days = hours / 24; //일
+
+ if (min < 0) {
+ return "방금 전";
+ } else if (min < 60) {
+ return `${Math.round(min)}분 전`;
+ } else if (hours < 24) {
+ return `${Math.round(hours)}시간 전`;
+ } else if (days < 2) {
+ return "하루 전";
+ } else {
+ return "며칠 전";
+ }
+}
+
+ 
likeToggleBtn.mutate(lpId)}
+ />
+
+ 
+ 
+ 
+ 검색
+
+