Feature/footer 리펙토링 #146

src/api/axiosInstance.ts

@@ -19,8 +19,8 @@ const needAuthDefaultApi = axios.create({
   baseURL: process.env.REACT_APP_API_URL,
   headers: {
     "Content-Type": "application/json",
-    Authorization: JSON.parse(localStorage.getItem("poomasi_user") || "{}")?.token
-      ? `Bearer ${JSON.parse(localStorage.getItem("poomasi_user") || "{}").token}`
+    Authorization: JSON.parse(localStorage.getItem("poomasi-user") || "{}")?.token
+      ? `Bearer ${JSON.parse(localStorage.getItem("poomasi-user") || "{}").token}`
       : undefined,
   },
   withCredentials: true,

src/api/intercepters.ts

@@ -13,10 +13,10 @@ const refrechIntercepter = async (response: AxiosResponse): Promise<AxiosRespons
       alert("로그아웃 되었습니다. 다시 로그인해주세요.");
       window.location.href = "/";
     });
-    const user = JSON.parse(localStorage.getItem("poomasi_user") || "{}");
+    const user = JSON.parse(localStorage.getItem("poomasi-user") || "{}");
 
     localStorage.setItem(
-      "poomasi_user",
+      "poomasi-user",
       JSON.stringify({
         ...user,
         token: result,

src/atoms/userAtom.ts

@@ -7,7 +7,7 @@ type UserAtomValue = {
   role: string;
 };
 
-const userAtom = atom(localStorage.getItem("poomasi_user") ?? "");
+const userAtom = atom(localStorage.getItem("poomasi-user") ?? "");
 
 const userAtomWithPersistence = atom(
   get => {
@@ -16,7 +16,7 @@ const userAtomWithPersistence = atom(
   },
   (_, set, data: UserAtomValue | null) => {
     set(userAtom, JSON.stringify(data));
-    localStorage.setItem("poomasi_user", JSON.stringify(data));
+    localStorage.setItem("poomasi-user", JSON.stringify(data));
   },
 );
 

src/components/common/KaKaoLoginButton.tsx

@@ -4,7 +4,7 @@ import Image from "@components/common/Image";
 type KaKaoLoginButtonProps = ImageProps;
 
 const KaKaoLoginButton = ({ ...props }: KaKaoLoginButtonProps) => {
-  const link = "https://api.poomasi.shop/oauth2/authentication/kakao";
+  const link = "http://172.22.42.12:8080/oauth2/authentication/kakao";
 
   return (
     <Link href={link} isExternal>

src/components/layouts/Header.tsx

@@ -1,109 +1,91 @@
-import { useState } from "react";
-import { Link } from "react-router-dom";
-import { HeartOutlined, ShoppingCartOutlined } from "@ant-design/icons";
-import { Box, Flex, Text, Icon } from "@chakra-ui/react";
+import { Link, useLocation } from "react-router-dom";
+import { HeartOutlined, ShoppingCartOutlined, LogoutOutlined } from "@ant-design/icons";
+import { Flex, Text, Icon } from "@chakra-ui/react";
 import poomasi from "@assets/logo/logo.png";
+import Avatar from "@components/common/Avatar";
 import Image from "@components/common/Image";
 import useLogin from "@hooks/useLogin";
 
-const Header = () => {
-  const [activeMenu, setActiveMenu] = useState<string>("");
+const menuLinks = [
+  {
+    name: "소개",
+    link: "/introduction",
+  },
+  {
+    name: "상점",
+    link: "/store",
+  },
+  {
+    name: "농장",
+    link: "/schedule",
+  },
+];
 
-  const { loginCheck, logout, sellerCheck } = useLogin();
+const Header = () => {
+  const location = useLocation();
 
-  const handleMenuClick = (menu: string) => {
-    setActiveMenu(menu);
-  };
+  const { user, loginCheck, logout, sellerCheck } = useLogin();
   return (
     <Flex pos="relative" direction="column" shadow="lg" bgColor="#FFFFFF">
-      <Flex justify="flex-end" p="1px 60px" color="#1C4532" fontSize="8px" fontWeight="regular">
-        {loginCheck()
-          ? [
-              <Text as={Link} mr="12px" to="/me">
-                마이페이지
-              </Text>,
-              <Text cursor="pointer" onClick={logout}>
-                로그아웃
-              </Text>,
-            ]
-          : [
-              <Text as={Link} mr="12px" to="/email/register">
-                회원가입
-              </Text>,
-              <Text as={Link} to="/login">
-                로그인
-              </Text>,
-            ]}
-        {sellerCheck() && (
-          <Text as={Link} ml="12px" to="/seller">
-            판매자 페이지
-          </Text>
-        )}
-      </Flex>
-
-      <Flex align="center" justify="space-between" p="10px 50px">
-        <Link to="/">
-          <Image h="30px" objectFit="contain" alt="poomasi" src={poomasi} />
-        </Link>
-
-        <Flex align="center" mx="20px" ml={-70}>
-          <Link to="/introduction">
-            <Text
-              mx="30px"
-              color={activeMenu === "소개" ? "#1C4532" : "#999999"}
-              fontSize="20px"
-              fontWeight="regular"
-              cursor="pointer"
-              onClick={() => handleMenuClick("소개")}
-            >
-              소개
-            </Text>
+      <Flex align="center" justify="space-between" p="5">
+        <Flex>
+          <Link to="/">
+            <Image h="30px" objectFit="contain" alt="poomasi" src={poomasi} />
           </Link>
-          <Link to="/store">
+          {sellerCheck() && (
             <Text
-              mx="30px"
-              color={activeMenu === "상점" ? "#1C4532" : "#999999"}
-              fontSize="20px"
+              as={Link}
+              align="center"
+              ml="3"
+              p="2"
+              color="white"
+              fontSize="12px"
               fontWeight="regular"
+              bg="#1C4532"
+              borderRadius="xl"
               cursor="pointer"
-              onClick={() => handleMenuClick("상점")}
+              to="/seller"
             >
-              상점
+              farmer
             </Text>
-          </Link>
-          <Link to="/schedule">
+          )}
+          {menuLinks.map(menuLink => (
             <Text
-              mx="30px"
-              color={activeMenu === "농장" ? "#1C4532" : "#999999"}
+              as={Link}
+              mx="5"
+              color={menuLink.link === location.pathname ? "#1C4532" : "#999999"}
               fontSize="20px"
               fontWeight="regular"
               cursor="pointer"
-              onClick={() => handleMenuClick("농장")}
+              to={menuLink.link}
             >
-              농장
+              {menuLink.name}
             </Text>
-          </Link>
+          ))}
         </Flex>
 
-        {/* <Input
-          w="400px"
-          h="40px"
-          ml={10}
-          px="20px"
-          border="2px solid #1C4532"
-          borderColor="#1C4532"
-          borderRadius="12px"
-          _placeholder={{ color: "#B3B3B3" }}
-          placeholder="검색어를 입력해주세요."
-        /> */}
-
-        <Flex ml={250}>
-          <Box mx="10px" color="#1C4532" cursor="pointer">
-            <Icon as={HeartOutlined} fontSize="25px" />
-          </Box>
-          <Box mx="10px" color="#1C4532" cursor="pointer">
-            <Icon as={ShoppingCartOutlined} fontSize="25px" />
-          </Box>
+        <Flex align="center" gap="5">
+          {loginCheck() ? (
+            [
+              <Link to="/me/wish">
+                <Icon as={HeartOutlined} color="#1C4532" fontSize="25px" />
+              </Link>,
+              <Link to="/cart">
+                <Icon as={ShoppingCartOutlined} color="#1C4532" fontSize="25px" />
+              </Link>,
+              <Flex as={Link} gap="1" to="/me">
+                <Avatar size="sm" src={user.profile} />
+                <Text color="#1C4532" fontSize="20px" fontWeight="regular" cursor="pointer">
+                  {user.name}님
+                </Text>
+              </Flex>,
+              <Icon as={LogoutOutlined} color="#1C4532" fontSize="25px" cursor="pointer" onClick={() => logout()} />,
+            ]
+          ) : (
+            <Text as={Link} color="#1C4532" fontSize="20px" fontWeight="regular" cursor="pointer" to="/login">
+              로그인
+            </Text>
+          )}
         </Flex>
       </Flex>
     </Flex>

src/hooks/useLogin.ts

@@ -30,7 +30,7 @@ const useLogin = () => {
 
   const sellerCheck = () => user?.role === "ROLE_FARMER";
 
-  return { login, logout, loginCheck, sellerCheck };
+  return { user, login, logout, loginCheck, sellerCheck };
 };
 
 export default useLogin;