Merge pull request #1078 from rlghks1490/part4-박기환

[박기환] week20

.eslintrc.json

@@ -1,3 +1,6 @@
 {
-  "extends": "next/core-web-vitals"
+  "extends": "next/core-web-vitals",
+  "rules": {
+    "react/display-name": "off"
+  }
 }

next.config.js

@@ -1,6 +1,15 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
-}
+  webpack: (config) => {
+    config.module.rules.push({
+      test: /\.svg$/i,
+      issuer: /\.[jt]sx?$/,
+      use: ["@svgr/webpack"],
+    });
 
-module.exports = nextConfig
+    return config;
+  },
+};
+
+module.exports = nextConfig;

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "fe-weekly-mission",
+  "name": "weekly-mission-nextjs",
   "version": "0.1.0",
   "private": true,
   "scripts": {
@@ -9,16 +9,22 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "axios": "^1.6.2",
+    "classnames": "^2.3.2",
+    "date-fns": "^2.30.0",
+    "next": "13.5.6",
     "react": "^18",
     "react-dom": "^18",
-    "next": "13.5.6"
+    "react-hook-form": "^7.48.2"
   },
   "devDependencies": {
-    "typescript": "^5",
+    "@svgr/webpack": "^8.1.0",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "eslint": "^8",
-    "eslint-config-next": "13.5.6"
+    "eslint-config-next": "13.5.6",
+    "sass": "^1.69.5",
+    "typescript": "^5"
   }
 }

pages/_app.tsx

@@ -1,6 +1,6 @@
-import '@/styles/globals.css'
-import type { AppProps } from 'next/app'
+import "@/styles/reset.css";
+import type { AppProps } from "next/app";
 
 export default function App({ Component, pageProps }: AppProps) {
-  return <Component {...pageProps} />
+  return <Component {...pageProps} />;
 }

pages/folder/[[...folderId]]/index.tsx

@@ -0,0 +1,50 @@
+import { useGetFolders } from "@/src/folder/data-access-folder";
+import { useGetLinks } from "@/src/link/data-access-link";
+import { Layout } from "@/src/sharing/feature-layout";
+import { FolderLayout } from "@/src/page-layout/FolderLayout";
+import { FolderToolBar } from "@/src/folder/feature-folder-tool-bar";
+import { SearchBar } from "@/src/link/ui-search-bar";
+import { ALL_LINKS_ID } from "@/src/link/data-access-link/constant";
+import { LinkForm } from "@/src/link/feature-link-form";
+import { CardList } from "@/src/link/feature-card-list";
+import { useSearchLink } from "@/src/link/util-search-link";
+import { ROUTE, useIntersectionObserver } from "@/src/sharing/util";
+import { useRouter } from "next/router";
+import { useEffect, useMemo } from "react";
+
+const FolderPage = () => {
+  const router = useRouter();
+  const { folderId } = router.query;
+  const currentFolderId = useMemo(() => {
+    if (router.isReady) {
+      return folderId?.[0] ? parseInt(folderId?.[0]) : ALL_LINKS_ID;
+    }
+    return undefined;
+  }, [router.isReady, folderId]);
+  const { data: folders } = useGetFolders();
+  const { data: links, loading } = useGetLinks(currentFolderId);
+  const { searchValue, handleChange, handleCloseClick, result } = useSearchLink(links);
+  const { ref, isIntersecting } = useIntersectionObserver<HTMLDivElement>();
+
+  useEffect(() => {
+    const accessToken = localStorage.getItem("accessToken");
+    if (!accessToken) {
+      router.replace(ROUTE.로그인);
+    }
+  }, [router]);
+
+  return (
+    <Layout isSticky={false} footerRef={ref}>
+      <FolderLayout
+        linkForm={<LinkForm hideFixedLinkForm={isIntersecting} />}
+        searchBar={
+          <SearchBar value={searchValue} onChange={handleChange} onCloseClick={handleCloseClick} />
+        }
+        folderToolBar={<FolderToolBar folders={folders} selectedFolderId={currentFolderId} />}
+        cardList={loading ? null : <CardList links={result} />}
+      />
+    </Layout>
+  );
+};
+
+export default FolderPage;

pages/index.tsx

@@ -1,114 +1,17 @@
-import Head from 'next/head'
-import Image from 'next/image'
-import { Inter } from 'next/font/google'
-import styles from '@/styles/Home.module.css'
+import Head from "next/head";
+import Image from "next/image";
+import { Inter } from "next/font/google";
+import styles from "@/styles/Home.module.css";
 
