Merge branch 'Weekly11' of https://github.com/kakao-tech-campus-2nd-s…

…tep3/Team9_FE into feat/#108-api
kakao-tech-campus-2nd-step3 · Nov 15, 2024 · 0aaacc5 · 0aaacc5
2 parents 5b9effe + f57bfbb
commit 0aaacc5
Show file tree

Hide file tree

Showing 18 changed files with 168 additions and 82 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,14 +1,33 @@
 import { ChakraProvider, ChakraProviderProps } from '@chakra-ui/react';
 import { QueryClientProvider } from '@tanstack/react-query';
+import { useEffect } from 'react';
 import 'swiper/css';
 import 'swiper/css/pagination';
 
 import queryClient from '@/apis/queryClient';
 import Routes from '@/routes';
+import useModeStore from '@/store/useModeStore';
+import { setTokens } from '@/utils/queryParams';
 
 const App = () => {
   const chakraProps: ChakraProviderProps = {};
 
+  const { setMode } = useModeStore();
+
+  // 앱이 실행될 때 토큰과 유저 모드 초기화
+  useEffect(() => {
+    const initializeTokensAndMode = async () => {
+      await setTokens();
+
+      const accessToken = localStorage.getItem('accessToken');
+      if (accessToken) {
+        await setMode(); // 함수 내부에서 API 응답 처리하여 모드 세팅
+      }
+    };
+
+    initializeTokensAndMode();
+  }, [setMode]);
+
   return (
     <ChakraProvider {...chakraProps} resetCSS={false}>
       <QueryClientProvider client={queryClient}>

diff --git a/src/apis/instance/index.ts b/src/apis/instance/index.ts
@@ -1,6 +1,6 @@
 import axios, { type AxiosInstance, type AxiosRequestConfig } from 'axios';
 
-const BASE_URL = import.meta.env.VITE_APP_BASE_URL;
+const BASE_URL = `${import.meta.env.VITE_APP_BASE_URL}/v1`;
 
 const initInstance = (config: AxiosRequestConfig): AxiosInstance => {
   const instance = axios.create({

diff --git a/src/apis/queryKeys.ts b/src/apis/queryKeys.ts
@@ -1,4 +1,5 @@
 const QUERY_KEYS = {
+  LOGIN: 'login',
   FEED: 'feed',
   FOLLOW_LIST: 'followList',
   USER_INFO: 'userInfo',

diff --git a/src/apis/users/getUserType.ts b/src/apis/users/getUserType.ts
@@ -0,0 +1,39 @@
+// import { useQuery } from '@tanstack/react-query';
+import { isAxiosError } from 'axios';
+
+import type { UserType } from '@/types';
+import fetchInstance from '../fetchInstance';
+// import QUERY_KEYS from '../queryKeys';
+
+type UserTypeResponse = { role: string; userType: UserType };
+
+async function getUserType(): Promise<UserTypeResponse> {
+  try {
+    const response = await fetchInstance().get('/users/type');
+
+    return response.data.data;
+  } catch (error) {
+    if (isAxiosError(error)) {
+      if (error.response) {
+        throw new Error(error.response.data.message || 'user type 가져오기 실패');
+      } else {
+        throw new Error('네트워크 오류 또는 서버에 연결할 수 없습니다.');
+      }
+    } else {
+      throw new Error('알 수 없는 오류입니다.');
+    }
+  }
+}
+
+// const useGetFollow = () => {
+//   const { data, status, refetch } = useQuery<APIResponse<FollowResponse>, Error>({
+//     queryKey: [QUERY_KEYS.FOLLOW_LIST],
+//     queryFn: getFollow,
+//   });
+
+//   return { data, status, refetch };
+// };
+
+// export default useGetFollow;
+
+export default getUserType;
diff --git a/src/components/layouts/Header/index.tsx b/src/components/layouts/Header/index.tsx
@@ -25,7 +25,7 @@ const Header = ({ title, leftSideChildren, rightSideChildren, modalOpen }: Heade
           <Logo />
           <IconBox>
             <IconButton icon="search" onClick={modalOpen} />
-            {mode === 'user' ? (
+            {mode === 'USER' ? (
               <IconButton icon="favorite-default" />
             ) : (
               <IconButton icon="store-default" />

diff --git a/src/pages/Home/index.tsx b/src/pages/Home/index.tsx
@@ -19,7 +19,6 @@ const Home = () => {
   return (
     <Wrapper>
       {isModalOpen && <SearchModal modalClose={() => setIsModalOpen(false)} />}
-
       <Header modalOpen={handleModalOpen} />
       <AdBanner adList={AD_LIST} />
       {ARTICLE_LIST.map((item) => (

diff --git a/src/pages/Login/components/KakaoLoginButton/index.tsx b/src/pages/Login/components/KakaoLoginButton/index.tsx
@@ -0,0 +1,31 @@
+import styled from '@emotion/styled';
+
+import KakaoSymbol from '@/assets/kakao-symbol.svg?react';
+
+type KakaoLoginButtonProps = {
+  onClick: () => void;
+};
+
+const KakaoLoginButton = ({ onClick }: KakaoLoginButtonProps) => {
+  return (
+    <StyledKakaoLoginButton onClick={onClick}>
+      <KakaoSymbol />
+      카카오로 시작하기
+    </StyledKakaoLoginButton>
+  );
+};
+
+export default KakaoLoginButton;
+
+const StyledKakaoLoginButton = styled.button`
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  margin: 0 16px;
+  padding: 10px 50px;
+  background-color: var(--color-yellow-kakao);
+  border-radius: var(--border-radius);
+  gap: 16px;
+  font-size: var(--font-size-md);
+  font-weight: 500;
+`;
diff --git a/src/pages/Login/index.tsx b/src/pages/Login/index.tsx
@@ -2,23 +2,27 @@ import { Text } from '@chakra-ui/react';
 import styled from '@emotion/styled';
 import { useNavigate } from 'react-router-dom';
 
-import KakaoSymbol from '@/assets/kakao-symbol.svg?react';
+// import { getKakaoLgoin } from '@/apis/login/useGetKakaoLogin';
 import Logo from '@/assets/logo.svg?react';
 import IconButton from '@/components/common/IconButton';
 import Header from '@/components/layouts/Header';
 import { BACKGROUND_IMAGE_LIST } from '@/constants/login';
 import { RouterPath } from '@/routes/path';
 import { HEIGHTS } from '@/styles/constants';
+import KakaoLoginButton from './components/KakaoLoginButton';
 
 const Login = () => {
-  const isMember = false; // 추후 API 연동
   const navigate = useNavigate();
 
   // 랜덤 배경이미지
   const randomIndex = Math.floor(Math.random() * BACKGROUND_IMAGE_LIST.length);
   const backgroundImage = BACKGROUND_IMAGE_LIST[randomIndex].src;
   const backgroundImageCreator = BACKGROUND_IMAGE_LIST[randomIndex].creator;
 
+  const handleLogin = () => {
+    window.location.href = `http://golden-ratio.duckdns.org/oauth2/login/kakao`; // 외부 경로로 리다이렉트
+  };
+
   return (
     <Wrapper backgroundImage={backgroundImage}>
       <Header
@@ -40,7 +44,7 @@ const Login = () => {
           그 무한은 숨겨진 가치를 밝혀줍니다. <br />
           예술 속에 숨겨진 가치를 찾아드립니다.
         </Text>
-        <KakaoLoginButton isMember={isMember} />
+        <KakaoLoginButton onClick={handleLogin} />
       </ContentWrapper>
       <Text
         fontSize="var(--font-size-xs)"
@@ -57,25 +61,6 @@ const Login = () => {
 
 export default Login;
 
-type KakaoLoginButtonProps = { isMember: boolean };
-
-const KakaoLoginButton = ({ isMember }: KakaoLoginButtonProps) => {
-  const navigate = useNavigate();
-
-  const handleLogin = () => {
-    if (!isMember) {
-      navigate(`/${RouterPath.signup}`);
-    }
-  };
-
-  return (
-    <StyledKakaoLoginButton onClick={handleLogin}>
-      <KakaoSymbol />
-      카카오로 시작하기
-    </StyledKakaoLoginButton>
-  );
-};
-
 const Wrapper = styled.div<{ backgroundImage: string }>`
   display: flex;
   flex-direction: column;
@@ -110,16 +95,3 @@ const ContentWrapper = styled.div`
     }
   }
 `;
-
-const StyledKakaoLoginButton = styled.button`
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-  margin: 0 16px;
-  padding: 10px 50px;
-  background-color: var(--color-yellow-kakao);
-  border-radius: var(--border-radius);
-  gap: 16px;
-  font-size: var(--font-size-md);
-  font-weight: 500;
-`;
diff --git a/src/pages/My/index.tsx b/src/pages/My/index.tsx
@@ -1,22 +1,34 @@
+import styled from '@emotion/styled';
+import { Suspense } from 'react';
+import { ErrorBoundary } from 'react-error-boundary';
+
 import useGetArtist from '@/apis/artists/useGetArtist';
 import useGetUser from '@/apis/users/useGetUser';
 import Footer from '@/components/layouts/Footer';
 import useModeStore from '@/store/useModeStore';
+import { HEIGHTS } from '@/styles/constants';
 import { ArtistInfo, UserInfo } from '@/types';
-import styled from '@emotion/styled';
-import { Suspense } from 'react';
-import { ErrorBoundary } from 'react-error-boundary';
 import ArtistProfileBox from './components/ArtistProfileBox';
 import UserMenuSection from './components/MenuSection/UserMenuSection';
 import UserProfileBox from './components/UserProfileBox';
 
+const My = () => {
+  return (
+    <ErrorBoundary fallback={<div>Error...</div>}>
+      <Suspense fallback={<div>Loading...</div>}>
+        <MyContent />
+      </Suspense>
+    </ErrorBoundary>
+  );
+};
+
 const MyContent = () => {
   const { mode } = useModeStore();
-  const { data } = mode === 'user' ? useGetUser() : useGetArtist();
+  const { data } = mode === 'USER' ? useGetUser() : useGetArtist();
 
   return (
     <Wrapper>
-      {mode === 'user' ? (
+      {mode === 'USER' ? (
         <>
           <ProfileSection>
             <UserProfileBox
@@ -44,26 +56,16 @@ const MyContent = () => {
   );
 };
 
-const My = () => {
-  return (
-    <ErrorBoundary fallback={<div>Error...</div>}>
-      <Suspense fallback={<div>Loading...</div>}>
-        <MyContent />
-      </Suspense>
-    </ErrorBoundary>
-  );
-};
-
 export default My;
 
-const ProfileSection = styled.div`
-  background: var(--color-black);
-  padding: 16px;
-`;
-
 const Wrapper = styled.div`
   display: flex;
   flex-direction: column;
   min-height: 100vh;
-  padding-bottom: 53px;
+  padding-bottom: ${HEIGHTS.BOTTOM};
+`;
+
+const ProfileSection = styled.div`
+  background: var(--color-black);
+  padding: 16px;
 `;
diff --git a/src/pages/MyFavorites/index.tsx b/src/pages/MyFavorites/index.tsx
@@ -40,6 +40,8 @@ const MyFavorites = () => {
             <Grid col={2}>
               {data?.data.content?.map((artist: User) => (
                 <ArtistItem
+                  artistId={artist.userId}
+                  key={artist.userId}
                   author={artist.nickname}
                   like={artist.totalLikes}
                   follower={artist.totalFollowers}

diff --git a/src/pages/Signup/index.tsx b/src/pages/Signup/index.tsx
@@ -17,12 +17,10 @@ const Signup = () => {
   const { clearUserInfo } = useUserStore();
   const { clearStudentInfo } = useStudentArtistStore();
   const navigate = useNavigate();
-  const [memberType, setMemberType] = useState<Mode | undefined>();
-  const [progressStep, setProgressStep] = useState<'default' | Mode>('default');
+  const [mode, setMode] = useState<Mode>();
 
-  const handleMemberTypeSelection = (type: Mode) => {
-    setMemberType(type);
-    setProgressStep(type === 'user' ? 'user' : 'artist');
+  const handleModeSelect = (type: Mode) => {
+    setMode(type);
   };
 
   return (
@@ -43,11 +41,9 @@ const Signup = () => {
         }
       />
       <ContentWrapper>
-        {progressStep === 'default' && (
-          <DefaultProgress memberType={memberType} onSelectMemberType={handleMemberTypeSelection} />
-        )}
-        {progressStep === 'user' && <UserProgress />}
-        {progressStep === 'artist' && <SellerProgress />}
+        {!mode && <DefaultProgress mode={mode} onSelect={handleModeSelect} />}
+        {mode === 'user' && <UserProgress />}
+        {mode === 'artist' && <SellerProgress />}
       </ContentWrapper>
     </Wrapper>
   );

diff --git a/src/pages/Signup/progresses/DefaultProgress/index.tsx b/src/pages/Signup/progresses/DefaultProgress/index.tsx
@@ -4,13 +4,13 @@ import ProgressBar from '../../components/ProgressBar';
 import { ProgressBox, ProgressGuidance, SelectItem } from '../styles';
 
 type DefaultProgressProps = {
-  memberType: Mode | undefined;
-  onSelectMemberType: (memberType: Mode) => void;
+  mode: Mode | undefined;
+  onSelect: (registerType: Mode) => void;
 };
 
-const DefaultProgress = ({ memberType, onSelectMemberType }: DefaultProgressProps) => {
+const DefaultProgress = ({ mode, onSelect }: DefaultProgressProps) => {
   const handleSelect = (type: Mode) => {
-    onSelectMemberType(type);
+    onSelect(type);
   };
 
   return (
@@ -25,12 +25,12 @@ const DefaultProgress = ({ memberType, onSelectMemberType }: DefaultProgressProp
         <SelectItem>
           <Button
             label="일반 회원"
-            isSelected={memberType === 'user'}
+            isSelected={mode === 'user'}
             onClick={() => handleSelect('user')}
           />
           <Button
             label="작가(판매자) 회원"
-            isSelected={memberType === 'artist'}
+            isSelected={mode === 'artist'}
             onClick={() => handleSelect('artist')}
           />
         </SelectItem>

diff --git a/src/pages/chats/ChatList/components/ChatItem/index.tsx b/src/pages/chats/ChatList/components/ChatItem/index.tsx
@@ -19,7 +19,7 @@ const ChatItem = ({ chatRoomId, imageUrl, nickname, date, content }: ChatItemPro
 
   return (
     <Wrapper onClick={() => navigate(`${chatRoomId}`)}>
-      <ProfileImage width={54} imageUrl={imageUrl} />
+      <ProfileImage width={54} imageUrl={imageUrl} alt="profileImage" />
       <Box display="flex" flexDir="column" gap="4px" margin="0 0 0 12px">
         <Box display="flex" flexDir="row" gap="12px" alignItems="center">
           <Text fontSize="var(--font-size-md)" fontWeight="500">

diff --git a/src/pages/chats/ChatList/index.tsx b/src/pages/chats/ChatList/index.tsx
@@ -7,7 +7,7 @@ import { HEIGHTS } from '@/styles/constants';
 import ChatItem from './components/ChatItem';
 
 const ChatList = () => {
-  const [chatList, setChatList] = useState([
+  const [chatList] = useState([
     {
       chatRoomId: 1,
       imageUrl: '',

diff --git a/src/pages/chats/ChatRoom/components/MessageItem/index.tsx b/src/pages/chats/ChatRoom/components/MessageItem/index.tsx
@@ -25,7 +25,7 @@ const MessageItem = ({ senderName, profileImageUrl, timestamp, content }: Messag
       )}
       {!isMe && (
         <>
-          <ProfileImage width={32} imageUrl={profileImageUrl} />
+          <ProfileImage width={32} imageUrl={profileImageUrl} alt="messageItem" />
           <Box display="flex" flexDir="column" gap="8px">
             <Name>{senderName}</Name>
             <Box display="flex" flexDir="row" gap="8px">