From 5ae2a50aad7e2922d259475c6093209eac826a6b Mon Sep 17 00:00:00 2001 From: minbo Date: Fri, 31 Jan 2025 19:28:11 +0900 Subject: [PATCH 1/5] =?UTF-8?q?refactor:=20=EB=B0=91=EC=A4=84=20css=20?= =?UTF-8?q?=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit underline -> border-bottom --- .../application/applicationLayout/Horizontal.componet.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/components/application/applicationLayout/Horizontal.componet.tsx b/frontend/components/application/applicationLayout/Horizontal.componet.tsx index dab20789..609dd6fd 100644 --- a/frontend/components/application/applicationLayout/Horizontal.componet.tsx +++ b/frontend/components/application/applicationLayout/Horizontal.componet.tsx @@ -25,7 +25,7 @@ const ApplicationHorizontalLayout = ({ {applicationQuestion.subtitle} {applicationQuestion.alert && (
- + ⚠️ {applicationQuestion.alert}
From c6e74eaf2e0526c4b8cc7a77aa854cb0fb2abf72 Mon Sep 17 00:00:00 2001 From: minbo Date: Fri, 31 Jan 2025 19:35:59 +0900 Subject: [PATCH 2/5] =?UTF-8?q?refactor:=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 --- frontend/components/application/JunctionOrLayout.tsx | 6 ++---- .../application/applicationLayout/Horizontal.componet.tsx | 4 ++-- .../application/applicationLayout/Vertical.component.tsx | 4 ++-- 3 files changed, 6 insertions(+), 8 deletions(-) diff --git a/frontend/components/application/JunctionOrLayout.tsx b/frontend/components/application/JunctionOrLayout.tsx index c7155397..dd416ba1 100644 --- a/frontend/components/application/JunctionOrLayout.tsx +++ b/frontend/components/application/JunctionOrLayout.tsx @@ -11,12 +11,10 @@ const checkQuestion = ( return "id" in node; }; -// FIXME: 타입 오타 수정 바람 (Junctin -> Junction) -interface JunctinOrLayoutProps { +interface JunctionOrLayoutProps { node: ApplicationQuestion | ApplicationNode; } -// FIXME: 컴포넌트 오타 수정 바람 (Junctin -> Junction) -export const JunctinOrLayout = ({ node }: JunctinOrLayoutProps) => { +export const JunctionOrLayout = ({ node }: JunctionOrLayoutProps) => { return checkQuestion(node) ? ( ) : ( diff --git a/frontend/components/application/applicationLayout/Horizontal.componet.tsx b/frontend/components/application/applicationLayout/Horizontal.componet.tsx index 609dd6fd..976d71b6 100644 --- a/frontend/components/application/applicationLayout/Horizontal.componet.tsx +++ b/frontend/components/application/applicationLayout/Horizontal.componet.tsx @@ -2,7 +2,7 @@ import Txt from "@/components/common/Txt.component"; import type { ApplicationQuestion } from "@/src/constants/application/type"; -import { JunctinOrLayout } from "../JunctionOrLayout"; +import { JunctionOrLayout } from "../JunctionOrLayout"; interface ApplicationHorizontalLayoutProps { applicationQuestion: ApplicationQuestion; @@ -36,7 +36,7 @@ const ApplicationHorizontalLayout = ({
{applicationQuestion.nodes.map((node, index) => (
- +
))}
diff --git a/frontend/components/application/applicationLayout/Vertical.component.tsx b/frontend/components/application/applicationLayout/Vertical.component.tsx index 621efb1f..a1666e99 100644 --- a/frontend/components/application/applicationLayout/Vertical.component.tsx +++ b/frontend/components/application/applicationLayout/Vertical.component.tsx @@ -2,7 +2,7 @@ import Txt from "@/components/common/Txt.component"; import type { ApplicationQuestion } from "@/src/constants/application/type"; -import { JunctinOrLayout } from "../JunctionOrLayout"; +import { JunctionOrLayout } from "../JunctionOrLayout"; import { cn } from "@/src/utils/cn"; interface ApplicationVerticalLayoutProps { @@ -28,7 +28,7 @@ const ApplicationVerticalLayout = ({ )} {applicationQuestion.nodes.map((node, index) => (
- +
))} From b8ce38e77db41285347f79efc7d7574949037e90 Mon Sep 17 00:00:00 2001 From: minbo Date: Sat, 1 Feb 2025 21:47:37 +0900 Subject: [PATCH 3/5] =?UTF-8?q?refactor:=20=ED=8F=AC=ED=8A=B8=ED=8F=B4?= =?UTF-8?q?=EB=A6=AC=EC=98=A4=20URL=20=EC=9E=85=EB=A0=A5=EC=B0=BD=20?= =?UTF-8?q?=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../application/Junction.component.tsx | 2 + .../application/applicationNode/AddText.tsx | 136 ++++++++++++++++++ .../applicationNode/Text.component.tsx | 2 +- .../src/constants/application/28/developer.ts | 12 +- frontend/src/constants/application/type.d.ts | 9 +- 5 files changed, 150 insertions(+), 11 deletions(-) create mode 100644 frontend/components/application/applicationNode/AddText.tsx diff --git a/frontend/components/application/Junction.component.tsx b/frontend/components/application/Junction.component.tsx index 34358580..67efc38b 100644 --- a/frontend/components/application/Junction.component.tsx +++ b/frontend/components/application/Junction.component.tsx @@ -8,6 +8,7 @@ import ApplicationCheckboxWithEtc from "./applicationNode/CheckboxWithEtc.compon import ApplicationTextarea from "./applicationNode/Textarea.component"; import ApplicationBar from "./applicationNode/Bar.component"; import ApplicationJustText from "./applicationNode/JustText.component"; +import ApplicationAddText from "./applicationNode/AddText"; interface JunctionQuestionProps { applicationNodeData: ApplicationNode; @@ -28,6 +29,7 @@ export const JunctionQuestion = ({ checkboxWithEtc: , checkbox: <>, timeline: <>, + addText: , }; return jsxNode[applicationNodeData.type]; diff --git a/frontend/components/application/applicationNode/AddText.tsx b/frontend/components/application/applicationNode/AddText.tsx new file mode 100644 index 00000000..29d2c065 --- /dev/null +++ b/frontend/components/application/applicationNode/AddText.tsx @@ -0,0 +1,136 @@ +"use client"; + +import Txt from "@/components/common/Txt.component"; +import { + type ApplicationAddText, + ApplicationNode, +} from "@/src/constants/application/type"; + +import { useState } from "react"; +import ApplicationText from "./Text.component"; + +interface ApplicationAddTextProps { + data: ApplicationNode; +} + +const ApplicationAddText = ({ data }: ApplicationAddTextProps) => { + const textData = data as ApplicationAddText; + const id = Date.now().toString(); + const [selectedCategories, setSelectedCategories] = useState< + { category: string; id: string }[] + >([{ category: "Github", id: id }]); + + const onAddCategory = () => { + const newId = Date.now().toString(); + + setSelectedCategories([ + ...selectedCategories, + { category: "Github", id: newId }, + ]); + }; + + return ( + <> + {textData.title && ( +
+ + +
+ )} + {selectedCategories.map((selectedCategory) => ( + + ))} + + ); +}; + +export default ApplicationAddText; + +interface ApplicationUrlTextProps { + selectedCategory: { category: string; id: string }; + selectedCategories: { category: string; id: string }[]; + setSelectedCategories: ( + categories: { category: string; id: string }[] + ) => void; + textData: ApplicationAddText; +} + +const ApplicationUrlText = ({ + selectedCategory, + selectedCategories, + setSelectedCategories, + textData, +}: ApplicationUrlTextProps) => { + const onCategoryChange = (id: string, value: string) => { + const prevCategory = selectedCategory.category; + const prevCategoryData = localStorage.getItem(`${prevCategory} - ${id}`); + const newCategories = [...selectedCategories]; + + localStorage.removeItem(`${prevCategory} - ${id}`); + + newCategories.forEach((category) => { + if (category.id === id) { + category.category = value; + } + }); + + prevCategoryData && + localStorage.setItem(`${value} - ${id}`, prevCategoryData); + + setSelectedCategories(newCategories); + }; + + const onRemoveCategory = ( + id: string, + selectedCategory: { category: string; id: string } + ) => { + const newCategories = selectedCategories.filter( + (category) => category.id !== id + ); + + localStorage.removeItem(`${selectedCategory.category} - ${id}`); + setSelectedCategories(newCategories); + }; + + return ( +
+ + + +
+ ); +}; diff --git a/frontend/components/application/applicationNode/Text.component.tsx b/frontend/components/application/applicationNode/Text.component.tsx index dbbf9dd2..57737d52 100644 --- a/frontend/components/application/applicationNode/Text.component.tsx +++ b/frontend/components/application/applicationNode/Text.component.tsx @@ -22,7 +22,7 @@ const ApplicationText = ({ data }: ApplicationTextProps) => { const [isError, setIsError] = useState(false); return ( -
+
{textData.title && (