Timosean/blog

components/Header.tsx

@@ -1,27 +1,55 @@
 import Image from "next/image";
-import { SingleMenu } from "./HeaderItem";
+import { WebMenuBar, MobileHeaderDropdown } from "./HeaderItem";
+import Link from "next/link";
+import { useState } from "react";
+import Hamburger from "hamburger-react";
 
 const Header = () => {
-    return (
-        <header className="w-full flex bg-black justify-between items-center h-[5rem]">
-            <section className="flex pl-[9.375rem]">
-                <div className="pr-[2rem]">
-                    <Image src="/images/devkor-logo.svg" alt="devkor" width="108" height="90"></Image>
-                </div>
-                <div className="flex py-[1.875rem]">
-                    <SingleMenu title="Tech" />
-                    <SingleMenu title="Project" />
-                    <SingleMenu title="Study" />
-                    <SingleMenu title="Question" />
-                    <SingleMenu title="Members" />
-                    <SingleMenu title="Apply" />
-                </div>
-            </section>
-            <section className="pr-[9.375rem] py-[1.875rem] flex items-center cursor-pointer">
-                <Image src="/images/profile-logo.png" alt="profile" width="25" height="25" />
-            </section>
-        </header>
-    );
+  const [isOpen, setOpen] = useState(false);
+  return (
+    <header className="w-full relative px-[1rem] md:px-[9.375rem] flex bg-black justify-between items-center h-[5rem]">
+      <section className="flex">
+        {/* 헤더 로고 */}
+        <div className="flex items-center pr-[2rem] w-[6.75rem] h-[5.625rem] hover:cursor-pointer">
+          <Link href="/">
+            <Image
+              src="/images/devkor-logo.svg"
+              alt="devkor"
+              width="108"
+              height="90"
+            ></Image>
+          </Link>
+        </div>
+        {/* 메뉴 리스트 */}
+        <nav className="items-center py-[1.875rem] hidden lg:flex">
+          <WebMenuBar />
+        </nav>
+      </section>
+      {/* 마이페이지 아이콘 or 햄버거(모바일)*/}
+      <section className="py-[1.875rem] flex items-center cursor-pointer">
+        <div className="hidden lg:flex">
+          <Image
+            src="/images/profile-logo.png"
+            alt="profile"
+            width="25"
+            height="25"
+            layout="fixed"
+          />
+        </div>
+        <div className="flex lg:hidden">
+          <Hamburger
+            toggled={isOpen}
+            toggle={setOpen}
+            size={24}
+            color={"#F6B55A"}
+            rounded
+            label="Show menu"
+          />
+        </div>
+      </section>
+      <MobileHeaderDropdown isOpen={isOpen} />
+    </header>
+  );
 };
 
 export default Header;

components/HeaderItem.tsx

@@ -2,18 +2,55 @@ import React from "react";
 import { useRouter } from "next/router";
 
 interface MenuProps {
-    title: string;
+  title: string;
 }
 
+export const MenuList = [
+  "Tech",
+  "Project",
+  "Study",
+  "Question",
+  "Members",
+  "Apply",
+];
+
 export const SingleMenu = ({ title }: MenuProps) => {
-    const router = useRouter();
-    const routerPath = title.toLowerCase();
-    const handleClick = () => {
-        router.push(`/${routerPath}`);
-    };
-    return (
-        <div className="text-[#F6B55A] px-[2rem] text-lg cursor-pointer font-noto" onClick={handleClick}>
-            {title}
-        </div>
-    );
+  const router = useRouter();
+  const routerPath = title.toLowerCase();
+  const handleClick = () => {
+    router.push(`/${routerPath}`);
+  };
+  return (
+    <div
+      className="text-[#F6B55A] px-[1.3rem] xl:px-[1.8rem] text-lg cursor-pointer font-noto"
+      onClick={handleClick}
+    >
+      {title}
+    </div>
+  );
+};
+
+export const WebMenuBar = () => {
+  return (
+    <>
+      {MenuList.map((menu) => (
+        <SingleMenu title={menu} />
+      ))}
+    </>
+  );
+};
+
+export const MobileHeaderDropdown = ({ isOpen }: { isOpen: boolean }) => {
+  return (
+    <nav
+      className={`w-40 py-4 pl-1.5 pr-2.5 rounded-sm bg-[#1e1e1e] ${
+        isOpen ? "flex" : "hidden"
+      } z-10 lg:hidden absolute right-[1.7rem] md:right-[9.375rem] top-[4rem] flex-col space-y-3 justify-center items-start`}
+    >
+      {/* Todo: 로그인 여부에 따라서 MyPage 또는 Login 으로 표기하기*/}
+      {["MyPage"].concat(MenuList).map((menu) => (
+        <SingleMenu title={menu} />
+      ))}
+    </nav>
+  );
 };

components/Icons.tsx

@@ -0,0 +1,30 @@
+import { FiHeart, FiDownload } from "react-icons/fi";
+import { FaHeart } from "react-icons/fa"; //꽉 찬 하트
+import { IoChatbox } from "react-icons/io5";
+
+export const EmptyHeartIcon = () => {
+  return (
+    <FiHeart
+      stroke="#F6B55A"
+      className="hover:cursor-pointer w-[20px] h-[20px] md:w-[24px] md:h-[24px]"
+    />
+  );
+};
+
+export const DownloadIcon = () => {
+  return (
+    <FiDownload
+      stroke="#F6B55A"
+      className="hover:cursor-pointer w-[20px] h-[20px] md:w-[24px] md:h-[24px]"
+    />
+  );
+};
+
+export const ChatboxIcon = () => {
+  return (
+    <IoChatbox
+      fill="#F6B55A"
+      className="hover:cursor-pointer w-[20px] h-[20px] md:w-[24px] md:h-[24px]"
+    />
+  );
+};

