Feat/#127 프로필 및 채널에 이미지 추가

__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(<ChannelCircle {...initalState} />);
-    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,
   };

src/@types/channelCircle.ts

@@ -1,7 +1,7 @@
 export interface ChannelCircleProps {
   channelLink: string;
   title: string;
-  category: number;
+  gameCategory: number;
   imgSrc?: string;
   customChannelIndex: number;
 }

src/components/Sidebar/ChannelBar/ChannelBar.tsx

@@ -38,31 +38,38 @@ const ChannelBar = ({ channels, updateSelectedChannel }: ChannelBarProps) => {
           {(provided, snapshot) => (
             <DropContainer ref={provided.innerRef} {...provided.droppableProps}>
               {channels &&
-                channels.map(({ channelLink, title, category, customChannelIndex }, index) => (
-                  <Draggable draggableId={'channel-' + channelLink} index={index} key={channelLink}>
-                    {(provided, snapshot) => (
-                      <div
-                        ref={provided.innerRef}
-                        {...provided.draggableProps}
-                        {...provided.dragHandleProps}
-                        css={css`
-                          margin: 0 auto;
-                          display: flex;
-                          align-items: center;
-                          justify-content: center;
-                        `}
-                        onClick={() => updateSelectedChannel(channelLink)}
-                      >
-                        <ChannelCircle
-                          channelLink={channelLink}
-                          title={title}
-                          category={category}
-                          customChannelIndex={customChannelIndex}
-                        />
-                      </div>
-                    )}
-                  </Draggable>
-                ))}
+                channels.map(
+                  ({ channelLink, title, gameCategory, customChannelIndex, imgSrc }, index) => (
+                    <Draggable
+                      draggableId={'channel-' + channelLink}
+                      index={index}
+                      key={channelLink}
+                    >
+                      {(provided, snapshot) => (
+                        <div
+                          ref={provided.innerRef}
+                          {...provided.draggableProps}
+                          {...provided.dragHandleProps}
+                          css={css`
+                            margin: 0 auto;
+                            display: flex;
+                            align-items: center;
+                            justify-content: center;
+                          `}
+                          onClick={() => updateSelectedChannel(channelLink)}
+                        >
+                          <ChannelCircle
+                            channelLink={channelLink}
+                            title={title}
+                            gameCategory={gameCategory}
+                            customChannelIndex={customChannelIndex}
+                            imgSrc={imgSrc}
+                          />
+                        </div>
+                      )}
+                    </Draggable>
+                  ),
+                )}
               {provided.placeholder}
             </DropContainer>
           )}

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 (
     <ChannelBtn url={imgSrc}>
-      <ChannelName>{title}</ChannelName>
-      <ChannelGame>{GameEnum[category]}</ChannelGame>
+      <ChannelName>{imgSrc ? '' : title.substring(0, 2)}</ChannelName>
+      <ChannelGame>{GameEnum[gameCategory]}</ChannelGame>
     </ChannelBtn>
   );
 };
@@ -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 {

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<Profile>({
+  const res = await authAPI<ProfileAPI>({
     method: 'get',
     url: '/api/member/profile',
   });
@@ -26,7 +31,7 @@ const ProfileProvider = ({ children }: ProfileProviderProps) => {
   const [profile, setProfile] = useState<Profile | null>(null);
 
   // 유저의 프로필 가져오기
-  const profileQuery = useQuery<Profile>({
+  const profileQuery = useQuery<ProfileAPI>({
     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]);