Next 정부광 sprint11

.gitignore

@@ -0,0 +1,24 @@
+# dependencies
+/node_modules
+7-sprint-mission-fe/
+next-env.d.ts
+*.log
+.env
+
+
+
+# production
+/.next
+/out
+
+# misc
+.DS_Store
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local

components/ConditionalLayout.tsx

@@ -0,0 +1,23 @@
+"use client";
+
+import { usePathname } from "next/navigation";
+import Header from "components/Header";
+import Footer from "components/Footer";
+import { ReactNode } from "react";
+
+export default function ConditionalLayout({ children }: { children: ReactNode }) {
+  const pathname = usePathname();
+  const isAuthPage = pathname === "/login" || pathname === "/signUp";
+
+  if (isAuthPage) {
+    return <>{children}</>;
+  }
+
+  return (
+    <>
+      <Header />
+      {children}
+      <Footer />
+    </>
+  );
+}

components/Footer.module.css

@@ -0,0 +1,17 @@
+.footer {
+  color: white;
+  background-color: #111827;
+  display: flex;
+  flex-direction: row;
+  height: 160px;
+  max-width: 1920px;
+  margin: 0 auto;
+  padding: 32px 200px;
+  justify-content: space-between;
+}
+
+.socialMedia {
+  display: flex;
+  flex-direction: row;
+  gap: 5px;
+}

components/Footer.tsx

@@ -0,0 +1,65 @@
+import styles from "./Footer.module.css";
+import Link from "next/link";
+import Image from "next/image";
+
+export default function Footer() {
+  return (
+    <footer className={styles.footer}>
+      <div>©codeit - 2024</div>
+      <div className={styles.footerMenu}>
+        <Link href="/privacy">Privacy Policy</Link>
+        <Link href="/faq">FAQ</Link>
+      </div>
+      <div className={styles.socialMedia}>
+        <Link
+          href="https://www.facebook.com/"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <Image
+            src="/ic_facebook.svg"
+            alt="페이스북"
+            width={20}
+            height={20}
+          />
+        </Link>
+        <Link
+          href="https://twitter.com/"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <Image
+            src="/ic_twitter.svg"
+            alt="트위터"
+            width={20}
+            height={20}
+          />
+        </Link>
+        <Link
+          href="https://www.youtube.com/"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <Image
+            src="/ic_youtube.svg"
+            alt="유튜브"
+            width={20}
+            height={20}
+          />
+        </Link>
+        <Link
+          href="https://www.instagram.com/"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <Image
+            src="/ic_instagram.svg"
+            alt="인스타그램"
+            width={20}
+            height={20}
+          />
+        </Link>
+      </div>
+    </footer>
+  );
+}

components/Header.module.css

@@ -0,0 +1,15 @@
+.container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  max-width: 1920px;
+  margin: 0 auto;
+  padding: 0px 200px 9px 200px;
+}
+
+.loginBtn {
+  color: white;
+  padding: 12px 23px;
+  background-color: #3692ff;
+  border-radius: 8px;
+}

components/Header.tsx

@@ -0,0 +1,21 @@
+import Link from "next/link";
+import styles from "./Header.module.css";
+import MainLogo from "./MainLogo";
+
+export default function Header() {
+  return (
+    <header className={styles.container}>
+      <MainLogo
+        variant="header"
+        size="small"
+      />
+
+      <Link
+        href={"/login"}
+        className={styles.loginBtn}
+      >
+        로그인
+      </Link>
+    </header>
+  );
+}

components/MainLogo.module.css

@@ -0,0 +1,21 @@
+.mainLogo {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8.5px;
+}
+
+.mainText {
+  color: #3692ff;
+  font-size: 25px;
+  margin-bottom: 20px;
+}
+
+.header .mainText {
+  font-size: 25px;
+}
+
+.auth .mainText {
+  font-size: 60px;
+  margin-top: 10px;
+}

components/MainLogo.tsx

@@ -0,0 +1,30 @@
+import Link from "next/link";
+import Image from "next/image";
+import styles from "./MainLogo.module.css";
+
+interface MainLogoProps {
+  variant?: "header" | "auth";
+  size?: "small" | "big";
+}
+
+export default function MainLogo({ variant = "header", size = "small" }: MainLogoProps) {
+  const imageSize = size === "small" ? 40 : 80;
+
+  return (
+    <div className={`${styles.mainLogoCon} ${styles[variant]}`}>
+      <Link
+        rel="homePage"
+        href={"/"}
+        className={styles.mainLogo}
+      >
+        <Image
+          src="/panda_face.svg"
+          alt="판다로고"
+          width={imageSize}
+          height={imageSize}
+        />
+        <h1 className={styles.mainText}>판다마켓</h1>
+      </Link>
+    </div>
+  );
+}

components/Pagination.tsx

@@ -0,0 +1,9 @@
+import styles from "./pagination.module.css";
+
+export default function Pagination() {
+  return (
+    <div className={styles.container}>
+      <div>이거슨 페이지네이션</div>
+    </div>
+  );
+}