Merge pull request #23 from HaruDamda/test/테스트용-브랜치

feat: 스타일링
HaruDamda · Dec 19, 2023 · e09ef32 · e09ef32
2 parents 5c8539b + eab7c76
commit e09ef32
Show file tree

Hide file tree

Showing 10 changed files with 619 additions and 220 deletions.
diff --git a/src/App.css b/src/App.css
@@ -1,6 +1,29 @@
+:root {
+  /* width: 100vw;
+  height: 100vh; */
+  /* height: calc(var(--vh, 1vh) * 100); */
+}
+
 :root {
   font-family: "SUIT Variable", sans-serif;
   text-align: center;
-  width: 100vw;
-  height: calc(var(--vh, 1vh) * 100);
-}
+  margin: 0 auto;
+  max-width: 430px;
+  width: 100%;
+  min-height: 100vh;
+  /* height: calc(var(--vh, 1vh) * 100); */
+  background-color: white;
+  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
+  overflow-x: hidden;
+  overflow-y: hidden;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  /* justify-content: center; */
+  border-radius: 5px;
+  color: #1a1e27;
+  font-family: "SUIT Variable", -apple-system, BlinkMacSystemFont, Pretendard,
+    "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue",
+    sans-serif;
+  font-weight: 400;
+}
diff --git a/src/index.css b/src/index.css
@@ -3,23 +3,189 @@
   src: url(https://cdn.jsdelivr.net/gh/sunn-us/SUIT/fonts/variable/woff2/SUIT-Variable.css);
 }
 
+button {
+  font-family: -apple-system, BlinkMacSystemFont, Pretendard, "Segoe UI", Roboto,
+    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+}
+
 :root {
-  width: 100vw;
-  height: calc(var(--vh, 1vh) * 100);
-  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;
+  --vh: 100%;
+}
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, menu, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+main, menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
   margin: 0;
-  overflow-x: hidden;
-  overflow-y: hidden;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+  border: 0;
+  padding: 0;
+  vertical-align: baseline;
+  font: inherit;
+  font-size: 100%;
+}
+article, aside, details, figcaption, figure,
+footer, header, hgroup, main, menu, nav, section {
+  display: block;
+}
+*[hidden] {
+    display: none;
+}
+body {
+  touch-action: manipulation;
+  line-height: 1;
+}
+menu, ol, ul {
+  list-style: none;
+}
+blockquote, q {
+  quotes: none;
 }
+blockquote:before, blockquote:after,
+q:before, q:after {
+  content: '';
+  content: none;
+}
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+/* 폰트 설정 */
+body {
+  font-size: 9px;
+  font-family: "Pretendard";
+}
+
+@media (max-width: 768px) {
+  body {
+    font-size: 9px;
+    font-family: "Pretendard";
+  }
+}
+@media (max-width: 1200px) {
+  body {
+    font-size: 9px;
+    font-family: "Pretendard";
+  }
+}
+
+* {
+  box-sizing: border-box;
+} 
+html {
+  -webkit-touch-callout: none;
+  -webkit-tap-highlight-color:rgba(0, 0, 0, 0);
+
+  scroll-behavior: smooth;
+
+  font-family: sans-serif;
+  /* font-size: 62.5%; */
+  user-select: none;
+  /* @media (min-width:1800px){
+    font-size: 62.5%;
+  }
+  @media (min-width:1420px) and (max-width:1799px){
+    font-size: 46.8%;
+  }
+  @media (min-width:900px) and (max-width:1419px){
+    font-size: 42%;
+  }
+  @media (min-width: 768px) and (max-width:899px){ 
+    font-size: 35%;
+  }
+  @media (max-width:767px){ 
+    font-size: 32%;
+  } */
+
 
+}
+ul, li {
+  padding-left: 0rem;
+  list-style: none;
+}
+a {
+  text-decoration: none;
+  color: inherit;
+}
+input, button {
+  outline: none; 
+  border: none;
+  background-color: transparent;
+}
 button {
-  font-family: -apple-system, BlinkMacSystemFont, Pretendard, "Segoe UI", Roboto,
-    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  cursor: pointer;
+  padding: 0;
+}
+input {
+  appearance: none;
+
+  &:focus {
+    outline: none;
+  }
+}
+
+
+
+@font-face {
+  font-family: 'Pretendard-Regular';
+  src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
+  font-weight: 400;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'EsaManru';
+  font-weight: 300;
+  font-style: normal;
+  src: url('https://cdn.jsdelivr.net/gh/webfontworld/gonggames/EsaManruLight.eot');
+  src: url('https://cdn.jsdelivr.net/gh/webfontworld/gonggames/EsaManruLight.eot?#iefix') format('embedded-opentype'),
+      url('https://cdn.jsdelivr.net/gh/webfontworld/gonggames/EsaManruLight.woff2') format('woff2'),
+      url('https://cdn.jsdelivr.net/gh/webfontworld/gonggames/EsaManruLight.woff') format('woff'),
+      url('https://cdn.jsdelivr.net/gh/webfontworld/gonggames/EsaManruLight.ttf') format("truetype");
 }
