Merge pull request #368 from Yoon-kyungLee/part3-이윤경

[이윤경] week12

components/commons/Cta.module.css

@@ -0,0 +1,24 @@
+.shortButton {
+  background-image: var(--gradient-purpleblue-skyblue);
+  font-size: 1.8rem;
+  text-align: center;
+  text-decoration: none;
+  color: var(--white-color);
+  font-weight: 600;
+  border-radius: 0.8rem;
+  border: none;
+  padding: 1.6rem 2rem;
+  cursor: pointer;
+  width: 12.8rem;
+}
+
+.longButton {
+  background-image: linear-gradient(90deg, #6d6afe, #6ae3fe);
+  font-size: 1.8rem;
+  text-align: center;
+  color: var(--white-color, #ffffff);
+  font-weight: 600;
+  border-radius: 0.8rem;
+  padding: 1.6rem 2rem;
+  width: 40rem;
+}

components/commons/Cta.tsx

@@ -0,0 +1,23 @@
+import React, { ReactNode } from "react";
+import styles from "./Cta.module.css";
+
+interface CtaProps {
+  children: ReactNode;
+  onClick?: () => void;
+}
+
+export function CtaShort({ children, onClick }: CtaProps) {
+  return (
+    <button className={styles.shortButton} onClick={onClick}>
+      {children}
+    </button>
+  );
+}
+
+export function CtaLong({ children, onClick }: CtaProps) {
+  return (
+    <button className={styles.longButton} onClick={onClick}>
+      {children}
+    </button>
+  );
+}

components/commons/Footer.module.css

@@ -0,0 +1,55 @@
+.footer {
+  background-color: var(--black-color);
+  padding: 3.2rem 10.4rem 6.4rem 10.4rem;
+  font-size: 1.6rem;
+}
+
+.info {
+  display: flex;
+  justify-content: space-between;
+  height: 6.4rem;
+  width: 100%;
+
+  @media (min-width: 375px) and (max-width: 767px) {
+    display: grid;
+    row-gap: 6rem;
+    grid-template:
+      "policy sns"
+      "codeit .";
+  }
+}
+
+.codeit {
+  color: #676767;
+  font-size: 1.6rem;
+
+  @media (min-width: 375px) and (max-width: 767px) {
+    grid-area: codeit;
+  }
+}
+
+.policy {
+  display: flex;
+  gap: 3rem;
+
+  @media (min-width: 375px) and (max-width: 767px) {
+    grid-area: policy;
+  }
+}
+
+.link {
+  color: #676767;
+  text-decoration: none;
+  text-align: center;
+  font-size: 1.6rem;
+}
+
+.sns {
+  display: flex;
+  gap: 1.2rem;
+  cursor: pointer;
+
+  @media (min-width: 375px) and (max-width: 767px) {
+    grid-area: sns;
+  }
+}

components/commons/Footer.tsx

@@ -0,0 +1,36 @@
+import styles from "./Footer.module.css";
+import Image from "next/image";
+
+function Footer() {
+  return (
+    <footer className={styles.footer}>
+      <div className={styles.info}>
+        <div className={styles.codeit}>@codeit - 2023</div>
+        <div className={styles.policy}>
+          <a className={styles.link} href="privacy.html">
+            Privacy Policy
+          </a>
+          <a className={styles.link} href="faq.html">
+            FAQ
+          </a>
+        </div>
+        <div className={styles.sns}>
+          <a href="https://facebook.com" target="_blank" rel="noopener noreferrer">
+            <Image src="/images/footer/facebook.svg" width={20} height={20} alt="facebook" />
+          </a>
+          <a href="https://twitter.com" target="_blank" rel="noopener noreferrer">
+            <Image src="/images/footer/twitter.svg" width={20} height={20} alt="twitter" />
+          </a>
+          <a href="https://youtube.com" target="_blank" rel="noopener noreferrer">
+            <Image src="/images/footer/youtube.svg" width={20} height={20} alt="youtube" />
+          </a>
+          <a href="https://instagram.com" target="_blank" rel="noopener noreferrer">
+            <Image src="/images/footer/instagram.svg" width={20} height={20} alt="instagram" />
+          </a>
+        </div>
+      </div>
+    </footer>
+  );
+}
+
+export default Footer;

components/commons/Gnb.module.css

@@ -0,0 +1,43 @@
+.nav {
+  background-color: var(--gray-bg-color);
+  padding: 2rem 20rem;
+  position: sticky;
+  top: 0;
+  left: 0;
+  width: 100%;
+  z-index: 2;
+
+  @media (min-width: 768px) and (max-width: 1199px) {
+    padding: 2rem 0;
+  }
+
+  @media (min-width: 375px) and (max-width: 767px) {
+    padding: 2rem 3.2rem;
+  }
+}
+
+.navContainer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  max-width: 192rem;
+  margin: 0 auto;
+
+  @media (min-width: 768px) and (max-width: 1199px) {
+    max-width: 80rem;
+  }
+}
+
+.gnb {
+  display: flex;
+  gap: 0.6rem;
+  align-items: center;
+}
+
+.gnbImg {
+  border-radius: 9999px;
+}
+
+.email {
+  font-size: 1.4rem;
+}

components/commons/Gnb.tsx

@@ -0,0 +1,57 @@
+import React, { useEffect, useState } from "react";
+import Link from "next/link";
+import styles from "./Gnb.module.css";
+import { getProfiles } from "@/lib/api";
+import Image from "next/image";
+import { useRouter } from "next/router";
+import { CtaShort } from "./Cta";
+
+interface Profile {
+  id: number;
+  email: string;
+  image_source: string;
+}
+
+function Gnb() {
+  const [userData, setUserData] = useState<Profile[]>([]);
+  const router = useRouter();
+
+  useEffect(() => {
+    const fetchUserData = async () => {
+      const data = await getProfiles();
+      setUserData(data.data);
+    };
+    fetchUserData();
+  }, []);
+
+  const onLogin = () => {
+    // setUserData((prev) => !prev);
+    router.push("/auth/signin");
+  };
+
+  return (
+    <nav className={styles.nav}>
+      <div className={styles.navContainer}>
+        <Link href="/">
+          <Image src="/images/home/linkbrary-logo.png" width={133} height={24} alt="홈으로 연결된 Linkbrary 로고" />
+        </Link>
+        {userData ? (
+          <>
+            {userData.map((info) => {
+              return (
+                <div className={styles.gnb} key={info.id}>
+                  <Image className={styles.gnbImg} src={info.image_source} width={28} height={28} alt="프로필 사진" />
+                  <div className={styles.email}>{info.email}</div>
+                </div>
+              );
+            })}
+          </>
+        ) : (
+          <CtaShort onClick={onLogin}>로그인</CtaShort>
+        )}
+      </div>
+    </nav>
+  );
+}
+
+export default Gnb;

components/commons/SearchBar.module.css

@@ -0,0 +1,42 @@
+.searchBarContainer {
+  position: relative;
+}
+
+.searchBarInput {
+  background-color: #f5f5f5;
+  width: 100%;
+  height: 5.4rem;
+  border: none;
+  border-radius: 1rem;
+  padding-left: 4rem;
+  margin: 4rem auto;
+}
+
+.searchIcon {
+  position: absolute;
+  top: 50%;
+  left: 1.6rem;
+  transform: translateY(-50%);
+}
+
+.closeIcon {
+  width: 2.4rem;
+  height: 2.4rem;
+  position: absolute;
+  top: 50%;
+  right: 1.6rem;
+  transform: translateY(-50%);
+  background-image: url("/images/folder/_close.png");
+  background-size: 100%;
+}
+
+.searchResult {
+  font-size: 3.2rem;
+  margin-bottom: 4rem;
+  color: rgba(159, 166, 178, 1);
+}
+
+.searchWord {
+  font-size: 3.2rem;
+  color: rgba(55, 55, 64, 1);
+}

components/commons/SearchBar.tsx

@@ -0,0 +1,34 @@
+import React, { useState } from "react";
+import Image from "next/image";
+import styles from "./SearchBar.module.css";
+function SearchBar({ onSearchChange }: { onSearchChange: (value: string) => void }) {
+  const [value, setValue] = useState("");
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setValue(e.target.value);
+    onSearchChange(e.target.value);
+  };
+
+  return (
+    <div>
+      <div className={styles.searchBarContainer}>
+        <Image className={styles.searchIcon} src="/images/folder/Search.png" width={20} height={20} alt="검색 아이콘" />
+        <input
+          className={styles.searchBarInput}
+          type="search"
+          placeholder="링크로 검색해 보세요."
+          value={value}
+          onChange={handleChange}
+        />
+        {value && <button className={styles.closeIcon} onClick={() => setValue("")} />}
+      </div>
+      {value !== "" ? (
+        <div className={styles.searchResult}>
+          <span className={styles.searchWords}>{value}</span>로 검색한 결과입니다.
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+export default SearchBar;

components/domains/auth/AuthInput.module.css

@@ -0,0 +1,48 @@
+.signInputBox {
+  display: flex;
+  flex-direction: column;
+  row-gap: 1.2rem;
+  position: relative;
+}
+
+.input {
+  padding: 1.8rem 1.5rem;
+  border-radius: 0.8rem;
+  font-size: 1.6rem;
+  line-height: 150%;
+  border: 0.1rem solid var(--gray-20-color);
+}
+
+.input.isError {
+  border: 0.1rem solid var(--red-color);
+}
+
+.input.isError:focus {
+  outline: var(--red-color);
+}
+
+.input:focus {
+  border-color: var(--primary-color);
+}
+
+.signInputLabel {
+  font-size: 1.4rem;
+  font-weight: 400;
+}
+
+.eyeButton {
+  position: absolute;
+  top: 5.1rem;
+  right: 1.5rem;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+}
+
+.errorMessage {
+  margin-top: -0.4rem;
+  font-size: 1.4rem;
+  font-weight: 400;
+  color: var(--red-color);
+  display: inline-block;
+}