From b42adc0c111fbb5c547efb315b7cdd3b7e52d962 Mon Sep 17 00:00:00 2001 From: gkswldnjs78 Date: Tue, 21 Nov 2023 13:09:21 +0900 Subject: [PATCH 1/3] =?UTF-8?q?=EC=9E=90=EB=8F=99=20=EB=B0=B0=ED=8F=AC=20?= =?UTF-8?q?=EC=84=A4=EC=A0=95=20=EC=99=84=EB=A3=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .github/workflows/deploy.yml | 26 ++++++++------------------ 1 file changed, 8 insertions(+), 18 deletions(-) diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml index eadf3ad..8ea2524 100644 --- a/.github/workflows/deploy.yml +++ b/.github/workflows/deploy.yml @@ -2,36 +2,26 @@ name: Auto Deploy after push on: push: - branches: - - main + branches: ["main"] jobs: build: runs-on: ubuntu-18.04 steps: - - name: Checkout source code - uses: actions/checkout@master + - name: git checkout + uses: actions/checkout@v3 - - name: Cache node modules # node modules 캐싱 - uses: actions/cache@v1 - with: - path: node_modules - key: ${{ runner.OS }}-master-build-${{ hashFiles('**/yarn.lock') }} - restore-keys: | - ${{ runner.OS }}-build- - ${{ runner.OS }}- - - - name: Install Dependencies + - name: npm install run: npm install - - name: Build + - name: npm build run: npm run build env: - CI: "" + CI: false - - name: Deploy + - name: deploy s3 env: AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }} AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }} run: | - aws s3 sync --region ap-northeast-2 ./dist s3://picpic-bucket + aws s3 sync --delete --region ap-northeast-2 ./dist s3://picpic-bucket From 9b83de49680d26d941f71dee5c0cf0a9eb2cd066 Mon Sep 17 00:00:00 2001 From: gkswldnjs78 Date: Tue, 21 Nov 2023 16:35:20 +0900 Subject: [PATCH 2/3] =?UTF-8?q?#14=20feat:=20css=20=ED=8C=8C=EC=9D=BC=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../AllFrameCpn/FrameList.module.css | 2 +- src/component/AllFrameCpn/My.jsx | 0 src/component/AllFrameCpn/My.module.css | 0 src/component/AllFrameCpn/Photobook.jsx | 5 - src/component/MakeFrameCpn/AddPhoto.jsx | 4 +- .../MakeFrameCpn/AddPhoto.module.css | 8 +- .../MakeFrameCpn/Background.module.css | 17 ++-- src/component/MakeFrameCpn/Brush.module.css | 3 +- src/component/MakeFrameCpn/Sticker.jsx | 23 +++-- src/component/MakeFrameCpn/Sticker.module.css | 2 +- .../MakeFrameCpn/Template.module.css | 8 +- src/index.css | 16 +-- src/pages/Frame/Frame.jsx | 8 +- src/pages/Frame/Frame.module.css | 11 +-- src/pages/Frame/MakeFrame.jsx | 99 +++++++++++++------ src/pages/Frame/MakeFrame.module.css | 30 ++---- src/pages/Join/Join.module.scss | 24 +++-- src/pages/Login/Login.module.scss | 15 ++- src/pages/Main/Main.module.scss | 2 + src/pages/Photobook/PhotoSelect.module.scss | 22 ++--- 20 files changed, 166 insertions(+), 133 deletions(-) delete mode 100644 src/component/AllFrameCpn/My.jsx delete mode 100644 src/component/AllFrameCpn/My.module.css delete mode 100644 src/component/AllFrameCpn/Photobook.jsx diff --git a/src/component/AllFrameCpn/FrameList.module.css b/src/component/AllFrameCpn/FrameList.module.css index 364e8cc..59052af 100644 --- 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; diff --git a/src/component/AllFrameCpn/My.jsx b/src/component/AllFrameCpn/My.jsx deleted file mode 100644 index e69de29..0000000 diff --git a/src/component/AllFrameCpn/My.module.css b/src/component/AllFrameCpn/My.module.css deleted file mode 100644 index e69de29..0000000 diff --git a/src/component/AllFrameCpn/Photobook.jsx b/src/component/AllFrameCpn/Photobook.jsx deleted file mode 100644 index 45d9be4..0000000 --- a/src/component/AllFrameCpn/Photobook.jsx +++ /dev/null @@ -1,5 +0,0 @@ -const Photobook = () => { - return <>; -}; - -export default Photobook; diff --git a/src/component/MakeFrameCpn/AddPhoto.jsx b/src/component/MakeFrameCpn/AddPhoto.jsx index 07e68c5..12cf300 100644 --- a/src/component/MakeFrameCpn/AddPhoto.jsx +++ b/src/component/MakeFrameCpn/AddPhoto.jsx @@ -27,7 +27,7 @@ const AddPhoto = ({ handleUploadedImage }) => {
{ ); }; -export default AddPhoto; \ No newline at end of file +export default AddPhoto; diff --git a/src/component/MakeFrameCpn/AddPhoto.module.css b/src/component/MakeFrameCpn/AddPhoto.module.css index b85720f..3fb4bbe 100644 --- 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 index 536ecb1..23359dd 100644 --- 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 index b2402a2..02f78a1 100644 --- 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 index c65531a..54ba356 100644 --- 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 index 6b2b2fa..583f069 100644 --- 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 { diff --git a/src/component/MakeFrameCpn/Template.module.css b/src/component/MakeFrameCpn/Template.module.css index da84c2f..93043c7 100644 --- 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 index 0fc40a7..f2e9315 100644 --- 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; -} \ No newline at end of file + 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 index 29d759d..eaff064 100644 --- 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 = ; break; case "포토북": - middleContent = "dd"; + middleContent = ; break; default: - middleContent = "dd"; + middleContent = ; break; } diff --git a/src/pages/Frame/Frame.module.css b/src/pages/Frame/Frame.module.css index 81c1031..6f0871a 100644 --- a/src/pages/Frame/Frame.module.css +++ b/src/pages/Frame/Frame.module.css @@ -1,20 +1,19 @@ .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 { @@ -22,7 +21,7 @@ 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; } diff --git a/src/pages/Frame/MakeFrame.jsx b/src/pages/Frame/MakeFrame.jsx index 2ad8899..1584f80 100644 --- a/src/pages/Frame/MakeFrame.jsx +++ b/src/pages/Frame/MakeFrame.jsx @@ -1,4 +1,4 @@ -import React, { useState } from "react"; +import React, { useState, useEffect } from "react"; import { Link } from "react-router-dom"; import { useSelector } from "react-redux"; import home from "../../img/home.png"; @@ -18,6 +18,9 @@ import Background from "../../component/MakeFrameCpn/Background"; import Brush from "../../component/MakeFrameCpn/Brush"; import AddPhoto from "../../component/MakeFrameCpn/AddPhoto"; import html2canvas from "html2canvas"; +import axios from "axios"; +import { useAtom } from "jotai"; +import { accessTokenAtom } from "../../store/jotaiAtoms"; const BrushSizeSelector = ({ selectedBrushSize, setSelectedBrushSize }) => { return ( @@ -56,6 +59,7 @@ const MakeFrame = () => { const [uploadedSticker, setUploadedSticker] = useState(null); const [stickerSize, setStickerSize] = useState(100); const [selectedSticker, setSelectedSticker] = useState(null); + const [accessToken] = useAtom(accessTokenAtom); const handleButtonClick = (button) => { setSelectedButton(button); @@ -119,43 +123,78 @@ const MakeFrame = () => { }; const handleSaveClick = () => { - const frameElement = document.querySelector(`.${styles.Frame}`); + // 액세스 토큰이 있을 때만 API 요청을 보내도록 조건 처리 + if (accessToken) { + // axios 요청 설정 + const config = { + headers: { + Authorization: `Bearer ${accessToken}`, // 헤더에 accessToken을 추가 + }, + }; - // Frame 클래스의 이미지를 캡처 - html2canvas(frameElement).then((canvas) => { - // 캔버스를 이미지 데이터 URL로 변환 - const imageData = canvas.toDataURL("image/png"); + const frameElement = document.querySelector(`.${styles.Frame}`); + html2canvas(frameElement).then((canvas) => { + const imageData = canvas.toDataURL("image/png"); - // 서버로 이미지 전송 - sendImageToServer(imageData); - }); + axios + .post( + "http://ec2-3-35-208-177.ap-northeast-2.compute.amazonaws.com:8080/frame", + { + image: imageData, + }, + config + ) + .then((res) => { + console.log("프레임 저장 API 응답:", res.data); + // 성공적으로 데이터를 받아온 경우 + // 받아온 데이터로 frames 상태 업데이트 + }) + .catch((err) => { + // 오류 처리 + console.error("API 요청 중 오류 발생:", err); + }); + }); + } }; - const sendImageToServer = (imageData) => { - const apiUrl = - "http://ec2-3-35-208-177.ap-northeast-2.compute.amazonaws.com:8080/frame/save"; + useEffect(() => { + // 액세스 토큰이 있을 때만 API 요청을 보내도록 조건 처리 + if (accessToken) { + // axios 요청 설정 + const config = { + headers: { + Authorization: `Bearer ${accessToken}`, // 헤더에 accessToken을 추가 + }, + }; + + const frameElement = document.querySelector(`.${styles.Frame}`); + html2canvas(frameElement).then((canvas) => { + const imageData = canvas.toDataURL("image/png"); - fetch(apiUrl, { - method: "POST", - headers: { - "Content-Type": "application/json", - Authorization: "Bearer ${accessToken}", // 여기에 토큰을 넣어주세요. - }, - body: JSON.stringify({ - image: imageData, - }), - }) - .then((res) => res.json()) - .then((data) => { - console.log("이미지 저장 성공:", data); - }) - .catch((err) => { - console.error("이미지 저장 실패:", err); + axios + .post( + "http://ec2-3-35-208-177.ap-northeast-2.compute.amazonaws.com:8080/frame/save", + { + image: imageData, + }, + config + ) + .then((res) => { + console.log("프레임 저장 API 응답:", res.data); + // 성공적으로 데이터를 받아온 경우 + // 받아온 데이터로 frames 상태 업데이트 + }) + .catch((err) => { + // 오류 처리 + console.error("API 요청 중 오류 발생:", err); + }); }); - }; + } + }, [accessToken]); const handleUploadedImage = (imageData) => { setUploadedImage(imageData); + console.log(uploadedImage); }; let bottomContent; @@ -308,4 +347,4 @@ const MakeFrame = () => { ); }; -export default MakeFrame; \ No newline at end of file +export default MakeFrame; diff --git a/src/pages/Frame/MakeFrame.module.css b/src/pages/Frame/MakeFrame.module.css index 5446d9f..602b47a 100644 --- a/src/pages/Frame/MakeFrame.module.css +++ b/src/pages/Frame/MakeFrame.module.css @@ -4,7 +4,7 @@ body { } .MakeFrame { - width: 100vw; + width: 390px; height: calc(var(--vh, 1vh) * 100); background: #ffffff; display: flex; @@ -19,7 +19,6 @@ body { } .Top { - width: 100vw; height: 86px; display: flex; flex-direction: row; @@ -42,7 +41,6 @@ body { font-size: 12px; font-weight: 400; border-radius: 19px; - margin: 0px 9px; border: none; } @@ -54,7 +52,7 @@ body { } .Middle { - width: 100vw; + width: 390px; height: 480px; display: flex; flex-direction: column; @@ -102,6 +100,10 @@ body { gap: 10px; } +.SizeSelector { + display: inline-flex; +} + .BrushSize button { border-radius: 100%; border: none; @@ -137,7 +139,6 @@ body { flex-direction: column; justify-content: start; align-items: center; - gap: 7px; margin: 0 auto; position: absolute; top: 0; @@ -199,25 +200,6 @@ body { font-weight: 400; } -.ListTop button { - background-color: #ffffff; -} - -.ListView { - display: inline-flex; - height: 160px; - padding: 15px 0px 15px 18px; - flex-direction: row; - gap: 18px; -} - -.ListView span { - width: 72px; - height: 130px; - border-radius: 10px; - background: #d9d9d9; -} - .ListBottom { width: 390px; height: 70px; diff --git a/src/pages/Join/Join.module.scss b/src/pages/Join/Join.module.scss index 6a6e154..1e0a508 100644 --- a/src/pages/Join/Join.module.scss +++ b/src/pages/Join/Join.module.scss @@ -194,7 +194,6 @@ // background-color: #eaeaea; // } - /* 모바일 뷰 */ .loginContainer { width: 100vw; @@ -229,8 +228,9 @@ width: 80px; height: 30px; font-size: 14px; - 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; // margin-left: 20px; } h4 { @@ -266,7 +266,8 @@ align-items: center; justify-content: space-between; } - .emailInputBox, .emailInputBox1 { + .emailInputBox, + .emailInputBox1 { width: 40vw; height: 50px; min-height: 50px; @@ -292,7 +293,9 @@ height: 50px; bottom: 2px; } - .inputBox, .inputBox1, .ageScroll { + .inputBox, + .inputBox1, + .ageScroll { width: 330px; height: 50px; min-height: 50px; @@ -305,10 +308,12 @@ font-size: 16px; color: #333; } - .emailInputBox1, .inputBox1 { + .emailInputBox1, + .inputBox1 { border: 1px solid #fe415c; } - .emailCheck + span, .inputBox1 + span { + .emailCheck + span, + .inputBox1 + span { width: 348px; color: #fe415c; display: block; @@ -372,7 +377,8 @@ top: 2px; } } -.signUpBtn1, .signUpBtn0 { +.signUpBtn1, +.signUpBtn0 { width: 80vw; font-weight: 600; font-size: 16px; @@ -388,4 +394,4 @@ } .signUpBtn0 { background-color: #eaeaea; -} \ No newline at end of file +} diff --git a/src/pages/Login/Login.module.scss b/src/pages/Login/Login.module.scss index 824948a..ec24ba9 100644 --- a/src/pages/Login/Login.module.scss +++ b/src/pages/Login/Login.module.scss @@ -298,11 +298,9 @@ // font-weight: 400; // } - /* 모바일 뷰 */ body { - width: 100vw;; - height: 100vh; + height: calc(var(--vh, 1vh) * 100); overflow-x: hidden; overscroll-behavior: none; margin: 0; @@ -312,16 +310,15 @@ body { } .LoginForm { - width: 100vw;; - height: 100vh; + height: calc(var(--vh, 1vh) * 100); display: flex; justify-content: center; align-items: center; overflow: hidden; + margin: 0; } .LoginBox { - width: 100vw; display: flex; flex-direction: column; align-items: center; @@ -375,7 +372,7 @@ body { } .emailInputBox:focus { - border: 1px solid #009EFF; + border: 1px solid #009eff; } /* .submitBtn { @@ -399,7 +396,7 @@ body { color: white; cursor: pointer; margin: 20px auto; - background-color: #009EFF; + background-color: #009eff; } .unactiveBtn { @@ -494,7 +491,7 @@ body { letter-spacing: 0.0192em; text-align: center; font-weight: 900; - } + } } .footer { diff --git a/src/pages/Main/Main.module.scss b/src/pages/Main/Main.module.scss index 4ab1833..2b0d6f1 100644 --- a/src/pages/Main/Main.module.scss +++ b/src/pages/Main/Main.module.scss @@ -1,4 +1,6 @@ .linkBtn { + width: 100%; + height: 100%; background-color: #ffffff; border: none; diff --git a/src/pages/Photobook/PhotoSelect.module.scss b/src/pages/Photobook/PhotoSelect.module.scss index 3b6052d..8d01431 100644 --- a/src/pages/Photobook/PhotoSelect.module.scss +++ b/src/pages/Photobook/PhotoSelect.module.scss @@ -11,7 +11,7 @@ flex-direction: column; background-color: white; .header1 { - height: 40px; + height: 30px; display: flex; align-items: center; justify-content: flex-end; @@ -22,8 +22,8 @@ height: 24px; border: none; border-radius: 19px; - background-color: #F7F8F8; - color: #009EFF; + background-color: #f7f8f8; + color: #009eff; text-align: center; font-size: 12px; font-weight: 400; @@ -39,14 +39,14 @@ height: 50px; width: 340px; border-radius: 10px; - border: 1px solid #009EFF; - color: #009EFF; + border: 1px solid #009eff; + color: #009eff; text-align: center; font-size: 14px; font-weight: 500; background-color: white; &:hover { - background-color: #009EFF; + background-color: #009eff; color: white; } } @@ -69,7 +69,7 @@ .photoBox { width: 160px; height: 160px; - background-color: #F7F7F7; + background-color: #f7f7f7; img { height: 160px; width: auto; @@ -79,13 +79,13 @@ z-index: 5; width: 160px; height: 160px; - background-color: rgba(0, 0, 0, 0.10); + background-color: rgba(0, 0, 0, 0.1); } &:hover { - border: 2px solid #009EFF; // 마우스 호버 시 테두리 스타일 + border: 2px solid #009eff; // 마우스 호버 시 테두리 스타일 } &.selectedPhoto { - border: 2px solid #009EFF; // 선택된 PhotoBox에 테두리 스타일 + border: 2px solid #009eff; // 선택된 PhotoBox에 테두리 스타일 } } -} \ No newline at end of file +} From fc63dcae7add021e4334bd98b4c2a6ef76d502bd Mon Sep 17 00:00:00 2001 From: gkswldnjs78 Date: Tue, 21 Nov 2023 17:15:23 +0900 Subject: [PATCH 3/3] =?UTF-8?q?=EC=A4=91=EA=B0=84=20=EC=A0=90=EA=B2=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/component/AllFrameCpn/FrameList.module.css | 6 ++++++ src/component/MakeFrameCpn/Sticker.module.css | 5 +++-- 2 files changed, 9 insertions(+), 2 deletions(-) diff --git a/src/component/AllFrameCpn/FrameList.module.css b/src/component/AllFrameCpn/FrameList.module.css index 59052af..a4917c2 100644 --- a/src/component/AllFrameCpn/FrameList.module.css +++ b/src/component/AllFrameCpn/FrameList.module.css @@ -39,6 +39,8 @@ ul { } .FrameUl { + height: 100%; + overflow-y: scroll; display: flex; flex-direction: row; justify-content: center; @@ -46,6 +48,10 @@ ul { flex-wrap: wrap; /* 너비를 넘어가면 다음 줄로 넘어감 */ } +.FrameUl::-webkit-scrollbar { + display: none; +} + .FrameItem { width: calc(40% - 10px); gap: 10px; diff --git a/src/component/MakeFrameCpn/Sticker.module.css b/src/component/MakeFrameCpn/Sticker.module.css index 583f069..b0067e2 100644 --- a/src/component/MakeFrameCpn/Sticker.module.css +++ b/src/component/MakeFrameCpn/Sticker.module.css @@ -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;