+
handleOptionClick("recent")}>최신순
+
handleOptionClick("like")}>좋아요순
+
+ )}
+ >
+ );
+};
+
+export default DropDown;
diff --git a/components/Header.module.css b/components/Header.module.css
new file mode 100644
index 000000000..7338e7993
--- /dev/null
+++ b/components/Header.module.css
@@ -0,0 +1,41 @@
+.header {
+ padding: 0 200px;
+ height: 70px;
+ border-bottom: 1px solid #dfdfdf;
+ position: fixed;
+ top: 0;
+ left: 0;
+ max-width: 1920px;
+ z-index: 1000;
+ width: 100%;
+ background-color: white;
+}
+
+.container {
+ display: flex;
+
+ align-items: center;
+ justify-content: space-between;
+}
+
+.leftNav {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 33px;
+}
+
+.leftNav div {
+ font-family: Pretendard;
+ font-size: 18px;
+ font-weight: 700;
+ line-height: 21.48px;
+ text-align: center;
+}
+
+.rightNav {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 12px;
+}
diff --git a/components/Header.tsx b/components/Header.tsx
new file mode 100644
index 000000000..c6c8d81b5
--- /dev/null
+++ b/components/Header.tsx
@@ -0,0 +1,43 @@
+import Link from "next/link";
+import styles from "./Header.module.css";
+import Container from "./Container";
+import Image from "next/image";
+
+export default function Header() {
+ return (
+