[항해99 40일차] 2022.04.15 TIL (클론프젝 시작-모달창 구현)

📔 오늘 할 일 📔

1. 게시글 작성 메인페이지 뷰 다 그리기

---

 

📖 오늘 배운 개념 📖

 

리액트 머테리얼 유아이 사용하여 모달창 구현하기!!

 

라이브러리 설치~!

yarn add @material-ui/core

부모 컴포넌트

const [openModal, setModal] = useState(false);
const modalOpen = () => {
  setModal(true);
};

<PostDiv onClick={modalOpen}>
  김미미님, 무슨 생각을 하고 계신가요?
</PostDiv>
<WriteModal openModal={openModal} setModal={setModal} />

자식 컴포넌트

import React,{useState} from 'react';
import { useSelector, useDispatch } from 'react-redux';
import styled from 'styled-components';
import {MainGrid,Image} from "../elements/index";
import { Dialog } from '@material-ui/core';


const WriteModal = (props) => {
    const { openModal, setModal } = props;
  const modalClose = () => {
    // console.log(detailPost)
    setModal(false);
  };
   
  
    return (
      <>
      <Dialog maxWidth={'lg'} scroll='body' open={openModal}>
        <Outter>
        <MainGrid alignItems='center' position='relative'>
            <MainGrid
              position='absolute'
              top='-10px'
              right='20px'
              color='black'
              width='20px'
              padding='10px'
            >
              <AiFillCloseCircle size='30' color='#ddd' onClick={modalClose} />
            </MainGrid>
            </MainGrid>
            <button onClick={modalClose}>
                    게시하기
            </button>
            
          
        </Outter>
      </Dialog>
  
      </>
    );
};

const Outter=styled.div`
    width:500px;
    overflow:hidden;
    padding:10px;
    background:#fff;
    

`;

export default WriteModal;

---

😊 주절주저리 😊

 

와우 클론코딩을 페이스북으로 하기로 했다..

일단 뷰그리는 것부터 고통스럽다 ㅋㅋㅋㅋㅋㅋㅋㅋㅋ

메인페이지는 생각보다 그릴 게 넘 많다.ㅠㅠ

현재까지 내가 그린 뷰다 ㅠㅠㅠㅠ

흐흑..하찮아보인당..

그리고...페이스북 로고 그라디언트로 얻고싶은데ㅠㅠ

소스페이지에서 암만 찾아봐도 없었당..응흐흑..

 

모달창도 라이브러리 사용해서 구현했당 ㅠㅠ..진짜

안되가지고 눈물 나올뻔했다..

우리조 리액트분중 정말 잘하시는 분이 계신데...그분은 벌써 ㅋㅋ로그인 회원가입 뷰도 다 그리시고,

기능도 백엔드 분들과 연결하셨다....

 

하.....

나도 빨리 오늘까지 뷰 다 만들고 내일은 기능 구현 할 수 있게 해야겠당...

 

 

---

 

📚부족한 부분📚

 

리액트에 관한 개념이 아직 부족하다.

배운지 3주밖에 안되서....

리액트 병아리반 수준으로 ..

못하는듯하다.

 

ㅠㅠ 코드를 작성해도 항상 의문점을 가지고

공부를 더 열심히 해보자...

---

 

✅ 내일 할 일 ✅

 

1. 게시글 Mock api로 기능 구현해보기