[김진희] Sprint 11

components/BestBoard.tsx

@@ -1,6 +1,6 @@
 import Image from 'next/image';
-import medal from '@/public/ic_medal.svg';
-import heart from '@/public/ic_heart.svg';
+import medal from '@/public/icons/ic_medal.svg';
+import heart from '@/public/icons/ic_heart.svg';
 import styles from '@/styles/BestBoard.module.css';
 
 interface Writer {

components/Comment.jsx

@@ -1,6 +1,6 @@
 import Image from 'next/image';
 import SelectBox from '@/components/common/SelectBox';
-import Profile from '@/public/ic_profile.svg';
+import Profile from '@/public/icons/ic_profile.svg';
 import styles from '@/styles/Comment.module.css';
 
 export default function Comment({ comment }) {

components/EntireBoard.tsx

@@ -1,6 +1,6 @@
 import Image from 'next/image';
-import heart from '@/public/ic_heart.svg';
-import profile from '@/public/ic_profile.svg';
+import heart from '@/public/icons/ic_heart.svg';
+import profile from '@/public/icons/ic_profile.svg';
 import styles from '@/styles/EntireBoard.module.css';
 
 interface Writer {

components/FileInput.jsx

@@ -1,6 +1,6 @@
 import { useEffect, useRef, useState } from 'react';
 import Image from 'next/image';
-import plus from '@/public/ic_plus.svg';
+import plus from '@/public/icons/ic_plus.svg';
 import styles from '@/styles/FileInput.module.css';
 
 function FileInput({ name, value, onChange }) {

components/Header.jsx

@@ -1,8 +1,8 @@
 import Image from 'next/image';
 import Link from 'next/link';
-import logo from '@/public/ic_logo.svg';
-import login from '@/public/ic_login.svg';
-import styles from '@/styles/Header.module.css'
+import logo from '@/public/icons/ic_logo.svg';
+import login from '@/public/icons/ic_login.svg';
+import styles from '@/styles/Header.module.css' 
 
 function Header() {
   return (

components/common/Button.tsx

@@ -0,0 +1,26 @@
+import React, { ButtonHTMLAttributes, ReactNode } from 'react';
+import styles from '@/styles/Common.module.css';
+import classNames from 'classnames';
+
+interface ButtonProp extends ButtonHTMLAttributes<HTMLButtonElement> {
+  children: ReactNode;
+  size: 'small' | 'medium' | 'large';
+}
+
+function Button({ children, size = 'small', ...rest }: ButtonProp) {
+const buttonClass = classNames({
+    [styles.smallButton]: size === 'small',
+    [styles.mediumButton]: size === 'medium',
+    [styles.largeButton]: size === 'large',
+  });
+
+  return (
+    <>
+      <button className={buttonClass} {...rest}>
+        <div>{children}</div>
+      </button>
+    </>
+  );
+}
+
+export default Button;

package.json

@@ -9,7 +9,9 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@types/classnames": "^2.3.0",
     "axios": "^1.7.7",
+    "classnames": "^2.5.1",
     "next": "13.5.6",
     "react": "^18",
     "react-dom": "^18"

pages/_app.jsx

@@ -1,15 +1,21 @@
 // import type { AppProps } from 'next/app'
+import { useRouter } from 'next/router';
 import Header from '../components/Header';
 import '@/styles/globals.css';
+import '@/styles/Home.module.css'
+import '@/styles/JoinForm.module.css'
 import '@/styles/Header.module.css';
 import '@/styles/Boards.module.css';
 import '@/styles/BestBoard.module.css';
 import '@/styles/EntireBoard.module.css';
 
 export default function App({ Component, pageProps }) {
+  const router = useRouter();
+  const noHeaderPages = ['/signup', '/login', '/'];
+
   return (
     <>
-      <Header />
+      {!noHeaderPages.includes(router.pathname) && <Header />}
       <Component {...pageProps} />
     </>
   );

pages/addboard.jsx

@@ -1,6 +1,6 @@
 import { useState, useEffect } from 'react';
 import { useRouter } from 'next/router'; // Next.js의 useRouter를 사용해 페이지 이동 처리
-import SmallButton from '@/components/common/SmallButton';
+import Button from '@/components/common/Button';
 import FileInput from '@/components/FileInput';
 import axios from '@/pages/api/api';
 
@@ -52,9 +52,9 @@ export default function AddBoard() {
       <main className="formBody">
         <aside className="formTop">
           <h2 className="formTheme">게시글 쓰기</h2>
-          <SmallButton type="submit" disabled={!isFormValid}>
+          <Button type="submit" disabled={!isFormValid}>
             등록
-          </SmallButton>
+          </Button>
         </aside>
         <div className="formBody">
           <section className="formSection">

pages/board/[articleId].jsx

@@ -3,12 +3,12 @@ import Link from 'next/link';
 import Image from 'next/image';
 import axios from '@/pages/api/api';
 import SelectBox from '@/components/common/SelectBox';
-import SmallButton from '@/components/common/SmallButton';
+import Button from '@/components/common/Button';
 import Comment from '@/components/Comment';
-import Profile from '@/public/ic_profile.svg';
-import Heart from '@/public/ic_heart.svg';
-import EmptyComment from '@/public/img_empty_comment.svg';
-import Back from '@/public/ic_back.svg';
+import Profile from '@/public/icons/ic_profile.svg';
+import Heart from '@/public/icons/ic_heart.svg';
+import EmptyComment from '@/public/images/img_empty_comment.svg';
+import Back from '@/public/icons/ic_back.svg';
 import styles from '@/styles/DetailedBoard.module.css';
 
 function formatDate(value) {
@@ -40,7 +40,7 @@ export async function getServerSideProps(context) {
   }
 }
 
-export default function Board({ articleData, initialCommentData }) {
+export default function Board({ articleData, commentData: initialCommentData }) {
   const [comment, setComment] = useState('');
   const [isFormValid, setIsFormValid] = useState(false);
   const [commentData, setCommentData] = useState(initialCommentData || []);
@@ -123,9 +123,9 @@ export default function Board({ articleData, initialCommentData }) {
                 />
               </div>
               <div className={styles.commentButton}>
-                <SmallButton type="submit" disabled={!isFormValid}>
+                <Button type="submit" disabled={!isFormValid}>
                   등록
-                </SmallButton>
+                </Button>
               </div>
             </form>
           </section>

pages/boards.jsx

@@ -3,9 +3,9 @@ import Image from 'next/image';
 import Link from 'next/link';
 import BestBoard from '@/components/BestBoard'
 import EntireBoard from '@/components/EntireBoard';
-import SmallButton from '@/components/common/SmallButton';
+import Button from '@/components/common/Button';
 import axios from '@/pages/api/api';
-import search from '@/public/ic_search.svg';
+import search from '@/public/icons/ic_search.svg';
 import styles from '@/styles/Boards.module.css';
 
 export default function Boards() {
@@ -96,7 +96,7 @@ export default function Boards() {
         <div className={styles.entireBoardHeader}>
           <h2 className={styles.entireBoardTitle}>게시글</h2>
           <Link href="/addboard">
-            <SmallButton type="button">글쓰기</SmallButton>
+            <Button type="button">글쓰기</Button>
           </Link>
         </div>
         <div className={styles.entireBoardBody}>