feat: 지난 티어 추가

Author: whale22

src/pages/Home.jsx

@@ -23,6 +23,7 @@ const Home = () => {
  const [userInfo, setUserInfo] = useState({});
  const [userLoading, setUserLoading] = useState(true);
  const [userError, setUserError] = useState(null);
+ const [prevTier, setPrevTier] = useState(null);
 
  const [loading, setLoading] = useState(true);
  const [user, setUser] = useState(null);
@@ -38,6 +39,15 @@ const Home = () => {
  const navigate = useNavigate();
  const [client, setClient] = useState(null); // WebSocket 클라이언트 상태
 
+ // 티어 아이콘 매핑
+ const tierEmojis = {
+ NONE: "❌미획득",
+ SEED: "🫘씨앗",
+ SPROUT: "🌱새싹",
+ FLOWER: "🌺꽃",
+ FRUIT: "🍎열매",
+ TREE: "🌳나무",
+ };
 
  // 사용자 정보 불러오기
  useEffect(() => {
@@ -56,6 +66,33 @@ const Home = () => {
  fetchUserInfo();
  }, []);
 
+// 업적 기록을 가져오기
+const fetchTierInfo = async () => {
+ try {
+ const response = await fetch("/api/user/tierinfo");
+ const data = await response.json();
+
+ // "2025년 겨울 시즌" 데이터 필터링
+ const winterTier = data.find(item => item.year === "2025" && item.season === "winter");
+
+ if (winterTier) {
+ console.log("겨울 시즌 티어:", winterTier.tier);
+ setPrevTier(winterTier.tier); // 상태로 저장하여 UI에 반영
+ } else {
+ console.log("겨울 시즌 데이터 없음");
+ setPrevTier("미획득");
+ }
+ } catch (error) {
+ console.error("Tier 정보를 가져오는 중 오류 발생:", error);
+ }
+};
+
+// useEffect를 사용하여 API 호출
+useEffect(() => {
+ fetchTierInfo();
+}, []);
+
+
  const toggleModal = async () => {
  // 읽은 알림들을 필터링하여 제거
  setNotifications(prev => prev.filter(noti => !noti.read));
@@ -496,10 +533,14 @@ useEffect(() => {
  {seasonData[season].restrictedContributionsCount}
  </td>
  <td className="table-cell table-cell-center">
-
- <span className={`streak-badge`}>
- 미획득
- </span>
+ {season === "winter" ? (
+ <span className="streak-badge">
+ {tierEmojis[prevTier] || tierEmojis['NONE']}
+ </span>
+ ) : (
+ <span className="streak-badge">
+ {tierEmojis['NONE']}</span>
+ )}
  </td>
  <td className="table-cell table-cell-center">
  <span className={`streak-badge ${seasonData[season].maxStreakDays > 0 ? 'max-streak-badge' : 'zero-value'}`}>

src/pages/Profile.jsx

@@ -11,15 +11,17 @@ const Profile = ({ userInfo }) => {
  const [isRefreshing, setIsRefreshing] = useState(false);
  const refreshTimerRef = useRef(null);
 
- const maxExp = userInfo.petGrow === "EGG" ? 150 : userInfo.petGrow === "HATCH" ? 300 : 300;
+ //FIXME: 테스트를 위해 수치 줄임. 차후 150/300으로 변경 필요.
+ const maxExp = userInfo.petGrow === "EGG" ? 20 : userInfo.petGrow === "HATCH" ? 40 : 40;
 
  // 티어 아이콘 매핑
  const tierEmojis = {
- SEED: "🫘",
- SPROUT: "🌱",
- FLOWER: "🌺",
- FRUIT: "🍎",
- TREE: "🌳",
+ NONE: "❌미획득",
+ SEED: "🫘씨앗",
+ SPROUT: "🌱새싹",
+ FLOWER: "🌺꽃",
+ FRUIT: "🍎열매",
+ TREE: "🌳나무",
  };
 
  // 펫 성장 단계 한글화
@@ -170,7 +172,7 @@ useEffect(() => {
  <div className="avatar-container">
  <img src={userInfo.avatarUrl} alt="User Avatar" />
  </div>
- <span className="username">{userInfo.nickname || "사용자"}({userInfo.username || "사용자"})</span>
+ <span className="username">{userInfo.nickname || userInfo.username}({userInfo.username || "사용자"})</span>
  </div>
 
  {/* 유저 세부 정보 */}
@@ -193,7 +195,7 @@ useEffect(() => {
  <span className="detail-icon">🏆</span>
  <span className="detail-text">
  티어: <span className="tier-badge">
- {tierEmojis[userInfo.tier] || ""} {userInfo.tier || "없음"}
+ {tierEmojis[userInfo.tier] || ""}
  </span>
  </span>
  </div>