Post-list-server연결 (#25)

* New : asset 추가

* New : Dayjs , Intersection Observer 추가

* New : 모킹 제거

* Refactor : 인터페이스 변경

* New : 검색기능, 포스트리스트 서버연결

client/package.json

@@ -20,10 +20,12 @@
     "@tanstack/react-query": "^5.8.1",
     "@tanstack/react-query-devtools": "^5.8.1",
     "axios": "^1.6.0",
+    "dayjs": "^1.11.10",
     "framer-motion": "^10.16.4",
     "next": "14.0.0",
     "react": "^18",
-    "react-dom": "^18"
+    "react-dom": "^18",
+    "react-intersection-observer": "^9.5.3"
   },
   "devDependencies": {
     "@storybook/addon-essentials": "7.5.2",

client/src/app/(protectedRoute)/new-post/page.tsx

@@ -1,3 +1,95 @@
+"use client";
+
+import {
+  AppBar,
+  Avatar,
+  Box,
+  ButtonBase,
+  Container,
+  Paper,
+  TextField,
+  Toolbar,
+  Typography,
+} from "@mui/material";
+import GoBackIcon from "@/assets/icons/GoBackIcon.svg";
+import InputSearchIcon from "@/assets/icons/InputSearchIcon.svg";
+import AlcholeSearchIcon from "@/assets/icons/AlcholeSearchIcon.svg";
+import { useRouter } from "next/navigation";
+import { ChangeEvent, useState } from "react";
+import { useUserInfoQuery } from "@/queries/auth/useUserInfoQuery";
+
 export default function NewpostPage() {
-  return <>페지이</>;
+  const router = useRouter();
+  const [formValue, setFormValue] = useState({
+    alcoholNo: "",
+    alcoholFeature: "",
+    postContent: "",
+    postType: "BASIC",
+    positionInfo: "",
+    tagList: ["string"],
+  });
+  const changeHadler = ({
+    target,
+  }: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+    setFormValue((prev) => ({ ...prev, [target.name]: target.value }));
+  };
+
+  return (
+    <>
+      <AppBar position={"static"}>
+        <Toolbar sx={{ display: "flex", justifyContent: "space-between" }}>
+          <ButtonBase onClick={() => router.back()}>
+            <GoBackIcon></GoBackIcon>
+          </ButtonBase>
+          <Typography variant="subtitle2" fontWeight={"bold"}>
+            포스팅
+          </Typography>
+          <Typography variant="subtitle2" color={"primary.main"}>
+            공유
+          </Typography>
+        </Toolbar>
+      </AppBar>
+      <Container sx={{ px: { xs: 0, sm: 4 } }} maxWidth={"lg"}>
+        <Paper
+          sx={{
+            minHeight: "calc(100vh - 112px)",
+            display: "flex",
+            flexDirection: "column",
+            gap: 2,
+            p: 2,
+          }}
+          component="form"
+        >
+          <TextField
+            placeholder="검색어를 입력해주세요"
+            autoFocus
+            InputProps={{
+              startAdornment: (
+                <AlcholeSearchIcon style={{ marginRight: "8px" }} />
+              ),
+              endAdornment: <InputSearchIcon />,
+            }}
+          />
+
+          <Box>
+            <TextField
+              id="filled-multiline-flexible"
+              placeholder="입력해주세요"
+              multiline
+              name={"postContent"}
+              onChange={changeHadler}
+              value={formValue.postContent}
+              rows={6}
+            />
+          </Box>
+          <Typography variant="label" sx={{ textAlign: "right" }}>
+            {formValue.postContent.length} /{" "}
+            <Typography variant="label" color="primary.main" component="span">
+              200자
+            </Typography>
+          </Typography>
+        </Paper>
+      </Container>
+    </>
+  );
 }

client/src/app/@Modal/(.)post/[userId]/[postId]/page.tsx

@@ -1,10 +1,11 @@
 import PostDetailPage from "@/app/post/[userId]/[postId]/page";
 import ModalWrapper from "@/components/ModalWrapper";
 
-const page = (props: { params: { userId: string; postId: string } }) => {
+const page = async ({ ...context }) => {
+  const parsedPostId = context.params.postId
   return (
     <ModalWrapper disableBox>
-      <PostDetailPage {...props} />
+      <PostDetailPage {...context} postNo={parsedPostId} />
     </ModalWrapper>
   );
 };

client/src/app/error.tsx

@@ -0,0 +1,29 @@
+'use client'
+
+import { useEffect } from 'react'
+
+export default function Error({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string }
+  reset: () => void
+}) {
+  useEffect(() => {
+    // Log the error to an error reporting service
+    console.error(error)
+  }, [error])
+
+  return (
+    <div>
+      <h2>Something went wrong!</h2>
+      <button
+        onClick={
+          () => reset()
+        }
+      >
+        Try again
+      </button>
+    </div>
+  )
+}

client/src/app/layout.tsx

@@ -39,7 +39,8 @@ export default function RootLayout({
                 overflow: "auto",
               }}
             >
-              <MSWInit>{children}</MSWInit>
+              <MSWInit></MSWInit>
+              {children}
             </Box>
             <NavigationBar />
           </ThemeRegistry>

client/src/app/page.tsx

@@ -1,19 +1,22 @@
-
+"use server";
 import PostCardList from "@/components/post/PostCardList";
-// import { getPostListQueryFn } from "@/queries/post/useGetPostListQuery";
-import { Container } from "@mui/material";
-import { Suspense } from "react";
+import { getPostListQueryFn } from "@/queries/post/useGetPostListInfiniteQuery";
+import { Container, Paper } from "@mui/material";
+
+export default async function Home() {
+  const initialData = await getPostListQueryFn({ page: 0, size: 10 });
 
-export default function Home() {
-  // const initialData = await getPostListQueryFn();
   return (
     <Container sx={{ px: { xs: 0, sm: 4 } }} maxWidth={"lg"}>
-      <Suspense fallback={<>로딩중</>}>
-        {/* FIXME */}{/* @ts-ignore*/}
-        <PostCardList
-        // initialData={initialData}
-        />
-      </Suspense>
+      <Paper
+        sx={{
+          minHeight: "calc(100vh - 56px)",
+          display: "flex",
+          flexDirection: "column",
+        }}
+      >
+        <PostCardList initialData={initialData} />
+      </Paper>
     </Container>
   );
 }

client/src/app/post/[userId]/[postId]/page.tsx

@@ -1,24 +1,16 @@
+"use server";
 import PostDetail from "@/components/post/PostDetail";
-import { Suspense } from "react";
+import { getPostDetailQueryFn } from "@/queries/post/useGetPostDetailQuery";
+import { redirect } from "next/navigation";
 
-const PostDetailPage = ({
-  params,
-}: {
-  params: { userId: string; postId: string };
-}) => {
-  // FIXME @로 시작되는 경우만 슬라이스 하도록 추후에 고치고, 함수화 해야함
-  const parsedUserId = params.userId.slice(1, params.userId.length);
-  const parsedPostId = params.postId;
-  return (
-    <div>
-      userId:{parsedUserId}
-      postId:{parsedPostId}
-      <br />
-      <Suspense fallback={<>로딩</>}>
-        <PostDetail />
-      </Suspense>
-    </div>
-  );
+const PostDetailPage = async ({ ...context }) => {
+  const parsedPostId = context.params.postId;
+  try {
+    const initialData = await getPostDetailQueryFn(parsedPostId);
+    return <PostDetail postNo={parsedPostId} initialData={initialData} />;
+  } catch {
+    redirect("/not-found");
+  }
 };
 
 export default PostDetailPage;

client/src/app/search/page.tsx

@@ -1,9 +1,24 @@
-const SearchPage = ({
+"use server";
+import SearchArea from "@/components/search/SearchArea";
+import { getPostListQueryFn } from "@/queries/post/useGetPostListInfiniteQuery";
+import { Container } from "@mui/material";
+
+const SearchPage = async ({
   searchParams,
 }: {
-  searchParams?: { [key: string]: string | string[] | undefined };
+  searchParams?: { [key: string]: string | undefined };
 }) => {
-  return <div>{searchParams?.keyword}</div>;
+  const initialData = await getPostListQueryFn({
+    searchKeyword: searchParams?.keyword,
+  });
+  return (
+    <Container sx={{ px: { xs: 0, sm: 4 } }} maxWidth={"lg"}>
+      <SearchArea
+        initialData={initialData}
+        searchKeyword={searchParams?.keyword}
+      />
+    </Container>
+  );
 };
 
 export default SearchPage;