+
+@font-face {
+  font-family: 'Dovemayo_gothic';
+  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2302@1.1/Dovemayo_gothic.woff2') format('woff2');
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+font-family: 'Dovemayo_gothic';
+src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2302/OTF/Dovemayo_gothic.otf') format('opentype');
+font-weight: normal;
+font-style: normal;
+
+
+}
+@font-face {
+  font-family: 'EsaManru';
+  font-weight: 500;
+  font-style: normal;
+  src: url('https://cdn.jsdelivr.net/gh/webfontworld/gonggames/EsaManruMedium.eot');
+  src: url('https://cdn.jsdelivr.net/gh/webfontworld/gonggames/EsaManruMedium.eot?#iefix') format('embedded-opentype'),
+      url('https://cdn.jsdelivr.net/gh/webfontworld/gonggames/EsaManruMedium.woff2') format('woff2'),
+      url('https://cdn.jsdelivr.net/gh/webfontworld/gonggames/EsaManruMedium.woff') format('woff'),
+      url('https://cdn.jsdelivr.net/gh/webfontworld/gonggames/EsaManruMedium.ttf') format("truetype");
+}
+
+@font-face {
+  font-family: 'EsaManru';
+  font-weight: 700;
+  font-style: normal;
+  src: url('https://cdn.jsdelivr.net/gh/webfontworld/gonggames/EsaManruBold.eot');
+  src: url('https://cdn.jsdelivr.net/gh/webfontworld/gonggames/EsaManruBold.eot?#iefix') format('embedded-opentype'),
+      url('https://cdn.jsdelivr.net/gh/webfontworld/gonggames/EsaManruBold.woff2') format('woff2'),
+      url('https://cdn.jsdelivr.net/gh/webfontworld/gonggames/EsaManruBold.woff') format('woff'),
+      url('https://cdn.jsdelivr.net/gh/webfontworld/gonggames/EsaManruBold.ttf') format("truetype");
+}
diff --git a/src/pages/Frame/ApplyFrame.jsx b/src/pages/Frame/ApplyFrame.jsx
@@ -5,7 +5,7 @@ import left from "../../img/left.png";
 import trash from "../../img/trash.png";
 import photobook from "../../img/book.png";
 import frameline from "../../img/frame-line.png";
-import { Link, useLocation } from "react-router-dom";
+import { Link, useLocation, useNavigate } from "react-router-dom";
 import { useAtom } from "jotai";
 import { accessTokenAtom } from "../../store/jotaiAtoms";
 import html2canvas from "html2canvas";
@@ -18,6 +18,7 @@ const ApplyFrame = () => {
   const [selectedButton, setSelectedButton] = useState("프레임 제작");
   const [accessToken] = useAtom(accessTokenAtom);
   const [uploadedImage, setUploadedImage] = useState(null);
+  const router = useNavigate();
 
   console.log(selectedFrame);
 
@@ -64,20 +65,20 @@ const ApplyFrame = () => {
 
     if (accessToken) {
       const config = {
+        data: frameUrl,
         headers: {
           Authorization: `Bearer ${accessToken}`, // 헤더에 accessToken을 추가
         },
       };
       axios
         .delete(
           "http://ec2-3-35-208-177.ap-northeast-2.compute.amazonaws.com:8080/frame",
-          config,
-          { data: frameUrl }
+          config
         )
         .then((res) => {
           console.log(res.data);
           // 성공적으로 데이터를 받아온 경우
-          setFrames(res.data); // 받아온 데이터로 frames 상태 업데이트
+          // setFrames(res.data); // 받아온 데이터로 frames 상태 업데이트
         })
         .catch((err) => {
           // 오류 처리
@@ -173,6 +174,7 @@ const ApplyFrame = () => {
             )
             .then((res) => {
               console.log("프레임 적용한 사진 저장 API 응답:", res.data);
+              alert("저장 완료되었습니다.")
             })
             .catch((err) => {
               console.error("API 요청 중 오류 발생:", err);

diff --git a/src/pages/Frame/Frame.jsx b/src/pages/Frame/Frame.jsx
@@ -10,7 +10,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 Photobook from "../Photobook/PhotoSelect";
+import PhotoList from "../Photobook/PhotoList";
 import { Link } from "react-router-dom";
 
 const Frame = () => {
@@ -37,7 +37,7 @@ const Frame = () => {
       middleContent = <FrameList />;
       break;
     case "포토북":
-      middleContent = <Photobook />;
+      middleContent = <PhotoList />;
       break;
     default:
       middleContent = <FrameList />;

diff --git a/src/pages/Main/Main.module.scss b/src/pages/Main/Main.module.scss
@@ -3,6 +3,7 @@
   flex-direction: column;
   align-items: center;
   justify-items: center;
+  width: 100%;
 }
 .logoBtn {
   width: 100%;
@@ -12,14 +13,17 @@
   margin-bottom: 100px;
 
   img {
-    width: 56%;
-    height: 50%;
+    width: 50%;
+    height: auto;
     display: inline-flex;
   }
 }
+.linkBtn_container{
+  width: 100%;
+}
 .logoutBtn,
 .loginBtn {
-  width: 50vw;
+  width: 50%;
   height: 45px;
   background-color: #009eff;
   border: none;