Merge pull request #127 from KUIT-Space/feat#99-chat-file

Feat: 개발 중인 곳 안내 modal 추가

src/App.tsx

@@ -40,13 +40,13 @@ import { theme } from "@/styles/Theme";
 
 import BoardDetailPage from "./pages/BoardPage/BoardDetailpage/BoardDetailPage";
 import BoardRegisterPage from "./pages/BoardPage/BoardRegisterPage/BoardRegisterPage";
+import HomePageMemberPage from "./pages/HomePage/HomePageMember";
+import HomePageProfile from "./pages/HomePage/HomePageProfile";
 import KakaoRedirection from "./pages/LoginPage/KakaoRedirection";
 import LoginModal from "./pages/LoginPage/LoginModal";
 import InviteSpace from "./pages/SpacePage/InviteSpace";
-import HomePageMemberPage from "./pages/HomePage/HomePageMember";
-import HomePageProfile from "./pages/HomePage/HomePageProfile";
-import SpecialVoiceRoom from "./pages/VoiceRoomPage/SpecialVoiceRoom";
 import InviteSpace2 from "./pages/SpacePage/InviteSpace2";
+import SpecialVoiceRoom from "./pages/VoiceRoomPage/SpecialVoiceRoom";
 
 // will we need constant path in later..?
 // const PATH = {

src/pages/HomePage/HomePage.tsx

