Merge pull request #2 from JHWorld0214/feat/#1

Feat: 홈 페이지
JHWorld0214 · Sep 12, 2024 · 88779c6 · 88779c6
2 parents 1b0f92d + 5f0bc87
commit 88779c6
Show file tree

Hide file tree

Showing 17 changed files with 640 additions and 15 deletions.
diff --git a/.idea/workspace.xml b/.idea/workspace.xml
diff --git a/components/Book.tsx b/components/Book.tsx
@@ -0,0 +1,28 @@
+import BookCover from '@/public/images/book-cover.png';
+import Image from 'next/image';
+
+export interface BookProps{
+  coverImg: string,
+  title: string,
+  writer?: string,
+  date: string;
+}
+
+const Book = ({coverImg, title, writer, date}:BookProps)=>{
+
+  const handleClick = ()=> {
+    alert(`${title}클릭! + 페이지 이동하기`);
+  }
+
+  return (
+    <div className="w-[150px] flex flex-col items-center justify-center gap-2 cursor-pointer" onClick={handleClick}>
+      <Image src={BookCover} width={150} height={180} alt="logo"></Image>
+      <h4 className="w-full text-base text-center truncate">{title}</h4>
+      {writer && <h5 className="text-sm">{writer}</h5>}
+      <h5 className="text-xs">{date}</h5>
+    </div>
+
+  );
+}
+
+export default Book;
diff --git a/components/BookList.tsx b/components/BookList.tsx
@@ -0,0 +1,27 @@
+import Book, { BookProps } from '@/components/Book';
+
+interface BookListProps {
+  visibleBookCount: number;
+  currPage: number;
+  contents: BookProps[];
+}
+
+const BookList = ({ visibleBookCount, currPage, contents }: BookListProps) => {
+  const visibleBooks = contents.slice(currPage * visibleBookCount, (currPage + 1) * visibleBookCount);
+
+  return (
+    <div className="grid grid-cols-4 gap-10 mx-8">
+      {visibleBooks.map((book, index) => (
+        <Book
+          key={index}
+          coverImg={book.coverImg}
+          title={book.title}
+          writer={book.writer}
+          date={book.date}
+        />
+      ))}
+    </div>
+  );
+};
+
+export default BookList;
diff --git a/components/NavigationBar.tsx b/components/NavigationBar.tsx
@@ -19,18 +19,18 @@ const SideNavigationBar = () => {
     name: 'JHOON KIM',
   });
 
