Feat/#42/api jaeguk (#48)

* feat: 좋아요 버튼 이벤트 버블링 방지

* feat: 지도 마커 정보 API 연결

* feat: 마커 정보 데이터 불러오는 Axios 함수 추가

* feat: 검색어 입력 후 버튼 클릭시 검색 페이지로 이동

* feat: 마커 상세 카드 클릭시 상세 페이지로 이동

* style: 마커 상세 카드 닫기 버튼 z-index 조절

* feat: 소셜 로그인 컴포넌트 따로 분리

* feat: 로그인 버튼 하단에 회원가입, 아이디 찾기, 비밀번호 찾기 버튼 추가

* chore: 파일 경로 이동

* chore: 파일 import 경로 수정

* feat: 로그인 로직 구현 (추후 테스트 필요)

* feat: 후기 페이지 제목 글꼴 변경

* chore: 불필요한 import 제거

* feat: 검색바 입력 후 페이지 이동 함수 분리

* feat: 분리된 함수 사용해서 검색 후 페이지 이동

* chore: 포스팅 상세 타입 명칭 변경

* chore: handleClickSearchProgram인자로 navigate 받도록 변경

* chore: 함수 인자로 navigate 넘겨주도록 변경

* chore: props 명칭 변경에 따른 수정

* style: 메인 페이지 width 1440px로 고정

* style: 메인 배너 이미지 변경

* feat: 로그인 성공시 Axios 기본 헤더에 토큰 추가

* fix: react-quill css파일 별도 분리

* fix: 소셜 로그인 아이콘 import 방식 변경

* chore: 사용하지 않는 변수 제거

* chore: 현재 사용하지 않는 변수 주석처리

src/App.tsx

@@ -3,7 +3,7 @@ import Main from './pages/main/Main';
 import Map from './pages/map/Map';
 import { GlobalStyle } from './style/GlobalStyle';
 import Login from './pages/login/Login';
-import KakaoRedir from './pages/login/KakaoRedir';
+import KakaoRedir from './pages/login/redir/KakaoRedir';
 import Layout from './components/Header/Layout';
 import Search from './pages/Search';
 import Board from './pages/board/Board';

src/apis/map/index.ts

@@ -0,0 +1,3 @@
+import Axios from '..';
+
+export const fetchMapMarker = () => () => Axios.get('/programs/map');

src/components/Button/LikeButton.tsx

