코딩/위코드 코딩학습

[위코드] TIL(Today I am Learned) -32(기업협업)(Redux 시작!)

카슈밀 2020. 8. 26. 13:58
반응형

* 아직 리덕스는 학습을 시작한 상태라 적용하지 않았음.

 

- 오늘의 할일.

1. 어제 구현하지 못한  input check 박스 선택에 따라서 필요한 컴포넌트 호출하는 기능 구현.

2. email 주소와 쿼리네임을 선정하여 해당 input 창에 기입하면 해당 값을 입력시키기.

3. 제출하기 버튼클릭시 해당 이메일과 다운로드 기능 구현

 

- 진행 완료사항.

1. input true : faslse값에 따라 해당 컴포넌트 호출하는 기능으로 구현.

2. email, input 창 기입에 따른 해당값 state값으로 저장구현.

 

- 진행중 사항 -

1. submint 버튼 클릭시 이메일로 발송과 해당 파일을 다운로드 요청하는 기능 구현 중

2. 각자의 컴포넌트마다 해당 state 값이 저장되므로 Redux를 공부하여 해당 값을 store에 저장하여 호출하는 방식으로 변경하려고 함.

 

import React, { useState, useEffect } from "react";
import styled from "styled-components";
import { INPUT_LIST } from "../../../config";

function StepFour() {
  const [ list, setList ] = useState();
  const [ check, setCheck ] = useState();
  const [ query, setQuery ] = useState(false)
  const [ content, setContent ] = useState("")

  useEffect(() => {
    fetch(INPUT_LIST)
    .then(res => res.json())
    .then(res => {
      setList(res);
    });
  }, [])

  useEffect(() => {
    const { address, query_name } = content
    fetch('',{
      method: "POST",
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        address,
        query_name,
        check
      })
    })
    .then(res => res.json())
    .then(res => {
      
    })
    
  })
console.log(check)

  const valuedetector = (e) => {
    const { value } = e.target
    setCheck(value)
  }

  // 쿼리네임 체크박스 부분
  const InputManage = (e) => {
    if(query === false) {
    setQuery(true)
    } else {
      setQuery(false)
    }
  }

  // 이메일주소 내용과 쿼리 내용 감지기
  const QueryValueDetector =(e) =>{
    const { name, value } = e.target
    setContent({...content, [ name ] : value})
  }

  return(
    <StepFourWrap>
      <div>
        <StepFourTitle>Step4 :</StepFourTitle>
        <StepFourSub> Select query output.</StepFourSub>
      </div>
      <Body>
        <Typing>
          <Content>
            Select the desired&nbsp;
            <a href="">
              format
            </a>
              &nbsp;of the output file. 
              For large data requests, select a compression type to expedite downloads.
              If you enter your email address, you will receive an email that contains 
              a URL to the output file when the data request is finished processing.
          </Content>
        </Typing>
        <BtnWrap>
          <LeftBTN>
            <LeftWrap>
              <LeftTitle>Output Format</LeftTitle>
              {list && list.OutputFormat.map((el) =>{
                return(
                  <LeftInputs>
                    <Btn
                      type="radio"
                      name="format"
                      id={el.id}
                      value={el.value}
                      checked={el.value === check }
                      autocomplete="off"
                      onChange={valuedetector}
                    />
                    &nbsp;
                    <LableName>{el.name}</LableName>
                  </LeftInputs>
                )
              })}
              </LeftWrap>
          </LeftBTN>
        </BtnWrap>
        <EmailRow>
          <EmailWrap>
            <EmailLabel>
              E-Mail Address 
              <Smalltitle>(Optional)</Smalltitle>
            </EmailLabel>
            <EmailTypingBox>
              <EmailTyping
                type="email"
                maxlength="255"
                name="address"
                id="address"
                placeholder="E-mail"
                onChange={QueryValueDetector}
              />
              <EmailSendBtnWrap>
                <EmailSendBtn 
                  type="button"
                  value="Edit Preferences"
                  name="editPrefs"
                  onClick=""
                />
              </EmailSendBtnWrap>
            </EmailTypingBox>
          </EmailWrap>
          <SaveQueryWrap>
            <SaveQueryTitle>
              <InputBox
                type="checkbox"
                id="savequery"
                name="savequery"
                checked={ true === query}
                onChange={InputManage}
              />
                &nbsp;Save this query to myWRDS
            </SaveQueryTitle>
            {query
              ? <QueryName2
                  name="query_name"
                  id="query_name"
                  type="text"
                  placeholder="Query Name"
                  onChange={QueryValueDetector}
                />
              : <QueryName
                  name="query_name"
                  id="query_name"
                  type="text"
                  placeholder="Query Name"
                  disabled="true"
              />}
          </SaveQueryWrap>
        </EmailRow>
        <SubmitBtnRow>
          <BtnSubmin name="querysubmit">Submit Query</BtnSubmin>
        </SubmitBtnRow>
      </Body>
    </StepFourWrap>
  )
}

