diff --git a/co-kkiri/src/components/commons/CircularProgressBar.tsx b/co-kkiri/src/components/commons/CircularProgressBar.tsx index f5b9f06c..ac50b0a3 100644 --- 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 ( @@ -86,7 +87,7 @@ interface ProgressProps { } const Progress = styled.circle` - @keyframes ${({ $percentage }) => `progress-${$percentage}`} { + @keyframes ${({ $percentage }) => `progress-${Math.trunc($percentage)}`} { from { stroke-dashoffset: 100; } @@ -95,6 +96,6 @@ const Progress = styled.circle` } } - 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 index b05d8e36..f0b4090d 100644 --- 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({ - + {}} /> diff --git a/co-kkiri/src/components/commons/UserProfileCard/index.tsx b/co-kkiri/src/components/commons/UserProfileCard/index.tsx index bc3b8494..99283fb1 100644 --- 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 index 1ff6b650..da61883f 100644 --- 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 index cdf3d8c1..208c8d78 100644 --- 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" /> diff --git a/co-kkiri/src/components/domains/scout/ScoutCards.tsx b/co-kkiri/src/components/domains/scout/ScoutCards.tsx index de2c006f..455aaf2b 100644 --- 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) { ) : ( - {userProfiles?.map(({ memberId, profileImageUrl, nickname, position, career, stacks: stacks, score }) => ( + {userProfiles?.map(({ memberId, profileImageUrl, nickname, position, career, stacks: stacks, gauge }) => ( ))} diff --git a/co-kkiri/src/components/modals/EditUserProfileModal/EditUserProfileModalLayout.tsx b/co-kkiri/src/components/modals/EditUserProfileModal/EditUserProfileModalLayout.tsx index bc9c85ec..0d229635 100644 --- 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 index 71676dc3..9efd7a63 100644 --- 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 index 68fc7eb7..2c9b79d3 100644 --- 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 index 938272f0..b2b6b319 100644 --- 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 index f18586c4..a974299e 100644 --- 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((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((set) => ({ introduce, stack: data.stack, link, + gauge, }; } catch (error) { console.error("Failed to fetch user info:", error);