From 3e7aea0ee41fa54dbbaeab04d0a01197f1cd5879 Mon Sep 17 00:00:00 2001 From: HIHJH <2170095@ewhain.net> Date: Sat, 9 Mar 2024 11:43:50 +0900 Subject: [PATCH 1/6] =?UTF-8?q?feat(#21):=20=EC=B9=B4=ED=94=BC=20=EC=83=9D?= =?UTF-8?q?=EC=84=B1=20=EB=8D=B0=EC=9D=B4=ED=84=B0=20=EC=A4=80=EB=B9=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/adCopy/CopyMaker.tsx | 168 +++++++++++++++++++--------- src/components/common/Toggle.tsx | 11 +- 2 files changed, 125 insertions(+), 54 deletions(-) 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([]); const [inputValue, setInputValue] = useState(""); @@ -87,7 +87,61 @@ const CopyMaker = () => { }; // 톤앤매너 - const [toneManner, setToneManner] = useState(0); + const [tone, setTone] = useState(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 ( @@ -107,18 +161,18 @@ const CopyMaker = () => { 서비스 선택 categoryClick("head")} + onClick={() => categoryClick("HEAD")} > 헤드 카피 categoryClick("body")} + onClick={() => categoryClick("BODY")} > 바디 카피 @@ -136,14 +190,14 @@ const CopyMaker = () => { autoComplete="off" /> - + 상품/서비스 명 handleFocus("serviceName")} + onFocus={() => handleFocus("productName")} onBlur={handleBlur} autoComplete="off" /> @@ -151,8 +205,18 @@ const CopyMaker = () => { 타겟 - - + + @@ -188,74 +252,74 @@ const CopyMaker = () => { 톤 앤 매너 setToneManner(1)} + onClick={() => setTone(1)} > 기본형 - {category == "body" ? ( + {category == "BODY" ? ( <> ) : ( setToneManner(2)} + onClick={() => setTone(2)} > 언어유희형 )} setToneManner(3)} + onClick={() => setTone(3)} > 행동촉구형 setToneManner(4)} + onClick={() => setTone(4)} > 리뷰형 setToneManner(5)} + onClick={() => setTone(5)} > 경고형 setToneManner(6)} + onClick={() => setTone(6)} > 감정호소형 setToneManner(7)} + onClick={() => setTone(7)} > 문제제기형 - {category == "body" ? ( + {category == "BODY" ? ( <> ) : ( setToneManner(8)} + onClick={() => setTone(8)} > 질문형 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>; } -export const Toggle: React.FC = ({ optionData, placeholder }) => { - const [currentValue, setCurrentValue] = useState(placeholder); +export const Toggle: React.FC = ({ + optionData, + placeholder, + currentValue, + setCurrentValue, +}) => { + //const [currentValue, setCurrentValue] = useState(placeholder); const [showOptions, setShowOptions] = useState(false); const handleFocus = (e: any) => { From 133219dda698cfdabd57f3faae4cebececa2eb10 Mon Sep 17 00:00:00 2001 From: HIHJH <2170095@ewhain.net> Date: Sat, 9 Mar 2024 11:45:06 +0900 Subject: [PATCH 2/6] =?UTF-8?q?fix(#21):=20=EC=98=A4=ED=83=80=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/main/StoryBlock.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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} > - 새 카피 만들기 + 새 스토리보드 만들기 + + + {categoryIndex == 0 ? ( 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() { } - - + + + + + + 이용 가이드 보러가기 From 538bcb010b7d5f5361914f466bfaf3e238721d32 Mon Sep 17 00:00:00 2001 From: HIHJH <2170095@ewhain.net> Date: Sat, 9 Mar 2024 22:38:02 +0900 Subject: [PATCH 5/6] =?UTF-8?q?feat(#21):=20=EC=B9=B4=ED=94=BC=EA=B0=A4?= =?UTF-8?q?=EB=9F=AC=EB=A6=AC=ED=8E=98=EC=9D=B4=EC=A7=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/adCopy/copyGallery/page.tsx | 14 ++ src/components/adCopy/AdCopySearch.tsx | 113 ++++++++++++ src/components/adCopy/CopyGalleryPage.tsx | 41 +++++ src/components/adCopy/GalleryCards.tsx | 150 ++++++++++++++++ src/components/adCopy/GalleryTag.tsx | 205 ++++++++++++++++++++++ 5 files changed, 523 insertions(+) create mode 100644 src/app/adCopy/copyGallery/page.tsx create mode 100644 src/components/adCopy/AdCopySearch.tsx create mode 100644 src/components/adCopy/CopyGalleryPage.tsx create mode 100644 src/components/adCopy/GalleryCards.tsx create mode 100644 src/components/adCopy/GalleryTag.tsx 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 ( + + +