Merge pull request #35 from Kusitms-28th-Kobaco-B/feat/#21

[feat] 카피 갤러리 페이지

src/app/adCopy/copyGallery/page.tsx

@@ -0,0 +1,14 @@
+import CopyGalleryPage from "@/components/adCopy/CopyGalleryPage";
+import NOSSR from "@/components/common/NOSSR";
+import Footer from "@/components/footer/Footer";
+
+const CopyGallery = async () => {
+  return (
+    <NOSSR>
+      <CopyGalleryPage />
+      <Footer />
+    </NOSSR>
+  );
+};
+
+export default CopyGallery;

src/components/adCopy/AdCopySearch.tsx

@@ -0,0 +1,113 @@
+"use client";
+
+import styled from "styled-components";
+import Image from "next/image";
+import { recentSearchData } from "@/lib/trend/trendData";
+import { useState } from "react";
+import RecentSearchContent from "../trend/RecentSearchContent";
+import { colors } from "@/styles/theme";
+
+interface AdCopySearchProps {
+  setSearchName: (name: string) => void;
+}
+
+const AdCopySearch = (props: AdCopySearchProps) => {
+  const [name, setName] = useState("");
+  const { setSearchName } = props;
+
+  const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    if (event.key === "Enter") {
+      setSearchName(name);
+      setName("");
+    }
+  };
+
+  return (
+    <Layout>
+      <SubTitle>광고 카피 제작</SubTitle>
+      <Title>카피 갤러리</Title>
+      <SearchBarBox>
+        <SearchImage>
+          <Image src="/common/search.svg" alt="search" width={20} height={20} />
+        </SearchImage>
+        <SearchBar
+          placeholder="키워드 검색하기"
+          value={name}
+          onChange={(e) => setName(e.target.value)}
+          onKeyDown={handleKeyDown}
+        />
+      </SearchBarBox>
+
+      <RecentSearchBox>
+        {recentSearchData.map((recentSearch) => (
+          <RecentSearchContent key={recentSearch.id} name={recentSearch.name} />
+        ))}
+      </RecentSearchBox>
+    </Layout>
+  );
+};
+
+export default AdCopySearch;
+
+const Layout = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 50%;
+  justify-content: center;
+  align-items: center;
+  padding-bottom: 3.75rem;
+`;
+
+const SubTitle = styled.div`
+  color: #b4b4b4;
+  font-size: 1.125rem;
+  font-style: normal;
+  font-weight: 500;
+  line-height: normal;
+  margin-bottom: 1.25rem;
+`;
+
+const Title = styled.div`
+  font-size: 2rem;
+  font-style: normal;
+  font-weight: 700;
+  line-height: normal;
+  color: ${colors.white};
+  margin-bottom: 3.75rem;
+`;
+
+const SearchBarBox = styled.div`
+  display: flex;
+  align-items: center;
+  width: 100%;
+  position: relative;
+`;
+
+const SearchImage = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  left: 2.5rem;
+  top: 1.4rem;
+`;
+
+const SearchBar = styled.input`
+  font-size: 1rem;
+  width: 100%;
+  height: 100%;
+  background: #313131;
+  padding: 1.5rem 5rem;
+  outline: none;
+  border-radius: 100px;
+  border: none;
+  color: ${({ theme }) => theme.colors.white};
+`;
+
+const RecentSearchBox = styled.div`
+  width: 100%;
+  display: flex;
+  justify-content: start;
+  gap: 0.5rem;
+  margin: 1.5rem 0 0 2rem;
+`;

src/components/adCopy/CopyGalleryPage.tsx

@@ -0,0 +1,48 @@
+"use client";
+
+import { useState } from "react";
+import AdCopySearch from "./AdCopySearch";
+import styled from "styled-components";
+import GalleryTag from "./GalleryTag";
+import GalleryCards from "./GalleryCards";
+import Link from "next/link";
+import { Button } from "../common/ButtonStyle";
+import { colors } from "@/styles/theme";
+import Image from "next/image";
+
+const CopyGalleryPage = async () => {
+  const [searchName, setSearchName] = useState("");
+  return (
+    <Layout>
+      <AdCopySearch setSearchName={setSearchName} />
+      <GalleryTag />
+      <GalleryCards />
+      <Link href="/adCopy/createAdCopy">
+        <Button
+          background={colors.main}
+          text={colors.white}
+          style={{ marginTop: "5rem", marginBottom: "13rem", gap: "0.25rem" }}
+        >
+          새 카피 만들기
+          <Image
+            src={"/main/arrow-right.svg"}
+            alt="right-arrow"
+            width={18}
+            height={18}
+          />
+        </Button>
+      </Link>
+    </Layout>
+  );
+};
+
+export default CopyGalleryPage;
+
+const Layout = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+  margin-top: 10.5rem;
+`;