[애니모리] 기능 분배 및 화면 개발⭐

애니모리의 4주차가 되었고 개발시간이 다가왔다! 

 

애니모리 프론트엔드 화면은 대략 이런식으로 나누었는데 큼지막한 기능은 다같이 개발하기로 하였다. 개발 기간에는 주로 비대면 회의를 하고 기능 공동 개발할 때만 만나게 될 듯하다.

 

개별 분배

1. 상세조회

2. 로그인 + 회원가입
3. 보호소 프로필 + 프로필리스트(+더보기 페이지)

1.5 순위
4. GNB
5. 카테고리
6. 스켈레톤, 로더

다같이
7. 홈 

8. 근처 동물 보호소 보기
9. 등록하기(수정하기) 

 

4주차에는 개별 분배할 기능을 나누어 개발하기로 하였다.

나는 사다리를 통해 3번인 보호소프로필 + 프로필리스트를 맡게 되었다.

 

프로필 리스트에는 프로필 컴포넌트와 더보기 버튼, 페이지네이션으로 구성되어있고, 보호소프로필은 보호소 컴포넌트와 프로필 컴포넌트, 페이지네이션으로 구성되어있다. 그래서 프로필 카드 컴포넌트를 먼저 만들기로 했다.

 

VAC 패턴을 사용하기로 해서 프로필 카드 컴포넌트는 ProfileCard.tsx와 VProfileCard.tsx로 나누어 구현하였다.

 

 

ProfileCard.tsx

import { ProfileListProps } from 'components/organisms/VProfileListHome';
import { useNavigate } from 'react-router-dom';
import VProfileCard from './VProfileCard';

const ProfileCard = (data: ProfileListProps) => {
  return <VProfileCard {...data} />;
};

export default ProfileCard;

VProfileCard.tsx

interface VProfileInfoProps {
  image?: string;
  id?: number;
  name?: string;
  age?: number;
  shelter?: string;
  state?: string;
}

const VProfileCard = ({
  image,
  name,
  age,
  shelter,
  state,
}: VProfileInfoProps) => (
  <a href="/pet/1" className="flex items-center gap-2 p-2 sm:p-3">
  // href 주소는 데이터 받아올 때 수정할 예정
    <img className="relative w-35 cursor-pointer mr-3" src={image} alt="" />
    <div>
      <div className="flex flex-col-reverse">
        {name} ({age}살)
      </div>
      <div className="text-sm text-gray-400">{shelter}</div>
      <div className="font-bold">{state}</div>
    </div>
  </a>
);

export default VProfileCard;

 

이번에 eslint와 prettier를 적용하여 개발을 진행했는데 코드 컨벤션 안맞추면 오류가 나서 화면을 볼 수가 없었다.. 첨엔 좀 귀찮아도 다 구현하고 보니 역시 왜 쓰는 지 알겠다. 코드가 한눈에 들어온다! 이때까지 내가 쓴건 코드가 아니라 일기장인듯 ㅋㅋ,,

 

어쨋든 eslint를 쓰다가 순환해서 import를 하면 안된다는 사실을 알게되었다. 자칫 view에 함수를 만들어 vac에다가 넣어줄 수도 있는데 이걸 eslint가 막아줘서 vac 패턴을 더 잘 지킬 수 있게 되었다.

 

아직 백엔드 api가 제대로 나오지 않아서 데이터 받아오는 부분이 조잡한데 다음 주에 문서 다 나오면 수정할 예정이다!

 

다음 개발은 다음 포스팅에서~