Deploy: 지금까지 작업 배포

coffee-meet · Jan 12, 2024 · 2c392cd · 2c392cd
2 parents a2692ad + d49331a
commit 2c392cd
Show file tree

Hide file tree

Showing 19 changed files with 133 additions and 136 deletions.
diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md
@@ -1,7 +1,7 @@
 ## 이슈번호
 
 <!-- - close 뒤에 이슈 달아주기 -->
-close: #
+close #
 
 ## 작업 내용 설명
 

diff --git a/README.md b/README.md
@@ -37,7 +37,7 @@
 |                                          Frontend                                          |                                          Frontend                                           |   
 |:-----------------------------------------------------------------------------------------:|:------------------------------------------------------------------------------------------:|
 | <img src="https://avatars.githubusercontent.com/u/96521594?s=300&v=4" width="130" height="130"> | <img src ="https://avatars.githubusercontent.com/u/69716992?v=4" width="130" height="130"> | 
-|                           [주다현](https://github.com/judahhh)                           |                          [홍창기](https://github.com/cheshier)                           
+|                           [주다현](https://github.com/judahhh)                           |                          [홍창기](https://github.com/sscoderati)                           
 
 
 <br><br>
@@ -87,6 +87,7 @@
 ![image](https://github.com/coffee-meet/frontend/assets/96521594/be3698db-57a9-418d-8f9e-fabfaf4d7e6d)
 
 <br>
+
 ## 🎶 Frontend CI/CD Flow
 
 ![image](https://github.com/coffee-meet/frontend/assets/96521594/ec881073-5ac3-4054-9f4f-6d93eff105f6)

diff --git a/src/apis/axios.ts b/src/apis/axios.ts
@@ -1,67 +1,23 @@
 import axios from "axios";
 
-// import useAuthStore from '@/store/AuthStore'
+type AuthStoreState = {
+  authTokens: {
+    accessToken: string;
+    refreshToken: string;
+  };
+  userId: number;
+};
+
+const { state }: { state: AuthStoreState } = JSON.parse(localStorage.getItem("auth-store") || "{}");
 
 export const axiosAPI = axios.create({
   baseURL:
     process.env.NODE_ENV === "development"
       ? "http://localhost:5173"
       : import.meta.env.VITE_BASE_URL,
-});
-
-// Add a request interceptor
-axiosAPI.interceptors.request.use(
-  function (config) {
-    // 요청 바로 직전
-    // axios 설정값에 대해 작성합니다.
-
-    config.headers["Authorization"] = `${localStorage.getItem("jwt")}`;
-
-    return config;
-  },
-  function (error) {
-    // 요청 에러 처리를 작성합니다.
-    return Promise.reject(error);
-  },
-);
-
-// Add a response interceptor
-axiosAPI.interceptors.response.use(
-  function (response) {
-    /*
-        http status가 200인 경우
-        응답 바로 직전에 대해 작성합니다.
-        .then() 으로 이어집니다.
-    */
-    return response;
-  },
-
-  function (error) {
-    /*
-        http status가 200이 아닌 경우
-        응답 에러 처리를 작성합니다.
-        .catch() 으로 이어집니다.
-    */
-    if (error.response && error.response.status === 401) {
-      return new Promise(() => {}); //이행되지 않은 Promise를 반환하여 Promise Chaining 끊어주기
-    }
-    return Promise.reject(error);
+  headers: {
+    Authorization: `${state.authTokens.accessToken}`,
   },
-);
-
-// Response interceptor
-// function interceptorResponseFulfilled(res: AxiosResponse) {
-//   if (200 <= res.status && res.status < 300) {
-//     return res
-//   }
-
-//   return Promise.reject(res)
-// }
-
-// function interceptorResponseRejected(error: AxiosError<ApiErrorScheme>) {
-//   if (error.response?.data?.message) {
-//     return Promise.reject(new ApiException(error.response.data, error.response.status))
-//   }
-// }
+});
 
-// axiosAPI.interceptors.response.use(interceptorResponseFulfilled, interceptorResponseRejected)
+// TODO: axiosAPI.interceptors.response.use()를 사용하여 refreshToken이 만료되었을 때, accessToken을 재발급 받는 로직을 구현해야 합니다.
diff --git a/src/apis/profile/getMyProfileData.ts b/src/apis/profile/getMyProfileData.ts
@@ -4,9 +4,6 @@ import type { MyProfileData } from "@/apis/profile/type.ts";
 const getMyProfileData = async () => {
   try {
     const res = await axiosAPI.get<MyProfileData>("/v1/users/me");
-    if (res.status !== 200) {
-      throw new Error("get my profile data failed!");
-    }
     return res.data;
   } catch (err) {
     console.log(err);

diff --git a/src/apis/queryClient.ts b/src/apis/queryClient.ts
@@ -8,6 +8,7 @@ export const queryClient = new QueryClient({
     queries: {
       refetchOnWindowFocus: false,
       refetchOnMount: false,
+      retry: 1,
     },
   },
   queryCache: new QueryCache({

diff --git a/src/components/common/AppHeader/index.tsx b/src/components/common/AppHeader/index.tsx
@@ -1,13 +1,15 @@
 import { BiSolidMoon } from "react-icons/bi";
 import { RiSunFill } from "react-icons/ri";
 import { useNavigate } from "react-router-dom";
+import { getMyProfileDataOptions } from "@/libs/react-query/options/getMyProfileData.ts";
 import styled from "@emotion/styled";
 import { useQuery } from "@tanstack/react-query";
-import getMyProfileData from "@/apis/profile/getMyProfileData.ts";
 import Avatar from "@/components/common/Avatar";
 import { FlexBox } from "@/components/common/Flexbox";
 import { Text } from "@/components/common/Text";
+import useToast from "@/hooks/useToast.tsx";
 import { palette } from "@/styles/palette";
+import useAuthStore from "@/store/AuthStore.tsx";
 
 const StyleAppHeader = styled.div<{ height?: string }>`
   width: 100%;
@@ -58,13 +60,13 @@ type AppHeaderProps = {
 
 const AppHeader = ({ isAuth, isDarkMode, height, toggleDarkMode }: AppHeaderProps) => {
   const navigate = useNavigate();
+  const { showToast } = useToast();
   const moveFromAppHeader = (path: string) => {
     navigate(`/${path}`);
   };
 
-  const { data, isError, isPending } = useQuery({
-    queryKey: ["myProfileData"],
-    queryFn: getMyProfileData,
+  const { data, isError, isPending, error } = useQuery({
+    ...getMyProfileDataOptions,
     staleTime: Infinity,
     enabled: isAuth,
   });
@@ -74,11 +76,16 @@ const AppHeader = ({ isAuth, isDarkMode, height, toggleDarkMode }: AppHeaderProp
   }
 
   if (isError) {
-    return <div>{"에러가 발생했습니다."}</div>;
+    console.log(error);
+    showToast({
+      message: "프로필 정보를 불러오는데 실패했습니다.",
+      type: "error",
+      isDarkMode,
+    });
+    useAuthStore.persist.clearStorage();
+    navigate("/login");
   }
 
-  const { nickname, profileImageUrl } = data;
-
   return (
     <StyleAppHeader height={height}>
       <FlexBox
@@ -90,7 +97,7 @@ const AppHeader = ({ isAuth, isDarkMode, height, toggleDarkMode }: AppHeaderProp
         <Avatar
           width={49}
           height={49}
-          imgUrl={profileImageUrl}
+          imgUrl={data?.profileImageUrl || "default_image_url"}
           margin={"0"}
           style={{
             cursor: "pointer",
@@ -135,7 +142,7 @@ const AppHeader = ({ isAuth, isDarkMode, height, toggleDarkMode }: AppHeaderProp
             maxWidth: "27%",
           }}
         >
-          {nickname}
+          {data?.nickname}
         </StyledAppHeaderLargeText>
         <StyledAppHeaderSmallText
           isDarkMode={isDarkMode}

diff --git a/src/components/common/MultiSelector/index.tsx b/src/components/common/MultiSelector/index.tsx
@@ -6,18 +6,27 @@ type MultiSelectorProps = {
   isDarkMode: boolean;
   itemList: string[];
   maxCount: number;
+  defaultSelectedList?: string[];
   onValueChange?: (value: string[]) => void;
 };
 
 const MultiSelector = ({
   isDarkMode,
   itemList,
   maxCount = 0,
+  defaultSelectedList,
   onValueChange,
 }: MultiSelectorProps) => {
   const [selectedList, setSelectedList] = useState<string[]>([]);
   const [selectedCount, setSelectedCount] = useState(0);
 
+  useEffect(() => {
+    if (defaultSelectedList) {
+      setSelectedList(defaultSelectedList);
+      setSelectedCount(defaultSelectedList.length);
+    }
+  }, []);
+
   useEffect(() => {
     onValueChange?.(selectedList);
   }, [selectedList]);
@@ -39,7 +48,7 @@ const MultiSelector = ({
 
   return (
     <MultiSelectorContainer>
-      <ItemContainer>
+      <ItemContainer isDarkMode={isDarkMode}>
         {itemList.map((name, idx) => (
           <StyledItem
             key={idx}
@@ -67,13 +76,13 @@ const MultiSelectorContainer = styled.div`
   width: 348px;
 `;
 
-const ItemContainer = styled.div`
+const ItemContainer = styled.div<{ isDarkMode: boolean }>`
   position: relative;
   width: 100%;
   margin-bottom: 8px;
   min-height: 160px;
   border-radius: 10px;
-  background-color: ${palette.WHITE};
+  background-color: ${({ isDarkMode }) => (isDarkMode ? palette.GRAY600 : palette.WHITE)};
 `;
 
 const ItemCountContainer = styled.span<{ isDarkMode: boolean }>`
@@ -101,7 +110,8 @@ const StyledItem = styled.button<{ isDarkMode: boolean; isSelected: boolean }>`
       : props.isSelected
       ? palette.BLUE
       : palette.TERTIARY};
-  color: ${(props) => (props.isDarkMode ? palette.SECONDARY : palette.WHITE)};
+  color: ${(props) =>
+    props.isDarkMode ? (props.isSelected ? palette.WHITE : palette.SECONDARY) : palette.WHITE};
   transition: background-color 0.3s;
   &:hover {
     opacity: 0.9;

diff --git a/src/libs/react-query/options/getMyProfileData.ts b/src/libs/react-query/options/getMyProfileData.ts
@@ -0,0 +1,6 @@
+import getMyProfileData from "@/apis/profile/getMyProfileData.ts";
+
+export const getMyProfileDataOptions = {
+  queryKey: ["myProfileData"],
+  queryFn: getMyProfileData,
+};
diff --git a/src/pages/chatting/Chatting.tsx b/src/pages/chatting/Chatting.tsx
@@ -17,13 +17,15 @@ import TextArea from "@/components/common/TextArea";
 import { useModal } from "@/hooks/useModal";
 import useToast from "@/hooks/useToast";
 import { palette } from "@/styles/palette";
+import useAuthStore from "@/store/AuthStore.tsx";
 import useBottomSheetStore from "@/store/BottomSheetStore";
 import ExitIcon from "@/assets/icons/ExitIcon";
 import Send from "@/assets/icons/Send.svg";
 
 const Chatting = () => {
   const { openModal } = useModal();
   const navigate = useNavigate();
+  const authStore = useAuthStore();
   const { chatroomId } = useLocation().state;
   const { chatroomName } = useLocation().state;
   const [messages, setMessages] = useState<Messages[] | []>([] as Messages[]);
@@ -63,7 +65,7 @@ const Chatting = () => {
         console.log(response);
       },
       connectHeaders: {
-        Authorization: `${localStorage.getItem("jwt")}`,
+        Authorization: `${authStore.authTokens?.accessToken}`,
       },
     });
     client.current.activate();
@@ -138,7 +140,7 @@ const Chatting = () => {
           content: message,
         }),
         headers: {
-          Authorization: `${localStorage.getItem("jwt")}`,
+          Authorization: `${authStore.authTokens?.accessToken}`,
         },
       });
     }

diff --git a/src/pages/chatting/components/messageArea/index.tsx b/src/pages/chatting/components/messageArea/index.tsx
@@ -1,5 +1,7 @@
 import styled from "@emotion/styled";
+import { useQueryClient } from "@tanstack/react-query";
 import type { Messages } from "@/apis/chatting/chattingType";
+import type { MyProfileData } from "@/apis/profile/type.ts";
 import ChatBubbleListLow from "@/pages/chatting/components/chatBubbleListLow";
 import { FlexBox } from "@/components/common/Flexbox";
 import Spacing from "@/components/common/Spacing";
@@ -10,6 +12,8 @@ interface MessageProps {
 }
 
 const MessageArea = ({ messageData }: MessageProps) => {
+  const queryClient = useQueryClient();
+  const nickname = queryClient.getQueryData<MyProfileData>(["myProfileData"])?.nickname;
   return (
     <>
       <FlexBox
@@ -21,7 +25,7 @@ const MessageArea = ({ messageData }: MessageProps) => {
         {messageData &&
           messageData.map((message, i) =>
             //로그인 성공 후 nickname 전역에 저장하면 내 닉네임 불러오기
-            message.nickname == localStorage.getItem("nickname") ? (
+            message.nickname == nickname ? (
               <StyleChattingBubbleWrapper
                 key={i}
                 isMyChat={true}

diff --git a/src/pages/login/Login.tsx b/src/pages/login/Login.tsx
@@ -1,7 +1,7 @@
 import { useNavigate } from "react-router-dom";
 import { css } from "@emotion/react";
 import styled from "@emotion/styled";
-import { KakaoButton, NaverButton } from "@/components/common/Buttons/IconButton";
+import { KakaoButton } from "@/components/common/Buttons/IconButton";
 import NormalButton from "@/components/common/Buttons/NormalButton";
 import Spacing from "@/components/common/Spacing";
 import { Text } from "@/components/common/Text";
@@ -31,6 +31,7 @@ const Login = () => {
         <Spacing size={50} />
         <img
           src={CafeSvg}
+          alt={"coffee-meet-logo"}
           width={250}
         />
         <Spacing
@@ -90,19 +91,20 @@ const Login = () => {
           `}
         />
         <StyledOauthWrapper>
-          <NaverButton
-            moveToOAuthProvider={() => {
-              handleMoveToAuthProvider("NAVER");
-            }}
-          />
-          <Spacing
-            size={16}
-            css={css`
-              @media (max-width: 375px) {
-                height: ${16 * 0.75}px;
-              }
-            `}
-          />
+          {/* 네이버 로그인 승인 될 때까지 버튼 은닉 */}
+          {/*<NaverButton*/}
+          {/*  moveToOAuthProvider={() => {*/}
+          {/*    handleMoveToAuthProvider("NAVER");*/}
+          {/*  }}*/}
+          {/*/>*/}
+          {/*<Spacing*/}
+          {/*  size={16}*/}
+          {/*  css={css`*/}
+          {/*    @media (max-width: 375px) {*/}
+          {/*      height: ${16 * 0.75}px;*/}
+          {/*    }*/}
+          {/*  `}*/}
+          {/*/>*/}
           <KakaoButton
             moveToOAuthProvider={() => {
               handleMoveToAuthProvider("KAKAO");