<aside>

📋전달 받은 페이지

🎨피그마 링크

💁QA 목록

🔗배포 링크

</aside>

3주차(프디 협업 과제#1) 정리

4주차 세션 이후

1. 프로필 페이지

피그마 페이지

구현한 페이지

MyProfile.tsx

구성:

1. ProfileHeader

2. My(내 프로필)

3. Member (전체 멤버 수 + 전체보기 버튼)

   1. zustand로 처음에 링크가 실행됐을 때 member.json의 내용을 읽어서 members 배열에 저장
   2. const members = useMembersStore((state) => state.members)를 통해 그 값을 읽어와서 멤버수 표시
   3. 전체 보기 버튼 → 전체 멤버 리스트 페이지(ChatList.tsx)로 넘어감

4. Favorites (즐겨찾기 목록)

   1. 마찬가지로 members를 읽어오고, 즐겨찾기되어있는 멤버만 따로 filter → 즐겨찾기 인원수 표시
   2. 화살표 버튼을 누르면 즐겨찾기(favorite)되어있는 경우만 랜더링되도록 함
   3. 코드

   const members = useMembersStore((state) => state.members)
     const [isOpen, setIsOpen] = useState(false)
   ...
     const favoriteMembers = members.filter((member) => member.favorite)
   
     return (
       ...
         {isOpen && (
           <div className="pb-2">
             {favoriteMembers.map((member) => (
               <OtherProfile
                 key={member.id}
                 profile={member}
               />
             ))}
           </div>
         )}
       </div>
     )
   

5. Todo

6. Schedule → 5번, 6번 컴포넌트는 생성 이후 다른 기능을 추가하지는 않음

2. 친구 목록 페이지

피그마 페이지

실제 페이지