@@ -97,11 +97,22 @@ const HomePage = () => {
         >
           <img src={logoSpace} alt="로고" />
         </button>
+        <span>{homeData?.spaceName}</span>
         <sty.SettingButtonsWrapper>
-          <button>
+          <button
+            onClick={() => {
+              //TODO: 임시로 스페이스 선택으로 고
+              navigate("/space");
+            }}
+          >
             <img src={alarm} alt="알림" />
           </button>
-          <button>
+          <button
+            onClick={() => {
+              //TODO: 임시로 스페이스 선택으로 고
+              navigate("/space");
+            }}
+          >
             <img src={setting} alt="설정" />
           </button>
         </sty.SettingButtonsWrapper>
@@ -125,9 +136,9 @@ const HomePage = () => {
         </div>
       </sty.MainBanner>
 
-      <BottomBtn style={{ position: "relative" }}>
+      {/* <BottomBtn style={{ position: "relative" }}>
         <Link to="/login">로그인</Link>
-      </BottomBtn>
+      </BottomBtn> */}
 
       <sty.NoticeContainer>
         <sty.Settlement>

src/pages/SpacePage/AccountManage.tsx

@@ -1,7 +1,10 @@
-import TopBarText, { LeftEnum } from "@/components/TopBarText";
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
 import styled from "styled-components";
+
 import right_arrow from "@/assets/Space/icon_right_arrow.svg";
-import { To, useNavigate } from "react-router-dom";
+import TopBarText, { LeftEnum } from "@/components/TopBarText";
+import NotDevelopModal from "@/utils/NotDevelopModal";
 
 const Name = styled.div`
   display: flex;
@@ -26,28 +29,26 @@ const Password = styled.div`
 
 const AccountManage = () => {
   const navigate = useNavigate();
-
-  const handleNavigate = (path: To) => {
-    navigate(path);
-  };
+  const [isOpen, setIsOpen] = useState(false);
 
   return (
     <div>
       <TopBarText left={LeftEnum.Back} center="계정 정보" right="" />
-      <div style={{ margin: "0rem 1.25rem 0rem 1.25rem" }}>
-        <Name onClick={() => handleNavigate("/")}>
+      <div style={{ margin: "0rem 1.25rem 0rem 1.25rem", cursor: "pointer" }}>
+        <Name onClick={() => setIsOpen(true)}>
           이름 변경
           <img style={{ display: "absolute", right: "0" }} src={right_arrow} alt="right_arrow" />
         </Name>
-        <Id onClick={() => handleNavigate("/")}>
+        <Id onClick={() => setIsOpen(true)}>
           아이디 변경
           <img style={{ display: "absolute", right: "0" }} src={right_arrow} alt="right_arrow" />
         </Id>
-        <Password onClick={() => handleNavigate("/")}>
+        <Password onClick={() => setIsOpen(true)}>
           비밀번호 변경
           <img style={{ display: "absolute", right: "0" }} src={right_arrow} alt="right_arrow" />
         </Password>
       </div>
+      <NotDevelopModal isModalOpen={isOpen} setIsModalOpen={setIsOpen} />
     </div>
   );
 };

src/pages/SpacePage/SpaceOption.tsx

@@ -1,10 +1,12 @@
-import TopBarText, { LeftEnum } from "@/components/TopBarText";
-import { To, useNavigate } from "react-router-dom";
 import { useState } from "react";
-import right_arrow from "@/assets/Space/icon_right_arrow.svg";
+import { To, useNavigate } from "react-router-dom";
 import styled from "styled-components";
+
+import right_arrow from "@/assets/Space/icon_right_arrow.svg";
 import StopModal from "@/components/StopModal";
 import * as S from "@/components/StopModal.styled";
+import TopBarText, { LeftEnum } from "@/components/TopBarText";
+import NotDevelopModal from "@/utils/NotDevelopModal";
 
 const Account = styled.div`
   display: flex;
@@ -51,6 +53,7 @@ const SpaceOption = () => {
 
   const [isLogoutModalOpen, setIsLogoutModalOpen] = useState(false);
   const [isWithdrawModalOpen, setIsWithdrawModalOpen] = useState(false);
+  const [isNotDevModal, setIsNotDevModal] = useState(false);
 
   const handleOpenLogoutModal = () => {
     setIsLogoutModalOpen(true);
@@ -82,12 +85,12 @@ const SpaceOption = () => {
   return (
     <div>
       <TopBarText left={LeftEnum.Back} center="전체 설정" right="" />
-      <div style={{ margin: "0rem 1.25rem 0rem 1.25rem" }}>
+      <div style={{ margin: "0rem 1.25rem 0rem 1.25rem", cursor: "pointer" }}>
         <Account onClick={() => handleNavigate("/space/spaceoption/accountmanage")}>
           계정 정보
           <img style={{ display: "absolute", right: "0" }} src={right_arrow} alt="right_arrow" />
         </Account>
-        <Profile onClick={() => handleNavigate("/space/spaceoption/profilemanage")}>
+        <Profile onClick={() => setIsNotDevModal(true)}>
           프로필 관리
           <img style={{ display: "absolute", right: "0" }} src={right_arrow} alt="right_arrow" />
         </Profile>
@@ -121,6 +124,7 @@ const SpaceOption = () => {
           confirmButtonText="탈퇴하기"
           confirmButtonTextColor="#FFFFFF"
         />
+        <NotDevelopModal isModalOpen={isNotDevModal} setIsModalOpen={setIsNotDevModal} />
       </div>
     </div>
   );

src/pages/SpacePage/SpacePage.tsx

@@ -41,6 +41,9 @@ const GridItem = styled.div`
   .space-image {
     width: 100%;
     height: 100%;
+    border-radius: 0.75rem;
+    max-width: 13.75rem;
+    max-height: 13.75rem;
   }
 
   .spaceId {

src/utils/NotDevelopModal.tsx

@@ -7,8 +7,14 @@ interface ModalType {
   content?: string[];
 }
 
-export const NotDevelopModal = ({ title, content }: ModalType) => {
-  const [isModalOpen, setIsModalOpen] = useState(false);
+export const NotDevelopModal = ({
+  isModalOpen,
+  setIsModalOpen,
+}: {
+  isModalOpen: boolean;
+  setIsModalOpen: React.Dispatch<React.SetStateAction<boolean>>;
+}) => {
+  //const [isModalOpen, setIsModalOpen] = useState(false);
 
   return (
     <StopModal