From 922336bb7955b2abf0ae376fe91610bcab89cb21 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=95=88=ED=98=9C=EC=97=B0?= Date: Tue, 23 Jan 2024 16:33:47 +0900 Subject: [PATCH 01/15] =?UTF-8?q?docs:=20=EB=82=B4=20=EC=9A=B0=ED=8E=B8?= =?UTF-8?q?=ED=95=A8=20=EC=9D=B4=EB=A6=84=20=ED=8E=B8=EC=A7=91=EB=AA=A8?= =?UTF-8?q?=EB=93=9C=20=EC=8A=A4=ED=83=80=EC=9D=BC=20=EC=B6=94=EA=B0=80=20?= =?UTF-8?q?=EC=9E=91=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...4\353\243\214\353\262\204\355\212\274.svg" | 9 ++ front-end/src/components/MyLetterbox/Info.jsx | 134 ++++++++++++------ 2 files changed, 99 insertions(+), 44 deletions(-) create mode 100644 "front-end/src/assets/img/\355\216\270\354\247\221\354\231\204\353\243\214\353\262\204\355\212\274.svg" diff --git "a/front-end/src/assets/img/\355\216\270\354\247\221\354\231\204\353\243\214\353\262\204\355\212\274.svg" "b/front-end/src/assets/img/\355\216\270\354\247\221\354\231\204\353\243\214\353\262\204\355\212\274.svg" new file mode 100644 index 0000000..9203309 --- /dev/null +++ "b/front-end/src/assets/img/\355\216\270\354\247\221\354\231\204\353\243\214\353\262\204\355\212\274.svg" @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/front-end/src/components/MyLetterbox/Info.jsx b/front-end/src/components/MyLetterbox/Info.jsx index 310890e..70e12bb 100644 --- a/front-end/src/components/MyLetterbox/Info.jsx +++ b/front-end/src/components/MyLetterbox/Info.jsx @@ -4,6 +4,7 @@ import InfoImage from '../../assets/img/Info.svg'; import Vector from '../../assets/img/Vector.svg'; import Under from '../../assets/img/Under.svg'; import X from '../../assets/img/X.svg'; +import EditCompleteButton from '../../assets/img/편집완료버튼.svg'; //모달창 열릴 때 백그라운드 블러 처리 const BackgroundBlur = styled.div` @@ -18,7 +19,7 @@ const BackgroundBlur = styled.div` background: rgba(0, 0, 0, 0.36); backdrop-filter: blur(7.10px); z-index: 1000; -` +`; //전체 모달 컨테이너 const ModalContainer = styled.div` @@ -70,7 +71,7 @@ const InfoImg = styled.img` left: 0; top: 3px; position: absolute; -` +`; const CloseButtonImg = styled.img` width: 18px; @@ -78,7 +79,8 @@ const CloseButtonImg = styled.img` left: 254.59px; top: 0; position: absolute; -` +`; + //내용 중 '우편함 닫기' const Container1 = styled.div` left: 44px; @@ -107,7 +109,7 @@ const Toggle = styled.div` position: absolute; background-color: ${({ isActive }) => (isActive ? '#C90000' : 'black')}; border-radius: 20px; -` +`; // isActive 상태에 따라 원의 위치가 변경 const ToggleCircle = styled.div` @@ -118,7 +120,7 @@ const ToggleCircle = styled.div` position: absolute; background: white; border-radius: 9999px; -` +`; // Tooltip 컴포넌트 생성 const Tooltip = styled.div` @@ -138,7 +140,8 @@ const Placeholder = styled.div` position: relative; background: black; border-radius: 50px; -` +`; + const Triangle = styled.div` width: 0; height: 0; @@ -147,7 +150,7 @@ const Triangle = styled.div` border-bottom: 10px solid black; // 세로 길이 position: relative; left: 19.91px; -` +`; const TooltipText = styled.div` width: 185px; @@ -219,7 +222,7 @@ const UnderImg = styled.img` right: 6.14px; bottom: 5px; left: 114px; -` +`; //드롭다운 내용 const OptionContainer = styled.div` @@ -276,7 +279,7 @@ const Container3 = styled.div` left: 44px; top: 178px; position: absolute; -` +`; const PeriodText = styled.div` width: 28px; @@ -289,7 +292,7 @@ const PeriodText = styled.div` font-family: Pretendard; font-weight: 500; word-wrap: break-word; -` +`; const DateRange = styled.div` width: 181px; @@ -303,14 +306,14 @@ const DateRange = styled.div` font-weight: 400; line-height: 15px; word-wrap: break-word; -` +`; //내용 중 '이름' const Container4 = styled.div` left: 44px; top: 121px; position: absolute; -` +`; const NameText = styled.div` width: 28px; @@ -323,15 +326,9 @@ const NameText = styled.div` font-family: Pretendard; font-weight: 500; word-wrap: break-word; -` -const NameContainer = styled.div` - width: 138px; - height: 16.24px; - left: 237px; - top: 0; - position: absolute; -` +`; +//편집 후 이름 const RealNameText = styled.div` left: 21px; top: 1px; @@ -342,15 +339,71 @@ const RealNameText = styled.div` font-weight: 400; line-height: 15px; word-wrap: break-word; -` +`; +//이름 편집 아이콘 const NameIconImg = styled.img` width: 14.23px; height: 16.24px; left: 0; top: 0; position: absolute; -` +`; + +//편집모드 +const NameContainer = styled.div` + width: 304px; + height: 24px; + left: 79px; + top: 0; + position: absolute; +`; + +const EditContainer = styled.div` + width: 273px; + height: 24px; + background: #E5E5E5; + justify-content: flex-start; + align-items: flex-start; + display: inline-flex; + position: relative; + top: -2px; +`; + +const EditInput = styled.input` + width: 224px; + height: 14px; + margin: 5px; + padding: 0; + color: #757575; + font-size: 14px; + font-family: Pretendard; + font-weight: 400; + word-wrap: break-word; + outline: none; + border: none; + background: #E5E5E5; +`; + +const AbsoluteText = styled.div` + left: 0; + top: 6px; + position: relative; + color: #757575; + font-size: 12px; + font-family: Pretendard; + font-weight: 400; + line-height: 12px; + word-wrap: break-word; +`; + +const EditCompleteButtonImg = styled.img` + width: 20px; + height: 20px; + position: absolute; + left: 278px; + top: 0; +`; export default function Info({ isOpen, onClose }) { @@ -460,36 +513,29 @@ export default function Info({ isOpen, onClose }) { 2024-01-04 ~ 2024-01-07 - {/* - - 이름 - - 23번째 생일 우편함 - - - - */} - 이름 {/* 편집 모드일 때는 텍스트 입력 필드를, 그렇지 않을 때는 일반 텍스트를 렌더링합니다. */} {isEditing ? ( - <> - - - +
+ + + (0/32) + + +
) : ( {mailboxName} )} - {/* 아이콘을 클릭하면 편집 모드로 전환합니다. */} - + {/* 아이콘을 클릭하면 편집 모드로 전환합니다. isEditing이 false일 때만 아이콘을 렌더링합니다. */} + {!isEditing && } {/* 에러 메시지가 있으면 이를 화면에 표시합니다. */} {errorMessage &&
{errorMessage}
} From ecd9727b608dc5c54136580b19ac8e2d08694a89 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=95=88=ED=98=9C=EC=97=B0?= Date: Tue, 23 Jan 2024 17:08:35 +0900 Subject: [PATCH 02/15] =?UTF-8?q?docs:=20=EB=82=B4=20=EC=9A=B0=ED=8E=B8?= =?UTF-8?q?=ED=95=A8=20=EC=9D=B4=EB=A6=84=20=ED=8E=B8=EC=A7=91=20=EC=99=84?= =?UTF-8?q?=EB=A3=8C=20=ED=9B=84=20=EC=95=84=EC=9D=B4=EC=BD=98=20=EC=9C=84?= =?UTF-8?q?=EC=B9=98=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- front-end/src/components/MyLetterbox/Info.jsx | 27 ++++++++++++------- 1 file changed, 17 insertions(+), 10 deletions(-) diff --git a/front-end/src/components/MyLetterbox/Info.jsx b/front-end/src/components/MyLetterbox/Info.jsx index 70e12bb..b5cbc39 100644 --- a/front-end/src/components/MyLetterbox/Info.jsx +++ b/front-end/src/components/MyLetterbox/Info.jsx @@ -68,8 +68,8 @@ const InfoTitle = styled.div` const InfoImg = styled.img` width: 20px; height: 20px; - left: 0; top: 3px; + left: 0; position: absolute; `; @@ -329,30 +329,35 @@ const NameText = styled.div` `; //편집 후 이름 +const NameWrapper = styled.div` + display: flex; + justify-content: flex-end; + width: 100%; + position: relative; +`; + const RealNameText = styled.div` - left: 21px; + right: 0; top: 1px; - position: absolute; color: black; font-size: 15px; font-family: Pretendard; font-weight: 400; line-height: 15px; word-wrap: break-word; + margin-left: 6.77px; `; //이름 편집 아이콘 const NameIconImg = styled.img` width: 14.23px; height: 16.24px; - left: 0; - top: 0; - position: absolute; + top: 1px; `; //편집모드 const NameContainer = styled.div` - width: 304px; + width: 298px; height: 24px; left: 79px; top: 0; @@ -532,10 +537,12 @@ export default function Info({ isOpen, onClose }) { ) : ( - {mailboxName} + + {/* 아이콘을 클릭하면 편집 모드로 전환합니다. isEditing이 false일 때만 아이콘을 렌더링합니다. */} + {!isEditing && } + {mailboxName} + )} - {/* 아이콘을 클릭하면 편집 모드로 전환합니다. isEditing이 false일 때만 아이콘을 렌더링합니다. */} - {!isEditing && } {/* 에러 메시지가 있으면 이를 화면에 표시합니다. */} {errorMessage &&
{errorMessage}
} From 5ae1216b9a9eb166af4ec95a601e74dd8d81bb07 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=95=88=ED=98=9C=EC=97=B0?= Date: Tue, 23 Jan 2024 17:55:40 +0900 Subject: [PATCH 03/15] =?UTF-8?q?docs:=20=EB=8A=90=EB=A6=B0=20=EC=9A=B0?= =?UTF-8?q?=ED=8E=B8=ED=95=A8=20=EB=AC=B8=EA=B5=AC=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../MyLetterbox/SlowLetterboxToday.jsx | 65 ++++++++++--------- 1 file changed, 36 insertions(+), 29 deletions(-) diff --git a/front-end/src/components/MyLetterbox/SlowLetterboxToday.jsx b/front-end/src/components/MyLetterbox/SlowLetterboxToday.jsx index bc4321e..83b9649 100644 --- a/front-end/src/components/MyLetterbox/SlowLetterboxToday.jsx +++ b/front-end/src/components/MyLetterbox/SlowLetterboxToday.jsx @@ -25,27 +25,29 @@ const Slow2Img = styled.img` width: 11px; height: 21.50px; position: absolute; - left: 60px; - top: 502.50px; + right: 0; + bottom: 0; `; -const SlowText = styled.div` +const TextDiv = styled.div` + position: absolute; width: 38px; - heigth: 438px; + height: 483px; + margin: 10px 11px 9.5px 11px; + display: flex; + flex-direction: column; + justify-content: space-between; +`; + +const Text40 = styled.span` color: black; font-size: 40px; font-family: 'Gowun Dodum'; font-weight: 400; word-wrap: break-word; - position: absolute; - left: 11px; - top: 10px; `; -const HappyText = styled.div` - position: absolute; - left: 567px; - top: 252px; +const Text20 = styled.span` color: black; font-size: 20px; font-family: 'Gowun Dodum'; @@ -53,21 +55,18 @@ const HappyText = styled.div` word-wrap: break-word; `; -const TextDiv = styled.div` +const HappyTextContainer = styled.div` + width: 466px; + height: 423px; position: absolute; - left: 11px; - top: 10px; -`; - -const Text40 = styled.span` - color: black; - font-size: 40px; - font-family: 'Gowun Dodum'; - font-weight: 400; - word-wrap: break-word; + left: 567px; + top: 252px; + display: flex; + flex-direction: column; + justify-content: space-between; `; -const Text20 = styled.span` +const HappyText = styled.div` color: black; font-size: 20px; font-family: 'Gowun Dodum'; @@ -75,10 +74,21 @@ const Text20 = styled.span` word-wrap: break-word; `; +function TextLines({ text }) { + const lines = text.split('\n'); // 텍스트를 줄바꿈 문자를 기준으로 분리합니다. - + return ( + + {lines.map((line, index) => ( + {line} + ))} + + ); +} export default function SlowLetterboxToday() { + const text = "오늘 하루 행복했나요?\n\n길을 걷다 내 취향인 카페를 발견한 것, \n눈물 날 만큼 재밌는 영화를 본 것, \n사랑하는 사람과 시간을 보낸 것,\n.\n.\n.\n당신의 행복한 순간을 기록해 주세요.\n낭만고양이가\n매일의 행복을 모아 올해의 마지막 주에 전달해 드릴게요.\n소소한 행복들이 쌓여 큰 행복으로 돌아올 거예요." + return (
@@ -89,14 +99,11 @@ export default function SlowLetterboxToday() { 느
리
ㅣ
ㄴ
- 우
편
 - 함 + 우
편
함 - - 오늘 하루 행복했나요?

길을 걷다 내 취향인 카페를 발견한 것,
눈물 날 만큼 재밌는 영화를 본 것,
사랑하는 사람과 시간을 보낸 것,
.
.
.
당신의 행복한 순간을 기록해 주세요.
낭만고양이가
매일의 행복을 모아 올해의 마지막 주에 전달해 드릴게요.
소소한 행복들이 쌓여 큰 행복으로 돌아올 거예요. - +
) } From 2451fb675c056ac038ba663b7fd07d907c57d08a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=95=88=ED=98=9C=EC=97=B0?= Date: Wed, 24 Jan 2024 01:41:59 +0900 Subject: [PATCH 04/15] =?UTF-8?q?docs:=20=EB=8A=90=EB=A6=B0=20=EC=9A=B0?= =?UTF-8?q?=ED=8E=B8=ED=95=A8=20=EA=B8=80=EA=B7=80=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...1\354\230\244\353\245\270\354\252\275.svg" | 3 + ...4\353\252\251\354\231\274\354\252\275.svg" | 3 + .../\353\260\234\354\236\220\352\265\255.svg" | 102 ++++++ .../MyLetterbox/SlowLetterboxToday.jsx | 328 ++++++++++++++++++ 4 files changed, 436 insertions(+) create mode 100644 "front-end/src/assets/img/\353\213\254\353\240\245\354\240\234\353\252\251\354\230\244\353\245\270\354\252\275.svg" create mode 100644 "front-end/src/assets/img/\353\213\254\353\240\245\354\240\234\353\252\251\354\231\274\354\252\275.svg" create mode 100644 "front-end/src/assets/img/\353\260\234\354\236\220\352\265\255.svg" diff --git "a/front-end/src/assets/img/\353\213\254\353\240\245\354\240\234\353\252\251\354\230\244\353\245\270\354\252\275.svg" "b/front-end/src/assets/img/\353\213\254\353\240\245\354\240\234\353\252\251\354\230\244\353\245\270\354\252\275.svg" new file mode 100644 index 0000000..f029135 --- /dev/null +++ "b/front-end/src/assets/img/\353\213\254\353\240\245\354\240\234\353\252\251\354\230\244\353\245\270\354\252\275.svg" @@ -0,0 +1,3 @@ + + + diff --git "a/front-end/src/assets/img/\353\213\254\353\240\245\354\240\234\353\252\251\354\231\274\354\252\275.svg" "b/front-end/src/assets/img/\353\213\254\353\240\245\354\240\234\353\252\251\354\231\274\354\252\275.svg" new file mode 100644 index 0000000..fe47238 --- /dev/null +++ "b/front-end/src/assets/img/\353\213\254\353\240\245\354\240\234\353\252\251\354\231\274\354\252\275.svg" @@ -0,0 +1,3 @@ + + + diff --git "a/front-end/src/assets/img/\353\260\234\354\236\220\352\265\255.svg" "b/front-end/src/assets/img/\353\260\234\354\236\220\352\265\255.svg" new file mode 100644 index 0000000..dcd0656 --- /dev/null +++ "b/front-end/src/assets/img/\353\260\234\354\236\220\352\265\255.svg" @@ -0,0 +1,102 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/front-end/src/components/MyLetterbox/SlowLetterboxToday.jsx b/front-end/src/components/MyLetterbox/SlowLetterboxToday.jsx index 83b9649..89d2c3a 100644 --- a/front-end/src/components/MyLetterbox/SlowLetterboxToday.jsx +++ b/front-end/src/components/MyLetterbox/SlowLetterboxToday.jsx @@ -4,6 +4,9 @@ import Header from '../Header/Header'; import '../../index.css'; import Slow1 from '../../assets/img/Slow1.svg'; import Slow2 from '../../assets/img/Slow2.svg'; +import Footprint from '../../assets/img/발자국.svg'; +import LeftTitle from '../../assets/img/달력제목왼쪽.svg'; +import RightTitle from '../../assets/img/달력제목오른쪽.svg'; const SlowLetterboxContainer = styled.div` width: 60px; @@ -74,6 +77,136 @@ const HappyText = styled.div` word-wrap: break-word; `; +const FootprintImg = styled.img` + width: 220.5px; + height: 394px; + position: absolute; + left: 1267px; + top: 474.97px; +`; + +//달력 +const StyledContainer = styled.div` + width: 375px; + height: 389px; + position: absolute; + left: 465px; + top: 1080px; +`; + +const StyledTitle = styled.div` + width: 133px; + height: 18px; + left: 119px; + top: 0; + position: absolute; +`; + +const LeftTitleImg = styled.img` + width: 8px; + height: 14px; + position: absolute; + left: 584px; + top: 1082px; +`; + +const RightTitleImg = styled.img` + width: 8px; + height: 14px; + position: absolute; + left: 709px; + top: 1082px; +`; + +const StyledTitleText = styled.div` + left: 22px; + top: 0; + position: absolute; + color: black; + font-size: 18px; + font-family: 'Gowun Dodum'; + font-weight: 400; + line-height: 18px; + word-wrap: break-word; +`; + +const StyledContent = styled.div` + width: 368px; + height: 298px; + left: 4px; + top: 91px; + position: absolute; + display: inline-flex; + flex-direction: column; + justify-content: flex-start; + align-items: flex-end; + gap: 12px; +`; + +const StyledRow = styled.div` + display: inline-flex; + justify-content: flex-start; + align-items: flex-start; + gap: 3px; +`; + +const StyledItem = styled.div` + display: flex; + justify-content: flex-start; + align-items: flex-start; + gap: 8px; +`; + +const StyledCircle = styled.div` + width: 50px; + height: 50px; + border-radius: 9999px; + position: relative; +`; + +const StyledText = styled.div` + position: absolute; + top: 15px; + left: 20px; + text-align: center; + color: ${props => props.isGray ? '#9F9F9F' : '#212121'}; + font-size: 18px; + font-family: 'Gowun Dodum'; + font-weight: 400; + line-height: 18px; + word-wrap: break-word; +`; + +const StyledBorder = styled.div` + width: 369px; + height: 0; + left: 4px; + top: 73px; + position: absolute; + border: 1px #9F9F9F solid; +`; + +const StyledWeekdays = styled.div` + width: 335px; + height: 26px; + padding: 12px 20px; + left: 0; + top: 26px; + position: absolute; + display: inline-flex; + justify-content: flex-start; + align-items: flex-start; + gap: 36px; +`; + +const Weekday = styled.div` + color: black; + font-size: 18px; + font-family: 'Gowun Dodum'; + font-weight: 400; + word-wrap: break-word; +`; + function TextLines({ text }) { const lines = text.split('\n'); // 텍스트를 줄바꿈 문자를 기준으로 분리합니다. @@ -104,6 +237,201 @@ export default function SlowLetterboxToday() { + + + + + + + + 2024년 1월 + + + + + + + + 1 + + + + + 2 + + + + + 3 + + + + + 4 + + + + + 5 + + + + + 6 + + + + + + + + 7 + + + + + 8 + + + + + 9 + + + + + 10 + + + + + 11 + + + + + 12 + + + + + 13 + + + + + + + + 14 + + + + + 15 + + + + + 16 + + + + + 17 + + + + + 18 + + + + + 19 + + + + + 20 + + + + + + + + 21 + + + + + 22 + + + + + 23 + + + + + 24 + + + + + 25 + + + + + 26 + + + + + 27 + + + + + + + + 28 + + + + + 29 + + + + + 30 + + + + + 31 + + + + + + + + + 일 + 월 + 화 + 수 + 목 + 금 + 토 + + ) } From 251ab172b174bea91ea2b184a4b6b393be1b42f9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=95=88=ED=98=9C=EC=97=B0?= Date: Sun, 28 Jan 2024 02:53:26 +0900 Subject: [PATCH 05/15] =?UTF-8?q?feat:=20=EC=83=81=EC=A0=90=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EB=A9=94=EC=9D=B8=20=EB=A9=94=EB=89=B4=20?= =?UTF-8?q?=EC=83=9D=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../\353\260\234\353\260\224\353\213\245.svg" | 13 + .../\354\210\230\354\247\221\355\225\250.svg" | 3 + .../assets/img/\354\275\224\354\235\270.svg" | 5 + .../MyLetterbox/SlowLetterboxToday.jsx | 296 +++++++++--------- front-end/src/components/Store/StoreMain.jsx | 122 +++++++- 5 files changed, 296 insertions(+), 143 deletions(-) create mode 100644 "front-end/src/assets/img/\353\260\234\353\260\224\353\213\245.svg" create mode 100644 "front-end/src/assets/img/\354\210\230\354\247\221\355\225\250.svg" create mode 100644 "front-end/src/assets/img/\354\275\224\354\235\270.svg" diff --git "a/front-end/src/assets/img/\353\260\234\353\260\224\353\213\245.svg" "b/front-end/src/assets/img/\353\260\234\353\260\224\353\213\245.svg" new file mode 100644 index 0000000..66a37f2 --- /dev/null +++ "b/front-end/src/assets/img/\353\260\234\353\260\224\353\213\245.svg" @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git "a/front-end/src/assets/img/\354\210\230\354\247\221\355\225\250.svg" "b/front-end/src/assets/img/\354\210\230\354\247\221\355\225\250.svg" new file mode 100644 index 0000000..e99a86b --- /dev/null +++ "b/front-end/src/assets/img/\354\210\230\354\247\221\355\225\250.svg" @@ -0,0 +1,3 @@ + + + diff --git "a/front-end/src/assets/img/\354\275\224\354\235\270.svg" "b/front-end/src/assets/img/\354\275\224\354\235\270.svg" new file mode 100644 index 0000000..6cb3994 --- /dev/null +++ "b/front-end/src/assets/img/\354\275\224\354\235\270.svg" @@ -0,0 +1,5 @@ + + + + + diff --git a/front-end/src/components/MyLetterbox/SlowLetterboxToday.jsx b/front-end/src/components/MyLetterbox/SlowLetterboxToday.jsx index 89d2c3a..007674b 100644 --- a/front-end/src/components/MyLetterbox/SlowLetterboxToday.jsx +++ b/front-end/src/components/MyLetterbox/SlowLetterboxToday.jsx @@ -106,20 +106,20 @@ const LeftTitleImg = styled.img` width: 8px; height: 14px; position: absolute; - left: 584px; - top: 1082px; + left: 0px; + top: 2px; `; const RightTitleImg = styled.img` width: 8px; height: 14px; position: absolute; - left: 709px; - top: 1082px; + right: 0px; + top: 2px; `; const StyledTitleText = styled.div` - left: 22px; + left: 24px; top: 0; position: absolute; color: black; @@ -165,9 +165,11 @@ const StyledCircle = styled.div` `; const StyledText = styled.div` + width: 20px; + height: 20px; position: absolute; top: 15px; - left: 20px; + left: 15px; text-align: center; color: ${props => props.isGray ? '#9F9F9F' : '#212121'}; font-size: 18px; @@ -177,6 +179,14 @@ const StyledText = styled.div` word-wrap: break-word; `; +const StyledForLastLine = styled.div` + flex-direction: column; + justify-content: flex-start + align-items: flex-start; + gap: 12px; + display: flex; +`; + const StyledBorder = styled.div` width: 369px; height: 0; @@ -282,142 +292,144 @@ export default function SlowLetterboxToday() { - - - - 7 - - - - - 8 - - - - - 9 - - - - - 10 - - - - - 11 - - - - - 12 - - - - - 13 - - - - - - - - 14 - - - - - 15 - - - - - 16 - - - - - 17 - - - - - 18 - - - - - 19 - - - - - 20 - - - - - - - - 21 - - - - - 22 - - - - - 23 - - - - - 24 - - - - - 25 - - - - - 26 - - - - - 27 - - - - - - - - 28 - - - - - 29 - - - - - 30 - - - - - 31 - - - + + + + + 7 + + + + + 8 + + + + + 9 + + + + + 10 + + + + + 11 + + + + + 12 + + + + + 13 + + + + + + + + 14 + + + + + 15 + + + + + 16 + + + + + 17 + + + + + 18 + + + + + 19 + + + + + 20 + + + + + + + + 21 + + + + + 22 + + + + + 23 + + + + + 24 + + + + + 25 + + + + + 26 + + + + + 27 + + + + + + + + 28 + + + + + 29 + + + + + 30 + + + + + 31 + + + + diff --git a/front-end/src/components/Store/StoreMain.jsx b/front-end/src/components/Store/StoreMain.jsx index a648cad..d4c43ba 100644 --- a/front-end/src/components/Store/StoreMain.jsx +++ b/front-end/src/components/Store/StoreMain.jsx @@ -1,10 +1,130 @@ import React from 'react'; +import styled from 'styled-components'; import Header from '../Header/Header'; +import '../../index.css'; +import 수집함 from '../../assets/img/수집함.svg'; +import 발바닥 from '../../assets/img/발바닥.svg'; +import Coin from '../../assets/img/코인.svg'; + +//상점 +const StoreMainDiv = styled.div` + width: 1194px; + height: 68px; + position: absolute; + left: 363px; + top: 162px; +`; + +const StoreInnerDiv = styled.div` + left: 862px; + top: 30px; + position: absolute; + justify-content: flex-end; + align-items: flex-end; + gap: 36px; + display: inline-flex; +`; + +const ItemDiv = styled.div` + padding: 8px 10px; + background: #D5C9BD; + border-radius: 10px; + justify-content:-start; + align-items: flex-start; + gap: 7px; + display: flex; +`; + +const CollectionBoxImg = styled.img` + width: 22px; + height: 22px; +`; + +const CatPadImg = styled.img` + width: 22px; + height: 22px; +`; + +const CoinImg = styled.img` + width: 26.07px; + height: 24px; +`; + +const TextDiv = styled.div` + color: black; + font-size: 22px; + font-family: 'Pretendard'; + font-weight: 600; + line-height: 22px; + word-wrap: break-word; +`; + +const CoinDiv = styled.div` + padding-top: 7px; + padding-bottom: 7px; + justify-content: flex-start; + align-items: 'flex-start'; + gap: 8px; + display: flex; +`; + +const CoinCountDiv = styled.div` + width: 30.80px; + color: black; + font-size: 24px; + font-family: 'Pretendard'; + font-weight: 600; + line-height: 24px; + word-wrap: break-word; +`; + +const StoreTitleText = styled.div` + width: 70px; + height: 40px; + position: relative; + left: 0; + top: 0; + font-size: 40px; + font-family: 'Pretendard'; + font-weight: 500; + line-height: 40px; +` + +const TitleDetailText = styled.div` + width: 303px; + height: 14px; + position: absolute; + left: 0; + top: 54px; + font-size: 14px; + font-family: 'Pretendard'; + font-weight: 400; + line-height: 14px; + color: #757575; +` export default function StoreMain() { return (
-
+
+ + + + + 수집함 + + + + 미션 + + + + 30 + + + 상점 + 미션으로 코인을 획득해 편지지와 우표를 구입해 보세요! +
) } From 5a5dd0b93f7cb5c1311499ccd03871eadc3d5d78 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=95=88=ED=98=9C=EC=97=B0?= Date: Sun, 28 Jan 2024 03:50:34 +0900 Subject: [PATCH 06/15] =?UTF-8?q?feat:=20=EC=83=81=EC=A0=90=20=EC=A4=91=20?= =?UTF-8?q?=EB=AF=B8=EC=85=98=ED=8E=98=EC=9D=B4=EC=A7=80,=20=EC=88=98?= =?UTF-8?q?=EC=A7=91=ED=95=A8=20=ED=8E=98=EC=9D=B4=EC=A7=80=EC=99=80=20?= =?UTF-8?q?=EA=B0=81=EA=B0=81=EC=9D=98=20=ED=83=AD=20=EC=83=9D=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- front-end/src/App.js | 4 + .../assets/img/\354\203\201\354\240\220.svg" | 3 + .../components/Store/CollectionBoxMain.jsx | 189 ++++++++++++++++++ .../src/components/Store/MissionMain.jsx | 131 ++++++++++++ front-end/src/components/Store/StoreMain.jsx | 64 +++++- 5 files changed, 386 insertions(+), 5 deletions(-) create mode 100644 "front-end/src/assets/img/\354\203\201\354\240\220.svg" create mode 100644 front-end/src/components/Store/CollectionBoxMain.jsx create mode 100644 front-end/src/components/Store/MissionMain.jsx diff --git a/front-end/src/App.js b/front-end/src/App.js index 8322ff5..0c5cb15 100644 --- a/front-end/src/App.js +++ b/front-end/src/App.js @@ -17,6 +17,8 @@ import Answer4 from './components/MyLetterbox/Answer4'; import OpenLetter1 from './components/MyLetterbox/OpenLetter1'; import OpenLetter2 from './components/MyLetterbox/OpenLetter2'; import SlowLetterboxToday from './components/MyLetterbox/SlowLetterboxToday'; +import MissionMain from './components/Store/MissionMain'; +import CollectionBoxMain from './components/Store/CollectionBoxMain'; const Background = styled.div` background-color: #FFFEF8; @@ -45,6 +47,8 @@ function App() { } /> } /> } /> + } /> + } /> diff --git "a/front-end/src/assets/img/\354\203\201\354\240\220.svg" "b/front-end/src/assets/img/\354\203\201\354\240\220.svg" new file mode 100644 index 0000000..d8c719f --- /dev/null +++ "b/front-end/src/assets/img/\354\203\201\354\240\220.svg" @@ -0,0 +1,3 @@ + + + diff --git a/front-end/src/components/Store/CollectionBoxMain.jsx b/front-end/src/components/Store/CollectionBoxMain.jsx new file mode 100644 index 0000000..29eb3b7 --- /dev/null +++ b/front-end/src/components/Store/CollectionBoxMain.jsx @@ -0,0 +1,189 @@ +import React, { useState } from 'react'; +import styled from 'styled-components'; +import Header from '../Header/Header'; +import '../../index.css'; +import 상점 from '../../assets/img/상점.svg'; +import 발바닥 from '../../assets/img/발바닥.svg'; +import Coin from '../../assets/img/코인.svg'; + +//수집함 +const StoreMainDiv = styled.div` + width: 1194px; + height: 68px; + position: absolute; + left: 363px; + top: 162px; +`; + +const StoreInnerDiv = styled.div` + left: 862px; + top: 30px; + position: absolute; + justify-content: flex-end; + align-items: flex-end; + gap: 36px; + display: inline-flex; +`; + +const ItemDiv = styled.div` + padding: 8px 10px; + background: #D5C9BD; + border-radius: 10px; + justify-content:-start; + align-items: flex-start; + gap: 7px; + display: flex; + cursor: pointer; +`; + +const CollectionBoxImg = styled.img` + width: 22px; + height: 22px; +`; + +const CatPadImg = styled.img` + width: 22px; + height: 22px; +`; + +const CoinImg = styled.img` + width: 26.07px; + height: 24px; +`; + +const TextDiv = styled.div` + color: black; + font-size: 22px; + font-family: 'Pretendard'; + font-weight: 600; + line-height: 22px; + word-wrap: break-word; +`; + +const CoinDiv = styled.div` + padding-top: 7px; + padding-bottom: 7px; + justify-content: flex-start; + align-items: 'flex-start'; + gap: 8px; + display: flex; +`; + +const CoinCountDiv = styled.div` + width: 30.80px; + color: black; + font-size: 24px; + font-family: 'Pretendard'; + font-weight: 600; + line-height: 24px; + word-wrap: break-word; +`; + +const StoreTitleText = styled.div` + width: 104px; + height: 40px; + position: relative; + left: 0; + top: 0; + font-size: 40px; + font-family: 'Pretendard'; + font-weight: 500; + line-height: 40px; +`; + +const TitleDetailText = styled.div` + width: 303px; + height: 14px; + position: absolute; + left: 0; + top: 54px; + font-size: 14px; + font-family: 'Pretendard'; + font-weight: 400; + line-height: 14px; + color: #757575; +`; + +//탭 메뉴 +const TabContainer = styled.div` + width: 285px; + height: 44px; + position: absolute; + left: 363px; + top: 290px; + justify-content: flex-end; + align-items: flex-start; + gap: 23px; + display: inline-flex; +`; + +const Tab = styled.div` + padding: 10px 5px; + display: inline-flex; + justify-content: center; + align-items: center; + gap: 10px; + border-bottom: ${props => props.isActive ? '3px #C90000 solid' : 'none'}; + cursor: pointer; +`; + +const TabText = styled.div` + color: ${props => props.isActive ? '#C90000' : 'black'}; + font-size: 24px; + font-family: 'Pretendard'; + font-weight: 500; + line-height: 24px; + word-wrap: break-word; +`; + +export default function MissionMain() { + const [currentTab, setCurrentTab] = useState('tab1'); + + return ( +
+
+ + + + + 상점 + + + + 미션 + + + + 30 + + + 수집함 + 편지지와 우표를 수집하고 직접 만들어보세요! + + + + setCurrentTab('tab1')}> + 편지지 + + setCurrentTab('tab2')}> + 우표 + + setCurrentTab('tab3')}> + 마이디자인 + + + + {currentTab === 'tab1' && ( +
탭 1의 내용입니다.
+ )} + + {currentTab === 'tab2' && ( +
탭 2의 내용입니다.
+ )} + + {currentTab === 'tab3' && ( +
탭 3의 내용입니다.
+ )} +
+ ) +} diff --git a/front-end/src/components/Store/MissionMain.jsx b/front-end/src/components/Store/MissionMain.jsx new file mode 100644 index 0000000..38914a8 --- /dev/null +++ b/front-end/src/components/Store/MissionMain.jsx @@ -0,0 +1,131 @@ +import React, { useState } from 'react'; +import styled from 'styled-components'; +import Header from '../Header/Header'; +import '../../index.css'; +import 수집함 from '../../assets/img/수집함.svg'; +import 발바닥 from '../../assets/img/발바닥.svg'; +import Coin from '../../assets/img/코인.svg'; + +//미션 +const StoreMainDiv = styled.div` + width: 1194px; + height: 68px; + position: absolute; + left: 363px; + top: 162px; +`; + +const StoreInnerDiv = styled.div` + left: 862px; + top: 30px; + position: absolute; + justify-content: flex-end; + align-items: flex-end; + gap: 36px; + display: inline-flex; +`; + +const ItemDiv = styled.div` + padding: 8px 10px; + background: #D5C9BD; + border-radius: 10px; + justify-content:-start; + align-items: flex-start; + gap: 7px; + display: flex; + cursor: pointer; +`; + +const CollectionBoxImg = styled.img` + width: 22px; + height: 22px; +`; + +const CatPadImg = styled.img` + width: 22px; + height: 22px; +`; + +const CoinImg = styled.img` + width: 26.07px; + height: 24px; +`; + +const TextDiv = styled.div` + color: black; + font-size: 22px; + font-family: 'Pretendard'; + font-weight: 600; + line-height: 22px; + word-wrap: break-word; +`; + +const CoinDiv = styled.div` + padding-top: 7px; + padding-bottom: 7px; + justify-content: flex-start; + align-items: 'flex-start'; + gap: 8px; + display: flex; +`; + +const CoinCountDiv = styled.div` + width: 30.80px; + color: black; + font-size: 24px; + font-family: 'Pretendard'; + font-weight: 600; + line-height: 24px; + word-wrap: break-word; +`; + +const StoreTitleText = styled.div` + width: 70px; + height: 40px; + position: relative; + left: 0; + top: 0; + font-size: 40px; + font-family: 'Pretendard'; + font-weight: 500; + line-height: 40px; +`; + +const TitleDetailText = styled.div` + width: 303px; + height: 14px; + position: absolute; + left: 0; + top: 54px; + font-size: 14px; + font-family: 'Pretendard'; + font-weight: 400; + line-height: 14px; + color: #757575; +`; + +export default function MissionMain() { + return ( +
+
+ + + + + 수집함 + + + + 미션 + + + + 30 + + + 미션 + 미션을 통해 코인을 얻을 수 있어요! + +
+ ) +} diff --git a/front-end/src/components/Store/StoreMain.jsx b/front-end/src/components/Store/StoreMain.jsx index d4c43ba..1ed944e 100644 --- a/front-end/src/components/Store/StoreMain.jsx +++ b/front-end/src/components/Store/StoreMain.jsx @@ -1,6 +1,7 @@ -import React from 'react'; +import React, { useState } from 'react'; import styled from 'styled-components'; import Header from '../Header/Header'; +import { useNavigate } from 'react-router-dom'; import '../../index.css'; import 수집함 from '../../assets/img/수집함.svg'; import 발바닥 from '../../assets/img/발바닥.svg'; @@ -33,6 +34,7 @@ const ItemDiv = styled.div` align-items: flex-start; gap: 7px; display: flex; + cursor: pointer; `; const CollectionBoxImg = styled.img` @@ -88,7 +90,7 @@ const StoreTitleText = styled.div` font-family: 'Pretendard'; font-weight: 500; line-height: 40px; -` +`; const TitleDetailText = styled.div` width: 303px; @@ -101,19 +103,54 @@ const TitleDetailText = styled.div` font-weight: 400; line-height: 14px; color: #757575; -` +`; + +//탭 메뉴 +const TabContainer = styled.div` + width: 142px; + height: 44px; + position: absolute; + left: 363px; + top: 290px; + justify-content: flex-end; + align-items: flex-start; + gap: 23px; + display: inline-flex; +`; + +const Tab = styled.div` + padding: 10px 5px; + display: inline-flex; + justify-content: center; + align-items: center; + gap: 10px; + border-bottom: ${props => props.isActive ? '3px #C90000 solid' : 'none'}; + cursor: pointer; +`; + +const TabText = styled.div` + color: ${props => props.isActive ? '#C90000' : 'black'}; + font-size: 24px; + font-family: 'Pretendard'; + font-weight: 500; + line-height: 24px; + word-wrap: break-word; +`; export default function StoreMain() { + const navigate = useNavigate(); + const [currentTab, setCurrentTab] = useState('tab1'); + return (
- + navigate('/CollectionBoxMain')}> 수집함 - + navigate('/MissionMain')}> 미션 @@ -125,6 +162,23 @@ export default function StoreMain() { 상점 미션으로 코인을 획득해 편지지와 우표를 구입해 보세요! + + + setCurrentTab('tab1')}> + 편지지 + + setCurrentTab('tab2')}> + 우표 + + + + {currentTab === 'tab1' && ( +
탭 1의 내용입니다.
+ )} + + {currentTab === 'tab2' && ( +
탭 2의 내용입니다.
+ )}
) } From ce8bb5b37ad472c8fba3aa6e608f078a94f3369a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=95=88=ED=98=9C=EC=97=B0?= Date: Mon, 29 Jan 2024 02:48:46 +0900 Subject: [PATCH 07/15] =?UTF-8?q?feat:=20=EC=83=81=EC=A0=90=20=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=ED=8E=B8=EC=A7=80=EC=A7=80=EB=8D=B0?= =?UTF-8?q?=EC=9D=B4=ED=84=B0=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- front-end/package-lock.json | 38 +++ front-end/package.json | 2 + front-end/src/assets/img/CoinRed.svg | 5 + front-end/src/components/Header/Header.jsx | 1 - .../src/components/Store/MissionMain.jsx | 1 + front-end/src/components/Store/StoreMain.jsx | 268 +++++++++++++++++- 6 files changed, 312 insertions(+), 3 deletions(-) create mode 100644 front-end/src/assets/img/CoinRed.svg diff --git a/front-end/package-lock.json b/front-end/package-lock.json index 2b9506d..368212c 100644 --- a/front-end/package-lock.json +++ b/front-end/package-lock.json @@ -13,8 +13,10 @@ "@testing-library/jest-dom": "^5.17.0", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", + "axios": "^1.6.7", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-icons": "^5.0.1", "react-modal": "^3.16.1", "react-redux": "^9.1.0", "react-router-dom": "^6.21.3", @@ -5497,6 +5499,29 @@ "node": ">=4" } }, + "node_modules/axios": { + "version": "1.6.7", + "resolved": "https://registry.npmjs.org/axios/-/axios-1.6.7.tgz", + "integrity": "sha512-/hDJGff6/c7u0hDkvkGxR/oy6CbCs8ziCsC7SqmhjfozqiJGc8Z11wrv9z9lYfY4K8l+H9TpjcMDX0xOZmx+RA==", + "dependencies": { + "follow-redirects": "^1.15.4", + "form-data": "^4.0.0", + "proxy-from-env": "^1.1.0" + } + }, + "node_modules/axios/node_modules/form-data": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz", + "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==", + "dependencies": { + "asynckit": "^0.4.0", + "combined-stream": "^1.0.8", + "mime-types": "^2.1.12" + }, + "engines": { + "node": ">= 6" + } + }, "node_modules/axobject-query": { "version": "3.2.1", "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-3.2.1.tgz", @@ -14727,6 +14752,11 @@ "node": ">= 0.10" } }, + "node_modules/proxy-from-env": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz", + "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==" + }, "node_modules/psl": { "version": "1.9.0", "resolved": "https://registry.npmjs.org/psl/-/psl-1.9.0.tgz", @@ -15010,6 +15040,14 @@ "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz", "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==" }, + "node_modules/react-icons": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.0.1.tgz", + "integrity": "sha512-WqLZJ4bLzlhmsvme6iFdgO8gfZP17rfjYEJ2m9RsZjZ+cc4k1hTzknEz63YS1MeT50kVzoa1Nz36f4BEx+Wigw==", + "peerDependencies": { + "react": "*" + } + }, "node_modules/react-is": { "version": "17.0.2", "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", diff --git a/front-end/package.json b/front-end/package.json index 19411ee..d28d4ec 100644 --- a/front-end/package.json +++ b/front-end/package.json @@ -8,8 +8,10 @@ "@testing-library/jest-dom": "^5.17.0", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", + "axios": "^1.6.7", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-icons": "^5.0.1", "react-modal": "^3.16.1", "react-redux": "^9.1.0", "react-router-dom": "^6.21.3", diff --git a/front-end/src/assets/img/CoinRed.svg b/front-end/src/assets/img/CoinRed.svg new file mode 100644 index 0000000..8640b12 --- /dev/null +++ b/front-end/src/assets/img/CoinRed.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/front-end/src/components/Header/Header.jsx b/front-end/src/components/Header/Header.jsx index 88c207e..7a58719 100644 --- a/front-end/src/components/Header/Header.jsx +++ b/front-end/src/components/Header/Header.jsx @@ -9,7 +9,6 @@ import '../../index.css'; const Container = styled.div` width: 1486px; height: 100px; - background: '#FFFEF8'; justify-content: center; align-items: center; display: inline-flex; diff --git a/front-end/src/components/Store/MissionMain.jsx b/front-end/src/components/Store/MissionMain.jsx index 38914a8..be9a0d8 100644 --- a/front-end/src/components/Store/MissionMain.jsx +++ b/front-end/src/components/Store/MissionMain.jsx @@ -105,6 +105,7 @@ const TitleDetailText = styled.div` `; export default function MissionMain() { + return (
diff --git a/front-end/src/components/Store/StoreMain.jsx b/front-end/src/components/Store/StoreMain.jsx index 1ed944e..a05bacd 100644 --- a/front-end/src/components/Store/StoreMain.jsx +++ b/front-end/src/components/Store/StoreMain.jsx @@ -6,6 +6,37 @@ import '../../index.css'; import 수집함 from '../../assets/img/수집함.svg'; import 발바닥 from '../../assets/img/발바닥.svg'; import Coin from '../../assets/img/코인.svg'; +import Under from '../../assets/img/Under.svg'; +import CoinRed from '../../assets/img/CoinRed.svg'; + +//편지지 데이터 +const dummyFriend = [ + {id: 1, NickName: "편지지 이름", Price: "30"}, + {id: 2, NickName: "편지지 이름", Price: "30"}, + {id: 3, NickName: "편지지 이름", Price: "30"}, + {id: 4, NickName: "편지지 이름", Price: "30"}, + {id: 5, NickName: "편지지 이름", Price: "30"}, + {id: 6, NickName: "편지지 이름", Price: "30"}, + {id: 7, NickName: "편지지 이름", Price: "30"}, + {id: 8, NickName: "편지지 이름", Price: "30"}, + {id: 9, NickName: "편지지 이름", Price: "30"}, + {id: 10, NickName: "편지지 이름", Price: "30"}, + {id: 11, NickName: "편지지 이름", Price: "30"}, + {id: 12, NickName: "편지지 이름", Price: "30"}, + {id: 13, NickName: "편지지 이름", Price: "30"}, + + {id: 14, NickName: "편지지 이름", Price: "30"}, + {id: 15, NickName: "편지지 이름", Price: "30"}, + {id: 16, NickName: "편지지 이름", Price: "30"}, + {id: 17, NickName: "편지지 이름", Price: "30"}, + {id: 18, NickName: "편지지 이름", Price: "30"}, + {id: 19, NickName: "편지지 이름", Price: "30"}, + {id: 20, NickName: "편지지 이름", Price: "30"}, + {id: 21, NickName: "편지지 이름", Price: "30"}, + {id: 22, NickName: "편지지 이름", Price: "30"}, + {id: 23, NickName: "편지지 이름", Price: "30"}, + {id: 24, NickName: "편지지 이름", Price: "30"}, +]; //상점 const StoreMainDiv = styled.div` @@ -137,10 +168,179 @@ const TabText = styled.div` word-wrap: break-word; `; +//탭1 내용 컨테이너 +const TabContentContainer = styled.div` + width: 1194px; + height: 1535px; + position: absolute; + left: 363px; + top: 334px; +` + +//정렬 기준 +const SortingContainer = styled.div` + width: 156px; + height: 33px; + position: relative; + left: 1038px; + top: 0; + padding: 57px; + z-index: 1000; +`; + +const SelectedOptionContainer = styled.div` + width: 156px; + height: 33px; + left: 0; + top: 0; + position: absolute; + flex-direction: column; + justify-content: flex-start; + display: inline-flex; + align-items: flex-start; + border: 1px black solid; +`; + +const OptionsContainer = styled.div` + width: 156px; + height: 165px; + left: 0; + top: 33px; + position: absolute; + background: white; + flex-direction: column; + justify-content: center; + align-items: flex-start; + display: inline-flex; +`; + +const Option = styled.div` + width: 156px; + height: 33px; + align-self: stretch; + flex: 1 1 0; + background: ${({ selectedOption }) => (selectedOption ? '#E5E5E5' : 'white')}; + border-left: 1px black solid; + border-right: 1px black solid; + border-bottom: 1px black solid; + justify-content: flex-start; + align-items: center; + display: inline-flex; + cursor: pointer; +`; + +const OptionText = styled.div` + color: black; + font-size: 14px; + font-family: 'Pretendard'; + font-weight: 400; + line-height: 14px; + word-wrap: break-word; + padding: 6.5px 13px; +`; + +const UnderImg = styled.img` + width: 14px; + height: 12px; + position: absolute; + left: 130px; + top: 11px; +`; + +//탭 속 편지지 내용 +const LetterContainer = styled.div` + width: 1194px; + height: 1476px; + position: relative; +`; + +const LetterBox = styled.div` + width: 1194.20px; + height: 294px; + position: absolute; + margin-bottom: 100px; +`; + +const LetterInnerBox = styled.div` + width: 378.20px; + height: 294px; + position: absolute; +`; + +const LetterBackground = styled.div` + width: 378px; + height: 226.67px; + left: 0.20px; + top: 0; + position: absolute; + background: #CECECE; +`; + +const LetterTextWrapper = styled.div` + width: 378px; + height: 57px; + left: 0; + top: 237px; + position: absolute; +`; + +const LetterText = styled.div` + width: 378px; + left: 0; + top: 0; + position: absolute; + color: black; + font-size: 22px; + font-family: 'Pretendard'; + font-weight: 400; + line-height: 22px; + word-wrap: break-word; +`; + +const LetterCoinWrapper = styled.div` + width: 62.31px; + height: 24px; + left: 0; + top: 33px; + position: absolute; +`; + +const RedCoinImg = styled.img` + width: 26.03px; + height: 24px; + left: 0; + top: 0; + position: absolute; +`; + +const LetterCoinCount = styled.div` + left: 31.31px; + top: 0; + position: absolute; + color: #C90000; + font-size: 24px; + font-family: 'Pretendard'; + font-weight: 600; + line-height: 24px; + word-wrap: break-word; +`; + export default function StoreMain() { const navigate = useNavigate(); const [currentTab, setCurrentTab] = useState('tab1'); + const [isDropdownOpen, setDropdownOpen] = useState(false); // 드롭다운의 열림/닫힘 상태를 관리하는 상태 변수 + const [selectedOption, setSelectedOption] = useState('인기순'); // 선택한 옵션을 관리하는 상태 변수 + + const handleDropdownToggle = () => { + setDropdownOpen(!isDropdownOpen); // 드롭다운의 열림/닫힘 상태를 토글 + }; + + const handleOptionSelect = (option) => { + setSelectedOption(option); // 선택한 옵션 업데이트 + setDropdownOpen(false); // 드롭다운 닫기 + }; + return (
@@ -173,11 +373,75 @@ export default function StoreMain() { {currentTab === 'tab1' && ( -
탭 1의 내용입니다.
+
+ + +
+ + + + {isDropdownOpen && ( + + + + + + + + )} +
+ + + + {dummyFriend.map((friend, index) => ( + + + + + {friend.NickName} {/* 편지지 이름 */} + + + {friend.Price} {/* Price */} + + + + + ))} + + + +
)} {currentTab === 'tab2' && ( -
탭 2의 내용입니다.
+
+ + + +
)}
) From 1c49074b3633cdce7592ac179a0b204f7989ea7b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=95=88=ED=98=9C=EC=97=B0?= Date: Mon, 29 Jan 2024 03:34:55 +0900 Subject: [PATCH 08/15] =?UTF-8?q?feat:=20=EC=83=81=EC=A0=90=20=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=ED=8E=98=EC=9D=B4=EC=A7=95=20=EA=B8=B0?= =?UTF-8?q?=EB=8A=A5=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...4\354\235\214\353\262\204\355\212\274.svg" | 3 + front-end/src/components/Store/StoreMain.jsx | 84 ++++++++++++++++++- 2 files changed, 86 insertions(+), 1 deletion(-) create mode 100644 "front-end/src/assets/img/\353\213\244\354\235\214\353\262\204\355\212\274.svg" diff --git "a/front-end/src/assets/img/\353\213\244\354\235\214\353\262\204\355\212\274.svg" "b/front-end/src/assets/img/\353\213\244\354\235\214\353\262\204\355\212\274.svg" new file mode 100644 index 0000000..e40cdf3 --- /dev/null +++ "b/front-end/src/assets/img/\353\213\244\354\235\214\353\262\204\355\212\274.svg" @@ -0,0 +1,3 @@ + + + diff --git a/front-end/src/components/Store/StoreMain.jsx b/front-end/src/components/Store/StoreMain.jsx index a05bacd..422ba58 100644 --- a/front-end/src/components/Store/StoreMain.jsx +++ b/front-end/src/components/Store/StoreMain.jsx @@ -8,6 +8,7 @@ import 발바닥 from '../../assets/img/발바닥.svg'; import Coin from '../../assets/img/코인.svg'; import Under from '../../assets/img/Under.svg'; import CoinRed from '../../assets/img/CoinRed.svg'; +import 다음버튼 from '../../assets/img/다음버튼.svg'; //편지지 데이터 const dummyFriend = [ @@ -36,6 +37,8 @@ const dummyFriend = [ {id: 22, NickName: "편지지 이름", Price: "30"}, {id: 23, NickName: "편지지 이름", Price: "30"}, {id: 24, NickName: "편지지 이름", Price: "30"}, + + {id: 25, NickName: "편지지 이름", Price: "30"}, ]; //상점 @@ -325,6 +328,51 @@ const LetterCoinCount = styled.div` word-wrap: break-word; `; +//페이징 +const PaginationContainer = styled.div` + align-items: center; + display: flex; + justify-content: center; + margin-top: 120px; +`; + +const PageNumberContainer = styled.div` + justify-content: flex-start; + align-items: flex-start; + gap: 17px; + display: flex; +`; + +const PageButton = styled.div` + width: 20px; + height: 24px; + padding: 10px; + border: ${({ active }) => (active ? '1px #C90000 solid' : 'none')}; + flex-direction: row; + justify-content: center; + align-items: center; + gap: 10px; + display: inline-flex; + cursor: pointer; +`; + +const PageNumberText = styled.div` + color: ${({ active }) => (active ? '#C90000' : 'black')}; + font-size: 24px; + font-family: 'Pretendard'; + font-weight: 500; + line-height: 24px; + word-wrap: break-word; +`; + +const NextButtonImg = styled.img` + width: 9px; + height: 15px; + position: relative; + left: 54px; + cursor: pointer; +`; + export default function StoreMain() { const navigate = useNavigate(); const [currentTab, setCurrentTab] = useState('tab1'); @@ -341,6 +389,23 @@ export default function StoreMain() { setDropdownOpen(false); // 드롭다운 닫기 }; + const itemsPerPage = 12; // 한 페이지에 표시할 아이템 개수 + const totalPages = Math.ceil(dummyFriend.length / itemsPerPage); // 전체 페이지 수 + + const [currentPage, setCurrentPage] = useState(1); // 현재 페이지 + + const handlePageChange = (page) => { + setCurrentPage(page); // 페이지 변경 + }; + + const handleNextPage = () => { + const lastPage = totalPages; // 마지막 페이지 번호 + handlePageChange(lastPage); // 마지막 페이지로 이동 + }; + + const startIndex = (currentPage - 1) * itemsPerPage; // 현재 페이지에서 첫 번째 아이템의 인덱스 + const endIndex = startIndex + itemsPerPage; // 현재 페이지에서 마지막 아이템의 인덱스 + return (
@@ -416,7 +481,7 @@ export default function StoreMain() { - {dummyFriend.map((friend, index) => ( + {dummyFriend.slice(startIndex, endIndex).map((friend, index) => ( @@ -431,6 +496,23 @@ export default function StoreMain() { ))} + + {/* 페이징 네비게이션 */} + + + {Array.from({ length: totalPages }, (_, index) => ( + + handlePageChange(index + 1)} + > + {index + 1} + + + ))} + + +
From 4ab05ab46cb1dfeb60f1f9d94c6ac624c67c32f0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=95=88=ED=98=9C=EC=97=B0?= Date: Mon, 29 Jan 2024 04:14:21 +0900 Subject: [PATCH 09/15] =?UTF-8?q?feat:=20=EC=83=81=EC=A0=90,=20=EB=AF=B8?= =?UTF-8?q?=EC=85=98,=20=EC=88=98=EC=A7=91=ED=95=A8=20=EA=B8=B0=EB=B3=B8?= =?UTF-8?q?=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=99=84=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- front-end/src/assets/img/Checkbox.svg | 3 + .../components/Store/CollectionBoxMain.jsx | 380 +++++++++++++++++- .../src/components/Store/MissionMain.jsx | 126 +++++- front-end/src/components/Store/StoreMain.jsx | 6 +- 4 files changed, 502 insertions(+), 13 deletions(-) create mode 100644 front-end/src/assets/img/Checkbox.svg diff --git a/front-end/src/assets/img/Checkbox.svg b/front-end/src/assets/img/Checkbox.svg new file mode 100644 index 0000000..1320e77 --- /dev/null +++ b/front-end/src/assets/img/Checkbox.svg @@ -0,0 +1,3 @@ + + + diff --git a/front-end/src/components/Store/CollectionBoxMain.jsx b/front-end/src/components/Store/CollectionBoxMain.jsx index 29eb3b7..e3af2c5 100644 --- a/front-end/src/components/Store/CollectionBoxMain.jsx +++ b/front-end/src/components/Store/CollectionBoxMain.jsx @@ -1,10 +1,75 @@ import React, { useState } from 'react'; import styled from 'styled-components'; import Header from '../Header/Header'; +import { useNavigate } from 'react-router-dom'; import '../../index.css'; import 상점 from '../../assets/img/상점.svg'; import 발바닥 from '../../assets/img/발바닥.svg'; import Coin from '../../assets/img/코인.svg'; +import CoinRed from '../../assets/img/CoinRed.svg'; +import 다음버튼 from '../../assets/img/다음버튼.svg'; +import Checkbox from '../../assets/img/Checkbox.svg'; + +//수집함 편지지 데이터 +const dummyCollectionLetter = [ + {id: 1, NickName: "편지지 이름", Price: "30"}, + {id: 2, NickName: "편지지 이름", Price: "30"}, + {id: 3, NickName: "편지지 이름", Price: "30"}, + {id: 4, NickName: "편지지 이름", Price: "30"}, + {id: 5, NickName: "편지지 이름", Price: "30"}, + {id: 6, NickName: "편지지 이름", Price: "30"}, + {id: 7, NickName: "편지지 이름", Price: "30"}, + {id: 8, NickName: "편지지 이름", Price: "30"}, + {id: 9, NickName: "편지지 이름", Price: "30"}, + {id: 10, NickName: "편지지 이름", Price: "30"}, + {id: 11, NickName: "편지지 이름", Price: "30"}, + {id: 12, NickName: "편지지 이름", Price: "30"}, + {id: 13, NickName: "편지지 이름", Price: "30"}, + + {id: 14, NickName: "편지지 이름", Price: "30"}, + {id: 15, NickName: "편지지 이름", Price: "30"}, + {id: 16, NickName: "편지지 이름", Price: "30"}, + {id: 17, NickName: "편지지 이름", Price: "30"}, + {id: 18, NickName: "편지지 이름", Price: "30"}, + {id: 19, NickName: "편지지 이름", Price: "30"}, + {id: 20, NickName: "편지지 이름", Price: "30"}, + {id: 21, NickName: "편지지 이름", Price: "30"}, + {id: 22, NickName: "편지지 이름", Price: "30"}, + {id: 23, NickName: "편지지 이름", Price: "30"}, + {id: 24, NickName: "편지지 이름", Price: "30"}, + + {id: 25, NickName: "편지지 이름", Price: "30"}, +]; + +const dummyCollectionStamp = [ + {id: 1, NickName: "우표 이름"}, + {id: 2, NickName: "우표 이름"}, + {id: 3, NickName: "우표 이름"}, + {id: 4, NickName: "우표 이름"}, + {id: 5, NickName: "우표 이름"}, + {id: 6, NickName: "우표 이름"}, + {id: 7, NickName: "우표 이름"}, + {id: 8, NickName: "우표 이름"}, + {id: 9, NickName: "우표 이름"}, + {id: 10, NickName: "우표 이름"}, + {id: 11, NickName: "우표 이름"}, + {id: 12, NickName: "우표 이름"}, + {id: 13, NickName: "우표 이름"}, + + {id: 14, NickName: "우표 이름"}, + {id: 15, NickName: "우표 이름"}, + {id: 16, NickName: "우표 이름"}, + {id: 17, NickName: "우표 이름"}, + {id: 18, NickName: "우표 이름"}, + {id: 19, NickName: "우표 이름"}, + {id: 20, NickName: "우표 이름"}, + {id: 21, NickName: "우표 이름"}, + {id: 22, NickName: "우표 이름"}, + {id: 23, NickName: "우표 이름"}, + {id: 24, NickName: "우표 이름"}, + + {id: 25, NickName: "우표 이름"}, +]; //수집함 const StoreMainDiv = styled.div` @@ -136,19 +201,247 @@ const TabText = styled.div` word-wrap: break-word; `; +//탭1 내용 컨테이너 +const TabContentContainer = styled.div` + width: 1194px; + height: 1535px; + position: absolute; + left: 363px; + top: 334px; +`; + +//마이디자인만 보기 +const MyDesignContainer = styled.div` + width: 155px; + height: 18px; + position: relative; + left: 1039px; + top: 0; + margin-bottom: 72px; +`; + +const CheckboxImg = styled.img` + width: 18px; + height: 18px; +`; + +const MyDesignText = styled.div` + width: 129px; + color: black; + font-size: 18px; + font-family: 'Pretendard'; + font-weight: 400; + line-height: 18px; + word-wrap: break-word; + left: 26px; + top: 0; + position: absolute; +`; + +//탭 속 편지지 내용 +const LetterContainer = styled.div` + width: 1194px; + height: 1476px; + position: relative; +`; + +const LetterBox = styled.div` + width: 1194.20px; + height: 294px; + position: absolute; + margin-bottom: 100px; +`; + +const LetterInnerBox = styled.div` + width: 378.20px; + height: 294px; + position: absolute; +`; + +const LetterBackground = styled.div` + width: 378px; + height: 226.67px; + left: 0.20px; + top: 0; + position: absolute; + background: #CECECE; +`; + +const LetterTextWrapper = styled.div` + width: 378px; + height: 57px; + left: 0; + top: 237px; + position: absolute; +`; + +const LetterText = styled.div` + width: 378px; + left: 0; + top: 0; + position: absolute; + color: black; + font-size: 22px; + font-family: 'Pretendard'; + font-weight: 400; + line-height: 22px; + word-wrap: break-word; +`; + +const LetterCoinWrapper = styled.div` + width: 62.31px; + height: 24px; + left: 0; + top: 33px; + position: absolute; +`; + +const RedCoinImg = styled.img` + width: 26.03px; + height: 24px; + left: 0; + top: 0; + position: absolute; +`; + +const LetterCoinCount = styled.div` + left: 31.31px; + top: 0; + position: absolute; + color: #C90000; + font-size: 24px; + font-family: 'Pretendard'; + font-weight: 600; + line-height: 24px; + word-wrap: break-word; +`; + +//탭 속 우표 내용 +const StampContainer = styled.div` + width: 1194px; + height: 1344px; + position: relative; +`; + +const StampBox = styled.div` + width: 1194px; + height: 380px; + position: absolute; + margin-bottom: 102px; +`; + +const StampInnerBox = styled.div` + width: 276x; + height: 380px; + position: absolute; +`; + +const StampBackground = styled.div` + width: 276px; + height: 348px; + left: 0; + top: 0; + position: absolute; + background: #CECECE; +`; + +const StampTextWrapper = styled.div` + width: 82px; + height: 22px; + left: 0; + top: 358px; + position: absolute; +`; + +const StampText = styled.div` + width: 82px; + left: 0; + top: 0; + position: absolute; + color: black; + font-size: 22px; + font-family: 'Pretendard'; + font-weight: 400; + line-height: 22px; + word-wrap: break-word; +`; + +//페이징 +const PaginationContainer = styled.div` + align-items: center; + display: flex; + justify-content: center; + margin-top: 120px; +`; + +const PageNumberContainer = styled.div` + justify-content: flex-start; + align-items: flex-start; + gap: 17px; + display: flex; +`; + +const PageButton = styled.div` + width: 20px; + height: 24px; + padding: 10px; + border: ${({ active }) => (active ? '1px #C90000 solid' : 'none')}; + flex-direction: row; + justify-content: center; + align-items: center; + gap: 10px; + display: inline-flex; + cursor: pointer; +`; + +const PageNumberText = styled.div` + color: ${({ active }) => (active ? '#C90000' : 'black')}; + font-size: 24px; + font-family: 'Pretendard'; + font-weight: 500; + line-height: 24px; + word-wrap: break-word; +`; + +const NextButtonImg = styled.img` + width: 9px; + height: 15px; + position: relative; + left: 54px; + cursor: pointer; +`; + export default function MissionMain() { + const navigate = useNavigate(); const [currentTab, setCurrentTab] = useState('tab1'); + const itemsPerPage = 12; // 한 페이지에 표시할 아이템 개수 + const totalPages = Math.ceil(dummyCollectionLetter.length / itemsPerPage); // 전체 페이지 수 + + const [currentPage, setCurrentPage] = useState(1); // 현재 페이지 + + const handlePageChange = (page) => { + setCurrentPage(page); // 페이지 변경 + }; + + const handleNextPage = () => { + const lastPage = totalPages; // 마지막 페이지 번호 + handlePageChange(lastPage); // 마지막 페이지로 이동 + }; + + const startIndex = (currentPage - 1) * itemsPerPage; // 현재 페이지에서 첫 번째 아이템의 인덱스 + const endIndex = startIndex + itemsPerPage; // 현재 페이지에서 마지막 아이템의 인덱스 + return (
- + navigate('/Store')}> 상점 - + navigate('/MissionMain')}> 미션 @@ -174,11 +467,90 @@ export default function MissionMain() { {currentTab === 'tab1' && ( -
탭 1의 내용입니다.
+
+ + + + + 마이디자인만 보기 + + + + {dummyCollectionLetter.slice(startIndex, endIndex).map((friend, index) => ( + + + + + {friend.NickName} {/* 편지지 이름 */} + + + {friend.Price} {/* Price */} + + + + + ))} + + + {/* 페이징 네비게이션 */} + + + {Array.from({ length: totalPages }, (_, index) => ( + + handlePageChange(index + 1)} + > + {index + 1} + + + ))} + + + + +
)} {currentTab === 'tab2' && ( -
탭 2의 내용입니다.
+
+ + + + 마이디자인만 보기 + + + + {dummyCollectionStamp.slice(startIndex, endIndex).map((friend, index) => ( + + + + + {friend.NickName} {/* 편지지 이름 */} + + + + ))} + + + {/* 페이징 네비게이션 */} + + + {Array.from({ length: totalPages }, (_, index) => ( + + handlePageChange(index + 1)} + > + {index + 1} + + + ))} + + + + +
)} {currentTab === 'tab3' && ( diff --git a/front-end/src/components/Store/MissionMain.jsx b/front-end/src/components/Store/MissionMain.jsx index be9a0d8..467e8ff 100644 --- a/front-end/src/components/Store/MissionMain.jsx +++ b/front-end/src/components/Store/MissionMain.jsx @@ -1,10 +1,43 @@ import React, { useState } from 'react'; import styled from 'styled-components'; import Header from '../Header/Header'; +import { useNavigate } from 'react-router-dom'; import '../../index.css'; import 수집함 from '../../assets/img/수집함.svg'; -import 발바닥 from '../../assets/img/발바닥.svg'; +import 상점 from '../../assets/img/상점.svg'; import Coin from '../../assets/img/코인.svg'; +import 다음버튼 from '../../assets/img/다음버튼.svg'; + +//미션 데이터 +const dummyMission = [ + {id: 1, NickName: "편지지 이름", Price: "30"}, + {id: 2, NickName: "편지지 이름", Price: "30"}, + {id: 3, NickName: "편지지 이름", Price: "30"}, + {id: 4, NickName: "편지지 이름", Price: "30"}, + {id: 5, NickName: "편지지 이름", Price: "30"}, + {id: 6, NickName: "편지지 이름", Price: "30"}, + {id: 7, NickName: "편지지 이름", Price: "30"}, + {id: 8, NickName: "편지지 이름", Price: "30"}, + {id: 9, NickName: "편지지 이름", Price: "30"}, + {id: 10, NickName: "편지지 이름", Price: "30"}, + {id: 11, NickName: "편지지 이름", Price: "30"}, + {id: 12, NickName: "편지지 이름", Price: "30"}, + {id: 13, NickName: "편지지 이름", Price: "30"}, + + {id: 14, NickName: "편지지 이름", Price: "30"}, + {id: 15, NickName: "편지지 이름", Price: "30"}, + {id: 16, NickName: "편지지 이름", Price: "30"}, + {id: 17, NickName: "편지지 이름", Price: "30"}, + {id: 18, NickName: "편지지 이름", Price: "30"}, + {id: 19, NickName: "편지지 이름", Price: "30"}, + {id: 20, NickName: "편지지 이름", Price: "30"}, + {id: 21, NickName: "편지지 이름", Price: "30"}, + {id: 22, NickName: "편지지 이름", Price: "30"}, + {id: 23, NickName: "편지지 이름", Price: "30"}, + {id: 24, NickName: "편지지 이름", Price: "30"}, + + {id: 25, NickName: "편지지 이름", Price: "30"}, +]; //미션 const StoreMainDiv = styled.div` @@ -41,7 +74,7 @@ const CollectionBoxImg = styled.img` height: 22px; `; -const CatPadImg = styled.img` +const StoreImg = styled.img` width: 22px; height: 22px; `; @@ -104,20 +137,83 @@ const TitleDetailText = styled.div` color: #757575; `; +//페이징 +const PaginationContainer = styled.div` + align-items: center; + display: flex; + justify-content: center; + margin-top: 120px; +`; + +const PageNumberContainer = styled.div` + justify-content: flex-start; + align-items: flex-start; + gap: 17px; + display: flex; +`; + +const PageButton = styled.div` + width: 20px; + height: 24px; + padding: 10px; + border: ${({ active }) => (active ? '1px #C90000 solid' : 'none')}; + flex-direction: row; + justify-content: center; + align-items: center; + gap: 10px; + display: inline-flex; + cursor: pointer; +`; + +const PageNumberText = styled.div` + color: ${({ active }) => (active ? '#C90000' : 'black')}; + font-size: 24px; + font-family: 'Pretendard'; + font-weight: 500; + line-height: 24px; + word-wrap: break-word; +`; + +const NextButtonImg = styled.img` + width: 9px; + height: 15px; + position: relative; + left: 54px; + cursor: pointer; +`; + export default function MissionMain() { + const navigate = useNavigate(); + + const itemsPerPage = 9; // 한 페이지에 표시할 아이템 개수 + const totalPages = Math.ceil(dummyMission.length / itemsPerPage); // 전체 페이지 수 + + const [currentPage, setCurrentPage] = useState(1); // 현재 페이지 + + const handlePageChange = (page) => { + setCurrentPage(page); // 페이지 변경 + }; + + const handleNextPage = () => { + const lastPage = totalPages; // 마지막 페이지 번호 + handlePageChange(lastPage); // 마지막 페이지로 이동 + }; + + const startIndex = (currentPage - 1) * itemsPerPage; // 현재 페이지에서 첫 번째 아이템의 인덱스 + const endIndex = startIndex + itemsPerPage; // 현재 페이지에서 마지막 아이템의 인덱스 return (
- - + navigate('/CollectionBoxMain')}> + 수집함 - - 미션 + + 상점 @@ -127,6 +223,24 @@ export default function MissionMain() { 미션 미션을 통해 코인을 얻을 수 있어요! + + + {/* 페이징 네비게이션 */} + + + {Array.from({ length: totalPages }, (_, index) => ( + + handlePageChange(index + 1)} + > + {index + 1} + + + ))} + + +
) } diff --git a/front-end/src/components/Store/StoreMain.jsx b/front-end/src/components/Store/StoreMain.jsx index 422ba58..e2f73d7 100644 --- a/front-end/src/components/Store/StoreMain.jsx +++ b/front-end/src/components/Store/StoreMain.jsx @@ -11,7 +11,7 @@ import CoinRed from '../../assets/img/CoinRed.svg'; import 다음버튼 from '../../assets/img/다음버튼.svg'; //편지지 데이터 -const dummyFriend = [ +const dummyLetter = [ {id: 1, NickName: "편지지 이름", Price: "30"}, {id: 2, NickName: "편지지 이름", Price: "30"}, {id: 3, NickName: "편지지 이름", Price: "30"}, @@ -390,7 +390,7 @@ export default function StoreMain() { }; const itemsPerPage = 12; // 한 페이지에 표시할 아이템 개수 - const totalPages = Math.ceil(dummyFriend.length / itemsPerPage); // 전체 페이지 수 + const totalPages = Math.ceil(dummyLetter.length / itemsPerPage); // 전체 페이지 수 const [currentPage, setCurrentPage] = useState(1); // 현재 페이지 @@ -481,7 +481,7 @@ export default function StoreMain() { - {dummyFriend.slice(startIndex, endIndex).map((friend, index) => ( + {dummyLetter.slice(startIndex, endIndex).map((friend, index) => ( From 1a8d1349bdcee3095d35229e22931faa91aab31b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=95=88=ED=98=9C=EC=97=B0?= Date: Mon, 29 Jan 2024 21:49:48 +0900 Subject: [PATCH 10/15] =?UTF-8?q?feat:=20=EC=83=81=EC=A0=90=20=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=EC=97=90=EC=84=9C=20=ED=8E=B8=EC=A7=80?= =?UTF-8?q?=EC=A7=80=20=ED=81=B4=EB=A6=AD=EC=8B=9C=20=EA=B5=AC=EB=A7=A4?= =?UTF-8?q?=EB=B2=84=ED=8A=BC=20=EC=83=9D=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- front-end/src/components/MyLetterbox/Info.jsx | 4 + .../components/Store/CollectionBoxMain.jsx | 14 +- front-end/src/components/Store/StoreMain.jsx | 301 +++++++++++++++++- 3 files changed, 306 insertions(+), 13 deletions(-) diff --git a/front-end/src/components/MyLetterbox/Info.jsx b/front-end/src/components/MyLetterbox/Info.jsx index b5cbc39..8bd8f5c 100644 --- a/front-end/src/components/MyLetterbox/Info.jsx +++ b/front-end/src/components/MyLetterbox/Info.jsx @@ -79,6 +79,7 @@ const CloseButtonImg = styled.img` left: 254.59px; top: 0; position: absolute; + cursor: pointer; `; //내용 중 '우편함 닫기' @@ -109,6 +110,7 @@ const Toggle = styled.div` position: absolute; background-color: ${({ isActive }) => (isActive ? '#C90000' : 'black')}; border-radius: 20px; + cursor: pointer; `; // isActive 상태에 따라 원의 위치가 변경 @@ -353,6 +355,7 @@ const NameIconImg = styled.img` width: 14.23px; height: 16.24px; top: 1px; + cursor: pointer; `; //편집모드 @@ -408,6 +411,7 @@ const EditCompleteButtonImg = styled.img` position: absolute; left: 278px; top: 0; + cursor: pointer; `; diff --git a/front-end/src/components/Store/CollectionBoxMain.jsx b/front-end/src/components/Store/CollectionBoxMain.jsx index e3af2c5..3ca79e2 100644 --- a/front-end/src/components/Store/CollectionBoxMain.jsx +++ b/front-end/src/components/Store/CollectionBoxMain.jsx @@ -476,15 +476,15 @@ export default function MissionMain() { - {dummyCollectionLetter.slice(startIndex, endIndex).map((friend, index) => ( - + {dummyCollectionLetter.slice(startIndex, endIndex).map((letter, index) => ( + - {friend.NickName} {/* 편지지 이름 */} + {letter.NickName} {/* 편지지 이름 */} - {friend.Price} {/* Price */} + {letter.Price} {/* Price */} @@ -521,12 +521,12 @@ export default function MissionMain() { - {dummyCollectionStamp.slice(startIndex, endIndex).map((friend, index) => ( - + {dummyCollectionStamp.slice(startIndex, endIndex).map((stamp, index) => ( + - {friend.NickName} {/* 편지지 이름 */} + {stamp.NickName} {/* 편지지 이름 */} diff --git a/front-end/src/components/Store/StoreMain.jsx b/front-end/src/components/Store/StoreMain.jsx index e2f73d7..6ddd340 100644 --- a/front-end/src/components/Store/StoreMain.jsx +++ b/front-end/src/components/Store/StoreMain.jsx @@ -41,6 +41,36 @@ const dummyLetter = [ {id: 25, NickName: "편지지 이름", Price: "30"}, ]; +const dummyCollectionStamp = [ + {id: 1, NickName: "우표 이름"}, + {id: 2, NickName: "우표 이름"}, + {id: 3, NickName: "우표 이름"}, + {id: 4, NickName: "우표 이름"}, + {id: 5, NickName: "우표 이름"}, + {id: 6, NickName: "우표 이름"}, + {id: 7, NickName: "우표 이름"}, + {id: 8, NickName: "우표 이름"}, + {id: 9, NickName: "우표 이름"}, + {id: 10, NickName: "우표 이름"}, + {id: 11, NickName: "우표 이름"}, + {id: 12, NickName: "우표 이름"}, + {id: 13, NickName: "우표 이름"}, + + {id: 14, NickName: "우표 이름"}, + {id: 15, NickName: "우표 이름"}, + {id: 16, NickName: "우표 이름"}, + {id: 17, NickName: "우표 이름"}, + {id: 18, NickName: "우표 이름"}, + {id: 19, NickName: "우표 이름"}, + {id: 20, NickName: "우표 이름"}, + {id: 21, NickName: "우표 이름"}, + {id: 22, NickName: "우표 이름"}, + {id: 23, NickName: "우표 이름"}, + {id: 24, NickName: "우표 이름"}, + + {id: 25, NickName: "우표 이름"}, +]; + //상점 const StoreMainDiv = styled.div` width: 1194px; @@ -268,6 +298,7 @@ const LetterInnerBox = styled.div` width: 378.20px; height: 294px; position: absolute; + cursor: pointer; `; const LetterBackground = styled.div` @@ -328,6 +359,152 @@ const LetterCoinCount = styled.div` word-wrap: break-word; `; +//편지지 클릭시 구매 버튼 생성 +const SelectedLetterBackground = styled.div` + width: 378px; + height: 226.67px; + left: 0.20px; + top: 0; + position: absolute; + background: #CECECE; + background: rgba(46.99, 40.54, 38.50, 0.80); + backdrop-filter: blur(4px); +`; + +const PurchaseContainer = styled.div` + display: ${({ isActive }) => (isActive ? 'flex' : 'none')}; + justify-content: space-between; + align-items: center; + width: 228px; + height: 113px; + position: relative; + left: 75px; + top: 62px; +`; + +const QuestionText = styled.div` + width: 164px; + height: 22px; + left: 33px; + top: 0; + position: absolute; + color: white; + font-size: 22px; + font-family: 'Pretendard'; + font-weight: 500; + line-height: 22px; + word-wrap: break-word; +`; + +const ButtonContainer = styled.div` + width: 228px; + height: 49px; + position: absolute; + left: 0; + top: 64px; +`; + +const CancelButton = styled.button` + width: 102px; + height: 49px; + padding-left: 35px; + padding-right: 35px; + padding-top: 14px; + padding-bottom: 14px; + background: white; + left: 0; + top: 0; + position: absolute; + border-radius: 10px; + border: 1px #757575 solid; + justify-content: center; + align-items: center; + gap: 10px; + display: inline-flex; + cursor: pointer; +`; + +const PurchaseButton = styled.button` + width: 102px; + height: 49px; + padding-left: 35px; + padding-right: 35px; + padding-top: 14px; + padding-bottom: 14px; + background: #C90000; + left: 126px; + top: 0; + position: absolute; + border-radius: 10px; + border: 1px #757575 solid; + justify-content: center; + align-items: center; + gap: 10px; + display: inline-flex; + cursor: pointer; +`; + +const PurchaseText = styled.div` + width: 32px; + height: 21px; + position: absolute; + color: #757575; + font-size: 18px; + font-family: 'Pretendard'; + font-weight: 500; + word-wrap: break-word; +`; + +//탭 속 우표 내용 +const StampContainer = styled.div` + width: 1194px; + height: 1344px; + position: relative; +`; + +const StampBox = styled.div` + width: 1194px; + height: 380px; + position: absolute; + margin-bottom: 102px; +`; + +const StampInnerBox = styled.div` + width: 276x; + height: 380px; + position: absolute; +`; + +const StampBackground = styled.div` + width: 276px; + height: 348px; + left: 0; + top: 0; + position: absolute; + background: #CECECE; +`; + +const StampTextWrapper = styled.div` + width: 82px; + height: 22px; + left: 0; + top: 358px; + position: absolute; +`; + +const StampText = styled.div` + width: 82px; + left: 0; + top: 0; + position: absolute; + color: black; + font-size: 22px; + font-family: 'Pretendard'; + font-weight: 400; + line-height: 22px; + word-wrap: break-word; +`; + //페이징 const PaginationContainer = styled.div` align-items: center; @@ -406,6 +583,18 @@ export default function StoreMain() { const startIndex = (currentPage - 1) * itemsPerPage; // 현재 페이지에서 첫 번째 아이템의 인덱스 const endIndex = startIndex + itemsPerPage; // 현재 페이지에서 마지막 아이템의 인덱스 + const [selectedLetterIndex, setSelectedLetterIndex] = useState(null); + + const handleLetterInnerBoxClick = (index) => { + setSelectedLetterIndex(index === selectedLetterIndex ? null : index); + // 클릭된 편지지의 인덱스를 설정하기 위해 setSelectedLetterIndex를 호출합니다. + // index는 클릭된 편지지의 인덱스입니다. + }; + + const handleLetterBackgroundClick = (index) => { + setSelectedLetterIndex(index); // 선택된 편지지 인덱스를 설정합니다 + }; + return (
@@ -481,16 +670,47 @@ export default function StoreMain() { - {dummyLetter.slice(startIndex, endIndex).map((friend, index) => ( - - - + {dummyLetter.slice(startIndex, endIndex).map((letter, index) => ( + + + handleLetterInnerBoxClick(index)} + isActive={index === selectedLetterIndex} + /> + {index === selectedLetterIndex ? ( + handleLetterBackgroundClick(index)} isActive={true} + style={{background: 'rgba(46.99, 40.54, 38.50, 0.80)', backdropFilter: 'blur(4px)'}} + > + + 구매하시겠습니까? + + + 취소 + + + 구매 + + + + + ) : ( + handleLetterBackgroundClick(index)} + isActive={index === selectedLetterIndex} + /> + )} - {friend.NickName} {/* 편지지 이름 */} + {letter.NickName} {/* 편지지 이름 */} - {friend.Price} {/* Price */} + {letter.Price} {/* Price */} + + + @@ -521,7 +741,76 @@ export default function StoreMain() { {currentTab === 'tab2' && (
+ +
+ + + + {isDropdownOpen && ( + + + + + + + + )} +
+ + + {dummyCollectionStamp.slice(startIndex, endIndex).map((stamp, index) => ( + + + + + {stamp.NickName} {/* 편지지 이름 */} + + + + ))} + + + {/* 페이징 네비게이션 */} + + + {Array.from({ length: totalPages }, (_, index) => ( + + handleLetterInnerBoxClick(index)} + isActive={index === selectedLetterIndex} + > + {index + 1} + + + ))} + + +
)} From c0ad37d2e8e574184057cab5598b8bd98b8f2d96 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=95=88=ED=98=9C=EC=97=B0?= Date: Mon, 29 Jan 2024 22:44:20 +0900 Subject: [PATCH 11/15] =?UTF-8?q?docs:=20=EC=83=81=EC=A0=90=20=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=ED=8E=B8=EC=A7=80=EC=A7=80=20=ED=81=B4?= =?UTF-8?q?=EB=A6=AD=20=EB=AC=B8=EC=A0=9C=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- front-end/src/components/Store/StoreMain.jsx | 78 ++++++++------------ 1 file changed, 31 insertions(+), 47 deletions(-) diff --git a/front-end/src/components/Store/StoreMain.jsx b/front-end/src/components/Store/StoreMain.jsx index 6ddd340..631b56e 100644 --- a/front-end/src/components/Store/StoreMain.jsx +++ b/front-end/src/components/Store/StoreMain.jsx @@ -297,8 +297,7 @@ const LetterBox = styled.div` const LetterInnerBox = styled.div` width: 378.20px; height: 294px; - position: absolute; - cursor: pointer; + position: relative; `; const LetterBackground = styled.div` @@ -307,7 +306,9 @@ const LetterBackground = styled.div` left: 0.20px; top: 0; position: absolute; - background: #CECECE; + background: ${({ isActive }) => (isActive ? 'rgba(46.99, 40.54, 38.50, 0.80)' : '#CECECE')}; + cursor: pointer; + z-index: 1; `; const LetterTextWrapper = styled.div` @@ -360,17 +361,6 @@ const LetterCoinCount = styled.div` `; //편지지 클릭시 구매 버튼 생성 -const SelectedLetterBackground = styled.div` - width: 378px; - height: 226.67px; - left: 0.20px; - top: 0; - position: absolute; - background: #CECECE; - background: rgba(46.99, 40.54, 38.50, 0.80); - backdrop-filter: blur(4px); -`; - const PurchaseContainer = styled.div` display: ${({ isActive }) => (isActive ? 'flex' : 'none')}; justify-content: space-between; @@ -380,6 +370,7 @@ const PurchaseContainer = styled.div` position: relative; left: 75px; top: 62px; + z-index: 2; `; const QuestionText = styled.div` @@ -573,11 +564,13 @@ export default function StoreMain() { const handlePageChange = (page) => { setCurrentPage(page); // 페이지 변경 + setSelectedLetterIndex(null); // 페이지 변경 시 selectedLetterIndex 초기화 }; const handleNextPage = () => { const lastPage = totalPages; // 마지막 페이지 번호 handlePageChange(lastPage); // 마지막 페이지로 이동 + setSelectedLetterIndex(null); // 페이지 변경 시 selectedLetterIndex 초기화 }; const startIndex = (currentPage - 1) * itemsPerPage; // 현재 페이지에서 첫 번째 아이템의 인덱스 @@ -586,13 +579,14 @@ export default function StoreMain() { const [selectedLetterIndex, setSelectedLetterIndex] = useState(null); const handleLetterInnerBoxClick = (index) => { - setSelectedLetterIndex(index === selectedLetterIndex ? null : index); + setSelectedLetterIndex(index === selectedLetterIndex ? null : index); // 페이징 기능 함수 // 클릭된 편지지의 인덱스를 설정하기 위해 setSelectedLetterIndex를 호출합니다. // index는 클릭된 편지지의 인덱스입니다. }; const handleLetterBackgroundClick = (index) => { - setSelectedLetterIndex(index); // 선택된 편지지 인덱스를 설정합니다 + setSelectedLetterIndex(index); // LetterBackground를 클릭했을 때 호출되는 함수 + //해당 편지지의 인덱스를 selectedLetterIndex로 설정하고 선택된 편지지에 구매 관련 컴포넌트가 나타납니다. }; return ( @@ -672,35 +666,28 @@ export default function StoreMain() { {dummyLetter.slice(startIndex, endIndex).map((letter, index) => ( - - handleLetterInnerBoxClick(index)} - isActive={index === selectedLetterIndex} - /> - {index === selectedLetterIndex ? ( - handleLetterBackgroundClick(index)} isActive={true} - style={{background: 'rgba(46.99, 40.54, 38.50, 0.80)', backdropFilter: 'blur(4px)'}} - > - - 구매하시겠습니까? - - - 취소 - - - 구매 - - - - - ) : ( - handleLetterBackgroundClick(index)} - isActive={index === selectedLetterIndex} - /> + handleLetterBackgroundClick(index)} + isActive={index === selectedLetterIndex} + /> + {index === selectedLetterIndex && ( + + 구매하시겠습니까? + + + 취소 + + + 구매 + + + )} {letter.NickName} {/* 편지지 이름 */} @@ -708,9 +695,6 @@ export default function StoreMain() { {letter.Price} {/* Price */} - - - From 3381c59e19306a79ecd32810ca5ce71b9840c19b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=95=88=ED=98=9C=EC=97=B0?= Date: Mon, 29 Jan 2024 23:31:05 +0900 Subject: [PATCH 12/15] =?UTF-8?q?feat:=20=ED=8E=B8=EC=A7=80=EC=A7=80=20?= =?UTF-8?q?=EA=B5=AC=EB=A7=A4,=20=EC=B7=A8=EC=86=8C=20=ED=81=B4=EB=A6=AD?= =?UTF-8?q?=EC=8B=9C=20=EA=B8=B0=EB=8A=A5=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- front-end/src/components/Store/StoreMain.jsx | 28 +++++++++++++++----- 1 file changed, 22 insertions(+), 6 deletions(-) diff --git a/front-end/src/components/Store/StoreMain.jsx b/front-end/src/components/Store/StoreMain.jsx index 631b56e..2f9b44b 100644 --- a/front-end/src/components/Store/StoreMain.jsx +++ b/front-end/src/components/Store/StoreMain.jsx @@ -577,6 +577,7 @@ export default function StoreMain() { const endIndex = startIndex + itemsPerPage; // 현재 페이지에서 마지막 아이템의 인덱스 const [selectedLetterIndex, setSelectedLetterIndex] = useState(null); + const [showCoinWrapper, setShowCoinWrapper] = useState(Array(dummyLetter.length).fill(true)); const handleLetterInnerBoxClick = (index) => { setSelectedLetterIndex(index === selectedLetterIndex ? null : index); // 페이징 기능 함수 @@ -589,6 +590,19 @@ export default function StoreMain() { //해당 편지지의 인덱스를 selectedLetterIndex로 설정하고 선택된 편지지에 구매 관련 컴포넌트가 나타납니다. }; + const handleCancelButtonClick = () => { + setSelectedLetterIndex(null); // 선택된 편지지 인덱스 초기화 + }; + + const handlePurchaseButtonClick = (index) => { + setSelectedLetterIndex(index); // 선택된 편지지 인덱스 + setShowCoinWrapper((prev) => { + const updatedShowCoinWrapper = [...prev]; + updatedShowCoinWrapper[index] = false; + return updatedShowCoinWrapper; + }); + }; + return (
@@ -680,10 +694,10 @@ export default function StoreMain() { 구매하시겠습니까? - + 취소 - + handlePurchaseButtonClick(index)}> 구매 @@ -691,10 +705,12 @@ export default function StoreMain() { )} {letter.NickName} {/* 편지지 이름 */} - - - {letter.Price} {/* Price */} - + {showCoinWrapper[index] && ( + + + {letter.Price} + + )} From 5ca6188d69a41be98fe2df73f01fbc96281201e2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=95=88=ED=98=9C=EC=97=B0?= Date: Tue, 30 Jan 2024 00:57:06 +0900 Subject: [PATCH 13/15] =?UTF-8?q?feat:=20=EC=83=81=EC=A0=90=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EC=9A=B0=ED=91=9C=20=EA=B5=AC=EB=A7=A4=20?= =?UTF-8?q?=EA=B8=B0=EB=8A=A5=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- front-end/src/components/Store/StoreMain.jsx | 197 ++++++++++++++----- 1 file changed, 151 insertions(+), 46 deletions(-) diff --git a/front-end/src/components/Store/StoreMain.jsx b/front-end/src/components/Store/StoreMain.jsx index 2f9b44b..781d0bb 100644 --- a/front-end/src/components/Store/StoreMain.jsx +++ b/front-end/src/components/Store/StoreMain.jsx @@ -42,33 +42,33 @@ const dummyLetter = [ ]; const dummyCollectionStamp = [ - {id: 1, NickName: "우표 이름"}, - {id: 2, NickName: "우표 이름"}, - {id: 3, NickName: "우표 이름"}, - {id: 4, NickName: "우표 이름"}, - {id: 5, NickName: "우표 이름"}, - {id: 6, NickName: "우표 이름"}, - {id: 7, NickName: "우표 이름"}, - {id: 8, NickName: "우표 이름"}, - {id: 9, NickName: "우표 이름"}, - {id: 10, NickName: "우표 이름"}, - {id: 11, NickName: "우표 이름"}, - {id: 12, NickName: "우표 이름"}, - {id: 13, NickName: "우표 이름"}, - - {id: 14, NickName: "우표 이름"}, - {id: 15, NickName: "우표 이름"}, - {id: 16, NickName: "우표 이름"}, - {id: 17, NickName: "우표 이름"}, - {id: 18, NickName: "우표 이름"}, - {id: 19, NickName: "우표 이름"}, - {id: 20, NickName: "우표 이름"}, - {id: 21, NickName: "우표 이름"}, - {id: 22, NickName: "우표 이름"}, - {id: 23, NickName: "우표 이름"}, - {id: 24, NickName: "우표 이름"}, - - {id: 25, NickName: "우표 이름"}, + {id: 1, NickName: "우표 이름", Price: "30"}, + {id: 2, NickName: "우표 이름", Price: "30"}, + {id: 3, NickName: "우표 이름", Price: "30"}, + {id: 4, NickName: "우표 이름", Price: "30"}, + {id: 5, NickName: "우표 이름", Price: "30"}, + {id: 6, NickName: "우표 이름", Price: "30"}, + {id: 7, NickName: "우표 이름", Price: "30"}, + {id: 8, NickName: "우표 이름", Price: "30"}, + {id: 9, NickName: "우표 이름", Price: "30"}, + {id: 10, NickName: "우표 이름", Price: "30"}, + {id: 11, NickName: "우표 이름", Price: "30"}, + {id: 12, NickName: "우표 이름", Price: "30"}, + {id: 13, NickName: "우표 이름", Price: "30"}, + + {id: 14, NickName: "우표 이름", Price: "30"}, + {id: 15, NickName: "우표 이름", Price: "30"}, + {id: 16, NickName: "우표 이름", Price: "30"}, + {id: 17, NickName: "우표 이름", Price: "30"}, + {id: 18, NickName: "우표 이름", Price: "30"}, + {id: 19, NickName: "우표 이름", Price: "30"}, + {id: 20, NickName: "우표 이름", Price: "30"}, + {id: 21, NickName: "우표 이름", Price: "30"}, + {id: 22, NickName: "우표 이름", Price: "30"}, + {id: 23, NickName: "우표 이름", Price: "30"}, + {id: 24, NickName: "우표 이름", Price: "30"}, + + {id: 25, NickName: "우표 이름", Price: "30"}, ]; //상점 @@ -361,7 +361,7 @@ const LetterCoinCount = styled.div` `; //편지지 클릭시 구매 버튼 생성 -const PurchaseContainer = styled.div` +const LetterPurchaseContainer = styled.div` display: ${({ isActive }) => (isActive ? 'flex' : 'none')}; justify-content: space-between; align-items: center; @@ -373,7 +373,7 @@ const PurchaseContainer = styled.div` z-index: 2; `; -const QuestionText = styled.div` +const LetterQuestionText = styled.div` width: 164px; height: 22px; left: 33px; @@ -387,7 +387,7 @@ const QuestionText = styled.div` word-wrap: break-word; `; -const ButtonContainer = styled.div` +const LetterButtonContainer = styled.div` width: 228px; height: 49px; position: absolute; @@ -395,7 +395,7 @@ const ButtonContainer = styled.div` top: 64px; `; -const CancelButton = styled.button` +const LetterCancelButton = styled.button` width: 102px; height: 49px; padding-left: 35px; @@ -415,7 +415,7 @@ const CancelButton = styled.button` cursor: pointer; `; -const PurchaseButton = styled.button` +const LetterPurchaseButton = styled.button` width: 102px; height: 49px; padding-left: 35px; @@ -435,7 +435,7 @@ const PurchaseButton = styled.button` cursor: pointer; `; -const PurchaseText = styled.div` +const LetterPurchaseText = styled.div` width: 32px; height: 21px; position: absolute; @@ -472,7 +472,9 @@ const StampBackground = styled.div` left: 0; top: 0; position: absolute; - background: #CECECE; + background: ${({ isActive }) => (isActive ? 'rgba(46.99, 40.54, 38.50, 0.80)' : '#CECECE')}; + cursor: pointer; + z-index: 1; `; const StampTextWrapper = styled.div` @@ -496,6 +498,86 @@ const StampText = styled.div` word-wrap: break-word; `; +//우표 클릭시 구매 버튼 생성 +const StampPurchaseContainer = styled.div` + display: ${({ isActive }) => (isActive ? 'flex' : 'none')}; + justify-content: space-between; + align-items: center; + width: 164px; + height: 128px; + position: relative; + left: 55.8px; + top: 120px; + z-index: 2; +`; + +const StampQuestionText = styled.div` + width: 164px; + height: 22px; + left: 0; + top: 0; + position: absolute; + color: white; + font-size: 22px; + font-family: 'Pretendard'; + font-weight: 500; + line-height: 22px; + word-wrap: break-word; +`; + +const StampButtonContainer = styled.div` + width: 164px; + height: 41px; + position: absolute; + left: 0; + top: 87px; +`; + +const StampCancelButton = styled.button` + width: 72px; + height: 41px; + padding: 10px 20px; + background: white; + left: 0; + top: 0; + position: absolute; + border-radius: 10px; + border: 1px #757575 solid; + justify-content: center; + align-items: center; + gap: 10px; + display: inline-flex; + cursor: pointer; +`; + +const StampPurchaseButton = styled.button` + width: 72px; + height: 41px; + padding: 10px 20px; + background: #C90000; + left: 92px; + top: 0; + position: absolute; + border-radius: 10px; + border: 1px #757575 solid; + justify-content: center; + align-items: center; + gap: 10px; + display: inline-flex; + cursor: pointer; +`; + +const StampPurchaseText = styled.div` + width: 32px; + height: 21px; + position: absolute; + color: #757575; + font-size: 18px; + font-family: 'Pretendard'; + font-weight: 500; + word-wrap: break-word; +`; + //페이징 const PaginationContainer = styled.div` align-items: center; @@ -601,6 +683,7 @@ export default function StoreMain() { updatedShowCoinWrapper[index] = false; return updatedShowCoinWrapper; }); + setSelectedLetterIndex(null); // 선택된 편지지 인덱스 초기화로 구매 버튼 후 창 닫기 }; return ( @@ -691,17 +774,17 @@ export default function StoreMain() { isActive={index === selectedLetterIndex} /> {index === selectedLetterIndex && ( - - 구매하시겠습니까? - - - 취소 - - handlePurchaseButtonClick(index)}> - 구매 - - - + + 구매하시겠습니까? + + + 취소 + + handlePurchaseButtonClick(index)}> + 구매 + + + )} {letter.NickName} {/* 편지지 이름 */} @@ -785,9 +868,31 @@ export default function StoreMain() { {dummyCollectionStamp.slice(startIndex, endIndex).map((stamp, index) => ( - + handleLetterBackgroundClick(index)} + isActive={index === selectedLetterIndex} + /> + {index === selectedLetterIndex && ( + + 구매하시겠습니까? + + + 취소 + + handlePurchaseButtonClick(index)}> + 구매 + + + + )} {stamp.NickName} {/* 편지지 이름 */} + {showCoinWrapper[index] && ( + + + {stamp.Price} + + )} From 1cd061572b7dd573c0fc0f74f41c8d1e3bcee75f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=95=88=ED=98=9C=EC=97=B0?= Date: Tue, 30 Jan 2024 01:13:11 +0900 Subject: [PATCH 14/15] =?UTF-8?q?docs:=20=EC=83=81=EC=A0=90=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=ED=8E=B8=EC=A7=80=EC=A7=80=EC=99=80=20?= =?UTF-8?q?=EC=9A=B0=ED=91=9C=20=ED=95=98=EB=82=98=EC=9D=98=20=ED=95=A8?= =?UTF-8?q?=EC=88=98=EB=A1=9C=20=EC=83=9D=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- front-end/src/components/Store/StoreMain.jsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/front-end/src/components/Store/StoreMain.jsx b/front-end/src/components/Store/StoreMain.jsx index 781d0bb..e1fadf4 100644 --- a/front-end/src/components/Store/StoreMain.jsx +++ b/front-end/src/components/Store/StoreMain.jsx @@ -623,6 +623,9 @@ const NextButtonImg = styled.img` cursor: pointer; `; + + + export default function StoreMain() { const navigate = useNavigate(); const [currentTab, setCurrentTab] = useState('tab1'); From 6a48c33024bb0b45a7c6066a0c01bf95a4777e51 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=95=88=ED=98=9C=EC=97=B0?= Date: Tue, 30 Jan 2024 01:50:49 +0900 Subject: [PATCH 15/15] =?UTF-8?q?docs:=20=ED=8E=B8=EC=A7=80=EC=A7=80=20?= =?UTF-8?q?=EA=B5=AC=EB=A7=A4=EC=99=80=20=ED=8E=98=EC=9D=B4=EC=A7=80=20?= =?UTF-8?q?=EC=9D=B4=EB=8F=99=20=EA=B4=80=EB=A0=A8=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- front-end/src/components/Store/StoreMain.jsx | 481 ++++++++++--------- 1 file changed, 261 insertions(+), 220 deletions(-) diff --git a/front-end/src/components/Store/StoreMain.jsx b/front-end/src/components/Store/StoreMain.jsx index e1fadf4..8ce88fe 100644 --- a/front-end/src/components/Store/StoreMain.jsx +++ b/front-end/src/components/Store/StoreMain.jsx @@ -1,4 +1,4 @@ -import React, { useState } from 'react'; +import React, { useState, useEffect } from 'react'; import styled from 'styled-components'; import Header from '../Header/Header'; import { useNavigate } from 'react-router-dom'; @@ -624,14 +624,16 @@ const NextButtonImg = styled.img` `; - - -export default function StoreMain() { - const navigate = useNavigate(); - const [currentTab, setCurrentTab] = useState('tab1'); - +function LetterPage() { const [isDropdownOpen, setDropdownOpen] = useState(false); // 드롭다운의 열림/닫힘 상태를 관리하는 상태 변수 const [selectedOption, setSelectedOption] = useState('인기순'); // 선택한 옵션을 관리하는 상태 변수 + const itemsPerPage = 12; // 한 페이지에 표시할 아이템 개수 + const totalPages = Math.ceil(dummyLetter.length / itemsPerPage); // 전체 페이지 수 + const [currentPage, setCurrentPage] = useState(1); // 현재 페이지 + const startIndex = (currentPage - 1) * itemsPerPage; // 현재 페이지에서 첫 번째 아이템의 인덱스 + const endIndex = startIndex + itemsPerPage; // 현재 페이지에서 마지막 아이템의 인덱스 + const [selectedLetterIndex, setSelectedLetterIndex] = useState(null); + const [showCoinWrapper, setShowCoinWrapper] = useState(Array(dummyLetter.length).fill(true)); const handleDropdownToggle = () => { setDropdownOpen(!isDropdownOpen); // 드롭다운의 열림/닫힘 상태를 토글 @@ -642,14 +644,10 @@ export default function StoreMain() { setDropdownOpen(false); // 드롭다운 닫기 }; - const itemsPerPage = 12; // 한 페이지에 표시할 아이템 개수 - const totalPages = Math.ceil(dummyLetter.length / itemsPerPage); // 전체 페이지 수 - - const [currentPage, setCurrentPage] = useState(1); // 현재 페이지 - const handlePageChange = (page) => { setCurrentPage(page); // 페이지 변경 setSelectedLetterIndex(null); // 페이지 변경 시 selectedLetterIndex 초기화 + setShowCoinWrapper(Array(dummyCollectionStamp.length).fill(true)); // 페이지 이동 시 showCoinWrapper 초기화 }; const handleNextPage = () => { @@ -658,12 +656,6 @@ export default function StoreMain() { setSelectedLetterIndex(null); // 페이지 변경 시 selectedLetterIndex 초기화 }; - const startIndex = (currentPage - 1) * itemsPerPage; // 현재 페이지에서 첫 번째 아이템의 인덱스 - const endIndex = startIndex + itemsPerPage; // 현재 페이지에서 마지막 아이템의 인덱스 - - const [selectedLetterIndex, setSelectedLetterIndex] = useState(null); - const [showCoinWrapper, setShowCoinWrapper] = useState(Array(dummyLetter.length).fill(true)); - const handleLetterInnerBoxClick = (index) => { setSelectedLetterIndex(index === selectedLetterIndex ? null : index); // 페이징 기능 함수 // 클릭된 편지지의 인덱스를 설정하기 위해 setSelectedLetterIndex를 호출합니다. @@ -689,6 +681,255 @@ export default function StoreMain() { setSelectedLetterIndex(null); // 선택된 편지지 인덱스 초기화로 구매 버튼 후 창 닫기 }; + useEffect(() => { + setSelectedLetterIndex(null); + setShowCoinWrapper(Array(dummyCollectionStamp.length).fill(true)); // 페이지 이동 시 showCoinWrapper 초기화 + }, [currentPage]); + + return ( +
+ + +
+ + + + {isDropdownOpen && ( + + + + + + + + )} +
+ + + + {dummyLetter.slice(startIndex, endIndex).map((letter, index) => ( + + + handleLetterBackgroundClick(index)} + isActive={index === selectedLetterIndex} + /> + {index === selectedLetterIndex && ( + + 구매하시겠습니까? + + + 취소 + + handlePurchaseButtonClick(index)}> + 구매 + + + + )} + + {letter.NickName} + {showCoinWrapper[index] && ( + + + {letter.Price} + + )} + + + + ))} + + + + + {Array.from({ length: totalPages }, (_, index) => ( + + handlePageChange(index + 1)} + > + {index + 1} + + + ))} + + + + +
+ ); +} + +function StampPage() { + const [isDropdownOpen, setDropdownOpen] = useState(false); + const [selectedOption, setSelectedOption] = useState('인기순'); + const itemsPerPage = 12; + const totalPages = Math.ceil(dummyCollectionStamp.length / itemsPerPage); + const [currentPage, setCurrentPage] = useState(1); + const startIndex = (currentPage - 1) * itemsPerPage; // 현재 페이지에서 첫 번째 아이템의 인덱스 + const endIndex = startIndex + itemsPerPage; // 현재 페이지에서 마지막 아이템의 인덱스 + const [selectedStampIndex, setSelectedStampIndex] = useState(null); + const [showCoinWrapper, setShowCoinWrapper] = useState(Array(dummyCollectionStamp.length).fill(true)); + + const handleDropdownToggle = () => { + setDropdownOpen(!isDropdownOpen); + }; + + const handleOptionSelect = (option) => { + setSelectedOption(option); + setDropdownOpen(false); + }; + + const handlePageChange = (page) => { + setCurrentPage(page); + setSelectedStampIndex(null); // 페이지 이동 시 selectedStampIndex 초기화 + setShowCoinWrapper(Array(dummyCollectionStamp.length).fill(true)); // 페이지 이동 시 showCoinWrapper 초기화 + }; + + const handleNextPage = () => { + const lastPage = totalPages; + handlePageChange(lastPage); + setSelectedStampIndex(null); // 페이지 이동 시 selectedStampIndex 초기화 + }; + + const handleStampInnerBoxClick = (index) => { + setSelectedStampIndex(index === selectedStampIndex ? null : index); + }; + + const handleStampBackgroundClick = (index) => { + setSelectedStampIndex(index); + }; + + const handleCancelButtonClick = () => { + setSelectedStampIndex(null); + }; + + const handlePurchaseButtonClick = (index) => { + setSelectedStampIndex(index); + setShowCoinWrapper((prev) => { + const updatedShowCoinWrapper = [...prev]; + updatedShowCoinWrapper[index] = false; + return updatedShowCoinWrapper; + }); + setSelectedStampIndex(null); + }; + + useEffect(() => { + setSelectedStampIndex(null); + setShowCoinWrapper(Array(dummyCollectionStamp.length).fill(true)); // 페이지 이동 시 showCoinWrapper 초기화 + }, [currentPage]); + + return ( +
+ + +
+ + + + {isDropdownOpen && ( + + + + + + + + )} +
+ + + + {dummyCollectionStamp.slice(startIndex, endIndex).map((stamp, index) => ( + + + handleStampBackgroundClick(index)} + isActive={index === selectedStampIndex} + /> + {index === selectedStampIndex && ( + + 구매하시겠습니까? + + + 취소 + + handlePurchaseButtonClick(index)}> + 구매 + + + + )} + + {stamp.NickName} + {showCoinWrapper[index] && ( + + + {stamp.Price} + + )} + + + + ))} + + + + + {Array.from({ length: totalPages }, (_, index) => ( + + handlePageChange(index + 1)} + > + {index + 1} + + + ))} + + + + +
+ ); +} + +export default function StoreMain() { + const navigate = useNavigate(); + const [currentTab, setCurrentTab] = useState('tab1'); + return (
@@ -720,208 +961,8 @@ export default function StoreMain() { - {currentTab === 'tab1' && ( -
- - -
- - - - {isDropdownOpen && ( - - - - - - - - )} -
- - - - {dummyLetter.slice(startIndex, endIndex).map((letter, index) => ( - - - handleLetterBackgroundClick(index)} - isActive={index === selectedLetterIndex} - /> - {index === selectedLetterIndex && ( - - 구매하시겠습니까? - - - 취소 - - handlePurchaseButtonClick(index)}> - 구매 - - - - )} - - {letter.NickName} {/* 편지지 이름 */} - {showCoinWrapper[index] && ( - - - {letter.Price} - - )} - - - - ))} - - - {/* 페이징 네비게이션 */} - - - {Array.from({ length: totalPages }, (_, index) => ( - - handlePageChange(index + 1)} - > - {index + 1} - - - ))} - - - - - -
- )} - - {currentTab === 'tab2' && ( -
- - -
- - - - {isDropdownOpen && ( - - - - - - - - )} -
- - - - {dummyCollectionStamp.slice(startIndex, endIndex).map((stamp, index) => ( - - - handleLetterBackgroundClick(index)} - isActive={index === selectedLetterIndex} - /> - {index === selectedLetterIndex && ( - - 구매하시겠습니까? - - - 취소 - - handlePurchaseButtonClick(index)}> - 구매 - - - - )} - - {stamp.NickName} {/* 편지지 이름 */} - {showCoinWrapper[index] && ( - - - {stamp.Price} - - )} - - - - ))} - - - {/* 페이징 네비게이션 */} - - - {Array.from({ length: totalPages }, (_, index) => ( - - handleLetterInnerBoxClick(index)} - isActive={index === selectedLetterIndex} - > - {index + 1} - - - ))} - - - - -
- )} + {currentTab === 'tab1' && } + {currentTab === 'tab2' && }
) }