diff --git a/package.json b/package.json index 94913d3..d5104f5 100644 --- a/package.json +++ b/package.json @@ -19,6 +19,7 @@ "react-icons": "^5.4.0", "react-router-dom": "^6.26.2", "react-slick": "^0.30.3", + "sass": "^1.85.0", "slick-carousel": "^1.8.1", "styled-components": "^6.1.13", "vite": "^6.1.1" diff --git a/src/assets/icons/history/card.svg b/src/assets/icons/history/card.svg new file mode 100644 index 0000000..3a840ed --- /dev/null +++ b/src/assets/icons/history/card.svg @@ -0,0 +1,116 @@ + diff --git a/src/assets/icons/history/card_img_l.svg b/src/assets/icons/history/card_img_l.svg new file mode 100644 index 0000000..015e702 --- /dev/null +++ b/src/assets/icons/history/card_img_l.svg @@ -0,0 +1,11 @@ + diff --git a/src/assets/icons/history/card_img_r.svg b/src/assets/icons/history/card_img_r.svg new file mode 100644 index 0000000..db88ead --- /dev/null +++ b/src/assets/icons/history/card_img_r.svg @@ -0,0 +1,11 @@ + diff --git a/src/assets/icons/history/close.svg b/src/assets/icons/history/close.svg new file mode 100644 index 0000000..ddd03af --- /dev/null +++ b/src/assets/icons/history/close.svg @@ -0,0 +1,5 @@ + diff --git a/src/assets/icons/history/empty_star.svg b/src/assets/icons/history/empty_star.svg new file mode 100644 index 0000000..f33bd76 --- /dev/null +++ b/src/assets/icons/history/empty_star.svg @@ -0,0 +1,5 @@ + diff --git a/src/assets/icons/history/full_star.svg b/src/assets/icons/history/full_star.svg new file mode 100644 index 0000000..8cd4c62 --- /dev/null +++ b/src/assets/icons/history/full_star.svg @@ -0,0 +1,8 @@ + diff --git a/src/assets/icons/history/half_star.svg b/src/assets/icons/history/half_star.svg new file mode 100644 index 0000000..327048d --- /dev/null +++ b/src/assets/icons/history/half_star.svg @@ -0,0 +1,5 @@ + diff --git a/src/assets/icons/history/icon.svg b/src/assets/icons/history/icon.svg new file mode 100644 index 0000000..9a4c1de --- /dev/null +++ b/src/assets/icons/history/icon.svg @@ -0,0 +1,9 @@ + diff --git a/src/assets/icons/history/left_arrow.svg b/src/assets/icons/history/left_arrow.svg new file mode 100644 index 0000000..d680dd8 --- /dev/null +++ b/src/assets/icons/history/left_arrow.svg @@ -0,0 +1,5 @@ + diff --git a/src/assets/icons/history/list.svg b/src/assets/icons/history/list.svg new file mode 100644 index 0000000..57a2039 --- /dev/null +++ b/src/assets/icons/history/list.svg @@ -0,0 +1,7 @@ + diff --git a/src/assets/icons/history/list_arrow.svg b/src/assets/icons/history/list_arrow.svg new file mode 100644 index 0000000..e9e2bbc --- /dev/null +++ b/src/assets/icons/history/list_arrow.svg @@ -0,0 +1,5 @@ + diff --git a/src/assets/icons/history/logo.svg b/src/assets/icons/history/logo.svg new file mode 100644 index 0000000..f348a08 --- /dev/null +++ b/src/assets/icons/history/logo.svg @@ -0,0 +1,33 @@ + diff --git a/src/assets/icons/history/myicon.svg b/src/assets/icons/history/myicon.svg new file mode 100644 index 0000000..0ccbacb --- /dev/null +++ b/src/assets/icons/history/myicon.svg @@ -0,0 +1,9 @@ + diff --git a/src/assets/icons/history/mypage1.svg b/src/assets/icons/history/mypage1.svg new file mode 100644 index 0000000..f2c96dc --- /dev/null +++ b/src/assets/icons/history/mypage1.svg @@ -0,0 +1,13 @@ + diff --git a/src/assets/icons/history/mypage2.svg b/src/assets/icons/history/mypage2.svg new file mode 100644 index 0000000..7690e46 --- /dev/null +++ b/src/assets/icons/history/mypage2.svg @@ -0,0 +1,13 @@ + diff --git a/src/assets/icons/history/mypage3.svg b/src/assets/icons/history/mypage3.svg new file mode 100644 index 0000000..ef9b3fb --- /dev/null +++ b/src/assets/icons/history/mypage3.svg @@ -0,0 +1,26 @@ + diff --git a/src/assets/icons/history/mypage4.svg b/src/assets/icons/history/mypage4.svg new file mode 100644 index 0000000..ce06af8 --- /dev/null +++ b/src/assets/icons/history/mypage4.svg @@ -0,0 +1,19 @@ + diff --git a/src/assets/icons/history/mypage_arrow.svg b/src/assets/icons/history/mypage_arrow.svg new file mode 100644 index 0000000..aee23b0 --- /dev/null +++ b/src/assets/icons/history/mypage_arrow.svg @@ -0,0 +1,5 @@ + diff --git a/src/assets/icons/history/onboarding1.svg b/src/assets/icons/history/onboarding1.svg new file mode 100644 index 0000000..5c81aff --- /dev/null +++ b/src/assets/icons/history/onboarding1.svg @@ -0,0 +1,21 @@ + diff --git a/src/assets/icons/history/onboarding2.svg b/src/assets/icons/history/onboarding2.svg new file mode 100644 index 0000000..9c696d1 --- /dev/null +++ b/src/assets/icons/history/onboarding2.svg @@ -0,0 +1,23 @@ + diff --git a/src/assets/icons/history/onboarding3.svg b/src/assets/icons/history/onboarding3.svg new file mode 100644 index 0000000..a6fa1ed --- /dev/null +++ b/src/assets/icons/history/onboarding3.svg @@ -0,0 +1,23 @@ + diff --git a/src/assets/icons/history/out.svg b/src/assets/icons/history/out.svg new file mode 100644 index 0000000..69aff42 --- /dev/null +++ b/src/assets/icons/history/out.svg @@ -0,0 +1,21 @@ + diff --git a/src/assets/icons/history/popup_icon.svg b/src/assets/icons/history/popup_icon.svg new file mode 100644 index 0000000..77447a5 --- /dev/null +++ b/src/assets/icons/history/popup_icon.svg @@ -0,0 +1,14 @@ + diff --git a/src/assets/icons/history/recap_contents_bg.svg b/src/assets/icons/history/recap_contents_bg.svg new file mode 100644 index 0000000..eea14ad --- /dev/null +++ b/src/assets/icons/history/recap_contents_bg.svg @@ -0,0 +1,12 @@ + diff --git a/src/assets/icons/history/recap_star.svg b/src/assets/icons/history/recap_star.svg new file mode 100644 index 0000000..d415375 --- /dev/null +++ b/src/assets/icons/history/recap_star.svg @@ -0,0 +1,13 @@ + diff --git a/src/assets/icons/history/right_arrow.svg b/src/assets/icons/history/right_arrow.svg new file mode 100644 index 0000000..42d123b --- /dev/null +++ b/src/assets/icons/history/right_arrow.svg @@ -0,0 +1,5 @@ + diff --git a/src/assets/icons/history/square.svg b/src/assets/icons/history/square.svg new file mode 100644 index 0000000..4b5a60f --- /dev/null +++ b/src/assets/icons/history/square.svg @@ -0,0 +1,14 @@ + diff --git a/src/assets/icons/history/star.svg b/src/assets/icons/history/star.svg new file mode 100644 index 0000000..02c83e0 --- /dev/null +++ b/src/assets/icons/history/star.svg @@ -0,0 +1,13 @@ + diff --git a/src/assets/icons/history/type_arrow.svg b/src/assets/icons/history/type_arrow.svg new file mode 100644 index 0000000..aee23b0 --- /dev/null +++ b/src/assets/icons/history/type_arrow.svg @@ -0,0 +1,5 @@ + diff --git a/src/assets/scss/history_style/_history.scss b/src/assets/scss/history_style/_history.scss new file mode 100644 index 0000000..dce116b --- /dev/null +++ b/src/assets/scss/history_style/_history.scss @@ -0,0 +1,319 @@ +#historypage_contain { + .top_list_style { + display: flex; + justify-content: space-between; + padding: 28px 30px 19px; + align-items: center; + + .left_div { + display: flex; + gap: 9px; + align-items: center; + + + } + + .right_div { + display: flex; + gap: 10px; + + img { + width: 20px; + height: 20px; + } + + hr { + margin: 0; + width: 0px; + height: 20px; + stroke-width: 1px; + color: #D9D9D9; + } + } + } + + .checkbox { + width: 20px; + height: 20px; + color: #000000; + } + + .top_text { + color: #000000; + font-family: Pretendard; + font-size: 14px; + font-style: normal; + font-weight: 400; + letter-spacing: -0.35px; + } + + .top_type_list_div { + margin: 0px 30px 28px; + display: flex; + flex-direction: column; + gap: 7px; + + .type_div { + display: flex; + gap: 8px; + align-items: center; + + .checkbox { + margin-right: 1px; + } + } + } + + .top_list_line { + margin: 0px 30px; + height: 0; + border: 0.5px solid #D9D9D9; + } + + .history_list_div { + padding: 19px 30px; + display: flex; + flex-direction: column; + gap: 15px; + margin-bottom: 70px; + } + + .history_bottom_div { + width: 100%; + position: fixed; + bottom: 0; + padding: 7px 30px 0; + background-color: #FFF; + + .next_btn { + display: flex; + justify-content: center; + align-items: center; + width: 100%; + padding: 25px 16px; + height: 60px; + border-radius: 65px; + background-color: #EBEDF0; + color: var(--black, #000); + font-family: Pretendard; + font-size: 16px; + font-weight: 600; + letter-spacing: -0.4px; + margin-bottom: 20px; + + &.active { + background-color: #000; + color: #fff; // 선택된 항목이 있을 때 + } + + &.inactive { + background-color: #EBEDF0; // 선택된 항목이 없을 때 + color: #000; + cursor: not-allowed; // 클릭 방지 + } + } + } + + .popup_div { + position: fixed; + bottom: 0; + width: 100%; + } + + .loading_div { + display: flex; + align-items: center; + flex-direction: column; + position: relative; + border-radius: 40px 40px 0px 0px; + width: 100%; + height: 344px; + z-index: 0; + overflow: hidden; + background: url(https://s3-alpha-sig.figma.com/img/3cd6/1d34/c0cfc6624ba62569b8157aeb57a9d3bc?Expires=1741564800&Key-Pair-Id=APKAQ4GOSFWCW27IBOMQ&Signature=a4qtsBrQkks2nbGDk9v24pkIIs7DmJK1yv-y3tW1bgGQ84UP2T1~ZFmLCC9RPv588IQ~-cxJJkE5PG-s3XI6LafVG6lX4IPqJTjzNrNBGyDYdXSd0t57yyJo~Fy6gz-fOoVJBPLQk6mzjZexgLBC1AK3n0LhrHIjGZWrpQdwd~uCuQeKRYrZ9bQ45Jlgk5vr147l8ls6wTFbTMsUIpcGko0cuI3XmED78~FmUVOmHG8bpfOd3lPoQd8btAsJTE~WkMdQRqu-LMY7VFoA94saAnz1-0A3yhTG7~mfypj0LkfWffKWIqBOoZO9XI-NqSmfym8tQHJK~cO5hnBHmE4Sfw__) lightgray 50% / cover no-repeat; + + &::before { + content: ''; + position: absolute; + top: -50%; + left: -50%; + width: 200%; + height: 200%; + background: inherit; // 부모의 배경 그대로 사용 + filter: blur(75px); // 블러 처리 + z-index: 0; // 자식 요소 아래에 위치 + } + + img { + z-index: 1; + } + + .close { + position: absolute; + width: 24px; + height: 24px; + top: 29px; + right: 32px; + } + + .icon { + margin-top: 77px; + margin-bottom: 22px; + width: 61px; + height: 61px; + } + + .text { + z-index: 1; + color: #000; + text-align: center; + font-family: Pretendard; + font-size: 16px; + font-style: normal; + font-weight: 500; + line-height: 130%; + letter-spacing: -0.4px; + margin-bottom: 3px; + } + + div { + position: relative; + z-index: 1; + } + + .btn_div { + padding: 0 30px; + margin-top: 35px; + display: flex; + gap: 15px; + width: 100%; + justify-content: space-between; + + div { + display: flex; + width: 100%; + height: 60px; + padding: 25px 14px; + justify-content: center; + align-items: center; + border-radius: 65px; + font-family: Pretendard; + font-size: 16px; + font-style: normal; + font-weight: 600; + letter-spacing: -0.4px; + } + + .cancel { + + background-color: var(--white, #FFF); + color: var(--black, #000); + } + + .next { + background-color: #D9D9D9; + color: #818181; + cursor: not-allowed; + } + + .next.active { + background-color: #000; // 활성화된 상태 + color: #fff; + cursor: pointer; + } + } + } +} + +.history_list_component { + height: 71px; + display: flex; + gap: 6px; + justify-content: space-between; + align-items: center; + + .left_div { + display: flex; + flex-direction: column; + gap: 2px; + width: 100%; + padding: 16px 30px 14px 30px; + border-radius: 10px; + background-color: #F9FFD6; + cursor: pointer; + position: relative; // 선택된 효과가 위에 올라오도록 설정 + overflow: hidden; // gradient가 넘치지 않도록 설정 + transition: all 0.3s ease; + + &.selected::before { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: linear-gradient(0deg, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.05) 100%); + border-radius: 8px; + pointer-events: none; // 클릭 이벤트를 막지 않도록 설정 + } + + &.selected { + border: 1px solid #000; + } + + .top_title { + color: #000; + font-family: Pretendard; + font-size: 16px; + font-style: normal; + font-weight: 500; + line-height: 130%; + letter-spacing: -0.4px; + } + + .contents_div { + display: flex; + align-items: center; + gap: 6px; + + .star { + width: 14px; + height: 14px; + } + + .star_num { + color: #000; + font-family: Pretendard; + font-size: 12px; + font-style: normal; + font-weight: 400; + line-height: 130%; + letter-spacing: -0.3px; + } + + hr { + margin: 0; + width: 0; + height: 12px; + border: 0.5px solid #818181; + } + + .contents_text { + color: var(--black, #000); + font-family: Pretendard; + font-size: 12px; + font-style: normal; + font-weight: 300; + line-height: 150%; + letter-spacing: -0.3px; + } + + + } + } + + .arrow { + width: 24px; + height: 24px; + } +} \ No newline at end of file diff --git a/src/assets/scss/history_style/_historydetail.scss b/src/assets/scss/history_style/_historydetail.scss new file mode 100644 index 0000000..ca4c5b3 --- /dev/null +++ b/src/assets/scss/history_style/_historydetail.scss @@ -0,0 +1,190 @@ +.history_detail_page_container { + padding: 36px 30px 20px; + + .top_card_div { + display: flex; + width: 100%; + height: 77px; + justify-content: space-between; + align-items: center; + padding: 11px 20px; + border-radius: 20px; + background-color: #F9FFD6; + margin-bottom: 12px; + + .card_img { + width: 50px; + height: 55.534px; + } + + .text_div { + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + + .top { + color: #000; + font-family: Pretendard; + font-size: 14px; + font-style: normal; + font-weight: 400; + line-height: 150%; + letter-spacing: -0.35px; + } + + .bottom { + color: #000; + font-family: Pretendard; + font-size: 16px; + font-style: normal; + font-weight: 600; + line-height: 130%; + letter-spacing: -0.4px; + } + } + } + + .title { + margin-top: 27px; + color: #000; + font-family: Pretendard; + font-size: 16px; + font-style: normal; + font-weight: 600; + letter-spacing: -0.4px; + } + + .score_div { + .top_div { + display: flex; + justify-content: space-between; + align-items: center; + + .right { + display: flex; + align-items: flex-end; + + .total { + color: #818181; + font-family: Pretendard; + font-size: 14px; + font-style: normal; + font-weight: 400; + letter-spacing: -0.35px; + margin-left: 5px; + } + } + } + + .star_div { + display: flex; + justify-content: center; + margin-top: 17px; + gap: 3px; + } + } + + .calender { + margin-top: 16px; + display: flex; + gap: 13px; + justify-content: center; + align-items: center; + + input { + border-radius: 6px; + padding: 6px 11px; + background-color: var(--Fills-Tertiary, rgba(120, 120, 128, 0.12)); + } + + hr { + margin: 0; + width: 21px; + height: 0px; + border: 0.5px solid #D9D9D9; + } + } + + .feel { + width: 100%; + margin-top: 14px; + padding: 17px 14px; + border-radius: 10px; + border: 1px solid var(--black, #000); + outline: none; + color: var(--black, #000); + font-family: Pretendard; + font-size: 14px; + font-style: normal; + font-weight: 400; + letter-spacing: -0.35px; + + } + + ::placeholder { + color: var(--, #818181); + } + + .after_text { + resize: none; + padding: 14px; + margin-top: 14px; + border-radius: 10px; + width: 100%; + border: 1px solid var(--black, #000); + color: var(--black, #000); + font-family: Pretendard; + font-size: 14px; + font-style: normal; + font-weight: 400; + line-height: 150%; + letter-spacing: -0.35px; + outline: none; + min-height: 63px; + height: auto; + } + + .history_detail_bottom_div { + width: 100%; + position: fixed; + margin-left: -30px; + bottom: 0; + padding: 20px 30px; + background-color: #FFF; + + .next_btn { + display: flex; + justify-content: center; + align-items: center; + width: 100%; + padding: 25px 16px; + height: 60px; + border-radius: 65px; + background-color: #000; + color: var(--black, #fff); + font-family: Pretendard; + font-size: 16px; + font-weight: 600; + letter-spacing: -0.4px; + margin-bottom: 20px; + } + } + + .icon { + display: flex; + justify-content: center; + margin-top: 20px; + + + .icon_img { + padding: 5px; + justify-content: center; + align-items: center; + width: 75px; + height: 75px; + border-radius: 10px; + border: 1px solid var(--black, #000); + } + } +} \ No newline at end of file diff --git a/src/assets/scss/history_style/_recap.scss b/src/assets/scss/history_style/_recap.scss new file mode 100644 index 0000000..78344ed --- /dev/null +++ b/src/assets/scss/history_style/_recap.scss @@ -0,0 +1,185 @@ +.recape_page_container { + .contents_div { + display: flex; + flex-direction: column; + position: relative; + align-items: center; + + .top_title { + margin-top: 40px; + color: #000; + font-family: Pretendard; + font-size: 16px; + font-style: normal; + font-weight: 500; + letter-spacing: -0.4px; + } + + .page_title { + color: #000; + font-family: Pretendard; + font-size: 20px; + font-style: normal; + font-weight: 600; + line-height: 130%; + letter-spacing: -0.5px; + } + + .card { + position: absolute; + top: 86px; + z-index: 0; + } + + #card2 { + margin-top: 30px; + z-index: 1; + } + + #card3 { + margin-top: 60px; + z-index: 2; + } + + #card4 { + margin-top: 90px; + z-index: 3; + } + + #card5 { + margin-top: 120px; + z-index: 4; + } + + .icon { + width: 56px; + height: 56px; + margin-top: 300px; + z-index: 5; + } + + .background { + position: relative; + z-index: 6; + width: 100%; + height: 100%; + margin-top: -30px; + + .background_img { + width: 100%; + position: absolute; + z-index: 6; + } + + .contents_text_div { + z-index: 10; + position: absolute; + width: 100%; + display: flex; + flex-direction: column; + align-items: center; + + .out { + position: absolute; + right: 20px; + top: 21px; + } + + .contents_title { + padding: 5px 10px; + margin-top: 90px; + border-radius: 15px; + border: 1px solid var(--white, #FFF); + background-color: #F9FFD6; + color: var(--black, #000); + font-family: Pretendard; + font-size: 16px; + font-style: normal; + font-weight: 600; + letter-spacing: -0.4px; + margin-bottom: 10px; + } + + .when { + color: var(--black, #000); + font-family: Pretendard; + font-size: 12px; + font-style: normal; + font-weight: 400; + letter-spacing: -0.3px; + margin-bottom: 1px; + } + + .info_div { + display: flex; + align-items: center; + margin-bottom: 19px; + + .star { + width: 14px; + height: 14px; + } + + .score { + margin-left: 5px; + color: #000; + font-family: Pretendard; + font-size: 12px; + font-style: normal; + font-weight: 400; + letter-spacing: -0.3px; + margin-right: 10px; + } + + .info_text { + color: var(--black, #000); + font-family: Pretendard; + font-size: 12px; + font-style: normal; + font-weight: 300; + letter-spacing: -0.3px; + } + } + + .contents_text { + padding: 0 30px; + overflow: hidden; + height: 44px; + color: var(--black, #000); + text-overflow: ellipsis; + font-family: Pretendard; + font-size: 14px; + font-style: normal; + font-weight: 400; + line-height: 150%; + /* 21px */ + letter-spacing: -0.35px; + } + + .btn_outline { + padding: 20px 30px; + width: 100%; + } + + .share_btn { + height: 60px; + padding: 25px 14px; + width: 100%; + display: flex; + justify-content: center; + align-items: center; + border-radius: 65px; + background: var(--black, #000); + color: var(--white, #FFF); + font-family: Pretendard; + font-size: 16px; + font-style: normal; + font-weight: 600; + letter-spacing: -0.4px; + } + } + } + + + } +} \ No newline at end of file diff --git a/src/assets/scss/home/_homecheck.scss b/src/assets/scss/home/_homecheck.scss new file mode 100644 index 0000000..b2dc3d7 --- /dev/null +++ b/src/assets/scss/home/_homecheck.scss @@ -0,0 +1,260 @@ +.home_check_container { + padding: 28px 30px; + + .page_root { + color: #818181; + text-align: right; + font-family: Pretendard; + font-size: 14px; + font-style: normal; + font-weight: 400; + letter-spacing: -0.35px; + margin-bottom: 15px; + } + + .top_card_div { + display: flex; + width: 100%; + height: 77px; + justify-content: space-between; + align-items: center; + padding: 11px 20px; + border-radius: 20px; + background-color: #F9FFD6; + + .card_img { + width: 50px; + height: 55.534px; + } + + .text_div { + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + + .bottom { + color: #000; + font-family: Pretendard; + font-size: 16px; + font-style: normal; + font-weight: 600; + line-height: 130%; + letter-spacing: -0.4px; + } + } + } + + .date_div { + margin-top: 35px; + } + + .calender { + margin-top: 19px; + display: flex; + gap: 13px; + justify-content: center; + align-items: center; + + input { + text-align: center; + border-radius: 6px; + padding: 6px 11px; + background-color: var(--Fills-Tertiary, rgba(120, 120, 128, 0.12)); + outline: none; + } + + ::-webkit-calendar-picker-indicator { + display: none; + } + + hr { + margin: 0; + width: 21px; + height: 0px; + border: 0.5px solid #D9D9D9; + } + } + + .title { + color: #000; + font-family: Pretendard; + font-size: 16px; + font-style: normal; + font-weight: 600; + letter-spacing: -0.4px; + } + + .history_detail_bottom_div { + width: 100%; + position: fixed; + margin-left: -30px; + bottom: 0; + padding: 20px 30px; + background-color: #FFF; + + .next_btn { + display: flex; + justify-content: center; + align-items: center; + width: 100%; + padding: 25px 16px; + height: 60px; + border-radius: 65px; + background-color: #000; + color: var(--black, #fff); + font-family: Pretendard; + font-size: 16px; + font-weight: 600; + letter-spacing: -0.4px; + margin-bottom: 20px; + } + } + + .separate_line { + margin: 46px 0 27.5px; + width: 100%; + border-color: #000; + } + + .info_text { + color: #000; + text-align: center; + font-family: Pretendard; + font-size: 16px; + font-style: normal; + font-weight: 400; + letter-spacing: -0.4px; + margin-bottom: 28px; + } +} + +.home_check_fix_container { + padding: 28px 30px; + + .page_root { + color: #818181; + text-align: right; + font-family: Pretendard; + font-size: 14px; + font-style: normal; + font-weight: 400; + letter-spacing: -0.35px; + margin-bottom: 15px; + } + + .top_card_div { + display: flex; + width: 100%; + height: 77px; + justify-content: space-between; + align-items: center; + padding: 11px 20px; + border-radius: 20px; + background-color: #F9FFD6; + + .card_img { + width: 50px; + height: 55.534px; + } + + .text_div { + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + + .bottom { + color: #000; + font-family: Pretendard; + font-size: 16px; + font-style: normal; + font-weight: 600; + line-height: 130%; + letter-spacing: -0.4px; + } + } + } + + .date_div { + margin-top: 35px; + } + + .calender { + margin-top: 19px; + display: flex; + gap: 13px; + justify-content: center; + align-items: center; + + input { + text-align: center; + border-radius: 6px; + padding: 6px 11px; + background-color: var(--Fills-Tertiary, rgba(120, 120, 128, 0.12)); + outline: none; + } + + ::-webkit-calendar-picker-indicator { + } + + hr { + margin: 0; + width: 21px; + height: 0px; + border: 0.5px solid #D9D9D9; + } + } + + .title { + color: #000; + font-family: Pretendard; + font-size: 16px; + font-style: normal; + font-weight: 600; + letter-spacing: -0.4px; + } + + .history_detail_bottom_div { + width: 100%; + position: fixed; + margin-left: -30px; + bottom: 0; + padding: 20px 30px; + background-color: #FFF; + + .next_btn { + display: flex; + justify-content: center; + align-items: center; + width: 100%; + padding: 25px 16px; + height: 60px; + border-radius: 65px; + background-color: #000; + color: var(--black, #fff); + font-family: Pretendard; + font-size: 16px; + font-weight: 600; + letter-spacing: -0.4px; + margin-bottom: 20px; + } + } + + .separate_line { + margin: 46px 0 27.5px; + width: 100%; + border-color: #000; + } + + .info_text { + color: #000; + text-align: center; + font-family: Pretendard; + font-size: 16px; + font-style: normal; + font-weight: 400; + letter-spacing: -0.4px; + margin-bottom: 28px; + } +} \ No newline at end of file diff --git a/src/assets/scss/home/_homewrite.scss b/src/assets/scss/home/_homewrite.scss new file mode 100644 index 0000000..65e740a --- /dev/null +++ b/src/assets/scss/home/_homewrite.scss @@ -0,0 +1,248 @@ +.home_write_container { + padding: 36px 30px 20px; + + .page_root { + color: #818181; + text-align: right; + font-family: Pretendard; + font-size: 14px; + font-style: normal; + font-weight: 400; + letter-spacing: -0.35px; + margin-bottom: 15px; + } + + .top_card_div { + display: flex; + width: 100%; + height: 77px; + justify-content: space-between; + align-items: center; + padding: 11px 20px; + border-radius: 20px; + background-color: #F9FFD6; + margin-bottom: 12px; + + .card_img { + width: 50px; + height: 55.534px; + } + + .text_div { + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + + .top { + color: #000; + font-family: Pretendard; + font-size: 14px; + font-style: normal; + font-weight: 400; + line-height: 150%; + letter-spacing: -0.35px; + } + + .bottom { + color: #000; + font-family: Pretendard; + font-size: 16px; + font-style: normal; + font-weight: 600; + line-height: 130%; + letter-spacing: -0.4px; + } + } + } + + .title { + margin-top: 27px; + color: #000; + font-family: Pretendard; + font-size: 16px; + font-style: normal; + font-weight: 600; + letter-spacing: -0.4px; + } + + .info { + color: var(--black, #000); + font-family: Pretendard; + font-size: 14px; + font-style: normal; + font-weight: 400; + letter-spacing: -0.35px; + } + + .score_div { + .star_div { + display: flex; + justify-content: center; + margin-top: 17px; + gap: 3px; + } + } + + .top_div { + display: flex; + flex-direction: column; + gap: 9px; + + } + + .calender { + margin-top: 16px; + display: flex; + gap: 13px; + justify-content: center; + align-items: center; + + input { + border-radius: 6px; + padding: 6px 11px; + background-color: var(--Fills-Tertiary, rgba(120, 120, 128, 0.12)); + } + + hr { + margin: 0; + width: 21px; + height: 0px; + border: 0.5px solid #D9D9D9; + } + } + + .feel { + width: 100%; + margin-top: 14px; + padding: 17px 14px; + border-radius: 10px; + border: 1px solid var(--black, #000); + outline: none; + color: var(--black, #000); + font-family: Pretendard; + font-size: 14px; + font-style: normal; + font-weight: 400; + letter-spacing: -0.35px; + margin-bottom: 30px; + + + } + + .img_div { + margin-top: 17px; + display: flex; + gap: 9px; + overflow-x: auto; // 가로 스크롤 가능하게 설정 + max-width: 100%; + scrollbar-width: thin; // 스크롤바 스타일 (Firefox) + + .img_plus { + display: flex; + width: 100px; + height: 100px; + justify-content: center; + align-items: center; + border-radius: 10px; + border: 1px solid #000; + background-color: #EBEDF0; + flex: 0 0 auto; + + .plus {} + } + + .uploaded_image { + display: flex; + flex: 0 0 auto; + justify-content: center; + align-items: center; + + img { + width: 100px; + height: 100px; + border-radius: 10px; + } + } + } + + ::placeholder { + color: var(--, #818181); + } + + .after_text { + resize: none; + padding: 14px; + margin-top: 14px; + border-radius: 10px; + width: 100%; + border: 1px solid var(--black, #000); + color: var(--black, #000); + font-family: Pretendard; + font-size: 14px; + font-style: normal; + font-weight: 400; + line-height: 150%; + letter-spacing: -0.35px; + outline: none; + min-height: 63px; + height: auto; + } + + .add_div { + margin-bottom: 120px; + } + + .history_detail_bottom_div { + width: 100%; + position: fixed; + margin-left: -30px; + bottom: 0; + padding: 20px 30px; + background-color: #FFF; + + .next_btn { + display: flex; + justify-content: center; + align-items: center; + width: 100%; + padding: 25px 16px; + height: 60px; + border-radius: 65px; + font-family: Pretendard; + font-size: 16px; + font-weight: 600; + letter-spacing: -0.4px; + margin-bottom: 20px; + &.active { + background-color: #000; + color: #fff; + } + + &.inactive { + background-color: #EBEDF0; // 비활성화 상태 + color: #000; + cursor: not-allowed; + } + } + + + } + + .separate_line { + margin: 30px 0 27.5px; + width: 100%; + border-color: #000; + } + + .info_text { + color: #000; + text-align: center; + font-family: Pretendard; + font-size: 16px; + font-style: normal; + font-weight: 400; + letter-spacing: -0.4px; + margin-bottom: 28px; + } +} \ No newline at end of file diff --git a/src/assets/scss/home/_mypage.scss b/src/assets/scss/home/_mypage.scss new file mode 100644 index 0000000..4f77179 --- /dev/null +++ b/src/assets/scss/home/_mypage.scss @@ -0,0 +1,66 @@ +.mypage_container { + padding: 33px 30px; + + .top_card { + display: inline-flex; + height: 71px; + padding: 15px 32px 14px 74px; + justify-content: flex-end; + align-items: center; + width: 100%; + border-radius: 10px; + background: var(--linear, linear-gradient(90deg, #FCFFE1 0%, #FFE7E7 33%, #EFE5FF 66%, #D5DDFF 100%)); + + .text { + color: #000; + text-align: right; + font-family: Pretendard; + font-size: 16px; + font-style: normal; + font-weight: 500; + line-height: 130%; + letter-spacing: -0.4px; + } + } + + hr { + margin: 22px 0 9px; + border-color: #D9D9D9; + } + + .part_div { + display: flex; + width: 100%; + height: 46px; + padding: 11px 16px 11px 17px; + justify-content: space-between; + align-items: center; + border-radius: 10px; + background-color: #F8F8F8; + margin-bottom: 10px; + + .left { + display: flex; + gap: 9px; + + .icon { + width: 20px; + height: 20px; + } + + .title { + color: #000; + font-family: Pretendard; + font-size: 16px; + font-style: normal; + font-weight: 600; + letter-spacing: -0.4px; + } + } + + .next { + width: 24px; + height: 24px; + } + } +} \ No newline at end of file diff --git a/src/assets/scss/intro/_splash.scss b/src/assets/scss/intro/_splash.scss new file mode 100644 index 0000000..eed245b --- /dev/null +++ b/src/assets/scss/intro/_splash.scss @@ -0,0 +1,135 @@ +.splash_container { + width: 100%; + height: 100vh; + background: linear-gradient(90deg, #FCFFE1 0%, #FFE7E7 33%, #EFE5FF 66%, #D5DDFF 100%); + display: flex; + position: relative; + flex-direction: column; + align-items: center; + justify-content: center; + + .center_div { + text-align: center; + + .logo { + width: 138px; + height: 66px; + margin-bottom: 23px; + } + + .normal { + color: #000; + font-family: Pretendard; + font-size: 20px; + font-style: normal; + font-weight: 500; + line-height: 130%; + letter-spacing: -0.5px; + } + + .text_bottom { + display: flex; + + .special { + color: var(--white, #FFF); + font-family: Pretendard; + font-size: 20px; + font-style: normal; + font-weight: 500; + line-height: 130%; + letter-spacing: -0.5px; + background-color: #000; + } + } + } + + .bottom { + position: absolute; + bottom: 20px; + padding: 0 30px; + width: 100%; + + .start_btn { + display: flex; + align-items: center; + justify-content: center; + height: 60px; + padding: 25px 14px; + width: 100%; + border-radius: 65px; + background: #000; + color: #FFF; + font-family: Pretendard; + font-size: 16px; + font-style: normal; + font-weight: 600; + letter-spacing: -0.4px; + } + } +} + +.onboarding_container { + width: 100%; + height: calc(100vh - 70px); + display: flex; + position: relative; + flex-direction: column; + align-items: center; + justify-content: center; + + .center_contents { + margin-top: -150px; + } + + .bottom { + position: absolute; + bottom: 20px; + padding: 0 30px; + width: 100%; + + .indicator_dots { + height: 40px; + display: flex; + width: 100%; + justify-content: space-between; + margin: 30px 0; + align-items: center; + + .dot_div { + display: flex; + justify-content: center; + margin: 20px 0; + align-items: center; + } + + .dot { + width: 8px; + height: 8px; + border-radius: 50%; + background-color: #ccc; + margin: 0 4px; + + &.active { + background-color: #000; + } + } + } + + .start_btn { + display: flex; + align-items: center; + justify-content: center; + height: 60px; + padding: 25px 14px; + width: 100%; + border-radius: 65px; + background: #000; + color: #FFF; + font-family: Pretendard; + font-size: 16px; + font-style: normal; + font-weight: 600; + letter-spacing: -0.4px; + } + } +} \ No newline at end of file diff --git a/src/assets/scss/style.scss b/src/assets/scss/style.scss new file mode 100644 index 0000000..e36e9aa --- /dev/null +++ b/src/assets/scss/style.scss @@ -0,0 +1,11 @@ +@charset "UTF-8"; + +//history +@use "history_style/history"; +@use "history_style/historydetail"; +@use "history_style/recap"; +@use "home/homecheck"; +@use "home/homewrite"; +@use "home/mypage"; +@use "intro/splash"; + diff --git a/src/components/history/HistoryList.jsx b/src/components/history/HistoryList.jsx new file mode 100644 index 0000000..0b0565c --- /dev/null +++ b/src/components/history/HistoryList.jsx @@ -0,0 +1,32 @@ +import React from 'react' +import { useNavigate } from 'react-router-dom'; +import star from '../../assets/icons/history/star.svg' +import arrow from '../../assets/icons/history/list_arrow.svg' + +const HistoryList = ({ id, title, rating, experienceType, onSelect, isSelected }) => { + const navigate = useNavigate(); + + const GotoDetail = () => { + navigate('/history_detail'); + } + + return ( +
{title}
+{rating}
+{experienceType}
+내가 따라한
+혼자 여행 떠나기
+경험점수
+4.5
+/ 5.00
+경험 기간
+느낀 점
+ +발전 방향
+ +내가 기록한
+혼자 여행 떠나기
+경험점수
+4.5
+/ 5.00
+제목
+ +설명
+ +전체
+내가 작성한 경험
+ +내가 따라한 경험
+2025
+ +2024
+ +2023
+ +2022
+선택하신 경험들을 결산 중이에요
+예쁘게 만들어진 recap 페이지를
친구에게 공유해보세요
내가 작성한 경험
+RECAP
+25.01.01 ~ 25.01.05
+4.25
+내가 기록한 경험
+혼자 떠나는 여행은 자신을 발견하고 새로운 경험을 쌓을 수 있는 기회에요. 내가 원하는 일정과 장소를 자유롭게 선택할 수 있어, 스트레스를 해소하고 평소에 느끼지 못했던 여유를 만끽할 수 있어요. 여행 중에는 다양한 사람들을 만나고, 새로운 문화와 음식을 경험하며, 나만의 추억을 만들 수 있어요. 혼자 여행을 통해 자기 성찰의 시간을 가지며, 자신감을 키울 수 있는 기회를 제공해요. 처음에는 불안할 수 있지만, 여행을 통해 느끼는 자유와 독립은 그 어떤 경험보다 값진 자산이 될 것이에요.
+홈 > 확인하기
+혼자 여행 떠나기
+목표 기간
+홈 > 확인하기
+혼자 여행 떠나기
+목표 기간
+경험을 시작하기 전 다양한 계획과 기록을 남겨봐요.
+ + {/* 추가 입력 필드 */} + {SelectData.extraInputs.map((input) => ( +홈 > 기록하기
+내가 따라한
+혼자 여행 떠나기
+경험점수
+위의 경험을 하면서 느낀 총체적인 점수를 매겨주세요
+경험 기간
+목표 기간이 아닌, 실제로 경험을 진행한 기간을 입력해주세요
+느낀 점
+ setFeelingText(e.target.value)}/> +↓ 사진을 추가해보세요
+경험을 시작하기 전 다양한 계획과 기록을 남겨봐요.
+생각도 못하던
+새로운 경험
+을 만나보세요!
+CARDO와 함께
소중한 경험을 쌓고 계신가요?
문의하기
+비밀번호 수정
+로그아웃
+회원 탈퇴
+