Merge pull request #293 from wonsik3686/Next-정원식-Sprint10

[정원식] Sprint 10
codeit-bootcamp-frontend · Aug 21, 2024 · 1b05e3e · 1b05e3e
2 parents 09b0724 + bb8cc7d
commit 1b05e3e
Show file tree

Hide file tree

Showing 63 changed files with 1,235 additions and 184 deletions.
diff --git a/next.config.js b/next.config.js
@@ -2,9 +2,11 @@
 const nextConfig = {
   reactStrictMode: true,
   images: {
-    domains: [
-      'd21x3meyyr2jva.cloudfront.net',
-      'sprint-fe-project.s3.ap-northeast-2.amazonaws.com',
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: '**',
+      },
     ],
   },
 };

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -18,6 +18,7 @@
     "normalize.css": "^8.0.1",
     "react": "^18",
     "react-dom": "^18",
+    "react-infinite-scroller": "^1.2.6",
     "react-router-dom": "^6.26.0",
     "reset-css": "^5.0.2"
   },

diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -1,23 +1,19 @@
-import Header from '@/src/components/layout/Header/Header';
+import 'normalize.css';
+import '@styles/reset.css';
+
+import Header from '@components/layout/Header/Header';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import type { AppProps } from 'next/app';
 import Head from 'next/head';
 import { useState } from 'react';
