항해 99 - 2022.02.19.SAT (모달)

이번 챕터 일정

• 02/18 (금) 19:00 까지 : 클론 코딩 주차 S.A. 제출 ✅
• 02/21 (월) 저녁 : 클론 코딩 주차 중간 멘토링
• 02/22 (화) ~ 02/23 (수): 담당 매니저와 1:1 선택 면담
• 02/23 (수) 10:00 ~ 21:00 : 리더/부리더 신청 & 다면평가 진행
• 02/24 (목) 10:00 ~ 21:00 : 알고리즘 스터디 신청
• 02/24 (목) 오후 : 리더/부리더 선별 면담
• 02/24 (목) 19:00 까지 : 클론 코딩 완성본 제출
• 02/24 (목) 저녁 : 클론 코딩 주차 회고 멘토링
• 02/25 (금) 09:00 : 실전 프로젝트 주차 발제

오늘 내가 할 일 

• 모달 뷰작업 ✅

모달 진짜 처음인데 그냥 겁부터 나네요...
이론은 완벽해
처음 값을 false로 주고 버튼을 누르면 true로 바뀌면서 모달을 보여준다,,,,
근데 진짜 생각 해야 할게 많은 게 
모달 창 띄우면 뒷배경도 검정이여야 하고,,
레이아웃 밖에 누르면 모달창도 닫아져야 하고,,
생각보다 할일이 너무 많은데 

 

<실제 모달이 뜰 부분>

const DropDown = (props)=>{

const dropdownRef = useRef(null);
  //로그인 모달 있는지 여부
  const [IsM, setIsM] = useState(false)
  const onSetIsM =(active)=>{
    setIsM(active)
  }

  //회원가입 모달 있는지 여부
  const [IsSignup, setIsSignup] = useState(false)
  const onSetIsSignup =(active)=>{
    setIsSignup(active)
  }

  //필터모달
  const [IsFilter, setIsFilter] = useState(false)
  const onSetIsFilter =(active)=>{
    setIsFilter(active)
  }

  //댓글모달
  const [IsReview, setIsReview,] = useState(false)
  const onSetIsReview =(active)=>{
    setIsReview(active)
  }

  return (
    <div className="container">
        <nav
          ref={dropdownRef}
          className={`menu ${isActive ? "active" : "inactive"}`}
        >
          <ul>
            <li>
              <a onClick={()=>{onSetIsM(true); onSetIsVisible(false)}}>로그인</a>
            </li>
            <li>
              <a onClick={()=>{onSetIsSignup(true); onSetIsVisible(false)}}>회원가입</a>
            </li>
            <li>
              <a onClick={()=>{onSetIsFilter(true);  onSetIsVisible(false)}}>필터모달</a>
            </li>
            <li>
              <a onClick={()=>{onSetIsReview(true);  onSetIsVisible(false)}}>댓글모달</a>
            </li>
          </ul>
        </nav>
      </div>
      {IsM && <LoginModal setIsM={setIsM}/>}
      {IsSignup &&<SignModal setIsSignup={setIsSignup}/>}
      {IsFilter &&<FilterModal setIsFilter={setIsFilter}/>}
      {IsReview &&<ReviewModal setIsReview={setIsReview}/>}
    </div>
  );
}

일단 버튼 누르면 나오는 부분 코드 

 

//모달 

import React from "react";
import styled from "styled-components";
import {Text} from "../elements"
import {actionCreators as userActions} from "../redux/modules/user"
import { useDispatch } from "react-redux";

const LoginModal = ({setIsM}) => {
    const dispatch = useDispatch()
    const [id,setId] = React.useState("")
    const [pwd, setPwd] = React.useState("")

    const login =()=>{
        dispatch(userActions.logInDB(id,pwd))
    }
return(
     <React.Fragment>
     	//뒷 배경 어둡게//
         <Black onClick={()=>setIsM(false)}/>
         <Wrap>
            <Header>
            	//x버튼 있는 부분 (누르면 모달 들어가게 하기)//
                <div onClick={()=>setIsM(false)}>
                    <svg viewBox="0 0 32 32" aria-hidden="true" role="presentation" focusable="false" style={{display: "block", fill:" none", height: "16px", width: "16px", stroke: "#222222", strokeWidth: "3", overflow: "visible",cursor:"pointer"}}><path d="m6 6 20 20"></path><path d="m26 6-20 20"></path></svg>
                </div>
                <div>로그인</div>
                <div></div>
            </Header>
            <Text size="22px" bold>에어비엔비에 오신걸 환영합니다</Text>
            <Input placeholder={"email"} padding="0px 30px" onChange={(e)=>{setId(e.target.value)}}></Input>
            <Input placeholder={"password"} onChange={(e)=>{setPwd(e.target.value)}}></Input>
            <Text color="gray">작성하신 메일 주소를 통해 메일을 확인하겠습니다.<strong style={{textDecoration:"underline"}}>개인정보 처리방침</strong> </Text>
            <Button onClick={login}>로그인</Button>
        </Wrap>
    </React.Fragment>
  )
};

const Input =styled.input`
padding: 16px;
margin-bottom: 10px;
border:1px solid gray;
border-radius: 7px;
cursor: pointer;
:focus{
    border:none;
    outline: 1px solid rgb(255, 56, 92);
} 
`

const Button =styled.button`
border-radius: 6px;
border: none;
background-color:rgb(255, 56, 92) ;
padding: 16px;
color: white;
margin: 10px 0px 0px 0px;
`

const Wrap = styled.div`
    background: rgb(255, 255, 255);
    width: 600px;
    height: 50%;
    max-width: 100vw ;
    display: flex ;
    flex-direction: column ;
    box-shadow: rgb(0 0 0 / 28%) 0px 8px 28px ;
    border-radius: 12px ;
    padding: 20px;
    position: fixed;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    z-index: 1011;
`

const Black= styled.div`
  width: 100%;
  height: 100%;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1010;
  background-color: rgba(0, 0, 0, 0.50);
`

const Header= styled.div`
    -webkit-box-pack: justify;
    -webkit-box-align: center ;
    display: flex ;
    flex: 0 0 auto ;
    align-items: center ;
    justify-content: space-between ;
    padding: 0px 24px ;
    min-height: 48px ;
    border-bottom: 1px solid rgb(235, 235, 235);
    color: rgb(34, 34, 34) ;
    font-size: 16px ;
    line-height: 20px ;
    font-weight: 800;
`

export default LoginModal;

무슨 모달 만들어주는 뭐도 있다고 하긴 하는데 

나는 일단 냅다 만들어버렸다

이게 맞는지는 모름