Merge pull request #104 from space-401/feat/layout

[FE] 모달, 레이아웃 추가

client/.env.sample

@@ -2,4 +2,5 @@ BASE_URL="백엔드에서 지정한 URL"
 VITE_KAKAO_KEY="카카오 자바스크립트 고유키"
 VITE_KAKAO_REST_API="카카오 로그인 REST API 키"
 VITE_NAVER_CLIENT_ID="네이버 로그인 REST API 키"
+VITE_NAVER_CLIENT_KEY="네이버 로그인 고유키"
 VITE_GOOGLE_CLIENT_ID="구글 로그인 REST API 키"

client/src/apis/post/getPostDetail.ts

@@ -6,6 +6,5 @@ export const getPostDetail = async (postId: number) => {
   const { data } = await axiosInstance.get<PostDetailType>(
     END_POINTS.POST + `/${postId}`
   );
-  console.log('postDetail 호출');
   return data;
 };

client/src/components/Create/CreateSelectBox/index.tsx

@@ -6,7 +6,6 @@ import S from './style';
 import { MenuToggle } from './components/Toggle';
 import MenuList from './components/MenuList';
 import SelectList from './components/component/SelectList';
-import AlertModal from '@/modal/Alert/AlertModal';
 import { useAlertModalStore } from '@/store/modal';
 
 const CreateSelectBox = (props: SelectBoxProps) => {
@@ -38,12 +37,6 @@ const CreateSelectBox = (props: SelectBoxProps) => {
   const [isOpen, setIsOpen] = useState<boolean>(false);
   const [searchValue, setSearchValue] = useState('');
 
-  const {
-    isOpen: isAlertModalOpen,
-    ModalClose: AlertModalClose,
-    ModalOpen: AlertModalOpen,
-  } = useAlertModalStore();
-
   useEffect(() => {
     setState(select);
   }, [select]);
@@ -55,7 +48,12 @@ const CreateSelectBox = (props: SelectBoxProps) => {
 
   const EnterCheck = (e: KeyboardEvent<HTMLInputElement>) => {
     if (e.code === 'Enter') {
-      if (searchValue.trim().length === 0) return AlertModalOpen();
+      if (searchValue.trim().length === 0)
+        return ModalOpen({
+          width: 300,
+          alertMessage: '확인',
+          alertTitle: '아무것도 입력하지 않았습니다.',
+        });
 
       if (
         select.filter((prevState) => prevState.title === searchValue).length !==
@@ -75,19 +73,12 @@ const CreateSelectBox = (props: SelectBoxProps) => {
       ? '함께한 친구들을 추가해 주세요'
       : '태그를 지정해 주세요';
 
+  const { ModalOpen } = useAlertModalStore((state) => state);
+
   const containerRef = useRef(null);
   const { height } = useDimensions(containerRef);
   return (
     <S.Wrapper isOpen={isOpen} minWidth={Math.max(150, BoxWidth)}>
-      {isAlertModalOpen && (
-        <AlertModal
-          ModalClose={AlertModalClose}
-          isOpen={isAlertModalOpen}
-          width={300}
-          alertMessage="확인"
-          alertTitle="아무것도 입력하지 않았습니다."
-        />
-      )}
       <S.LabelTitle>
         {!isOpen ? (
           select.map((prev) => prev.title).join(', ') || (

client/src/components/Create/SearchMapModal/component/MapBox.tsx

@@ -47,8 +47,6 @@ const MapBox = (props: MapBoxProps) => {
     });
   }, [map, keyword, setData, setPagination]);
 
-  console.log(center);
-
   return (
     <Map
       isPanto={center.isPanto}

client/src/components/Main/Comments/index.tsx

@@ -37,8 +37,6 @@ const DetailComments = (props: DetailCommentType) => {
     setIsReply({ open: true, refId: refId, id: id });
   };
 
-  console.log(commentList);
-
   return (
     <>
       <S.Wrapper isOpen={isOpen}>

client/src/components/Main/PostMap/components/LeftSection.tsx

@@ -38,7 +38,7 @@ const LeftSection = (props: LeftSectionPropType) => {
           usersList,
           postUpdatedAt,
           placeTag,
-          mainImgUrl,
+          imgUrl,
         } = item;
         return (
           <OnePostMapCard
@@ -47,7 +47,7 @@ const LeftSection = (props: LeftSectionPropType) => {
             postDescription={getFormatUser(usersList)}
             postPlace={placeTitle}
             postTags={placeTag}
-            imgUrl={mainImgUrl}
+            imgUrl={imgUrl[0]}
             createAt={postUpdatedAt}
             onClick={() => {
               setIsSelect(postId);

client/src/components/Main/PostMap/index.tsx

@@ -22,7 +22,7 @@ const Index = (props: SpacePostListProps) => {
     isPanto: false,
   });
 
-  const { DetailModalOpen } = useDetailModalOpen();
+  const DetailModalOpen = useDetailModalOpen();
 
   return (
     <S.Wrapper>

client/src/components/Main/Setting/SettingComponent.tsx

@@ -4,8 +4,8 @@ import { Box, Modal } from '@mui/material';
 import S from '@components/Main/Setting/style';
 import { ReactComponent as DeleteIcon } from '@assets/svg/deleteIcon.svg';
 import UserList from '@components/Main/Setting/components/UserList';
-import ConfirmModal from '@modal/Confirm/ConfirmModal';
-import SelfErrorModal from '@modal/Alert/AlertModal';
+import Index from '@modal/Confirm';
+import SelfErrorModal from '@modal/Alert';
 import { ReactComponent as LogoutSvg } from '@assets/svg/mainSetting/logout.svg';
 import { theme } from '@styles/theme/theme';
 import { toastColorMessage } from '@utils/toastMessage';
@@ -103,7 +103,7 @@ const SettingComponent = React.forwardRef(
             open={state.isSelfOutModal}
             onClose={() => ChangeSelfOutModal(false)}
           >
-            <ConfirmModal
+            <Index
               isPositiveModal={false}
               titleMessage={
                 "'" + spaceTitle + "'" + '스페이스에서 나가시겠습니까?'

client/src/components/Main/Setting/components/UserList.tsx

@@ -10,7 +10,7 @@ import { useState } from 'react';
 import { Modal } from '@mui/material';
 import ProfileAndUserNameChangeModal from '@components/Main/Setting/components/ProfileAndUserNameChangeModal';
 import toast from 'react-hot-toast';
-import ConfirmModal from '@modal/Confirm/ConfirmModal';
+import Index from '@modal/Confirm';
 
 type UserListPropsType = {
   userInfo: UserType;
@@ -71,7 +71,7 @@ const UserList = (props: UserListPropsType) => {
         open={state.isMemberOutModal}
         onClose={() => ChangeMemberModal(false)}
       >
-        <ConfirmModal
+        <Index
           isPositiveModal={false}
           titleMessage={userName + '님을 스페이스에서 내보내시겠습니까?'}
           descriptionMessage={'작성된 게시글과 댓글들이 모두 삭제됩니다.'}
@@ -86,7 +86,7 @@ const UserList = (props: UserListPropsType) => {
         open={state.isChangeAdminModal}
         onClose={() => ChangeAdminModal(false)}
       >
-        <ConfirmModal
+        <Index
           isPositiveModal={true}
           titleMessage={userName + ' 님에게 방장 권한을 주시겠습니까?'}
           descriptionMessage={`방장 권한을 주면 ${myInfo.userName}님은 \n스페이스 관리 및 인원 관리를 할 수 없게됩니다.`}

client/src/components/common/Calender/Calender.tsx

@@ -34,7 +34,6 @@ const Calender = ({
   );
 
   useEffect(() => {
-    console.log('dateInfoaaaa', dateInfo);
     dateInfo?.startDate && setStartDate(new Date(dateInfo.startDate));
     dateInfo?.endDate && setEndDate(new Date(dateInfo.endDate));
     console.log();
@@ -60,18 +59,17 @@ const Calender = ({
 
   //날짜 형식 변환해서 보내줌
   useEffect(() => {
-    console.log('dateInfo', startDate);
     if (startDate) {
       let newDateStr: DateInfoType;
       if (endDate) {
         newDateStr = {
-          startDate: postTimeChangeHelper(startDate) || '',
-          endDate: postTimeChangeHelper(endDate) || '',
+          startDate: postTimeChangeHelper(startDate) ?? '',
+          endDate: postTimeChangeHelper(endDate) ?? '',
         };
       } else {
         newDateStr = {
-          startDate: postTimeChangeHelper(startDate) || '',
-          endDate: postTimeChangeHelper(startDate) || '',
+          startDate: postTimeChangeHelper(startDate) ?? '',
+          endDate: postTimeChangeHelper(startDate) ?? '',
         };
       }
       setDateInfo(newDateStr);

client/src/hooks/common/useAlertModalOpen.ts

@@ -0,0 +1,18 @@
+import { useAlertModalStore } from '@store/modal';
+import { AlertPropType } from '@type/modal.type';
+
+export const useAlertModalOpen = () => {
+  const { ModalOpen, setAlertInfo } = useAlertModalStore((state) => state);
+
+  const alertModalOpen = (props: AlertPropType) => {
+    const { alertMessage, alertTitle, width } = props;
+    setAlertInfo({
+      alertMessage,
+      alertTitle,
+      width,
+    });
+    ModalOpen();
+  };
+
+  return alertModalOpen;
+};

client/src/hooks/common/useConfirmModalOpen.ts

@@ -0,0 +1,28 @@
+import { useConfirmModalStore } from '@store/modal';
+import { ConfirmPropType } from '@type/modal.type';
+
+export const useConfirmModalOpen = () => {
+  const { ModalOpen, setConfirmInfo } = useConfirmModalStore((state) => state);
+
+  const confirmModalOpen = (props: ConfirmPropType) => {
+    const {
+      isPositiveModal,
+      closeMessage,
+      ApproveMessage,
+      descriptionMessage,
+      titleMessage,
+      AsyncAction,
+    } = props;
+    setConfirmInfo({
+      isPositiveModal,
+      closeMessage,
+      ApproveMessage,
+      descriptionMessage,
+      titleMessage,
+      AsyncAction,
+    });
+    ModalOpen();
+  };
+
+  return confirmModalOpen;
+};

client/src/hooks/common/useDetailModalOpen.ts

@@ -1,12 +1,12 @@
 import { useDetailModalStore } from '@store/modal';
 
 export const useDetailModalOpen = () => {
-  const { setPostId, ModalOpen } = useDetailModalStore((state) => state);
+  const { ModalOpen, setPostId } = useDetailModalStore((state) => state);
 
   const DetailModalOpen = (postId: number) => {
     setPostId(postId);
     ModalOpen();
   };
 
-  return { DetailModalOpen };
+  return DetailModalOpen;
 };

client/src/layout/HeaderLayout/HeaderLayout.tsx

@@ -1,29 +1,66 @@
 import Header from './Header';
 import S from './style';
 import { Outlet } from 'react-router-dom';
-import { Modal as DetailModal } from '@mui/material';
-import { useDetailModalStore } from '@store/modal';
+import {
+  Modal as DetailModal,
+  Modal as AlertModal,
+  Modal as ConfirmModal,
+} from '@mui/material';
+import {
+  useAlertModalStore,
+  useConfirmModalStore,
+  useDetailModalStore,
+} from '@store/modal';
 import DetailInner from '@modal/Detail';
+import ConfirmInner from '@modal/Confirm';
+import AlertInner from '@modal/Alert';
 import { Suspense } from 'react';
 import { Toaster } from 'react-hot-toast';
 
 const HeaderLayout = () => {
-  const { ModalClose, isOpen } = useDetailModalStore((state) => state);
+  const { ModalClose: DetailModalClose, isOpen: DetailIsOpen } =
+    useDetailModalStore((state) => state);
+  const { ModalClose: ConfirmModalClose, isOpen: ConfirmIsOpen } =
+    useConfirmModalStore((state) => state);
+  const { ModalClose: AlertModalClose, isOpen: AlertIsOpen } =
+    useAlertModalStore((state) => state);
+
   return (
     <>
       <Toaster position={'top-center'} />
       <S.Wrapper>
-        <DetailModal disableScrollLock open={isOpen} onClose={ModalClose}>
+        <AlertModal
+          sx={{ zIndex: 1000 }}
+          onClose={AlertModalClose}
+          open={AlertIsOpen}
+        >
+          <AlertInner />
+        </AlertModal>
+        <ConfirmModal
+          sx={{ zIndex: 1000 }}
+          onClose={ConfirmModalClose}
+          open={ConfirmIsOpen}
+        >
+          <ConfirmInner />
+        </ConfirmModal>
+        <DetailModal
+          sx={{ zIndex: 999 }}
+          disableScrollLock
+          open={DetailIsOpen}
+          onClose={DetailModalClose}
+        >
           <Suspense fallback={<></>}>
-            <DetailInner onClose={ModalClose} />
+            <DetailInner />
           </Suspense>
         </DetailModal>
-        <Suspense fallback={<></>}>
-          <Header />
-        </Suspense>
-        <S.ContentWrapper>
-          <Outlet />
-        </S.ContentWrapper>
+        <S.ContentLayOut>
+          <Suspense fallback={<></>}>
+            <Header />
+          </Suspense>
+          <S.ContentWrapper>
+            <Outlet />
+          </S.ContentWrapper>
+        </S.ContentLayOut>
       </S.Wrapper>
     </>
   );

client/src/layout/HeaderLayout/style.ts

@@ -3,7 +3,7 @@ import { flexCenter } from '@/styles/common';
 
 const Wrapper = styled.div`
   display: flex;
-  flex-direction: column;
+  justify-content: center;
   background-color: ${({ theme }) => theme.COLOR['gray-7']};
   min-height: 100vh;
 `;
@@ -70,6 +70,12 @@ const SpaceIcon = styled.div<{ img_url: string; isCurrentSpace: boolean }>`
     isCurrentSpace && ' 0px 0px 10px 2px #c2c2c2'};
 `;
 
+const ContentLayOut = styled.div`
+  width: 1200px;
+  display: flex;
+  flex-direction: column;
+`;
+
 const S = {
   SpaceIcon,
   SpaceIconBox,
@@ -79,6 +85,7 @@ const S = {
   SpaceBox,
   ContentWrapper,
   Container,
+  ContentLayOut,
 };
 
 export default S;

client/src/mocks/data/post.mock.ts

@@ -1,6 +1,5 @@
-import { PostDetailType } from '@type/post.type';
 import { tagList, userList } from '@mocks/data/common';
-import { PostResponseType } from '@type/post.type';
+import { PostResponseType, PostDetailType } from '@type/post.type';
 import { SpacePostType } from '@/types/space.type';
 
 /**
@@ -316,6 +315,7 @@ export const postList: SpacePostType[] = [
  * 포스트 게시물의 상세 목 데이터
  */
 export const postDetail: PostDetailType = {
+  tagList: tagList,
   isMine: true,
   postId: 1,
   position: {