diff --git a/src/components/common/AlertModal.tsx b/src/components/common/AlertModal.tsx new file mode 100644 index 0000000..8ffaa89 --- /dev/null +++ b/src/components/common/AlertModal.tsx @@ -0,0 +1,36 @@ +import { FC, ReactNode } from "react"; +import { IoMdClose } from "react-icons/io"; + +interface Iprops { + title: string; + children: ReactNode; + onClose: () => void; +} + +const AlertModal: FC = ({ title, children, onClose }) => { + return ( + <> +
onClose()} + >
+
+
+

{title}

+
+ onClose()} + /> +
+
+
+ {children} +
+
+ + ); +}; + +export default AlertModal; diff --git a/src/components/index.ts b/src/components/index.ts index f63f7b8..b909921 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -4,6 +4,7 @@ export { default as Topbar } from "./common/Topbar"; export { default as SelectModal } from "./common/SelectModal"; export { default as ConfirmCard } from "./common/ConfirmCard"; export { default as AlarmCard } from "./common/AlarmCard"; +export { default as AlertModal } from "./common/AlertModal"; export { default as CategoryItem } from "./team/CategoryItem"; export { default as TeamItem } from "./team/TeamItem"; export { default as SurveyCard } from "./team/SurveyCard"; diff --git a/src/components/team/DueHistoryItem.tsx b/src/components/team/DueHistoryItem.tsx index 32aa47d..f24ca12 100644 --- a/src/components/team/DueHistoryItem.tsx +++ b/src/components/team/DueHistoryItem.tsx @@ -23,13 +23,13 @@ const DueHistoryItem: FC = ({
- {isDeposit && ( + {/* {isDeposit && ( profile - )} + )} */}

void; @@ -20,6 +21,7 @@ const MemberItem: FC = ({ nickname, gender, role, + profile, changeBtn, isChair, setChangeBtn = () => {}, @@ -35,11 +37,7 @@ const MemberItem: FC = ({ } `} >

- profile + profile

{nickname}

{gender === "M" ? ( diff --git a/src/pages/main/Home.tsx b/src/pages/main/Home.tsx index 7e334dc..5c39ed8 100644 --- a/src/pages/main/Home.tsx +++ b/src/pages/main/Home.tsx @@ -1,6 +1,6 @@ import { HiMagnifyingGlass } from "react-icons/hi2"; import { PiMegaphone } from "react-icons/pi"; -import { CategoryCard, TeamItem } from "../../components"; +import { AlertModal, CategoryCard, TeamItem } from "../../components"; import { GoPlus } from "react-icons/go"; import { useNavigate } from "react-router-dom"; import categories from "../../utils/categories"; @@ -49,6 +49,7 @@ const Home = () => { const [startPosition, setStartPosition] = useState(0); const [currentTranslate, setCurrentTranslate] = useState(0); const [prevTranslate, setPrevTranslate] = useState(0); + const [openModal, setOpenModal] = useState(false); const sliderRef = useRef(null); const slideItems = [ "/img/banner1.png", @@ -68,6 +69,16 @@ const Home = () => { return () => window.removeEventListener("resize", handleResize); }, []); + const onClickModal = () => { + setOpenModal(true); + document.body.classList.add("overflow-hidden"); + }; + + const onCloseModal = () => { + setOpenModal(false); + document.body.classList.remove("overflow-hidden"); + }; + const handleMouseDown = (event: React.MouseEvent) => { setIsDragging(true); setStartPosition(event.clientX); @@ -120,6 +131,40 @@ const Home = () => { return (
+ {openModal && ( + onCloseModal()} + > +
+
+ image +

하나체인 Level


+
+

+ 🔹브론즈- + 실버- + 골드- + 다이아- + VIP +

+
+
+ image +

모일 개설 횟수 제한


+
+

🔹모임 개설은 한달에 한 번 가능

+

🔹총무 변경시 즉시 개설 가능❗

+
+
+ image +

모일 큐알 결제 혜택


+
+

🔹모임 큐알코드로 결제 후 이벤트 인증시

+

🔹다양한 혜택이 뿜뿜뿜!!!🎁

+
+
+ )}
{/* 카드 영역 */}
@@ -139,7 +184,11 @@ const Home = () => { className="cursor-pointer" onClick={() => navigate("/search")} /> - + onClickModal()} + />
{/* 캐러셀 구역 */} diff --git a/src/pages/team/ChatRoom.tsx b/src/pages/team/ChatRoom.tsx index 5718d51..1c558eb 100644 --- a/src/pages/team/ChatRoom.tsx +++ b/src/pages/team/ChatRoom.tsx @@ -159,8 +159,11 @@ const ChatRoom = () => { member={locationState.memberCnt} teamId={locationState.teamId} /> -
-
+
+
{oldMsg?.map((item, index) => ( { nickname={item.nickName} gender={item.gender} role="총무" + profile={item.profile} changeBtn={changeBtn} setChangeBtn={setChangeBtn} isChair={locationState.role === "CHAIR"} @@ -167,6 +168,7 @@ const Members = () => { nickname={item.nickName} gender={item.gender} role="가입요청" + profile={item.profile} onDeny={onDeny} onAccept={acceptMember} /> @@ -187,6 +189,7 @@ const Members = () => { nickname={item.nickName} gender={item.gender} role="모임원" + profile={item.profile} changeBtn={changeBtn} changeChair={changeChair} onReject={onReject} diff --git a/src/pages/team/Team.tsx b/src/pages/team/Team.tsx index 16c1db9..b146230 100644 --- a/src/pages/team/Team.tsx +++ b/src/pages/team/Team.tsx @@ -98,6 +98,7 @@ const Team = () => { console.log(res); alert("배너가 수정되었습니다."); setAttachment(""); + queryClient.invalidateQueries({ queryKey: ["teamDetail"] }); }, onError: (err) => { console.log(err.message);