-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
36 changed files
with
2,690 additions
and
2,037 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,6 +1,6 @@ | ||
:root { | ||
font-family: "SUIT Variable", sans-serif; | ||
text-align: center; | ||
width: 100vw; | ||
height: calc(var(--vh, 1vh) * 100); | ||
} | ||
:root { | ||
font-family: "SUIT Variable", sans-serif; | ||
text-align: center; | ||
width: 100vw; | ||
height: calc(var(--vh, 1vh) * 100); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,70 +1,70 @@ | ||
import "./App.css"; | ||
import { useEffect } from "react"; | ||
import { Routes, Route, BrowserRouter, useParams } from "react-router-dom"; | ||
import Login from "./pages/Login/Login"; | ||
import Join from "./pages/Join/Join"; | ||
import Main from "./pages/Main/Main"; | ||
import Frame from "./pages/Frame/Frame"; | ||
import MakeFrame from "./pages/Frame/MakeFrame"; | ||
import Photobook from "./pages/Photobook/Photobook"; | ||
import PhotobookUuid from "./pages/Photobook/PhotobookUuid"; | ||
import { | ||
BrowserView, | ||
MobileView, | ||
} from "react-device-detect"; | ||
import FrameList from "./component/AllFrameCpn/FrameList"; | ||
import PhotoSelect from "./pages/Photobook/PhotoSelect"; | ||
// import { useAtom } from "jotai"; | ||
// import axios from "axios"; | ||
// import { accessTokenAtom, setAccessToken } from "./store/jotaiAtoms"; | ||
|
||
function App() { | ||
function setScreenSize() { | ||
let vh = window.innerHeight * 0.01; | ||
document.documentElement.style.setProperty("--vh", `${vh}px`); | ||
} | ||
useEffect(() => { | ||
setScreenSize(); | ||
}); | ||
|
||
window.addEventListener("resize", setScreenSize); | ||
|
||
return ( | ||
<> | ||
<div className="App"> | ||
<header className="App-header"> | ||
<BrowserView> | ||
<BrowserRouter> | ||
<Routes> | ||
<Route path="/" element={<Main />} /> | ||
<Route path="/login" element={<Login />} /> | ||
<Route path="/join" element={<Join />} /> | ||
<Route path="/frame" element={<Frame />} /> | ||
<Route path="/makeframe" element={<MakeFrame />} /> | ||
<Route path="/photobook" element={<Photobook />} /> | ||
<Route path="/photoselect" element={<PhotoSelect />} /> | ||
<Route path="/photobook/:uuid" element={<PhotobookUuid />} /> | ||
</Routes> | ||
</BrowserRouter> | ||
</BrowserView> | ||
<MobileView> | ||
<BrowserRouter> | ||
<Routes> | ||
<Route path="/" element={<Main />} /> | ||
<Route path="/login" element={<Login />} /> | ||
<Route path="/join" element={<Join />} /> | ||
<Route path="/frame" element={<Frame />} /> | ||
<Route path="/makeframe" element={<MakeFrame />} /> | ||
<Route path="/photobook" element={<Photobook />} /> | ||
<Route path="/framelist" element={<FrameList />} /> | ||
<Route path="/photoselect" element={<PhotoSelect />} /> | ||
</Routes> | ||
</BrowserRouter> | ||
</MobileView> | ||
</header> | ||
</div> | ||
</> | ||
); | ||
} | ||
|
||
export default App; | ||
import "./App.css"; | ||
import { useEffect } from "react"; | ||
import { Routes, Route, BrowserRouter, useParams } from "react-router-dom"; | ||
import Login from "./pages/Login/Login"; | ||
import Join from "./pages/Join/Join"; | ||
import Main from "./pages/Main/Main"; | ||
import Frame from "./pages/Frame/Frame"; | ||
import MakeFrame from "./pages/Frame/MakeFrame"; | ||
import ApplyFrame from "./pages/Frame/ApplyFrame"; | ||
import Photobook from "./pages/Photobook/Photobook"; | ||
import PhotobookUuid from "./pages/Photobook/PhotobookUuid"; | ||
import { BrowserView, MobileView } from "react-device-detect"; | ||
import FrameList from "./component/AllFrameCpn/FrameList"; | ||
import PhotoSelect from "./pages/Photobook/PhotoSelect"; | ||
// import { useAtom } from "jotai"; | ||
// import axios from "axios"; | ||
// import { accessTokenAtom, setAccessToken } from "./store/jotaiAtoms"; | ||
|
||
function App() { | ||
function setScreenSize() { | ||
let vh = window.innerHeight * 0.01; | ||
document.documentElement.style.setProperty("--vh", `${vh}px`); | ||
} | ||
useEffect(() => { | ||
setScreenSize(); | ||
}); | ||
|
||
window.addEventListener("resize", setScreenSize); | ||
|
||
return ( | ||
<> | ||
<div className="App"> | ||
<header className="App-header"> | ||
<BrowserView> | ||
<BrowserRouter> | ||
<Routes> | ||
<Route path="/" element={<Main />} /> | ||
<Route path="/login" element={<Login />} /> | ||
<Route path="/join" element={<Join />} /> | ||
<Route path="/frame" element={<Frame />} /> | ||
<Route path="/makeframe" element={<MakeFrame />} /> | ||
<Route path="/applyframe" element={<ApplyFrame />} /> | ||
<Route path="/photobook" element={<Photobook />} /> | ||
<Route path="/photoselect" element={<PhotoSelect />} /> | ||
<Route path="/photobook/:uuid" element={<PhotobookUuid />} /> | ||
</Routes> | ||
</BrowserRouter> | ||
</BrowserView> | ||
<MobileView> | ||
<BrowserRouter> | ||
<Routes> | ||
<Route path="/" element={<Main />} /> | ||
<Route path="/login" element={<Login />} /> | ||
<Route path="/join" element={<Join />} /> | ||
<Route path="/frame" element={<Frame />} /> | ||
<Route path="/makeframe" element={<MakeFrame />} /> | ||
<Route path="/applyframe" element={<ApplyFrame />} /> | ||
<Route path="/photobook" element={<Photobook />} /> | ||
<Route path="/framelist" element={<FrameList />} /> | ||
<Route path="/photoselect" element={<PhotoSelect />} /> | ||
</Routes> | ||
</BrowserRouter> | ||
</MobileView> | ||
</header> | ||
</div> | ||
</> | ||
); | ||
} | ||
|
||
export default App; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,13 +1,13 @@ | ||
// import axios from "axios"; | ||
|
||
// export const getAllFrames = async () => { | ||
// try { | ||
// const res = await axios.get( | ||
// "http://ec2-3-35-208-177.ap-northeast-2.compute.amazonaws.com:8080/frame/find" | ||
// ); | ||
// return res.data; // API로부터 받은 데이터 반환 | ||
// } catch (err) { | ||
// console.err("Error fetching frames:", err); | ||
// throw err; | ||
// } | ||
// }; | ||
// import axios from "axios"; | ||
|
||
// export const getAllFrames = async () => { | ||
// try { | ||
// const res = await axios.get( | ||
// "http://ec2-3-35-208-177.ap-northeast-2.compute.amazonaws.com:8080/frame/find" | ||
// ); | ||
// return res.data; // API로부터 받은 데이터 반환 | ||
// } catch (err) { | ||
// console.err("Error fetching frames:", err); | ||
// throw err; | ||
// } | ||
// }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,6 +1,6 @@ | ||
// import axios from 'axios'; | ||
// import { accessTokenAtom } from '../store/jotaiAtoms'; | ||
// import { useAtomValue, useSetAtom } from 'jotai'; | ||
|
||
export default function onLogin() { | ||
// import axios from 'axios'; | ||
// import { accessTokenAtom } from '../store/jotaiAtoms'; | ||
// import { useAtomValue, useSetAtom } from 'jotai'; | ||
|
||
export default function onLogin() { | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,19 +1,19 @@ | ||
import axios from "axios"; | ||
// import sha256 from "crypto-js/sha256"; | ||
|
||
export const onSignUp = (userInfo, router) => { | ||
// let newUserInfo = { | ||
// ...userInfo, | ||
// // 비밀번호 암호화 로직 | ||
// password: sha256(userInfo.password).toString(), | ||
// }; | ||
axios | ||
.post("http://ec2-3-35-208-177.ap-northeast-2.compute.amazonaws.com:8080/user/join", userInfo) | ||
.then((res) => { | ||
console.log(res.data); | ||
router("/login"); | ||
}) | ||
.catch((err) => { | ||
console.log(err); | ||
}); | ||
}; | ||
import axios from "axios"; | ||
// import sha256 from "crypto-js/sha256"; | ||
|
||
export const onSignUp = (userInfo, router) => { | ||
// let newUserInfo = { | ||
// ...userInfo, | ||
// // 비밀번호 암호화 로직 | ||
// password: sha256(userInfo.password).toString(), | ||
// }; | ||
axios | ||
.post("http://ec2-3-35-208-177.ap-northeast-2.compute.amazonaws.com:8080/user/join", userInfo) | ||
.then((res) => { | ||
console.log(res.data); | ||
router("/login"); | ||
}) | ||
.catch((err) => { | ||
console.log(err); | ||
}); | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,63 +1,72 @@ | ||
import { useState, useEffect } from "react"; | ||
import styles from "./FrameList.module.css"; | ||
import useAxios from "../../apis/axiosWithToken"; | ||
import { Link } from "react-router-dom"; | ||
// import { getAllFrames } from "../../apis/getFrame"; | ||
import { useAtom } from "jotai"; | ||
import { accessTokenAtom } from "../../store/jotaiAtoms"; | ||
|
||
const FrameList = () => { | ||
const [frames, setFrames] = useState([]); | ||
const [accessToken, ] = useAtom(accessTokenAtom); | ||
const axios = useAxios(); | ||
|
||
useEffect(() => { | ||
// 액세스 토큰이 있을 때만 API 요청을 보내도록 조건 처리 | ||
if (accessToken) { | ||
console.log("Framelist ACT:", accessToken); // accessToken jotai에서 잘 불러오는지 확인 | ||
// axios 요청 설정 | ||
// const config = { | ||
// headers: { | ||
// Authorization: `Bearer ${accessToken}`, // 헤더에 accessToken을 추가 | ||
// }, | ||
// }; | ||
// API 요청 보내기 | ||
axios.get('/frame/list') // 인스턴스로 axios 요청 보내기 | ||
.then((response) => setFrames(response.data)) | ||
.catch((error) => console.error(error)); | ||
} | ||
}, [accessToken]); // useEffect가 실행되는 조건을 accessToken이 변경될 때로 설정 | ||
|
||
return ( | ||
<div className={styles.FrameList}> | ||
<Link to="/makeframe"> | ||
<button className={styles.newFrame}>새 프레임 만들기</button> | ||
</Link> | ||
<div className={styles.FrameScroll}> | ||
{frames.length === null ? ( // frames 배열이 비어 있는 경우 | ||
<div className={styles.InfoMsg}> | ||
<h3>새 프레임을 추가해주세요</h3> | ||
</div> | ||
) : ( | ||
// frames 배열에 프레임이 있는 경우 | ||
<ul className={styles.FrameUl}> | ||
{frames.map((frame, index) => ( | ||
<li key={frame.id} className={styles.FrameItem}> | ||
<button> | ||
<img | ||
key={index} | ||
src={frame} | ||
alt="frame" | ||
className={styles.FrameImage} | ||
/> | ||
</button> | ||
</li> | ||
))} | ||
</ul> | ||
)} | ||
</div> | ||
</div> | ||
); | ||
}; | ||
|
||
export default FrameList; | ||
import { useState, useEffect } from "react"; | ||
import styles from "./FrameList.module.css"; | ||
import useAxios from "../../apis/axiosWithToken"; | ||
import { Link } from "react-router-dom"; | ||
// import { getAllFrames } from "../../apis/getFrame"; | ||
import { useAtom } from "jotai"; | ||
import { accessTokenAtom } from "../../store/jotaiAtoms"; | ||
|
||
const FrameList = () => { | ||
const [frames, setFrames] = useState([]); | ||
const [accessToken] = useAtom(accessTokenAtom); | ||
const axios = useAxios(); | ||
|
||
useEffect(() => { | ||
// 액세스 토큰이 있을 때만 API 요청을 보내도록 조건 처리 | ||
if (accessToken) { | ||
console.log("Framelist ACT:", accessToken); // accessToken jotai에서 잘 불러오는지 확인 | ||
const config = { | ||
headers: { | ||
Authorization: `Bearer ${accessToken}`, // 헤더에 accessToken을 추가 | ||
}, | ||
}; | ||
axios | ||
.get( | ||
"http://ec2-3-35-208-177.ap-northeast-2.compute.amazonaws.com:8080/frame/list", | ||
config | ||
) | ||
.then((res) => { | ||
console.log(res.data); | ||
// 성공적으로 데이터를 받아온 경우 | ||
setFrames(res.data); // 받아온 데이터로 frames 상태 업데이트 | ||
}) | ||
.catch((err) => { | ||
// 오류 처리 | ||
console.error("API 요청 중 오류 발생:", err); | ||
}); | ||
} | ||
}, [accessToken]); // useEffect가 실행되는 조건을 accessToken이 변경될 때로 설정 | ||
|
||
return ( | ||
<div className={styles.FrameList}> | ||
<Link to="/makeframe"> | ||
<button className={styles.newFrame}>새 프레임 만들기</button> | ||
</Link> | ||
<div className={styles.FrameScroll}> | ||
{frames.length === 0 ? ( // frames 배열이 비어 있는 경우 | ||
<div className={styles.InfoMsg}> | ||
<h3>새 프레임을 추가해주세요</h3> | ||
</div> | ||
) : ( | ||
// frames 배열에 프레임이 있는 경우 | ||
<ul className={styles.FrameUl}> | ||
{frames.map((frame, index) => ( | ||
<li key={frame.id} className={styles.FrameItem}> | ||
<Link to={"/applyframe"} state={{ selectedFrame: frame }}> | ||
<img | ||
key={index} | ||
src={frame} | ||
alt="frame" | ||
className={styles.FrameImage} | ||
/> | ||
</Link> | ||
</li> | ||
))} | ||
</ul> | ||
)} | ||
</div> | ||
</div> | ||
); | ||
}; | ||
|
||
export default FrameList; |
Oops, something went wrong.