Merge branch 'main' into feature/#8-프레임-제작-기능-구현

src/App.css

@@ -1,8 +1,6 @@
 :root {
  font-family: "SUIT Variable", sans-serif;
- width: 100vw;
- height: 100vh;
- margin: 0;
- max-width: 1280px;
  text-align: center;
+ width: 100vw;
+ height: calc(var(--vh, 1vh) * 100);
 }

src/App.jsx

@@ -1,4 +1,5 @@
 import "./App.css";
+import { useEffect } from "react";
 import { Routes, Route, BrowserRouter } from "react-router-dom";
 import Login from "./pages/Login/Login";
 import Join from "./pages/Join/Join";
@@ -11,14 +12,16 @@ import {
  MobileView,
 } from "react-device-detect";
 import FrameList from "./component/AllFrameCpn/FrameList";
+import PhotoSelect from "./pages/Photobook/PhotoSelect";
 
 function App() {
  function setScreenSize() {
  let vh = window.innerHeight * 0.01;
  document.documentElement.style.setProperty("--vh", `${vh}px`);
  }
-
- setScreenSize();
+ useEffect(() => {
+ setScreenSize();
+ });
 
  window.addEventListener("resize", setScreenSize);
 
@@ -36,6 +39,7 @@ function App() {
  <Route path="/makeframe" element={<MakeFrame />} />
  <Route path="/photobook" element={<Photobook />} />
  <Route path="/framelist" element={<FrameList />} />
+ <Route path="/photoselect" element={<PhotoSelect />} />
  </Routes>
  </BrowserRouter>
  </BrowserView>
@@ -49,6 +53,7 @@ function App() {
  <Route path="/makeframe" element={<MakeFrame />} />
  <Route path="/photobook" element={<Photobook />} />
  <Route path="/framelist" element={<FrameList />} />
+ <Route path="/photoselect" element={<PhotoSelect />} />
  </Routes>
  </BrowserRouter>
  </MobileView>

src/component/AllFrameCpn/FrameList.jsx

@@ -9,34 +9,33 @@ import { accessTokenAtom } from "../../store/jotaiAtoms";
 const FrameList = () => {
  const [frames, setFrames] = useState([]);
  const [accessToken, setAccessToken] = useAtom(accessTokenAtom);
-
  useEffect(() => {
- async function fetchFrames() {
- try {
- const apiURL =
- "http://ec2-3-35-208-177.ap-northeast-2.compute.amazonaws.com:8080/frame/frameList";
-
- // 토큰을 헤더에 추가하여 이미지 리스트 요청
- const res = await axios.get(apiURL, {
- headers: {
- Authorization: `Bearer ${accessToken}`,
- },
+ // 액세스 토큰이 있을 때만 API 요청을 보내도록 조건 처리
+ if (accessToken) {
+ console.log("Framelist ACT:", accessToken); // accessToken jotai에서 잘 불러오는지 확인
+ // axios 요청 설정
+ const config = {
+ headers: {
+ Authorization: `Bearer ${accessToken}`, // 헤더에 accessToken을 추가
+ },
+ };
+ // API 요청 보내기
+ axios
+ .get(
+ "http://ec2-3-35-208-177.ap-northeast-2.compute.amazonaws.com:8080/frame/frameList",
+ config
+ )
+ .then((res) => {
+ console.log(res.data);
+ // 성공적으로 데이터를 받아온 경우
+ setFrames(res.data); // 받아온 데이터로 frames 상태 업데이트
+ })
+ .catch((err) => {
+ // 오류 처리
+ console.error("API 요청 중 오류 발생:", err);
  });
-
- if (res.status === 200) {
- console.log("성공");
- setFrames(res.data); // 가져온 프레임 데이터를 상태에 설정
- } else {
- // 서버에서 오류 응답을 받은 경우에 대한 처리
- throw new Error("Failed to fetch frames");
- }
- } catch (err) {
- console.error("Error fetching frames:", err);
- }
  }
-
- fetchFrames();
- }, [accessToken]);
+ }, [accessToken]); // useEffect가 실행되는 조건을 accessToken이 변경될 때로 설정
 
  return (
  <div className={styles.FrameList}>

src/index.css

@@ -4,10 +4,18 @@
 }
 
 :root {
- font-family: "SUIT Variable", sans-serif;
+ font-family: "SUIT Variable", -apple-system, BlinkMacSystemFont, Pretendard, "Segoe UI", Roboto, Oxygen,
+ Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  font-weight: 400;
  color: #1a1e27;
  max-width: 390px;
+ max-height: 844px;
  --vh: 100%;
- margin: 0 auto;
+ margin: 0;
+ overflow-x: hidden;
 }
+
+button {
+ font-family: -apple-system, BlinkMacSystemFont, Pretendard, "Segoe UI", Roboto, Oxygen,
+ Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+}

src/pages/Frame/MakeFrame.jsx

@@ -50,7 +50,7 @@ const MakeFrame = () => {
  const [selectedBrushSize, setSelectedBrushSize] = useState("medium");
  const [selectedColor, setSelectedColor] = useState("#000000");
  const [uploadedImage, setUploadedImage] = useState(null);
- const [stickerPositions, setStickerPositions] = useState([]);
+ const [stickerPositionsitions, setStickerPositionsitions] = useState([]);
  const [frameImage, setFrameImage] = useState(framebase);
  const [actions, setActions] = useState([]);
  const [uploadedSticker, setUploadedSticker] = useState(null);
@@ -79,9 +79,9 @@ const MakeFrame = () => {
 
  // Sticker에서 전달된 스티커 위치 정보를 받는 함수
  const handleStickerDrag = ({ index, x, y }) => {
- const newStickerPositions = [...stickerPositions];
- newStickerPositions[index] = { x, y };
- setStickerPositions(newStickerPositions);
+ const newStickerPositionsitions = [...stickerPositionsitions];
+ newStickerPositionsitions[index] = { x, y };
+ setStickerPositionsitions(newStickerPositionsitions);
  };
 
  // UploadedImage와 스티커들을 합성하여 보여주는 함수
@@ -308,4 +308,4 @@ const MakeFrame = () => {
  );
 };
 
-export default MakeFrame;
+export default MakeFrame;

src/pages/Frame/MakeFrame.module.css

@@ -10,6 +10,7 @@ body {
  display: flex;
  flex-direction: column;
  justify-content: center;
+ margin: 0;
 }
 
 .MakeFramebox {

src/pages/Photobook/PhotoSelect.jsx

@@ -0,0 +1,66 @@
+import { useState } from "react";
+import styles from "./Photoselect.module.scss";
+import photo1 from "../../img/photo1.png";
+import photo2 from "../../img/photo2.png";
+import photo3 from "../../img/photo3.png";
+import photo4 from "../../img/photo4.png";
+import photo5 from "../../img/photo5.png";
+import photo6 from "../../img/photo6.png";
+import photo7 from "../../img/photo7.png";
+import photo8 from "../../img/photo8.png";
+import photo9 from "../../img/photo9.png";
+import photo10 from "../../img/photo10.png";
+import photo11 from "../../img/photo11.png";
+import circleCheck from "../../img/circle-check-filled.png";
+
+export default function PhotoSelect() {
+ const photoArray = [
+ photo1, photo2, photo3, photo4, photo5, photo6,
+ photo7, photo8, photo9, photo10, photo11
+ ];
+
+ const [selectedPhotos, setSelectedPhotos] = useState([]);
+
+ const handlePhotoClick = (index) => {
+ // 이미 선택된 사진이면 제거, 아니면 추가
+ if (selectedPhotos.includes(index)) {
+ setSelectedPhotos(selectedPhotos.filter((selectedIndex) => selectedIndex !== index));
+ } else {
+ setSelectedPhotos([...selectedPhotos, index]);
+ }
+
+ console.log(selectedPhotos);
+ };
+
+ return (
+ <div className={styles.wrapper}>
+ <div className={styles.header}>
+ <div className={styles.header1}>
+ <button>선택</button>
+ </div>
+ <div className={styles.header2}>
+ <button>나만의 포토북 제작하기</button>
+ </div>
+ </div>
+ <div className={styles.bodySection}>
+ <div className={styles.boxWrapper}>
+ {/* 이미지 배열을 map 함수를 사용하여 렌더링 */}
+ {photoArray.map((photo, index) => (
+ <div
+ key={index}
+ className={`${styles.photoBox} ${selectedPhotos.includes(index) ? styles.selectedPhoto : ''}`}
+ onClick={() => handlePhotoClick(index)}
+ >
+ <img
+ className={styles.photo}
+ src={photo}
+ width={120}
+ alt={`photo-${index}`}
+ />
+ </div>
+ ))}
+ </div>
+ </div>
+ </div>
+ );
+}

src/pages/Photobook/PhotoSelect.module.scss

@@ -0,0 +1,91 @@
+.wrapper {
+ width: 100vw;
+ height: 100vh;
+ overflow-x: hidden;
+}
+
+.header {
+ width: 100vw;
+ height: 125px;
+ display: flex;
+ flex-direction: column;
+ background-color: white;
+ .header1 {
+ height: 40px;
+ display: flex;
+ align-items: center;
+ justify-content: flex-end;
+ border-bottom: 1.5px solid rgba(0, 0, 0, 0.06);
+ button {
+ margin-right: 18px;
+ width: 45px;
+ height: 24px;
+ border: none;
+ border-radius: 19px;
+ background-color: #F7F8F8;
+ color: #009EFF;
+ text-align: center;
+ font-size: 12px;
+ font-weight: 400;
+ cursor: pointer;
+ }
+ }
+ .header2 {
+ height: 85px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ button {
+ height: 50px;
+ width: 340px;
+ border-radius: 10px;
+ border: 1px solid #009EFF;
+ color: #009EFF;
+ text-align: center;
+ font-size: 14px;
+ font-weight: 500;
+ background-color: white;
+ &:hover {
+ background-color: #009EFF;
+ color: white;
+ }
+ }
+ }
+}
+
+.bodySection {
+ width: 100vw;
+ min-height: 673px;
+ display: flex;
+ justify-content: center;
+ .boxWrapper {
+ width: 340px;
+ min-height: 673px;
+ display: grid;
+ grid-template-columns: repeat(2, 1fr); /* 2열로 나열 */
+ grid-template-rows: repeat(auto-fill, minmax(150px, 1fr));
+ grid-gap: 20px; /* 각 요소 사이의 간격 설정 */
+ }
+ .photoBox {
+ width: 160px;
+ height: 160px;
+ background-color: #F7F7F7;
+ img {
+ height: 160px;
+ width: auto;
+ }
+ .selectedPhoto {
+ position: absolute;
+ z-index: 5;
+ width: 160px;
+ height: 160px;
+ background-color: rgba(0, 0, 0, 0.10);
+ }
+ &:hover {
+ border: 2px solid #009EFF; // 마우스 호버 시 테두리 스타일
+ }
+ &.selectedPhoto {
+ border: 2px solid #009EFF; // 선택된 PhotoBox에 테두리 스타일
+ }
+ }
+}