-
-
-
-
-
-
+
{/* 이미지 배열을 map 함수를 사용하여 렌더링 */}
- {photoArray.map((photo, index) => (
+ {getPhotos.map((photo, index) => (
diff --git a/src/pages/Photobook/PhotoSelect.module.scss b/src/pages/Photobook/PhotoSelect.module.scss
index 8d01431..4cc13f7 100644
--- a/src/pages/Photobook/PhotoSelect.module.scss
+++ b/src/pages/Photobook/PhotoSelect.module.scss
@@ -6,49 +6,25 @@
.header {
width: 100vw;
- height: 125px;
+ height: 12vh;
display: flex;
- flex-direction: column;
+ align-items: center;
+ justify-content: center;
background-color: white;
- .header1 {
- height: 30px;
- display: flex;
- align-items: center;
- justify-content: flex-end;
- border-bottom: 1.5px solid rgba(0, 0, 0, 0.06);
- button {
- margin-right: 18px;
- width: 45px;
- height: 24px;
- border: none;
- border-radius: 19px;
- background-color: #f7f8f8;
- color: #009eff;
- text-align: center;
- font-size: 12px;
- font-weight: 400;
- cursor: pointer;
- }
- }
- .header2 {
- height: 85px;
- display: flex;
- align-items: center;
- justify-content: center;
- button {
- height: 50px;
- width: 340px;
- border-radius: 10px;
- border: 1px solid #009eff;
- color: #009eff;
- text-align: center;
- font-size: 14px;
- font-weight: 500;
- background-color: white;
- &:hover {
- background-color: #009eff;
- color: white;
- }
+ margin-top: 44px;
+ button {
+ height: 50px;
+ width: 340px;
+ border-radius: 10px;
+ border: 1px solid #009eff;
+ color: #009eff;
+ text-align: center;
+ font-size: 14px;
+ font-weight: 500;
+ background-color: white;
+ &:hover {
+ background-color: #009eff;
+ color: white;
}
}
}
@@ -59,6 +35,7 @@
display: flex;
justify-content: center;
.boxWrapper {
+ position: relative;
width: 340px;
min-height: 673px;
display: grid;
@@ -67,25 +44,40 @@
grid-gap: 20px; /* 각 요소 사이의 간격 설정 */
}
.photoBox {
+ position: relative;
width: 160px;
height: 160px;
background-color: #f7f7f7;
img {
+ position: absolute;
+ z-index: 1;
height: 160px;
+ left: 26.22px;
width: auto;
}
- .selectedPhoto {
+ .selectBox {
position: absolute;
z-index: 5;
width: 160px;
height: 160px;
- background-color: rgba(0, 0, 0, 0.1);
- }
- &:hover {
- border: 2px solid #009eff; // 마우스 호버 시 테두리 스타일
- }
- &.selectedPhoto {
- border: 2px solid #009eff; // 선택된 PhotoBox에 테두리 스타일
+ background-color: rgba(255, 255, 255, 0.4);
+ border: 2.5px solid #009eff;
+ box-sizing: border-box;
+ display: flex;
+ flex-direction: row-reverse;
+ .selectNumber {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 32px;
+ height: 32px;
+ color: white;
+ font-size: 14px;
+ font-weight: 600;
+ background-color: #009eff;
+ border-radius: 40px;
+ margin: 8px;
+ }
}
}
}
diff --git a/src/pages/Photobook/Photobook.jsx b/src/pages/Photobook/Photobook.jsx
index aeba4dc..2b67d02 100644
--- a/src/pages/Photobook/Photobook.jsx
+++ b/src/pages/Photobook/Photobook.jsx
@@ -1,8 +1,11 @@
-import { useState } from "react";
+import { useEffect, useState, useRef } from "react";
+import { useSprings, useSpring, animated } from "@react-spring/web";
+import useMeasure from "react-use-measure";
+import { useDrag } from "react-use-gesture";
+import clamp from "lodash/clamp";
import styles from "./Photobook.module.scss";
-import memoIcon from "../../img/icon-memo.png";
+// import memoIcon from "../../img/icon-memo.png";
import shareIcon from "../../img/icon-share.png";
-import photo9 from "../../img/photo9.png";
import navBottom from "../../img/nav-bottom.png";
import memoModal from "../../img/memo-modal.png";
import emoji1 from "../../img/emoji1.png";
@@ -20,108 +23,242 @@ import memopic2 from "../../img/memopic2.png";
import memopic3 from "../../img/memopic3.png";
import memopic4 from "../../img/memopic4.png";
import memopic5 from "../../img/memopic5.png";
+import useAxios from "../../apis/axiosWithToken";
export default function Photobook() {
- const [modal, setModal] = useState(0);
+ {/* 포토북 UI 시작 */}
+ const index = useRef(0);
+ const [ref, { width }] = useMeasure();
+ const [photos, setPhotos] = useState([]);
+ const [activeDot, setActiveDot] = useState(0);
+ const [props, api] = useSprings(
+ photos.length,
+ (i) => ({
+ x: i * width,
+ scale: width === 0 ? 0 : 1,
+ display: "block",
+ }),
+ [width]
+ );
+ const bind = useDrag(
+ ({ active, movement: [mx], direction: [xDir], distance, cancel }) => {
+ if (active && distance > width / 2) {
+ setActiveDot(null);
+ index.current = clamp(
+ index.current + (xDir > 0 ? -1 : 1),
+ 0,
+ photos.length - 1
+ );
+ cancel();
+ }
+ api.start((i) => {
+ if (i < index.current - 1 || i > index.current + 1)
+ return { display: "none" };
+ const x = (i - index.current) * width + (active ? mx : 0);
+ const scale = active ? 1 - distance / width / 2 : 1;
+ return { x, scale, display: "block" };
+ });
+
+ // 스크롤에 따른 활성화를 유지
+ // setActiveDot(clamp(Math.round(index.current), 0, photos.length - 1));
+ // 클릭한 동그라미가 있다면 스크롤로 인한 활성화를 무시하고 클릭한 동그라미를 유지
+ const activeDotIndex = clamp(
+ Math.round(index.current),
+ 0,
+ photos.length - 1
+ );
+ setActiveDot(activeDotIndex);
+ // console.log("스크롤 점 인덱스: ", activeDotIndex);
+ }
+ );
+ // 동그라미를 클릭했을 때 해당 사진으로 이동하는 함수
+ const handleDotClick = (dotIndex) => {
+ index.current = dotIndex;
+ api.start((i) => {
+ if (i < index.current - 1 || i > index.current + 1)
+ return { display: "none" };
+ const x = (i - index.current) * width;
+ return { x, scale: 1, display: "block" };
+ });
+ setActiveDot(null); // 클릭한 동그라미를 활성화 상태로 설정
+ };
+ {/* 포토북 UI 마침 */}
+
+ const axios = useAxios();
+ const [modal, setModal] = useState(0);
const [selectedEmoji, setSelectedEmoji] = useState(null);
+ const [uuid, setUuid] = useState(null);
+ const [isEmojiBoxVisible, setIsEmojiBoxVisible] = useState(false);
- const emojiArray = [emoji1, emoji2, emoji3, emoji4, emoji5];
-
- const emojiArray2 = [emoji01, emoji02, emoji03, emoji04, emoji05];
+ const emojiArray = [emoji1, emoji2, emoji3, emoji4, emoji5];
+ const emojiArray2 = [emoji01, emoji02, emoji03, emoji04, emoji05];
+ const memopicArray = [memopic1, memopic2, memopic3, memopic4, memopic5];
- const selectEmoji = (index) => {
- // 이미 선택된 emoji가 있다면 선택 취소
- if (selectedEmoji === index) {
- setSelectedEmoji(null);
- } else {
- // 선택된 emoji가 없거나 다른 emoji를 선택한 경우 크기 조절
- setSelectedEmoji(index);
- }
+ useEffect(() => {
+ axios
+ .get("/photoBook") // 인스턴스로 axios 요청 보내기
+ .then((response) => {
+ console.log(response.data);
+ setPhotos(response.data.photoList);
+ setUuid(response.data.uuid);
+ })
+ .catch((error) => console.error(error));
+ });
+
+ const selectEmoji = (index) => {
+ setSelectedEmoji(index);
+ // // 이미 선택된 emoji가 있다면 선택 취소
+ // if (selectedEmoji !== null && selectedEmoji === index) {
+ // // 이미 선택된 경우에는 아무 동작도 하지 않음
+ // return;
+ // } else {
+ // // 선택된 emoji가 없거나 다른 emoji를 선택한 경우 크기 조절
+ // setSelectedEmoji(index);
+ // }
};
- const saveMemo = () => {
-
- }
+ // const toggleEmojiBox = () => {
+ // setIsEmojiBoxVisible(!isEmojiBoxVisible);
+ // };
+
+ // 이모지 박스 애니메이션 스타일 설정
+ const emojiBoxSpring = useSpring({
+ opacity: isEmojiBoxVisible ? 1 : 0,
+ transform: `translateY(${isEmojiBoxVisible ? 0 : 100}%)`,
+ config: { tension: 200, friction: 20, mass: 1, duration: 100 },
+ });
+
+ const shareLink = () => {
+ // 현재 경로에 uuid를 붙여서 공유할 링크 생성
+ const shareableLink = `${window.location.href}/${uuid}`;
+
+ // 클립보드에 복사
+ navigator.clipboard
+ .writeText(shareableLink)
+ .then(() => {
+ console.log("링크가 클립보드에 복사되었습니다.");
+ })
+ .catch((err) => {
+ console.error("링크 복사 중 오류 발생:", err);
+ });
+ console.log("링크:", `${window.location.href}/${uuid}`);
+ // // 현재 주소에 uuid 파라미터 추가
+ // const currentUrl = new URL(window.location.href);
+ // currentUrl.searchParams.set('uuid', 'YOUR_UUID'); // 여기에 받아온 uuid 변수를 넣어주세요
+ // navigator.clipboard.writeText(currentUrl.href)
+ // .then(() => {
+ // alert('링크가 복사되었습니다.');
+ // })
+ // .catch((error) => {
+ // console.error('링크 복사 중 오류 발생:', error);
+ // });
+ };
+
+ const saveMemo = () => {};
return (
- handlePhotoClick(index)}
+ className={styles.photoBox}
>
+ {selectedPhotos.includes(index) && (
+
))}
+
+ )}
+ {selectedPhotos.indexOf(index) + 1}
+
+
-
+ {emojiArray.map((emoji, index) => (
+ 
{
+ selectEmoji(index);
+ }}
+ />
+ ))}
+
+ )}
+
);
-}
\ No newline at end of file
+}
diff --git a/src/pages/Photobook/Photobook.module.scss b/src/pages/Photobook/Photobook.module.scss
index e6b443c..72b1cda 100644
--- a/src/pages/Photobook/Photobook.module.scss
+++ b/src/pages/Photobook/Photobook.module.scss
@@ -1,20 +1,93 @@
+*,
+*:after,
+*:before {
+ box-sizing: border-box;
+}
+
.wrapper {
width: 100vw;
height: 100vh;
- overflow-x: hidden;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+}
+
+.photosWrapper {
+ width: 100vw;
+ height: 56vh;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ position: relative;
+}
+
+.photos {
+ position: absolute;
+ width: 290px;
+ height: 431.4px;
+ will-change: transform;
+ .photo {
+ position: absolute;
+ z-index: 2;
+ touch-action: none;
+ background-size: cover;
+ background-repeat: no-repeat;
+ background-position: center center;
+ width: 290px;
+ height: 430px;
+ margin-top: -12px;
+ will-change: transform;
+ box-shadow:
+ 0 62.5px 125px -25px rgba(50, 50, 73, 0.5),
+ 0 37.5px 75px -37.5px rgba(0, 0, 0, 0.6);
+ }
+ .memopic {
+ position: absolute;
+ z-index: 12;
+ width: 60px;
+ height: 60px;
+ }
+}
+
+.dotsWrapper {
+ position: absolute;
+ bottom: 6px;
+ left: 50%;
+ transform: translateX(-50%);
+ display: flex;
+ align-items: center;
+}
+
+.dot {
+ width: 10px;
+ height: 10px;
+ background-color: #ccc;
+ border-radius: 50%;
+ margin: 0 5px;
+ cursor: pointer;
+ transition: background-color 0.3s ease;
+
+ &:hover {
+ background-color: #555;
+ }
+}
+
+.activeDot {
+ background-color: #555;
}
.section1 {
width: 100vw;
height: 12vh;
display: flex;
- flex-direction: column;
+ flex-direction: row;
align-items: flex-start;
justify-content: flex-start;
background-color: white;
border-bottom: 1.5px solid rgba(0, 0, 0, 0.06);
p {
- font-family: Pretendard;
+ font-family: Pretendard;
margin-left: 18px;
margin-top: 22px;
font-size: 18px;
@@ -25,24 +98,25 @@
}
.section2 {
+ width: 100%;
height: 58vh;
+ overflow-x: auto;
background-color: #DCF2FF;
- img {
- height: 58vh;
- width: auto;
- }
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ overflow: hidden;
+ position: relative;
}
.section3 {
+ position: relative;
height: 21vh;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
background-color: white;
- :nth-child(1) {
- margin-right: 72px;
- }
.buttonBox {
width: 72px;
height: 89px;
@@ -114,14 +188,6 @@
flex-direction: column;
align-items: center;
justify-content: space-between;
- .emojiBox {
- width: 66vw;
- display: flex;
- flex-direction: row;
- align-items: center;
- justify-content: space-between;
- margin-top: -20px;
- }
textarea {
width: 66%;
height: 43%;
@@ -179,3 +245,21 @@
.modalBG0 {
display: none;
}
+
+.emojiBox {
+ position: absolute;
+ z-index: 10;
+ bottom: 31vh;
+ width: 80vw;
+ height: 72px;
+ padding: 0 22px;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: space-between;
+ border-radius: 70px;
+ background-color: white;
+ opacity: 0;
+ transform: translateY(20px);
+ transition: opacity 0.5s ease, transform 0.5s ease;
+}
\ No newline at end of file
diff --git a/src/pages/Photobook/PhotobookUuid.jsx b/src/pages/Photobook/PhotobookUuid.jsx
new file mode 100644
index 0000000..537c58f
--- /dev/null
+++ b/src/pages/Photobook/PhotobookUuid.jsx
@@ -0,0 +1,260 @@
+import { useEffect, useState, useRef } from "react";
+import { useSprings, useSpring, animated } from "@react-spring/web";
+import useMeasure from "react-use-measure";
+import { useDrag } from "react-use-gesture";
+import { useParams } from "react-router-dom";
+import clamp from "lodash/clamp";
+import styles from "./Photobook.module.scss";
+import memoIcon from "../../img/icon-memo.png";
+// import shareIcon from "../../img/icon-share.png";
+import navBottom from "../../img/nav-bottom.png";
+import memoModal from "../../img/memo-modal.png";
+import emoji1 from "../../img/emoji1.png";
+import emoji2 from "../../img/emoji2.png";
+import emoji3 from "../../img/emoji3.png";
+import emoji4 from "../../img/emoji4.png";
+import emoji5 from "../../img/emoji5.png";
+import emoji01 from "../../img/emoji-1.png";
+import emoji02 from "../../img/emoji-2.png";
+import emoji03 from "../../img/emoji-3.png";
+import emoji04 from "../../img/emoji-4.png";
+import emoji05 from "../../img/emoji-5.png";
+import memopic1 from "../../img/memopic1.png";
+import memopic2 from "../../img/memopic2.png";
+import memopic3 from "../../img/memopic3.png";
+import memopic4 from "../../img/memopic4.png";
+import memopic5 from "../../img/memopic5.png";
+import useAxios from "../../apis/axiosWithToken";
+
+export default function Photobook() {
+ {/* 포토북 UI 시작 */}
+ const index = useRef(0);
+ const [ref, { width }] = useMeasure();
+ const [photos, setPhotos] = useState([]);
+ const [activeDot, setActiveDot] = useState(0);
+ const [props, api] = useSprings(
+ photos.length,
+ (i) => ({
+ x: i * width,
+ scale: width === 0 ? 0 : 1,
+ display: "block",
+ }),
+ [width]
+ );
+ const bind = useDrag(
+ ({ active, movement: [mx], direction: [xDir], distance, cancel }) => {
+ if (active && distance > width / 2) {
+ setActiveDot(null);
+ index.current = clamp(
+ index.current + (xDir > 0 ? -1 : 1),
+ 0,
+ photos.length - 1
+ );
+ cancel();
+ }
+ api.start((i) => {
+ if (i < index.current - 1 || i > index.current + 1)
+ return { display: "none" };
+ const x = (i - index.current) * width + (active ? mx : 0);
+ const scale = active ? 1 - distance / width / 2 : 1;
+ return { x, scale, display: "block" };
+ });
+
+ // 스크롤에 따른 활성화를 유지
+ // setActiveDot(clamp(Math.round(index.current), 0, photos.length - 1));
+ // 클릭한 동그라미가 있다면 스크롤로 인한 활성화를 무시하고 클릭한 동그라미를 유지
+ const activeDotIndex = clamp(
+ Math.round(index.current),
+ 0,
+ photos.length - 1
+ );
+ setActiveDot(activeDotIndex);
+ // console.log("스크롤 점 인덱스: ", activeDotIndex);
+ }
+ );
+ // 동그라미를 클릭했을 때 해당 사진으로 이동하는 함수
+ const handleDotClick = (dotIndex) => {
+ index.current = dotIndex;
+ api.start((i) => {
+ if (i < index.current - 1 || i > index.current + 1)
+ return { display: "none" };
+ const x = (i - index.current) * width;
+ return { x, scale: 1, display: "block" };
+ });
+ setActiveDot(null); // 클릭한 동그라미를 활성화 상태로 설정
+ };
+ {/* 포토북 UI 마침 */}
+
+ const axios = useAxios();
+ const [modal, setModal] = useState(0);
+ const [selectedEmoji, setSelectedEmoji] = useState(null);
+ const [uuidData, setUuidData] = useState(null);
+ const [isEmojiBoxVisible, setIsEmojiBoxVisible] = useState(false);
+ const { uuid } = useParams();
+
+ const emojiArray = [emoji1, emoji2, emoji3, emoji4, emoji5];
+ const emojiArray2 = [emoji01, emoji02, emoji03, emoji04, emoji05];
+ const memopicArray = [memopic1, memopic2, memopic3, memopic4, memopic5];
+
+ useEffect(() => {
+ axios
+ .get(`/photoBook/${uuid}`) // 인스턴스로 axios 요청 보내기
+ .then((response) => {
+ console.log(response.data);
+ setPhotos(response.data.photoList);
+ setUuidData(response.data.uuid);
+ })
+ .catch((error) => console.error(error));
+ }, [uuid]);
+
+ const selectEmoji = (index) => {
+ setSelectedEmoji(index);
+ // // 이미 선택된 emoji가 있다면 선택 취소
+ // if (selectedEmoji !== null && selectedEmoji === index) {
+ // // 이미 선택된 경우에는 아무 동작도 하지 않음
+ // return;
+ // } else {
+ // // 선택된 emoji가 없거나 다른 emoji를 선택한 경우 크기 조절
+ // setSelectedEmoji(index);
+ // }
+ };
+
+ const toggleEmojiBox = () => {
+ setIsEmojiBoxVisible(!isEmojiBoxVisible);
+ };
+
+ // 이모지 박스 애니메이션 스타일 설정
+ const emojiBoxSpring = useSpring({
+ opacity: isEmojiBoxVisible ? 1 : 0,
+ transform: `translateY(${isEmojiBoxVisible ? 0 : 100}%)`,
+ config: { tension: 200, friction: 20, mass: 1, duration: 100 },
+ });
+
+ // const shareLink = () => {
+ // // 현재 경로에 uuid를 붙여서 공유할 링크 생성
+ // const shareableLink = `${window.location.href}/${uuidData}`;
+
+ // // 클립보드에 복사
+ // navigator.clipboard
+ // .writeText(shareableLink)
+ // .then(() => {
+ // console.log("링크가 클립보드에 복사되었습니다.");
+ // })
+ // .catch((err) => {
+ // console.error("링크 복사 중 오류 발생:", err);
+ // });
+ // console.log("링크:", `${window.location.href}/${uuidData}`);
+ // // // 현재 주소에 uuid 파라미터 추가
+ // // const currentUrl = new URL(window.location.href);
+ // // currentUrl.searchParams.set('uuid', 'YOUR_UUID'); // 여기에 받아온 uuid 변수를 넣어주세요
+ // // navigator.clipboard.writeText(currentUrl.href)
+ // // .then(() => {
+ // // alert('링크가 복사되었습니다.');
+ // // })
+ // // .catch((error) => {
+ // // console.error('링크 복사 중 오류 발생:', error);
+ // // });
+ // };
+
+ const saveMemo = () => {};
+
+ return (
+
-
- '이름'님의 소중한 추억들입니다
-
스티커와 쪽지를 선물해 주세요~
- 
-
-
-
-
-
-
- 링크 공유하기
-
-
-
- 쪽지 입력하기
-
- 
-
- {/* 모달 */}
-
- 
-
+
-
+ {/*
- {emojiArray.map((emoji, index) => (
- ![]()
+
+
+
+
+ '이름'님의 소중한 추억들입니다
+
+ 스티커와 쪽지를 선물해 주세요~
+
+
+ ))}
+
+ {props.map(({ x, display, scale }, i) => (
+
+ setModal(1)}
+ />
+ )}
+
+ ))}
+
-
+ {/* 사진 갯수만큼 동그라미 렌더링 */}
+ {photos.map((_, dotIndex) => (
+
- selectEmoji(index)}
+ onClick={() => handleDotClick(dotIndex)}
/>
- ))}
-
-
-
- setModal(0)}
- >
-
-
+
+
+
+
+ {/* 링크 공유하기
+
+
+
*/}
+ 쪽지 입력하기
+
+
+
+ {/* 모달 */}
+
+
+
+
+
+
+
+ setModal(0)}
+ >
+ {/* 이모지 박스 */}
+ {isEmojiBoxVisible && (
+
+
+
+
+ '이름'님의 소중한 추억들입니다
+
+ 스티커와 쪽지를 선물해 주세요~
+
+
+ {emojiArray.map((emoji, index) => (
+ {
+ selectEmoji(index);
+ }}
+ />
+ ))}
+
+ )}
+
+ );
+}
diff --git a/src/pages/Photobook/PhotobookUuid.module.scss b/src/pages/Photobook/PhotobookUuid.module.scss
new file mode 100644
index 0000000..8536dfb
--- /dev/null
+++ b/src/pages/Photobook/PhotobookUuid.module.scss
@@ -0,0 +1,265 @@
+*,
+*:after,
+*:before {
+ box-sizing: border-box;
+}
+
+.wrapper {
+ width: 100vw;
+ height: 100vh;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+}
+
+.photosWrapper {
+ width: 100vw;
+ height: 56vh;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ position: relative;
+}
+
+.photos {
+ position: absolute;
+ width: 290px;
+ height: 431.4px;
+ will-change: transform;
+ .photo {
+ position: absolute;
+ z-index: 2;
+ touch-action: none;
+ background-size: cover;
+ background-repeat: no-repeat;
+ background-position: center center;
+ width: 290px;
+ height: 430px;
+ margin-top: -12px;
+ will-change: transform;
+ box-shadow:
+ 0 62.5px 125px -25px rgba(50, 50, 73, 0.5),
+ 0 37.5px 75px -37.5px rgba(0, 0, 0, 0.6);
+ }
+ .memopic {
+ position: absolute;
+ z-index: 12;
+ width: 60px;
+ height: 60px;
+ }
+}
+
+.dotsWrapper {
+ position: absolute;
+ bottom: 6px;
+ left: 50%;
+ transform: translateX(-50%);
+ display: flex;
+ align-items: center;
+}
+
+.dot {
+ width: 10px;
+ height: 10px;
+ background-color: #ccc;
+ border-radius: 50%;
+ margin: 0 5px;
+ cursor: pointer;
+ transition: background-color 0.3s ease;
+
+ &:hover {
+ background-color: #555;
+ }
+}
+
+.activeDot {
+ background-color: #555;
+}
+
+.section1 {
+ width: 100vw;
+ height: 12vh;
+ display: flex;
+ flex-direction: row;
+ align-items: flex-start;
+ justify-content: flex-start;
+ background-color: white;
+ border-bottom: 1.5px solid rgba(0, 0, 0, 0.06);
+ p {
+ font-family: Pretendard;
+ margin-left: 18px;
+ margin-top: 22px;
+ font-size: 18px;
+ font-weight: 600;
+ line-height: normal;
+ text-align: start;
+ }
+}
+
+.section2 {
+ width: 100%;
+ height: 58vh;
+ overflow-x: auto;
+ background-color: #DCF2FF;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ overflow: hidden;
+ position: relative;
+}
+
+.section3 {
+ position: relative;
+ height: 21vh;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: center;
+ background-color: white;
+ .buttonBox {
+ width: 72px;
+ height: 89px;
+ display: flex;
+ flex-direction: column;
+ button {
+ width: 72px;
+ height: 72px;
+ border-radius: 15px;
+ background: #F7F7F7;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border: none;
+ img {
+ width: 72px;
+ height: 72px;
+ margin: 0;
+ }
+ }
+ p {
+ color: #009EFF;
+ text-align: center;
+ font-family: Pretendard;
+ font-size: 10px;
+ font-weight: 700;
+ line-height: normal;
+ }
+ }
+}
+
+.navBottom {
+ width: 100vw;
+ img {
+ width: 100vw;
+ }
+}
+
+.modal0 {
+ display: none;
+}
+.modal1 {
+ animation: fadeIn ease-in-out 1s;
+ position: absolute;
+ // box-shadow: 2px 4px 12px #cacaca;
+ z-index: 2;
+ width: 344px;
+ height: 234px;
+ top: 33vh;
+ left: 6vw;
+ background-color: url('../../img/memo-modal.png');
+ background-size: cover; /* 이미지를 화면에 꽉 채우도록 조정 */
+ background-position: center; /* 이미지를 가운데 정렬 */
+ background-repeat: no-repeat; /* 이미지 반복 방지 */
+ .memoModal {
+ width: 88vw;
+ height: auto;
+ position: absolute;
+ z-index: 3;
+ top: 0;
+ left: 0;
+ }
+ .modalBox {
+ width: 88vw;
+ height: 28vh;
+ position: absolute;
+ z-index: 4;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: space-between;
+ textarea {
+ width: 66%;
+ height: 43%;
+ padding: 10px;
+ margin-top: 0px;
+ color: #000;
+ text-align: center;
+ font-family: "SUIT Variable", -apple-system, BlinkMacSystemFont, Pretendard, "Segoe UI", Roboto, Oxygen,
+ Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+ font-size: 16px;
+ font-weight: 400;
+ line-height: normal;
+ outline: none;
+ border: none;
+ border-radius: 14px;
+ white-space: pre-wrap;
+ background-color: #f8f8f8;
+ resize: none;
+ &:focus {
+ border: 1px solid #009EFF;
+ }
+ }
+ .saveBtn {
+ width: 45px;
+ height: 24px;
+ font-size: 18px;
+ margin-bottom: 24px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: white;
+ background-color: #009EFF;
+ border: none;
+ border-radius: 19px;
+ cursor: pointer;
+ text-align: center;
+ font-family: Pretendard;
+ font-size: 12px;
+ font-weight: 400;
+ }
+ }
+}
+
+.modalBG1 {
+ animation: fadeIn2 ease-in-out 1s;
+ z-index: 1;
+ width: 100vw;
+ height: 1100vh;
+ position: absolute;
+ background-color: rgba(0, 40, 64, 0.60);
+ // opacity: 40%;
+ top: 0px;
+ left: 0px;
+}
+.modalBG0 {
+ display: none;
+}
+
+.emojiBox {
+ position: absolute;
+ z-index: 10;
+ bottom: 5px;
+ width: 80vw;
+ height: 72px;
+ padding: 0 22px;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: space-between;
+ border-radius: 70px;
+ background-color: white;
+ opacity: 0;
+ transform: translateY(20px);
+ transition: opacity 0.5s ease, transform 0.5s ease;
+}
\ No newline at end of file
+ {props.map(({ x, display, scale }, i) => (
+
+ setModal(1)}
+ />
+ )}
+
+ ))}
+
+
+ {/* 사진 갯수만큼 동그라미 렌더링 */}
+ {photos.map((_, dotIndex) => (
+
+ {/* handleDotClick(dotIndex)}
+ />
+ ))}
+
+
+
+
+
+
+ 쪽지 입력하기
+
+
+
+ {/* 모달 */}
+
+
+
+
+
+
+
+ setModal(0)}
+ >
+ {/* 이모지 박스 */}
+ {isEmojiBoxVisible && (
+