From 664fcb2cd8ad513c32bcc5517dd84c6043c9989a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B9=80=ED=95=98=EC=9D=80?= Date: Sun, 29 Dec 2024 16:41:44 +0900 Subject: [PATCH 1/7] =?UTF-8?q?Feat:=20=EB=82=B4=20=EB=93=B1=EA=B8=89/?= =?UTF-8?q?=EB=B1=83=EC=A7=80=20=EB=AA=A8=EB=8B=AC=20=EB=82=B4=EB=B6=80=20?= =?UTF-8?q?LevelInfoBox=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EA=B5=AC?= =?UTF-8?q?=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/commons/Image/index.tsx | 7 +-- .../LevelInfoBox/LevelInfoBox.module.scss | 49 +++++++++++++++++++ .../AllLevelInfoModal/LevelInfoBox/index.tsx | 41 ++++++++++++++++ src/type/type.d.ts | 16 ++++++ 4 files changed, 108 insertions(+), 5 deletions(-) create mode 100644 src/components/domains/myPage/contents/Level/MyLevelInfo/AllLevelInfoModal/LevelInfoBox/LevelInfoBox.module.scss create mode 100644 src/components/domains/myPage/contents/Level/MyLevelInfo/AllLevelInfoModal/LevelInfoBox/index.tsx diff --git a/src/components/commons/Image/index.tsx b/src/components/commons/Image/index.tsx index 09108ad..014bab4 100644 --- a/src/components/commons/Image/index.tsx +++ b/src/components/commons/Image/index.tsx @@ -1,12 +1,9 @@ -import styles from "./Image.module.scss"; +import { ImageInfo } from "@/type/type"; import classNames from "classnames/bind"; +import styles from "./Image.module.scss"; const cx = classNames.bind(styles); -type ImageInfo = { - src: string; - alt: string; -}; type ObjectFit = "fill" | "contain" | "cover" | "scale-down" | "none"; interface ImageProps { diff --git a/src/components/domains/myPage/contents/Level/MyLevelInfo/AllLevelInfoModal/LevelInfoBox/LevelInfoBox.module.scss b/src/components/domains/myPage/contents/Level/MyLevelInfo/AllLevelInfoModal/LevelInfoBox/LevelInfoBox.module.scss new file mode 100644 index 0000000..90f73ae --- /dev/null +++ b/src/components/domains/myPage/contents/Level/MyLevelInfo/AllLevelInfoModal/LevelInfoBox/LevelInfoBox.module.scss @@ -0,0 +1,49 @@ +.level-info-box { + display: grid; + grid-template-areas: + "level requirement" + ". description"; + justify-content: start; + align-items: center; + padding: 3rem 0; + gap: 1rem 1.4rem; + + &__level { + @include flexbox(); + gap: 0.7rem; + grid-area: level; + + &-img { + grid-area: img; + width: 4rem; + height: 4rem; + border-radius: 50%; + box-shadow: 0px 3px 16px 0px rgba(0, 0, 0, 0.08); + overflow: hidden; + } + + &-name { + @include text-style(1.4, 700, $black30); + } + } + + &__requirement { + @include text-style(1.4, 600, $black30); + grid-area: requirement; + + &-additionalInfo { + @include text-style(1.1, 500, $black30); + display: block; + } + } + + &__description { + @include text-style(1.3, 500, $black30); + grid-area: description; + + &-additionalInfo { + @include text-style(1.1, 500, $black30); + display: block; + } + } +} diff --git a/src/components/domains/myPage/contents/Level/MyLevelInfo/AllLevelInfoModal/LevelInfoBox/index.tsx b/src/components/domains/myPage/contents/Level/MyLevelInfo/AllLevelInfoModal/LevelInfoBox/index.tsx new file mode 100644 index 0000000..8102abc --- /dev/null +++ b/src/components/domains/myPage/contents/Level/MyLevelInfo/AllLevelInfoModal/LevelInfoBox/index.tsx @@ -0,0 +1,41 @@ +import Image from "@/components/commons/Image"; +import { UserLevelInfo } from "@/type/type"; + +import classNames from "classnames/bind"; +import styles from "./LevelInfoBox.module.scss"; + +const cx = classNames.bind(styles); + +interface LevelInfoBoxProps { + info: UserLevelInfo; +} + +const LevelInfoBox = ({ info }: LevelInfoBoxProps) => { + const { level, imgInfo, requirement, benefits } = info; + + return ( +
+
+
+ +
+

{level}

+
+ +

+ {requirement.description} + {requirement.additionalInfo && ( + {info.requirement.additionalInfo} + )} +

+ +

+ {benefits.description} + {benefits.additionalInfo && ( + {benefits.additionalInfo} + )} +

+
+ ); +}; +export default LevelInfoBox; diff --git a/src/type/type.d.ts b/src/type/type.d.ts index 571818f..5835111 100644 --- a/src/type/type.d.ts +++ b/src/type/type.d.ts @@ -2,6 +2,11 @@ import { CourseReview } from "@/api/course/type"; import { DestinationReview } from "@/api/destination/type"; import { tagResponseDto } from "@/api/tag/type"; +export type ImageInfo = { + src: string; + alt: string; +}; + export interface TabBarIconProps { title: string; color: string; @@ -81,3 +86,14 @@ export interface RefinedReview { export interface RequestOptions { requireAuth: boolean; } + +export interface UserLevelInfo { + id: number; + level: string; + imgInfo: ImageInfo; + requirement: { description: string; additionalInfo?: string }; + benefits: { + description: string; + additionalInfo?: string; + }; +} From 70a04c475074c9e19f782c37117c77580649b721 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B9=80=ED=95=98=EC=9D=80?= Date: Mon, 30 Dec 2024 11:26:15 +0900 Subject: [PATCH 2/7] =?UTF-8?q?Feat:=20=EB=A7=88=EC=9D=B4=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EB=82=B4=20=EB=93=B1=EA=B8=89/=EB=B1=83?= =?UTF-8?q?=EC=A7=80=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EB=AA=A8=EB=8B=AC=20?= =?UTF-8?q?=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../AllLevelInfoModal.module.scss | 52 +++++++++++++++++++ .../LevelInfoBox/LevelInfoBox.module.scss | 34 ++++++++++++ .../MyLevelInfo/AllLevelInfoModal/index.tsx | 41 +++++++++++++++ .../contents/Level/MyLevelInfo/index.tsx | 18 +++++++ .../domains/myPage/contents/Level/index.tsx | 4 +- src/constants/userlevelInfoList.ts | 40 ++++++++++++++ 6 files changed, 188 insertions(+), 1 deletion(-) create mode 100644 src/components/domains/myPage/contents/Level/MyLevelInfo/AllLevelInfoModal/AllLevelInfoModal.module.scss create mode 100644 src/components/domains/myPage/contents/Level/MyLevelInfo/AllLevelInfoModal/index.tsx create mode 100644 src/components/domains/myPage/contents/Level/MyLevelInfo/index.tsx create mode 100644 src/constants/userlevelInfoList.ts diff --git a/src/components/domains/myPage/contents/Level/MyLevelInfo/AllLevelInfoModal/AllLevelInfoModal.module.scss b/src/components/domains/myPage/contents/Level/MyLevelInfo/AllLevelInfoModal/AllLevelInfoModal.module.scss new file mode 100644 index 0000000..ee6570f --- /dev/null +++ b/src/components/domains/myPage/contents/Level/MyLevelInfo/AllLevelInfoModal/AllLevelInfoModal.module.scss @@ -0,0 +1,52 @@ +.all-level-info-modal { + @include column-flexbox(); + gap: 0.32rem; + background-color: white; + border-radius: 1rem; + width: 64rem; + padding: 2.4rem; + + @include responsive("M") { + width: calc(100% - 4rem); + padding: 2rem; + } + + &__close-btn { + align-self: flex-end; + width: 2.4rem; + height: 2.4rem; + cursor: pointer; + + @include responsive("M") { + width: 2rem; + height: 2rem; + } + } + + &__header { + @include flexbox(); + + &-logo { + width: 8.4rem; + + @include responsive("M") { + width: 6rem; + } + } + + &-title { + @include text-style(1.6, 700, $black30); + text-align: center; + + @include responsive("M") { + font-size: 1.2rem; + } + } + } + + &__level-info-list { + &-element:not(:last-child) { + border-bottom: 0.1rem solid $gray20; + } + } +} diff --git a/src/components/domains/myPage/contents/Level/MyLevelInfo/AllLevelInfoModal/LevelInfoBox/LevelInfoBox.module.scss b/src/components/domains/myPage/contents/Level/MyLevelInfo/AllLevelInfoModal/LevelInfoBox/LevelInfoBox.module.scss index 90f73ae..227a0e8 100644 --- a/src/components/domains/myPage/contents/Level/MyLevelInfo/AllLevelInfoModal/LevelInfoBox/LevelInfoBox.module.scss +++ b/src/components/domains/myPage/contents/Level/MyLevelInfo/AllLevelInfoModal/LevelInfoBox/LevelInfoBox.module.scss @@ -8,11 +8,20 @@ padding: 3rem 0; gap: 1rem 1.4rem; + @include responsive("M") { + padding: 2.4rem 0; + gap: 0.8rem 1rem; + } + &__level { @include flexbox(); gap: 0.7rem; grid-area: level; + @include responsive("M") { + gap: 0.4rem; + } + &-img { grid-area: img; width: 4rem; @@ -20,10 +29,19 @@ border-radius: 50%; box-shadow: 0px 3px 16px 0px rgba(0, 0, 0, 0.08); overflow: hidden; + + @include responsive("M") { + width: 3.6rem; + height: 3.6rem; + } } &-name { @include text-style(1.4, 700, $black30); + + @include responsive("M") { + font-size: 1.2rem; + } } } @@ -31,9 +49,17 @@ @include text-style(1.4, 600, $black30); grid-area: requirement; + @include responsive("M") { + font-size: 1.2rem; + } + &-additionalInfo { @include text-style(1.1, 500, $black30); display: block; + + @include responsive("M") { + font-size: 1rem; + } } } @@ -41,9 +67,17 @@ @include text-style(1.3, 500, $black30); grid-area: description; + @include responsive("M") { + font-size: 1.2rem; + } + &-additionalInfo { @include text-style(1.1, 500, $black30); display: block; + + @include responsive("M") { + font-size: 1rem; + } } } } diff --git a/src/components/domains/myPage/contents/Level/MyLevelInfo/AllLevelInfoModal/index.tsx b/src/components/domains/myPage/contents/Level/MyLevelInfo/AllLevelInfoModal/index.tsx new file mode 100644 index 0000000..56813dc --- /dev/null +++ b/src/components/domains/myPage/contents/Level/MyLevelInfo/AllLevelInfoModal/index.tsx @@ -0,0 +1,41 @@ +import Image from "@/components/commons/Image"; +import Modal from "@/components/commons/Modal"; +import { IMAGES } from "@/constants/images"; +import { USER_LEVEL_INFO_LIST } from "@/constants/userlevelInfoList"; +import LevelInfoBox from "./LevelInfoBox"; + +import classNames from "classnames/bind"; +import styles from "./AllLevelInfoModal.module.scss"; + +const cx = classNames.bind(styles); + +interface AllLevelInfoModalProps { + isModalOpen: boolean; + onModalClose: () => void; +} + +const AllLevelInfoModal = ({ isModalOpen, onModalClose }: AllLevelInfoModalProps) => { + return ( + +
+ +
+
+ +

등급 안내

+
+
+
    + {USER_LEVEL_INFO_LIST.map((info) => ( +
  • + +
    • + ))} +
+
+ + ); +}; +export default AllLevelInfoModal; diff --git a/src/components/domains/myPage/contents/Level/MyLevelInfo/index.tsx b/src/components/domains/myPage/contents/Level/MyLevelInfo/index.tsx new file mode 100644 index 0000000..7d3c7ec --- /dev/null +++ b/src/components/domains/myPage/contents/Level/MyLevelInfo/index.tsx @@ -0,0 +1,18 @@ +import { useState } from "react"; +import AllLevelInfoModal from "./AllLevelInfoModal"; + +const MyLevelInfo = () => { + const [isModalOpen, setIsModalOpen] = useState(false); + + return ( + <> +
+ 내 등급 + +
+ + setIsModalOpen(false)} /> + + ); +}; +export default MyLevelInfo; diff --git a/src/components/domains/myPage/contents/Level/index.tsx b/src/components/domains/myPage/contents/Level/index.tsx index 9aefa77..603b83e 100644 --- a/src/components/domains/myPage/contents/Level/index.tsx +++ b/src/components/domains/myPage/contents/Level/index.tsx @@ -1,7 +1,9 @@ +import MyLevelInfo from "./MyLevelInfo"; + const Level = () => { return ( <> -

Level Component

+ ); }; diff --git a/src/constants/userlevelInfoList.ts b/src/constants/userlevelInfoList.ts new file mode 100644 index 0000000..0f84f37 --- /dev/null +++ b/src/constants/userlevelInfoList.ts @@ -0,0 +1,40 @@ +import { UserLevelInfo } from "@/type/type"; +import { IMAGES } from "./images"; + +export const USER_LEVEL_INFO_LIST: UserLevelInfo[] = [ + { + id: 1, + level: "초보여행자", + imgInfo: IMAGES.PartyIcon, + requirement: { + description: "코스메이커 회원가입 시", + }, + benefits: { + description: "여행지 등록/수정 요청 가능", + }, + }, + { + id: 2, + level: "중급여행자", + imgInfo: IMAGES.PartyIcon, + requirement: { + description: "리뷰 댓글 50개 작성 시", + }, + benefits: { + description: "코스 작성 가능", + }, + }, + { + id: 3, + level: "프로여행자", + imgInfo: IMAGES.PartyIcon, + requirement: { + description: "당월 작성된 게시글 중 조회수 1등, 찜수 1등, 좋아요 1등 코스/여행지 작성자", + additionalInfo: "(매월 말일 기준으로 산정)", + }, + benefits: { + description: "여행지 방문 시 특별 혜택", + additionalInfo: "(방문 시 로그인한 나의 등급 화면 제시 필요, 캡처한 이미지는 인정되지 않습니다.)", + }, + }, +]; From f156300483a448f3463383454402aa25fc92c84c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B9=80=ED=95=98=EC=9D=80?= Date: Mon, 30 Dec 2024 12:37:25 +0900 Subject: [PATCH 3/7] =?UTF-8?q?Refactor:=20MyLevelInfo=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=EB=AA=85=EC=9D=84=20MyLevel?= =?UTF-8?q?=EB=A1=9C=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../AllLevelInfoModal.module.scss | 0 .../LevelInfoBox/LevelInfoBox.module.scss | 0 .../AllLevelInfoModal/LevelInfoBox/index.tsx | 0 .../AllLevelInfoModal/index.tsx | 0 .../Level/MyLevel/MyLevel.module.scss | 0 .../myPage/contents/Level/MyLevel/index.tsx | 47 +++++++++++++++++++ .../contents/Level/MyLevelInfo/index.tsx | 18 ------- .../domains/myPage/contents/Level/index.tsx | 4 +- 8 files changed, 49 insertions(+), 20 deletions(-) rename src/components/domains/myPage/contents/Level/{MyLevelInfo => MyLevel}/AllLevelInfoModal/AllLevelInfoModal.module.scss (100%) rename src/components/domains/myPage/contents/Level/{MyLevelInfo => MyLevel}/AllLevelInfoModal/LevelInfoBox/LevelInfoBox.module.scss (100%) rename src/components/domains/myPage/contents/Level/{MyLevelInfo => MyLevel}/AllLevelInfoModal/LevelInfoBox/index.tsx (100%) rename src/components/domains/myPage/contents/Level/{MyLevelInfo => MyLevel}/AllLevelInfoModal/index.tsx (100%) create mode 100644 src/components/domains/myPage/contents/Level/MyLevel/MyLevel.module.scss create mode 100644 src/components/domains/myPage/contents/Level/MyLevel/index.tsx delete mode 100644 src/components/domains/myPage/contents/Level/MyLevelInfo/index.tsx diff --git a/src/components/domains/myPage/contents/Level/MyLevelInfo/AllLevelInfoModal/AllLevelInfoModal.module.scss b/src/components/domains/myPage/contents/Level/MyLevel/AllLevelInfoModal/AllLevelInfoModal.module.scss similarity index 100% rename from src/components/domains/myPage/contents/Level/MyLevelInfo/AllLevelInfoModal/AllLevelInfoModal.module.scss rename to src/components/domains/myPage/contents/Level/MyLevel/AllLevelInfoModal/AllLevelInfoModal.module.scss diff --git a/src/components/domains/myPage/contents/Level/MyLevelInfo/AllLevelInfoModal/LevelInfoBox/LevelInfoBox.module.scss b/src/components/domains/myPage/contents/Level/MyLevel/AllLevelInfoModal/LevelInfoBox/LevelInfoBox.module.scss similarity index 100% rename from src/components/domains/myPage/contents/Level/MyLevelInfo/AllLevelInfoModal/LevelInfoBox/LevelInfoBox.module.scss rename to src/components/domains/myPage/contents/Level/MyLevel/AllLevelInfoModal/LevelInfoBox/LevelInfoBox.module.scss diff --git a/src/components/domains/myPage/contents/Level/MyLevelInfo/AllLevelInfoModal/LevelInfoBox/index.tsx b/src/components/domains/myPage/contents/Level/MyLevel/AllLevelInfoModal/LevelInfoBox/index.tsx similarity index 100% rename from src/components/domains/myPage/contents/Level/MyLevelInfo/AllLevelInfoModal/LevelInfoBox/index.tsx rename to src/components/domains/myPage/contents/Level/MyLevel/AllLevelInfoModal/LevelInfoBox/index.tsx diff --git a/src/components/domains/myPage/contents/Level/MyLevelInfo/AllLevelInfoModal/index.tsx b/src/components/domains/myPage/contents/Level/MyLevel/AllLevelInfoModal/index.tsx similarity index 100% rename from src/components/domains/myPage/contents/Level/MyLevelInfo/AllLevelInfoModal/index.tsx rename to src/components/domains/myPage/contents/Level/MyLevel/AllLevelInfoModal/index.tsx diff --git a/src/components/domains/myPage/contents/Level/MyLevel/MyLevel.module.scss b/src/components/domains/myPage/contents/Level/MyLevel/MyLevel.module.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/components/domains/myPage/contents/Level/MyLevel/index.tsx b/src/components/domains/myPage/contents/Level/MyLevel/index.tsx new file mode 100644 index 0000000..3f245c5 --- /dev/null +++ b/src/components/domains/myPage/contents/Level/MyLevel/index.tsx @@ -0,0 +1,47 @@ +import { useState } from "react"; + +import Image from "@/components/commons/Image"; +import { IMAGES } from "@/constants/images"; +import { authState } from "@/recoil/authAtom"; +import { useRecoilState } from "recoil"; + +import classNames from "classnames/bind"; +import AllLevelInfoModal from "./AllLevelInfoModal"; +import styles from "./MyLevel.module.scss"; + +const cx = classNames.bind(styles); + +const MyLevel = () => { + const [isModalOpen, setIsModalOpen] = useState(false); + const [auth] = useRecoilState(authState); + + if (!auth) { + return ( +
+

사용자 정보를 불러올 수 없습니다.

+ +
+ ); + } + + const { nickname, role } = auth; + + return ( + <> +
+
+ 내 등급 + +
+

+ {nickname} + 님은 {role} + 입니다. +

+
+ + setIsModalOpen(false)} /> + + ); +}; +export default MyLevel; diff --git a/src/components/domains/myPage/contents/Level/MyLevelInfo/index.tsx b/src/components/domains/myPage/contents/Level/MyLevelInfo/index.tsx deleted file mode 100644 index 7d3c7ec..0000000 --- a/src/components/domains/myPage/contents/Level/MyLevelInfo/index.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import { useState } from "react"; -import AllLevelInfoModal from "./AllLevelInfoModal"; - -const MyLevelInfo = () => { - const [isModalOpen, setIsModalOpen] = useState(false); - - return ( - <> -
- 내 등급 - -
- - setIsModalOpen(false)} /> - - ); -}; -export default MyLevelInfo; diff --git a/src/components/domains/myPage/contents/Level/index.tsx b/src/components/domains/myPage/contents/Level/index.tsx index 603b83e..31663f8 100644 --- a/src/components/domains/myPage/contents/Level/index.tsx +++ b/src/components/domains/myPage/contents/Level/index.tsx @@ -1,9 +1,9 @@ -import MyLevelInfo from "./MyLevelInfo"; +import MyLevel from "./MyLevel"; const Level = () => { return ( <> - + ); }; From f4c65d7fb94b41a198484a46f4213ccb819c9c13 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B9=80=ED=95=98=EC=9D=80?= Date: Tue, 31 Dec 2024 18:41:11 +0900 Subject: [PATCH 4/7] =?UTF-8?q?Feat:=20=EB=82=B4=20=EB=93=B1=EA=B8=89/?= =?UTF-8?q?=EB=B1=83=EC=A7=80=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=83=81?= =?UTF-8?q?=EB=8B=A8=20=EB=A0=88=EB=B2=A8=20=ED=91=9C=EC=A7=80=20=EB=B6=80?= =?UTF-8?q?=EB=B6=84=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Level/MyLevel/MyLevel.module.scss | 27 +++++++++++++++++++ .../myPage/contents/Level/MyLevel/index.tsx | 16 ++++++----- 2 files changed, 36 insertions(+), 7 deletions(-) diff --git a/src/components/domains/myPage/contents/Level/MyLevel/MyLevel.module.scss b/src/components/domains/myPage/contents/Level/MyLevel/MyLevel.module.scss index e69de29..ea0f0ab 100644 --- a/src/components/domains/myPage/contents/Level/MyLevel/MyLevel.module.scss +++ b/src/components/domains/myPage/contents/Level/MyLevel/MyLevel.module.scss @@ -0,0 +1,27 @@ +.my-level { + &__all-info { + @include flexbox(stretch, center); + @include text-style(2.4, 700, $black30); + gap: 0.5rem; + + &-question-mark { + @include flexbox(); + @include text-style(1.6, 600, $gray30); + border: 0.1rem solid $gray30; + border-radius: 50%; + width: 2.4rem; + height: 2.4rem; + cursor: pointer; + } + } + + &__my-info { + @include text-style(3.2, 500, $black30); + padding-top: 2rem; + + &--highlight { + font-weight: 700; + color: $primary40; + } + } +} diff --git a/src/components/domains/myPage/contents/Level/MyLevel/index.tsx b/src/components/domains/myPage/contents/Level/MyLevel/index.tsx index 3f245c5..972d5b1 100644 --- a/src/components/domains/myPage/contents/Level/MyLevel/index.tsx +++ b/src/components/domains/myPage/contents/Level/MyLevel/index.tsx @@ -28,15 +28,17 @@ const MyLevel = () => { return ( <> -
-
+
+
내 등급 - +
-

- {nickname} - 님은 {role} - 입니다. +

+ {nickname} + {" 님은"} {role} + {" 입니다."}

From 83851bd41c194a53b9446b7bc9f040faf08aa79d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B9=80=ED=95=98=EC=9D=80?= Date: Tue, 31 Dec 2024 18:42:08 +0900 Subject: [PATCH 5/7] =?UTF-8?q?Feat:=20=EB=82=B4=20=EB=93=B1=EA=B8=89/?= =?UTF-8?q?=EB=B1=83=EC=A7=80=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EB=A0=88?= =?UTF-8?q?=EB=B2=A8=20=ED=94=84=EB=A1=9C=EA=B7=B8=EB=9E=98=EC=8A=A4?= =?UTF-8?q?=EB=B0=94=20=EB=B6=80=EB=B6=84=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../LevelProgressBar.module.scss | 45 +++++++++++++++++++ .../contents/Level/LevelProgressBar/index.tsx | 41 +++++++++++++++++ .../domains/myPage/contents/Level/index.tsx | 2 + 3 files changed, 88 insertions(+) create mode 100644 src/components/domains/myPage/contents/Level/LevelProgressBar/LevelProgressBar.module.scss create mode 100644 src/components/domains/myPage/contents/Level/LevelProgressBar/index.tsx diff --git a/src/components/domains/myPage/contents/Level/LevelProgressBar/LevelProgressBar.module.scss b/src/components/domains/myPage/contents/Level/LevelProgressBar/LevelProgressBar.module.scss new file mode 100644 index 0000000..7f84802 --- /dev/null +++ b/src/components/domains/myPage/contents/Level/LevelProgressBar/LevelProgressBar.module.scss @@ -0,0 +1,45 @@ +.progress-bar { + &__track { + width: 100%; + height: 1rem; + background-color: $gray20; + border-radius: 0.5rem; + + &-fill { + background: linear-gradient(90deg, $primary30, $primary50); + border-radius: 0.5rem; + height: 100%; + animation: fill-up 0.8s linear forwards; + } + + .beginner { + --target-width: 20%; + } + + .intermediate { + --target-width: 60%; + } + + .expert { + --target-width: 100%; + } + } + + &__labels { + @include flexbox(between, center); + padding-top: 1rem; + + &-el { + @include text-style(1.6, 500, $black30); + } + } +} + +@keyframes fill-up { + from { + width: 0%; + } + to { + width: var(--target-width, 100%); + } +} diff --git a/src/components/domains/myPage/contents/Level/LevelProgressBar/index.tsx b/src/components/domains/myPage/contents/Level/LevelProgressBar/index.tsx new file mode 100644 index 0000000..a611a7a --- /dev/null +++ b/src/components/domains/myPage/contents/Level/LevelProgressBar/index.tsx @@ -0,0 +1,41 @@ +import Image from "@/components/commons/Image"; +import { IMAGES } from "@/constants/images"; +import { authState } from "@/recoil/authAtom"; +import classNames from "classnames/bind"; +import { useRecoilState } from "recoil"; +import styles from "./LevelProgressBar.module.scss"; + +const cx = classNames.bind(styles); + +const LevelProgressBar = () => { + const [auth] = useRecoilState(authState); + + if (!auth) { + return ( +
+

사용자 정보를 불러올 수 없습니다.

+ +
+ ); + } + + return ( +
+
+
+
+
+ 초보여행가 + 중급여행가 + 프로여행가 +
+
+ ); +}; +export default LevelProgressBar; diff --git a/src/components/domains/myPage/contents/Level/index.tsx b/src/components/domains/myPage/contents/Level/index.tsx index 31663f8..233fc79 100644 --- a/src/components/domains/myPage/contents/Level/index.tsx +++ b/src/components/domains/myPage/contents/Level/index.tsx @@ -1,9 +1,11 @@ +import LevelProgressBar from "./LevelProgressBar"; import MyLevel from "./MyLevel"; const Level = () => { return ( <> + ); }; From 72f9ead1f264738b52cf17a6436408090cea2c40 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B9=80=ED=95=98=EC=9D=80?= Date: Tue, 31 Dec 2024 21:36:47 +0900 Subject: [PATCH 6/7] =?UTF-8?q?Feat:=20=EB=82=B4=20=EB=93=B1=EA=B8=89/?= =?UTF-8?q?=EB=B1=83=EC=A7=80=20=ED=8E=98=EC=9D=B4=EC=A7=80=EC=9D=98=20?= =?UTF-8?q?=EB=B1=83=EC=A7=80=20=EB=B6=80=EB=B6=84=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Level/MyBadge/Badge/Badge.module.scss | 27 +++++++++++++++ .../contents/Level/MyBadge/Badge/index.tsx | 27 +++++++++++++++ .../Level/MyBadge/MyBadge.module.scss | 22 ++++++++++++ .../myPage/contents/Level/MyBadge/index.tsx | 34 +++++++++++++++++++ .../domains/myPage/contents/Level/index.tsx | 2 ++ 5 files changed, 112 insertions(+) create mode 100644 src/components/domains/myPage/contents/Level/MyBadge/Badge/Badge.module.scss create mode 100644 src/components/domains/myPage/contents/Level/MyBadge/Badge/index.tsx create mode 100644 src/components/domains/myPage/contents/Level/MyBadge/MyBadge.module.scss create mode 100644 src/components/domains/myPage/contents/Level/MyBadge/index.tsx diff --git a/src/components/domains/myPage/contents/Level/MyBadge/Badge/Badge.module.scss b/src/components/domains/myPage/contents/Level/MyBadge/Badge/Badge.module.scss new file mode 100644 index 0000000..87e9176 --- /dev/null +++ b/src/components/domains/myPage/contents/Level/MyBadge/Badge/Badge.module.scss @@ -0,0 +1,27 @@ +.badge { + @include column-flexbox(); + gap: 1rem; + + &__img { + border-radius: 2rem; + height: 8rem; + background-color: $gray20; // fix: temp + + @include responsive("M") { + } + } + + &__description { + @include column-flexbox(); + + &-title { + @include text-style(1.8, 700, $black30); + } + + &-criteria { + @include text-style(1.4, 500, $black30); + word-break: keep-all; + text-align: center; + } + } +} diff --git a/src/components/domains/myPage/contents/Level/MyBadge/Badge/index.tsx b/src/components/domains/myPage/contents/Level/MyBadge/Badge/index.tsx new file mode 100644 index 0000000..82842d5 --- /dev/null +++ b/src/components/domains/myPage/contents/Level/MyBadge/Badge/index.tsx @@ -0,0 +1,27 @@ +import Image from "@/components/commons/Image"; + +import classNames from "classnames/bind"; +import styles from "./Badge.module.scss"; + +const cx = classNames.bind(styles); + +interface BadgeProps { + img: string; + title: string; + criteria: string; +} + +const Badge = ({ img, title, criteria }: BadgeProps) => { + return ( +
+
+ +
+
+

{title}

+

{criteria}

+
+
+ ); +}; +export default Badge; diff --git a/src/components/domains/myPage/contents/Level/MyBadge/MyBadge.module.scss b/src/components/domains/myPage/contents/Level/MyBadge/MyBadge.module.scss new file mode 100644 index 0000000..772076e --- /dev/null +++ b/src/components/domains/myPage/contents/Level/MyBadge/MyBadge.module.scss @@ -0,0 +1,22 @@ +.my-badge { + &__title { + @include text-style(2.6, 700, $black30); + padding-bottom: 3.2rem; + + @include responsive("M") { + font-size: 2.4rem; + padding-bottom: 2.4rem; + } + } + + &__list { + display: grid; + grid-template-columns: repeat(4, 8rem); + justify-content: space-between; + row-gap: 2rem; + + @include responsive("M") { + grid-template-columns: repeat(3, 8rem); + } + } +} diff --git a/src/components/domains/myPage/contents/Level/MyBadge/index.tsx b/src/components/domains/myPage/contents/Level/MyBadge/index.tsx new file mode 100644 index 0000000..0af4c64 --- /dev/null +++ b/src/components/domains/myPage/contents/Level/MyBadge/index.tsx @@ -0,0 +1,34 @@ +import tempImg from "@/assets/images/child.svg"; +import Badge from "./Badge"; + +import classNames from "classnames/bind"; +import styles from "./MyBadge.module.scss"; + +const cx = classNames.bind(styles); + +const mockData = [ + { id: 1, img: tempImg, title: "여행입문자", criteria: "첫 여행지를 작성한 여행가" }, + { id: 2, img: tempImg, title: "여행입문자", criteria: "여행지를 n개 이상 작성한 여행가" }, + { id: 3, img: tempImg, title: "여행입문자", criteria: "첫 여행지를 작성한 여행가" }, + { id: 5, img: tempImg, title: "여행입문자", criteria: "첫 여행지를 작성한 여행가" }, + { id: 6, img: tempImg, title: "여행입문자", criteria: "첫 여행지를 작성한 여행가" }, + { id: 4, img: tempImg, title: "여행입문자", criteria: "첫 여행지를 작성한 여행가" }, + { id: 7, img: tempImg, title: "여행입문자", criteria: "첫 여행지를 작성한 여행가" }, + { id: 8, img: tempImg, title: "여행입문자", criteria: "첫 여행지를 작성한 여행가" }, +]; + +const MyBadge = () => { + return ( +
+

내 뱃지

+
    + {mockData.map(({ id, img, title, criteria }) => ( +
  • + +
    • + ))} +
+
+ ); +}; +export default MyBadge; diff --git a/src/components/domains/myPage/contents/Level/index.tsx b/src/components/domains/myPage/contents/Level/index.tsx index 233fc79..8ebe7c0 100644 --- a/src/components/domains/myPage/contents/Level/index.tsx +++ b/src/components/domains/myPage/contents/Level/index.tsx @@ -1,4 +1,5 @@ import LevelProgressBar from "./LevelProgressBar"; +import MyBadge from "./MyBadge"; import MyLevel from "./MyLevel"; const Level = () => { @@ -6,6 +7,7 @@ const Level = () => { <> + ); }; From bd1beba63876e1f921a7e503bf2ae0ba0472ac43 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B9=80=ED=95=98=EC=9D=80?= Date: Tue, 31 Dec 2024 21:58:25 +0900 Subject: [PATCH 7/7] =?UTF-8?q?Feat:=20=EB=82=B4=20=EB=93=B1=EA=B8=89/?= =?UTF-8?q?=EB=B1=83=EC=A7=80=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EB=B0=98?= =?UTF-8?q?=EC=9D=91=ED=98=95=20=EA=B5=AC=ED=98=84=20=EB=B0=8F=20=EC=A0=84?= =?UTF-8?q?=EC=B2=B4=20=EB=A0=88=EC=9D=B4=EC=95=84=EC=9B=83=20=EC=8A=A4?= =?UTF-8?q?=ED=83=80=EC=9D=BC=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../myPage/contents/Level/Level.module.scss | 15 ++++++++++++ .../LevelProgressBar.module.scss | 12 ++++++++++ .../myPage/contents/Level/MyBadge/index.tsx | 4 ++-- .../Level/MyLevel/MyLevel.module.scss | 16 +++++++++++++ .../domains/myPage/contents/Level/index.tsx | 23 +++++++++++++++---- 5 files changed, 63 insertions(+), 7 deletions(-) create mode 100644 src/components/domains/myPage/contents/Level/Level.module.scss diff --git a/src/components/domains/myPage/contents/Level/Level.module.scss b/src/components/domains/myPage/contents/Level/Level.module.scss new file mode 100644 index 0000000..303f976 --- /dev/null +++ b/src/components/domains/myPage/contents/Level/Level.module.scss @@ -0,0 +1,15 @@ +.level { + padding-bottom: 10rem; + + @include responsive("T") { + padding-bottom: 8rem; + } + + &__level { + padding-bottom: 4.8rem; + + &-info { + padding-bottom: 2.4rem; + } + } +} diff --git a/src/components/domains/myPage/contents/Level/LevelProgressBar/LevelProgressBar.module.scss b/src/components/domains/myPage/contents/Level/LevelProgressBar/LevelProgressBar.module.scss index 7f84802..b1612d5 100644 --- a/src/components/domains/myPage/contents/Level/LevelProgressBar/LevelProgressBar.module.scss +++ b/src/components/domains/myPage/contents/Level/LevelProgressBar/LevelProgressBar.module.scss @@ -5,6 +5,10 @@ background-color: $gray20; border-radius: 0.5rem; + @include responsive("M") { + height: 0.8rem; + } + &-fill { background: linear-gradient(90deg, $primary30, $primary50); border-radius: 0.5rem; @@ -29,8 +33,16 @@ @include flexbox(between, center); padding-top: 1rem; + @include responsive("M") { + padding-top: 0.5rem; + } + &-el { @include text-style(1.6, 500, $black30); + + @include responsive("M") { + font-size: 1.4rem; + } } } } diff --git a/src/components/domains/myPage/contents/Level/MyBadge/index.tsx b/src/components/domains/myPage/contents/Level/MyBadge/index.tsx index 0af4c64..a4208ac 100644 --- a/src/components/domains/myPage/contents/Level/MyBadge/index.tsx +++ b/src/components/domains/myPage/contents/Level/MyBadge/index.tsx @@ -19,7 +19,7 @@ const mockData = [ const MyBadge = () => { return ( -
+

내 뱃지

    {mockData.map(({ id, img, title, criteria }) => ( @@ -28,7 +28,7 @@ const MyBadge = () => { ))}
-
+
); }; export default MyBadge; diff --git a/src/components/domains/myPage/contents/Level/MyLevel/MyLevel.module.scss b/src/components/domains/myPage/contents/Level/MyLevel/MyLevel.module.scss index ea0f0ab..73bfcbc 100644 --- a/src/components/domains/myPage/contents/Level/MyLevel/MyLevel.module.scss +++ b/src/components/domains/myPage/contents/Level/MyLevel/MyLevel.module.scss @@ -4,6 +4,11 @@ @include text-style(2.4, 700, $black30); gap: 0.5rem; + @include responsive("M") { + font-size: 2rem; + gap: 0.3rem; + } + &-question-mark { @include flexbox(); @include text-style(1.6, 600, $gray30); @@ -12,6 +17,12 @@ width: 2.4rem; height: 2.4rem; cursor: pointer; + + @include responsive("M") { + font-size: 1.2rem; + width: 2rem; + height: 2rem; + } } } @@ -19,6 +30,11 @@ @include text-style(3.2, 500, $black30); padding-top: 2rem; + @include responsive("M") { + font-size: 2.4rem; + padding-top: 1.6rem; + } + &--highlight { font-weight: 700; color: $primary40; diff --git a/src/components/domains/myPage/contents/Level/index.tsx b/src/components/domains/myPage/contents/Level/index.tsx index 8ebe7c0..b38802d 100644 --- a/src/components/domains/myPage/contents/Level/index.tsx +++ b/src/components/domains/myPage/contents/Level/index.tsx @@ -2,13 +2,26 @@ import LevelProgressBar from "./LevelProgressBar"; import MyBadge from "./MyBadge"; import MyLevel from "./MyLevel"; +import classNames from "classnames/bind"; +import styles from "./Level.module.scss"; + +const cx = classNames.bind(styles); + const Level = () => { return ( - <> - - - - +
+
+
+ +
+
+ +
+
+
+ +
+
); }; export default Level;