step2. Modal + Form

대표사진도 만들어봤다. 

 

오랜만에 하려니깐 흐름이 끊겨서 거의 다시 했다.

일단 class를 hooks로 바꿨고, github가 자꾸 오류나서 레파지토리도 새로 만들었다. 

 

 

오늘은 Modal창과 Form을 위주로 만들었다. 

 

1. 초기화면의 Add버튼을 누르면 항목을 입력할 수 있는 모달창이 화면에 나타난다. 

2. 목표를 입력하고

3. 시작 날짜를 설정한다. 도전 종료일을 계산해서 알려준다.

4. 동기부여 메세지를 작성한다. 

5. 그리고 제출한다. 만약 목표가 작성되 있지 않으면 안내 메세지가 뜬다. 

6. 보드의 왼편에 입력한 내용과 현재상황을 보여주는 대시보드가 화면에 나타난다. 

---

 

구현하기 어려웠던 것 😵😵

•  챌린지 수정하기 -> 아직도 못함 
• 시작 날짜 설정 후 도전 종료일 계산

 

const getToday = () => {
   let today = new Date();
   return convertDateString(today);
}

const convertDateString = (date) => {
   let year = date.getFullYear();
   let month = date.getMonth() + 1;
   month = month >= 10 ? month : `0${month}`
   let day = date.getDate();
   day = day >= 10 ? day : `0${day}`
   return `${year}-${month}-${day}`
}

const getAfter30days = (date) => {
   let inputDate = new Date(date);
   inputDate.setDate( inputDate.getDate() + 29 );
   return convertDateString(inputDate);
}

• 입력값 화면에 구현하기
  • 오브젝트로 묶어서 인자로 받은 후 prop로 전달했다. 
• Form.jsx

   const onSubmitForm = (e) => {
      e.preventDefault(); 
      if(!goal){
         setMessage('목표를 입력해주세요');
         inputRef.current.focus();
      } else {
         onInsertChallenge(goal, date, endDay, motivate);
         onToggleModal();
      }
   }

• App.jsx

  const [challenge, setChallenge] = useState({
    goal: '',
    startDate: '',
    endDate: '',
    motivate: ''
  });
  
  const onInsertChallenge = (goal, startDate, endDate, motivate) => {
    const first = {
      goal,
      startDate,
      endDate,
      motivate,
    }
    setChallenge(first);
  }
  
 <Note 
    challenge={challenge}
    onEditChallenge={onEditChallenge}
  />

• Note.jsx

const Note = ({ challenge, onEditChallenge }) => {
    return (
        <>
            <EditButton onClick={onEditChallenge}/>
            <Content>
                <h2>My Goal</h2>
                <div className="challenge-cont">{challenge.goal}</div>
            </Content>
            <Content>
                <h2>Challenge period</h2>
                <div className="challenge-cont">{challenge.startDate} ~ {challenge.endDate}</div>
                <span className="d-day">도전 종료일까지 0일 남았습니다</span>
            </Content>
            <Content>
                <h2>Motivate</h2>
                <div className="challenge-cont memo">{challenge.motivate}</div>
            </Content>
        </>
    )
}

 

아직 익숙하지가 않아서 너무 머리가 아프지만 그래도 점점 만들어져가는거 보니깐 뿌듯하다. 

내가 만들었지만 아직 만들기 두려운 포도알이 남아있다. 어느정도 레이아웃만 나와도 쫌 안심할듯.... 

그렇게 35%정도 완성된 오늘의 결과물... 

 

 

📜 그 다음 목표

◻️ 도전 종료일 D-Day 계산하기

◻️ 챌린지 수정하기

◻️ 대시보드 보강

◻️ Cell Layout