240617 lej : login

.gitignore

@@ -21,3 +21,77 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+
+# Created by https://www.toptal.com/developers/gitignore/api/macos,react,visualstudiocode
+# Edit at https://www.toptal.com/developers/gitignore?templates=macos,react,visualstudiocode
+
+### macOS ###
+# General
+.DS_Store
+.AppleDouble
+.LSOverride
+
+# Icon must end with two \r
+Icon
+
+
+# Thumbnails
+._*
+
+# Files that might appear in the root of a volume
+.DocumentRevisions-V100
+.fseventsd
+.Spotlight-V100
+.TemporaryItems
+.Trashes
+.VolumeIcon.icns
+.com.apple.timemachine.donotpresent
+
+# Directories potentially created on remote AFP share
+.AppleDB
+.AppleDesktop
+Network Trash Folder
+Temporary Items
+.apdisk
+
+### macOS Patch ###
+# iCloud generated files
+*.icloud
+
+### react ###
+.DS_*
+*.log
+logs
+**/*.backup.*
+**/*.back.*
+
+node_modules
+bower_components
+
+*.sublime*
+
+psd
+thumb
+sketch
+
+### VisualStudioCode ###
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+!.vscode/*.code-snippets
+
+# Local History for Visual Studio Code
+.history/
+
+# Built Visual Studio Code Extensions
+*.vsix
+
+### VisualStudioCode Patch ###
+# Ignore all local history of files
+.history
+.ionide
+
+# End of https://www.toptal.com/developers/gitignore/api/macos,react,visualstudiocode

package.json

@@ -14,7 +14,9 @@
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "axios": "^1.7.2",
     "css-loader": "^7.1.2",
+    "dotenv": "^16.4.5",
     "node-sass": "^7.0.3",
     "normalize.css": "^8.0.1",
     "react": "^18.3.1",

src/App.js

@@ -8,10 +8,11 @@ import Travel from "./pages/Travel";
 import Mypage from "./pages/Mypage";
 import PlaceDetail from "./pages/PlaceDetail";
 import Header from "./components/Header";
-import Login from "./pages/LoginModal";
-import CallBack from "./components/CallBack";
+import Login from "./pages/Login/Login";
 import useClickedName from './hooks/useClickedPlaceName';
 import Intro from "./pages/Intro";
+import Redirection from "./pages/Login/Redirection";
+import LoginSuccess from "./pages/Login/LoginSuccess";
 
 
 function App() {
@@ -27,13 +28,14 @@ function App() {
         <Route path = "/main" element ={<Main updateClickedName={updateClickedName} />} />
         <Route path ="/*" element = {<NotFound/>}/>
         <Route path ="/login" element = {<Login/>}/>
+        <Route path ="/login/callback" element = {<Redirection/>}/>
+        <Route path ="/loginSuccess" element = {<LoginSuccess/>}/>
         <Route path ="/travel" element = {<Travel updateClickedName={updateClickedName} />}/>
         <Route path ="/calendar" element = {<Calendar/>}/>
         <Route path ="/community" element = {<Community/>}/>
         <Route path = "/main/:name" element = {<PlaceDetail updateClickedName={updateClickedName} />} />
         <Route path = "/travel/:name" element = {<PlaceDetail updateClickedName={updateClickedName} />}/>
         <Route path ="/mypage" element = {<Mypage/>}/>
-        <Route path ="/login/callback" element = {<CallBack/>}/>
       </Routes>
       <Footer/>
       </BrowserRouter>

src/components/SuggestedPlaces.jsx

@@ -38,12 +38,14 @@ export default function SuggestedPlaces({place}) {
 
 
   return (
+    <>
     <div className = "sug-place-wrapper" onClick={onClickPlaceItem}>
       <Box>
         <img src = {place.img_src} alt="?" style={{maxWidth:"150px",maxHeight:"150px", minWidth:"150px",minHeight:"150px",overflow:"hidden", borderRadius : "5px"}}/>
         <Title>{rename} </Title>
         <div style={{color : "#8C8D8A", fontSize:"14px"}}> {readdress} </div>
       </Box>  
     </div>
+    </>
   );
 }

src/pages/Intro.jsx

@@ -4,8 +4,8 @@ import styled, { keyframes, css } from 'styled-components';
 import bg1 from '../assets/img/Intro1.jpeg';
 import bg2 from '../assets/img/Intro2.jpeg';
 import bg3 from '../assets/img/Intro3.png';
-import logo from '../assets/img/woravel_logo.png'; // 로고 이미지 경로
-import LoginModal from './LoginModal';
+import logo from '../assets/img/woravel_logo.svg'; // 로고 이미지 경로
+import { useNavigate } from 'react-router-dom';
 
 // 이미지 배열
 const images = [bg1, bg2, bg3];
@@ -83,40 +83,42 @@ const IntroImg = styled.div`
 `;
 
 export default function Intro() {
-    const [currentImage, setCurrentImage] = useState(0);
-    const [nextImage, setNextImage] = useState(1);
-    const [isTransitioning, setIsTransitioning] = useState(false);
-    const [isModalOpen, setIsModalOpen] = useState(false);
-
-    useEffect(() => {
-      const interval = setInterval(() => {
-        setNextImage((prevImage) => (prevImage + 1) % images.length);
-        setIsTransitioning(true);
-        setTimeout(() => {
-          setCurrentImage((prevImage) => (prevImage + 1) % images.length);
-          setIsTransitioning(false);
-        }, 1500); // 이미지 전환 시간을 고려하여 타이머 설정
-      }, 5000); // 5초마다 이미지 전환
-
-      return () => clearInterval(interval);
-    }, [currentImage]);
-
-    const openModal = () => {
-      setIsModalOpen(true);
-    };
-
-    const closeModal = () => {
-      setIsModalOpen(false);
-    };
-
-    return (
-      <BackgroundWrapper>
-        <BackgroundImage bgimage={images[currentImage]} isActive={!isTransitioning} />
-        <BackgroundImage bgimage={images[nextImage]} isActive={isTransitioning} />
-        <IntroDiv>
-          {isModalOpen && <LoginModal onClose={closeModal} />}
-        </IntroDiv>
-        <IntroImg onClick={openModal} />
-      </BackgroundWrapper>
-    );
+
+  const navigate = useNavigate()
+
+  const [currentImage, setCurrentImage] = useState(0);
+  const [nextImage, setNextImage] = useState(1);
+  const [isTransitioning, setIsTransitioning] = useState(false);
+
+  const handleLogin=()=>{
+    navigate('/login');
+
   }
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setNextImage((prevImage) => (prevImage + 1) % images.length);
+      setIsTransitioning(true);
+      setTimeout(() => {
+        setCurrentImage((prevImage) => (prevImage + 1) % images.length);
+        setIsTransitioning(false);
+      }, 1500); // 이미지 전환 시간을 고려하여 타이머 설정
+    }, 5000); // 5초마다 이미지 전환
+
+    return () => clearInterval(interval);
+  }, [currentImage]);
+
+
+
+
+  return (
+    <BackgroundWrapper>
+      <BackgroundImage bgimage={images[currentImage]} isActive={!isTransitioning} />
+      <BackgroundImage bgimage={images[nextImage]} isActive={isTransitioning} />
+      <IntroDiv>
+
+      </IntroDiv>
+      <IntroImg onClick={handleLogin} />
+    </BackgroundWrapper>
+  );
+}

src/pages/Login/Login.jsx

@@ -0,0 +1,78 @@
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+import styled from 'styled-components';
+import kakaoLogo from './kakaologin.png';
+import naverLogo from './naverlogin.png'
+
+
+
+
+
+const LoginText = styled.div`
+`
+
+const BtnWrapper = styled.div`
+  display:flex;
+  justify-content : space-between;
+  margin : 30px;
+
+  img{
+    width: 50px;
+    height : 50px;
+  }
+
+`
+
+const LoginBtn = styled.div`
+  text-align : center;
+`
+
+const LoginModal = () => {
+
+  const navigate = useNavigate();
+
+  const handleLoginClick = () => {
+    navigate(`/main`);
+  };
+
+  //카카오 로그인 
+  const REST_API_KEY= '20483329cf0b7ad5c283f195f697d397'
+  const REDIRECT_URL = 'http://43.200.247.44/login/oauth2/code/kakao' //Redirect URI
+      // oauth 요청 URL
+  const kakaoURL = `https://kauth.kakao.com/oauth/authorize?client_id=${REST_API_KEY}&redirect_uri=${REDIRECT_URL}&response_type=code`
+
+
+  const handleKakaoLoginClick = () =>{
+    window.location.href = kakaoURL
+  }
+
+  return (
+    <div>
+      <LoginText>
+        <div>WORAVEL</div>
+        <div>제주도에서 <span>WORK</span>와 <span>TRAVEL</span>을 동시에! </div>
+        <div>디지털 노마드의 삶을 응원합니다! </div>
+
+      </LoginText>
+
+      <BtnWrapper>
+        <LoginBtn onClick={handleKakaoLoginClick}>
+          <img src = {kakaoLogo} alt = "카카오 로그인"/>
+          <div>카카오 로그인  </div>
+        </LoginBtn>
+        <LoginBtn >
+          <img src = {naverLogo} alt = "네이버 로그인"/>
+          <div>네이버 로그인</div>
+        </LoginBtn>
+        <LoginBtn>
+          <button onClick={handleLoginClick}>No Login </button>
+          <div>로그인 없이<br/> 둘러볼게요!</div>
+        </LoginBtn>
+      </BtnWrapper>
+
+
+    </div> 
+  );
+};
+
+export default LoginModal;