#8 feat: 프레임 제작 페이지 기능 구현

package.json

@@ -7,22 +7,23 @@
  "dev": "vite",
  "build": "vite build",
  "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
- "preview": "vite preview"
+ "preview": "vite preview",
+ "deploy": "aws s3 sync ./build s3://picpic-bucket --profile=jwhan"
  },
  "dependencies": {
  "@reduxjs/toolkit": "^1.9.7",
  "axios": "^1.6.1",
  "crypto-js": "^4.2.0",
  "html2canvas": "^1.4.1",
  "jotai": "^2.5.1",
- "html2canvas": "^1.4.1",
  "node-sass": "^9.0.0",
  "path": "^0.12.7",
  "react": "^18.2.0",
  "react-device-detect": "^2.2.3",
  "react-dom": "^18.2.0",
  "react-redux": "^8.1.3",
  "react-router-dom": "^6.18.0",
+ "react-scripts": "^5.0.1",
  "react-spring": "^9.7.3",
  "react-use-gesture": "^9.1.3",
  "redux": "^4.2.1",

src/component/AllFrameCpn/FrameList.jsx

@@ -3,12 +3,13 @@ import styles from "./FrameList.module.css";
 import axios from "axios";
 import { Link } from "react-router-dom";
 // import { getAllFrames } from "../../apis/getFrame";
-import { useAtomValue } from 'jotai';
-import { accessTokenAtom } from '../../store/jotaiAtoms';
+import { useAtom } from "jotai";
+import { accessTokenAtom } from "../../store/jotaiAtoms";
 
 const FrameList = () => {
  const [frames, setFrames] = useState([]);
- const [accessToken, setAccessToken] = useAtomValue(accessTokenAtom);
+ const [accessToken, setAccessToken] = useAtom(accessTokenAtom);
+
  useEffect(() => {
  async function fetchFrames() {
  try {
@@ -18,11 +19,12 @@ const FrameList = () => {
  // 토큰을 헤더에 추가하여 이미지 리스트 요청
  const res = await axios.get(apiURL, {
  headers: {
- Authorization: `Bearer ${accessToken}`,
+ Authorization: accessToken,
  },
  });
 
  if (res.status === 200) {
+ console.log("성공");
  setFrames(res.data); // 가져온 프레임 데이터를 상태에 설정
  } else {
  // 서버에서 오류 응답을 받은 경우에 대한 처리
@@ -34,7 +36,7 @@ const FrameList = () => {
  }
 
  fetchFrames();
- }, []);
+ }, [accessToken]);
 
  return (
  <div className={styles.FrameList}>
@@ -45,14 +47,12 @@ const FrameList = () => {
  <ul className={styles.FrameUl}>
  {frames.map((frame, index) => (
  <li key={frame.id} className={styles.FrameItem}>
- {/* 각 프레임 정보를 두 줄씩 나열 */}
  <div>
  <img src={frame} alt="frame" className={styles.FrameImage} />
  </div>
  <div>
  <p>프레임 ID: {frame.id}</p>
  <p>프레임 제목: {frame.title}</p>
- {/* 원하는 다른 프레임 정보를 보여줄 수 있음 */}
  </div>
  </li>
  ))}

src/component/MakeFrameCpn/Brush.jsx

@@ -16,6 +16,13 @@ const Brush = () => {
  <button>
  <img src={color} alt="color" />
  </button>
+ <button
+ className={`${styles.ColorButton} ${
+ selectedColor === "#FFFFFF" ? styles.ActiveColorButton : ""
+ }`}
+ style={{ background: "#FFFFFF" }}
+ onClick={() => handleColorClick("#FFFFFF")}
+ ></button>
  <button
  className={`${styles.ColorButton} ${
  selectedColor === "#000000" ? styles.ActiveColorButton : ""
@@ -25,12 +32,46 @@ const Brush = () => {
  ></button>
  <button
  className={`${styles.ColorButton} ${
- selectedColor === "#ff0000" ? styles.ActiveColorButton : ""
+ selectedColor === "#009EFF" ? styles.ActiveColorButton : ""
+ }`}
+ style={{ background: "#009EFF" }}
+ onClick={() => handleColorClick("#009EFF")}
+ ></button>
+ <button
+ className={`${styles.ColorButton} ${
+ selectedColor === "#53DF50" ? styles.ActiveColorButton : ""
+ }`}
+ style={{ background: "#53DF50" }}
+ onClick={() => handleColorClick("#53DF50")}
+ ></button>
+ <button
+ className={`${styles.ColorButton} ${
+ selectedColor === "#FFCB33" ? styles.ActiveColorButton : ""
+ }`}
+ style={{ background: "#FFCB33" }}
+ onClick={() => handleColorClick("#FFCB33")}
+ ></button>
+ <button
+ className={`${styles.ColorButton} ${
+ selectedColor === "#FF9634" ? styles.ActiveColorButton : ""
+ }`}
+ style={{ background: "#FF9634" }}
+ onClick={() => handleColorClick("#FF9634")}
+ ></button>
+ <button
+ className={`${styles.ColorButton} ${
+ selectedColor === "#FF6060" ? styles.ActiveColorButton : ""
+ }`}
+ style={{ background: "#FF6060" }}
+ onClick={() => handleColorClick("#FF6060")}
+ ></button>
+ <button
+ className={`${styles.ColorButton} ${
+ selectedColor === "#FF93E1" ? styles.ActiveColorButton : ""
  }`}
- style={{ background: "#ff0000" }}
- onClick={() => handleColorClick("#ff0000")}
+ style={{ background: "#FF93E1" }}
+ onClick={() => handleColorClick("#FF93E1")}
  ></button>
- {/* 추가적인 색상 버튼들을 여기에 추가 */}
  </div>
  </div>
  );

src/component/MakeFrameCpn/Brush.module.css

@@ -11,3 +11,11 @@
  justify-content: center;
  align-items: center;
 }
+
+.ColorContainer {
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ gap: 10px;
+}

src/component/MakeFrameCpn/Sticker.jsx

@@ -3,10 +3,12 @@ import { useDrag } from "react-use-gesture";
 import styles from "./Sticker.module.css";
 import axios from "axios";
 
-const Sticker = ({ onStickerSelect }) => {
+const Sticker = ({ handleStickerSelect }) => {
  const [stickers, setStickers] = useState([]);
  const [stickerPos, setstickerPos] = useState({ x: 0, y: 0 });
  const [selectedTheme, setSelectedTheme] = useState(1);
+ const [selectedSticker, setSelectedSticker] = useState(null);
+ const [stickerSize, setStickerSize] = useState(100); // 초기 스티커 크기
 
  const themes = [1, 2, 3, 4, 5];
 
@@ -35,7 +37,12 @@ const Sticker = ({ onStickerSelect }) => {
 
  const handleStickerClick = (stickerInfo) => {
  // 선택한 스티커 정보를 MakeFrame 컴포넌트로 전달
- onStickerSelect(stickerInfo);
+ handleStickerSelect(stickerInfo);
+ setSelectedSticker(stickerInfo);
+ };
+
+ const handleSizeChange = (event) => {
+ setStickerSize(event.target.value); // 스티커 크기 업데이트
  };
 
  return (
@@ -58,6 +65,20 @@ const Sticker = ({ onStickerSelect }) => {
  />
  ))}
  </div>
+ {selectedSticker && (
+ <div className={styles.SizeSlider}>
+ <input
+ type="range"
+ min="50"
+ max="200"
+ step="5"
+ value={stickerSize}
+ onChange={handleSizeChange}
+ className={styles.SliderInput}
+ />
+ <span>스티커 크기 조절</span>
+ </div>
+ )}
  </div>
  );
 };

src/component/MakeFrameCpn/Template.jsx

@@ -1,6 +1,15 @@
+import template0 from "../../assets/template-0.png";
+import template1 from "../../assets/template-1.png";
+import template2 from "../../assets/template-2.png";
+import template3 from "../../assets/template-3.png";
+import template4 from "../../assets/template-4.png";
 import styles from "./Template.module.css";
 
-const Template = () => {
+const Template = ({ changeFrameImage }) => {
+ const handleFrameButtonClick = (frameImage) => {
+ changeFrameImage(frameImage); // MakeFrame 컴포넌트에서 프레임 이미지 업데이트
+ };
+
  return (
  <div className={styles.Bottom}>
  <div className={styles.ListTop}>
@@ -12,10 +21,21 @@ const Template = () => {
  <button>테마</button>
  </div>
  <div className={styles.ListView}>
- <span></span>
- <span></span>
- <span></span>
- <span></span>
+ <button onClick={() => handleFrameButtonClick(template0)}>
+ <img src={template0} alt="template0" />
+ </button>
+ <button onClick={() => handleFrameButtonClick(template1)}>
+ <img src={template1} alt="template1" />
+ </button>
+ <button onClick={() => handleFrameButtonClick(template2)}>
+ <img src={template2} alt="template2" />
+ </button>
+ {/* <button>
+ <img src={template3} alt="template3" />
+ </button> */}
+ <button onClick={() => handleFrameButtonClick(template4)}>
+ <img src={template4} alt="template4" />
+ </button>
  </div>
  </div>
  );

src/component/MakeFrameCpn/Template.module.css

@@ -20,26 +20,24 @@
 }
 
 .ListView {
- display: inline-flex;
+ display: flex;
  height: 160px;
  padding: 15px 0px 15px 18px;
  flex-direction: row;
- gap: 18px;
+ gap: 6px;
 }
 
-.ListView span {
- width: 72px;
- height: 130px;
- border-radius: 10px;
- background: #d9d9d9;
+.ListView button {
+ background: #ffffff;
+ border: none;
 }
 
-button {
- outline: none;
+.ListView button img {
+ width: 72px;
+ height: 160px;
+ display: block;
 }
 
-button:hover {
+button {
  outline: none;
- color: #009eff;
- font-weight: 600;
 }

src/pages/Frame/Frame.jsx

@@ -50,15 +50,6 @@ const Frame = () => {
 
  return (
  <div className={styles.Frame}>
- <animated.div
- {...bindLogoPos()}
- style={{
- /*position: "relative", top: logoPos.y, left: logoPos.x*/ x: logoPos.x,
- y: logoPos.y,
- }}
- >
- <img src={framelist} className="home" alt="home"></img>
- </animated.div>
  <div className={styles.Top}>
  <span>전체 프레임</span>
  <button className={styles.mylistBtn}>

src/pages/Frame/MakeFrame.jsx

@@ -53,8 +53,9 @@ const MakeFrame = () => {
  const [stickerPositions, setStickerPositions] = useState([]);
  const [frameImage, setFrameImage] = useState(framebase);
  const [actions, setActions] = useState([]);
-
- const accessToken = useSelector((state) => state.user.accessToken);
+ const [uploadedSticker, setUploadedSticker] = useState(null);
+ const [stickerSize, setStickerSize] = useState(100);
+ const [selectedSticker, setSelectedSticker] = useState(null);
 
  const handleButtonClick = (button) => {
  setSelectedButton(button);
@@ -73,6 +74,7 @@ const MakeFrame = () => {
  const handleStickerSelect = (selectedSticker) => {
  // Sticker 컴포넌트로부터 받은 스티커 정보로 중앙에 스티커 렌더링
  setUploadedSticker(selectedSticker);
+ setSelectedSticker(selectedSticker);
  };
 
  // Sticker에서 전달된 스티커 위치 정보를 받는 함수
@@ -160,10 +162,12 @@ const MakeFrame = () => {
 
  switch (selectedButton) {
  case "템플릿":
- bottomContent = <Template />;
+ bottomContent = (
+ <Template changeFrameImage={changeFrameImage} frameImage={frameImage} />
+ );
  break;
  case "스티커":
- bottomContent = <Sticker onStickerDrag={handleStickerDrag} />;
+ bottomContent = <Sticker handleStickerSelect={handleStickerSelect} />;
  break;
  case "배경":
  bottomContent = (
@@ -255,6 +259,8 @@ const MakeFrame = () => {
  top: "50%",
  left: "50%",
  transform: "translate(-50%, -50%)",
+ width: `${stickerSize}px`,
+ height: `${stickerSize}px`,
  }}
  />
  )}