리코일 - 레이아웃 모달

리코일 - 레이아웃 모달

총 4개의 페이지에 넣으면 끝

atom.tsx
import { atom } from 'recoil';
import { v4 as uuidv4 } from 'uuid';

export const messageBoxToggle = atom({
  key: `messageToggle${uuidv4()}`,
  default: false,
});
export const messageSendToggle = atom({
  key: `messageToggle${uuidv4()}`,
  default: false,
});

export const followingToggleAtom = atom({
  key: `followingToggleAtom${uuidv4()}`,
  default: false,
});

export const followToggleAtom = atom({
  key: `followToggleAtom${uuidv4()}`,
  default: false,
});

export const editAtom = atom({
  key: `editAtom${uuidv4()}`,
  default: {},
});

export const loginModalAtom = atom({
  key: `LoginModalAtom`,
  default: false,
});

export const signUpModalAtom = atom({
  key: `signUpModalAtom`,
  default: false,
});

export const forgotModalAtom = atom({
  key: `forgotModalAtom`,
  default: false,
});
export const postModalAtom = atom({
  key: `postModalAtom`,
  default: false,
});

Layout.tsx

import {
  messageBoxToggle,
  messageSendToggle,
  followingToggleAtom,
  followToggleAtom,
  signUpModalAtom,
  forgotModalAtom,
  loginModalAtom,
  postModalAtom,
} from '@/atom';
import React from 'react';
import { useRecoilState } from 'recoil';
import { CustomModal } from './common/CustomModal';
import AuthForgot from './main/auth/AuthForgot';
import AuthSignUp from './main/auth/AuthSignUp';
import MessageBox from './message/MessageBox';
import MessageSend from './message/MessageSend';
import ModalFollow from './mypage/Profile/ModalFollow';
import ModalFollowing from './mypage/Profile/ModalFollowing';
import Auth from './main/auth/Auth';
import PostForm from './main/PostForm';
function Layout() {
  const [msgBoxToggle, setMsgBoxToggle] = useRecoilState(messageBoxToggle);
  const [msgSendToggle, setMsgSendToggle] = useRecoilState(messageSendToggle);
  const [followingToggle, setfollowingToggle] =
    useRecoilState(followingToggleAtom);
  const [followToggle, setFollowToggle] = useRecoilState(followToggleAtom);
  const [signUpModal, setSignUpModal] = useRecoilState(signUpModalAtom);
  const [forgotModal, setForgotModal] = useRecoilState(forgotModalAtom);
  const [closeLoginModal, setCloseLoginModal] = useRecoilState(loginModalAtom);
  const [postMapModal, setIsPostMapModal] = useRecoilState(postModalAtom);

  return (
    <div>
      <div>
        {msgBoxToggle ? (
          <CustomModal
            modal={msgBoxToggle}
            setModal={setMsgBoxToggle}
            width={'500'}
            height={'500'}
            element={<MessageBox />}
          />
        ) : null}
      </div>
      <div>
        {msgSendToggle ? (
          <CustomModal
            modal={msgSendToggle}
            setModal={setMsgSendToggle}
            width={'500'}
            height={'500'}
            element={<MessageSend setModal={setMsgSendToggle} />}
          />
        ) : null}
      </div>
      <div>
        {followingToggle ? (
          <CustomModal
            modal={followingToggle}
            setModal={setfollowingToggle}
            width="524"
            height="695"
            element={<ModalFollowing />}
          />
        ) : null}
      </div>
      <div>
        {followToggle ? (
          <CustomModal
            modal={followToggle}
            setModal={setFollowToggle}
            width="524"
            height="695"
            element={<ModalFollow />}
          />
        ) : null}
      </div>
      <div>
        {signUpModal ? (
          <CustomModal
            modal={signUpModal}
            setModal={setSignUpModal}
            width="524"
            height="695"
            element={<AuthSignUp />}
          />
        ) : (
          ''
        )}
      </div>
      <div>
        {forgotModal ? (
          <CustomModal
            modal={forgotModal}
            setModal={setForgotModal}
            width="524"
            height="695"
            element={<AuthForgot />}
          />
        ) : null}
      </div>
      <>
        {closeLoginModal ? (
          <CustomModal
            modal={closeLoginModal}
            setModal={setCloseLoginModal}
            width="524"
            height="695"
            element={<Auth />}
          />
        ) : (
          ''
        )}
      </>
      <>
        {' '}
        {postMapModal ? (
          <CustomModal
            modal={postMapModal}
            setModal={setIsPostMapModal}
            width="1100"
            height="632"
            element={<PostForm />}
          />
        ) : (
          ''
        )}
      </>
    </div>
  );
}

export default Layout;

index.tsx

import { loginModalAtom, postModalAtom } from '../../atom';
import { useRecoilState } from 'recoil';
const [postMapModal, setIsPostMapModal] = useRecoilState(postModalAtom);

PostForm.tsx
import { useRecoilState } from 'recoil';
import { postModalAtom } from '@/atom';
const [postMapModal, setIsPostMapModal] = useRecoilState(postModalAtom);

 uploadString(imageRef, imageUpload, 'data_url').then((response) => {
      getDownloadURL(response.ref).then((url) => {
        const response = url;
        postState = {
          ...postState,
          imgUrl: response,
        };
        onAddData(postState, {
          onSuccess: () => {
            queryClient.invalidateQueries('infiniteData');
            setIsPostMapModal(false); // 여기서 사용
          },
        });
      });
    });