-  useEffect(() => {
-    const getUserInfo = async () => {
-      const userInfoRes = await instance.get('/api/user/info');
-      console.log(userInfoRes.data.data);
-
-      if (userInfoRes.status === 200) {
-        // setUserInfo(userInfoRes.data.data);
-      }
-    };
-
-    getUserInfo();
-  }, []);
+  // useEffect(() => {
+  //   const getUserInfo = async () => {
+  //     const userInfoRes = await instance.get('/api/user/info');
+  //     console.log(userInfoRes.data.data);
+  //
+  //     if (userInfoRes.status === 200) {
+  //       // setUserInfo(userInfoRes.data.data);
+  //     }
+  //   };
+  //
+  //   getUserInfo();
+  // }, []);
 
   return (
     <div className="fixed left-0 top-0 shadow h-full w-[280px] bg-white z-10">
@@ -85,10 +85,24 @@ const NavStackContent = () => {
           >
             <IconBox stroke={currPage === '홈' ? '#7F57F1' : '#000000'} />
           </NavCell>
-          <NavCell name="만들던 이야기">
+          <NavCell
+            name="만들던 이야기"
+            onClick={() => {
+              setCurrPage('만들던 이야기');
+              router.push('/ingStory');
+            }}
+            selected={currPage === '만들던 이야기'}
+          >
             <IconBox stroke={'#000000'} />
           </NavCell>
-          <NavCell name="완성한 이야기">
+          <NavCell
+            name="완성한 이야기"
+            onClick={() => {
+              setCurrPage('완성한 이야기');
+              router.push('/doneStory');
+            }}
+            selected={currPage === '완성한 이야기'}
+          >
             <IconBox stroke={'#000000'} />
           </NavCell>
           <NavCell

diff --git a/components/SearchBar.tsx b/components/SearchBar.tsx
@@ -0,0 +1,41 @@
+import { IconArrowDown, IconSearch } from '@/public/icons';
+
+const SearchBar = ()=>{
+  return (
+    <div
+      className="w-4/5 h-[60px] flex flex-row items-center gap-3 border-2 border-gray-200 rounded-3xl drop-shadow-sm">
+      <div className="flex flex-row items-center justify-evenly w-[125px]  bg-gray-100 rounded-l-3xl">
+        <div className="text-xl pt-2 pb-2 pl-5">
+          All
+        </div>
+        <IconArrowDown
+          alt="arrow down icon"
+          width={20}
+          height={11}
+          className="top-10 cursor-pointer"
+          onClick={() => {
+            alert('검색 더보기 클릭!');
+          }}
+        ></IconArrowDown>
+      </div>
+      <div className="flex flex-row items-center justify-between pl-2 pr-2">
+        <input type="text" placeholder="Search"
+               className="text text-xl h-full w-[470px] outline-0 no-underline placeholder-gray-300">
+        </input>
+        <IconSearch
+          alt="search icon"
+          width={20}
+          height={20}
+          className="fixed right-5 cursor-pointer"
+          onClick={() => {
+            alert('검색 돋보기 클릭!');
+          }}
+        ></IconSearch>
+      </div>
+    </div>
+
+
+  );
+}
+
+export default SearchBar;
diff --git a/components/SortingToggle.tsx b/components/SortingToggle.tsx
@@ -0,0 +1,42 @@
+interface SortingToggleProps {
+  selected: string;
+  onToggle: (selected: string) => void;
+}
+
+const SortingToggle = ({ selected, onToggle }: SortingToggleProps) => {
+  return (
+    <div className="w-[340px] h-[40px] flex flex-row rounded-3xl bg-[#EEEEEE]">
+      <div
+        className={`flex flex-1 h-full items-center justify-center rounded-3xl cursor-pointer transition-colors duration-300 ${
+          selected === 'recent' ? 'bg-[#2E2E2E]' : 'bg-[#EEEEEE]'
+        }`}
+        onClick={() => onToggle('recent')}
+      >
+        <h5
+          className={`text-[16px] transition-colors duration-300 ${
+            selected === 'recent' ? 'font-semibold text-[#EEEEEE]' : 'font-normal text-[#2E2E2E]'
+          }`}
+        >
+          최신순
+        </h5>
+      </div>
+
+      <div
+        className={`flex flex-1 h-full items-center justify-center rounded-3xl cursor-pointer transition-colors duration-300 ${
+          selected === 'name' ? 'bg-[#2E2E2E]' : 'bg-[#EEEEEE]'
+        }`}
+        onClick={() => onToggle('name')}
+      >
+        <h5
+          className={`text-[16px] transition-colors duration-300 ${
+            selected === 'name' ? 'font-semibold text-[#EEEEEE]' : 'font-normal text-[#2E2E2E]'
+          }`}
+        >
+          이름순
+        </h5>
+      </div>
+    </div>
+  );
+};
+
+export default SortingToggle;
diff --git a/constant/dummyBookList.ts b/constant/dummyBookList.ts
@@ -0,0 +1,101 @@
+export const writingBooks = [
+  {
+    coverImg: '/path/to/cover1.png',
+    title: 'Don\'t Make Me Think',
+    writer: 'Steve Krug',
+    date: '2024-08-16',
+  },
+  {
+    coverImg: '/path/to/cover2.png',
+    title: 'The Design of Everyday Things',
+    writer: 'Don Norman',
+    date: '2024-08-20',
+  },
+  {
+    coverImg: '/path/to/cover3.png',
+    title: 'Sprint: How to solve big problems...',
+    writer: 'Jake Knapp',
+    date: '2024-08-22',
+  },
+  {
+    coverImg: '/path/to/cover4.png',
+    title: 'Lean UX: Design Great Products',
+    writer: 'Jeff Gothelf',
+    date: '2024-08-23',
+  },
+  {
+    coverImg: '/path/to/cover1.png',
+    title: 'Don\'t Make Me Think',
+    writer: 'Steve Krug',
+    date: '2024-08-23',
+  },
+  {
+    coverImg: '/path/to/cover2.png',
+    title: 'The Design of Everyday Things',
+    writer: 'Don Norman',
+    date: '2024-08-24',
+  },
+  {
+    coverImg: '/path/to/cover3.png',
+    title: 'Sprint: How to solve big problems...',
+    writer: 'Jake Knapp',
+    date: '2024-08-25',
+  },
+  {
+    coverImg: '/path/to/cover3.png',
+    title: 'Sprint: How to solve big problems...',
+    writer: 'Jake Knapp',
+    date: '2024-08-25',
+  },
+  {
+    coverImg: '/path/to/cover3.png',
+    title: 'Sprint: How to solve big problems...',
+    writer: 'Jake Knapp',
+    date: '2024-08-25',
+  },
+];
+
+export const doneBooks = [
+  {
+    coverImg: '/path/to/cover1.png',
+    title: 'Don\'t Make Me Think',
+    writer: 'Steve Krug',
+    date: '2000',
+  },
+  {
+    coverImg: '/path/to/cover2.png',
+    title: 'The Design of Everyday Things',
+    writer: 'Don Norman',
+    date: '1988',
+  },
+  {
+    coverImg: '/path/to/cover3.png',
+    title: 'Sprint: How to solve big problems...',
+    writer: 'Jake Knapp',
+    date: '2000',
+  },
+  {
+    coverImg: '/path/to/cover4.png',
+    title: 'Lean UX: Design Great Products',
+    writer: 'Jeff Gothelf',
+    date: '2016',
+  },
+  {
+    coverImg: '/path/to/cover1.png',
+    title: 'Don\'t Make Me Think',
+    writer: 'Steve Krug',
+    date: '2000',
+  },
+  {
+    coverImg: '/path/to/cover2.png',
+    title: 'The Design of Everyday Things',
+    writer: 'Don Norman',
+    date: '1988',
+  },
+  {
+    coverImg: '/path/to/cover3.png',
+    title: 'Sprint: How to solve big problems...',
+    writer: 'Jake Knapp',
+    date: '2000',
+  },
+];