[박지민] sprint10

.babelrc

@@ -0,0 +1,4 @@
+{
+  "presets": ["next/babel"],
+  "plugins": [["styled-components", { "ssr": true }]]
+}

components/Header.tsx

@@ -0,0 +1,92 @@
+import Logo from "@/public/logo.svg";
+import Link from "next/link";
+import { useRouter } from "next/router";
+import styled from "styled-components";
+import profileImg from "@/public/btn_visibility.svg";
+import Image from "next/image";
+
+const GlobalHeader = styled.header`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+`;
+
+const HeaderLeft = styled.div`
+  display: flex;
+  align-items: center;
+`;
+
+const HeaderLogo = styled(Link)`
+  margin-right: 16px;
+
+  @media (min-width: 768px) {
+    margin-right: 35px;
+  }
+
+  @media (min-width: 1280px) {
+    margin-right: 47px;
+  }
+`;
+
+const NavList = styled.ul`
+  display: flex;
+  list-style: none;
+  gap: 6px;
+  font-weight: bold;
+  font-size: 16px;
+  color: var(--gray-600);
+
+  @media (min-width: 768px) {
+    gap: 36px;
+    font-size: 18px;
+  }
+`;
+
+const NavItem = styled.li`
+  a:hover {
+    color: var(--blue);
+  }
+`;
+const HeaderRight = styled.div`
+  margin-right: 16px;
+`;
+function getLinkStyle(isActive: boolean) {
+  return { color: isActive ? "var(--blue)" : undefined };
+}
+
+export default function Header() {
+  const { pathname } = useRouter();
+
+  return (
+    <GlobalHeader>
+      <HeaderLeft>
+        <HeaderLogo href="/" aria-label="홈으로 이동">
+          <Logo alt="판다마켓 로고" width="153" />
+        </HeaderLogo>
+
+        <nav>
+          <NavList>
+            <NavItem>
+              <Link href="/boards" style={getLinkStyle(pathname === "/boards")}>
+                자유게시판
+              </Link>
+            </NavItem>
+            <NavItem>
+              <Link
+                href="/items"
+                style={getLinkStyle(
+                  pathname.includes("/items") || pathname === "/additem"
+                )}
+              >
+                중고마켓
+              </Link>
+            </NavItem>
+          </NavList>
+        </nav>
+      </HeaderLeft>
+      <HeaderRight>
+        <Image src={profileImg} alt="프로필" width={50} />
+      </HeaderRight>
+    </GlobalHeader>
+  );
+}

components/fileInput.tsx

@@ -0,0 +1,30 @@
+import { useEffect, useState } from "react";
+import Image from "next/image";
+
+export default function AddImage() {
+  const [imgSrc, setimgSrc] = useState<string>("/images/default-image.png");
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+    const fileReader = new FileReader();
+    fileReader.readAsDataURL(file);
+    fileReader.onload = (e) => {
+      if (typeof e.target?.result === "string") {
+        setimgSrc(e.target?.result);
+      }
+    };
+  };
+
+  useEffect(() => {
+    console.log(imgSrc);
+  }, [imgSrc]);
+
+  return (
+    <div>
+      <h2>이미지</h2>
+      <input type="file" accept="image/*" onChange={handleChange} />
+      <Image src={imgSrc} alt="" width={200} height={150} priority />
+    </div>
+  );
+}