-import 'normalize.css';
 
 export default function App({ Component, pageProps }: AppProps) {
   const [queryClient] = useState(() => new QueryClient());
 
   return (
     <>
       <QueryClientProvider client={queryClient}>
-        <Head>
-          <link
-            rel="stylesheet"
-            href="https://cdn.jsdelivr.net/npm/[email protected]/reset.min.css"
-          />
-        </Head>
         <Header />
         <Component {...pageProps} />
         <ReactQueryDevtools initialIsOpen={false} />

diff --git a/pages/_document.tsx b/pages/_document.tsx
@@ -1,13 +1,18 @@
-import { Html, Head, Main, NextScript } from 'next/document'
+import { Html, Head, Main, NextScript } from 'next/document';
 
 export default function Document() {
   return (
     <Html lang="en">
-      <Head />
+      <Head>
+        <link
+          rel="stylesheet"
+          href="https://cdn.jsdelivr.net/npm/[email protected]/reset.min.css"
+        />
+      </Head>
       <body>
         <Main />
         <NextScript />
       </body>
     </Html>
-  )
+  );
 }
diff --git a/pages/addboard/index.tsx b/pages/addboard/index.tsx
@@ -0,0 +1,16 @@
+import AddBoardForm from '@components/board/AddBoardForm/AddBoardForm';
+import BasicLayout from '@components/layout/BasicLayout/BasicLayout';
+
+type AddBoardPageProps = {};
+
+const AddBoardPage = ({}: AddBoardPageProps) => {
+  return (
+    <>
+      <BasicLayout>
+        <AddBoardForm />
+      </BasicLayout>
+    </>
+  );
+};
+
+export default AddBoardPage;
diff --git a/pages/boards/[id].tsx b/pages/boards/[id].tsx
@@ -0,0 +1,47 @@
+import ArticleCommentForm from '@components/board/ArticleCommentForm/ArticleCommentForm';
+import ArticleSection from '@components/board/ArticleSection/ArticleSection';
+import BasicLayout from '@components/layout/BasicLayout/BasicLayout';
+import { getArticle } from '@lib/api/articleApi';
+import { Article, ArticleDetailResponse } from '@type/ArticleTypes';
+import { GetServerSideProps } from 'next';
+
+export const getServerSideProps: GetServerSideProps = async (context) => {
+  const { id } = context.query;
+  getArticle({ articleId: Number(id) })
+    .then((res) => {
+      return {
+        props: {
+          initArticle: res?.data,
+        },
+      };
+    })
+    .catch((error) => {
+      return {
+        props: {
+          initArticle: {},
+        },
+      };
+    });
+  return {
+    props: {
+      initArticle: {},
+    },
+  };
+};
+
+type BoardDetailPageProps = {
+  initArticle: ArticleDetailResponse;
+};
+
+const BoardDetailPage = ({ initArticle }: BoardDetailPageProps) => {
+  return (
+    <>
+      <BasicLayout>
+        <ArticleSection article={initArticle} />
+        <ArticleCommentForm articleId={initArticle.id} />
+      </BasicLayout>
+    </>
+  );
+};
+
+export default BoardDetailPage;
diff --git a/pages/boards/index.tsx b/pages/boards/index.tsx
@@ -1,8 +1,8 @@
-import AllArticlesBoard from '@/src/components/board/AllArticlesBoard/AllArticlesBoard';
-import BestArticlesSection from '@/src/components/board/BestArticlesSection/BestArticlesSection';
-import BasicLayout from '@/src/components/layout/BasicLayout/BasicLayout';
-import { getArticles } from '@/src/lib/api/articleApi';
-import { Article } from '@/src/types/ArticleTypes';
+import AllArticlesBoard from '@components/board/AllArticlesBoard/AllArticlesBoard';
+import BestArticlesSection from '@components/board/BestArticlesSection/BestArticlesSection';
+import BasicLayout from '@components/layout/BasicLayout/BasicLayout';
+import { getArticles } from '@lib/api/articleApi';
+import { Article } from '@type/ArticleTypes';
 import { error } from 'console';
 import { GetServerSideProps } from 'next';
 

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -1,6 +1,5 @@
 import Head from 'next/head';
-import styles from '@/src/styles/Home.module.scss';
-import { getArticles } from '@/src/lib/api/articleApi';
+import styles from '@styles/Home.module.scss';
 
 export default function Home() {
   return (

diff --git a/src/assets/images/image/img_default.png b/src/assets/images/image/img_default.png
diff --git a/src/components/board/AddBoardForm/AddBoardForm.module.scss b/src/components/board/AddBoardForm/AddBoardForm.module.scss
@@ -0,0 +1,22 @@
+@import '/src/styles/global.scss';
+
+.form {
+  width: 100%;
+
+  &__header {
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    margin: 0 0 2rem;
+  }
+
+  &__input {
+    display: flex;
+    width: 100%;
+    flex-direction: column;
+    margin: 0 0 1.5rem;
+    gap: 0.5rem;
+  }
+}
diff --git a/src/components/board/AddBoardForm/AddBoardForm.tsx b/src/components/board/AddBoardForm/AddBoardForm.tsx
@@ -0,0 +1,79 @@
+import styles from './AddBoardForm.module.scss';
+
+import SectionTitle from '@core/ui/SectionTitle/SectionTitle';
+import UIButton from '@core/ui/buttons/UIButton/UIButton';
+import UIInputLabel from '@core/ui/inputs/UIInputLabel/UIInputLabel';
+import UIInput from '@core/ui/inputs/UIInput/UIInput';
+import UITextarea from '@core/ui/inputs/UITextarea/UITextarea';
+import UIImageInput from '@core/ui/inputs/UIImageInput/UIImageInput';
+import useArticleForm from '@lib/hooks/useArticleForm';
+
+const AddBoardForm = () => {
+  const {
+    setTitle,
+    setContent,
+    submitArticle,
+    imageFile,
+    initialPreview,
+    handleImageChange,
+  } = useArticleForm();
+
+  const handleChangeTitleInput = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setTitle(e.target.value);
+  };
+
+  const handleChangeContentInput = (
+    e: React.ChangeEvent<HTMLTextAreaElement>
+  ) => {
+    setContent(e.target.value);
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLElement>) => {
+    if (e.key === 'Enter') e.preventDefault();
+  };
+
+  return (
+    <>
+      <form className={styles['form']}>
+        <div className={styles['form__header']}>
+          <SectionTitle title="게시글 쓰기" />
+          <UIButton
+            children={'등록'}
+            handleClick={submitArticle}
+            type="box"
+            buttonTagType="button"
+            isDisabled={false}
+            isSmallButton={false}
+          />
+        </div>
+        <div className={styles['form__input']}>
+          <UIInputLabel text="*제목" />
+          <UIInput
+            placeholder="제목을 입력해주세요"
+            onKeyDown={handleKeyDown}
+            onChange={handleChangeTitleInput}
+          />
+        </div>
+        <div className={styles['form__input']}>
+          <UIInputLabel text="*내용" />
+          <UITextarea
+            placeholder="내용을 입력해주세요"
+            onTextareaKeyDown={handleKeyDown}
+            onTextareaChange={handleChangeContentInput}
+          />
+        </div>
+        <div className={styles['form__input']}>
+          <UIInputLabel text="*이미지" />
+          <UIImageInput
+            onChangeFile={handleImageChange}
+            initialPreview={initialPreview}
+            file={imageFile}
+            name="imgFile"
+          />
+        </div>
+      </form>
+    </>
+  );
+};
+
+export default AddBoardForm;
diff --git a/src/components/board/AllArticlesBoard/AllArticlesBoard.tsx b/src/components/board/AllArticlesBoard/AllArticlesBoard.tsx
@@ -1,14 +1,15 @@
 import styles from './AllArticlesBoard.module.scss';
 
-import SectionTitle from '@/src/core/ui/SectionTitle/SectionTitle';
-import UButton from '@/src/core/ui/buttons/UButton/UButton';
+import SectionTitle from '@core/ui/SectionTitle/SectionTitle';
+import UIButton from '@core/ui/buttons/UIButton/UIButton';
 import ArticleSearchBar from '../ArticleSearchBar/ArticleSearchBar';
-import UDropdown from '@/src/core/ui/dropdowns/UDropdown/UDropdown';
+import UIDropdown from '@core/ui/dropdowns/UIDropdown/UIDropdown';
 import { useRouter } from 'next/router';
 import { useEffect, useState } from 'react';
-import { Article, ArticleOrderBy } from '@/src/types/ArticleTypes';
-import { getArticles } from '@/src/lib/api/articleApi';
+import { Article, ArticleOrderBy } from '@type/ArticleTypes';
+import { getArticles } from '@lib/api/articleApi';
 import BasicArticleCard from '../BasicArticleCard/BasicArticleCard';
+import Link from 'next/link';
 
 type AllArticlesBoardProps = { initArticles: Article[] };
 
@@ -53,11 +54,13 @@ const AllArticlesBoard = ({ ...props }: AllArticlesBoardProps) => {
     <>
       <div className={styles['header']}>
         <SectionTitle title="게시글" />
-        <UButton children={'글쓰기'} type="box" handleClick={() => {}} />
+        <Link href={'/addboard'}>
+          <UIButton children={'글쓰기'} type="box" handleClick={() => {}} />
+        </Link>
       </div>
       <div className={styles['searchBar']}>
         <ArticleSearchBar onSearch={handleSearch} />
-        <UDropdown
+        <UIDropdown
           onSortSelection={handleSortSelection}
           options={[
             { key: 'recent', value: '최신순' },

diff --git a/src/components/board/ArticleCommentCard/ArticleCommentCard.module.scss b/src/components/board/ArticleCommentCard/ArticleCommentCard.module.scss
@@ -0,0 +1,50 @@
+@import '/src/styles/global.scss';
+
+.card {
+  display: flex;
+  width: 100%;
+  padding: 0.5rem 0.5rem 0.75rem;
+  align-items: flex-start;
+  flex-wrap: wrap;
+  border-bottom: 1px solid $gray-200;
+  background-color: $gray-10;
+
+  &__contentWrapper {
+  }
+
+  &__content {
+    @include Body4;
+    color: $gray-800;
+    word-break: keep-all;
+  }
+
+  &__metaWrapper {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+  }
+
+  &__profileImageWrapper {
+    width: 2rem;
+    height: 2rem;
+  }
+
+  &__profileImage {
+    background-color: $gray-200;
+  }
+
+  &__writerWrapper {
+    display: flex;
+    flex-direction: column;
+  }
+
+  &__nickname {
+    @include Caption1;
+    color: $gray-600;
+  }
+
+  &__date {
+    @include Caption1;
+    color: $gray-400;
+  }
+}