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/[email protected]/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/[email protected]/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;