💄 design: 메인 페이지 디자인 변경

✅ 체크리스트

[x] 메인 페이지 styleX -> styled-component 적용
[x] 메인 페이지 디자인 UI 변경
[x] 메인 페이지에서 사용되던 reward,grass useQuery 훅 분리

📝 작업 상세 내용

grass API 주소 변경


// 변경 전

 GRASS: (memberId: Id) => `/main/grass/${memberId}`,

// 변경 후

  TOTAL_GRASS: (memberId: Id) => `/grass/${memberId}`,
  GRASS: (memberId: Id) => `/grass/main-page/${memberId}`,

API 주소에 main이 삭제되었습니다. 사용자의 전체 잔디를 불러오는 건 TOTAL_GRASS 사용자의 일기 개수나 잔디 기록을 불러오는 건 GRASS로 설정해 주었습니다.

useReward, useGrassRecord 훅 분리

// 변경 전 하나의 컴포넌트에 같이 작성 되었던 데이터 로직

const MiddleSection = () => {
  // 잔디 날짜 계산
  const currentDate = dayjs();
  const currentMonth = currentDate.format('M');
  const nextMonthFirstDay = currentDate.add(1, 'month').startOf('month');
  const currentMonthLastDay = nextMonthFirstDay.subtract(1, 'day');

  const { memberId } = useUser();

  // reward 쿼리
  const { data: reward } = useQuery<RewardPointResponse>({
    queryKey: ['rewardPoint'],
    queryFn: () =>
      API.get(END_POINT.TOTAL_REWARD(memberId)).then(response => response.data),
    initialData: { rewardPoint: 0 }, // 초기 데이터 설정
    enabled: !!memberId, // memberId가 있을 때만 쿼리를 실행
  });

  // grass 쿼리
  const { data: grassQuery } = useQuery<GrassApiResponse>({
    queryKey: ['grass'],
    queryFn: () =>
      API.get(END_POINT.GRASS(memberId)).then(response => response.data),
    enabled: !!memberId, // memberId가 있을 때만 쿼리를 실행
  });

// 변경 후 바뀐 디자인에 맞게 분리되어 사용

const MiddleSection = () => {
  const { grassQuery } = useGrassRecord();

const BottomSection = () => {
  const { reward } = useReward();

메인 페이지 컴포넌트에서 같이 사용되던 데이터 로직을 훅으로 분리했습니다. 원래는 코드 작성 시 해당 컴포넌트에서만 사용될 거 같다고 생각되어 같이 두었지만 당장 재사용하지 않을지라도 리유저블한 컴포넌트로 만든다는 의의를 두고 수정했습니다.

UI 변경

main pr

🚨 버그 발생 이유 (선택 사항)

🔎 후속 작업 (선택 사항)

메인 페이지와 채연 님의 공유 페이지에 같이 사용되는 TOP10 컴포넌트를 제외 UI 변경이 되었습니다. TOP10 컴포넌트는 제가 맡아서 바로 작업할 예정입니다.

🤔 질문 사항 (선택 사항)

questionPR

코드 리팩토링 후 페이지 로딩이 다시 좀 느려진 거 같은데 어떻게 해결할지 고민해 봐야 할 것 같습니다. 👀

📚 참고 자료 (선택 사항)

추가적인 참고 사항이나 관련된 문서, 링크 등을 제공해주세요.

📸 스크린샷 (선택 사항)

변경 사항에 대한 스크린샷이 있다면 첨부해주세요.

✅ 셀프 체크리스트

[x] 브랜치 확인하기
[x] 불필요한 코드가 들어가지 않았는지 재확인하기
[x] issue 닫기
[x] reiewers, assignees, Lables 등록 확인하기

이슈 번호: #167

CHZZK-Study / Grass-Diary-Client

💄 design: 메인 페이지 디자인 변경 #173