export default StepFour;

const StepFourWrap = styled.div`
  margin-top: 30px;
  `;

// 제목태그
const StepFourTitle = styled.strong`
  font-size: 20px;
`;
const StepFourSub = styled.span`
  font-size: 20px;
`;

//내용
const Body = styled.div`
  margin: 0 -15px;
`;
const Typing = styled.div`
  position: relative;
  min-height: 1px;
  padding:0 15px;
`;

const Content = styled.p`
  font-size: 18px;
  line-height: 26px;
  margin: 0 0 11.5px;
  font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
`;

//버튼들
const BtnWrap = styled.div`
  display: flex;
`;

const LeftBTN = styled(Typing)`
  width: 33.33333%;
  height: 100%;
`;


const LeftWrap = styled.dl`
  margin-bottom: 19px;
`;


const LeftTitle = styled.dt`
  font-weight: bold;
  line-height: 1.4;
  font-size: 16px;
  font-family: inherit;
`;

const LeftInputs = styled.dd`
  line-height: 1.4;
`;

const Btn = styled.input`
  margin-top: 1px;
  `;

const LableName = styled.label`
  font-size: 14px;
  font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
  display: inline-block;
  max-width: 100%;
  margin-bottom: 5px;
`;

const EmailRow = styled.div`
  display:flex;
`;

const EmailWrap = styled.div`
  width: 50%;
  position: relative;
  min-height: 1px;
  padding:0 15px;
`;

const EmailLabel = styled.label`
  height: 32.5px;
  margin-bottom: 0;
  padding-top: 9px;
  max-width: 100%;
  font-size: 14px;
  font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
  display: inline-block;
`;
const Smalltitle = styled.small`
  color: #686868;
  font-style: italic;
  font-size: 85%;
  text-align: right;
`;

const EmailTypingBox = styled.div`
  position: relative;
  display: table;
  border-collapse: separate;
  width: 100%;
  height: 37px;
  padding: 8px 12p 8px;
  font-size: 14px;
  line-height: 1.4;
  background-color: #fff;
`;

const EmailTyping = styled.input`
  position: relative;
  z-index: 2;
  width: 70%;
  margin-bottom: 0;
  height: 37px;
  padding: 8px 12px;
  font-size: 14px;
  line-height: 1.4;
  color: black;
  background-color: #fff;
  border: 1px solid #ccc;
`;

const EmailSendBtnWrap = styled.span`
  width: 1%;
  position: relative;
  white-space: nowrap;
`;

const EmailSendBtn = styled.input`
  margin-left: -1px;
  position: absolute;
  padding: 8px 12px;
  color: #333333;
  background-color: #e7e7e7;
  border-color: #ccc;
  text-align: center;
  border: 1px solid transparent;
  white-space: nowrap;
  font-size: 14px;
  line-height: 1.4;

  &:hover{
    box-shadow: inset 0px 0px 4px rgba(0, 0, 0, 0.3);
    z-index: 2;
    background-color: #cecece;
    border-color: #adadad;
    transition: all 0.25s cubic-bezier(0.54, 0.06, 0.55, 0.97);
  }
`;


const SaveQueryWrap = styled(EmailWrap)``;
const SaveQueryTitle = styled(EmailLabel)``;

const InputBox = styled.input`
  margin-top: 1px;
`;

const QueryName = styled.input`
  cursor: not-allowed;
  background-color:"gray";
  display: block;
  width: 100%;
  height: 37px;
  padding: 8px 12px;
  color: #000;
  font-size: 14px;
  line-height: 1.4;
  border: 1px solid #ccc;
  opacity: 1;
`;

const QueryName2 =styled(QueryName)`
  cursor: text;
  color: #000;
  background-color: #fff;
  border: 1px solid #ccc;
`;

//버튼
const SubmitBtnRow = styled.div`
  margin: 15px 0 30px;
  padding-left: 15px;
  height: auto;
`;

const BtnSubmin = styled.button`
  color: #fff;
  background-color: #154281;
  border-color: #11376b;
  padding: 8px 12px;
  margin-top: 30px;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  border: 1px solid transparent;
  white-space: nowrap;
  font-size: 14px;
  line-height: 1.4;
  user-select: none;
`;

 

일단 여기까지가 오늘 정리한 step 4부분.

리덕스를 적용하여 해당 state 값을 통제하려고 한다.

 

* 코드리팩토링 진행한 내용