components/Layout.tsx

@@ -2,10 +2,10 @@ import React from "react";
 import Header from "./Header";
 
 export const Layout = ({ children }: { children: React.ReactNode }) => {
-    return (
-        <div className="bg-black w-full">
-            <Header />
-            <main className="px-[9.375rem]">{children}</main>
-        </div>
-    );
+  return (
+    <div className="bg-black w-full">
+      <Header />
+      <main className="px-[1rem] md:px-[9.375rem]">{children}</main>
+    </div>
+  );
 };

components/PostCard.tsx

@@ -5,18 +5,18 @@ import { FaComment, FaHeart } from "react-icons/fa";
 
 const PostCard = () => {
   return (
-    <div className="max-w-sm ml-auto mr-auto rounded overflow-hidden shadow-lg cursor-pointer bg-button md:hover:-mt-5 md:hover:mb-5 transition-all">
+    <div className="max-w-sm w-full mb-8 rounded overflow-hidden shadow-lg cursor-pointer bg-button md:hover:-mt-5 md:hover:mb-5 transition-all">
       <div className="w-full aspect-[3/2] relative">
         <Image src={blogDefault} alt="BlogPost" layout="fill" />
       </div>
       <div className="px-4 py-4">
-        <div className="font-bold text-white text-2xl break-normal mb-5 h-14">
+        <div className="font-bold text-white text-2xl lg:text-xl xl:text-2xl break-normal mb-5 h-14">
           Next.js의 Hydration 파헤치기
         </div>
         <p className="text-divider">2022년 10월 7일</p>
       </div>
       <div className="info flex items-center mb-3 border-t-divider border-t">
-        <div className="ml-4 mt-3 flex items-center">
+        <div className="ml-4 md:ml-2 xl:ml-4 mt-3 flex items-center">
           <Image
             className="rounded-full"
             src={profileDefault}

components/PostComment.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+import Image from "next/image";
+
+//Todo: 나중에 date, imgsrc 등도 props로 넘겨받아야 함.
+export const PostComment = ({ children }: { children: string }) => {
+  return (
+    <div className="w-full py-6 border-b border-[#2A2A2A]">
+      <div className="w-full mb-6 flex">
+        <div className="md:hidden flex items-center">
+          <Image
+            src="/images/example-profile.png"
+            width="45"
+            height="45"
+            layout="fixed"
+            className="rounded-full"
+          />
+        </div>
+        <div className="hidden md:block">
+          <Image
+            src="/images/example-profile.png"
+            width="75"
+            height="75"
+            layout="fixed"
+            className="rounded-full"
+          />
+        </div>
+        <div className="flex flex-col justify-center ml-3 md:ml-6">
+          <span className="font-bold text-base md:text-xl">안수진(OB)</span>
+          <span className="text-sm md:text-base text-divider">
+            2022년 12월 3일
+          </span>
+        </div>
+      </div>
+      <div className="w-full text-base md:text-lg my-[1.125rem]">
+        {children}
+      </div>
+    </div>
+  );
+};

components/Tags.tsx

@@ -1,30 +1,39 @@
 import React, { useState, SetStateAction } from "react";
 // Tag Button Type Interface
 export interface TagButtonType {
-    name: string;
-    mapIdx: number;
-    sectionIdx: number;
-    setSectionIdx: React.Dispatch<SetStateAction<number>>;
-  }
-
-  // Menu Button Component
- export const TagButton = ({
-    name,
-    mapIdx,
-    sectionIdx,
-    setSectionIdx,
-  }: TagButtonType) => {
-    return (
-      <button
-        className={`${
-          sectionIdx == mapIdx ? "bg-devkor text-black font-bold" : "bg-button"
-        } w-28 py-2 mr-4 rounded-full flex justify-center`}
-        onClick={() => setSectionIdx(mapIdx)}
-      >
-        {name}
-      </button>
-    );
-  };
-
-  // MenuList
-  export const TagList = ["전체", "Frontend", "Backend", "ML", "DevOps", "기타"];
+  name: string;
+  mapIdx: number;
+  sectionIdx: number;
+  setSectionIdx: React.Dispatch<SetStateAction<number>>;
+}
+
+// Tag Button Component
+export const TagButton = ({
+  name,
+  mapIdx,
+  sectionIdx,
+  setSectionIdx,
+}: TagButtonType) => {
+  return (
+    <button
+      className={`${
+        sectionIdx == mapIdx ? "bg-devkor text-black font-bold" : "bg-button"
+      } w-28 py-2 mr-4 rounded-full flex justify-center`}
+      onClick={() => setSectionIdx(mapIdx)}
+    >
+      {name}
+    </button>
+  );
+};
+
+// PostView Tag
+export const PostTag = ({ category }: { category: string }) => {
+  return (
+    <span className="bg-devkor text-black text-sm md:text-lg font-bold w-20 md:w-28 py-1 mr-4 rounded-full flex justify-center">
+      {category}
+    </span>
+  );
+};
+
+// TagList
+export const TagList = ["전체", "Frontend", "Backend", "ML", "DevOps", "기타"];