[TIL] CSS

오늘 한일

백에서 구현한 기능들을 프론트와 대부분 연결을 시켜주었다. API 연결 시키는건 그렇게 어려운 일이 아니였는데 어떤 버튼을 사용할지 클릭을 했을경우 해당 컴포넌트에 변화를 주는 등 css를 사용하는 부분에서 많은 시간을 소비하였다. 그래도 reactstrap을 사용하여 시간을 단축 할 수 있었다. 아직 css로 다듬어 줘야 하는 부분이 꽤 많이 남았다.(drag & drop도 적용해줘야 한다...)

 

button => input 창으로 변환

state의 addCtBtn의 true/false 값에 따라 불러오는 컨포넌트를 변경하도록 해주 었다. 

{this.state.addCtBtn ? (<AddContainer onClick={this.handleAddCt}/> 
		     : (<Button onClick={this.handleAddCt}>
                     	+ Add another list
                        </Button>)}

클릭 전

클릭 후

reactstrap을 사용한 Input 창

<InputGroup>
  <Input type="textarea" placeholder="something to do?" onChange={this.handleAddCdName}/>
  <InputGroupAddon addonType="append">
    <Button color="success" onClick={this.addCard} id={con.ct_key}>add</Button>
  </InputGroupAddon>
</InputGroup>