23.11.21 리액트 개인과제 해설 클론코딩-2- 팀별과제 시작.

어제 마무리못한 프로젝트를 마저 작업해보았다 그저 따라 치는거지만서도 해설도 같이 들으니

어느정도 윤곽은 이해되는중이다

 

프로젝트 요구사항

• [ ] (5) 홈 화면 UI: 배너 및 헤더 파트 UI 구현
• 아티스트탭에서 아티스트를 클릭했을 때 어떤 탭이 활성화되었는지 styled-components의 조건부 스타일링을 적용해 보세요.

 

 

이제 이부분을 구현하기위해 useState 사용 초기 상태는 "카리나"

export default function Tabs() {
  const [activeMember, setactiveMember] = useState("카리나");

  return (
    <TabsWrapper>
      <Tab $activeMember={activeMember}>카리나</Tab>
      <Tab $activeMember={activeMember}>윈터</Tab>
      <Tab $activeMember={activeMember}>닝닝</Tab>
      <Tab $activeMember={activeMember}>지젤</Tab>
    </TabsWrapper>
  );
}

 

현재 <Tab> 이라는 스타일컴포넌트에 useState상태인activeMember를 넘겨줬는데

주의 사항으로는 (카멜케이스를 사용한다면 앞에 $를 붙여야하고 모두 소문자로 작성한다면 안붙여도된다는점)

 

• 아티스트탭에서 아티스트를 클릭했을 때 어떤 탭이 활성화되었는지 styled-components의 조건부 스타일링을 적용해 보세요.

const Tab = styled.li`
  ${(props) => {
    if (props.$activeMember === props.children) {
      return css`
        background-color: yellow;
        color: black;
      `;
    }
    return css`
      background-color: black;
      color: white;
    `;
  }}

 

그리고 해당 아티스트 탭이 활성화 되었을때 표시를 하기위해

if (props.$activeMember === props.children) => 만약 엑티브 와 칠드런프랍스가 같다면

노란 배경 검정표시 를 나오게 하였습니다

 

이제 클릭이벤트 핸들러를 심어야하는데 각각 심어도 되지만 구조가 간단하기에 onClick={onActiveMember}

을 Tab의 부모인 TabsWrapper 장착한후 ,onActiveMember 이벤트 핸들러 생성

export default function Tabs() {
  const [activeMember, setactiveMember] = useState("카리나");
  const onActiveMember = (event) => {
    if (event.target === event.currentTarget) return;
// 위에 fi 는 탭 부분이 아닌 회색부분을 눌렀을경우 함수를 바로 종료시킴 

    setactiveMember(event.target.textContent); //내가 클릭한 텍스트 ex)카리나,윈터  로 스테이트변경
  };
  return (
    <TabsWrapper onClick={onActiveMember}>
      <Tab $activeMember={activeMember}>카리나</Tab>
      <Tab $activeMember={activeMember}>윈터</Tab>
      <Tab $activeMember={activeMember}>닝닝</Tab>
      <Tab $activeMember={activeMember}>지젤</Tab>
    </TabsWrapper>
  );
}

 

---

(6) 홈 화면 UI: Dummy Data(fakeData.json)를 이용한 리스트 UI 구현

[
  {
    "createdAt": "2023-11-03T02:07:09.423Z",
    "nickname": "Dr. Clint Christiansen",
    "avatar": "https://cloudflare-ipfs.com/ipfs/Qmd3W5DuhgHirLHGVixi6V76LhCkZUz6pnFt5AJBiyvHye/avatar/36.jpg",
    "content": "카리나1 Vitae recusandae tenetur debitis impedit ut dolorem atque reprehenderit magnam. Cum dolor magnam commodi qui perferendis. Vel temporibus soluta. Eum delectus blanditiis. Neque dicta non quod ex. Maiores aspernatur fuga reprehenderit a magni eaque fuga voluptatum hic.",
    "writedTo": "카리나",
    "id": "1"
  },
  {
    "createdAt": "2023-11-02T23:13:18.491Z",
    "nickname": "Chad Graham",
    "avatar": "https://cloudflare-ipfs.com/ipfs/Qmd3W5DuhgHirLHGVixi6V76LhCkZUz6pnFt5AJBiyvHye/avatar/298.jpg",
    "content": "지젤1 Ipsam aspernatur nostrum eos unde velit molestiae dolorem. Tenetur ullam nostrum pariatur. Et in eos. Harum commodi ipsa quaerat aspernatur quod dignissimos quae quidem sapiente.",
    "writedTo": "지젤",
    "id": "2"
  },
  {
    "createdAt": "2023-11-02T11:25:37.026Z",
    "nickname": "Tommy Abshire",
    "avatar": "https://cloudflare-ipfs.com/ipfs/Qmd3W5DuhgHirLHGVixi6V76LhCkZUz6pnFt5AJBiyvHye/avatar/646.jpg",
    "content": "윈터1 Itaque nihil quae neque itaque. Non a officiis ducimus nemo consectetur. Ducimus libero voluptatum consequuntur.",
    "writedTo": "윈터",
    "id": "3"
  },
  {
    "createdAt": "2023-11-02T16:06:34.150Z",
    "nickname": "Max Mayert",
    "avatar": "https://cloudflare-ipfs.com/ipfs/Qmd3W5DuhgHirLHGVixi6V76LhCkZUz6pnFt5AJBiyvHye/avatar/37.jpg",
    "content": "닝닝1 Sint qui eligendi repudiandae placeat maiores repudiandae assumenda repudiandae. Distinctio commodi iste. Qui architecto iusto.",
    "writedTo": "닝닝",
    "id": "4"
  },
  {
    "createdAt": "2023-11-03T05:40:17.575Z",
    "nickname": "Olga Christiansen",
    "avatar": "https://cloudflare-ipfs.com/ipfs/Qmd3W5DuhgHirLHGVixi6V76LhCkZUz6pnFt5AJBiyvHye/avatar/720.jpg",
    "content": "카리나2 Molestiae saepe reiciendis saepe natus quo occaecati. Vel vero illum quo. Ducimus maiores porro optio illum officia nam. Cum possimus aut consequatur eaque libero ad nihil pariatur officiis.",
    "writedTo": "카리나",
    "id": "5"
  }
]

 

fakeData.json 라는 파일을 src에 생성 따로 export하지 않아도 LetterList.jsx 에서 import가 잘작동되었다

UI 구성은 겉에 박스는 ul 안에는 li를 이용해서 만들기로했다

감싸고있는 ListWrapper은ul을 이용해 만들어주고

export default function LetterList() {
  return (
    <ListWrapper>
      <LetterCard />
    </ListWrapper>
  );
}

const ListWrapper = styled.ul`
  background-color: black;
  display: flex;
  flex-direction: column;
  gap: 20px;

  width: 500px;
  border-radius: 12px;
