1주차 과제 - 모달창 구현(1)

1주차 문제

✅ : 반드시

+ : 하면 좋음

추가 요구사항 : 따르면 좋음

---

✅ 각 기능을 어떻게 구현할지 구현 전 텍스트로 정리한다. 

이후에 수정은 할 수 있으나, 수정 사항은 ➕와 같이 별도의 표시를 남겨 구분할 수 있도록 한다. 
되도록이면 최초의 설계대로 구현에 성공할 수 있도록 노력한다.

---

1. 모달창 구현

"새 게시물 작성하기" 버튼을 누르면 "글쓰기"와 "취소하기" 버튼을 가진 모달창이 나타나도록 한다.
✅ 취소하기 버튼을 누르면 모달창이 닫혀야 한다.

+ 제출에 성공하면 모달창이 닫혀야 한다.
+ "새 게시물 작성하기" 버튼을 눌러 모달창이 나타나면 제목 입력칸이 포커싱 되어야 한다.
+ 입력 폼에 값을 입력하고 모달창을 닫았다가 다시 열 때는 입력 폼이 빈칸이어야 한다.

---

2. 입력폼 구현

 모달창 안에 제목과 내용을 입력할 수 있는 입력 폼을 구현한다.
✅ "글쓰기" 버튼을 눌렀을 때 빈칸이 있다면 빈칸을 포커싱한다.

 

+ 제목은 최대 30자 까지만 작성되어야 한다.

---

3. 게시물 작성 기능 구현

제목과 내용을 입력하고 제출을 하게 되면 (글 번호, 제목, 내용, 날짜)를 담은 게시물이 생성된다.
✅ 최근에 작성한 게시물이 상단에 생성되어야 한다.

+ 게시물 제목의 길이가 20을 넘어가면 "..."으로 나타나도록 한다.

---

4. 좋아요, 즐겨찾기 기능 구현

✅ 게시물에 좋아요❤, 즐겨찾기⭐ 버튼을 만든다.
✅ 좋아요 버튼을 클릭하면 숫자가 1 올라가야 한다.
✅ 즐겨찾기 버튼을 클릭하면 즐겨찾기 버튼이 강조되고, 강조된 버튼을 다시 클릭하면 강조가 취소되어야 한다.

 

+ 좋아요를 한 게시물의 제목을 따로 모아서 볼 수 있는 리스트를 만든다.

+ 즐겨찾기를 한 게시물의 제목을 따로 모아서 볼 수 있는 리스트를 만든다.

---

5. 게시물 삭제 기능 구현

✅ 게시물마다 삭제하기 버튼을 만들고, 삭제하기 버튼을 클릭하면 해당 게시물이 삭제되어야 한다.

+ 게시물을 삭제하면 게시물이 서서히 사라지도록 한다

1. 모달창 구현

"새 게시물 작성하기" 버튼을 누르면 "글쓰기"와 "취소하기" 버튼을 가진 모달창이 나타나도록 한다.
✅ 취소하기 버튼을 누르면 모달창이 닫혀야 한다.

필요 조건:

• 모달 창을 띄울 새 게시물 button
• 모달 state 
• 글쓰기 button
• 취소 button

 

 

 

 

 

 

 

 

 

풀이단계정리 

Header.js

import React from "react";
import Modal from "./Modal";

const Header = (props) => {
  // newPost
  let [post, setPost] = useState(false);

  const newPost = (props) => {
    // post의 값이 클릭할 때마다 반대가 되도록
    setPost(!post);
  };
  
  return (
    <div className="header">
      <div className="container">
        {" "}
        <a href="#">
          <button
            onClick={() => {
              newPost();
            }}
          >
            새 게시물
          </button>
          {/* post true일때 모달이 열린다. modal창의 취소 버튼 클릭시 닫히는 걸 고려하여 함수 전달 */}
          {post == true ? (
            <Modal
              post={post}
              setPost={setPost}
            />
          ) : null}
        </a>
      </div>
    </div>
  );
};

export default Header;

Modal.js

import React from "react";
import { useState} from "react";

const Modal = (props) => {
const addContent = () => {
    // 모달 창이 닫히지만 닫히는 대신 아이디 값이 변하지않음
    let copyModal = props.post;
    props.setPost(!copyModal);
  };
  return (
    <div className="modal">
      <div className="title">
        <input
          placeholder="제목"
        ></input>
      </div>
      <div className="writing">
        {" "}
        <textarea
          placeholder="글쓰기"
          cols="70"
          rows="15"
        ></textarea>
        <button
          className="writingBtn"
          onClick={() => {  
            addContent();
          }}
        >
          글쓰기
        </button>
        <button
          onClick={() => {
            props.newPost();
          }}
        >
          취소
        </button>
      </div>
    </div>
  );
};
export default Modal;

 

1. Header component 생성하고 새 게시물 Btn 작성 

import React from 'react'

const Header = () => {
  return (
    <div>       
    <button onClick={() => {newPost();}}>새 게시물</button>
    </div>
  )
}

export default Header

 

 

2. Modal component 생성

import React from 'react'

const Modal = () => {
  return (
    <div>Modal</div>
  )
}

export default Modal

3. Header -> ui 상태를 state에 저장

  let [post, setPost] = useState(false);

4. Header -> state가 true일때 Modal창 띄우기

{post == true ? (<Modal post={post} setPost={setPost}/>) : null}

Header의 자식 요소인 Modal에 state를 전달해야하기 때문에  modal component에 data 저장

 

5. Header -> state를 true로 변경하는 newPost() 함수 생성

 const newPost = () => {
    // post의 값이 클릭할 때마다 반대가 되도록
    setPost(!post);
  };

 

6. Modal -> 취소버튼 : state를 false로 변경해 modal 창 닫기

  <button onClick={() => {props.newPost();}}>취소</button>

modal의 부모요소인 Header에서 newPost 함수를 가지고오기 때문에 props 사용

 

+ 제출에 성공하면 모달창이 닫혀야 한다.
+ "새 게시물 작성하기" 버튼을 눌러 모달창이 나타나면 제목 입력칸이 포커싱 되어야 한다.
+ 입력 폼에 값을 입력하고 모달창을 닫았다가 다시 열 때는 입력 폼이 빈칸이어야 한다.

1)  제출에 성공하면 모달창이 닫혀야 한다.

Modal -> 글을 생성하는 글쓰기btn addContent() 함수 생성

const addContent = () => {
    let copyModal = props.post;
    props.setPost(!copyModal);
  };

취소 버튼과 동일하게 header에서 post state를 가지고옴

 

2)  "새 게시물 작성하기" 버튼을 눌러 모달창이 나타나면 제목 입력칸이 포커싱 되어야 한다.

포커싱 되는 것은 useEffect와 useRef를 사용

 const titleInputRef = useRef();

useRef 로 특정 input 선택 : 포커싱 될 위치 저장

<input
          placeholder="제목"
          ref={titleInputRef}
        ></input>

콜백함수 뒤에 배열을 나타내는 대괄호로 useEffect를 렌더링 했을 때 한번만 실행 : modal 창이 떴을 때 포커싱

  useEffect(() => {
    titleInputRef.current.focus();
  }, []);

3) 입력 폼에 값을 입력하고 모달창을 닫았다가 다시 열 때는 입력 폼이 빈칸이어야 한다.

  let [input, setInput] = useState(""); // 제목
  let [textarea, setTextarea] = useState(""); // 내용

input과 textarea에 입력 될 내용들을 state에 저장
useState('')를 비워두면 모달창을 닫았다가 열면 입력 폼은 비워져있다.