From 14c02c804d2ebaa476dce5907ca89e5199b4f0e6 Mon Sep 17 00:00:00 2001 From: sinyoung6491 Date: Tue, 25 Feb 2025 20:32:25 +0900 Subject: [PATCH] =?UTF-8?q?[feat]ui=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 1 + src/assets/icons/history/card.svg | 116 +++++++ src/assets/icons/history/card_img_l.svg | 11 + src/assets/icons/history/card_img_r.svg | 11 + src/assets/icons/history/close.svg | 5 + src/assets/icons/history/empty_star.svg | 5 + src/assets/icons/history/full_star.svg | 8 + src/assets/icons/history/half_star.svg | 5 + src/assets/icons/history/icon.svg | 9 + src/assets/icons/history/left_arrow.svg | 5 + src/assets/icons/history/list.svg | 7 + src/assets/icons/history/list_arrow.svg | 5 + src/assets/icons/history/logo.svg | 33 ++ src/assets/icons/history/myicon.svg | 9 + src/assets/icons/history/mypage1.svg | 13 + src/assets/icons/history/mypage2.svg | 13 + src/assets/icons/history/mypage3.svg | 26 ++ src/assets/icons/history/mypage4.svg | 19 ++ src/assets/icons/history/mypage_arrow.svg | 5 + src/assets/icons/history/onboarding1.svg | 21 ++ src/assets/icons/history/onboarding2.svg | 23 ++ src/assets/icons/history/onboarding3.svg | 23 ++ src/assets/icons/history/out.svg | 21 ++ src/assets/icons/history/popup_icon.svg | 14 + .../icons/history/recap_contents_bg.svg | 12 + src/assets/icons/history/recap_star.svg | 13 + src/assets/icons/history/right_arrow.svg | 5 + src/assets/icons/history/square.svg | 14 + src/assets/icons/history/star.svg | 13 + src/assets/icons/history/type_arrow.svg | 5 + src/assets/scss/history_style/_history.scss | 319 ++++++++++++++++++ .../scss/history_style/_historydetail.scss | 190 +++++++++++ src/assets/scss/history_style/_recap.scss | 185 ++++++++++ src/assets/scss/home/_homecheck.scss | 260 ++++++++++++++ src/assets/scss/home/_homewrite.scss | 248 ++++++++++++++ src/assets/scss/home/_mypage.scss | 66 ++++ src/assets/scss/intro/_splash.scss | 135 ++++++++ src/assets/scss/style.scss | 11 + src/components/history/HistoryList.jsx | 32 ++ src/constant/routeConstants.js | 11 + src/hooks/useSelect.js | 2 + src/layouts/DefaultLayout.jsx | 5 +- src/main.jsx | 1 + src/pages/historypage/HistoryDetailPage.jsx | 74 ++++ src/pages/historypage/HistoryUpload.jsx | 100 ++++++ src/pages/historypage/Historypage.jsx | 128 +++++++ src/pages/historypage/RecapPage.jsx | 60 ++++ src/pages/homecheck/HomeCheck.jsx | 37 ++ src/pages/homecheck/HomeCheckFix.jsx | 84 +++++ src/pages/homecheck/HomeWrite.jsx | 212 ++++++++++++ src/pages/homecheck/styled.js | 46 +++ src/pages/loginpage/LoginPage.jsx | 2 +- src/pages/onboarding/Onboarding.jsx | 70 ++++ src/pages/onboarding/Splash.jsx | 28 ++ src/pages/profile/Mypage.jsx | 48 +++ src/pages/signuppage/SignupPage.jsx | 2 +- src/routes/router.jsx | 50 +++ vite.config.js | 11 +- 58 files changed, 2880 insertions(+), 7 deletions(-) create mode 100644 src/assets/icons/history/card.svg create mode 100644 src/assets/icons/history/card_img_l.svg create mode 100644 src/assets/icons/history/card_img_r.svg create mode 100644 src/assets/icons/history/close.svg create mode 100644 src/assets/icons/history/empty_star.svg create mode 100644 src/assets/icons/history/full_star.svg create mode 100644 src/assets/icons/history/half_star.svg create mode 100644 src/assets/icons/history/icon.svg create mode 100644 src/assets/icons/history/left_arrow.svg create mode 100644 src/assets/icons/history/list.svg create mode 100644 src/assets/icons/history/list_arrow.svg create mode 100644 src/assets/icons/history/logo.svg create mode 100644 src/assets/icons/history/myicon.svg create mode 100644 src/assets/icons/history/mypage1.svg create mode 100644 src/assets/icons/history/mypage2.svg create mode 100644 src/assets/icons/history/mypage3.svg create mode 100644 src/assets/icons/history/mypage4.svg create mode 100644 src/assets/icons/history/mypage_arrow.svg create mode 100644 src/assets/icons/history/onboarding1.svg create mode 100644 src/assets/icons/history/onboarding2.svg create mode 100644 src/assets/icons/history/onboarding3.svg create mode 100644 src/assets/icons/history/out.svg create mode 100644 src/assets/icons/history/popup_icon.svg create mode 100644 src/assets/icons/history/recap_contents_bg.svg create mode 100644 src/assets/icons/history/recap_star.svg create mode 100644 src/assets/icons/history/right_arrow.svg create mode 100644 src/assets/icons/history/square.svg create mode 100644 src/assets/icons/history/star.svg create mode 100644 src/assets/icons/history/type_arrow.svg create mode 100644 src/assets/scss/history_style/_history.scss create mode 100644 src/assets/scss/history_style/_historydetail.scss create mode 100644 src/assets/scss/history_style/_recap.scss create mode 100644 src/assets/scss/home/_homecheck.scss create mode 100644 src/assets/scss/home/_homewrite.scss create mode 100644 src/assets/scss/home/_mypage.scss create mode 100644 src/assets/scss/intro/_splash.scss create mode 100644 src/assets/scss/style.scss create mode 100644 src/components/history/HistoryList.jsx create mode 100644 src/pages/historypage/HistoryDetailPage.jsx create mode 100644 src/pages/historypage/HistoryUpload.jsx create mode 100644 src/pages/historypage/Historypage.jsx create mode 100644 src/pages/historypage/RecapPage.jsx create mode 100644 src/pages/homecheck/HomeCheck.jsx create mode 100644 src/pages/homecheck/HomeCheckFix.jsx create mode 100644 src/pages/homecheck/HomeWrite.jsx create mode 100644 src/pages/homecheck/styled.js create mode 100644 src/pages/onboarding/Onboarding.jsx create mode 100644 src/pages/onboarding/Splash.jsx create mode 100644 src/pages/profile/Mypage.jsx diff --git a/package.json b/package.json index 13e5cd9..1cfa89a 100644 --- a/package.json +++ b/package.json @@ -17,6 +17,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 ( +
+
onSelect(id)}> +

