diff --git a/front-end/package-lock.json b/front-end/package-lock.json index cc2965d..2cf370c 100644 --- a/front-end/package-lock.json +++ b/front-end/package-lock.json @@ -14,6 +14,7 @@ "@testing-library/user-event": "^13.5.0", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-modal": "^3.16.1", "react-router-dom": "^6.21.2", "react-scripts": "5.0.1", "styled-components": "^6.1.8", @@ -8197,6 +8198,11 @@ "url": "https://github.com/sindresorhus/execa?sponsor=1" } }, + "node_modules/exenv": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/exenv/-/exenv-1.2.2.tgz", + "integrity": "sha512-Z+ktTxTwv9ILfgKCk32OX3n/doe+OcLTRtqK9pcL+JsP3J1/VW8Uvl4ZjLlKqeW4rzK4oesDOGMEMRIZqtP4Iw==" + }, "node_modules/exit": { "version": "0.1.2", "resolved": "https://registry.npmjs.org/exit/-/exit-0.1.2.tgz", @@ -14970,6 +14976,29 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==" }, + "node_modules/react-lifecycles-compat": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz", + "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==" + }, + "node_modules/react-modal": { + "version": "3.16.1", + "resolved": "https://registry.npmjs.org/react-modal/-/react-modal-3.16.1.tgz", + "integrity": "sha512-VStHgI3BVcGo7OXczvnJN7yT2TWHJPDXZWyI/a0ssFNhGZWsPmB8cF0z33ewDXq4VfYMO1vXgiv/g8Nj9NDyWg==", + "dependencies": { + "exenv": "^1.2.0", + "prop-types": "^15.7.2", + "react-lifecycles-compat": "^3.0.0", + "warning": "^4.0.3" + }, + "engines": { + "node": ">=8" + }, + "peerDependencies": { + "react": "^0.14.0 || ^15.0.0 || ^16 || ^17 || ^18", + "react-dom": "^0.14.0 || ^15.0.0 || ^16 || ^17 || ^18" + } + }, "node_modules/react-refresh": { "version": "0.11.0", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz", @@ -17377,6 +17406,14 @@ "makeerror": "1.0.12" } }, + "node_modules/warning": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz", + "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==", + "dependencies": { + "loose-envify": "^1.0.0" + } + }, "node_modules/watchpack": { "version": "2.4.0", "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz", diff --git a/front-end/package.json b/front-end/package.json index c6d8748..e6beb12 100644 --- a/front-end/package.json +++ b/front-end/package.json @@ -9,6 +9,7 @@ "@testing-library/user-event": "^13.5.0", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-modal": "^3.16.1", "react-router-dom": "^6.21.2", "react-scripts": "5.0.1", "styled-components": "^6.1.8", diff --git a/front-end/public/images/bg_letter.svg b/front-end/public/images/bg_letter.svg new file mode 100644 index 0000000..df1630c --- /dev/null +++ b/front-end/public/images/bg_letter.svg @@ -0,0 +1,27 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/front-end/public/images/envelope.svg b/front-end/public/images/envelope.svg new file mode 100644 index 0000000..1b9b175 --- /dev/null +++ b/front-end/public/images/envelope.svg @@ -0,0 +1,4 @@ + + + + diff --git "a/front-end/public/images/\352\262\200\354\240\225\352\263\240\354\226\221\354\235\264.svg" "b/front-end/public/images/\352\262\200\354\240\225\352\263\240\354\226\221\354\235\264.svg" new file mode 100644 index 0000000..001f083 --- /dev/null +++ "b/front-end/public/images/\352\262\200\354\240\225\352\263\240\354\226\221\354\235\264.svg" @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git "a/front-end/public/images/\353\215\224\355\235\260\355\216\270\354\247\200\354\247\200.svg" "b/front-end/public/images/\353\215\224\355\235\260\355\216\270\354\247\200\354\247\200.svg" new file mode 100644 index 0000000..ed92020 --- /dev/null +++ "b/front-end/public/images/\353\215\224\355\235\260\355\216\270\354\247\200\354\247\200.svg" @@ -0,0 +1,31 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git "a/front-end/public/images/\353\240\210\353\223\234\355\225\200.svg" "b/front-end/public/images/\353\240\210\353\223\234\355\225\200.svg" new file mode 100644 index 0000000..678ba27 --- /dev/null +++ "b/front-end/public/images/\353\240\210\353\223\234\355\225\200.svg" @@ -0,0 +1,3 @@ + + + diff --git "a/front-end/public/images/\354\226\221\354\252\275\355\216\270\354\247\200\354\247\200.svg" "b/front-end/public/images/\354\226\221\354\252\275\355\216\270\354\247\200\354\247\200.svg" new file mode 100644 index 0000000..65942b0 --- /dev/null +++ "b/front-end/public/images/\354\226\221\354\252\275\355\216\270\354\247\200\354\247\200.svg" @@ -0,0 +1,31 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git "a/front-end/public/images/\354\232\260\355\221\234.svg" "b/front-end/public/images/\354\232\260\355\221\234.svg" new file mode 100644 index 0000000..bebaff9 --- /dev/null +++ "b/front-end/public/images/\354\232\260\355\221\234.svg" @@ -0,0 +1,4 @@ + + + + diff --git "a/front-end/public/images/\354\232\260\355\221\2342.svg" "b/front-end/public/images/\354\232\260\355\221\2342.svg" new file mode 100644 index 0000000..22c4089 --- /dev/null +++ "b/front-end/public/images/\354\232\260\355\221\2342.svg" @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git "a/front-end/public/images/\355\201\260\352\263\240\354\226\221\354\235\2641.png" "b/front-end/public/images/\355\201\260\352\263\240\354\226\221\354\235\2641.png" deleted file mode 100644 index 6a85e0e..0000000 Binary files "a/front-end/public/images/\355\201\260\352\263\240\354\226\221\354\235\2641.png" and /dev/null differ diff --git "a/front-end/public/images/\355\225\200.svg" "b/front-end/public/images/\355\225\200.svg" new file mode 100644 index 0000000..8e9c4de --- /dev/null +++ "b/front-end/public/images/\355\225\200.svg" @@ -0,0 +1,3 @@ + + + diff --git "a/front-end/public/images/\355\235\260\355\216\270\354\247\200\354\247\200.svg" "b/front-end/public/images/\355\235\260\355\216\270\354\247\200\354\247\200.svg" new file mode 100644 index 0000000..5a7feae --- /dev/null +++ "b/front-end/public/images/\355\235\260\355\216\270\354\247\200\354\247\200.svg" @@ -0,0 +1,24 @@ + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/front-end/src/App.js b/front-end/src/App.js index 2664b70..b7c8d3c 100644 --- a/front-end/src/App.js +++ b/front-end/src/App.js @@ -9,6 +9,11 @@ import RomanticLetterbox from "./pages/RomanticLetterbox"; import Store from "./pages/Store"; import MyPage from "./pages/MyPage"; import Check1 from './components/MyLetterbox/Check1'; +import Check2 from './components/MyLetterbox/Check2'; +import Answer1 from './components/MyLetterbox/Answer1'; +import Answer2 from './components/MyLetterbox/Answer2'; +import Answer3 from './components/MyLetterbox/Answer3'; +import Answer4 from './components/MyLetterbox/Answer4'; import OpenLetter1 from './components/MyLetterbox/OpenLetter1'; const Background = styled.div` @@ -30,6 +35,11 @@ function App() { } /> } /> } /> + } /> + } /> + } /> + } /> + } /> } /> diff --git a/front-end/src/components/MyLetterbox/Answer1.jsx b/front-end/src/components/MyLetterbox/Answer1.jsx new file mode 100644 index 0000000..30b00cd --- /dev/null +++ b/front-end/src/components/MyLetterbox/Answer1.jsx @@ -0,0 +1,359 @@ +import React from "react"; +import styled from 'styled-components'; +import { useNavigate } from "react-router-dom"; +import Header from '../Header/Header'; + +const TextContainer = styled.div` + width: 100%; + height: 100%; + justify-content: flex-start; + align-items: flex-start; + gap: 11px; + display: inline-flex; + margin-left: 363px; + margin-top: 62px; +`; + +const TextInnerContainer = styled.div` + justify-content: flex-start; + align-items: flex-start; + display: flex; +`; + +//닉네임 +const Nickname = styled.div` + color: #79110E; + font-size: 40px; + font-family: 'Pretendard'; + font-weight: 500; + word-wrap: break-word; + display: flex; + justify-content: center; + align-items: center; + gap: 10px; +`; + +//님에게 편지를 작성해주세요 +const Message = styled.div` + color: black; + font-size: 40px; + font-family: 'Pretendard'; + font-weight: 500; + word-wrap: break-word; +`; + +//흰 편지지 컨테이너 +const WhiteLetterContainer = styled.div` + background-image: url("/images/더흰편지지.svg"); + background-size: cover; + //background-size: contain; + width: 846px; + height: 506.42908px; + margin: 70px 537px 0 537px; + overflow: auto; //자식 마진 탑 오류 때문에 오토처리 + position: relative; //우표랑 겹치게 +`; + +const ContentContainer = styled.div` + width: 772px; + height: 421.04908px; + margin: 43.91px 37px 41.47px 37px; // 탑 에러나서 부모에 오토처리 +`; + +//닉네임에게 +const ToContainer = styled.div` + width: 88px; + height: 20px; + display: flex; +`; + +//'닉네임'(나) +const ToMyNickname = styled.div` + color: #000; + font-family: 'NanumGothic'; + font-size: 20px; + font-style: normal; + font-weight: 700; + line-height: 100%; /* 20px */ + letter-spacing: 0.4px; + white-space: nowrap; //줄바꿈 안 되게 +`; + +//에게 +const To = styled.div` + color: #000; + font-family: 'NanumGothic'; + font-size: 20px; + font-style: normal; + font-weight: 700; + line-height: 100%; /* 20px */ + letter-spacing: 0.4px; + white-space: nowrap; +`; + +const Content = styled.div` + color: #000; + font-family: "Gowun Dodum"; + font-size: 20px; + font-style: normal; + font-weight: 400; + line-height: 200%; /* 40px */ + letter-spacing: -0.2px; + margin-top: 50.08px; +`; + +const Stamp = styled.div` + background-image: url("/images/우표2.svg"); + background-size: cover; + float: right; + width: 137.40875px; + height: 183.21165px; + + position: absolute; //우표가 내용위로 겹치게 + right: 37px; + top: 43.91px; +`; + +//닉네임이 +const FromContainer = styled.div` + width: 71px; + height: 20px; + margin: 50.96px 0 0 688.41px; + display: flex; +`; + +//'닉네임'(다른 사용자) +const FromNickname = styled.div` + color: #000; + font-family: 'NanumGothic'; + font-size: 20px; + font-style: normal; + font-weight: 700; + line-height: 100%; /* 20px */ + letter-spacing: 0.4px; + white-space: nowrap; +`; + +//이 +const From = styled.div` + color: #000; + font-family: 'NanumGothic'; + font-size: 20px; + font-style: normal; + font-weight: 700; + line-height: 100%; /* 20px */ + letter-spacing: 0.4px; + white-space: nowrap; +`; + +//주의사항 설명 글 +const ExplanationText = styled.div` + width: 407px; + height: 64px; + margin: 13.57px 0 0 537px; + + color: var(--Grey-Dark, #757575); + font-family: 'Pretendard'; + font-size: 12px; + font-style: normal; + font-weight: 400; + line-height: 130%; /* 15.6px */ + letter-spacing: -0.2px; + white-space: pre-line +`; + +//버튼 3개 컨테이너 +const ButtonsContainer = styled.div` + width: 846px; + height: 52px; + margin: 84px 537px 0 537px; + display: flex; // 버튼들 가로배치 + justify-content: space-between; //양옆끝으로 떨어트리기 +`; + +//이전 버튼 +const PrevButton = styled.div` + display: flex; + width: 174px; + height: 52px; + justify-content: center; + align-items: center; + gap: 12.379px; + border-radius: 10px; + background: var(--Red-Light, #C90000); + cursor: pointer; +`; + +const ArrowAndText = styled.div` + width: 53.38px; + height: 18px; + display: flex; // 화살표랑 글씨 가로배치 + justify-content: space-between; +`; + +//왼쪽 화살표 +const Arrow1 = styled.div` + width: 9px; + height: 15px; +`; + +const Prev = styled.div` + color: #FFF; + font-family: 'Pretendard'; + font-size: 18px; + font-style: normal; + font-weight: 500; + line-height: 100%; /* 18px */ +`; + +// 상점 버튼 +const StoreButton = styled.div` + display: flex; + width: 378px; + height: 52px; + justify-content: center; + align-items: center; + gap: 12.379px; + border-radius: 10px; + border: 1px solid var(--Red-Light, #C90000); + background: var(--Ivory, #FFFEF8); + cursor: pointer; + + color: #000; + font-family: 'Pretendard'; + font-size: 18px; + font-style: normal; + font-weight: 500; + line-height: normal; + `; + +// 다음 버튼 +const NextButton = styled.div` + display: flex; + width: 174px; + height: 52px; + justify-content: center; + align-items: center; + gap: 12.379px; + border-radius: 10px; + background: var(--Red-Light, #C90000); + cursor: pointer; +`; + +//오른쪽 화살표 +const Arrow2 = styled.div` + width: 9px; + height: 15px; +`; + +const Next = styled.div` + color: #FFF; + font-family: 'Pretendard'; + font-size: 18px; + font-style: normal; + font-weight: 500; + line-height: 100%; /* 18px */ +`; + + +const Answer1 = () => { + const navigate = useNavigate(); + + const navigateToStore = () => { + navigate("/Store"); + }; + + const navigateToCheck1 = () => { + navigate("/Check1"); + }; + + const navigateToAnswer2 = () => { + navigate("/Answer2"); + }; + + return ( +
+
+ + + + + 닉네임 + + + 님에게 편지를 작성해주세요. + + + + + + + + + 닉네임 + + + 에게 + + + + + 편지는 익명으로 작성돼요. 편지는 익명으로 작성돼요. 편지는 익명 으로 작 성돼요. 편지는 익명으로 작성돼요. 편지는 익명으로 작성돼 요. 편지는 익명 으로 작성돼요. 편지는 익명으로 작성돼요. 편지는 익명으로 작성돼요. 편지 는 익명으로 작성돼요. 편지는 익명으로 작성돼요. 편지는 익명으로 작성돼요. 편지는 익명으로 작성돼요. 편지는 익명으로 작성돼요. 편지는 익명으로 작성돼요. 편지는 익명으로 작성돼요. 편지는 익명으로 작성돼요. 편지는 익명으로 작성돼요. 편지는 익명으로 작성돼요. 편지는 익명으로 작성돼요. 편지는 익명으로 작성돼요. + + + + + + + 닉네임 + + + 이 + + + + + + + + {/*figure space공백문자씀*/} +  • 편지는 발송한 시간부터 24시간 후에 우편함 주인이 읽을 수 있어요.
+  • 모든 편지는 우편함 주인만 볼 수 있고, 후에 공개될 수 있어요.
+  • 모든 편지는 익명이 보장되지만, 욕설/모욕/성희롱 등 부적절한 내용으로 인해
+   수사 협조 요청이 발생할 경우, 낭만고양이는 수사에 필요한 정보를 제공할 수 있습니다. + + + + + + + + + + + + 이전 + + + + + 상점 + + + + + 다음 + + + + + + + + + +
+ ); +}; + +export default Answer1; \ No newline at end of file diff --git a/front-end/src/components/MyLetterbox/Answer2.jsx b/front-end/src/components/MyLetterbox/Answer2.jsx new file mode 100644 index 0000000..04fb1fe --- /dev/null +++ b/front-end/src/components/MyLetterbox/Answer2.jsx @@ -0,0 +1,359 @@ +import React from "react"; +import styled from 'styled-components'; +import { useNavigate } from "react-router-dom"; +import Header from '../Header/Header'; + +const TextContainer = styled.div` + width: 100%; + height: 100%; + justify-content: flex-start; + align-items: flex-start; + gap: 11px; + display: inline-flex; + margin-left: 363px; + margin-top: 62px; +`; + +const TextInnerContainer = styled.div` + justify-content: flex-start; + align-items: flex-start; + display: flex; +`; + +//편지지 +const TextLetter = styled.div` + color: #C90000; + font-size: 40px; + font-family: 'Pretendard'; + font-weight: 500; + word-wrap: break-word; + display: flex; + justify-content: center; + align-items: center; + gap: 10px; +`; + +//를 골라주세요. +const Message = styled.div` + color: black; + font-size: 40px; + font-family: 'Pretendard'; + font-weight: 500; + word-wrap: break-word; +`; + +//편지지 양쪽 컨테이너 +const LetterConatiner = styled.div` + background-image: url("/images/양쪽편지지.svg"); + background-size: cover; + width: 1194px; + height: 556px; + margin: 70px 363px 0 363px; + overflow: auto; // 자식 마진탑오류 + display: flex; //자식 가로배치 +`; + +//왼쪽 컨테이너 +const WhiteLetterContainer = styled.div` + background-image: url("/images/더흰편지지.svg"); + background-size: cover; + width: 480px; + height: 287.33566px; + margin: 134px 0 0 38px; + position: relative; +`; + +const ContentContainer = styled.div` + width: 438.01419px; + height: 238.54566px; + margin: 24.91px 20.99px 23.88px 20.99px; // 탑 에러나서 부모에 오토처리 +`; + +//닉네임에게 +const ToContainer = styled.div` + width: 50px; + height: 11px; + display: flex; +`; + +//'닉네임'(나) +const ToMyNickname = styled.div` + color: #000; + font-family: 'NanumGothic'; + font-size: 11.348px; + font-style: normal; + font-weight: 700; + line-height: 100%; /* 11.348px */ + letter-spacing: 0.227px; + white-space: nowrap; //줄바꿈 안 되게 +`; + +//에게 +const To = styled.div` + color: #000; + font-family: 'NanumGothic'; + font-size: 11.348px; + font-style: normal; + font-weight: 700; + line-height: 100%; /* 11.348px */ + letter-spacing: 0.227px; + white-space: nowrap; +`; + +const Content = styled.div` + width: 438.01419px; + height: 161px; + color: #000; + font-family: "Gowun Dodum"; + font-size: 11.348px; + font-style: normal; + font-weight: 400; + line-height: 200%; /* 22.695px */ + letter-spacing: -0.113px; + word-break: break-all; + + margin-top: 28.76px; +`; + +const Stamp = styled.div` + background-image: url("/images/우표2.svg"); + background-size: cover; + float: right; + width: 78.03125px; + height: 104.03989px; + position: absolute; //우표가 내용위로 겹치게 + right: 24.7px; + top: 20.86px; +`; + +//닉네임이 +const FromContainer = styled.div` + width: 40px; + height: 11px; + margin: 26.78px 0 0 388.25px; + display: flex; +`; + +//'닉네임'(다른 사용자) +const FromNickname = styled.div` + color: #000; + font-family: 'NanumGothic'; + font-size: 11.348px; + font-style: normal; + font-weight: 700; + line-height: 100%; /* 11.348px */ + letter-spacing: 0.227px; + white-space: nowrap; +`; + +//이 +const From = styled.div` + color: #000; + font-family: 'NanumGothic'; + font-size: 11.348px; + font-style: normal; + font-weight: 700; + line-height: 100%; /* 11.348px */ + letter-spacing: 0.227px; + white-space: nowrap; +`; + +//오른쪽 컨테이너 스크롤 되는 전체 영역 +const ScrollBoxContainer = styled.div` + width: 638px; + height: 464px; + margin: 46px 0 0 38px; +`; + +//버튼 3개 컨테이너 +const ButtonsContainer = styled.div` + width: 846px; + height: 52px; + margin: 112px 537px 0 537px; + display: flex; // 버튼들 가로배치 + justify-content: space-between; //양옆끝으로 떨어트리기 +`; + +//이전 버튼 +const PrevButton = styled.div` + display: flex; + width: 174px; + height: 52px; + justify-content: center; + align-items: center; + gap: 12.379px; + border-radius: 10px; + background: var(--Red-Light, #C90000); + cursor: pointer; +`; + +const ArrowAndText = styled.div` + width: 53.38px; + height: 18px; + display: flex; // 화살표랑 글씨 가로배치 + justify-content: space-between; +`; + +//왼쪽 화살표 +const Arrow1 = styled.div` + width: 9px; + height: 15px; +`; + +const Prev = styled.div` + color: #FFF; + font-family: 'Pretendard'; + font-size: 18px; + font-style: normal; + font-weight: 500; + line-height: 100%; /* 18px */ +`; + +//상점 버튼 +const StoreButton = styled.div` + display: flex; + width: 378px; + height: 52px; + justify-content: center; + align-items: center; + gap: 12.379px; + border-radius: 10px; + border: 1px solid var(--Red-Light, #C90000); + background: var(--Ivory, #FFFEF8); + cursor: pointer; + + color: #000; + font-family: 'Pretendard'; + font-size: 18px; + font-style: normal; + font-weight: 500; + line-height: normal; +`; + +//다음 버튼 +const NextButton = styled.div` + display: flex; + width: 174px; + height: 52px; + justify-content: center; + align-items: center; + gap: 12.379px; + border-radius: 10px; + background: var(--Red-Light, #C90000); + cursor: pointer; +`; + +//오른쪽 화살표 +const Arrow2 = styled.div` + width: 9px; + height: 15px; +`; + +const Next = styled.div` + color: #FFF; + font-family: 'Pretendard'; + font-size: 18px; + font-style: normal; + font-weight: 500; + line-height: 100%; /* 18px */ +`; + + +const Answer2 = () => { + const navigate = useNavigate(); + + const navigateToStore = () => { + navigate("/Store"); + }; + + const navigateToAnswer1 = () => { + navigate("/Answer1"); + }; + + const navigateToAnswer3 = () => { + navigate("/Answer3"); + }; + + return ( +
+
+ + + + + 편지지 + + + 를 골라주세요. + + + + + + + + + + 닉네임 + + + 에게 + + + + + 편지는 익명으로 작성돼요. 편지는 익명으로 작성돼요. 편지는 익명 으로 작성 돼요. 편지는 익명으로 작성돼요. 편지는 익명으로 작성돼 요. 편지는 익명으로 작성돼요. 편지는 익명으로 작성돼요. 편지는 익명으로 작성돼요. 편지는 익 명으로 작성돼요. 편지는 익명으로 작성돼요. 편지는 익명으로 작성돼요. 편지는 익명으로 작성돼요.편지는 익명으로 작성돼요. 편지는 익명으로 작성돼요. 편지는 익명으로 작성돼요. 편지는 익명으로 작성돼요. 편지는 익명으로 작성돼요. 편지는 익명으로 작성돼요. 편지는 익명으로 작성돼요. 편지는 익명으로 작성돼요. + + + + + + + 닉네임 + + + 이 + + + + + + + + + + + + + + + + + + + + 이전 + + + + + 상점 + + + + + 다음 + + + + + + + + + +
+ ); +}; + +export default Answer2; \ No newline at end of file diff --git a/front-end/src/components/MyLetterbox/Answer3.jsx b/front-end/src/components/MyLetterbox/Answer3.jsx new file mode 100644 index 0000000..962794a --- /dev/null +++ b/front-end/src/components/MyLetterbox/Answer3.jsx @@ -0,0 +1,358 @@ +import React from "react"; +import styled from 'styled-components'; +import { useNavigate } from "react-router-dom"; +import Header from '../Header/Header'; + +const TextContainer = styled.div` + width: 100%; + height: 100%; + justify-content: flex-start; + align-items: flex-start; + gap: 11px; + display: inline-flex; + margin-left: 363px; + margin-top: 62px; +`; + +const TextInnerContainer = styled.div` + justify-content: flex-start; + align-items: flex-start; + display: flex; +`; + +//우표 +const StampLetter = styled.div` + color: #C90000; + font-size: 40px; + font-family: 'Pretendard'; + font-weight: 500; + word-wrap: break-word; + display: flex; + justify-content: center; + align-items: center; + gap: 10px; +`; + +//를 골라주세요. +const Message = styled.div` + color: black; + font-size: 40px; + font-family: 'Pretendard'; + font-weight: 500; + word-wrap: break-word; +`; + +//편지지 양쪽 컨테이너 +const LetterConatiner = styled.div` + background-image: url("/images/양쪽편지지.svg"); + background-size: cover; + width: 1194px; + height: 556px; + margin: 70px 363px 0 363px; + overflow: auto; // 자식 마진탑오류 + display: flex; //자식 가로배치 +`; + +//왼쪽 컨테이너 +const WhiteLetterContainer = styled.div` + background-image: url("/images/더흰편지지.svg"); + background-size: cover; + width: 480px; + height: 287.33566px; + margin: 134px 0 0 38px; + position: relative; +`; + +const ContentContainer = styled.div` + width: 438.01419px; + height: 238.54566px; + margin: 24.91px 20.99px 23.88px 20.99px; // 탑 에러나서 부모에 오토처리 +`; + +//닉네임에게 +const ToContainer = styled.div` + width: 50px; + height: 11px; + display: flex; +`; + +//'닉네임'(나) +const ToMyNickname = styled.div` + color: #000; + font-family: 'NanumGothic'; + font-size: 11.348px; + font-style: normal; + font-weight: 700; + line-height: 100%; /* 11.348px */ + letter-spacing: 0.227px; + white-space: nowrap; //줄바꿈 안 되게 +`; + +//에게 +const To = styled.div` + color: #000; + font-family: 'NanumGothic'; + font-size: 11.348px; + font-style: normal; + font-weight: 700; + line-height: 100%; /* 11.348px */ + letter-spacing: 0.227px; + white-space: nowrap; +`; + +const Content = styled.div` + width: 438.01419px; + height: 161px; + color: #000; + font-family: "Gowun Dodum"; + font-size: 11.348px; + font-style: normal; + font-weight: 400; + line-height: 200%; /* 22.695px */ + letter-spacing: -0.113px; + word-break: break-all; + + margin-top: 28.76px; +`; + +const Stamp = styled.div` + background-image: url("/images/우표2.svg"); + background-size: cover; + float: right; + width: 78.03125px; + height: 104.03989px; + position: absolute; //우표가 내용위로 겹치게 + right: 24.7px; + top: 20.86px; +`; + +//닉네임이 +const FromContainer = styled.div` + width: 40px; + height: 11px; + margin: 26.78px 0 0 388.25px; + display: flex; +`; + +//'닉네임'(다른 사용자) +const FromNickname = styled.div` + color: #000; + font-family: 'NanumGothic'; + font-size: 11.348px; + font-style: normal; + font-weight: 700; + line-height: 100%; /* 11.348px */ + letter-spacing: 0.227px; + white-space: nowrap; +`; + +//이 +const From = styled.div` + color: #000; + font-family: 'NanumGothic'; + font-size: 11.348px; + font-style: normal; + font-weight: 700; + line-height: 100%; /* 11.348px */ + letter-spacing: 0.227px; + white-space: nowrap; +`; + +const ScrollBoxContainer = styled.div` + width: 638px; + height: 464px; + margin: 46px 0 0 38px; +`; + +//버튼 3개 컨테이너 +const ButtonsContainer = styled.div` + width: 846px; + height: 52px; + margin: 112px 537px 0 537px; + display: flex; // 버튼들 가로배치 + justify-content: space-between; //양옆끝으로 떨어트리기 +`; + +//이전 버튼 +const PrevButton = styled.div` + display: flex; + width: 174px; + height: 52px; + justify-content: center; + align-items: center; + gap: 12.379px; + border-radius: 10px; + background: var(--Red-Light, #C90000); + cursor: pointer; +`; + +const ArrowAndText = styled.div` + width: 53.38px; + height: 18px; + display: flex; // 화살표랑 글씨 가로배치 + justify-content: space-between; +`; + +//왼쪽 화살표 +const Arrow1 = styled.div` + width: 9px; + height: 15px; +`; + +const Prev = styled.div` + color: #FFF; + font-family: Pretendard; + font-size: 18px; + font-style: normal; + font-weight: 500; + line-height: 100%; /* 18px */ +`; + +//상점 버튼 +const StoreButton = styled.div` + display: flex; + width: 378px; + height: 52px; + justify-content: center; + align-items: center; + gap: 12.379px; + border-radius: 10px; + border: 1px solid var(--Red-Light, #C90000); + background: var(--Ivory, #FFFEF8); + cursor: pointer; + + color: #000; + font-family: Pretendard; + font-size: 18px; + font-style: normal; + font-weight: 500; + line-height: normal; +`; + +//다음 버튼 +const NextButton = styled.div` + display: flex; + width: 174px; + height: 52px; + justify-content: center; + align-items: center; + gap: 12.379px; + border-radius: 10px; + background: var(--Red-Light, #C90000); + cursor: pointer; +`; + +//오른쪽 화살표 +const Arrow2 = styled.div` + width: 9px; + height: 15px; +`; + +const Next = styled.div` + color: #FFF; + font-family: Pretendard; + font-size: 18px; + font-style: normal; + font-weight: 500; + line-height: 100%; /* 18px */ +`; + + +const Answer3 = () => { + const navigate = useNavigate(); + + const navigateToStore = () => { + navigate("/Store"); + }; + + const navigateToAnswer2 = () => { + navigate("/Answer2"); + }; + + const navigateToAnswer4 = () => { + navigate("/Answer4"); + }; + + return ( +
+
+ + + + + 우표 + + + 를 골라주세요. + + + + + + + + + + 닉네임 + + + 에게 + + + + + 편지는 익명으로 작성돼요. 편지는 익명으로 작성돼요. 편지는 익명 으로 작성 돼요. 편지는 익명으로 작성돼요. 편지는 익명으로 작성돼 요. 편지는 익명으로 작성돼요. 편지는 익명으로 작성돼요. 편지는 익명으로 작성돼요. 편지는 익 명으로 작성돼요. 편지는 익명으로 작성돼요. 편지는 익명으로 작성돼요. 편지는 익명으로 작성돼요.편지는 익명으로 작성돼요. 편지는 익명으로 작성돼요. 편지는 익명으로 작성돼요. 편지는 익명으로 작성돼요. 편지는 익명으로 작성돼요. 편지는 익명으로 작성돼요. 편지는 익명으로 작성돼요. 편지는 익명으로 작성돼요. + + + + + + + 닉네임 + + + 이 + + + + + + + + + + + + + + + + + + + + 이전 + + + + + 상점 + + + + + 다음 + + + + + + + + + +
+ ); +}; + +export default Answer3; \ No newline at end of file diff --git a/front-end/src/components/MyLetterbox/Answer4.jsx b/front-end/src/components/MyLetterbox/Answer4.jsx new file mode 100644 index 0000000..35b1db0 --- /dev/null +++ b/front-end/src/components/MyLetterbox/Answer4.jsx @@ -0,0 +1,83 @@ +import React from "react"; +import styled from 'styled-components'; +import { useNavigate } from "react-router-dom"; +import Header from '../Header/Header'; + +const Container = styled.div` + width: 330px; + height: 361.00085px; + margin: 254px 0 0 795px; +`; + +const BlackCat = styled.div` + background-image: url("/images/검정고양이.svg"); + width: 143px; + height: 137px; + margin: 0 0 0 94px; +`; + +const Text = styled.div` + width: 330px; + height: 66px; + margin: 40.82px 0 0 0; + + color: #000; + text-align: center; + font-family: Pretendard; + font-size: 24px; + font-style: normal; + font-weight: 400; + line-height: normal; +`; + +const ReturnButton = styled.div` + width: 330px; + height: 42px; + margin: 100px 0 0 0; + display: flex; //center쓰려면 dislpayflex해야함 + justify-content: center; + align-items: center; + border-radius: 10px; + background: var(--Red-Light, #C90000); + cursor: pointer; +`; + +const ReturnText = styled.div` + color: #FFF; + font-family: Pretendard; + font-size: 18px; + font-style: normal; + font-weight: 500; + line-height: normal; +`; + +const Answer4 = () => { + const navigate = useNavigate(); + + const navigateToMyBoxMain = () => { + navigate("/MyLetterbox"); + }; + + return ( +
+
+ + + + + + 편지가 성공적으로 발송되었습니다.
+ 편지는 24시간 뒤에 도착해요! + + + + 내 우편함으로 돌아가기 + + + + +
+ ); +}; + +export default Answer4; \ No newline at end of file diff --git a/front-end/src/components/MyLetterbox/Check1.jsx b/front-end/src/components/MyLetterbox/Check1.jsx index ea296f5..cfc067c 100644 --- a/front-end/src/components/MyLetterbox/Check1.jsx +++ b/front-end/src/components/MyLetterbox/Check1.jsx @@ -1,8 +1,10 @@ -import React from "react"; +import React, {useState} from "react"; import styled from 'styled-components'; +import { useNavigate } from "react-router-dom"; import Header from '../Header/Header'; +import Check2 from './Check2'; -const Container = styled.div` +const TextContainer = styled.div` width: 100%; height: 100%; justify-content: flex-start; @@ -13,12 +15,13 @@ const Container = styled.div` margin-top: 62px; `; -const InnerContainer = styled.div` +const TextInnerContainer = styled.div` justify-content: flex-start; align-items: flex-start; display: flex; `; +//닉네임 const Nickname = styled.div` color: #79110E; font-size: 40px; @@ -31,6 +34,7 @@ const Nickname = styled.div` gap: 10px; `; +//님의 우편함 const Message = styled.div` color: black; font-size: 40px; @@ -38,20 +42,365 @@ const Message = styled.div` font-weight: 500; word-wrap: break-word; `; + +//우편함 전체 모달창 감싸기 +const WrapLetterContainer = styled.div` + display: flex; //lettercontainer랑 xbutton가로배치 +`; + +//우편함 전체 모달창 +const LetterContainer = styled.div` + background-image: url("/images/bg_letter.svg"); + background-size: cover; + width: 1194px; + height: 732px; + margin-left: 363px; + margin-top: 41px; + display: flex; //left랑 right가로배치 + border-radius: 20px; + position: relative; //x버튼과 겹치게 +`; + +const XButton = styled.div` + position: absolute; //x버튼 겹치게 + left: 1532px; + top: 226px; + cursor: pointer; +`; + +//스크롤 하는 영역 +const LeftContainer = styled.div` + width: 560px; + height: 1080px; + margin: 63px 0 0 0; + display: inline-flex; //컨테이너랑 스크롤바 가로배치 +`; + +//핀들이랑 닉네임들 넓은 컨테이너 +const PinsAndUsersContainer = styled.div` + width: 444px; + height: 1080px; + margin: 0 88px 0 28px; +`; + +//핀과 닉네임 한 줄 컨테이너 +const PinAndUserContainer = styled.div` + width: 444px; + height: 50px; + display: inline-flex; // 핀이랑 닉네임 가로배치 + margin-bottom: 40px; +`; + +//빨간 고정 핀 +const RedPin = styled.div` + background-image: url("/images/레드핀.svg"); + background-size: cover; + width: 30px; + height: 30px; + margin: 10px 0 0 0; + cursor: pointer; +`; + +//투명 핀 +const Pin = styled.div` + background-image: url("/images/핀.svg"); + background-size: cover; + width: 30px; + height: 30px; + margin: 10px 0 0 0; + cursor: pointer; +`; + +//닉네임 적힌 모달창 여는 버튼 컨테이너 +const WrapUserNickname = styled.div` + display: flex; + width: 400px; + height: 50px; + margin: 0 0 0 14px; + align-items: flex-start; + gap: 12px; + border-radius: 45px; + background: var(--Background-Ivory, #FFFEF8); + cursor: pointer; +`; + +const Envelope = styled.div` + background-image: url("/images/envelope.svg"); + background-size: cover; + width: 26px; + height: 16px; + margin: 16px 12px 16px 25px; +`; + +const UserNickname = styled.div` + color: #000; + font-family: 'Pretendard'; + font-size: 18px; + font-style: normal; + font-weight: 400; + line-height: 100%; /* 18px */ + margin: 16px 0 16px 0; +`; + +const ScrollBar = styled.div` + + /* &::-webkit-scrollbar { //스크롤바 전체 + height: 611px; + width: 8px; + position: absolute; + } + + &::-webkit-scrollbar-track { //스크롤바 배경색 + background: #B3B3B3; + border-radius: 10px; + } + + &::-webkit-scrollbar-thumb { //스크롤 움직이는 작은 막대 + background: #79110E; + width: 8px; + height: 84.592px; + position: absolute; + }*/ +`; const Check1 = () => { + + const navigate = useNavigate(); + + const navigateToMyBoxMain = () => { + navigate("/MyLetterbox"); + }; + + const [pin, setPin] = useState(false); //고정핀 + const handlePin = () => { + setPin(!pin); + } + + const [pin2, setPin2] = useState(false); //고정핀 + const handlePin2 = () => { + setPin2(!pin2); + } + + const [pin3, setPin3] = useState(false); //고정핀 + const handlePin3 = () => { + setPin3(!pin3); + } + + const [pin4, setPin4] = useState(false); //고정핀 + const handlePin4 = () => { + setPin4(!pin4); + } + + const [pin5, setPin5] = useState(false); //고정핀 + const handlePin5 = () => { + setPin5(!pin5); + } + + const [pin6, setPin6] = useState(false); //고정핀 + const handlePin6 = () => { + setPin6(!pin6); + } + + const [pin7, setPin7] = useState(false); //고정핀 + const handlePin7 = () => { + setPin7(!pin7); + } + + const [pin8, setPin8] = useState(false); //고정핀 + const handlePin8 = () => { + setPin8(!pin8); + } + + const [isModalOpen, setIsModalOpen] = useState(false); // 모달 상태 + return (
- - + + -
닉네임
+ 닉네임 - 님의 우편함 - - + + 님의 우편함 + + + + + + + + + {/*1번째 */} + +
{/*고정핀 핸들*/} + {pin ? ( + + ) : + ( + + )} +
+ {setIsModalOpen(true)}}> + + + + 닉네임 + + + + + {/*2번째 */} + +
+ {pin2 ? ( + + ) : + ( + + )} +
+ {setIsModalOpen(true)}}> + + + + 닉네임 + + + + + {/*3번째 */} + +
+ {pin3 ? ( + + ) : + ( + + )} +
+ {setIsModalOpen(true)}}> + + + + 닉네임 + + + + + {/*4번째 */} + +
+ {pin4 ? ( + + ) : + ( + + )} +
+ {setIsModalOpen(true)}}> + + + + 닉네임 + + + + + {/*5번째 */} + +
+ {pin5 ? ( + + ) : + ( + + )} +
+ {setIsModalOpen(true)}}> + + + + 닉네임 + + + + + {/*6번째 */} + +
+ {pin6 ? ( + + ) : + ( + + )} +
+ {setIsModalOpen(true)}}> + + + + 닉네임 + + + + + {/*7번째 */} + +
+ {pin7 ? ( + + ) : + ( + + )} +
+ {setIsModalOpen(true)}}> + + + + 닉네임 + + + + + {/*8번째 */} + +
+ {pin8 ? ( + + ) : + ( + + )} +
+ {setIsModalOpen(true)}}> + + + + 닉네임 + + + + + + + + + + setIsModalOpen(false)} /> + + + + + + + + + + +
); diff --git a/front-end/src/components/MyLetterbox/Check2.jsx b/front-end/src/components/MyLetterbox/Check2.jsx index 4047492..582e6cc 100644 --- a/front-end/src/components/MyLetterbox/Check2.jsx +++ b/front-end/src/components/MyLetterbox/Check2.jsx @@ -1,13 +1,215 @@ import React from "react"; -import Header from '../Header/Header'; +import styled from 'styled-components'; +import { useNavigate } from "react-router-dom"; +//import Header from '../Header/Header'; + + +const RightContainer = styled.div` + width: 578px; + height: 420px; + margin: 149px 0 0 28px; +`; + +//흰 편지지 +const WhiteLetterContainer = styled.div` + background-image: url("/images/흰편지지.svg"); + background-size: cover; + width: 578px; + height: 346px; + overflow: auto; //자식 마진 탑 오류 때문에 오토처리 +`; + +const ContentContainer = styled.div` + width: 528px; + height: 288px; + margin: 30px 25px 28px 25px; // 탑 에러나서 부모에 오토처리 +`; + +//답장하기 버튼 +const AnswerButton = styled.div` + width: 174px; + height: 42px; + border-radius: 10px; + background: var(--Red-Light, #C90000); + margin: 32px 0 0 0; + float: right; //오른쪽 정렬 + cursor: pointer; + + //버튼 안의 글자 정렬 + display: flex; + justify-content: center; + align-items: center; +`; + +const AnswerText = styled.div` + color: #FFF; + font-family: 'Pretendard'; + font-size: 18px; + font-style: normal; + font-weight: 500; + line-height: normal; +`; + +//닉네임에게 +const ToContainer = styled.div` + width: 62px; + height: 14px; + display: flex; +`; + +//'닉네임'(나) +const ToMyNickname = styled.div` + color: #000; + font-family: 'Pretendard'; + font-size: 14px; + font-style: normal; + font-weight: 500; + line-height: 100%; /* 14px */ + letter-spacing: 0.28px; +`; + +//에게 +const To = styled.div` + color: #000; + font-family: 'Pretendard'; + font-size: 14px; + font-style: normal; + font-weight: 500; + line-height: 100%; /* 14px */ + letter-spacing: 0.28px; +`; + +/*const WrapStamp = styled.div` + //display: inline-flex; + //float: right; +`;*/ + +const Content = styled.div` + width: 528px; + height: 196px; + color: #000; + margin-top: 24px; + font-family: 'Gowun Dodum'; + font-size: 14px; + font-style: normal; + font-weight: 400; + line-height: 200%; /* 28px */ + letter-spacing: -0.14px; + word-break: break-all; + //float: right; +`; + +const Stamp = styled.div` + //shape-outside: url("/images/우표.svg"); + background-image: url("/images/우표.svg"); + float: right; + width: 84px; + height: 112px; + + position: absolute; //우표가 내용위로 겹치게 + right: 53px; + top: 179px; +`; + +/*const Stamp = styled.img.attrs({ + src: "/images/우표.svg", + alt: "우표임", + })` + + width: 84px; + height: 112px; + flex-direction: column; + align-items: center; + position: absolute; //우표가 내용위로 겹치게 + //right: 53px; + //top: 179px; +`;*/ + +//닉네임이 +const FromContainer = styled.div` + width: 50px; + height: 14px; + margin: 33px 0 0 478px; + display: flex; +`; + +//'닉네임'(다른 사용자) +const FromNickname = styled.div` + color: #000; + font-family: 'Pretendard'; + font-size: 14px; + font-style: normal; + font-weight: 500; + line-height: 100%; /* 14px */ + letter-spacing: 0.28px; +`; + +//이 +const From = styled.div` + color: #000; + font-family: 'Pretendard'; + font-size: 14px; + font-style: normal; + font-weight: 500; + line-height: 100%; /* 14px */ + letter-spacing: 0.28px; +`; -const Check2 = () => { +export default function Check2({ isOpen, onClose }) { + + const navigate = useNavigate(); + + const navigateToAnswer1 = () => { + navigate("/Answer1"); + }; + + if (!isOpen) { + return null; + } + return (
-
- check2page + + + + + + + 닉네임 + + + 에게 + + + + {/**/} + + 편지는 익명으로 작성돼요. 편지는 익명으로 작성돼요. 편지는 익명 으로 작성 돼요. 편지는 익명으로 작성돼요. 편지는 익명으로 작성돼 요. 편지는 익명으로 작성돼요. 편지는 익명으로 작성돼요. 편지는 익명으로 작성돼요. 편지는 익 명으로 작성돼요. 편지는 익명으로 작성돼요. 편지는 익명으로 작성돼요. 편지는 익명으로 작성돼요.편지는 익명으로 작성돼요. 편지는 익명으로 작성돼요. 편지는 익명으로 작성돼요. 편지는 익명으로 작성돼요. 편지는 익명으로 작성돼요. 편지는 익명으로 작성돼요. 편지는 익명으로 작성돼요. 편지는 익명으로 작성돼요. + + + + {/**/} + + + + 닉네임 + + + 이 + + + + + + + + + 답장하기 + + + +
); -}; - -export default Check2; \ No newline at end of file + +} \ No newline at end of file