feat/#14-#11 pr 반영

package.json

@@ -14,14 +14,16 @@
     "@emotion/styled": "^11.13.0",
     "@reduxjs/toolkit": "^2.2.8",
     "@uiw/react-md-editor": "^3.6.0",
+    "axios": "^1.7.7",
     "next": "^14.2.14",
     "next-remove-imports": "^1.0.12",
     "polished": "^4.3.1",
     "react": "^18",
     "react-dom": "^18",
     "react-icons": "^5.3.0",
     "react-redux": "^9.1.2",
-    "react-spinners": "^0.14.1"
+    "react-spinners": "^0.14.1",
+    "zustand": "^5.0.1"
   },
   "devDependencies": {
     "@types/node": "^20",

src/components/LoginModal/LoginModel.tsx

@@ -3,6 +3,8 @@ import * as S from "./styles";
 import close from "../../../public/icons/close.svg";
 import chevron_left from "../../../public/icons/chevron_left.svg";
 import Image from "next/image";
+import { useAuthStore } from "@/stores/authStore";
+import { login } from "@/services/auth";
 
 interface ModalProps {
   onClose: () => void;
@@ -17,11 +19,25 @@ interface ModalProps {
 
 const Modal: React.FC<ModalProps> = ({ onClose, initialStep = "main" }) => {
   const [modalStep, setModalStep] = useState(initialStep);
+  const { login: setLoginState } = useAuthStore();
 
   useEffect(() => {
     setModalStep(initialStep);
   }, [initialStep]);
 
+  const handleLogin = async (e: React.FormEvent) => {
+    e.preventDefault();
+    try {
+      const user = await login("email", "password");
+      setLoginState(user);
+      console.log(user);
+      alert("로그인 성공!");
+    } catch (error) {
+      console.error(error);
+      alert("로그인 실패!");
+    }
+  };
+
   const handleBackdropClick = (event: React.MouseEvent<HTMLDivElement>) => {
     if (event.target === event.currentTarget) {
       onClose();
@@ -78,6 +94,14 @@ const Modal: React.FC<ModalProps> = ({ onClose, initialStep = "main" }) => {
               >
                 이메일로 로그인
               </S.Button>
+              <S.Button
+                bgColor="#ff000014"
+                hoverColor="#6aff0024"
+                textColor="#000000"
+                onClick={handleLogin}
+              >
+                로그인 테스트
+              </S.Button>
             </S.ButtonBox>
             <S.CheckboxContainer>
               <input type="checkbox" id="stayLoggedIn" />

src/components/Navigation/Navigation.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import {
   LoginText,
   SignUpButton,
@@ -13,11 +13,32 @@ import {
 import LoginModal from "../LoginModal/LoginModel";
 import hamburger from "../../../public/icons/hamburger.svg";
 import Image from "next/image";
+import { useAuthStore } from "@/stores/authStore";
+import userIcon from "../../../public/icons/user.svg";
+import { logout } from "@/services/auth";
 
 const Navigation: React.FC = () => {
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [isMenuOpen, setIsMenuOpen] = useState(false);
   const [initialStep, setInitialStep] = useState<"main" | "signup">("main");
+  const { isLoggedIn, logout: clearAuthState } = useAuthStore();
+
+  useEffect(() => {
+    if (isLoggedIn) {
+      setIsModalOpen(false);
+    }
+  }, [isLoggedIn]);
+
+  const handleLogout = async () => {
+    try {
+      await logout();
+      clearAuthState();
+      alert("로그아웃 성공!");
+    } catch (error) {
+      console.error(error);
+      alert("로그아웃 실패!");
+    }
+  };
 
   const handleOpenLoginModal = () => {
     setInitialStep("main");
@@ -67,9 +88,31 @@ const Navigation: React.FC = () => {
           </NavItems>
         </div>
       </div>
-      <div className="auth-buttons">
-        <LoginText onClick={handleOpenLoginModal}>로그인</LoginText>
-        <SignUpButton onClick={handleOpenSignupModal}>회원가입</SignUpButton>
+      <div className="">
+        {isLoggedIn ? (
+          <div
+            style={{
+              display: "flex",
+              alignItems: "center",
+            }}
+          >
+            <LoginText onClick={handleLogout}>로그아웃</LoginText>
+            <Image
+              style={{ cursor: "pointer" }}
+              src={userIcon}
+              width={38}
+              height={38}
+              alt="mypage"
+            />
+          </div>
+        ) : (
+          <>
+            <LoginText onClick={handleOpenLoginModal}>로그인</LoginText>
+            <SignUpButton onClick={handleOpenSignupModal}>
+              회원가입
+            </SignUpButton>
+          </>
+        )}
       </div>
       {isMenuOpen && (
         <>

src/components/Navigation/styles.ts

@@ -11,6 +11,7 @@ export const NavContainer = styled.nav`
   position: sticky;
   top: 0;
   width: 100%;
+  height: 80px;
   z-index: 1000;
   justify-content: space-between;
 

src/components/Newpost/Newpost.tsx

@@ -1,6 +1,6 @@
 import * as Style from "./styles";
 import SelectStackType from "../SelectStackType/SelectStackType";
-import NewpostEditor from "./MDEditor/MDEditor";
+import NewpostEditor from "./MDEditor/mdeditor";
 import { useEffect, useRef, useState } from "react";
 import NewpostImages from "./ImageUpload/ImageUpload";
 import { useAppDispatch } from "@/stores";

src/data/cardDummyDatas.ts

@@ -4,7 +4,7 @@ const dummyData = Array.from({ length: 100 }, (_, index) => ({
     "https://velog.velcdn.com/images/yena1025/post/295eb434-5b73-421f-bbe4-6bc13acd4c33/image.png",
   title: `프로젝트 ${index + 1}`,
   description: "외국인 유학생을 위한 앱",
-  likes: 123 + index,
+  likes: 124 + index,
   author: "캡스톤 30조",
 }));