`;

 

내부 li는 다시 세부적인 컴포넌트로 나눈다

컴포넌트를 만들기전에 미리 설계를 하고가니 훨씬더 효율적인거같다

원래는 항상 계획없이 일단 컴포넌트를 생성해왔는데 미리 설계를 하고들어가니 훨씬더 깔끔했다

 

 

뭔가 많이했다고 생각했는데 이제 한칸 만들어졌다 현업에 가면 몇백줄이아니라 몇천줄짜리도있다던데

과연 내가 할수있을까? 싶기도 하다 해설강의 영상을 보다보면 진짜 내가 아무말 타자 치는것마냥

자연스럽게 코드작성을 하시는데 참 신기하다

const LetterWrapper = styled.li`
  display: flex;
  gap: 12px;
  flex-direction: column;
  color: white;
  padding: 12px;
  border: 1px solid white;
  border-radius: 12px;
`;
const UserInfo = styled.div`
  display: flex;
  gap: 12px;
  flex-direction: center;
`;

const AvataFigure = styled.figure`
  //figure태그안에는 이미 자식요소로 이미지 태그가있음
  width: 50px;
  height: 50px;
  border-radius: 50%; //높이넓이가같을때 보더 래디우스를 50%주면 동그래짐
  overflow: hidden; //이미지가 삐져나오면 숨겨줌
  & img {
    width: 100%;
    height: 100%;
    object-fit: cover; //이미지 크기가 피규어 크기만큼 꽉차게 빈틈없이만들어줌
    border-radius: 50%;
  }
`;
const NicknameAndData = styled.div`
  display: flex;
  gap: 6px;
  flex-direction: column;
`;

const Content = styled.p`
  border-radius: 12px;
  background-color: gray;
  padding: 12px;
`;

 

클론 코딩이라 보면서 따라하면 금방 할줄알았는데 하나하나 정리하면서 하다보니 생각보다 시간이

조금 걸리고있다..

 

 

이제 팀별 과제도 시작되어서 피그마를 이용해 와이어 프레임을 만들고있다

이전에 그림판으로 작업하는 것보다 훨씬 수월하다 일단 오늘은 조원중 한분이 예비군을 가셔서

내일 추가적인 회의가 진행될듯하다