Fix: gauge 못받아오는 문제 해결

co-KKIRI · Apr 4, 2024 · 54c2cac · 54c2cac
1 parent 7c7b2f1
commit 54c2cac
Show file tree

Hide file tree

Showing 11 changed files with 19 additions and 23 deletions.
diff --git a/co-kkiri/src/components/commons/CircularProgressBar.tsx b/co-kkiri/src/components/commons/CircularProgressBar.tsx
@@ -1,6 +1,6 @@
 import { HexColor } from "@/types/styledUtilTypes";
 import { isValidHexColor } from "@/utils/validationUtils";
-import { useId } from "react";
+import { useEffect, useId, useLayoutEffect } from "react";
 import styled from "styled-components";
 
 interface CircularProgressBarProps {
@@ -26,6 +26,7 @@ export default function CircularProgressBar({
 }: CircularProgressBarProps) {
   const id = useId();
 
+
   return (
     <Container className={className} $strokeWidth={strokeWidth}>
       <svg xmlns="http://www.w3.org/2000/svg" width={`${size / 10}rem`} height={`${size / 10}rem`}>
@@ -86,7 +87,7 @@ interface ProgressProps {
 }
 
 const Progress = styled.circle<ProgressProps>`
-  @keyframes ${({ $percentage }) => `progress-${$percentage}`} {
+  @keyframes ${({ $percentage }) => `progress-${Math.trunc($percentage)}`} {
     from {
       stroke-dashoffset: 100;
     }
@@ -95,6 +96,6 @@ const Progress = styled.circle<ProgressProps>`
     }
   }
 
-  animation: ${({ $percentage }) => `progress-${$percentage}`} ${({ $animationDuration }) => ($animationDuration ? `${$animationDuration}s` : `0.8s`)} ease-out
-    forwards 1;
+  animation: ${({ $percentage }) => `progress-${Math.trunc($percentage)}`}
+    ${({ $animationDuration }) => ($animationDuration ? `${$animationDuration}s` : `0.8s`)} ease-out forwards 1;
 `;
diff --git a/co-kkiri/src/components/commons/UserProfileCard/UserProfileCardLayout.tsx b/co-kkiri/src/components/commons/UserProfileCard/UserProfileCardLayout.tsx
@@ -9,7 +9,6 @@ import { UserInfoApiResponseDto } from "@/lib/api/myPage/type";
 import { emptyMessages } from "./constants";
 
 interface UserProfileCardProps extends UserInfoApiResponseDto {
-  score: number;
   cardType?: "mypage" | "scout";
 }
 
@@ -20,7 +19,7 @@ export default function UserProfileCardLayout({
   career,
   stack,
   stacks,
-  score,
+  gauge,
   introduce,
   link,
   cardType,
@@ -34,7 +33,7 @@ export default function UserProfileCardLayout({
     <S.Container>
       <S.InfoBox>
         <S.ProgressWrapper>
-          <CircularProgressBar size={130} strokeWidth={8} percentage={score} animationDuration={1} />
+          <CircularProgressBar size={130} strokeWidth={8} percentage={gauge} animationDuration={1} />
           <S.UserImage profileImgUrl={profileImageUrl} onSelect={() => {}} />
         </S.ProgressWrapper>
         <S.PositionChip label={isEmptyValue(position) ? emptyMessages.position : position!} />

diff --git a/co-kkiri/src/components/commons/UserProfileCard/index.tsx b/co-kkiri/src/components/commons/UserProfileCard/index.tsx
@@ -4,7 +4,6 @@ import DESIGN_TOKEN from "@/styles/tokens";
 import { UserInfoApiResponseDto } from "@/lib/api/myPage/type";
 
 interface UserProfileCardProps extends UserInfoApiResponseDto {
-  score: number;
   cardType?: "mypage" | "scout";
 }
 

diff --git a/co-kkiri/src/components/domains/myPage/MyPageUserInfo.tsx b/co-kkiri/src/components/domains/myPage/MyPageUserInfo.tsx
@@ -62,7 +62,7 @@ export default function MyPageUserInfo({ visibleProfile }: MyPageUserInfoProps)
           position={user.userInfo?.position}
           career={user.userInfo?.career}
           stack={user.userInfo?.stack || []}
-          score={40}
+          gauge={user.userInfo?.gauge || 0}
           introduce={user.userInfo?.introduce}
           link={user.userInfo?.link}
           cardType="mypage"

diff --git a/co-kkiri/src/components/domains/scout/ScoutCard.tsx b/co-kkiri/src/components/domains/scout/ScoutCard.tsx
@@ -18,7 +18,7 @@ export default function ScoutCard(props: ScoutCardProps) {
           position={props.position}
           career={props.career}
           stack={props.stacks}
-          score={props.score}
+          gauge={props.gauge}
           cardType="scout"
         />
       </Container>

diff --git a/co-kkiri/src/components/domains/scout/ScoutCards.tsx b/co-kkiri/src/components/domains/scout/ScoutCards.tsx
@@ -17,7 +17,7 @@ export default function ScoutCards({ userProfiles }: ScoutCardsProps) {
         <NoResultText text="검색 결과가 없어요." padding={120} color="black" />
       ) : (
         <Wrapper $isSidebarOpenNarrow={isSidebarOpenNarrow}>
-          {userProfiles?.map(({ memberId, profileImageUrl, nickname, position, career, stacks: stacks, score }) => (
+          {userProfiles?.map(({ memberId, profileImageUrl, nickname, position, career, stacks: stacks, gauge }) => (
             <ScoutCard
               key={memberId}
               memberId={memberId}
@@ -26,7 +26,7 @@ export default function ScoutCards({ userProfiles }: ScoutCardsProps) {
               position={position}
               career={career}
               stacks={stacks}
-              score={score}
+              gauge={gauge}
             />
           ))}
         </Wrapper>

diff --git a/co-kkiri/src/components/modals/EditUserProfileModal/EditUserProfileModalLayout.tsx b/co-kkiri/src/components/modals/EditUserProfileModal/EditUserProfileModalLayout.tsx
@@ -1,6 +1,6 @@
 import { useForm } from "react-hook-form";
 import { useUserInfoStore } from "@/stores/userInfoStore";
-import { UserInfoEditApiRequestDto } from "@/lib/api/myPage/type";
+import { UserInfoApiResponseDto, UserInfoEditApiRequestDto } from "@/lib/api/myPage/type";
 import EditUserProfileModalForm from "./EditUserProfileModalForm";
 import { useState } from "react";
 import { useImageMutation } from "@/hooks/useMutation/useImageMutation";
@@ -20,7 +20,7 @@ export default function EditUserProfileModalLayout({ onSubmit }: EditUserProfile
   });
 
   const onSubmitHandler = async (data: UserInfoEditApiRequestDto) => {
-    const submitData = { ...data };
+    const { gauge, ...submitData } = { ...data } as UserInfoApiResponseDto;
 
     let imageUrl = userInfo?.profileImageUrl;
 

diff --git a/co-kkiri/src/components/modals/EditUserProfileModal/index.tsx b/co-kkiri/src/components/modals/EditUserProfileModal/index.tsx
@@ -28,11 +28,6 @@ export default function EditUserProfileModal({ onClose }: EditUserProfileModalPr
   );
 }
 
-const { mediaQueries } = DESIGN_TOKEN;
-
 const ModalLayout = styled(DefaultModalLayout)`
   padding: 4rem 3rem 3rem 3rem;
-
-  ${mediaQueries.mobile} {
-  }
 `;
diff --git a/co-kkiri/src/lib/api/member/type.ts b/co-kkiri/src/lib/api/member/type.ts
@@ -10,7 +10,7 @@ export type MemberProfile = {
   stacks: string[];
   gauge: number;
   isVisibleProfile: boolean;
-  // tage: Tag // TODO: 추후 작업예정
+	isMine: boolean;
 };
 
 export type MemberProfileApiResponseDto = MemberProfile;
@@ -23,7 +23,7 @@ export type SearchedMemberProfile = {
   position: string;
   career: number;
   stacks: string[];
-  score: number;
+  gauge: number;
 };
 
 export type SearchedMemberProfileApiResponseDto = {

diff --git a/co-kkiri/src/lib/api/myPage/type.ts b/co-kkiri/src/lib/api/myPage/type.ts
@@ -11,6 +11,7 @@ export type UserInfoApiResponseDto = {
   stack?: string[];
   stacks?: string[];
   link?: string;
+  gauge: number;
 };
 
 // 내가 받은 태그 정보

diff --git a/co-kkiri/src/stores/userInfoStore.ts b/co-kkiri/src/stores/userInfoStore.ts
@@ -5,7 +5,7 @@ import { create } from "zustand";
 
 interface UserInfoState {
   userId: number | null;
-  userInfo: UserInfoEditApiRequestDto | null;
+  userInfo: UserInfoApiResponseDto | null;
   isLoading: boolean;
   isVisible: boolean;
 }
@@ -38,7 +38,7 @@ export const useUserInfoStore = create<UserInfoStore>((set) => ({
     let userProfile: UserInfoApiResponseDto | null = null;
     try {
       const data: UserInfoApiResponseDto = await getUserInfo();
-      const { nickname, profileImageUrl, position, career, introduce, link } = data;
+      const { nickname, profileImageUrl, position, career, introduce, link, gauge } = data;
       userProfile = {
         nickname,
         profileImageUrl,
@@ -47,6 +47,7 @@ export const useUserInfoStore = create<UserInfoStore>((set) => ({
         introduce,
         stack: data.stack,
         link,
+        gauge,
       };
     } catch (error) {
       console.error("Failed to fetch user info:", error);