포토 저장 기능, 프레임 수정

src/App.jsx

@@ -21,6 +21,7 @@ function App() {
     let vh = window.innerHeight * 0.01;
     document.documentElement.style.setProperty("--vh", `${vh}px`);
   }
+
   useEffect(() => {
     setScreenSize();
   });

src/component/AllFrameCpn/FrameList.jsx

@@ -27,15 +27,15 @@ const FrameList = () => {
         )
         .then((res) => {
           console.log(res.data);
-          // 성공적으로 데이터를 받아온 경우
-          setFrames(res.data); // 받아온 데이터로 frames 상태 업데이트
+
+          setFrames(res.data);
         })
         .catch((err) => {
           // 오류 처리
           console.error("API 요청 중 오류 발생:", err);
         });
     }
-  }, [accessToken]); // useEffect가 실행되는 조건을 accessToken이 변경될 때로 설정
+  }, [accessToken]);
 
   return (
     <div className={styles.FrameList}>

src/component/MakeFrameCpn/Background.module.css

@@ -4,13 +4,14 @@
 }
 
 .ListTop {
-  height: 40px;
+  height: 20%;
   padding: 10px;
   display: flex;
   flex-direction: row;
   justify-content: center;
   align-items: center;
   font-weight: 400;
+  padding-top: 25px;
 }
 
 .ListTop button {
@@ -20,7 +21,7 @@
 
 .ListView {
   width: 100%;
-  height: 120px;
+  height: 80%;
   padding: 5px 0px;
   display: flex;
   flex-direction: column;

src/component/MakeFrameCpn/Sticker.module.css

@@ -1,11 +1,14 @@
 .Bottom {
   width: 390px;
   height: 204px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
 }
 
 .ListTop {
-  height: 40px;
-  padding: 14px 14px 14px 18px;
+  height: 20%;
+  padding: 25px 14px 14px 18px;
   display: flex;
   flex-direction: row;
   justify-content: space-between;
@@ -23,7 +26,7 @@
   display: flex;
   overflow-x: scroll;
   -webkit-overflow-scrolling: touch;
-  height: 80px;
+  height: 80%;
   padding: 15px 0px 15px 18px;
   flex-direction: row;
   gap: 18px;

src/component/MakeFrameCpn/Template.jsx

@@ -3,6 +3,16 @@ 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 template5 from "../../assets/template-5.png";
+import template6 from "../../assets/template-6.png";
+import template7 from "../../assets/template-7.png";
+import template8 from "../../assets/template-8.png";
+// import template9 from "../../assets/template-9.png";
+import template10 from "../../assets/template-10.png";
+import template11 from "../../assets/template-11.png";
+import template12 from "../../assets/template-12.png";
+import template13 from "../../assets/template-13.png";
+import template14 from "../../assets/template-14.png";
 import styles from "./Template.module.css";
 
 const Template = ({ changeFrameImage }) => {
@@ -12,9 +22,6 @@ const Template = ({ changeFrameImage }) => {
 
   return (
     <div className={styles.Bottom}>
-      <div className={styles.ListTop}>
-        <button>테마 for.. Beta</button>
-      </div>
       <div className={styles.ListView}>
         <button onClick={() => handleFrameButtonClick(template0)}>
           <img src={template0} alt="template0" />
@@ -25,12 +32,39 @@ const Template = ({ changeFrameImage }) => {
         <button onClick={() => handleFrameButtonClick(template2)}>
           <img src={template2} alt="template2" />
         </button>
-        {/* <button>
+        <button onClick={() => handleFrameButtonClick(template3)}>
           <img src={template3} alt="template3" />
-        </button> */}
+        </button>
         <button onClick={() => handleFrameButtonClick(template4)}>
           <img src={template4} alt="template4" />
         </button>
+        <button onClick={() => handleFrameButtonClick(template5)}>
+          <img src={template5} alt="template5" />
+        </button>
+        <button onClick={() => handleFrameButtonClick(template6)}>
+          <img src={template6} alt="template6" />
+        </button>
+        <button onClick={() => handleFrameButtonClick(template7)}>
+          <img src={template7} alt="template7" />
+        </button>
+        <button onClick={() => handleFrameButtonClick(template8)}>
+          <img src={template8} alt="template8" />
+        </button>
+        <button onClick={() => handleFrameButtonClick(template10)}>
+          <img src={template10} alt="template10" />
+        </button>
+        <button onClick={() => handleFrameButtonClick(template11)}>
+          <img src={template11} alt="template11" />
+        </button>
+        <button onClick={() => handleFrameButtonClick(template12)}>
+          <img src={template12} alt="template12" />
+        </button>
+        <button onClick={() => handleFrameButtonClick(template13)}>
+          <img src={template13} alt="template13" />
+        </button>
+        <button onClick={() => handleFrameButtonClick(template14)}>
+          <img src={template14} alt="template14" />
+        </button>
       </div>
     </div>
   );

src/component/MakeFrameCpn/Template.module.css

@@ -3,31 +3,33 @@
   height: 204px;
 }
 
-.ListTop {
-  height: 40px;
-  padding: 14px 14px 14px 18px;
+.ListView {
   display: flex;
   flex-direction: row;
-  justify-content: space-between;
+  justify-content: start;
   align-items: center;
-  font-size: 10px;
-  font-weight: 400;
+  overflow-x: scroll;
+  -webkit-overflow-scrolling: touch;
+  height: 100%;
+  padding: 15px 0px 15px 18px;
+  flex-direction: row;
+  gap: 18px;
 }
 
-.ListTop button {
-  width: 100%;
-  background-color: #ffffff;
-  border: none;
-  display: flex;
-  justify-content: center;
+.ListView::-webkit-scrollbar {
+  width: 12px; /* 스크롤 바의 너비 */
+  height: 12px; /* 스크롤 바의 높이 */
+  display: none;
 }
 
-.ListView {
-  display: flex;
-  height: 100px;
-  padding: 0px 0px 0px 18px;
-  flex-direction: row;
-  gap: 6px;
+.ListView::-webkit-scrollbar-thumb {
+  background-color: #888; /* 스크롤 바 색상 */
+  border-radius: 6px; /* 스크롤 바 모서리 둥글기 */
+}
+
+.ListView::-webkit-scrollbar-track {
+  background-color: #f5f5f5; /* 스크롤 바의 배경색 */
+  border-radius: 6px; /* 스크롤 바 배경 모서리 둥글기 */
 }
 
 .ListView button {