-const inter = Inter({ subsets: ['latin'] })
+const inter = Inter({ subsets: ["latin"] });
 
 export default function Home() {
   return (
     <>
       <Head>
-        <title>Create Next App</title>
-        <meta name="description" content="Generated by create next app" />
-        <meta name="viewport" content="width=device-width, initial-scale=1" />
-        <link rel="icon" href="/favicon.ico" />
+        <title>Linkbrary</title>
       </Head>
-      <main className={`${styles.main} ${inter.className}`}>
-        <div className={styles.description}>
-          <p>
-            Get started by editing&nbsp;
-            <code className={styles.code}>pages/index.tsx</code>
-          </p>
-          <div>
-            <a
-              href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              By{' '}
-              <Image
-                src="/vercel.svg"
-                alt="Vercel Logo"
-                className={styles.vercelLogo}
-                width={100}
-                height={24}
-                priority
-              />
-            </a>
-          </div>
-        </div>
-
-        <div className={styles.center}>
-          <Image
-            className={styles.logo}
-            src="/next.svg"
-            alt="Next.js Logo"
-            width={180}
-            height={37}
-            priority
-          />
-        </div>
-
-        <div className={styles.grid}>
-          <a
-            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
-            className={styles.card}
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <h2>
-              Docs <span>-&gt;</span>
-            </h2>
-            <p>
-              Find in-depth information about Next.js features and&nbsp;API.
-            </p>
-          </a>
-
-          <a
-            href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
-            className={styles.card}
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <h2>
-              Learn <span>-&gt;</span>
-            </h2>
-            <p>
-              Learn about Next.js in an interactive course with&nbsp;quizzes!
-            </p>
-          </a>
-
-          <a
-            href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
-            className={styles.card}
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <h2>
-              Templates <span>-&gt;</span>
-            </h2>
-            <p>
-              Discover and deploy boilerplate example Next.js&nbsp;projects.
-            </p>
-          </a>
-
-          <a
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
-            className={styles.card}
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <h2>
-              Deploy <span>-&gt;</span>
-            </h2>
-            <p>
-              Instantly deploy your Next.js site to a shareable URL
-              with&nbsp;Vercel.
-            </p>
-          </a>
-        </div>
-      </main>
+      <main></main>
     </>
-  )
+  );
 }

pages/shared/[folderId]/index.tsx

@@ -0,0 +1,47 @@
+import { useGetFolder, useGetSampleFolder } from "@/src/folder/data-access-folder";
+import { Layout } from "@/src/sharing/feature-layout";
+import { SharedLayout } from "@/src/page-layout/SharedLayout";
+import { CardList } from "@/src/link/ui-card-list";
+import { FolderInfo } from "@/src/folder/ui-folder-info";
+import { ReadOnlyCard } from "@/src/link/ui-read-only-card";
+import { SearchBar } from "@/src/link/ui-search-bar";
+import { useSearchLink } from "@/src/link/util-search-link/useSearchLink";
+import { useRouter } from "next/router";
+import { useGetUser } from "@/src/user/data-access-user/useGetUser";
+import { useGetSharedLinks } from "@/src/link/data-access-link";
+
+const SharedPage = () => {
+  const router = useRouter();
+  const { folderId } = router.query;
+  const { data: folder } = useGetFolder(folderId as string);
+  const { data: owner } = useGetUser(folder.userId);
+  const { data: links } = useGetSharedLinks(folder.userId, folderId as string);
+
+  const { searchValue, handleChange, handleCloseClick, result } = useSearchLink(links);
+
+  return (
+    <Layout>
+      <SharedLayout
+        folderInfo={
+          <FolderInfo
+            profileImage={owner.imageSource}
+            ownerName={owner.name}
+            folderName={folder.name}
+          />
+        }
+        searchBar={
+          <SearchBar value={searchValue} onChange={handleChange} onCloseClick={handleCloseClick} />
+        }
+        cardList={
+          <CardList>
+            {result?.map((link) => (
+              <ReadOnlyCard key={link?.id} {...link} />
+            ))}
+          </CardList>
+        }
+      />
+    </Layout>
+  );
+};
+
+export default SharedPage;

pages/signin/index.tsx

@@ -0,0 +1,22 @@
+import { SignInForm } from "@/src/auth/feature-sign-in-form";
+import { Oauth } from "@/src/auth/feature-oauth";
+import { SignHeader } from "@/src/auth/ui-sign-header";
+import { SignLayout } from "@/src/page-layout/SignLayout";
+import { ROUTE } from "@/src/sharing/util";
+
+const SignInPage = () => {
+  return (
+    <SignLayout
+      header={
+        <SignHeader
+          message="회원이 아니신가요?"
+          link={{ text: "회원 가입하기", href: ROUTE.회원가입 }}
+        />
+      }
+      form={<SignInForm />}
+      oauth={<Oauth description="소셜 로그인" />}
+    />
+  );
+};
+
+export default SignInPage;

pages/signup/index.tsx

@@ -0,0 +1,22 @@
+import { Oauth } from "@/src/auth/feature-oauth";
+import { SignHeader } from "@/src/auth/ui-sign-header";
+import { SignLayout } from "@/src/page-layout/SignLayout";
+import { ROUTE } from "@/src/sharing/util";
+import { SignUpForm } from "@/src/auth/feature-sign-up-form";
+
+const SignUpPage = () => {
+  return (
+    <SignLayout
+      header={
+        <SignHeader
+          message="이미 회원이신가요?"
+          link={{ text: "로그인 하기", href: ROUTE.로그인 }}
+        />
+      }
+      form={<SignUpForm />}
+      oauth={<Oauth description="다른 방식으로 가입하기" />}
+    />
+  );
+};
+
+export default SignUpPage;