Daily-Mission은 1일 1미션이라는 컨셉의 놀이터로써, 참여자가 하루에 하나씩 미션(예 : 알고리즘, 일기)을 수행하고, 결과를 공유하는 웹 플랫폼 입니다.

1. 프로토타이핑

백엔드 개발자와의 협업과 웹 페이지의 구조를 마련하기 위해, 프로토타이핑을 해보았습니다. 목업툴로는 카카오의 OVEN을 사용하였습니다.

• 메인페이지(달력모드)
  

# 메인페이지는 크게 Header, Nav, Submit, Calendar 컴포넌트로 나눠집니다.
# Submit 컴포넌트는 Mission 파일 제출을 위한 컴포넌트입니다.

• 메인페이지(카드모드)
  

# 메인페이지 우측 아래는 Card 컴포넌트와 Calendar 컴포넌트를 Toggle형식으로 
전환 가능하게 할 예정입니다. 
# Card 컴포넌트는 제출 당일 제출자들의 글을 볼 수 있습니다.
# Calendar 컴포넌트는 그 주의 참여 멤버들의 미션 제출 유무를 볼 수 있습니다.

• 메인페이지(업로드 팝업)
  

# Submit 컴포넌트에 미션 인증 파일 제출 수 간단한 글을 쓸 수 있습니다.
# Popup으로 구현 할 예정입니다.

• 미션목록 페이지
  

# 미션목록을 나타내는 컴포넌트 입니다.
# 참여자는 참여버튼을 눌러 미션에 참여 할 수 있고, 입장을 위해 password가 필요합
니다.

• 제출미션 페이지
  

# 유저의 제출 목록을 나타내는 컴포넌트 입니다.

• 제출 미션 글 상세 페이지

# 제출 목록의 글 내용을 볼 수 있는 컴포넌트입니다.

2. 시작

React + Mobx + Scss + Mocha

이번 프로젝트는 React 프론트엔드 라이브러를 바탕으로, MobX를 통해 앱의 상태관리를 할 예정입니다. 이에 더해 Scss로 CSS 스타일링을 하고, Mocha로 테스트를 진행하겠습니다

2-1) create-react-app

npx create-react-app daily-mission-front-web

2-2) 컴포넌트 구조

App : 메인 컴포넌트
Aside : Nav 컴포넌트
Header : Header 컴포넌트
Mission : 제출자들의 상태를 보여주는 컴포넌트
Submit : 미션 제출을 위한 컴포넌트
SubmitPopup : 미션 제출을 위해 글을 쓰기 위한 컴포넌트

2-3) SaSS 설치 및 적용

npm install sass-node --save

.box {
  border-radius: 16px;
  &__title {
    margin: 5px 5px 10px 5px;
    font-size: 1.3rem;
  }
}

.drop-upload-box {
  background-color: skyblue;
  border-radius: 16px;
  border: 2px dotted #eee;
  height: 90px;
  text-align: center;
  font-size: 20px;
  line-height: 60px;
  margin-top: 50px;
  color: #ffffff;
  font-weight: 700;

  &__title {
    margin-left: 15px;
    margin-top: 17px;
    display: inline-block;
  }
}

3. CSS 방법론(BEM 적용)

CSS 방법론은 코드의 유지보수성, 재사용성 그리고 확장성을 높힌다.

변수이름을 짓는 것은 어려운 문제입니다. 하지만 그 보다 더 어려운 문제는 Class 이름 짓는 것입니다. 이를 해결하기 위해 BEM(Block Element Modifier)방법론을 적용하여 CSS 선택자의 이름을 명확하게 하고자 합니다.

+) SASS의 부모참조자와 함께 사용하면 효율적입니다.

3-1 참고

* https://webclub.tistory.com/263
* https://nykim.work/15

3-2 적용

<div className="submit-board__contents">
	<h3 className="submit-board__contents-title">내용</h3>
		<textarea
          className="submit-board__contents-input"
          name="content"
          cols="40"
          rows="5"
          value={inputValue2}
          onChange={updateInputValue}
        ></textarea>
</div>
<div className="submit-board__contents">
  <h3 className="submit-board__contents-title">파일</h3>
![images.png](https://velog.velcdn.com/post-images%2Fpelto%2F48aec2e0-48b3-11ea-a1f6-39b802daa596%2Fimages.png)

  {file}
</div>
<button type="submit-board__cancel-button" onClick={PostBoard}>
취소
</button>
<button type="submit-board__submit-button" onClick={PostBoard}>
등록
</button>

4. 결과물

아직까지는 비루한 결과입니다.