Merge pull request #116 from Hanaemong/#115

[refactor] 디자인 수정
Hanaemong · Jul 9, 2024 · a8b3d92 · a8b3d92
2 parents c9c39cb + 187749a
commit a8b3d92
Show file tree

Hide file tree

Showing 8 changed files with 102 additions and 11 deletions.
diff --git a/src/components/common/AlertModal.tsx 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<Iprops> = ({ title, children, onClose }) => {
+  return (
+    <>
+      <div
+        className="absolute flex flex-col left-0 top-0 justify-center items-center w-full h-full bg-black bg-opacity-50 z-50"
+        onClick={() => onClose()}
+      ></div>
+      <div className="absolute left-1/2 -translate-x-1/2 translate-y-96 flex flex-col justify-center rounded-2xl gap-4 bg-white z-[60] min-w-[80%] border-4 border-hanaPurple">
+        <div className="w-full flex flex-row justify-center px-4 pt-6">
+          <p className="font-hanaRegular text-3xl pr-4">{title}</p>
+          <div className="absolute right-5">
+            <IoMdClose
+              size={20}
+              className="cursor-pointer"
+              onClick={() => onClose()}
+            />
+          </div>
+        </div>
+        <div className="px-7 pt-7 pb-10 max-h-[40rem] overflow-y-auto">
+          {children}
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default AlertModal;
diff --git 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
@@ -23,13 +23,13 @@ const DueHistoryItem: FC<Iprops> = ({
     <div className="w-full h-32 flex flex-col pt-3 px-10 justify-end">
       <div className="flex flex-row justify-between pr-2">
         <div className="flex flex-row items-center pb-9">
-          {isDeposit && (
+          {/* {isDeposit && (
             <img
               src={gender === "M" ? "/img/별돌이.png" : "/img/별순이.png"}
               alt="profile"
               className="w-12 h-12"
             />
-          )}
+          )} */}
           <p
             className={`text-3xl ml-3 ${
               isDeposit ? "font-hanaRegular" : "font-hanaMedium"

diff --git a/src/components/team/MemberItem.tsx b/src/components/team/MemberItem.tsx
@@ -6,6 +6,7 @@ interface IProps {
   gender: string;
   role: string;
   nickname: string;
+  profile: string;
   changeBtn?: boolean;
   isChair?: boolean;
   setChangeBtn?: (value: boolean) => void;
@@ -20,6 +21,7 @@ const MemberItem: FC<IProps> = ({
   nickname,
   gender,
   role,
+  profile,
   changeBtn,
   isChair,
   setChangeBtn = () => {},
@@ -35,11 +37,7 @@ const MemberItem: FC<IProps> = ({
       } `}
     >
       <div className="flex flex-row items-center">
-        <img
-          src={gender === "M" ? "/img/별돌이.png" : "/img/별순이.png"}
-          alt="profile"
-          className="w-12 h-12"
-        />
+        <img src={profile} alt="profile" className="size-12 rounded-xl" />
         <p className="font-hanaRegular text-3xl ml-4">{nickname}</p>
         {gender === "M" ? (
           <MdMale color="#002CC9" size={18} />

diff --git 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<boolean>(false);
   const sliderRef = useRef<HTMLDivElement>(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 (
     <section className="relative min-h-real-screen bg-hanaGray">
+      {openModal && (
+        <AlertModal
+          title="📮하나링크 공지사항📢"
+          onClose={() => onCloseModal()}
+        >
+          <div className="flex flex-col gap-2 font-hanaRegular">
+            <div className="flex flex-row gap-3 items-center pb-2">
+              <img src="/img/vip.png" alt="image" className="size-7" />
+              <p className="text-3xl">하나체인 Level</p> <br />
+            </div>
+            <p className="text-2xl pb-2">
+              🔹<span className="text-amber-700">브론즈</span>-
+              <span className="text-gray-500">실버</span>-
+              <span className="text-yellow-500">골드</span>-
+              <span className="text-sky-500">다이아</span>-
+              <span className="text-hanaPurple">VIP</span>
+            </p>
+            <br />
+            <div className="flex flex-row gap-3 items-center pb-2">
+              <img src="/img/vip.png" alt="image" className="size-7" />
+              <p className="text-3xl">모일 개설 횟수 제한</p> <br />
+            </div>
+            <p className="text-2xl">🔹모임 개설은 한달에 한 번 가능</p>
+            <p className="text-2xl pb-2">🔹총무 변경시 즉시 개설 가능❗</p>
+            <br />
+            <div className="flex flex-row gap-3 items-center pb-2">
+              <img src="/img/vip.png" alt="image" className="size-7" />
+              <p className="text-3xl">모일 큐알 결제 혜택</p> <br />
+            </div>
+            <p className="text-2xl">🔹모임 큐알코드로 결제 후 이벤트 인증시</p>
+            <p className="text-2xl">🔹다양한 혜택이 뿜뿜뿜!!!🎁</p>
+          </div>
+        </AlertModal>
+      )}
       <div className="flex flex-col gap-4">
         {/* 카드 영역 */}
         <div className="w-full h-96 bg-custom-light-gradient">
@@ -139,7 +184,11 @@ const Home = () => {
                   className="cursor-pointer"
                   onClick={() => navigate("/search")}
                 />
-                <PiMegaphone size={20} />
+                <PiMegaphone
+                  size={20}
+                  className="cursor-pointer"
+                  onClick={() => onClickModal()}
+                />
               </div>
             </div>
             {/* 캐러셀 구역 */}

diff --git a/src/pages/team/ChatRoom.tsx b/src/pages/team/ChatRoom.tsx
@@ -159,8 +159,11 @@ const ChatRoom = () => {
         member={locationState.memberCnt}
         teamId={locationState.teamId}
       />
-      <div className="flex-grow flex flex-col overflow-auto" ref={divRef}>
-        <div className="flex flex-col p-7 gap-7 transition-chats">
+      <div
+        className="flex-grow flex flex-col overflow-auto scrollbar-hide"
+        ref={divRef}
+      >
+        <div className="flex flex-col p-7 gap-7">
           {oldMsg?.map((item, index) => (
             <ChatCard
               key={index}

diff --git a/src/pages/team/Members.tsx b/src/pages/team/Members.tsx
@@ -147,6 +147,7 @@ const Members = () => {
                   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
@@ -98,6 +98,7 @@ const Team = () => {
       console.log(res);
       alert("배너가 수정되었습니다.");
       setAttachment("");
+      queryClient.invalidateQueries({ queryKey: ["teamDetail"] });
     },
     onError: (err) => {
       console.log(err.message);