diff --git a/fe/package-lock.json b/fe/package-lock.json index 7bbb861..ca40bc2 100644 --- a/fe/package-lock.json +++ b/fe/package-lock.json @@ -7308,4 +7308,4 @@ } } } -} \ No newline at end of file +} diff --git a/fe/public/images/MMMM.svg b/fe/public/images/MMMM.svg deleted file mode 100644 index 4a4df08..0000000 --- a/fe/public/images/MMMM.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - diff --git a/fe/public/images/loadinglogo.svg b/fe/public/images/loadinglogo.svg new file mode 100644 index 0000000..1107cc2 --- /dev/null +++ b/fe/public/images/loadinglogo.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/fe/src/app/components/common/Button.tsx b/fe/src/app/components/common/Button.tsx index 656d263..2f89acd 100644 --- a/fe/src/app/components/common/Button.tsx +++ b/fe/src/app/components/common/Button.tsx @@ -1,21 +1,31 @@ "use client"; import React from "react"; -import { ButtonProps } from "@/types/types"; // 타입 import +import { ButtonProps } from "@/types/types"; -// 함수 선언 방식으로 컴포넌트 정의 -function Button({ label, onClick, type = "start", className }: ButtonProps) { - const buttonStyle = - type === "start" - ? "bg-darkGray text-grayscale-0" - : "bg-gray-500 text-grayscale-0"; +function Button({ + label, + onClick, + type = "start", + className, + disabled = false, +}: ButtonProps) { + let buttonStyle = "bg-gray-200 text-gray-500 cursor-not-allowed"; + + if (!disabled) { + buttonStyle = + type === "start" + ? "bg-darkGray text-white" + : "bg-gray-500 text-grayscale-0"; + } return (
diff --git a/fe/src/app/components/common/ExitModal.tsx b/fe/src/app/components/common/ExitModal.tsx new file mode 100644 index 0000000..7149f2b --- /dev/null +++ b/fe/src/app/components/common/ExitModal.tsx @@ -0,0 +1,47 @@ +import React from "react"; + +interface ExitModalProps { + onCancel: () => void; + onExit: () => void; +} + +function ExitModal({ onCancel, onExit }: ExitModalProps) { + return ( +
+
+
+
+ 저장하지 않고 나갈까요? +
+
+ 이대로 나가면 +
작성하던 내용이 사라져요 +
+
+
+ +
+ + + +
+
+ ); +} +export default ExitModal; diff --git a/fe/src/app/components/common/Navigation.tsx b/fe/src/app/components/common/Navigation.tsx index bcae403..b97dacb 100644 --- a/fe/src/app/components/common/Navigation.tsx +++ b/fe/src/app/components/common/Navigation.tsx @@ -16,7 +16,6 @@ function Navigation({ showBackButton = true }: NavigationProps) {
{showBackButton && (
- {/* 왼쪽 간격을 0으로 설정 */}
diff --git a/fe/src/app/load-mappin-edit/components/Form.tsx b/fe/src/app/load-mappin-edit/components/Form.tsx new file mode 100644 index 0000000..0606a99 --- /dev/null +++ b/fe/src/app/load-mappin-edit/components/Form.tsx @@ -0,0 +1,67 @@ +"use client"; + +import React, { useState, useEffect, FormEvent } from "react"; +import LinkField from "./LinkField"; + +interface FormProps { + userName: string; +} + +export default function Form({ userName }: FormProps) { + const [mapLinks, setMapLinks] = useState([""]); + const [storeLinks, setStoreLinks] = useState([""]); + const [isTooltipVisible, setIsTooltipVisible] = useState(true); + const [isFormComplete, setIsFormComplete] = useState(false); // isFormComplete 추가 + + // mapLinks와 storeLinks가 모두 입력되었을 때만 isFormComplete를 true로 설정 + useEffect(() => { + setIsFormComplete( + mapLinks.some((link) => link.trim() !== "") && + storeLinks.some((link) => link.trim() !== "") + ); + }, [mapLinks, storeLinks]); + + const handleSubmit = (e: FormEvent) => { + e.preventDefault(); + const formData = { + userName, + mapLinks, + storeLinks, + }; + console.log("폼 데이터:", formData); + }; + + return ( +
+
+ setIsTooltipVisible(true)} + /> + + + + + +
+ ); +} diff --git a/fe/src/app/load-mappin-edit/components/LinkField.tsx b/fe/src/app/load-mappin-edit/components/LinkField.tsx new file mode 100644 index 0000000..dd71f70 --- /dev/null +++ b/fe/src/app/load-mappin-edit/components/LinkField.tsx @@ -0,0 +1,115 @@ +import React, { useState } from "react"; +import { nanoid } from "nanoid"; +import Image from "next/image"; + +interface LinkFieldProps { + label: string; // label 속성 추가 + placeholder: string; + value: string[]; + onChange: (value: string[]) => void; + showTooltip?: boolean; + onInfoClick?: () => void; +} + +export default function LinkField({ + label, + placeholder, + value, + onChange, + showTooltip = true, + onInfoClick, +}: LinkFieldProps) { + const [inputFields, setInputFields] = useState( + value.map((val) => ({ id: nanoid(), text: val })) + ); + + const handleInputChange = (id: string, inputValue: string) => { + const newInputs = inputFields.map((field) => + field.id === id ? { ...field, text: inputValue } : field + ); + setInputFields(newInputs); + onChange(newInputs.map((field) => field.text)); + }; + + const clearInput = (id: string) => { + const newInputs = inputFields.map((field) => + field.id === id ? { ...field, text: "" } : field + ); + setInputFields(newInputs); + onChange(newInputs.map((field) => field.text)); + }; + + const addInputField = () => { + const newField = { id: nanoid(), text: "" }; + const updatedInputs = [...inputFields, newField]; + setInputFields(updatedInputs); + onChange(updatedInputs.map((field) => field.text)); + }; + + return ( +
+