@@ -11,16 +11,20 @@ interface Props {
 
 const LikeButton: React.FC<Props> = ({ isLike, setIsLike, type }) => {
   // Todo: 인자로 id 전달받아서 서버에 찜 목록에 등록하는 API 연결
-  const handleClick = useCallback(() => {
-    switch (type) {
-      case 'program':
-        setIsLike(prev => !prev);
-        break;
-      case 'posting':
-        setIsLike(prev => !prev);
-        break;
-    }
-  }, [isLike]);
+  const handleClick = useCallback(
+    (e: React.MouseEvent) => {
+      e.stopPropagation();
+      switch (type) {
+        case 'program':
+          setIsLike(prev => !prev);
+          break;
+        case 'posting':
+          setIsLike(prev => !prev);
+          break;
+      }
+    },
+    [isLike],
+  );
 
   return (
     <Wrapper>
@@ -36,6 +40,7 @@ const LikeButton: React.FC<Props> = ({ isLike, setIsLike, type }) => {
 export default LikeButton;
 
 const Wrapper = styled.div`
+  z-index: 3;
   img {
     width: 100%;
     height: 100%;

src/functions/index.ts

@@ -0,0 +1,12 @@
+import { NavigateFunction } from 'react-router-dom';
+
+export const handleClickSearchProgram = (
+  searchInput: string,
+  setSearchInput: React.Dispatch<React.SetStateAction<string>>,
+  navigate: NavigateFunction,
+) => {
+  // 검색 후 페이지 이동
+  console.log('@@@@');
+  navigate(`/search?keyword=${searchInput}`);
+  setSearchInput('');
+};

src/pages/board/Introduction.tsx

@@ -1,4 +1,4 @@
-import { B2, H1 } from '@/style/fonts/StyledFonts';
+import { B2 } from '@/style/fonts/StyledFonts';
 import React from 'react';
 import styled from 'styled-components';
 
@@ -15,7 +15,7 @@ const Introduction: React.FC<Props> = ({ title, imageSrc, description }) => {
         <img src={imageSrc} alt="" />
       </ImageWrapper>
       <TextContainer>
-        <H1 $fontColor="var(--gray-900, #15191D)">{title}</H1>
+        <Title>{title}</Title>
         <B2 $fontColor="var(--gray-600, #666B6F)">{description}</B2>
       </TextContainer>
     </Container>
@@ -34,6 +34,15 @@ const Container = styled.div`
   gap: 55px;
 `;
 
+const Title = styled.pre`
+  color: var(--gray-900, #15191d);
+  font-family: 'Recipekorea';
+  font-size: 36px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 150%; /* 54px */
+`;
+
 const ImageWrapper = styled.div`
   //캐릭터 들어갈 곳
   width: 180px;

src/pages/login/Login.tsx

@@ -1,30 +1,47 @@
-import { B2Bold, B3, H1 } from '@/style/fonts/StyledFonts';
 import { useState } from 'react';
 import styled from 'styled-components';
-import Naver from '@/assets/icons/icon-naver.svg';
-import Kakao from '@/assets/icons/icon-kakao.svg';
-import Google from '@/assets/icons/icon-google.svg';
+import { useNavigate } from 'react-router-dom';
+
+import Axios from '@/apis';
+import { B2Bold, B3, H1 } from '@/style/fonts/StyledFonts';
+import SocialLogin from './SocialLogin';
+import LoginNavLink from './LoginNavLink';
+import { onLoginSuccess } from './functions';
 
 interface UserInputType {
   id: string;
   password: string;
 }
 
 const Login = () => {
-  const REST_API_KEY = import.meta.env.VITE_KAKAO_REST_API_KEY; //REST API KEY
-  const REDIRECT_URI = `${window.location.origin}/kakao/login`; //REDIRECT URI
-
-  // oauth 요청 URL
-  const kakaoURL = `https://kauth.kakao.com/oauth/authorize?client_id=${REST_API_KEY}&redirect_uri=${REDIRECT_URI}&response_type=code`;
-
   const [userInput, setUserInput] = useState<UserInputType>({
     id: '',
     password: '',
   });
+  const [isError, setIsError] = useState<boolean>(false);
+  const navigate = useNavigate();
+
+  const handleLogin = async () => {
+    try {
+      const res = await Axios.post('/auth/login', null, {
+        params: { loginId: userInput.id, loginPassword: userInput.password },
+      });
+      onLoginSuccess(res);
+      navigate('/');
+    } catch (e) {
+      // 비밀번호 불일치시 메시지
+      setIsError(true);
+      setTimeout(() => {
+        setIsError(false);
+      }, 4000);
+      console.error(e);
+    } finally {
+      setUserInput(prev => ({ ...prev, password: '' }));
+    }
+  };
 
-  const handleKakaoLogin = () => {
-    // 카카오 로그인 주소
-    window.location.href = kakaoURL;
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.code === 'Enter') handleLogin();
   };
 
   const handleChangeId = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -54,29 +71,27 @@ const Login = () => {
         {/* Password */}
         <Input
           placeholder="비밀번호"
+          type="password"
           value={userInput.password}
           onChange={handleChangePW}
+          onKeyDown={handleKeyDown}
         />
+        {isError && (
+          <ErrorMessage>
+            <B3 $fontColor="#F6505A">
+              아이디 또는 비밀번호가 일치하지 않습니다.
+            </B3>
+          </ErrorMessage>
+        )}
       </LoginContainer>
-
-      <Button>
+      <Button onClick={handleLogin}>
         <B2Bold $fontColor="#fff">로그인</B2Bold>
       </Button>
 
-      <SocialLoginContainer>
-        {/* 네이버 로그인 */}
-        <SocialLoginButton>
-          <img src={Naver} alt="naver" />
-        </SocialLoginButton>
-        {/* 카카오 로그인 */}
-        <SocialLoginButton onClick={handleKakaoLogin}>
-          <img src={Kakao} alt="kakao" />
-        </SocialLoginButton>
-        {/* 구글 로그인 */}
-        <SocialLoginButton>
-          <img src={Google} alt="google" />
-        </SocialLoginButton>
-      </SocialLoginContainer>
+      {/* 소셜 로그인 */}
+      <SocialLogin />
+      {/* 네비게이션 */}
+      <LoginNavLink />
     </Container>
   );
 };
@@ -110,10 +125,18 @@ const LoginContainer = styled.div`
   flex-direction: column;
   align-items: flex-start;
 
+  position: relative;
+
   width: 100%;
   gap: 20px;
 `;
 
+const ErrorMessage = styled.div`
+  position: absolute;
+  bottom: -30px;
+  left: 28px;
+`;
+
 const Input = styled.input`
   width: 100%;
   height: 56px;
@@ -148,25 +171,3 @@ const Button = styled.button`
   border-radius: 10px;
   background: var(--Sub-3, #ff7d2c);
 `;
-
-const SocialLoginContainer = styled.div`
-  display: flex;
-  align-items: flex-start;
-
-  gap: 16px;
-`;
-
-const SocialLoginButton = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  width: 56px;
-  height: 56px;
-  flex-shrink: 0;
-
-  background: #f6f6f6;
-  border-radius: 50%;
-
-  cursor: pointer;
-`;

src/pages/login/LoginNavLink.tsx

@@ -0,0 +1,36 @@
+import { B3 } from '@/style/fonts/StyledFonts';
+import { Link } from 'react-router-dom';
+import styled from 'styled-components';
+
+const LoginNavLink = () => {
+  return (
+    <Container>
+      <Link to={'/signup'}>
+        <B3 $fontColor="#666B6F">회원가입</B3>
+      </Link>
+      <Divider />
+      <B3 $fontColor="#666B6F">아이디 찾기</B3>
+      <Divider />
+      <B3 $fontColor="#666B6F">비밀번호 찾기</B3>
+    </Container>
+  );
+};
+
+export default LoginNavLink;
+
+const Container = styled.div`
+  display: flex;
+  align-items: center;
+  justify-items: center;
+  gap: 21px;
+
+  pre {
+    width: 88px;
+  }
+`;
+
+const Divider = styled.div`
+  width: 1px;
+  height: 20px;
+  background: var(--gray-300, #d2d7dc);
+`;

src/pages/login/SocialLogin.tsx

@@ -0,0 +1,58 @@
+import styled from 'styled-components';
+
+import Naver from '@/assets/icons/icon-naver.svg';
+import Kakao from '@/assets/icons/icon-kakao.svg';
+import Google from '@/assets/icons/icon-google.svg';
+
+const SocialLogin = () => {
+  const REST_API_KEY = import.meta.env.VITE_KAKAO_REST_API_KEY; //REST API KEY
+  const REDIRECT_URI = `${window.location.origin}/kakao/login`; //REDIRECT URI
+  // oauth 요청 URL
+  const kakaoURL = `https://kauth.kakao.com/oauth/authorize?client_id=${REST_API_KEY}&redirect_uri=${REDIRECT_URI}&response_type=code`;
+
+  const handleKakaoLogin = () => {
+    // 카카오 로그인 주소
+    window.location.href = kakaoURL;
+  };
+
+  return (
+    <SocialLoginContainer>
+      {/* 네이버 로그인 */}
+      <SocialLoginButton>
+        <img src={Naver} alt="naver" />
+      </SocialLoginButton>
+      {/* 카카오 로그인 */}
+      <SocialLoginButton onClick={handleKakaoLogin}>
+        <img src={Kakao} alt="kakao" />
+      </SocialLoginButton>
+      {/* 구글 로그인 */}
+      <SocialLoginButton>
+        <img src={Google} alt="google" />
+      </SocialLoginButton>
+    </SocialLoginContainer>
+  );
+};
+
+export default SocialLogin;
+
+const SocialLoginContainer = styled.div`
+  display: flex;
+  align-items: flex-start;
+
+  gap: 16px;
+`;
+
+const SocialLoginButton = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  width: 56px;
+  height: 56px;
+  flex-shrink: 0;
+
+  background: #f6f6f6;
+  border-radius: 50%;
+
+  cursor: pointer;
+`;

src/pages/login/functions/index.ts

@@ -0,0 +1,14 @@
+import Axios from '@/apis';
+import { AxiosResponse } from 'axios';
+
+export const onLoginSuccess = (res: AxiosResponse) => {
+  const { accessToken, refreshToken } = res?.data?.result;
+  refreshToken;
+  Axios.defaults.headers.common['Authorization'] = `Bearer ${accessToken}`;
+};
+
+// export const onSilentRefresh =  async () => {
+//   try {
+//     const res = await Axios.post(TOKEN)
+//   }
+// }

src/pages/main/Banner.tsx

@@ -38,8 +38,8 @@ const InnerContainer = styled.div`
   align-items: center;
   justify-content: space-between;
 
-  width: 100%;
-  padding: 0 360px;
+  width: 1440px;
+  margin: auto;
 `;
 
 const LeftBox = styled.div`

src/pages/main/HotProgram.tsx

@@ -48,8 +48,8 @@ const Container = styled.div`
 
   position: relative;
 
-  width: 100%;
-  padding: 0 360px 260px;
+  width: 1440px;
+  margin: 0 auto 260px;
 `;
 
 const TextContainer = styled.div`

src/pages/main/Main.tsx

@@ -25,5 +25,6 @@ const Container = styled.div`
   flex-direction: column;
   align-items: center;
 
+  width: 100%;
   gap: 120px;
 `;