추가된 내용.

- 백엔드 측에서 인풋 버튼을 눌렀을시에 format이라는 내용으로 받길 원해서

 기존에는 txt, csv, xlsx값만 나오다가 해당 객체로 { format : "txt" }로 나오길 만들었음.

- 쿼리 체크박스 부분의 코드를 정리. PM이 알려줬는데, AWESOME한 내용.

 !로 if(false === query)의 내용을 정리함. 놀라웠어요!

import React, { useState, useEffect } from "react";
import styled from "styled-components";
import { INPUT_LIST } from "../../../config";

function StepFour() {
  const [ list, setList ] = useState();
  const [ check, setCheck ] = useState();
  const [ query, setQuery ] = useState(false)

  // 백엔드 통신용
  useEffect(() => {
    fetch(INPUT_LIST)
    .then(res => res.json())
    .then(res => {
      setList(res);
    });
  }, [])

  //백엔드 버튼 눌렀을시에 보내주는 기능
  // useEffect(() => {
  //   const { address, query_name } = check
  //   fetch('',{
  //     method: "POST",
  //     headers: {
  //       'Content-Type': 'application/json',
  //     },
  //     body: JSON.stringify({
  //       address,
  //       query_name,
  //       check
  //     })
  //   })
  //   .then(res => res.json())
  //   .then(res => {
      
  //   })
    
  // })

  // 포맷형식 선택기
  const valuedetector = (e) => {
    const { name, value } = e.target
    setCheck({...check, [ name ] : value})
  }

  // 쿼리네임 체크박스 부분
  const InputManage = (e) => {
    !query? setQuery(true) : setQuery(false)
  }

  return(
    <StepFourWrap>
      <div>
        <StepFourTitle>Step4 :</StepFourTitle>
        <StepFourSub> Select query output.</StepFourSub>
      </div>
      <Body>
        <Typing>
          <Content>
            Select the desired&nbsp;
            <a href="">
              format
            </a>
              &nbsp;of the output file. 
              For large data requests, select a compression type to expedite downloads.
              If you enter your email address, you will receive an email that contains 
              a URL to the output file when the data request is finished processing.
          </Content>
        </Typing>
        <BtnWrap>
          <LeftBTN>
            <LeftWrap>
              <LeftTitle>Output Format</LeftTitle>
              {list && list.OutputFormat.map((el) =>{
                return(
                  <LeftInputs>
                    <Btn
                      type="radio"
                      name="format"
                      id={el.id}
                      value={el.value}
                      checked={el.value === (check && check.format) }
                      autocomplete="off"
                      onChange={valuedetector}
                    />
                    &nbsp;
                    <LableName>{el.name}</LableName>
                  </LeftInputs>
                )
              })}
              </LeftWrap>
          </LeftBTN>
        </BtnWrap>
        <EmailRow>
          <EmailWrap>
            <EmailLabel>
              E-Mail Address 
              <Smalltitle>(Optional)</Smalltitle>
            </EmailLabel>
            <EmailTypingBox>
              <EmailTyping
                type="email"
                maxlength="255"
                name="email"
                id="email"
                placeholder="E-mail"
                onChange={valuedetector}
              />
              <EmailSendBtnWrap>
                <EmailSendBtn 
                  type="button"
                  value="Edit Preferences"
                  name="editPrefs"
                  onClick=""
                />
              </EmailSendBtnWrap>
            </EmailTypingBox>
          </EmailWrap>
          <SaveQueryWrap>
            <SaveQueryTitle>
              <InputBox
                type="checkbox"
                id="savequery"
                name="savequery"
                checked={ true === query}
                onChange={InputManage}
              />
                &nbsp;Save this query to myWRDS
            </SaveQueryTitle>
            {query
              ? <QueryName2
                  name="query_name"
                  id="query_name"
                  type="text"
                  placeholder="Query Name"
                  onChange={valuedetector}
                />
              : <QueryName
                  name="query_name"
                  id="query_name"
                  type="text"
                  placeholder="Query Name"
                  disabled="true"
              />}
          </SaveQueryWrap>
        </EmailRow>
        <SubmitBtnRow>
          <BtnSubmin name="querysubmit">Submit Query</BtnSubmin>
        </SubmitBtnRow>
      </Body>
    </StepFourWrap>
  )
}

export default StepFour;

const StepFourWrap = styled.div`
  margin-top: 30px;
  `;

// 제목태그
const StepFourTitle = styled.strong`
  font-size: 20px;
  font-weight: bold;
`;
const StepFourSub = styled.span`
  font-size: 20px;
`;

//내용
const Body = styled.div`
  margin: 0 -15px;
`;
const Typing = styled.div`
  position: relative;
  min-height: 1px;
  padding:0 15px;
`;

