fanLetter 미니프로젝트 과정

과정

1) 가장 먼저 레이아웃을 진행하였다.
이유: 로직을 만들더라도 시각화가 되는지 확인하고 싶었고 심적인 안정감..?도 같이 있었기때문에 기존에 컴포넌트 연결하는 것은 추후에 리펙토링 진행 예정이다.

코드

App.jsx

import React from 'react';
import {useSelector,useDispatch} from 'react-redux';
import styled from "styled-components";
import GlobalStyled from './GlobalStyled';
import { ADDCOMMENT } from './redux/modules/Members';
import {SELECTCOMMNET } from './redux/modules/Members';

const StBox = styled.div`
   background-Image:url('https://i.namu.wiki/i/QE_n6IEQBHJBt3fNZTsFzoGALX9k-UIZrir-UgQZoqDCOk4M3BBufJhH6vLyAdmhwfhXWpSl0rplqjWhpzRICoBWvMUUGegFslWL2Ehweumw49fk924IB4d-X1DUYVkeM1as-UG0Majnsv8cxqbusA.webp');
  width:  150rem;
  height: 30rem;
  border: 1px solid red;
  margin: 1px;
  font-size: 45px;
  align-items: center;
`
const TitleTeamName = styled.h1`
   align-items: center;
   font-size: 80px;
   justify-content: space-between;
   font-weight: bold;
   margin: 50px 0;
   padding-left: 65rem;
   font-weight: 1000;
   color: white;
   cursor: pointer;
`
 // 멤버 박스 레아이웃
const BorderBoxMembers = styled.span`
  position: absolute;
    top: 370px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: space-between;
    border: 1px solid white;
    border-radius: 20px;
    list-style: none;
    padding: 18px;
    width: 800px;
    background-color: rgb(79, 85, 81);
`;

const MemberButton = styled.button`
  border: 2px solid red;
  width: 24rem;
  height: 5rem;
  color: #dc3545;;
  background-color:gainsboro;
  cursor: pointer;
  font-weight: 700;
`;
const StContainer = styled.div`
background-color: #008080ac;
 position: absolute;
 justify-content: space-between;
    top: 500px;
    left: 50%;
    width: 900px;
    padding:20px;
    transform: translateX(-50%);
  border: 1px solid red;
  align-items: center;
  
`;
const InputContent= styled.input`
  width: 450px;
  height: 40px;
  align-items: center;
  justify-content: space-between;
  display: flex;
    border-radius: 10px;
    margin: 5px auto 5px auto;
    padding: 20px;
`
const LabelTextStyle = styled.label`
justify-content: space-between;
  /* padding: 20px 40px 40px 140px;
  margin: 14px auto 24px 20px; */
  font-weight: 700;
  width: 100px;
  left: 300px;
  height: 40px;
  margin:3px auto 3px auto;
  align-items: center;
  color: white;
`;


const App = () => {
  const dispatch = useDispatch();
  const title = "IZ*ONE";
  const NickNameLabel= '닉네임';
  const contentNameLabel = '내용';
  const WhoPush = '누구에게 보낼건가요?'
  
  const memberStore = useSelector((state)=>state.member
  );
  console.log(memberStore);
  return (
    <>
    <GlobalStyled/>
    <StBox>
    <TitleTeamName>
 {title}
      </TitleTeamName>
    </StBox>
    <BorderBoxMembers>
    <MemberButton onClick={()=>{
      dispatch({type:SELECTCOMMNET,payload});
    }}>권은비</MemberButton>
    <MemberButton>강혜원</MemberButton>
    <MemberButton>최예나</MemberButton>
    <MemberButton>이채연</MemberButton>
    <MemberButton>김채원</MemberButton>
    <MemberButton>김민주</MemberButton>
    <MemberButton>야부키 나코</MemberButton>
    <MemberButton>혼다 히토미</MemberButton>
    <MemberButton>조유리</MemberButton>
    <MemberButton>안유진</MemberButton>
    <MemberButton>장원영</MemberButton>
    <MemberButton>사쿠라</MemberButton>
    </BorderBoxMembers>
    <StContainer>
    <LabelTextStyle><br/>{NickNameLabel}</LabelTextStyle>
    <InputContent/>
    <LabelTextStyle><br/>{contentNameLabel}</LabelTextStyle>
    <InputContent/>
    <LabelTextStyle><br/>{ WhoPush}</LabelTextStyle>
    <InputContent/>
    </StContainer>
    </>
  
    )
}
export default App;

느낀점

아이즈원을 주제로 만들고 있는데 인원이 12명이나 된다. 하드코딩을 줄이기 위해 uuid를 사용하였다.
하지만 위 코드와 같이 멤버 각각에 대한 댓글을 보기위해 12명의 버튼을 구현하는 것은 하드코딩을 할 수 밖에 없었다.
처음에 로딩될때 오래걸리는 리엑트 특성상 최대한 코드를 줄이는 것이 좋지만 추후에 알아봐서 리펙토링 할 생각이다.

예정 사항

• 버튼을 클릭하여 해당 멤버에 대한 comment가 따로따로 시각화 될 수 있게 진행 할 예정이다.
  기존에 하였던 Todolist 미니프로젝트를 참고하여 리펙토링 할 생각이다.

• UI를 아직 완성 다 못하였기 때문에 마무리를 해볼려고 한다.