Closed KKYHH closed 2 months ago
// λ³κ²½ μ GRASS: (memberId: Id) => `/main/grass/${memberId}`, // λ³κ²½ ν TOTAL_GRASS: (memberId: Id) => `/grass/${memberId}`, GRASS: (memberId: Id) => `/grass/main-page/${memberId}`,
API μ£Όμμ mainμ΄ μμ λμμ΅λλ€. μ¬μ©μμ μ 체 μλλ₯Ό λΆλ¬μ€λ 건 TOTAL_GRASS μ¬μ©μμ μΌκΈ° κ°μλ μλ κΈ°λ‘μ λΆλ¬μ€λ 건 GRASSλ‘ μ€μ ν΄ μ£Όμμ΅λλ€.
TOTAL_GRASS
GRASS
// λ³κ²½ μ νλμ μ»΄ν¬λνΈμ κ°μ΄ μμ± λμλ λ°μ΄ν° λ‘μ§ 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();
λ©μΈ νμ΄μ§ μ»΄ν¬λνΈμμ κ°μ΄ μ¬μ©λλ λ°μ΄ν° λ‘μ§μ ν μΌλ‘ λΆλ¦¬νμ΅λλ€. μλλ μ½λ μμ± μ ν΄λΉ μ»΄ν¬λνΈμμλ§ μ¬μ©λ κ±° κ°λ€κ³ μκ°λμ΄ κ°μ΄ λμμ§λ§ λΉμ₯ μ¬μ¬μ©νμ§ μμμ§λΌλ 리μ μ λΈν μ»΄ν¬λνΈλ‘ λ§λ λ€λ μμλ₯Ό λκ³ μμ νμ΅λλ€.
λ©μΈ νμ΄μ§μ μ±μ° λμ 곡μ νμ΄μ§μ κ°μ΄ μ¬μ©λλ TOP10 μ»΄ν¬λνΈλ₯Ό μ μΈ UI λ³κ²½μ΄ λμμ΅λλ€. TOP10 μ»΄ν¬λνΈλ μ κ° λ§‘μμ λ°λ‘ μμ ν μμ μ λλ€.
μ½λ 리ν©ν λ§ ν νμ΄μ§ λ‘λ©μ΄ λ€μ μ’ λλ €μ§ κ±° κ°μλ° μ΄λ»κ² ν΄κ²°ν μ§ κ³ λ―Όν΄ λ΄μΌ ν κ² κ°μ΅λλ€. π
μΆκ°μ μΈ μ°Έκ³ μ¬νμ΄λ κ΄λ ¨λ λ¬Έμ, λ§ν¬ λ±μ μ 곡ν΄μ£ΌμΈμ.
λ³κ²½ μ¬νμ λν μ€ν¬λ¦°μ·μ΄ μλ€λ©΄ 첨λΆν΄μ£ΌμΈμ.
μ΄μ λ²νΈ: #167
μν¬λ 리뷰 μμ² κΌΌκΌΌνμλ€μ!! 리뷰λ μ΄λ κ² νλ κ±°κ΅°μ!
β 체ν¬λ¦¬μ€νΈ
π μμ μμΈ λ΄μ©
grass API μ£Όμ λ³κ²½
API μ£Όμμ mainμ΄ μμ λμμ΅λλ€. μ¬μ©μμ μ 체 μλλ₯Ό λΆλ¬μ€λ 건
TOTAL_GRASS
μ¬μ©μμ μΌκΈ° κ°μλ μλ κΈ°λ‘μ λΆλ¬μ€λ 건GRASS
λ‘ μ€μ ν΄ μ£Όμμ΅λλ€.useReward, useGrassRecord ν λΆλ¦¬
λ©μΈ νμ΄μ§ μ»΄ν¬λνΈμμ κ°μ΄ μ¬μ©λλ λ°μ΄ν° λ‘μ§μ ν μΌλ‘ λΆλ¦¬νμ΅λλ€. μλλ μ½λ μμ± μ ν΄λΉ μ»΄ν¬λνΈμμλ§ μ¬μ©λ κ±° κ°λ€κ³ μκ°λμ΄ κ°μ΄ λμμ§λ§ λΉμ₯ μ¬μ¬μ©νμ§ μμμ§λΌλ 리μ μ λΈν μ»΄ν¬λνΈλ‘ λ§λ λ€λ μμλ₯Ό λκ³ μμ νμ΅λλ€.
UI λ³κ²½
π¨ λ²κ·Έ λ°μ μ΄μ (μ ν μ¬ν)
π νμ μμ (μ ν μ¬ν)
λ©μΈ νμ΄μ§μ μ±μ° λμ 곡μ νμ΄μ§μ κ°μ΄ μ¬μ©λλ TOP10 μ»΄ν¬λνΈλ₯Ό μ μΈ UI λ³κ²½μ΄ λμμ΅λλ€. TOP10 μ»΄ν¬λνΈλ μ κ° λ§‘μμ λ°λ‘ μμ ν μμ μ λλ€.
π€ μ§λ¬Έ μ¬ν (μ ν μ¬ν)
μ½λ 리ν©ν λ§ ν νμ΄μ§ λ‘λ©μ΄ λ€μ μ’ λλ €μ§ κ±° κ°μλ° μ΄λ»κ² ν΄κ²°ν μ§ κ³ λ―Όν΄ λ΄μΌ ν κ² κ°μ΅λλ€. π
π μ°Έκ³ μλ£ (μ ν μ¬ν)
μΆκ°μ μΈ μ°Έκ³ μ¬νμ΄λ κ΄λ ¨λ λ¬Έμ, λ§ν¬ λ±μ μ 곡ν΄μ£ΌμΈμ.
πΈ μ€ν¬λ¦°μ· (μ ν μ¬ν)
λ³κ²½ μ¬νμ λν μ€ν¬λ¦°μ·μ΄ μλ€λ©΄ 첨λΆν΄μ£ΌμΈμ.
β μ ν 체ν¬λ¦¬μ€νΈ
μ΄μ λ²νΈ: #167