diff --git a/src/app/adCopy/copyGallery/page.tsx b/src/app/adCopy/copyGallery/page.tsx
new file mode 100644
index 0000000..0f6060e
--- /dev/null
+++ b/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;
diff --git a/src/components/adCopy/AdCopySearch.tsx b/src/components/adCopy/AdCopySearch.tsx
new file mode 100644
index 0000000..6a9b4d9
--- /dev/null
+++ b/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;
+`;
diff --git a/src/components/adCopy/CopyGalleryPage.tsx b/src/components/adCopy/CopyGalleryPage.tsx
new file mode 100644
index 0000000..933859b
--- /dev/null
+++ b/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;
+`;
diff --git a/src/components/adCopy/CopyMaker.tsx b/src/components/adCopy/CopyMaker.tsx
index 09ff75e..2f9ebc8 100644
--- a/src/components/adCopy/CopyMaker.tsx
+++ b/src/components/adCopy/CopyMaker.tsx
@@ -8,6 +8,7 @@ import { Toggle } from "../common/Toggle";
 import Image from "next/image";
 
 const genderOption = ["전체", "남성", "여성"];
+const genderENUM = ["ALL", "MALE", "FEMALE"];
 const ageOption = [
   "전체",
   "0~9세",
@@ -16,36 +17,33 @@ const ageOption = [
   "30~39세",
   "40~49세",
   "50~59세",
-  "60~69세",
-  "70세 이상",
+  "60세 이상",
+];
+const ageENUM = [
+  "ALL",
+  "ZERO",
+  "TEN",
+  "TWENTY",
+  "THIRTY",
+  "FORTY",
+  "FIFTY",
+  "SIXTY",
+];
+const toneENUM = [
+  "DEFAULT",
+  "WORDPLAY",
+  "ACTION",
+  "REVIEW",
+  "WARNING",
+  "EMOTIONAL",
+  "PROBLEM",
+  "QUESTION",
 ];
-
 const CopyMaker = () => {
   const size = useWindowSize();
 
-  // 백엔드에 보낼 데이터 (Form submit 용)
-  const [values, setValues] = useState({
-    category: "", // 서비스 선택: 헤드/바디
-    projectName: "", // 프로젝트명
-    serviceName: "", // 상품/서비스명
-    targetGender: "", // 성별
-    targetAge: "", // 연령대
-    keyword: "", //키워드
-    toneManner: "", // 톤앤매너
-  });
-  const handleChange = (e: any) => {
-    setValues({
-      ...values,
-      [e.target.name]: e.target.value,
-    });
-  };
-
   // 생성 버튼 disabled 인지 아닌지
   const [canSubmit, setCanSubmit] = useState(false);
-  useEffect(() => {
-    const isFull = Object.values(values).every((value) => value.trim() !== "");
-    setCanSubmit(isFull);
-  }, [values]);
 
   const [focused, setFocused] = useState("");
   // 포커스 상태 변경 함수
@@ -63,6 +61,8 @@ const CopyMaker = () => {
     category === opt ? setCategory("") : setCategory(opt);
   };
 
+  const [targetGender, setTargetGender] = useState("성별 선택");
+  const [targetAge, setTargetAge] = useState("연령대 선택");
   // 키워드
   const [keywords, setKeywords] = useState<string[]>([]);
   const [inputValue, setInputValue] = useState("");
@@ -87,7 +87,61 @@ const CopyMaker = () => {
   };
 
   // 톤앤매너
-  const [toneManner, setToneManner] = useState<number>(0);
+  const [tone, setTone] = useState<number>(0);
+
+  // 백엔드에 보낼 데이터 (Form submit 용)
+  const [values, setValues] = useState({
+    service: category, // 서비스 선택: 헤드/바디
+    projectName: "", // 프로젝트명
+    productName: "", // 상품/서비스명
+    targetGender: genderENUM[genderOption.indexOf(targetGender)], // 성별
+    targetAge: ageENUM[ageOption.indexOf(targetAge)], // 연령대
+    keyword: keywords, //키워드
+    tone: toneENUM[tone], // 톤앤매너
+  });
+
+  useEffect(() => {
+    const isFull = Object.values(values).every((value) => value !== "");
+    setCanSubmit(isFull);
+  }, [values]);
+
+  const handleChange = (e: any) => {
+    const { name, value } = e.target;
+
+    if (name === "service") {
+      setValues({
+        ...values,
+        [name]: value,
+      });
+    } else if (name === "projectName" || name === "productName") {
+      setValues({
+        ...values,
+        [name]: value,
+      });
+    } else if (name === "targetGender") {
+      const index = genderOption.indexOf(value);
+
+      setValues({
+        ...values,
+        [name]: genderENUM[index],
+      });
+    } else if (name === "targetAge") {
+      const index = ageOption.indexOf(value);
+
+      setValues({
+        ...values,
+        [name]: ageENUM[index],
+      });
+    } else if (name === "keyword") {
+    } else if (name === "tone") {
+      const index = toneENUM.indexOf(name);
+
+      setValues({
+        ...values,
+        [name]: toneENUM[index],
+      });
+    }
+  };
 
   return (
     <BoxWrapper style={{ height: size.height * 0.8 }}>
@@ -107,18 +161,18 @@ const CopyMaker = () => {
           서비스 선택
           <InlineContent gap="1rem">
             <SelectButton
-              active={category == "head"}
+              active={category == "HEAD"}
               color={colors.main}
               background={colors.mainLight6}
-              onClick={() => categoryClick("head")}
+              onClick={() => categoryClick("HEAD")}
             >
               헤드 카피
             </SelectButton>
             <SelectButton
-              active={category == "body"}
+              active={category == "BODY"}
               color={colors.secondary}
               background={colors.secondaryLight3}
-              onClick={() => categoryClick("body")}
+              onClick={() => categoryClick("BODY")}
             >
               바디 카피
             </SelectButton>
@@ -136,14 +190,14 @@ const CopyMaker = () => {
             autoComplete="off"
           />
         </Contents>
-        <Contents focus={focused} opt={"serviceName"}>
+        <Contents focus={focused} opt={"productName"}>
           상품/서비스 명
           <InputContent
             //required
             type="text"
-            name="serviceName"
+            name="productName"
             placeholder="예) 아이스크림"
-            onFocus={() => handleFocus("serviceName")}
+            onFocus={() => handleFocus("productName")}
             onBlur={handleBlur}
             autoComplete="off"
           />
@@ -151,8 +205,18 @@ const CopyMaker = () => {
         <Contents focus={""} opt={"target"}>
           타겟
           <InlineContent gap="1rem">
-            <Toggle optionData={genderOption} placeholder="성별 선택" />
-            <Toggle optionData={ageOption} placeholder="연령대 선택" />
+            <Toggle
+              optionData={genderOption}
+              placeholder="성별 선택"
+              currentValue={targetGender}
+              setCurrentValue={setTargetGender}
+            />
+            <Toggle
+              optionData={ageOption}
+              placeholder="연령대 선택"
+              currentValue={targetAge}
+              setCurrentValue={setTargetAge}
+            />
           </InlineContent>
         </Contents>
         <Contents focus={focused} opt={"keyword"}>
@@ -188,74 +252,74 @@ const CopyMaker = () => {
           톤 앤 매너
           <ToneRegion>
             <ToneButton
-              active={toneManner == 1}
+              active={tone == 1}
               color={colors.main}
               background="#212121"
-              onClick={() => setToneManner(1)}
+              onClick={() => setTone(1)}
             >
               기본형
             </ToneButton>
-            {category == "body" ? (
+            {category == "BODY" ? (
               <></>
             ) : (
               <ToneButton
-                active={toneManner == 2}
+                active={tone == 2}
                 color={colors.main}
                 background="#212121"
-                onClick={() => setToneManner(2)}
+                onClick={() => setTone(2)}
               >
                 언어유희형
               </ToneButton>
             )}
             <ToneButton
-              active={toneManner == 3}
+              active={tone == 3}
               color={colors.main}
               background="#212121"
-              onClick={() => setToneManner(3)}
+              onClick={() => setTone(3)}
             >
               행동촉구형
             </ToneButton>
             <ToneButton
-              active={toneManner == 4}
+              active={tone == 4}
               color={colors.main}
               background="#212121"
-              onClick={() => setToneManner(4)}
+              onClick={() => setTone(4)}
             >
               리뷰형
             </ToneButton>
 
             <ToneButton
-              active={toneManner == 5}
+              active={tone == 5}
               color={colors.main}
               background="#212121"
-              onClick={() => setToneManner(5)}
+              onClick={() => setTone(5)}
             >
               경고형
             </ToneButton>
             <ToneButton
-              active={toneManner == 6}
+              active={tone == 6}
               color={colors.main}
               background="#212121"
-              onClick={() => setToneManner(6)}
+              onClick={() => setTone(6)}
             >
               감정호소형
             </ToneButton>
             <ToneButton
-              active={toneManner == 7}
+              active={tone == 7}
               color={colors.main}
               background="#212121"
-              onClick={() => setToneManner(7)}
+              onClick={() => setTone(7)}
             >
               문제제기형
             </ToneButton>
-            {category == "body" ? (
+            {category == "BODY" ? (
               <></>
             ) : (
               <ToneButton
-                active={toneManner == 8}
+                active={tone == 8}
                 color={colors.main}
                 background="#212121"
-                onClick={() => setToneManner(8)}
+                onClick={() => setTone(8)}
               >
                 질문형
               </ToneButton>
diff --git a/src/components/adCopy/CopyResult.tsx b/src/components/adCopy/CopyResult.tsx
index 8d6757d..ebd53e7 100644
--- a/src/components/adCopy/CopyResult.tsx
+++ b/src/components/adCopy/CopyResult.tsx
@@ -6,6 +6,7 @@ import { colors } from "@/styles/theme";
 import Image from "next/image";
 import { useState } from "react";
 import { useWindowSize } from "@/hooks/useWindowSize";
+import Link from "next/link";
 
 interface CopyItem {
   category: string;
@@ -123,15 +124,17 @@ const CopyResult = () => {
             최근 저장한 항목
           </Category>
         </CategoryBox>
-        <Button text={colors.white} background={colors.main}>
-          카피 갤러리 바로가기
-          <Image
-            src={"/main/arrow-right.svg"}
-            alt="right-arrow"
-            width={18}
-            height={18}
-          />
-        </Button>
+        <Link href="/adCopy/copyGallery">
+          <Button text={colors.white} background={colors.main}>
+            카피 갤러리 바로가기
+            <Image
+              src={"/main/arrow-right.svg"}
+              alt="right-arrow"
+              width={18}
+              height={18}
+            />
+          </Button>
+        </Link>
       </BoxHeader>
       {categoryIndex == 0 ? (
         <BoxContents style={{ height: size.height * 0.65 }}>
diff --git a/src/components/adCopy/GalleryCards.tsx b/src/components/adCopy/GalleryCards.tsx
new file mode 100644
index 0000000..ff0fa6b
--- /dev/null
+++ b/src/components/adCopy/GalleryCards.tsx
@@ -0,0 +1,150 @@
+import { colors } from "@/styles/theme";
+import styled from "styled-components";
+
+const GalleryCards = () => {
+  const data = [
+    {
+      category: "헤드카피",
+      tone: "언어유희형",
+      copyText: "내가 사는 지역을 더 살기 좋게, 더 매력 있게",
+    },
+    {
+      category: "헤드카피",
+      tone: "언어유희형",
+      copyText: "내가 사는 지역을 더 살기 좋게, 더 매력 있게2",
+    },
+    {
+      category: "헤드카피",
+      tone: "언어유희형",
+      copyText: "내가 사는 지역을 더 살기 좋게, 더 매력 있게3",
+    },
+    {
+      category: "헤드카피",
+      tone: "언어유희형",
+      copyText: "내가 사는 지역을 더 살기 좋게, 더 매력 있게4",
+    },
+    {
+      category: "헤드카피",
+      tone: "언어유희형",
+      copyText: "내가 사는 지역을 더 살기 좋게, 더 매력 있게5",
+    },
+    {
+      category: "헤드카피",
+      tone: "언어유희형",
+      copyText: "내가 사는 지역을 더 살기 좋게, 더 매력 있게6",
+    },
+    {
+      category: "헤드카피",
+      tone: "언어유희형",
+      copyText: "내가 사는 지역을 더 살기 좋게, 더 매력 있게3",
+    },
+    {
+      category: "헤드카피",
+      tone: "언어유희형",
+      copyText: "내가 사는 지역을 더 살기 좋게, 더 매력 있게4",
+    },
+    {
+      category: "헤드카피",
+      tone: "언어유희형",
+      copyText: "내가 사는 지역을 더 살기 좋게, 더 매력 있게5",
+    },
+    {
+      category: "헤드카피",
+      tone: "언어유희형",
+      copyText: "내가 사는 지역을 더 살기 좋게, 더 매력 있게6",
+    },
+  ];
+
+  return (
+    <BoxContents>
+      {data.map((v, i) => (
+        <CopyWrapper key={i}>
+          <TagBox>
+            <Tag color={colors.main} background={colors.mainLight6}>
+              {v.category}
+            </Tag>
+            <Tag color={colors.grey1} background={colors.grey5}>
+              {v.tone}
+            </Tag>
+          </TagBox>
+          {v.copyText}
+          <EditWrapper>조회 1900</EditWrapper>
+        </CopyWrapper>
+      ))}
+    </BoxContents>
+  );
+};
+
+export default GalleryCards;
+
+const BoxContents = styled.div`
+  width: 87.825rem;
+  height: 43rem;
+  display: inline-flex;
+  flex-wrap: wrap;
+  overflow-y: auto;
+  justify-content: space-between;
+  margin-top: 1.5rem;
+  padding-right: 0.875rem;
+
+  &::-webkit-scrollbar-track {
+    margin: 1rem;
+    border-radius: 10px;
+    background-color: ${colors.grey0};
+  }
+  &::-webkit-scrollbar {
+    width: 0.375rem;
+  }
+  &::-webkit-scrollbar-thumb {
+    border-radius: 10px;
+    background-color: ${colors.main};
+  }
+`;
+const CopyWrapper = styled.div`
+  display: flex;
+  width: 28.5rem;
+  height: 14.375rem;
+  flex-direction: column;
+  justify-content: space-between;
+  border-radius: 0.875rem;
+  background: ${colors.grey0};
+  padding: 1rem;
+  color: ${colors.white};
+  text-align: center;
+  font-size: 0.9375rem;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 1.375rem;
+  margin-bottom: 2%;
+`;
+const TagBox = styled.div`
+  display: inline-flex;
+  gap: 0.5rem;
+  margin-bottom: 2.5rem;
+`;
+const Tag = styled.div<{ color: string; background: string }>`
+  padding: 0.375rem 0.875rem;
+  justify-content: center;
+  align-items: center;
+  border-radius: 1.375rem;
+  border: 1px solid ${(props) => props.color};
+  background: ${(props) => props.background};
+  color: ${(props) => props.color};
+  font-size: 0.75rem;
+  font-style: normal;
+  font-weight: 500;
+  line-height: normal;
+`;
+const EditWrapper = styled.div`
+  width: 100%;
+  display: inline-flex;
+  justify-content: end;
+  gap: 0.62rem;
+  margin-top: 2.75rem;
+  color: #cecece;
+  font-size: 0.75rem;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  letter-spacing: -0.0075rem;
+`;
diff --git a/src/components/adCopy/GalleryTag.tsx b/src/components/adCopy/GalleryTag.tsx
new file mode 100644
index 0000000..cf5f1da
--- /dev/null
+++ b/src/components/adCopy/GalleryTag.tsx
@@ -0,0 +1,205 @@
+"use client";
+
+import { colors } from "@/styles/theme";
+import Image from "next/image";
+import { useState } from "react";
+import DatePicker from "react-datepicker";
+import "react-datepicker/dist/react-datepicker.css";
+import styled from "styled-components";
+
+const GalleryTag = () => {
+  const [date, setDate] = useState<number>(0);
+  const [service, setService] = useState<string>("");
+  const [tone, setTone] = useState<number>(0);
+  const [startDate, setStartDate] = useState(new Date());
+  const [endDate, setEndDate] = useState(new Date());
+
+  return (
+    <TagRegion>
+      <InlineContents>
+        <Title>날짜</Title>
+        <TagWrapper active={date == 1} onClick={() => setDate(1)}>
+          최근 1주일
+        </TagWrapper>
+        <TagWrapper active={date == 2} onClick={() => setDate(2)}>
+          최근 한달
+        </TagWrapper>
+        <TagWrapper active={date == 3} onClick={() => setDate(3)}>
+          최근 6개월
+        </TagWrapper>
+        <DateBox active={date == 4} onClick={() => setDate(4)}>
+          <div className="title">직접 입력</div>
+          <DateContainer>
+            <Image
+              src="/trend/calendar.svg"
+              alt="calendar"
+              width={24}
+              height={24}
+            />
+            <div>시작일</div>
+            <DatePickerStyle
+              selected={startDate}
+              onChange={(date: Date) => setStartDate(date)}
+              selectsStart
+              startDate={startDate}
+              endDate={endDate}
+              dateFormat="yyyy-MM-dd"
+            />
+          </DateContainer>
+          <DateContainer>
+            <Image
+              src="/trend/calendar.svg"
+              alt="calendar"
+              width={24}
+              height={24}
+            />
+            <div>종료일</div>
+            <DatePickerStyle
+              selected={endDate}
+              onChange={(date: Date) => setEndDate(date)}
+              selectsStart
+              startDate={startDate}
+              endDate={endDate}
+              dateFormat="yyyy-MM-dd"
+            />
+          </DateContainer>
+        </DateBox>
+      </InlineContents>
+      <InlineContents>
+        <Title>서비스 구분</Title>
+        <TagWrapper
+          active={service == "HEAD"}
+          onClick={() => setService("HEAD")}
+        >
+          헤드카피
+        </TagWrapper>
+        <TagWrapper
+          active={service == "BODY"}
+          onClick={() => setService("BODY")}
+        >
+          바디카피
+        </TagWrapper>
+      </InlineContents>
+      <InlineContents>
+        <Title>톤앤 매너</Title>
+        <TagWrapper active={tone == 1} onClick={() => setTone(1)}>
+          기본형
+        </TagWrapper>
+        <TagWrapper active={tone == 2} onClick={() => setTone(2)}>
+          언어유희형
+        </TagWrapper>
+        <TagWrapper active={tone == 3} onClick={() => setTone(3)}>
+          행동촉구형
+        </TagWrapper>
+        <TagWrapper active={tone == 4} onClick={() => setTone(4)}>
+          리뷰형
+        </TagWrapper>
+        <TagWrapper active={tone == 5} onClick={() => setTone(5)}>
+          경고형
+        </TagWrapper>
+        <TagWrapper active={tone == 6} onClick={() => setTone(6)}>
+          감정호소형
+        </TagWrapper>
+        <TagWrapper active={tone == 7} onClick={() => setTone(7)}>
+          문제제기형
+        </TagWrapper>
+        <TagWrapper active={tone == 8} onClick={() => setTone(8)}>
+          질문형
+        </TagWrapper>
+      </InlineContents>
+    </TagRegion>
+  );
+};
+
+export default GalleryTag;
+
+const TagRegion = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 87.5rem;
+  height: 17.75rem;
+  flex-shrink: 0;
+  padding: 3.5rem 5rem;
+  border-radius: 1.25rem;
+  background: #212121;
+  gap: 2rem;
+  color: ${colors.grey1};
+  margin-bottom: 3.75rem;
+`;
+const InlineContents = styled.div`
+  display: inline-flex;
+  gap: 0.75rem;
+  align-items: center;
+`;
+const Title = styled.div`
+  width: 6rem;
+  color: ${colors.white};
+`;
+const TagWrapper = styled.div<{
+  active: boolean;
+}>`
+  display: flex;
+  flex-grow: 0;
+  padding: 0.62rem 1.75rem;
+  height: 2.5rem;
+  justify-content: center;
+  align-items: center;
+  border-radius: 1.825rem;
+  border: 1px solid ${(props) => (props.active ? colors.main : colors.grey05)};
+  background: ${(props) => (props.active ? "#212121" : "transparent")};
+  color: ${(props) => (props.active ? colors.main : colors.grey1)};
+  font-size: 0.875rem;
+  font-style: normal;
+  font-weight: 500;
+  line-height: normal;
+  cursor: pointer;
+`;
+const DateBox = styled.div<{ active: boolean }>`
+  display: flex;
+  height: 2.5rem;
+  justify-content: space-between;
+  align-items: center;
+  background: #212121;
+  border: 1px solid ${(props) => (props.active ? colors.main : colors.grey05)};
+  padding: 0.62rem 1.75rem;
+  border-radius: 1.875rem;
+  .title {
+    margin-right: 1.5rem;
+    font-size: 0.875rem;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 1.375rem;
+    color: ${(props) => (props.active ? colors.main : colors.grey1)};
+  }
+`;
+
+const DateContainer = styled.div`
+  display: flex;
+  align-items: center;
+  font-size: 0.875rem;
+  font-style: normal;
+  font-weight: 500;
+  line-height: normal;
+
+  > div {
+    margin: 0 0.1rem 0 0.5rem;
+    font-size: 0.875rem;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 1.375rem;
+  }
+`;
+
+const DatePickerStyle = styled(DatePicker)`
+  background-color: #212121;
+  padding: 1rem 2.5rem;
+  border-radius: 100px;
+  color: ${colors.grey1};
+  cursor: pointer;
+  border: none;
+  padding: 0;
+  width: 5.5rem;
+  &:focus {
+    outline: none;
+  }
+`;
diff --git a/src/components/common/Toggle.tsx b/src/components/common/Toggle.tsx
index f0f73f7..41dc0fd 100644
--- a/src/components/common/Toggle.tsx
+++ b/src/components/common/Toggle.tsx
@@ -6,9 +6,16 @@ import styled from "styled-components";
 interface ToggleProps {
   optionData: string[];
   placeholder: string;
+  currentValue: string;
+  setCurrentValue: React.Dispatch<React.SetStateAction<string>>;
 }
-export const Toggle: React.FC<ToggleProps> = ({ optionData, placeholder }) => {
-  const [currentValue, setCurrentValue] = useState(placeholder);
+export const Toggle: React.FC<ToggleProps> = ({
+  optionData,
+  placeholder,
+  currentValue,
+  setCurrentValue,
+}) => {
+  //const [currentValue, setCurrentValue] = useState(placeholder);
   const [showOptions, setShowOptions] = useState(false);
 
   const handleFocus = (e: any) => {
diff --git a/src/components/main/CopyBlock.tsx b/src/components/main/CopyBlock.tsx
index 6f564a8..bc1527b 100644
--- a/src/components/main/CopyBlock.tsx
+++ b/src/components/main/CopyBlock.tsx
@@ -8,6 +8,7 @@ import styled from "styled-components";
 import { Button } from "../common/ButtonStyle";
 import { CardSlider } from "./CardSlider";
 import CopyModal from "./CopyModal";
+import Link from "next/link";
 
 export default function CopyBlock() {
   // 모달 버튼 클릭 유무를 저장할 state
@@ -38,24 +39,28 @@ export default function CopyBlock() {
           }
         </Description>
         <ButtonWrapper>
-          <Button
-            background={colors.main}
-            text={colors.white}
-            initial="default"
-            whileHover="scaleUp"
-            variants={Variants}
-          >
-            새 카피 만들기
-          </Button>
-          <Button
-            background={colors.mainLight6}
-            text={colors.main}
-            initial="default"
-            whileHover="scaleUp"
-            variants={Variants}
-          >
-            카피 갤러리
-          </Button>
+          <Link href="/adCopy/createAdCopy">
+            <Button
+              background={colors.main}
+              text={colors.white}
+              initial="default"
+              whileHover="scaleUp"
+              variants={Variants}
+            >
+              새 카피 만들기
+            </Button>
+          </Link>
+          <Link href="/adCopy/copyGallery">
+            <Button
+              background={colors.mainLight6}
+              text={colors.main}
+              initial="default"
+              whileHover="scaleUp"
+              variants={Variants}
+            >
+              카피 갤러리
+            </Button>
+          </Link>
         </ButtonWrapper>
         <GuideMiniTextBlock onClick={clickModal}>
           이용 가이드 보러가기
diff --git a/src/components/main/StoryBlock.tsx b/src/components/main/StoryBlock.tsx
index 325858f..4532a5c 100644
--- a/src/components/main/StoryBlock.tsx
+++ b/src/components/main/StoryBlock.tsx
@@ -44,7 +44,7 @@ export default function StoryBlock() {
           whileHover="scaleUp"
           variants={Variants}
         >
-          새 카피 만들기
+          새 스토리보드 만들기
         </Button>
         <Button
           background={colors.mainLight6}
diff --git a/yarn.lock b/yarn.lock
index b40c76a..08a25cc 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1652,7 +1652,7 @@ functions-have-names@^1.2.3:
   resolved "https://registry.yarnpkg.com/functions-have-names/-/functions-have-names-1.2.3.tgz#0404fe4ee2ba2f607f0e0ec3c80bae994133b834"
   integrity sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==
 
-get-intrinsic@^1.1.1, get-intrinsic@^1.1.3, get-intrinsic@^1.2.1, get-intrinsic@^1.2.2, get-intrinsic@^1.2.3, get-intrinsic@^1.2.4:
+get-intrinsic@^1.1.3, get-intrinsic@^1.2.1, get-intrinsic@^1.2.2, get-intrinsic@^1.2.3, get-intrinsic@^1.2.4:
   version "1.2.4"
   resolved "https://registry.yarnpkg.com/get-intrinsic/-/get-intrinsic-1.2.4.tgz#e385f5a4b5227d449c3eabbad05494ef0abbeadd"
   integrity sha512-5uYhsJH8VJBTv7oslg4BznJYhDoRI6waYCxMmCdnTrcCrHA/fCFKoTFz2JKKE0HdDFUF7/oQuhzumXJK7paBRQ==
@@ -1952,10 +1952,10 @@ is-glob@^4.0.0, is-glob@^4.0.1, is-glob@^4.0.3:
   dependencies:
     is-extglob "^2.1.1"
 
-is-map@^2.0.1:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/is-map/-/is-map-2.0.2.tgz#00922db8c9bf73e81b7a335827bc2a43f2b91127"
-  integrity sha512-cOZFQQozTha1f4MxLFzlgKYPTyj26picdZTx82hbc/Xf4K/tZOOXSCkMvU4pKioRXGDLJRn0GM7Upe7kR721yg==
+is-map@^2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/is-map/-/is-map-2.0.3.tgz#ede96b7fe1e270b3c4465e3a465658764926d62e"
+  integrity sha512-1Qed0/Hr2m+YqxnM09CjA2d/i6YZNfF6R2oRAOj36eUdS6qIV/huPJNSEpKbupewFs+ZsJlxsjjPbc0/afW6Lw==
 
 is-negative-zero@^2.0.3:
   version "2.0.3"
@@ -1987,10 +1987,10 @@ is-regex@^1.1.4:
     call-bind "^1.0.2"
     has-tostringtag "^1.0.0"
 
-is-set@^2.0.1:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/is-set/-/is-set-2.0.2.tgz#90755fa4c2562dc1c5d4024760d6119b94ca18ec"
-  integrity sha512-+2cnTEZeY5z/iXGbLhPrOAaK/Mau5k5eXq9j14CpRTftq0pAJu2MwVRSZhyZWBzx3o6X795Lz6Bpb6R0GKf37g==
+is-set@^2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/is-set/-/is-set-2.0.3.tgz#8ab209ea424608141372ded6e0cb200ef1d9d01d"
+  integrity sha512-iPAjerrse27/ygGLxw+EBR9agv9Y6uLeYVJMu+QNCoouJ1/1ri0mGrcWpfCqFZuzzx3WjtwxG098X+n4OuRkPg==
 
 is-shared-array-buffer@^1.0.2, is-shared-array-buffer@^1.0.3:
   version "1.0.3"
@@ -2037,8 +2037,8 @@ is-weakset@^2.0.1:
   resolved "https://registry.yarnpkg.com/is-weakset/-/is-weakset-2.0.2.tgz#4569d67a747a1ce5a994dfd4ef6dcea76e7c0a1d"
   integrity sha512-t2yVvttHkQktwnNNmBQ98AhENLdPUTDTE21uPqAQ0ARwQfGeQKRVS0NNurH7bTf7RrvcVn1OOge45CnBeHCSmg==
   dependencies:
-    call-bind "^1.0.2"
-    get-intrinsic "^1.1.1"
+    call-bind "^1.0.7"
+    get-intrinsic "^1.2.4"
 
 isarray@^2.0.5:
   version "2.0.5"
@@ -3180,10 +3180,10 @@ which-collection@^1.0.1:
   resolved "https://registry.yarnpkg.com/which-collection/-/which-collection-1.0.1.tgz#70eab71ebbbd2aefaf32f917082fc62cdcb70906"
   integrity sha512-W8xeTUwaln8i3K/cY1nGXzdnVZlidBcagyNFtBdD5kxnb4TvGKR7FfSIS3mYpwWS1QUCutfKz8IY8RjftB0+1A==
   dependencies:
-    is-map "^2.0.1"
-    is-set "^2.0.1"
-    is-weakmap "^2.0.1"
-    is-weakset "^2.0.1"
+    is-map "^2.0.3"
+    is-set "^2.0.3"
+    is-weakmap "^2.0.2"
+    is-weakset "^2.0.3"
 
 which-typed-array@^1.1.14, which-typed-array@^1.1.9:
   version "1.1.14"