Merge pull request #194 from SOPT-36-NINEDOT/refactor/#193/myHistory

[Refactor] 나의 히스토리 뷰 리팩토링

Author: kwonsaebom

src/page/history/History.css.ts

@@ -24,8 +24,8 @@ export const titleContainer = style({
 });
 
 export const descriptionContainer = style({
-  marginTop: '2rem',
-  padding: '7.6rem 5rem',
+  marginTop: '2.3rem',
+  padding: '6.7rem 8.6rem',
   backgroundColor: colors.grey2,
   borderRadius: '12px',
   color: colors.grey11,
@@ -37,7 +37,7 @@ export const descriptionContainer = style({
 });
 
 export const streakTrackerWrapper = style({
-  paddingTop: '8rem',
+  paddingTop: '7.7rem',
   paddingBottom: '9.8rem',
 });
 

src/page/history/History.tsx

@@ -5,6 +5,7 @@ import StreakTracker from '@/page/history/StreakTrackerSection/StreakTrackerSect
 import { useGetHistory } from '@/api/domain/history/hook/useGetHistory';
 import { useMandalartId } from '@/common/hook/useMandalartId';
 import Loading from '@/common/component/Loading/Loading';
+import { useAuthStore } from '@/store/useAuthStore';
 
 const STREAK_BANNER_MESSAGE = '작은 실천을 66일 이어가면 나의 목표에 도달합니다';
 const STREAK_DESCRIPTION_MESSAGE = '하루에 하나라도 실천하면 오늘의 점이 찍혀요!';
@@ -14,6 +15,7 @@ const History = () => {
   const mandalartId = useMandalartId();
 
   const { data, isLoading } = useGetHistory(mandalartId);
+  const user = useAuthStore((state) => state.user);
 
   const handleOutsideClick = () => {
     setSelectedDay(null);
@@ -28,7 +30,7 @@ const History = () => {
       <div className={styles.layoutContainer}>
         <h1 className={styles.titleContainer}>{data.title}</h1>
         <p className={styles.descriptionContainer}>
-          김도트님, 목표를 향해 <br />
+          {user.name}님, 목표를 향해 <br />
           <strong className={styles.progressText}>{data.progressDays}</strong>일째 달려가고 있어요
         </p>
         <section className={styles.streakTrackerWrapper}>

src/page/history/StreakTrackerSection/StreakTrackerSection.css.ts

@@ -4,3 +4,7 @@ export const streakTrackerContainer = style({
   display: 'flex',
   gap: '2rem',
 });
+
+export const streakGridContainer = style({
+  flexGrow: '1',
+});

src/page/history/StreakTrackerSection/StreakTrackerSection.tsx

@@ -1,7 +1,6 @@
 import { useState } from 'react';
 
-import StreakDetail from '@/page/history/component/StreakDetail/StreakDetail';
-import StreakGrid from '@/page/history/component/StreakGrid/StreakGrid';
+import { StreakDetail, StreakGrid } from '@/page/history/component';
 import * as styles from '@/page/history/StreakTrackerSection/StreakTrackerSection.css';
 import { useGetStreak } from '@/api/domain/history/hook/useGetStreak';
 import { useMandalartId } from '@/common/hook/useMandalartId';
@@ -32,7 +31,7 @@ const StreakTracker = ({ selectedDay, setSelectedDay }: StreakTrackerProps) => {
 
   return (
     <div className={styles.streakTrackerContainer}>
-      <div onClick={(e) => e.stopPropagation()}>
+      <div onClick={(e) => e.stopPropagation()} className={styles.streakGridContainer}>
         <StreakGrid streaks={data.streaks} onHover={setHoveredDay} onSelect={setSelectedDay} />
       </div>
       <StreakDetail detailData={detailData} />

src/page/history/component/StreakDetail/StreakDetail.css.ts

@@ -1,7 +1,7 @@
 import { recipe } from '@vanilla-extract/recipes';
 import { style } from '@vanilla-extract/css';
 
-import { colors, fonts } from '@/style/token';
+import { colors, fonts, layout } from '@/style/token';
 
 export const detailContainer = recipe({
   base: {
@@ -11,11 +11,7 @@ export const detailContainer = recipe({
   },
   variants: {
     state: {
-      empty: {
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-      },
+      empty: layout.flexCenter,
       filled: {
         padding: '3rem',
       },
@@ -43,11 +39,12 @@ export const todoCount = style({
   ...fonts.subtitle01,
 });
 
-export const todoList = style({
-  display: 'flex',
-  flexDirection: 'column',
-  gap: '1.2rem',
-  marginTop: '2.4rem',
-  color: colors.grey11,
-  ...fonts.body03,
-});
+export const todoList = style([
+  layout.flexColumn,
+  {
+    gap: '1.2rem',
+    marginTop: '2.4rem',
+    color: colors.grey11,
+    ...fonts.body03,
+  },
+]);

src/page/history/component/StreakDetail/StreakDetail.tsx

@@ -1,8 +1,6 @@
 import * as styles from '@/page/history/component/StreakDetail/StreakDetail.css';
 import type { Streak } from '@/page/history/type/StreakDataType';
 
-const DEFAULT_MESSAGE = '원하는 날의 점을 클릭하고 <br/> 그날 내가 한 일을 확인해보세요!';
-
 type StreakDetailProps = {
   detailData?: Streak;
 };
@@ -14,7 +12,9 @@ const StreakDetail = ({ detailData }: StreakDetailProps) => {
   if (isEmpty) {
     return (
       <div className={styles.detailContainer({ state })}>
-        <p className={styles.defaultText} dangerouslySetInnerHTML={{ __html: DEFAULT_MESSAGE }} />
+        <p className={styles.defaultText}>
+          원하는 날의 점을 클릭하고 <br /> 그날 내가 한 일을 확인해보세요!
+        </p>
       </div>
     );
   }

src/page/history/component/index.ts

@@ -0,0 +1,2 @@
+export { default as StreakDetail } from '@/page/history/component/StreakDetail/StreakDetail';
+export { default as StreakGrid } from '@/page/history/component/StreakGrid/StreakGrid';