Skip to content

Commit

Permalink
Merge pull request #18 from HaruDamda/test/테스트용-브랜치
Browse files Browse the repository at this point in the history 
feat: 프레임 제작 브러쉬 스티커
  • Loading branch information
@haesol822
haesol822 authored Dec 17, 2023
2 parents 494a72b + ccc1f69 commit 64f55c7
Show file tree
Hide file tree
Showing 36 changed files with 2,690 additions and 2,037 deletions.
12 changes: 6 additions & 6 deletions src/App.css
View file
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);
}
140 changes: 70 additions & 70 deletions src/App.jsx
View file
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;
26 changes: 13 additions & 13 deletions src/apis/getFrame.js
View file
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;
// }
// };
10 changes: 5 additions & 5 deletions src/apis/onLogin.js
View file
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() {
}
38 changes: 19 additions & 19 deletions src/apis/onSignUp.js
View file
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);
});
};
135 changes: 72 additions & 63 deletions src/component/AllFrameCpn/FrameList.jsx
View file
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;
Loading

0 comments on commit 64f55c7

Please sign in to comment.