const Content = styled.p`
  font-size: 18px;
  line-height: 26px;
  margin: 0 0 11.5px;
  font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
`;

//버튼들
const BtnWrap = styled.div`
  display: flex;
`;

const LeftBTN = styled(Typing)`
  width: 33.33333%;
  height: 100%;
`;


const LeftWrap = styled.dl`
  margin-bottom: 19px;
`;


const LeftTitle = styled.dt`
  font-weight: bold;
  line-height: 1.4;
  font-size: 16px;
  font-family: inherit;
`;

const LeftInputs = styled.dd`
  line-height: 1.4;
`;

const Btn = styled.input`
  margin-top: 1px;
  `;

const LableName = styled.label`
  font-size: 14px;
  font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
  display: inline-block;
  max-width: 100%;
  margin-bottom: 5px;
`;

const EmailRow = styled.div`
  display:flex;
`;

const EmailWrap = styled.div`
  width: 50%;
  position: relative;
  min-height: 1px;
  padding:0 15px;
`;

const EmailLabel = styled.label`
  height: 32.5px;
  margin-bottom: 0;
  padding-top: 9px;
  max-width: 100%;
  font-size: 14px;
  font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
  display: inline-block;
`;
const Smalltitle = styled.small`
  color: #686868;
  font-style: italic;
  font-size: 85%;
  text-align: right;
`;

const EmailTypingBox = styled.div`
  position: relative;
  display: table;
  border-collapse: separate;
  width: 100%;
  height: 37px;
  padding: 8px 12p 8px;
  font-size: 14px;
  line-height: 1.4;
  background-color: #fff;
`;

const EmailTyping = styled.input`
  position: relative;
  z-index: 2;
  width: 70%;
  margin-bottom: 0;
  height: 37px;
  padding: 8px 12px;
  font-size: 14px;
  line-height: 1.4;
  color: black;
  background-color: #fff;
  border: 1px solid #ccc;
`;

const EmailSendBtnWrap = styled.span`
  width: 1%;
  position: relative;
  white-space: nowrap;
`;

const EmailSendBtn = styled.input`
  margin-left: -1px;
  position: absolute;
  padding: 8px 12px;
  color: #333333;
  background-color: #e7e7e7;
  border-color: #ccc;
  text-align: center;
  border: 1px solid transparent;
  white-space: nowrap;
  font-size: 14px;
  line-height: 1.4;

  &:hover{
    box-shadow: inset 0px 0px 4px rgba(0, 0, 0, 0.3);
    z-index: 2;
    background-color: #cecece;
    border-color: #adadad;
    transition: all 0.25s cubic-bezier(0.54, 0.06, 0.55, 0.97);
  }
`;


const SaveQueryWrap = styled(EmailWrap)``;
const SaveQueryTitle = styled(EmailLabel)``;

const InputBox = styled.input`
  margin-top: 1px;
`;

const QueryName = styled.input`
  cursor: not-allowed;
  background-color:"gray";
  display: block;
  width: 100%;
  height: 37px;
  padding: 8px 12px;
  color: #000;
  font-size: 14px;
  line-height: 1.4;
  border: 1px solid #ccc;
  opacity: 1;
`;

const QueryName2 =styled(QueryName)`
  cursor: text;
  color: #000;
  background-color: #fff;
  border: 1px solid #ccc;
`;

//버튼
const SubmitBtnRow = styled.div`
  margin: 15px 0 30px;
  padding-left: 15px;
  height: auto;
`;

const BtnSubmin = styled.button`
  color: #fff;
  background-color: #154281;
  border-color: #11376b;
  padding: 8px 12px;
  margin-top: 30px;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  border: 1px solid transparent;
  white-space: nowrap;
  font-size: 14px;
  line-height: 1.4;
  user-select: none;
`;
728x90
저작자표시 비영리 변경금지

'코딩 > 위코드 코딩학습' 카테고리의 다른 글

[위코드] TIL(Today I am Learned) -34(state값 전달하기)  (0) 2020.08.28
[위코드] TIL(Today I am Learned) -33(위코드데이)(휴일)  (0) 2020.08.27
[위코드] TIL(Today I am Learned) -31(기업협업)(DatePicker 완성)  (0) 2020.08.25
[위코드] TIL(Today I am Learned) -30(기업협업)(Datepicker 중간)  (0) 2020.08.24
[위코드] TIL(Today I am Learned) -29(기업협업)  (0) 2020.08.21

'코딩/위코드 코딩학습'의 다른글

  • 현재글[위코드] TIL(Today I am Learned) -32(기업협업)(Redux 시작!)

관련글

댓글

티스토리툴바