{title}

+
+ +

{rating}

+
+

{experienceType}

+
+
+
+ +
+
+ ) +} + +export default HistoryList \ No newline at end of file diff --git a/src/constant/routeConstants.js b/src/constant/routeConstants.js index 987c77c..8eb93b4 100644 --- a/src/constant/routeConstants.js +++ b/src/constant/routeConstants.js @@ -8,5 +8,16 @@ export const ROUTE_PATHS = { SELECT: "/select", ABOUT: "/about", CONTACT: "/contact", + HISTORY:"/history", + HISTORYDETAIL:"/history_detail", + HISTORYMY:"/history_upload", + RECAP:"/recap", + HOMECHECK:"/home_check", + HOMECHECKFIX:"/home_check_fix", + HOMEWRITE:"/home_write", + HOMEWRITEFIX:"/home_write_fix", + SPLASH:"/splash", + MYPAGE:"/mypage", + ONBOARDING:"/onboarding", NOT_FOUND: "*", }; diff --git a/src/hooks/useSelect.js b/src/hooks/useSelect.js index ce1f5ea..f17dc05 100644 --- a/src/hooks/useSelect.js +++ b/src/hooks/useSelect.js @@ -53,6 +53,7 @@ export const useSelect = () => { const [step, setStep] = useState(1); const titleExamples = ["마음가짐", "예산", "계획"]; + const writetitleExamples = ["좋았던 점", "아쉬웠던 점", "발전 방향"]; const backgroundColors = ["#F9FFD6", "#FFE7E7", "#D5DDFF", "#EFE5FF"]; const [selectedBackgroundColor, setSelectedBackgroundColor] = useState(backgroundColors[0]); @@ -149,6 +150,7 @@ export const useSelect = () => { isModalOpen, step, titleExamples, + writetitleExamples, backgroundColors, selectedBackgroundColor, extraInputs, diff --git a/src/layouts/DefaultLayout.jsx b/src/layouts/DefaultLayout.jsx index 28975d1..f76046e 100644 --- a/src/layouts/DefaultLayout.jsx +++ b/src/layouts/DefaultLayout.jsx @@ -4,10 +4,13 @@ import { Header } from "@components/layout/header/Header"; export const DefaultLayout = () => { const location = useLocation(); + + const isHomePage = location.pathname === "/splash"; + return ( <> -
+ {!isHomePage &&
} diff --git a/src/main.jsx b/src/main.jsx index 32c28fc..2f93119 100644 --- a/src/main.jsx +++ b/src/main.jsx @@ -1,6 +1,7 @@ import { StrictMode } from "react"; import { createRoot } from "react-dom/client"; import { App } from "./App"; +import './assets/scss/style.scss'; createRoot(document.getElementById("root")).render( diff --git a/src/pages/historypage/HistoryDetailPage.jsx b/src/pages/historypage/HistoryDetailPage.jsx new file mode 100644 index 0000000..b7eb559 --- /dev/null +++ b/src/pages/historypage/HistoryDetailPage.jsx @@ -0,0 +1,74 @@ +import React from 'react' +import card_img_r from '../../assets/icons/history/card_img_r.svg' +import card_img_l from '../../assets/icons/history/card_img_l.svg' +import full_star from '../../assets/icons/history/full_star.svg' +import half_star from '../../assets/icons/history/half_star.svg' +import empty_star from '../../assets/icons/history/empty_star.svg' + +const HistoryDetailPage = () => { + const autoResizeTextarea = (e) => { + let textarea = document.querySelector('.after_text'); + + if (textarea) { + textarea.style.height = 'auto'; + let height = textarea.scrollHeight; // 높이 + textarea.style.height = `${height + 8}px`; + } + }; + + return ( +
+
+ +
+

내가 따라한

+

혼자 여행 떠나기

+
+ +
+
+
+

경험점수

+
+

4.5

+

/ 5.00

+
+
+
+ + + + + +
+
+
+

경험 기간

+
+ +
+ +
+
+
+

느낀 점

+ +
+ +
+
+
+

발전 방향

+ +
+
+
수정하기
+
+ +
+ ) +} + +export default HistoryDetailPage \ No newline at end of file diff --git a/src/pages/historypage/HistoryUpload.jsx b/src/pages/historypage/HistoryUpload.jsx new file mode 100644 index 0000000..b5d5a22 --- /dev/null +++ b/src/pages/historypage/HistoryUpload.jsx @@ -0,0 +1,100 @@ +import React, { useRef, useState, useEffect } from 'react'; +import card_img_r from '../../assets/icons/history/card_img_r.svg' +import card_img_l from '../../assets/icons/history/card_img_l.svg' +import full_star from '../../assets/icons/history/full_star.svg' +import half_star from '../../assets/icons/history/half_star.svg' +import empty_star from '../../assets/icons/history/empty_star.svg' +import myicon from '../../assets/icons/history/myicon.svg' + +const HistoryUpload = () => { + const [starRatings, setStarRatings] = useState(['empty', 'empty', 'empty', 'empty', 'empty']); + + const autoResizeTextarea = (e) => { + let textarea = document.querySelector('.after_text'); + + if (textarea) { + textarea.style.height = 'auto'; + let height = textarea.scrollHeight; // 높이 + textarea.style.height = `${height + 8}px`; + } + }; + const handleStarClick = (index) => { + const updatedStars = [...starRatings]; + + // 현재 별이 비어있거나 반만 채워진 상태라면 상태 업데이트 + if (starRatings[index] === 'empty') { + updatedStars[index] = 'half'; // 첫 번째 클릭 → 반 별 + } else if (starRatings[index] === 'half') { + updatedStars[index] = 'full'; // 두 번째 클릭 → 전체 별 + } else { + // 별이 전체 별일 경우, 뒤에 별 초기화 + for (let i = index; i < updatedStars.length; i++) { + updatedStars[i] = 'empty'; + } + } + + // 이전 별들 모두 full_star로 설정 + for (let i = 0; i < index; i++) { + updatedStars[i] = 'full'; + } + + setStarRatings(updatedStars); + }; + return ( +
+
+ +
+

내가 기록한

+

혼자 여행 떠나기

+
+ +
+
+ +
+
+
+

경험점수

+
+

4.5

+

/ 5.00

+
+
+
+ {starRatings.map((rating, index) => { + let starSrc = empty_star; + if (rating === 'half') starSrc = half_star; + else if (rating === 'full') starSrc = full_star; + + return ( + {`${rating} handleStarClick(index)} + /> + ); + })} +
+
+
+

제목

+ +
+
+

설명

+ +
+
+
수정하기
+
+ +
+ ) +} + +export default HistoryUpload \ No newline at end of file diff --git a/src/pages/historypage/Historypage.jsx b/src/pages/historypage/Historypage.jsx new file mode 100644 index 0000000..9f41e9c --- /dev/null +++ b/src/pages/historypage/Historypage.jsx @@ -0,0 +1,128 @@ +import React, { useState, useEffect } from 'react'; +import { useNavigate } from 'react-router-dom'; +import square from '../../assets/icons/history/square.svg' +import list from '../../assets/icons/history/list.svg' +import type_arrow from '../../assets/icons/history/type_arrow.svg' +import close from '../../assets/icons/history/close.svg' +import icon from '../../assets/icons/history/popup_icon.svg' +import HistoryList from '@components/history/HistoryList' + +const Historypage = () => { + const [isPopupVisible, setIsPopupVisible] = useState(false); + const [isNextButtonActive, setIsNextButtonActive] = useState(false); + const [selectedHistories, setSelectedHistories] = useState([]); + const navigate = useNavigate(); + + const historyData = [ + { id: 1, title: '혼자 여행 떠나기', rating: 4.25, experienceType: '내가 따라한 경험' }, + { id: 2, title: '요리 배우기', rating: 4.5, experienceType: '내가 작성한 경험' }, + { id: 3, title: '마라톤 참가하기', rating: 5.0, experienceType: '내가 따라한 경험' }, + ]; + + const GotoRecap = () => { + if (isNextButtonActive && selectedHistories.length > 0) { + const selectedItems = historyData.filter((item) => selectedHistories.includes(item.id)); + navigate('/recap', { state: { selectedItems } }); + } + }; + const openPopup = () => { + if (selectedHistories.length > 0) { + setIsPopupVisible(true); + setIsNextButtonActive(false); + } + }; + + const handleSelectHistory = (id) => { + if (selectedHistories.includes(id)) { + setSelectedHistories(selectedHistories.filter((selectedId) => selectedId !== id)); + } else { + setSelectedHistories([...selectedHistories, id]); + } + }; + + const closePopup = () => { + setIsPopupVisible(false); + }; + + useEffect(() => { + if (isPopupVisible) { + const timer = setTimeout(() => { + setIsNextButtonActive(true); + }, 3000); + + return () => clearTimeout(timer); + } + }, [isPopupVisible]); + + return ( +
+
+
+ +

전체

+
+
+ +
+ +
+
+
+
+ + +

내가 작성한 경험

+ +

내가 따라한 경험

+
+
+ + +

2025

+ +

2024

+ +

2023

+ +

2022

+
+
+
+
+ {historyData.map((history) => ( + + ))} + +
+
+
0 ? 'active' : 'inactive'}`} onClick={openPopup}>결산하기
+
+ {isPopupVisible && ( +
+
+ + +

선택하신 경험들을 결산 중이에요

+

예쁘게 만들어진 recap 페이지를
친구에게 공유해보세요

+
+
취소
+
보러가기
+
+
+
+ + )} +
+ ) +} + +export default Historypage \ No newline at end of file diff --git a/src/pages/historypage/RecapPage.jsx b/src/pages/historypage/RecapPage.jsx new file mode 100644 index 0000000..0a23ec8 --- /dev/null +++ b/src/pages/historypage/RecapPage.jsx @@ -0,0 +1,60 @@ +import React, { useState } from 'react'; +import card from '../../assets/icons/history/card.svg' +import out from '../../assets/icons/history/out.svg' +import icon from '../../assets/icons/history/icon.svg' +import star from '../../assets/icons/history/recap_star.svg' +import background from '../../assets/icons/history/recap_contents_bg.svg' + +const RecapPage = () => { + const [resultMessage, setResultMessage] = useState(''); + const shareData = { + title: "MDN", + text: "Learn web development on MDN!", + url: "https://developer.mozilla.org", + }; + + const handleShare = async () => { + try { + await navigator.share(shareData); + setResultMessage('MDN shared successfully'); + } catch (err) { + setResultMessage(`Error: ${err}`); + } + }; + return ( +
+
+

내가 작성한 경험

+

RECAP

+ + + + + + +
+ +
+ +
혼자 여행 떠나기
+

25.01.01 ~ 25.01.05

+
+ +

4.25

+

내가 기록한 경험

+
+

혼자 떠나는 여행은 자신을 발견하고 새로운 경험을 쌓을 수 있는 기회에요. 내가 원하는 일정과 장소를 자유롭게 선택할 수 있어, 스트레스를 해소하고 평소에 느끼지 못했던 여유를 만끽할 수 있어요. 여행 중에는 다양한 사람들을 만나고, 새로운 문화와 음식을 경험하며, 나만의 추억을 만들 수 있어요. 혼자 여행을 통해 자기 성찰의 시간을 가지며, 자신감을 키울 수 있는 기회를 제공해요. 처음에는 불안할 수 있지만, 여행을 통해 느끼는 자유와 독립은 그 어떤 경험보다 값진 자산이 될 것이에요.

+
+
공유하기
+
+ +
+ +
+ +
+
+ ) +} + +export default RecapPage \ No newline at end of file diff --git a/src/pages/homecheck/HomeCheck.jsx b/src/pages/homecheck/HomeCheck.jsx new file mode 100644 index 0000000..e29ef1a --- /dev/null +++ b/src/pages/homecheck/HomeCheck.jsx @@ -0,0 +1,37 @@ +import React from 'react' +import { useNavigate } from 'react-router-dom'; +import card_img_r from '../../assets/icons/history/card_img_r.svg' +import card_img_l from '../../assets/icons/history/card_img_l.svg' + +const HomeCheck = () => { + const navigate = useNavigate(); + + const GotoFix = () => { + navigate('/home_check_fix'); + } + return ( +
+

홈 > 확인하기

+
+ +
+

혼자 여행 떠나기

+
+ +
+
+

목표 기간

+
+ +
+ +
+
+
+
수정하기
+
+
+ ) +} + +export default HomeCheck \ No newline at end of file diff --git a/src/pages/homecheck/HomeCheckFix.jsx b/src/pages/homecheck/HomeCheckFix.jsx new file mode 100644 index 0000000..22f3302 --- /dev/null +++ b/src/pages/homecheck/HomeCheckFix.jsx @@ -0,0 +1,84 @@ +import * as S from "./styled.js"; +import React from 'react' +import { useNavigate } from 'react-router-dom'; +import card_img_r from '../../assets/icons/history/card_img_r.svg' +import card_img_l from '../../assets/icons/history/card_img_l.svg' +import plus from "/images/apply/plus.svg"; +import { InputAndTitle } from "@components/common/inputs/inputandtitle/InputAndTitle"; +import { useSelect } from "@hooks/useSelect"; + + + +const HomeCheckFix = () => { + const navigate = useNavigate(); + const { SelectData, SelectHandlers } = useSelect(); + + const GotoDone = () => { + navigate('/home_check'); + } + return ( +
+

홈 > 확인하기

+
+ +
+

혼자 여행 떠나기

+
+ +
+
+

목표 기간

+
+ +
+ +
+
+
+

경험을 시작하기 전 다양한 계획과 기록을 남겨봐요.

+ + {/* 추가 입력 필드 */} + {SelectData.extraInputs.map((input) => ( + + SelectHandlers.handleExtraInputChange(input.id, "title", e.target.value)} + onInputChange={(e) => SelectHandlers.handleExtraInputChange(input.id, "content", e.target.value)} + maxLength={100} + > + + {/* SelectHandlers.handleRemoveInput(input.id)}>삭제 */} + + ))} + + {/* 추가 버튼 (최대 3개까지) */} + {SelectData.extraInputs.length < 3 && ( + <> + SelectHandlers.handleAddInput("")}> + + + + + {SelectData.titleExamples.map((example, index) => ( + SelectHandlers.handleExampleClick(example)} + > + {example} + + ))} + + + )} + +
+
완료
+
+
+ ) +} + +export default HomeCheckFix \ No newline at end of file diff --git a/src/pages/homecheck/HomeWrite.jsx b/src/pages/homecheck/HomeWrite.jsx new file mode 100644 index 0000000..996cc03 --- /dev/null +++ b/src/pages/homecheck/HomeWrite.jsx @@ -0,0 +1,212 @@ +import * as S from "./styled.js"; +import React, { useRef, useState, useEffect } from 'react'; +import { useNavigate } from 'react-router-dom'; +import card_img_r from '../../assets/icons/history/card_img_r.svg' +import card_img_l from '../../assets/icons/history/card_img_l.svg' +import full_star from '../../assets/icons/history/full_star.svg' +import half_star from '../../assets/icons/history/half_star.svg' +import empty_star from '../../assets/icons/history/empty_star.svg' +import plus from "/images/apply/plus.svg"; +import { InputAndTitle } from "@components/common/inputs/inputandtitle/InputAndTitle"; +import { useSelect } from "@hooks/useSelect"; + +const HomeWrite = () => { + const navigate = useNavigate(); + const { SelectData, SelectHandlers } = useSelect(); + const [starRatings, setStarRatings] = useState(['empty', 'empty', 'empty', 'empty', 'empty']); + const today = new Date().toISOString().split('T')[0]; + const [uploadedImages, setUploadedImages] = useState([]); + const [feelingText, setFeelingText] = useState(''); + const [startDate, setStartDate] = useState(''); + const [endDate, setEndDate] = useState(today); + const [isFormValid, setIsFormValid] = useState(false); + // 숨겨진 input에 접근하기 위한 Ref 생성 + const fileInputRef = useRef(null); + + const handleStarClick = (index) => { + const updatedStars = [...starRatings]; + + // 현재 별이 비어있거나 반만 채워진 상태라면 상태 업데이트 + if (starRatings[index] === 'empty') { + updatedStars[index] = 'half'; // 첫 번째 클릭 → 반 별 + } else if (starRatings[index] === 'half') { + updatedStars[index] = 'full'; // 두 번째 클릭 → 전체 별 + } else { + // 별이 전체 별일 경우, 뒤에 별 초기화 + for (let i = index; i < updatedStars.length; i++) { + updatedStars[i] = 'empty'; + } + } + + // 이전 별들 모두 full_star로 설정 + for (let i = 0; i < index; i++) { + updatedStars[i] = 'full'; + } + + setStarRatings(updatedStars); + }; + const handleImageUpload = (event) => { + const files = event.target.files; + const newImages = []; + + // 선택한 파일들을 배열로 변환 + for (let i = 0; i < files.length; i++) { + const file = files[i]; + const reader = new FileReader(); + + reader.onloadend = () => { + setUploadedImages((prevImages) => [...prevImages, reader.result]); + }; + + reader.readAsDataURL(file); + } + }; + const handleDivClick = () => { + fileInputRef.current.click(); + }; + + // 사진 삭제 핸들러 + const handleRemoveImage = (index) => { + setUploadedImages((prevImages) => + prevImages.filter((_, imgIndex) => imgIndex !== index) + ); + }; + useEffect(() => { + const hasFullStars = starRatings.some((rating) => rating !== 'empty'); + const isDateValid = startDate !== '' && endDate !== ''; + const hasFeelingText = feelingText.trim() !== ''; + const hasImages = uploadedImages.length > 0; + + if (hasFullStars && isDateValid && hasFeelingText && hasImages) { + setIsFormValid(true); + } else { + setIsFormValid(false); + } + }, [starRatings, startDate, endDate, feelingText, uploadedImages]); + + const GotoDone = () => { + navigate('/history_detail'); + } + + return ( +
+

홈 > 기록하기

+
+ +
+

내가 따라한

+

혼자 여행 떠나기

+
+ +
+
+
+

경험점수

+

위의 경험을 하면서 느낀 총체적인 점수를 매겨주세요

+
+
+ {starRatings.map((rating, index) => { + let starSrc = empty_star; + if (rating === 'half') starSrc = half_star; + else if (rating === 'full') starSrc = full_star; + + return ( + {`${rating} handleStarClick(index)} + /> + ); + })} +
+
+
+
+

경험 기간

+

목표 기간이 아닌, 실제로 경험을 진행한 기간을 입력해주세요

+
+
+ setStartDate(e.target.value)}/> +
+ setEndDate(e.target.value)}/> +
+
+
+

느낀 점

+ setFeelingText(e.target.value)}/> +
+

↓ 사진을 추가해보세요

+
+
+ + + +
+ {uploadedImages.map((image, index) => ( +
+ handleRemoveImage(index)} alt={`Uploaded ${index}`} /> +
+ ))} +
+
+
+
+

경험을 시작하기 전 다양한 계획과 기록을 남겨봐요.

+
+ {/* 추가 입력 필드 */} + {SelectData.extraInputs.map((input) => ( + + SelectHandlers.handleExtraInputChange(input.id, "title", e.target.value)} + onInputChange={(e) => SelectHandlers.handleExtraInputChange(input.id, "content", e.target.value)} + maxLength={100} + > + + {/* SelectHandlers.handleRemoveInput(input.id)}>삭제 */} + + ))} + + {/* 추가 버튼 (최대 3개까지) */} + {SelectData.extraInputs.length < 3 && ( + <> + SelectHandlers.handleAddInput("")}> + + + + + {SelectData.writetitleExamples.map((example, index) => ( + SelectHandlers.handleExampleClick(example)} + > + {example} + + ))} + + + )} +
+ +
+
등록하기
+
+ +
+ ) +} + +export default HomeWrite \ No newline at end of file diff --git a/src/pages/homecheck/styled.js b/src/pages/homecheck/styled.js new file mode 100644 index 0000000..9c5d77d --- /dev/null +++ b/src/pages/homecheck/styled.js @@ -0,0 +1,46 @@ +import styled from "styled-components"; + +export const Icon24 = styled.img` + width: 24px; +`; + +export const AddButton = styled.button` + width: 100%; + height: 3.25rem; /* 52px */ + border-radius: 10px; + border: 1px solid ${({ theme }) => theme.colors.black}; + background-color: ${({ theme }) => theme.colors.white}; + color: ${({ theme }) => theme.colors.black}; + font-size: 16px; + cursor: pointer; +`; + +export const ExampleContainer = styled.div` + display: flex; + width: 85%; + flex-wrap: wrap; + gap: 0.5rem; + margin: 1rem 0 7rem 0; +`; + +export const ExampleButton = styled.button` + background: ${({ theme }) => theme.colors.lightbluegray}; + color: ${({ theme }) => theme.colors.black}; + border: 1px solid ${({ theme }) => theme.colors.black}; + border-radius: 10px; + padding: 12px 14px; + font-size: 14px; + cursor: pointer; + + &:hover { + background: ${({ theme }) => theme.colors.grayback}; + color: ${({ theme }) => theme.colors.graytext}; + border: 1px solid ${({ theme }) => theme.colors.graytext}; + } +`; + +export const inputWrap = styled.div` + display: flex; + width: calc(100% + 60px); + margin-left: -30px; +`; diff --git a/src/pages/loginpage/LoginPage.jsx b/src/pages/loginpage/LoginPage.jsx index ce75811..d391bfd 100644 --- a/src/pages/loginpage/LoginPage.jsx +++ b/src/pages/loginpage/LoginPage.jsx @@ -2,7 +2,7 @@ import * as S from "./styled"; import useLogin from "@hooks/useLogin"; import { InputwithTitle } from "@components/common/inputs/inputwithtitle/InputwithTitle"; import { Footer2 } from "@components/layout/footer/footer2/Footer2"; -import { LoginModal } from "@components/common/\bsignupmodal/LoginModal"; +import { LoginModal } from "@components/common/signupmodal/LoginModal"; export const LoginPage = () => { const { diff --git a/src/pages/onboarding/Onboarding.jsx b/src/pages/onboarding/Onboarding.jsx new file mode 100644 index 0000000..3118292 --- /dev/null +++ b/src/pages/onboarding/Onboarding.jsx @@ -0,0 +1,70 @@ +import React, { useState } from 'react'; +import { useNavigate } from 'react-router-dom'; +import onboarding1 from '../../assets/icons/history/onboarding1.svg' +import onboarding2 from '../../assets/icons/history/onboarding2.svg'; +import onboarding3 from '../../assets/icons/history/onboarding3.svg'; +import leftArrow from '../../assets/icons/history/left_arrow.svg'; +import rightArrow from '../../assets/icons/history/right_arrow.svg'; + +const Onboarding = () => { + const navigate = useNavigate(); + const [currentStep, setCurrentStep] = useState(0); + + const onboardingImages = [onboarding1, onboarding2, onboarding3]; + + const goToNext = () => { + if (currentStep < onboardingImages.length - 1) { + setCurrentStep(currentStep + 1); + } + }; + + const goToPrev = () => { + if (currentStep > 0) { + setCurrentStep(currentStep - 1); + } + }; + + const GotoStart = () => { + navigate('/login'); + } + return ( +
+
+ {`Onboarding +
+
+
+ Back +
+ {onboardingImages.map((_, index) => ( + + ))} +
+ + Next +
+
Start
+
+
+ ) +} + +export default Onboarding \ No newline at end of file diff --git a/src/pages/onboarding/Splash.jsx b/src/pages/onboarding/Splash.jsx new file mode 100644 index 0000000..a880c89 --- /dev/null +++ b/src/pages/onboarding/Splash.jsx @@ -0,0 +1,28 @@ +import React from 'react' +import { useNavigate } from 'react-router-dom'; +import logo from '../../assets/icons/history/logo.svg' + +const Splash = () => { + const navigate = useNavigate(); + + const GotoStart = () => { + navigate('/onboarding'); + } + return ( +
+
+ +

생각도 못하던

+
+

새로운 경험

+

을 만나보세요!

+
+
+
+
Start
+
+
+ ) +} + +export default Splash \ No newline at end of file diff --git a/src/pages/profile/Mypage.jsx b/src/pages/profile/Mypage.jsx new file mode 100644 index 0000000..e31ab4c --- /dev/null +++ b/src/pages/profile/Mypage.jsx @@ -0,0 +1,48 @@ +import React from 'react' +import mypage1 from '../../assets/icons/history/mypage1.svg' +import mypage2 from '../../assets/icons/history/mypage2.svg' +import mypage3 from '../../assets/icons/history/mypage3.svg' +import mypage4 from '../../assets/icons/history/mypage4.svg' +import mypage_arrow from '../../assets/icons/history/mypage_arrow.svg' + +const Mypage = () => { + return ( +
+
+

CARDO와 함께
소중한 경험을 쌓고 계신가요?

+
+
+
+
+ +

문의하기

+
+ +
+
+
+ +

비밀번호 수정

+
+ +
+
+
+ +

로그아웃

+
+ +
+
+
+ +

회원 탈퇴

+
+ +
+ +
+ ) +} + +export default Mypage \ No newline at end of file diff --git a/src/pages/signuppage/SignupPage.jsx b/src/pages/signuppage/SignupPage.jsx index cb3391e..75a8aab 100644 --- a/src/pages/signuppage/SignupPage.jsx +++ b/src/pages/signuppage/SignupPage.jsx @@ -3,7 +3,7 @@ import { useState } from "react"; import useSignup from "@hooks/useSignup"; import { InputwithTitle } from "@components/common/inputs/inputwithtitle/InputwithTitle"; import { Footer } from "@components/layout/footer/footer1/Footer"; -import { SignupModal } from "@components/common/\bsignupmodal/SignupModal"; +import { SignupModal } from "@components/common/signupmodal/SignupModal"; export const SignupPage = () => { const { diff --git a/src/routes/router.jsx b/src/routes/router.jsx index 294b707..6a9d6bc 100644 --- a/src/routes/router.jsx +++ b/src/routes/router.jsx @@ -13,6 +13,16 @@ import { SelectPage } from "@pages/selectpage/SelectPage"; import { HomePage } from "@pages/homepage/HomePage"; import { AboutPage } from "@pages/aboutpage/AboutPage"; import { NotFound } from "@pages/notfound/NotFound"; +import Historypage from "@pages/historypage/Historypage"; +import HistoryDetailPage from "@pages/historypage/HistoryDetailPage"; +import HistoryUpload from "@pages/historypage/HistoryUpload"; +import RecapPage from "@pages/historypage/RecapPage"; +import HomeCheck from "@pages/homecheck/HomeCheck"; +import HomeWrite from "@pages/homecheck/HomeWrite"; +import HomeCheckFix from "@pages/homecheck/HomeCheckFix"; +import Splash from "@pages/onboarding/Splash"; +import Mypage from "@pages/profile/Mypage"; +import Onboarding from "@pages/onboarding/Onboarding"; export const router = createBrowserRouter([ { @@ -47,6 +57,46 @@ export const router = createBrowserRouter([ path: ROUTE_PATHS.ABOUT, element: , }, + { + path: ROUTE_PATHS.HISTORY, + element: , + }, + { + path: ROUTE_PATHS.HISTORYDETAIL, + element: , + }, + { + path: ROUTE_PATHS.RECAP, + element: , + }, + { + path: ROUTE_PATHS.HOMECHECK, + element: , + }, + { + path: ROUTE_PATHS.HOMECHECKFIX, + element: , + }, + { + path: ROUTE_PATHS.HOMEWRITE, + element: , + }, + { + path: ROUTE_PATHS.SPLASH, + element: , + }, + { + path: ROUTE_PATHS.ONBOARDING, + element: , + }, + { + path: ROUTE_PATHS.MYPAGE, + element: , + }, + { + path: ROUTE_PATHS.HISTORYMY, + element: , + }, ], errorElement: , }, diff --git a/vite.config.js b/vite.config.js index 3941fbe..ac58f29 100644 --- a/vite.config.js +++ b/vite.config.js @@ -43,10 +43,13 @@ export default defineConfig({ }) ], server: process.env.NODE_ENV === 'development' ? { - https: { - key: fs.readFileSync(path.resolve(__dirname, 'localhost-key.pem')), - cert: fs.readFileSync(path.resolve(__dirname, 'localhost.pem')), - }, + https: + // { + // key: fs.readFileSync(path.resolve(__dirname, 'localhost-key.pem')), + // cert: fs.readFileSync(path.resolve(__dirname, 'localhost.pem')), + // } + false + , } : {}, resolve: { alias: {