Merge pull request #146 from FinalDoubleTen/dev

Env: 2차 스프린트 2차배포
WePlanPlans · Jan 12, 2024 · 17c6ca5 · 17c6ca5
2 parents 98c186f + cc7a233
commit 17c6ca5
Show file tree

Hide file tree

Showing 35 changed files with 425 additions and 248 deletions.
diff --git a/src/@types/auth.types.ts b/src/@types/auth.types.ts
@@ -23,6 +23,7 @@ export interface EditPassword {
 
 export interface EditPasswordProps {
   password: string;
+  newPassword: string;
 }
 
 export interface AuthInputBoxProps {

diff --git a/src/@types/member.types.ts b/src/@types/member.types.ts
@@ -14,15 +14,15 @@ interface MemberInfo {
   nickname: string;
   email: string;
   profileImageUrl: string | null;
-  ageType:
-    | 'TEENAGER'
-    | 'TWENTIES'
-    | 'THIRTIES'
-    | 'FOURTIES'
-    | 'ABOVE_FIFTIES'
-    | 'DEFATULT'
-    | null;
-  genderType: 'MALE' | 'FEMALE' | 'NON_BINARY' | null;
+  ageType: string | null;
+  // | 'TEENAGER'
+  // | 'TWENTIES'
+  // | 'THIRTIES'
+  // | 'FOURTIES'
+  // | 'ABOVE_FIFTIES'
+  // | 'DEFATULT'
+  genderType: string | null;
+  // 'MALE' | 'FEMALE' | 'NON_BINARY' | 'DEFATULT';
   survey: Survey | null;
 }
 

diff --git a/src/api/authClient.ts b/src/api/authClient.ts
@@ -1,9 +1,8 @@
 import { getItem, removeItem, setItem } from '@utils/localStorageFun';
 import axios from 'axios';
-import { postLogout } from './auth';
 
 const authClient = axios.create({
-  baseURL: import.meta.env.VITE_SERVER_URL,
+  baseURL: `${import.meta.env.VITE_SERVER_URL}api/`,
   headers: {
     'Content-Type': 'application/json',
   },
@@ -38,18 +37,16 @@ authClient.interceptors.response.use(
     return res;
   },
   function (error) {
-    console.error(error);
-
     if (error.response.status === 401) {
       // 응답이 401으로 오는 경우
       // 1. 엑세스 토큰이 없는 경우(엑세스 토큰이 없습니다.)
       // 2. 리프레시 토큰이 만료된 경우(리프레시 토큰이 존재하지 않습니다.)
       // 3. 리프레시 토큰이 없는 경우
       // 전부 비로그인으로 처리합니다.
-      // TODO 서지수 | 로그아웃 요청
       console.log('401에러 발생 로그인 페이지로 이동시키면 됩니다.');
-      postLogout();
-      removeItem('accessToken');
+      if (getItem('accessToken')) {
+        removeItem('accessToken');
+      }
     }
     return Promise.reject(error);
   },

diff --git a/src/api/client.ts b/src/api/client.ts
@@ -1,7 +1,7 @@
 import axios from 'axios';
 
 const client = axios.create({
-  baseURL: import.meta.env.VITE_SERVER_URL,
+  baseURL: `${import.meta.env.VITE_SERVER_URL}api/`,
   headers: {
     'Content-Type': 'application/json',
   },

diff --git a/src/components/Auth/AuthSurvey/AuthSurvey.tsx b/src/components/Auth/AuthSurvey/AuthSurvey.tsx
@@ -43,15 +43,13 @@ const AuthSurvey = ({ path }: Props) => {
         //   newPrevUserInfo.survey = data;
         //   return newPrevUserInfo;
         // });
-        alert('변경되었습니다.');
         navigate(path);
       }
     } catch (err) {
       console.error(err);
       alert('오류가 발생했습니다. 다시 시도해주세요');
     }
   };
-  console.log(isDirty);
 
   return (
     <form className="mb-8" onSubmit={handleSubmit(onSaveSubmit)}>

diff --git a/src/components/Auth/Login/AuthButtons/KakaoLoginButton.tsx b/src/components/Auth/Login/AuthButtons/KakaoLoginButton.tsx
@@ -1,14 +1,10 @@
 import { KakaoIcon } from '@components/common/icons/Icons';
 
 const KakaoLoginButton = () => {
-  const VITE_KAKAO_LOGIN_TEST_API_KEY = import.meta.env
-    .VITE_KAKAO_LOGIN_TEST_API_KEY;
-  const REDIRECT_URI = `${window.location.href}/kakao`;
-  const KAKAO_LOGIN_URL = `https://kauth.kakao.com/oauth/authorize?client_id=${VITE_KAKAO_LOGIN_TEST_API_KEY}&redirect_uri=${REDIRECT_URI}&response_type=code`;
-
   return (
     <a
-      href={KAKAO_LOGIN_URL}
+      href={`${import.meta.env.VITE_SERVER_URL}oauth2/authorization/kakao`}
+      // href="http://localhost:8080/oauth2/authorization/kakao"
       className="body3 mb-2 flex h-14 w-full items-center justify-center gap-2 rounded-lg bg-[#fee304] p-2 text-['#3B1E1E']">
       <KakaoIcon />
       카카오로 로그인

diff --git a/src/components/Auth/Login/KakaoLogin.tsx b/src/components/Auth/Login/KakaoLogin.tsx
@@ -0,0 +1,44 @@
+import { UserInfoState } from '@recoil/Auth.atom';
+import { setItem } from '@utils/localStorageFun';
+import { useEffect } from 'react';
+import { useNavigate, useSearchParams } from 'react-router-dom';
+import { useSetRecoilState } from 'recoil';
+
+const KakaoLogin = () => {
+  const setUserInfo = useSetRecoilState(UserInfoState);
+  const navigate = useNavigate();
+
+  const [searchParams, _] = useSearchParams();
+  const nickname = searchParams.get('nickname');
+  const email = searchParams.get('email');
+  const gender = searchParams.get('gender');
+  const age_range = searchParams.get('age_range');
+  const accessToken = searchParams.get('token');
+  const profile_image = searchParams.get('profile_image');
+  const signup = searchParams.get('signup');
+
+  useEffect(() => {
+    if (accessToken) {
+      setItem('accessToken', accessToken);
+      setUserInfo({
+        nickname: nickname!,
+        email: email!,
+        profileImageUrl: profile_image,
+        ageType: age_range,
+        genderType: gender,
+        survey: null,
+      });
+      if (signup) {
+        navigate('/signup/success');
+      } else {
+        navigate('/');
+      }
+    } else {
+      alert('로그인에 실패했습니다. 다시 시도해주세요.');
+      navigate('/login');
+    }
+  }, []);
+  return <>카카오 로그인 중입니다.</>;
+};
+
+export default KakaoLogin;
diff --git a/src/components/Auth/Login/LoginForm.tsx b/src/components/Auth/Login/LoginForm.tsx
@@ -38,7 +38,6 @@ const LoginForm = () => {
       if (res.data.status === 200) {
         setItem('accessToken', res.data.data.tokenInfo.accessToken);
         // setUserInfo(res.data.data.memberDto);
-        // TODO 서지수 | 로그인 후 어디로 갈지 물어보고 수정
         navigate('/');
       }
     } catch (err) {

diff --git a/src/components/Auth/Login/index.ts b/src/components/Auth/Login/index.ts
@@ -1,5 +1,6 @@
 import LoginLogo from './LoginLogo';
 import LoginForm from './LoginForm';
 import AuthButtonsWrapper from './AuthButtons/AuthButtonsWrapper';
+import KakaoLogin from './KakaoLogin';
 
-export { LoginLogo, LoginForm, AuthButtonsWrapper };
+export { LoginLogo, LoginForm, AuthButtonsWrapper, KakaoLogin };
diff --git a/src/components/DetailSectionBottom/DetailReviews.tsx b/src/components/DetailSectionBottom/DetailReviews.tsx
@@ -25,6 +25,8 @@ import ReviewItem from './ReviewItem';
 import ToastPopUp from '@components/common/toastpopup/ToastPopUp';
 import EditDelete from '@components/common/modal/children/EditDelete';
 import MyAlert from '@components/common/modal/children/MyAlert';
+import { alertTypeState } from '@recoil/modal';
+
 interface reviewProps {
   reviewData: any;
 }
@@ -45,6 +47,7 @@ export default function DetailReviews({ reviewData }: reviewProps) {
   const setIsModifyingReview = useSetRecoilState(isModifyingReviewState);
   const [toastPopUp, setToastPopUp] = useRecoilState(toastPopUpState);
   const modalChildren = useRecoilValue(modalChildrenState);
+  const alertType = useRecoilValue(alertTypeState);
 
   const {
     data: toursReviews,
@@ -129,7 +132,7 @@ export default function DetailReviews({ reviewData }: reviewProps) {
       </div>
       {reviewDataLength == 0 && (
         <div
-          className="flex cursor-pointer flex-col items-center justify-center"
+          className="flex cursor-pointer flex-col items-center justify-center pb-10"
           onClick={handlePostingReivew}>
           <div className="mb-2 flex">
             {Array.from({ length: 5 }, (_, index) => (
@@ -179,9 +182,15 @@ export default function DetailReviews({ reviewData }: reviewProps) {
       </InfiniteScroll>
       <Modal isOpen={isModalOpen} closeModal={closeModal}>
         {modalChildren === 'EditDelete' && <EditDelete />}
-        {modalChildren === 'MyAlert' && (
+        {modalChildren === 'MyAlert' && alertType === 'DeleteReview' && (
           <MyAlert title="리뷰 삭제" content="리뷰를 삭제할까요?" />
         )}
+        {modalChildren === 'MyAlert' && alertType === 'LoginReview' && (
+          <MyAlert
+            title="로그인"
+            content="리뷰 쓰기 시 로그인이 필요해요. 로그인하시겠어요?"
+          />
+        )}
       </Modal>
     </>
   );

diff --git a/src/components/DetailSectionBottom/ReviewItem.tsx b/src/components/DetailSectionBottom/ReviewItem.tsx
@@ -111,25 +111,25 @@ const Item: React.FC<ItemProps> = (props: ItemProps) => {
   };
 
   return (
-    <>
-      <div className="cursor-pointer pb-4" onClick={onClick}>
-        <div className=" mb-5 flex items-center">
-          <div className="mr-2">
-            {!(
-              authorProfileImageUrl === 'http://asiduheimage.jpg' ||
-              authorProfileImageUrl === null
-            ) ? (
-              <img
-                src={authorProfileImageUrl}
-                alt="유저 프로필"
-                className="w-12 rounded-full"
-              />
-            ) : (
-              <NullUser className="" />
-            )}
-          </div>
-          <div className=" mr-2 flex flex-col gap-1">
-            <div className="font-bold">{authorNickname}</div>
+    <div className="cursor-pointer pb-6" onClick={onClick}>
+      <div className=" mb-5 flex items-center">
+        <div className="mr-2">
+          {!(
+            authorProfileImageUrl === 'http://asiduheimage.jpg' ||
+            authorProfileImageUrl === null
+          ) ? (
+            <img
+              src={authorProfileImageUrl}
+              alt="유저 프로필"
+              className="h-[60px] w-[60px] rounded-full"
+            />
+          ) : (
+            <NullUser />
+          )}
+        </div>
+        <div className=" mr-2 flex flex-col gap-1">
+          <div className="font-bold">{authorNickname}</div>
+          <div className="flex gap-2">
             <div className="flex">
               {Array.from({ length: 5 }, (_, index) => (
                 <StarIcon
@@ -141,78 +141,79 @@ const Item: React.FC<ItemProps> = (props: ItemProps) => {
                 />
               ))}
             </div>
+            <div className="text-sm text-gray4">
+              {formatCreatedTime(createdTime)}
+            </div>
           </div>
-          <div className="mb-0.5 mt-auto text-sm text-gray4">
-            {formatCreatedTime(createdTime)}
+        </div>
+
+        {isAuthor && (
+          <div
+            className="ml-auto cursor-pointer"
+            onClick={(e) => openModal('내 리뷰', reviewId, e)}>
+            <MoreIcon fill="#888888" color="none" />
           </div>
-          {isAuthor && (
+        )}
+      </div>
+      {canTextOverflow ? (
+        <div className="mb-4 ml-1 max-h-12 text-gray7">
+          {content.length > 55 ? `${content.slice(0, 55)}...` : content}
+        </div>
+      ) : (
+        <div className="mb-4 text-gray7">{content}</div>
+      )}
+
+      <div className="flex items-center ">
+        <div className="flex gap-2">
+          {!showMoreKeywords &&
+            keywords.slice(0, 2).map((keyword, idx) => (
+              <div
+                key={idx}
+                className="rounded-md bg-gray1 px-2 py-1 text-xs text-gray6">
+                {getEmoji(keyword.content)} {keyword.content}
+              </div>
+            ))}
+          {keywords.length > 2 && !showMoreKeywords && (
             <div
-              className="ml-auto cursor-pointer"
-              onClick={(e) => openModal('내 리뷰', reviewId, e)}>
-              <MoreIcon fill="#888888" color="none" />
+              className="rounded-md bg-gray1 px-2 py-1 text-xs text-gray6"
+              onClick={(e) => {
+                handleClickPlusButton(e);
+              }}>
+              +{keywords.length - 2}
             </div>
           )}
         </div>
-        {canTextOverflow ? (
-          <div className="mb-4 max-h-12 overflow-hidden text-gray7">
-            {content.length > 75 ? `${content.slice(0, 75)}...` : content}
-          </div>
-        ) : (
-          <div className="mb-4 text-gray7">{content}</div>
-        )}
-
-        <div className="flex ">
-          <div className="flex gap-2">
-            {!showMoreKeywords &&
-              keywords.slice(0, 2).map((keyword, idx) => (
+        <div>
+          {showMoreKeywords &&
+            Array.from({ length: Math.ceil(keywords.length / 2) }).map(
+              (_, lineIdx) => (
                 <div
-                  key={idx}
-                  className="rounded-md bg-gray1 px-2 py-1 text-xs text-gray6">
-                  {getEmoji(keyword.content)} {keyword.content}
+                  key={lineIdx}
+                  className={`flex gap-2 ${
+                    lineIdx === Math.ceil(keywords.length / 2) - 1
+                      ? ''
+                      : ' mb-3'
+                  }`}>
+                  {keywords
+                    .slice(lineIdx * 2, lineIdx * 2 + 2)
+                    .map((keyword, idx) => (
+                      <div
+                        key={idx}
+                        className="rounded-md bg-gray1 px-2 py-1 text-xs text-gray6">
+                        {getEmoji(keyword.content)} {keyword.content}
+                      </div>
+                    ))}
                 </div>
-              ))}
-            {keywords.length > 2 && !showMoreKeywords && (
-              <div
-                className="rounded-md bg-gray1 px-2 py-1 text-xs text-gray6"
-                onClick={(e) => {
-                  handleClickPlusButton(e);
-                }}>
-                +{keywords.length - 2}
-              </div>
+              ),
             )}
-          </div>
-          <div>
-            {showMoreKeywords &&
-              Array.from({ length: Math.ceil(keywords.length / 2) }).map(
-                (_, lineIdx) => (
-                  <div
-                    key={lineIdx}
-                    className={`flex gap-2 ${
-                      lineIdx === Math.ceil(keywords.length / 2) - 1
-                        ? ''
-                        : ' mb-3'
-                    }`}>
-                    {keywords
-                      .slice(lineIdx * 2, lineIdx * 2 + 2)
-                      .map((keyword, idx) => (
-                        <div
-                          key={idx}
-                          className="rounded-md bg-gray1 px-2 py-1 text-xs text-gray6">
-                          {getEmoji(keyword.content)} {keyword.content}
-                        </div>
-                      ))}
-                  </div>
-                ),
-              )}
-          </div>
+        </div>
 
-          <div className="ml-auto mr-2 flex ">
-            <ChatIcon size={20} color="#5E5E5E" />
-            <div className="ml-1 text-gray5">{commentCount}</div>
-          </div>
+        <div className="ml-auto mr-2 flex ">
+          <ChatIcon size={20} color="#5E5E5E" />
+          <div className="ml-1 text-gray5">{commentCount}</div>
         </div>
       </div>
-    </>
+    </div>
   );
 };