Merge branch 'develop' into feat/#101

KUSITMS-29th-TEAM-B · May 20, 2024 · d802713 · d802713
2 parents 2e581b0 + d0ad046
commit d802713
Show file tree

Hide file tree

Showing 10 changed files with 56 additions and 11 deletions.
diff --git a/public/assets/profile1.png b/public/assets/profile1.png
diff --git a/public/assets/profile2.png b/public/assets/profile2.png
diff --git a/public/assets/profile3.png b/public/assets/profile3.png
diff --git a/public/assets/profile4.png b/public/assets/profile4.png
diff --git a/public/assets/profile5.png b/public/assets/profile5.png
diff --git a/src/components/common/MainButton.tsx b/src/components/common/MainButton.tsx
@@ -11,7 +11,7 @@ const MainButton = ({ children, ...props }: MainButtonProps) => {
 const Button = styled.button`
   flex-shrink: 0;
   border-radius: 67.408px;
-  background: var(--main-500, #7d82ff);
+  background: ${(props) => props.theme.colors.main500};
   padding: 22px 44px;
   color: white;
   border: none;
@@ -20,6 +20,9 @@ const Button = styled.button`
   justify-content: center;
   ${(props) => props.theme.fonts.title4};
   gap: 5px;
+  &:disabled {
+    background: ${(props) => props.theme.colors.neutral500};
+  }
 `;
 
 export default MainButton;
diff --git a/src/components/common/Navbar.tsx b/src/components/common/Navbar.tsx
@@ -9,6 +9,10 @@ const Navbar = () => {
   const location = useLocation();
   const user = getCookie("user");
 
+  const handleImgError = (e: React.SyntheticEvent<HTMLImageElement, Event>) => {
+    e.currentTarget.src = `${process.env.PUBLIC_URL}/assets/profile1.png`;
+  };
+
   return (
     <NavContainer>
       <ItemContainer>
@@ -32,9 +36,24 @@ const Navbar = () => {
       </ItemContainer>
       <ItemContainer>
         {user?.token ? (
-          <UserInfo onClick={() => navigate(`/profile`)}>
-            {user?.nickName}님
-          </UserInfo>
+          <>
+            <img
+              src={
+                user?.profileImgUrl ||
+                `${process.env.PUBLIC_URL}/assets/profile1.png`
+              }
+              alt="profile"
+              style={{
+                width: "32px",
+                height: "32px",
+                borderRadius: "50%",
+              }}
+              onError={handleImgError}
+            />
+            <UserInfo onClick={() => navigate(`/profile`)}>
+              {user?.nickName}님
+            </UserInfo>
+          </>
         ) : (
           <LoginButton onClick={() => navigate(`/sign-in`)}>로그인</LoginButton>
         )}
@@ -62,7 +81,7 @@ const ItemContainer = styled.div`
   display: flex;
   flex-direction: row;
   align-items: center;
-  gap: 2.5rem;
+  gap: 0.5rem;
 `;
 
 const MenuList = styled.div`

diff --git a/src/pages/SignInPage.tsx b/src/pages/SignInPage.tsx
@@ -35,12 +35,16 @@ const SignInPage = () => {
             // 기존 계정 (로그인)
             else {
               const token = res.data.accessToken;
+              const refreshToken = res.data.refreshToken;
               getUserInfo(token)
                 .then((res) =>
                   setCookie("user", {
                     nickName: res.data.nickName,
+                    profileImgUrl: res.data.profileImgUrl,
                     provider: "KAKAO",
+                    email: res.data.email,
                     token: token,
+                    refreshToken: refreshToken,
                   })
                 )
                 .then(() => navigate("/experience"));
@@ -83,12 +87,16 @@ const SignInPage = () => {
                 // 기존 계정 (로그인)
                 else {
                   const token = res.data.accessToken;
+                  const refreshToken = res.data.refreshToken;
                   getUserInfo(token)
                     .then((res) =>
                       setCookie("user", {
                         nickName: res.data.nickName,
+                        profileImgUrl: res.data.profileImgUrl,
                         provider: "GOOGLE",
+                        email: res.data.email,
                         token: token,
+                        refreshToken: refreshToken,
                       })
                     )
                     .then(() => navigate("/experience"));

diff --git a/src/pages/SignupPage.tsx b/src/pages/SignupPage.tsx
@@ -19,11 +19,11 @@ import { RegisterDataType } from "../types/user";
 import { getCookie, setCookie } from "../services/cookie";
 
 const profileImgUrl = [
-  "../assets/images/profile1.png",
-  "../assets/images/profile2.png",
-  "../assets/images/profile3.png",
-  "../assets/images/profile4.png",
-  "../assets/images/profile5.png",
+  "/assets/profile1.png",
+  "/assets/profile2.png",
+  "/assets/profile3.png",
+  "/assets/profile4.png",
+  "/assets/profile5.png",
 ];
 
 const SignupPage = () => {
@@ -40,6 +40,7 @@ const SignupPage = () => {
     goal: "",
     dream: "",
   });
+  const [isLoading, setIsLoading] = React.useState(false);
 
   const [isModalOpen, setIsModalOpen] = React.useState(false); // 저장 모달
 
@@ -68,18 +69,24 @@ const SignupPage = () => {
 
   const handleRegister = () => {
     register(registerData).then((res) => {
+      setIsLoading(true);
       const token = res.data.accessToken;
+      const refreshToken = res.data.refreshToken;
       getUserInfo(token)
         .then((res) => {
           setCookie("user", {
             ...user,
             nickName: res.data.nickName,
+            profileImgUrl: res.data.profileImgUrl,
             provider: res.data.provider,
+            email: res.data.email,
             token: token,
+            refreshToken: refreshToken,
           });
         })
         .then(() => openModal());
     });
+    setIsLoading(false);
   };
 
   return (
@@ -254,9 +261,12 @@ const SignupPage = () => {
             style={{ background: theme.colors.neutral100 }}
           />
           <MainButton
+            disabled={
+              isLoading ||
+              !(registerData.profileImgUrl && registerData.nickName)
+            }
             style={{
               borderRadius: "8px",
-              background: theme.colors.neutral500,
             }}
             onClick={handleRegister}
           >

diff --git a/src/services/user.tsx b/src/services/user.tsx
@@ -8,6 +8,11 @@ export const login = async (loginType: string, accessToken: string) => {
   });
 };
 
+// 로그아웃
+export const logout = async (refreshToken: string) => {
+  return await client.delete(`/api/auth/logout`);
+};
+
 // 회원가입
 export const register = async ({
   registrationToken,