diff --git a/__test__/components/Sidebar/ChannelCircle/ChannelCircle.test.tsx b/__test__/components/Sidebar/ChannelCircle/ChannelCircle.test.tsx index 4d3da38..c91ce0e 100644 --- a/__test__/components/Sidebar/ChannelCircle/ChannelCircle.test.tsx +++ b/__test__/components/Sidebar/ChannelCircle/ChannelCircle.test.tsx @@ -6,20 +6,20 @@ describe('채널 테스트', () => { const initalState: ChannelCircleProps = { channelLink: 'ab5gx', title: '부경대 총장기', - category: 0, + gameCategory: 0, customChannelIndex: 0, }; it('채널 이름을 가진 컴포넌트가 있다.', () => { render(); - const nameEl = screen.getByText('부경대 총장기'); + const nameEl = screen.getByText('부경'); expect(nameEl).toBeInTheDocument(); }); const initalState2 = { channelLink: 'ab5gx', title: '부경대 총장기', - category: 0, + gameCategory: 0, imgSrc: '1.jpeg', customChannelIndex: 1, }; diff --git a/src/@types/channelCircle.ts b/src/@types/channelCircle.ts index 66f6885..0b96d5e 100644 --- a/src/@types/channelCircle.ts +++ b/src/@types/channelCircle.ts @@ -1,7 +1,7 @@ export interface ChannelCircleProps { channelLink: string; title: string; - category: number; + gameCategory: number; imgSrc?: string; customChannelIndex: number; } diff --git a/src/components/Sidebar/ChannelBar/ChannelBar.tsx b/src/components/Sidebar/ChannelBar/ChannelBar.tsx index 6a7c6aa..5a21401 100644 --- a/src/components/Sidebar/ChannelBar/ChannelBar.tsx +++ b/src/components/Sidebar/ChannelBar/ChannelBar.tsx @@ -38,31 +38,38 @@ const ChannelBar = ({ channels, updateSelectedChannel }: ChannelBarProps) => { {(provided, snapshot) => ( {channels && - channels.map(({ channelLink, title, category, customChannelIndex }, index) => ( - - {(provided, snapshot) => ( - updateSelectedChannel(channelLink)} - > - - - )} - - ))} + channels.map( + ({ channelLink, title, gameCategory, customChannelIndex, imgSrc }, index) => ( + + {(provided, snapshot) => ( + updateSelectedChannel(channelLink)} + > + + + )} + + ), + )} {provided.placeholder} )} diff --git a/src/components/Sidebar/ChannelCircle/ChannelCircle.tsx b/src/components/Sidebar/ChannelCircle/ChannelCircle.tsx index a39f076..1400a2d 100644 --- a/src/components/Sidebar/ChannelCircle/ChannelCircle.tsx +++ b/src/components/Sidebar/ChannelCircle/ChannelCircle.tsx @@ -7,14 +7,14 @@ import { ChannelCircleProps } from 'src/@types/channelCircle'; const ChannelCircle = ({ channelLink, title, - category, + gameCategory, imgSrc, customChannelIndex, }: ChannelCircleProps) => { return ( - {title} - {GameEnum[category]} + {imgSrc ? '' : title.substring(0, 2)} + {GameEnum[gameCategory]} ); }; @@ -43,7 +43,9 @@ const ChannelBtn = styled.div<{ url?: string }>` prop.url && css` background-image: url(${prop.url}); - background-size: cover; + background-size: 100% 75%; + background-position: center top; + background-repeat: no-repeat; `} &:hover { diff --git a/src/components/providers/ProfileProvider.tsx b/src/components/providers/ProfileProvider.tsx index 6d49bc8..5ebcb12 100644 --- a/src/components/providers/ProfileProvider.tsx +++ b/src/components/providers/ProfileProvider.tsx @@ -6,12 +6,17 @@ import { Profile } from '@type/profile'; import authAPI from '@apis/authAPI'; import Cookies from 'js-cookie'; +interface ProfileAPI { + nickName: string; + profileImageUrl: string; +} + interface ProfileProviderProps { children: React.ReactNode; } const fetchProfile = async () => { - const res = await authAPI({ + const res = await authAPI({ method: 'get', url: '/api/member/profile', }); @@ -26,7 +31,7 @@ const ProfileProvider = ({ children }: ProfileProviderProps) => { const [profile, setProfile] = useState(null); // 유저의 프로필 가져오기 - const profileQuery = useQuery({ + const profileQuery = useQuery({ queryKey: ['getProfile'], queryFn: fetchProfile, enabled: isHaveAccessToken ? true : false, // 액세스 토큰이 있으면 query 요청 @@ -35,7 +40,10 @@ const ProfileProvider = ({ children }: ProfileProviderProps) => { // 프로필 데이터를 가져왔다면 useEffect(() => { if (profileQuery.data) { - setProfile({ ...profileQuery.data }); + setProfile({ + nickname: profileQuery.data.nickName, + profileUrl: profileQuery.data?.profileImageUrl, + }); } }, [profileQuery.data]);