Profile 페이지

Profile 페이지

외부 라이브러리 import

import { useEffect } from 'react';
import { useLocation, useParams } from 'react-router-dom';
import { useQuery } from 'react-query';
import { useRecoilState } from 'recoil';

• useEffect
페이지 로딩 시 edit 모드인지 read 모드인지 파악하기 위해 사용합니다.

• useLocation
수정 모드로 진입하기 위해 url 에서 해쉬값으로 #edit 을 검사하기 위한 용도로 사용합니다.

if (loaction.hash === '#edit') // ... 

• useParams
/profile/:userId 로 접근하기 때문에 parameter 로 사용자의 아이디를 가져옵니다.

• useRecoilState
edit 모드를 전역적으로 관리하기 위해 사용합니다.

내부 import

import { getUser } from '@apis/user';
import createTabItems from './utils/createTabItems';
import { editModeState } from './states/editMode';
import { ProfileInfoContainer, ProfilePage } from './Profile.style';
import { ProfileInfo } from './components/ProfileInfo';
import { ProfileCover } from './components/ProfileCover';
import { ProfileMain } from './components/ProfileMain';
import { ProfileEdit } from './components/ProfileEdit';

• getUser
사용자의 정보를 가져오기 위한 API 입니다.

• createTabItems
프로필 페이지의 탭을 만들기 위한 함수입니다.

• editModeState
editMode 라는 전역 상태 입니다.

• 기타 하위 컴포넌트들
• ProfileinfoContainer, ProfilePage (스타일 컴포넌트)
• ProfileInfo, ProfileCover, ProfileMain, ProfileMain

useEffect 로 edit 모드 판단하기

useEffect(() => {
  setEditMode(location.hash === '#edit');
}, [location.hash, setEditMode]);

react-query 로 사용자 정보를 가져오기

const { data, isLoading, isError, error } = useQuery(
	// 받아온 데이터를 'userData' 라는 키 값으로 저장합니다
	// getUser 에 userId 를 넘겨주기 위해 배열에 포함시킵니다
  ['userData', userId],
	// getUser 를 실행합니다
  () => getUser(userId),
	// userId 가 있는 경우에 query 를 가져옵니다
  { enabled: !!userId }
);

Profile 페이지 - getUser API

가져온 데이터를 통해 렌더링

const tabItems = createTabItems(data, isLoading);

// 1. 커버 이미지를 보여주는 컴포넌트입니다
<ProfileCover src={isLoading ? '' : data.cover} />
  <ProfileInfoContainer>
		// 2. 사용자의 정보를 보여주는 컴포넌트 입니다
    <ProfileInfo
      email={isLoading ? '' : data.email}
      fullName={isLoading ? '' : data.fullName}
      avatarImgSrc={isLoading ? '' : data.image}
      meditationStack={50}
    />
		// 3. editMode 일 경우 환경설정 버튼을, 아닐 경우 팔로잉 버튼을 보여줍니다
    {editMode ? <ProfileEdit /> : <ProfileMain tabItems={tabItems} />}
</ProfileInfoContainer>

💄 스타일 컴포넌트

• ProfilePage
Profile 페이지 전체를 감싸는 div 스타일 컴포넌트

• ProfileBackgroundContainer
커버 사진을 감싸는 스타일 컴포넌트

• ProfileContainer
기타 다른 프로필과 관련된 모든 정보를 감싸는 스타일 컴포넌트

<ProfilePage>
	<ProfileBackgroundContainer>
		// 백그라운드 컴포넌트 (커버 사진)
	</ProfileBackgroundContainer>
	<ProfileContainer>
		// 유저 프로필 컴포넌트 (프로필 사진, 이름, 이메일 등등)
		// 탭 컴포넌트
	</ProfileContainer>
</ProfilePage>

🐤 하위 컴포넌트

<ProfileBackground /> // 커버 사진 컴포넌트
<ProfileInfo /> // 유저 이름, 유저 이메일 등
<ProfileConfig /> // 프로필에 사용하는 버튼들
<ProfileTabs> // 프로필에 필요한 탭 컴포넌트
	<ProfileTabItem /> 
</ProfileTabs>
<ProfileCarousel /> // 탭 클릭시 각기 다른 내용을 보여주는 컴포넌트 

<ProfileBackground />

src: string
children: React.ReactNode

<ProfileInfo />

fullName: string
email: string
avatarImgSrc: string
meditationStack: number

<ProfileConfig />

<ProfileTabs />

ProfileCarousel

selectedTabIndex: number,
setSelectedTabIndex: (index: number) => void,
totalIndex: number