Merge pull request #14 from HaruDamda/feature/#14-css-파일-수정

Feature/#14 css 파일 수정
HaruDamda · Nov 21, 2023 · 88da1e0 · 88da1e0
2 parents ee8dcca + fc63dca
commit 88da1e0
Show file tree

Hide file tree

Showing 20 changed files with 175 additions and 135 deletions.
diff --git a/src/component/AllFrameCpn/FrameList.module.css b/src/component/AllFrameCpn/FrameList.module.css
@@ -6,7 +6,7 @@ ul {
 
 .FrameList {
   width: 390px;
-  height: 689px;
+  height: 760px;
   background-color: #ffffff;
   display: flex;
   flex-direction: column;
@@ -39,13 +39,19 @@ ul {
 }
 
 .FrameUl {
+  height: 100%;
+  overflow-y: scroll;
   display: flex;
   flex-direction: row;
   justify-content: center;
   align-items: center;
   flex-wrap: wrap; /* 너비를 넘어가면 다음 줄로 넘어감 */
 }
 
+.FrameUl::-webkit-scrollbar {
+  display: none;
+}
+
 .FrameItem {
   width: calc(40% - 10px);
   gap: 10px;

diff --git a/src/component/AllFrameCpn/My.jsx b/src/component/AllFrameCpn/My.jsx
diff --git a/src/component/AllFrameCpn/My.module.css b/src/component/AllFrameCpn/My.module.css
diff --git a/src/component/AllFrameCpn/Photobook.jsx b/src/component/AllFrameCpn/Photobook.jsx
diff --git a/src/component/MakeFrameCpn/AddPhoto.jsx b/src/component/MakeFrameCpn/AddPhoto.jsx
@@ -27,7 +27,7 @@ const AddPhoto = ({ handleUploadedImage }) => {
     <div className={styles.Bottom}>
       <div className={styles.ListView}>
         <button onClick={handleButtonClick}>
-          <img src={addbutton} alt="addbutton" />
+          <img src={addbutton} alt="addbutton" className={styles.addbutton} />
         </button>
         <input
           type="file"
@@ -40,4 +40,4 @@ const AddPhoto = ({ handleUploadedImage }) => {
   );
 };
 
-export default AddPhoto;
+export default AddPhoto;
diff --git a/src/component/MakeFrameCpn/AddPhoto.module.css b/src/component/MakeFrameCpn/AddPhoto.module.css
@@ -1,6 +1,6 @@
 .Bottom {
   width: 390px;
-  height: 270px;
+  height: 204px;
 }
 
 .ListView {
@@ -33,3 +33,9 @@
   border: none;
   outline: none;
 }
+
+.addbutton {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
diff --git a/src/component/MakeFrameCpn/Background.module.css b/src/component/MakeFrameCpn/Background.module.css
@@ -1,6 +1,6 @@
 .Bottom {
   width: 390px;
-  height: 270px;
+  height: 204px;
 }
 
 .ListTop {
@@ -10,7 +10,6 @@
   flex-direction: row;
   justify-content: center;
   align-items: center;
-  font-size: 10px;
   font-weight: 400;
 }
 
@@ -21,12 +20,12 @@
 
 .ListView {
   width: 100%;
-  height: 160px;
-  padding: 10px 0px;
+  height: 120px;
+  padding: 5px 0px;
   display: flex;
   flex-direction: column;
   justify-content: center;
-  gap: 30px;
+  gap: 20px;
 }
 
 .FirstLine {
@@ -36,8 +35,8 @@
 }
 
 .FirstLine button {
-  width: 72px;
-  height: 60px;
+  width: 60px;
+  height: 50px;
   border-radius: 10px;
 }
 
@@ -64,8 +63,8 @@
 }
 
 .SecondLine button {
-  width: 72px;
-  height: 60px;
+  width: 60px;
+  height: 50px;
   border-radius: 10px;
 }
 

diff --git a/src/component/MakeFrameCpn/Brush.module.css b/src/component/MakeFrameCpn/Brush.module.css
@@ -1,6 +1,6 @@
 .Bottom {
   width: 390px;
-  height: 45px;
+  height: 204px;
 }
 
 .Bottom button {
@@ -17,5 +17,6 @@
   flex-direction: row;
   justify-content: center;
   align-items: center;
+  padding-top: 20px;
   gap: 10px;
 }
diff --git a/src/component/MakeFrameCpn/Sticker.jsx b/src/component/MakeFrameCpn/Sticker.jsx
@@ -1,6 +1,8 @@
 import React, { useState, useEffect } from "react";
 import { useDrag } from "react-use-gesture";
 import styles from "./Sticker.module.css";
+import { useAtom } from "jotai";
+import { accessTokenAtom } from "../../store/jotaiAtoms";
 import axios from "axios";
 
 const Sticker = ({ handleStickerSelect }) => {
@@ -9,14 +11,26 @@ const Sticker = ({ handleStickerSelect }) => {
   const [selectedTheme, setSelectedTheme] = useState(1);
   const [selectedSticker, setSelectedSticker] = useState(null);
   const [stickerSize, setStickerSize] = useState(100); // 초기 스티커 크기
+  const [accessToken] = useAtom(accessTokenAtom);
 
   const themes = [1, 2, 3, 4, 5];
 
+  useEffect(() => {
+    // API 요청 시 accessToken을 헤더에 추가하여 요청
+    const config = {
+      headers: {
+        Authorization: `Bearer ${accessToken}`,
+      },
+    };
+    fetchStickers(selectedTheme, config); // fetchStickers 함수에 추가된 config 객체 전달
+  }, [selectedTheme, accessToken]);
+
   // 서버로부터 스티커 데이터를 가져오는 함수
-  const fetchStickers = async (theme) => {
+  const fetchStickers = async (theme, config) => {
     try {
       const res = await axios.get(
-        `http://ec2-3-35-208-177.ap-northeast-2.compute.amazonaws.com:8080/frame/stickerList/${theme}`
+        `http://ec2-3-35-208-177.ap-northeast-2.compute.amazonaws.com:8080/frame/stickerList/${theme}`,
+        config
       );
       const imageStickers = res.data.filter((url, index) => index !== 0);
       console.log("이미지 URL 리스트:", imageStickers);
@@ -26,11 +40,6 @@ const Sticker = ({ handleStickerSelect }) => {
     }
   };
 
-  useEffect(() => {
-    // 초기 렌더링 시, 테마 1의 스티커를 가져옴 (예시로 테마 1을 가져오도록 설정)
-    fetchStickers(selectedTheme);
-  }, [selectedTheme]);
-
   const handleThemeClick = (themeNumber) => {
     setSelectedTheme(themeNumber); // 클릭된 테마 버튼의 테마 번호를 설정
   };

diff --git a/src/component/MakeFrameCpn/Sticker.module.css b/src/component/MakeFrameCpn/Sticker.module.css
@@ -1,6 +1,6 @@
 .Bottom {
   width: 390px;
-  height: 270px;
+  height: 204px;
 }
 
 .ListTop {
@@ -21,8 +21,9 @@
 
 .ListView {
   display: flex;
-  overflow-x: auto;
-  height: 160px;
+  overflow-x: scroll;
+  -webkit-overflow-scrolling: touch;
+  height: 80px;
   padding: 15px 0px 15px 18px;
   flex-direction: row;
   gap: 18px;

diff --git a/src/component/MakeFrameCpn/Template.module.css b/src/component/MakeFrameCpn/Template.module.css
@@ -1,6 +1,6 @@
 .Bottom {
   width: 390px;
-  height: 270px;
+  height: 204px;
 }
 
 .ListTop {
@@ -24,8 +24,8 @@
 
 .ListView {
   display: flex;
-  height: 160px;
-  padding: 15px 0px 15px 18px;
+  height: 100px;
+  padding: 0px 0px 0px 18px;
   flex-direction: row;
   gap: 6px;
 }
@@ -37,7 +37,7 @@
 
 .ListView button img {
   width: 72px;
-  height: 160px;
+  height: 100px;
   display: block;
 }
 

diff --git a/src/index.css b/src/index.css
@@ -4,18 +4,18 @@
 }
 
 :root {
-  font-family: "SUIT Variable", -apple-system, BlinkMacSystemFont, Pretendard, "Segoe UI", Roboto, Oxygen,
-  Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", 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%;
+  height: 844px;
   margin: 0;
   overflow-x: hidden;
+  overflow-y: hidden;
 }
 
 button {
-  font-family: -apple-system, BlinkMacSystemFont, Pretendard, "Segoe UI", Roboto, Oxygen,
-  Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
-}
+  font-family: -apple-system, BlinkMacSystemFont, Pretendard, "Segoe UI", Roboto,
+    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+}
diff --git a/src/pages/Frame/Frame.jsx b/src/pages/Frame/Frame.jsx
@@ -9,9 +9,7 @@ import framelist from "../../img/framelist.png";
 import styles from "./Frame.module.css";
 import Template from "../../component/MakeFrameCpn/Template";
 import FrameList from "../../component/AllFrameCpn/FrameList";
-import Background from "../../component/MakeFrameCpn/Background";
-import Brush from "../../component/MakeFrameCpn/Brush";
-import AddPhoto from "../../component/MakeFrameCpn/AddPhoto";
+import Photobook from "../Photobook/PhotoSelect";
 import { Link } from "react-router-dom";
 
 const Frame = () => {
@@ -38,10 +36,10 @@ const Frame = () => {
       middleContent = <FrameList />;
       break;
     case "포토북":
-      middleContent = "dd";
+      middleContent = <Photobook />;
       break;
     default:
-      middleContent = "dd";
+      middleContent = <FrameList />;
       break;
   }
 

diff --git a/src/pages/Frame/Frame.module.css b/src/pages/Frame/Frame.module.css
@@ -1,28 +1,27 @@
 .Frame {
-  width: 100vw;
+  width: 390px;
   height: calc(var(--vh, 1vh) * 100);
   background: #ffffff;
   display: flex;
   flex-direction: column;
+  justify-content: center;
   user-select: none;
 }
 
 .Top {
-  width: 390px;
   height: 86px;
   display: flex;
   flex-direction: row;
   justify-content: flex-start;
   align-items: center;
-  text-align: center;
 }
 
 .Top span {
   flex: 1;
   text-align: center;
   font-size: 18px;
   font-weight: 600;
-  padding-left: 40px;
+  padding-left: 50px;
 }
 
 .Top button {
@@ -37,7 +36,7 @@
   width: 47px;
   height: 47px;
   font-size: 10px;
-  background-color: #d9d9d9;
+  background-color: #ffffff;
   border-radius: 30px;
   margin-left: auto;
   border: none;
@@ -50,7 +49,7 @@
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  background-color: #f7f8f8;
+  background-color: #ffffff;
   gap: 13px;
 }