From 3aef997f6767181903d0fc52153de9e8b5c12227 Mon Sep 17 00:00:00 2001
From: Jihwan Kim <kjhwan0802@naver.com>
Date: Tue, 20 Aug 2024 14:23:50 +0900
Subject: [PATCH 1/2] style: home stype, space option, space page changed

---
 src/App.tsx                         |  6 +++---
 src/pages/HomePage/HomePage.tsx     | 19 +++++++++++++++----
 src/pages/SpacePage/SpaceOption.tsx | 18 +++++++++++++-----
 src/pages/SpacePage/SpacePage.tsx   |  3 +++
 src/utils/NotDevelopModal.tsx       |  2 +-
 5 files changed, 35 insertions(+), 13 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 9af1ced..fd5a3f4 100644
--- a/src/App.tsx
+++ b/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 = {
diff --git a/src/pages/HomePage/HomePage.tsx b/src/pages/HomePage/HomePage.tsx
index 673f4d2..9985725 100644
--- a/src/pages/HomePage/HomePage.tsx
+++ b/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>
diff --git a/src/pages/SpacePage/SpaceOption.tsx b/src/pages/SpacePage/SpaceOption.tsx
index 422ad3d..c233c20 100644
--- a/src/pages/SpacePage/SpaceOption.tsx
+++ b/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;
@@ -82,12 +84,18 @@ 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={() => {
+            // NotDevelopModal();
+            //TODO: 개발
+            //handleNavigate("/space/spaceoption/profilemanage");
+          }}
+        >
           프로필 관리
           <img style={{ display: "absolute", right: "0" }} src={right_arrow} alt="right_arrow" />
         </Profile>
diff --git a/src/pages/SpacePage/SpacePage.tsx b/src/pages/SpacePage/SpacePage.tsx
index bc45426..f3b983d 100644
--- a/src/pages/SpacePage/SpacePage.tsx
+++ b/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 {
diff --git a/src/utils/NotDevelopModal.tsx b/src/utils/NotDevelopModal.tsx
index 28c3148..6a23895 100644
--- a/src/utils/NotDevelopModal.tsx
+++ b/src/utils/NotDevelopModal.tsx
@@ -7,7 +7,7 @@ interface ModalType {
   content?: string[];
 }
 
-export const NotDevelopModal = ({ title, content }: ModalType) => {
+export const NotDevelopModal = () => {
   const [isModalOpen, setIsModalOpen] = useState(false);
 
   return (

From 513a42597f8e6693eb2c94a59972c21d3cdc35d4 Mon Sep 17 00:00:00 2001
From: Jihwan Kim <kjhwan0802@naver.com>
Date: Tue, 20 Aug 2024 14:32:26 +0900
Subject: [PATCH 2/2] =?UTF-8?q?style:=20=EA=B0=9C=EB=B0=9C=20=EC=A4=91=20?=
 =?UTF-8?q?=EB=AA=A8=EB=8B=AC=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/SpacePage/AccountManage.tsx | 21 +++++++++++----------
 src/pages/SpacePage/SpaceOption.tsx   | 10 +++-------
 src/utils/NotDevelopModal.tsx         | 10 ++++++++--
 3 files changed, 22 insertions(+), 19 deletions(-)

diff --git a/src/pages/SpacePage/AccountManage.tsx b/src/pages/SpacePage/AccountManage.tsx
index 62ad74a..1f237eb 100644
--- a/src/pages/SpacePage/AccountManage.tsx
+++ b/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>
   );
 };
diff --git a/src/pages/SpacePage/SpaceOption.tsx b/src/pages/SpacePage/SpaceOption.tsx
index c233c20..767b234 100644
--- a/src/pages/SpacePage/SpaceOption.tsx
+++ b/src/pages/SpacePage/SpaceOption.tsx
@@ -53,6 +53,7 @@ const SpaceOption = () => {
 
   const [isLogoutModalOpen, setIsLogoutModalOpen] = useState(false);
   const [isWithdrawModalOpen, setIsWithdrawModalOpen] = useState(false);
+  const [isNotDevModal, setIsNotDevModal] = useState(false);
 
   const handleOpenLogoutModal = () => {
     setIsLogoutModalOpen(true);
@@ -89,13 +90,7 @@ const SpaceOption = () => {
           계정 정보
           <img style={{ display: "absolute", right: "0" }} src={right_arrow} alt="right_arrow" />
         </Account>
-        <Profile
-          onClick={() => {
-            // NotDevelopModal();
-            //TODO: 개발
-            //handleNavigate("/space/spaceoption/profilemanage");
-          }}
-        >
+        <Profile onClick={() => setIsNotDevModal(true)}>
           프로필 관리
           <img style={{ display: "absolute", right: "0" }} src={right_arrow} alt="right_arrow" />
         </Profile>
@@ -129,6 +124,7 @@ const SpaceOption = () => {
           confirmButtonText="탈퇴하기"
           confirmButtonTextColor="#FFFFFF"
         />
+        <NotDevelopModal isModalOpen={isNotDevModal} setIsModalOpen={setIsNotDevModal} />
       </div>
     </div>
   );
diff --git a/src/utils/NotDevelopModal.tsx b/src/utils/NotDevelopModal.tsx
index 6a23895..3090551 100644
--- a/src/utils/NotDevelopModal.tsx
+++ b/src/utils/NotDevelopModal.tsx
@@ -7,8 +7,14 @@ interface ModalType {
   content?: string[];
 }
 
-export const NotDevelopModal = () => {
-  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