Feat: Header css 조정

src/App.js

@@ -13,9 +13,7 @@ import Auth from "./hoc/auth";
 import useInterval from "./hooks/useInterval";
 import CartPage from "./pages/CartPage/CartPage";
 import HomePage from "./pages/HomePage/Homepage";
-import KakaoLoginPage from "./pages/LoginPage/Login";
-import PolicyInLogin from "./pages/LoginPage/PolicyInLogin";
-import PrivacyPolicyLogin from "./pages/LoginPage/PrivacyPolicyLogin";
+import LoginPage from "./pages/LoginPage/Login";
 import CouponPage from "./pages/MyPage/CouponPage/CouponPage";
 import CustomerServicePage from "./pages/MyPage/CustomerServicePage/CustomerServicePage";
 import EventingPage from "./pages/MyPage/EventingPage/EventingPage";
@@ -50,7 +48,7 @@ function App() {
   // ]);
 
   //false : 로그인 한 유저 못들어감
-  const NewLoginPage = Auth(KakaoLoginPage, false); // 로그인 페이지
+  const NewLoginPage = Auth(LoginPage, false); // 로그인 페이지
 
   //true : 로그인 한 유저 들어감
   const NewHomePage = Auth(HomePage, true);
@@ -87,12 +85,12 @@ function App() {
           if (!response.data) {
             message.info("다시 로그인해주세요.");
             removeCookies();
-            navigate("/kakaologin");
+            navigate("/login");
           }
         })
         .catch((error) => {
           message.info("다시 로그인해주세요.");
-          navigate("/kakaologin");
+          navigate("/login");
         });
     }
   }, minute - 60000); // 24시간 주기에서 1분을 뺀 주기로 주기적 실행
@@ -104,10 +102,10 @@ function App() {
           fallback={
             <div className="loading-div">
               <div className="loading-loader" />
-              <div className="loading-berry"> 
-                <img src={ic_berry} alt="berry"/>
+              <div className="loading-berry">
+                <img src={ic_berry} alt="berry" />
+              </div>
             </div>
-          </div>
           }
         >
           <Routes>
@@ -120,12 +118,7 @@ function App() {
             {/* 카페검색*/}
             <Route path="/search" element={<StoreSearchPage />} />
             {/* 로그인*/}
-            <Route path="/kakaologin" element={<NewLoginPage />} />
-            <Route path="/policyinlogin" element={<PolicyInLogin />} />
-            <Route
-              path="/privacypolicyinlogin"
-              element={<PrivacyPolicyLogin />}
-            />
+            <Route path="/login" element={<NewLoginPage />} />
             {/* 마이페이지-약관정책 페이지 */}
             <Route path="/policy" element={<PolicyPage />} />
             <Route path="/termsofuse" element={<TermsOfUse />} />

src/components/views/Header/Header.css

@@ -26,11 +26,11 @@
   background-color: #ffffff;
   display: flex;
   align-items: center;
-  display: flex;
   flex-direction: row;
   justify-content: space-between;
-  width: 86%;
-  margin: auto;
+  margin-top: 0.94rem;
+  padding-left: 1.56rem;
+  padding-right: 1.59rem;
 }
 
 .top_header_page span {

src/components/views/Header/Header.jsx

@@ -39,7 +39,7 @@ const Header = ({ headerProps }) => {
 
   const handleCancel = () => {
     setIsOpen(false);
-    navigate("/kakaoLogin");
+    navigate("/login");
   };
 
   return (

src/constants/images.js

@@ -52,4 +52,7 @@ export const IMAGES = {
   quantityPlus: require("../assets/images/ic_quantity_plus.png"),
   takeIn: require("../assets/images/ic_take_in.png"),
   takeOut: require("../assets/images/ic_take_out.png"),
+
+  // 마이페이지
+  profile: require("../assets/images/ic_profile.png"),
 };

src/hoc/auth.jsx

@@ -22,7 +22,7 @@ function Auth(SpecificComponent, option) {
       }
       if (!cookies?.accessToken) {
         if (option && location.pathname !== "/") {
-          navigate("/kakaologin");
+          navigate("/login");
         }
         // 로그인이 필요한 페이지
       } else {

src/pages/HomePage/Homepage.jsx

@@ -118,7 +118,7 @@ const HomePage = () => {
                 src={IMAGES.toLogin}
                 alt="login"
                 className="home_individual_login_btn"
-                onClick={() => navigate(`/kakaoLogin`)}
+                onClick={() => navigate(`/login`)}
               />
             </div>
           </div>

src/pages/LoginPage/Login.jsx

@@ -2,7 +2,7 @@ import "./Login.css";
 import { IMAGES } from "../../constants/images";
 import React from "react";
 
-function KaKaoLoginBtn() {
+function Login() {
   const handleKakaoLogin = () => {
     window.location.href = `${process.env.REACT_APP_KAKAO_LOGIN}`;
   };
@@ -32,4 +32,4 @@ function KaKaoLoginBtn() {
   );
 }
 
-export default KaKaoLoginBtn;
+export default Login;

src/pages/MyPage/MyPage.jsx

@@ -6,6 +6,7 @@ import Header from "../../components/views/Header/Header";
 import NavBar from "../../components/views/NavBar/NavBar";
 import "./MyPage.css";
 import useFetchUserInfo from "../../hooks/useFetchUserInfo";
+import { IMAGES } from "../../constants/images";
 
 function Mypage() {
   const [isAuth] = useRecoilState(isAuthenticatedState);
@@ -28,7 +29,7 @@ function Mypage() {
             <Link to="/myprofile" className="myprofile-link">
               <div className="login-box2" style={{ textDecoration: "none" }}>
                 <img
-                  // src={profile_icon}
+                  src={IMAGES.profile}
                   alt="ProfileIcon"
                   className="profile-icon2"
                   style={{ width: 60, height: 60 }}
@@ -39,7 +40,7 @@ function Mypage() {
             </Link>
           ) : (
             // 로그인 안 한 경우 로그인 버튼 나오게
-            <Link to="/kakaologin" className="not-login-box2">
+            <Link to="/login" className="not-login-box2">
               <img
                 // src={profile_icon}
                 alt="ProfileIcon2"
@@ -56,7 +57,7 @@ function Mypage() {
       <div className="mypage-order">
         <div className="mypage-order-text">주문 및 결제</div>
         <Link
-          to={isAuth ? "/status" : "/kakaologin"}
+          to={isAuth ? "/status" : "/login"}
           className="mypage-order-list-link"
         >
           <div className="mypage-order-list">주문내역</div>
@@ -65,7 +66,7 @@ function Mypage() {
           <div className="mypage-order-type">결제 수단 등록 (준비중)</div>
         </Link>
         <Link
-          to={isAuth ? "/coupon" : "/kakaologin"}
+          to={isAuth ? "/coupon" : "/login"}
           className="mypage-order-coupon-link"
         >
           <div className="mypage-order-coupon">할인쿠폰</div>