Merge pull request #9 from GihoKo/dev

feat: 유저 Profile 페이지 리팩토링 및 채널 수정 모달 구현

src/apis/hooks/useDeleteChannel.ts

@@ -11,7 +11,7 @@ export default function useDeleteChannel() {
     mutationFn: ({ channelId }) => deleteChannel(channelId),
     onSuccess: () => {
       queryClient.invalidateQueries({
-        queryKey: ['myOwnChannels', 'myChannels'],
+        queryKey: ['channels'],
       });
     },
   });

src/apis/hooks/useGetChannelById.ts

@@ -0,0 +1,11 @@
+import { useQuery } from '@tanstack/react-query';
+import { Channel } from '../../types/channel';
+import { getChannelById } from '../services/channel';
+
+export default function useGetChannelById(channelId: string | undefined) {
+  const queryKey = ['channels', channelId];
+  return useQuery<Channel, Error>({
+    queryKey: queryKey,
+    queryFn: () => getChannelById(channelId),
+  });
+}

src/apis/hooks/useGetMyChannel.ts

@@ -3,7 +3,7 @@ import { getMyChannelList } from '../services/user';
 import { Channel } from '../../types/channel';
 
 export default function useGetMyChannel(userId: string | undefined) {
-  const queryKey = ['myChannels'];
+  const queryKey = ['channels'];
   return useQuery<Channel[], Error>({
     queryKey: queryKey,
     queryFn: () => getMyChannelList(userId),

src/apis/hooks/useGetMyOwnChannels.ts

@@ -3,7 +3,7 @@ import { getMyOwnChannels } from '../services/user';
 import { Channel } from '../../types/channel';
 
 export default function useGetMyOwnChannels(userId: string) {
-  const queryKey = ['myOwnChannels', 'myChannels'];
+  const queryKey = ['channels'];
   return useQuery<Channel[], Error>({
     queryKey: queryKey,
     queryFn: () => getMyOwnChannels(userId),

src/apis/hooks/useRenewTokens.ts

@@ -1,13 +1,13 @@
 import { useQuery } from '@tanstack/react-query';
 import { renewTokens } from '../services/auth';
 
-interface AccessToken {
-  accessToken: string;
+interface ApplicationAccessToken {
+  applicationAccessToken: string;
 }
 
 export default function useRenewTokens() {
   const queryKey = ['tokens'];
-  return useQuery<AccessToken, Error>({
+  return useQuery<ApplicationAccessToken, Error>({
     queryKey: queryKey,
     queryFn: renewTokens,
   });

src/apis/hooks/useUpdateChannel.ts

@@ -1,10 +1,9 @@
 import { useMutation, useQueryClient } from '@tanstack/react-query';
-import { Channel } from '../../types/channel';
 import { updateChannel } from '../services/channel';
 
 interface updateChannelParams {
   channelId: string;
-  channel: Channel;
+  channel: FormData;
 }
 
 export default function useUpdateChannel() {
@@ -13,7 +12,7 @@ export default function useUpdateChannel() {
     mutationFn: ({ channelId, channel }) => updateChannel(channelId, channel),
     onSuccess: () => {
       queryClient.invalidateQueries({
-        queryKey: ['myOwnChannels, myChannels'],
+        queryKey: ['channels'],
       });
     },
   });

src/apis/services/auth.ts

@@ -1,19 +1,16 @@
 import { axiosInstance } from '../instances';
 import axios from 'axios';
 
-interface RenewTokenResponse {
-  applicationAccessToken: string;
-}
-
 // accessToken 만료시 token들을 재발급
 export const renewTokens = async () => {
   try {
-    const response = await axiosInstance.post<RenewTokenResponse>('/auth/renewTokens');
+    const response = await axiosInstance.post('/auth/renewTokens');
     return response.data.applicationAccessToken;
   } catch (error: unknown) {
     if (axios.isAxiosError(error)) {
       console.error(error.response?.status);
       window.location.href = '/signIn';
+      throw new Error('토큰이 만료되었습니다. 다시 로그인해주세요.');
     }
     return null;
   }

src/apis/services/channel.ts

@@ -1,5 +1,4 @@
 import { axiosInstanceWithToken } from '../instances';
-import { Channel } from '../../types/channel';
 import { Music } from '@/types/music';
 
 export const getAllchannelLists = async () => {
@@ -11,7 +10,7 @@ export const getAllchannelLists = async () => {
   }
 };
 
-export const getChannelById = async (channelId: string) => {
+export const getChannelById = async (channelId: string | undefined) => {
   try {
     const response = await axiosInstanceWithToken.get(`/channels/${channelId}`);
     return response.data;
@@ -33,9 +32,14 @@ export const createChannel = async (channel: FormData) => {
   }
 };
 
-export const updateChannel = async (channelId: string, channel: Channel) => {
+export const updateChannel = async (channelId: string, channel: FormData) => {
+  console.log(channelId, channel);
   try {
-    const response = await axiosInstanceWithToken.patch(`/channels/${channelId}`, { channel });
+    const response = await axiosInstanceWithToken.patch(`/channels/${channelId}`, channel, {
+      headers: {
+        'Content-Type': 'multipart/form-data',
+      },
+    });
     return response.data;
   } catch (error) {
     console.error(error);

src/components/Atoms/Modal/StyledComponents.tsx

@@ -97,3 +97,45 @@ export const Tag = styled.div`
     background-color: var(--mint7);
   }
 `;
+
+export const ChannelImageWrapper = styled.button`
+  border-radius: 16px;
+  width: 120px;
+  height: 120px;
+
+  overflow: hidden;
+  padding: 0;
+
+  cursor: pointer;
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    cursor: pointer;
+  }
+`;
+
+export const EmptyImage = styled.div`
+  width: 100%;
+  height: 100%;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  color: var(--grey-grey600);
+  background-color: var(--grey-grey150);
+
+  cursor: pointer;
+
+  &:hover {
+    background-color: var(--grey-grey200);
+  }
+`;
+
+export const ChannelImageLabel = styled(Label)``;
+
+export const FileInput = styled.input`
+  display: none;
+`;

src/components/Molecules/Description.tsx

@@ -0,0 +1,46 @@
+import styled from 'styled-components';
+
+interface DescriptionProps {
+  title: string;
+  text: string;
+}
+
+export default function Description({ title, text }: DescriptionProps) {
+  return (
+    <Wrapper>
+      <Title>{title}</Title>
+      <Text>{text}</Text>
+    </Wrapper>
+  );
+}
+
+const Wrapper = styled.div`
+  border-radius: 16px;
+  border: 1px solid var(--grey-grey300);
+  width: 320px;
+  height: 160px;
+
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+
+  padding: 32px;
+  background-color: var(--grey-grey150);
+
+  @media (max-width: 992px) {
+    width: 100%;
+
+    padding: 16px;
+  }
+`;
+
+const Title = styled.div`
+  font-size: 20px;
+  color: var(--grey-grey900);
+`;
+
+const Text = styled.span`
+  font-size: 16px;
+
+  color: var(--grey-grey600);
+`;

src/components/Organisms/Modal/CreateChannelModal.hook.tsx

@@ -19,10 +19,10 @@ export default function useCreateChannelModal() {
     description: '',
     image: '',
   });
-  const [tagValue, setTagValue] = useState<string>('');
   const [previewChannelImageUrl, setPreviewChannelImageUrl] = useState<string | null>(null);
   const fileInputRef = useRef<HTMLInputElement>(null);
   const [profileImageFile, setProfileImageFile] = useState<File | null>(null);
+  const [tagValue, setTagValue] = useState<string>('');
   const uploadCreateChannel = useCreateChannel();
 
   const handleChannelImageClick = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {

src/components/Organisms/Modal/CreateChannelModal.tsx

@@ -1,6 +1,3 @@
-// libraries
-import styled from 'styled-components';
-
 // hooks
 import useCreateChannelModal from './CreateChannelModal.hook';
 
@@ -18,14 +15,18 @@ import {
   ButtonWrapper,
   TagContainer,
   Tag,
+  ChannelImageLabel,
+  ChannelImageWrapper,
+  EmptyImage,
+  FileInput,
 } from '../../Atoms/Modal/StyledComponents';
 
 export default function CreateChannelModal() {
   // logics
-  const hookData = useCreateChannelModal();
+  const logics = useCreateChannelModal();
 
   // useCreateChannelModal hook에서 null을 반환할 수 있으므로 null 체크
-  if (!hookData) return null;
+  if (!logics) return null;
 
   const {
     channelData,
@@ -40,7 +41,7 @@ export default function CreateChannelModal() {
     handleDeleteTag,
     handleSubmit,
     closeModal,
-  } = hookData;
+  } = logics;
 
   // view
   return (
@@ -131,45 +132,3 @@ export default function CreateChannelModal() {
     </Dimmed>
   );
 }
-
-const ChannelImageWrapper = styled.button`
-  border-radius: 16px;
-  width: 120px;
-  height: 120px;
-
-  overflow: hidden;
-  padding: 0;
-
-  cursor: pointer;
-
-  img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    cursor: pointer;
-  }
-`;
-
-const EmptyImage = styled.div`
-  width: 100%;
-  height: 100%;
-
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  color: var(--grey-grey600);
-  background-color: var(--grey-grey150);
-
-  cursor: pointer;
-
-  &:hover {
-    background-color: var(--grey-grey200);
-  }
-`;
-
-const ChannelImageLabel = styled(Label)``;
-
-const FileInput = styled.input`
-  display: none;
-`;