From 0c778e78573258170b86a9a39e05c2054867e16d Mon Sep 17 00:00:00 2001 From: 1stMourinhoFan Date: Wed, 28 May 2025 16:20:51 +0900 Subject: [PATCH 1/5] =?UTF-8?q?feat:=20UI=20=EA=B4=80=EB=A0=A8=20=EB=A1=9C?= =?UTF-8?q?=EA=B7=B8=EC=9D=B8=20=EC=8B=9C=20=EB=8F=84=EC=8B=9C=20=EC=9E=85?= =?UTF-8?q?=EB=A0=A5,=20=ED=99=88=20=ED=99=94=EB=A9=B4,=20=EB=A7=88?= =?UTF-8?q?=EC=9D=B4=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.jsx | 4 + src/components/onboarding/TodayMood.jsx | 63 +++++++ src/components/onboarding/TodayRecommend.jsx | 63 +++++++ src/pages/Home.jsx | 182 +++++++++++++++---- src/pages/Mymain.jsx | 95 ++++++++++ src/pages/Profile.jsx | 19 ++ src/pages/Todayprofile.jsx | 22 +++ 7 files changed, 411 insertions(+), 37 deletions(-) create mode 100644 src/components/onboarding/TodayMood.jsx create mode 100644 src/components/onboarding/TodayRecommend.jsx create mode 100644 src/pages/Mymain.jsx create mode 100644 src/pages/Todayprofile.jsx diff --git a/src/App.jsx b/src/App.jsx index bfefc86..7347086 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -14,6 +14,8 @@ import Mypage from './pages/Mypage'; import Details from './pages/Details'; import Voice from './pages/Voice'; import Onboarding from './pages/Onboarding'; +import Mymain from './pages/Mymain'; +import Todayprofile from './pages/Todayprofile'; function App() { return ( @@ -31,6 +33,8 @@ function App() { } /> } /> } /> + } /> + } /> } /> } /> diff --git a/src/components/onboarding/TodayMood.jsx b/src/components/onboarding/TodayMood.jsx new file mode 100644 index 0000000..3c21cfc --- /dev/null +++ b/src/components/onboarding/TodayMood.jsx @@ -0,0 +1,63 @@ +import styled from 'styled-components'; +import Button from '../Button'; + +const Container = styled.div` + display: flex; + flex-direction: column; + gap: 80px; +`; + +const Question = styled.div` + font-size: 28px; + margin-top: 50px; +`; + +const ButtonWrapper = styled.div` + display: flex; + flex-direction: column; + gap: 20px; +`; + +const ToMood = ({ onNext }) => { + return ( + + 오늘의 기분은 어떤가요? + + + + + + + + ); +}; + +export default ToMood; diff --git a/src/components/onboarding/TodayRecommend.jsx b/src/components/onboarding/TodayRecommend.jsx new file mode 100644 index 0000000..22df963 --- /dev/null +++ b/src/components/onboarding/TodayRecommend.jsx @@ -0,0 +1,63 @@ +import styled from 'styled-components'; +import Button from '../Button'; +import { useNavigate } from 'react-router-dom'; + +const Container = styled.div` + display: flex; + flex-direction: column; + gap: 80px; +`; + +const Question = styled.div` + font-size: 28px; + margin-top: 50px; +`; + +const ButtonWrapper = styled.div` + display: flex; + flex-direction: column; + gap: 20px; +`; + +const ToRecom = ({ onNext }) => { + const navigate = useNavigate(); + + const handleWriteClick = () => { + navigate('/onboarding'); + }; + + const handleOnboardingClick = () => { + navigate('/write'); + }; + return ( + + + 오늘의 노래 추천은 +
+ 어떻게 해드릴까요? + + + + + + + ); +}; + +export default ToRecom; diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx index c872946..827a6d8 100644 --- a/src/pages/Home.jsx +++ b/src/pages/Home.jsx @@ -2,78 +2,186 @@ import React from 'react'; import styled from 'styled-components'; import { useNavigate } from 'react-router-dom'; -// Styled Components const Container = styled.div` max-width: 390px; width: 390px; margin: 0 auto; - background-color: #f9f2df; + min-height: 100vh; user-select: none; + position: relative; + padding: 20px 30px; + box-sizing: border-box; `; -const Layout = styled.div` +const Header = styled.div` display: flex; - margin-top: 12px; - flex-direction: column; - gap: 180px; + justify-content: flex-end; + margin-bottom: 60px; `; -const ContentGroup = styled.div` +const UserIcon = styled.div` + font-size: 24px; + cursor: pointer; + width: 40px; + height: 40px; display: flex; - flex-direction: column; align-items: center; - gap: 8px; /* Greeting과 SubText 간격 */ + justify-content: center; +`; + +const MainContent = styled.div` + text-align: center; + margin-top: 114px; `; -const Greeting = styled.span` - font-weight: 400; - font-size: 48px; +const WeatherInfo = styled.div` + font-size: 24px; + margin-bottom: 30px; `; -const SubText = styled.span``; +const SuggestionText = styled.div` + font-size: 24px; + margin-bottom: 15px; +`; -const WriteButton = styled.button` - background-color: #56b7c4; - color: #fff; - border: none; - border-radius: 15px; - margin-bottom: 47px; - width: 178px; - height: 55px; +const SongRecommendation = styled.div` + font-size: 24px; + font-weight: bold; + margin-bottom: 15px; +`; + +const RecommendationMessage = styled.div` + font-size: 24px; +`; + +const PopularSection = styled.div` + margin-top: 160px; +`; + +const PopularTitle = styled.div` + font-size: 24px; + text-align: center; + margin-bottom: 30px; + line-height: 1.4; +`; + +const SongList = styled.div` + display: flex; + flex-direction: column; + gap: 15px; +`; + +const SongItem = styled.div` + background: rgba(255, 255, 255, 0.6); + border-radius: 10px; + padding: 15px 20px; + display: flex; + align-items: center; + gap: 15px; cursor: pointer; - align-self: center; + transition: background-color 0.2s ease; + + &:hover { + background: rgba(255, 255, 255, 0.8); + } `; -const UserIcon = styled.div` - font-size: 29px; - padding: 0px; - margin: 0px 29px 0px 0px; - align-self: flex-end; +const SongNumber = styled.div` + font-weight: bold; + color: #333; +`; + +const SongInfo = styled.div` + color: #333; +`; + +const FloatingButton = styled.button` + position: fixed; + bottom: 30px; + right: 40%; + width: 56px; + height: 56px; + border-radius: 50%; + background: #56b7c4; + border: none; + color: white; + font-size: 24px; cursor: pointer; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); + transition: + transform 0.2s ease, + box-shadow 0.2s ease; + z-index: 100; + + &:hover { + transform: translateY(-2px); + box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3); + } + + &:active { + transform: translateY(0); + } `; -// 병합된 Home 컴포넌트 const Home = () => { const navigate = useNavigate(); + // 임시 데이터 - 실제로는 props나 API에서 받아올 데이터 + const weatherInfo = '비가 와요.'; + const recommendedSong = { + artist: '아티스트명', + title: '곡 제목', + }; + + const popularSongs = [ + { number: 1, artist: '아티스트명', title: '곡제목' }, + { number: 2, artist: '아티스트명', title: '곡제목' }, + { number: 3, artist: '아티스트명', title: '곡제목' }, + { number: 4, artist: '아티스트명', title: '곡제목' }, + { number: 5, artist: '아티스트명', title: '곡제목' }, + ]; + const handleWriteClick = () => { - navigate('/write'); + navigate('/todayprofile'); }; const handleUserIconClick = () => { - navigate('/mypage'); + navigate('/mymain'); }; return ( - +
👤 - - 만나서 반가워요! - 오늘은 어떤 일기를 작성해볼까요? - - 일기 쓰기 - +
+ + + 오늘은 ({weatherInfo}) + 이런 날엔 + + {`{${recommendedSong.artist}} - {${recommendedSong.title}}`} + + 음 추천드렸어요!😊 + + + + + 오늘 LP/플로그 유저들이 +
+ 많이 기록한 노래예요. + + + + {popularSongs.map((song) => ( + + {song.number}. + {`{${song.artist}} - {${song.title}}`} + + ))} + + + + ✏️ ); }; diff --git a/src/pages/Mymain.jsx b/src/pages/Mymain.jsx new file mode 100644 index 0000000..083ff65 --- /dev/null +++ b/src/pages/Mymain.jsx @@ -0,0 +1,95 @@ +import React from 'react'; +import { useState } from 'react'; +import { useNavigate } from 'react-router-dom'; +import styled from 'styled-components'; + +const Container = styled.div` + width: 390px; + margin: 0 auto; + padding: 40px 30px 30px 30px; + height: 100vh; + display: flex; + flex-direction: column; + box-sizing: border-box; +`; + +const Title = styled.h1` + font-size: 24px; + font-weight: bold; + text-align: center; + margin-bottom: 40px; + color: #333; +`; + +const ButtonGrid = styled.div` + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 20px; + margin-bottom: 60px; +`; + +const MenuButton = styled.button` + background: white; + border: none; + border-radius: 15px; + padding: 35px 20px; + box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); + cursor: pointer; + font-size: 18px; + font-weight: 500; + color: #333; + transition: + transform 0.2s ease, + box-shadow 0.2s ease; + height: fit-content; + + &:hover { + transform: translateY(-2px); + box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15); + } + + &:active { + transform: translateY(0); + } +`; + +const BottomSection = styled.div` + padding-top: 20px; + flex-shrink: 0; +`; + +const SubText = styled.p` + font-size: 16px; + margin-top: 4px; + maring-left: 35px; +`; + +const Mymain = () => { + const navigate = useNavigate(); + + const handleDiaryClick = () => { + navigate('/mypage'); // 기존 Mypage 컴포넌트로 이동 + }; + + const handleProfileClick = () => { + navigate('/signup/profile'); // 기존 Mypage 컴포넌트로 이동 + }; + + return ( + + 닉네임님 + + + 일기 보기 + 프로필 수정 + + + + 로그아웃 + 회원탈퇴 + + + ); +}; + +export default Mymain; diff --git a/src/pages/Profile.jsx b/src/pages/Profile.jsx index bf4e209..0cd0eb1 100644 --- a/src/pages/Profile.jsx +++ b/src/pages/Profile.jsx @@ -48,6 +48,8 @@ const Profile = () => { const [isModalOpen, setIsModalOpen] = useState(false); const [nickname, setNickname] = useState(''); const [hasNickname, setHasNickname] = useState(false); + const [city, setCity] = useState(''); + const [hasCity, setHasCity] = useState(false); const navigate = useNavigate(); @@ -90,6 +92,23 @@ const Profile = () => { 좋아!🥰 + ) : !hasCity ? ( + <> + + + {nickname}님이 계신 곳의 <br /> + 날씨에 따라 노래를 추천해드릴게요! + + setCity(e.target.value)} + /> + + setHasCity(true)}> + 알겠어 + + ) : ( <> diff --git a/src/pages/Todayprofile.jsx b/src/pages/Todayprofile.jsx new file mode 100644 index 0000000..edeba6e --- /dev/null +++ b/src/pages/Todayprofile.jsx @@ -0,0 +1,22 @@ +import { useState } from 'react'; +import Mood from '../components/onboarding/TodayMood'; +import Recommend from '../components/onboarding/TodayRecommend'; + +const Todayprofile = () => { + const [step, setStep] = useState(1); + + const renderStep = () => { + switch (step) { + case 1: + return setStep(2)} />; + case 2: + return setStep(3)} />; + default: + return null; + } + }; + + return
{renderStep()}
; +}; + +export default Todayprofile; From 83e5f35f2cf5d6d4fd13e3983fedccdc5c6695b9 Mon Sep 17 00:00:00 2001 From: 1stMourinhoFan Date: Wed, 28 May 2025 17:36:53 +0900 Subject: [PATCH 2/5] =?UTF-8?q?refactor:=20=EB=9D=BC=EC=9A=B0=ED=8C=85=20?= =?UTF-8?q?=EA=B2=BD=EB=A1=9C=20=ED=94=BC=EB=93=9C=EB=B0=B1=20=EC=88=98?= =?UTF-8?q?=EC=A0=95=20=EC=99=84=EB=A3=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.jsx | 6 +- src/pages/Home.jsx | 4 +- src/pages/Monthly.jsx | 140 ++++++++++++++++++++++++++++++++++++ src/pages/Mymain.jsx | 95 ------------------------- src/pages/Mypage.jsx | 161 +++++++++++++++--------------------------- 5 files changed, 203 insertions(+), 203 deletions(-) create mode 100644 src/pages/Monthly.jsx delete mode 100644 src/pages/Mymain.jsx diff --git a/src/App.jsx b/src/App.jsx index 7347086..94f7a5e 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -14,8 +14,8 @@ import Mypage from './pages/Mypage'; import Details from './pages/Details'; import Voice from './pages/Voice'; import Onboarding from './pages/Onboarding'; -import Mymain from './pages/Mymain'; import Todayprofile from './pages/Todayprofile'; +import Monthly from './pages/Monthly'; function App() { return ( @@ -24,6 +24,7 @@ function App() { } /> } /> } /> + } /> } /> } /> } /> @@ -33,8 +34,7 @@ function App() { } /> } /> } /> - } /> - } /> + } /> } /> } /> diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx index 827a6d8..94e50f9 100644 --- a/src/pages/Home.jsx +++ b/src/pages/Home.jsx @@ -142,11 +142,11 @@ const Home = () => { ]; const handleWriteClick = () => { - navigate('/todayprofile'); + navigate('/onboarding/today'); }; const handleUserIconClick = () => { - navigate('/mymain'); + navigate('/mypage'); }; return ( diff --git a/src/pages/Monthly.jsx b/src/pages/Monthly.jsx new file mode 100644 index 0000000..ffca103 --- /dev/null +++ b/src/pages/Monthly.jsx @@ -0,0 +1,140 @@ +import React, { useState } from 'react'; +import { useNavigate } from 'react-router-dom'; +import styled from 'styled-components'; +import monthlyDiary from '../mockData/diary'; + +const Container = styled.div` + width: 390px; + margin: 0 auto; + padding-top: 20px; + color: #333; + min-height: 100vh; +`; + +const Title = styled.div` + font-size: 28px; + margin: 0; +`; + +const Subtitle = styled.div` + margin-bottom: 15px; + color: #555; +`; + +const Navigation = styled.div` + display: flex; + justify-content: space-between; + margin-bottom: 10px; + + button { + background: #56b7c4; + border: none; + border-radius: 5px; + padding: 5px 10px; + color: white; + cursor: pointer; + + &:disabled { + background: #ccc; + cursor: not-allowed; + } + } +`; + +const Grid = styled.div` + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 20px; +`; + +const Card = styled.div` + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + background: white; + border-radius: 10px; + padding: 10px 10px 0 10px; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); + cursor: pointer; + + img { + width: 100%; + border-radius: 5px; + } + + p { + margin: 10px 0; + } +`; + +const Monthly = () => { + const today = new Date(); + // eslint-disable-next-line no-unused-vars + const [currentYear, setCurrentYear] = useState(today.getFullYear()); + const [currentMonth, setCurrentMonth] = useState(today.getMonth() + 1); + + const navigate = useNavigate(); + + // 현재 월에 해당하는 일기 데이터 필터링 + const filteredDiary = monthlyDiary.filter((entry) => { + const entryDate = new Date(entry.createdAt); + return ( + entryDate.getFullYear() === currentYear && + entryDate.getMonth() + 1 === currentMonth + ); + }); + + const handleCardClick = (entry) => { + const entryDate = new Date(entry.createdAt); + const formattedDate = `${entryDate.getFullYear()}-${String( + entryDate.getMonth() + 1, + ).padStart(2, '0')}-${String(entryDate.getDate()).padStart(2, '0')}`; + + navigate(`/diary/${formattedDate}`); // 동적 라우트로 이동 + }; + + return ( + + + {currentYear}년 {currentMonth}월 + + 닉네임님이 기록한 노래들이에요. + + + + + + + + {filteredDiary.map((diaryEntry) => { + const entryDate = new Date(diaryEntry.createdAt); + const formattedDate = `${entryDate.getMonth() + 1}월 ${entryDate.getDate()}일`; + + return ( + handleCardClick(diaryEntry)}> + {diaryEntry.songName} +

{formattedDate}

+ + ); + })} + + + ); +}; + +export default Monthly; diff --git a/src/pages/Mymain.jsx b/src/pages/Mymain.jsx deleted file mode 100644 index 083ff65..0000000 --- a/src/pages/Mymain.jsx +++ /dev/null @@ -1,95 +0,0 @@ -import React from 'react'; -import { useState } from 'react'; -import { useNavigate } from 'react-router-dom'; -import styled from 'styled-components'; - -const Container = styled.div` - width: 390px; - margin: 0 auto; - padding: 40px 30px 30px 30px; - height: 100vh; - display: flex; - flex-direction: column; - box-sizing: border-box; -`; - -const Title = styled.h1` - font-size: 24px; - font-weight: bold; - text-align: center; - margin-bottom: 40px; - color: #333; -`; - -const ButtonGrid = styled.div` - display: grid; - grid-template-columns: repeat(2, 1fr); - gap: 20px; - margin-bottom: 60px; -`; - -const MenuButton = styled.button` - background: white; - border: none; - border-radius: 15px; - padding: 35px 20px; - box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); - cursor: pointer; - font-size: 18px; - font-weight: 500; - color: #333; - transition: - transform 0.2s ease, - box-shadow 0.2s ease; - height: fit-content; - - &:hover { - transform: translateY(-2px); - box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15); - } - - &:active { - transform: translateY(0); - } -`; - -const BottomSection = styled.div` - padding-top: 20px; - flex-shrink: 0; -`; - -const SubText = styled.p` - font-size: 16px; - margin-top: 4px; - maring-left: 35px; -`; - -const Mymain = () => { - const navigate = useNavigate(); - - const handleDiaryClick = () => { - navigate('/mypage'); // 기존 Mypage 컴포넌트로 이동 - }; - - const handleProfileClick = () => { - navigate('/signup/profile'); // 기존 Mypage 컴포넌트로 이동 - }; - - return ( - - 닉네임님 - - - 일기 보기 - 프로필 수정 - - - - 로그아웃 - 회원탈퇴 - - - ); -}; - -export default Mymain; diff --git a/src/pages/Mypage.jsx b/src/pages/Mypage.jsx index 68ba8e9..8a68018 100644 --- a/src/pages/Mypage.jsx +++ b/src/pages/Mypage.jsx @@ -1,138 +1,93 @@ -import React, { useState } from 'react'; +import React from 'react'; +import { useState } from 'react'; import { useNavigate } from 'react-router-dom'; import styled from 'styled-components'; -import monthlyDiary from '../mockData/diary'; const Container = styled.div` width: 390px; margin: 0 auto; - padding-top: 20px; - color: #333; - min-height: 100vh; -`; - -const Title = styled.div` - font-size: 28px; - margin: 0; -`; - -const Subtitle = styled.div` - margin-bottom: 15px; - color: #555; -`; - -const Navigation = styled.div` + padding: 40px 30px 30px 30px; + height: 100vh; display: flex; - justify-content: space-between; - margin-bottom: 10px; - - button { - background: #56b7c4; - border: none; - border-radius: 5px; - padding: 5px 10px; - color: white; - cursor: pointer; + flex-direction: column; + box-sizing: border-box; +`; - &:disabled { - background: #ccc; - cursor: not-allowed; - } - } +const Title = styled.h1` + font-size: 24px; + font-weight: bold; + text-align: center; + margin-bottom: 40px; + color: #333; `; -const Grid = styled.div` +const ButtonGrid = styled.div` display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; + margin-bottom: 60px; `; -const Card = styled.div` - display: flex; - flex-direction: column; - align-items: center; - text-align: center; +const MenuButton = styled.button` background: white; - border-radius: 10px; - padding: 10px 10px 0 10px; - box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); + border: none; + border-radius: 15px; + padding: 35px 20px; + box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); cursor: pointer; - - img { - width: 100%; - border-radius: 5px; + font-size: 18px; + font-weight: 500; + color: #333; + transition: + transform 0.2s ease, + box-shadow 0.2s ease; + height: fit-content; + + &:hover { + transform: translateY(-2px); + box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15); } - p { - margin: 10px 0; + &:active { + transform: translateY(0); } `; -const Mypage = () => { - const today = new Date(); - // eslint-disable-next-line no-unused-vars - const [currentYear, setCurrentYear] = useState(today.getFullYear()); - const [currentMonth, setCurrentMonth] = useState(today.getMonth() + 1); +const BottomSection = styled.div` + padding-top: 20px; + flex-shrink: 0; +`; - const navigate = useNavigate(); +const SubText = styled.p` + font-size: 16px; + margin-top: 4px; + maring-left: 35px; +`; - // 현재 월에 해당하는 일기 데이터 필터링 - const filteredDiary = monthlyDiary.filter((entry) => { - const entryDate = new Date(entry.createdAt); - return ( - entryDate.getFullYear() === currentYear && - entryDate.getMonth() + 1 === currentMonth - ); - }); +const Mypage = () => { + const navigate = useNavigate(); - const handleCardClick = (entry) => { - const entryDate = new Date(entry.createdAt); - const formattedDate = `${entryDate.getFullYear()}-${String( - entryDate.getMonth() + 1, - ).padStart(2, '0')}-${String(entryDate.getDate()).padStart(2, '0')}`; + const handleDiaryClick = () => { + navigate('/mypage/monthly'); // 기존 Mypage 컴포넌트로 이동 + }; - navigate(`/diary/${formattedDate}`); // 동적 라우트로 이동 + const handleProfileClick = () => { + navigate('/signup/profile'); // 기존 Mypage 컴포넌트로 이동 }; return ( - - {currentYear}년 {currentMonth}월 - - 닉네임님이 기록한 노래들이에요. - - - - - + 닉네임님 - - {filteredDiary.map((diaryEntry) => { - const entryDate = new Date(diaryEntry.createdAt); - const formattedDate = `${entryDate.getMonth() + 1}월 ${entryDate.getDate()}일`; + + 일기 보기 + 프로필 수정 + - return ( - handleCardClick(diaryEntry)}> - {diaryEntry.songName} -

{formattedDate}

- - ); - })} - + + 로그아웃 + 회원탈퇴 + ); }; From 5c15ec070bf483ed63d51c8c781afd80243dfc8d Mon Sep 17 00:00:00 2001 From: 1stMourinhoFan Date: Wed, 28 May 2025 22:45:44 +0900 Subject: [PATCH 3/5] =?UTF-8?q?feat:=20mypage=20=EA=B0=90=EC=A0=95=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80,=20recap=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.jsx | 2 + src/mockData/diary.js | 8 +-- src/pages/Monthly.jsx | 69 +++++++++++++++++++++-- src/pages/Mypage.jsx | 65 +++++++++++++++++++++- src/pages/Recap.jsx | 125 ++++++++++++++++++++++++++++++++++++++++++ 5 files changed, 257 insertions(+), 12 deletions(-) create mode 100644 src/pages/Recap.jsx diff --git a/src/App.jsx b/src/App.jsx index 94f7a5e..09d03c2 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -16,6 +16,7 @@ import Voice from './pages/Voice'; import Onboarding from './pages/Onboarding'; import Todayprofile from './pages/Todayprofile'; import Monthly from './pages/Monthly'; +import Recap from './pages/Recap'; function App() { return ( @@ -34,6 +35,7 @@ function App() { } /> } /> } /> + } /> } /> } /> } /> diff --git a/src/mockData/diary.js b/src/mockData/diary.js index 280cd13..b669dfb 100644 --- a/src/mockData/diary.js +++ b/src/mockData/diary.js @@ -1,6 +1,6 @@ const diary = [ { - createdAt: '2024-11-20T23:09:45', + createdAt: '2025-04-20T23:09:45', content: '오늘은 너무 슬픈 날이었다. 아무것도 하기 싫어! 언젠간 행복해지는 날이 오겠지?', songName: '한 페이지가 될 수 있게', @@ -13,7 +13,7 @@ const diary = [ 'https://lpilogue-cocktail.s3.us-east-2.amazonaws.com/Old_Fashioned.png', }, { - createdAt: '2024-12-01T23:09:45', + createdAt: '2025-05-01T23:09:45', content: '오늘은 너무 슬픈 날이었다. 아무것도 하기 싫어! 언젠간 행복해지는 날이 오겠지?', songName: '한 페이지가 될 수 있게', @@ -26,7 +26,7 @@ const diary = [ 'https://lpilogue-cocktail.s3.us-east-2.amazonaws.com/Old_Fashioned.png', }, { - createdAt: '2024-12-03T23:09:45', + createdAt: '2025-05-03T23:09:45', content: '행복한 하루~~~~', songName: 'BIG BANK (feat. 2 Chainz, Big Sean, Nicki Minaj)', songURI: 'https://www.youtube.com/watch?v=z61GFxVD8K4', @@ -38,7 +38,7 @@ const diary = [ 'https://lpilogue-cocktail.s3.us-east-2.amazonaws.com/Old_Fashioned.png', }, { - createdAt: '2024-12-05T23:09:45', + createdAt: '2025-05-05T23:09:45', content: '친구들을 만났다. 항상 고마운 친구들! 우리 오래오래 친구하자❤️', songName: '너와의 모든 지금', songURI: 'https://www.youtube.com/watch?v=z61GFxVD8K4', diff --git a/src/pages/Monthly.jsx b/src/pages/Monthly.jsx index ffca103..934e34e 100644 --- a/src/pages/Monthly.jsx +++ b/src/pages/Monthly.jsx @@ -25,6 +25,7 @@ const Navigation = styled.div` display: flex; justify-content: space-between; margin-bottom: 10px; + margin-top: 10px; button { background: #56b7c4; @@ -47,20 +48,69 @@ const Grid = styled.div` gap: 20px; `; +const RecapCard = styled.div` + background: #fbf7ec; + border-radius: 20px; + padding: 0px 25px; + margin: 30px 0px; + display: flex; + justify-content: space-between; + align-items: center; + cursor: pointer; +`; + +const CardContent = styled.div` + display: flex; + flex-direction: column; + gap: 8px; +`; + +const CardTitle = styled.div` + font-size: 20px; + margin: 0; +`; + +const CardSubtitle = styled.p` + font-size: 16px; + font-weight: 600; + margin: 0; +`; + +const CardIcon = styled.div` + width: 150px; + height: 150px; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + font-size: 50px; + flex-shrink: 0; + overflow: hidden; + + img { + width: 100%; + height: 100%; + object-fit: cover; + border-radius: 50%; + } +`; + const Card = styled.div` display: flex; flex-direction: column; align-items: center; text-align: center; - background: white; border-radius: 10px; - padding: 10px 10px 0 10px; - box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); cursor: pointer; img { width: 100%; - border-radius: 5px; + border-radius: 20px; + + &:hover { + transform: translateY(-2px); + box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15); + } } p { @@ -99,7 +149,6 @@ const Monthly = () => { {currentYear}년 {currentMonth}월 - 닉네임님이 기록한 노래들이에요. + + + 가장 많이 느낀 감정 + 울음 5회 + + 😭 + + + 닉네임님이 기록한 노래들이에요. + {filteredDiary.map((diaryEntry) => { const entryDate = new Date(diaryEntry.createdAt); diff --git a/src/pages/Mypage.jsx b/src/pages/Mypage.jsx index 8a68018..d022155 100644 --- a/src/pages/Mypage.jsx +++ b/src/pages/Mypage.jsx @@ -2,6 +2,7 @@ import React from 'react'; import { useState } from 'react'; import { useNavigate } from 'react-router-dom'; import styled from 'styled-components'; +import LP from '../assets/images/Logo_LP.svg'; const Container = styled.div` width: 390px; @@ -14,7 +15,7 @@ const Container = styled.div` `; const Title = styled.h1` - font-size: 24px; + font-size: 32px; font-weight: bold; text-align: center; margin-bottom: 40px; @@ -25,14 +26,14 @@ const ButtonGrid = styled.div` display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; - margin-bottom: 60px; + margin-bottom: 30px; `; const MenuButton = styled.button` background: white; border: none; border-radius: 15px; - padding: 35px 20px; + padding: 15px 30px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); cursor: pointer; font-size: 18px; @@ -53,6 +54,52 @@ const MenuButton = styled.button` } `; +const RecapButton = styled.button` + background: #fbf7ec; + border: none; + border-radius: 15px; + padding: 20px; + box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); + cursor: pointer; + font-size: 16px; + font-weight: 500; + color: #333; + transition: + transform 0.2s ease, + box-shadow 0.2s ease; + margin-bottom: 40px; + display: flex; + align-items: center; + justify-content: space-between; + width: 100%; + + &:hover { + transform: translateY(-2px); + box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15); + } + + &:active { + transform: translateY(0); + } +`; + +const RecapContent = styled.div` + display: flex; + align-items: center; + gap: 15px; +`; + +const RecapLogo = styled.img` + width: 40px; + height: 40px; + border-radius: 50%; +`; + +const ArrowIcon = styled.span` + font-size: 18px; + color: #666; +`; + const BottomSection = styled.div` padding-top: 20px; flex-shrink: 0; @@ -75,6 +122,10 @@ const Mypage = () => { navigate('/signup/profile'); // 기존 Mypage 컴포넌트로 이동 }; + const recapClick = () => { + navigate('/mypage/recap'); // 기존 Mypage 컴포넌트로 이동 + }; + return ( 닉네임님 @@ -84,6 +135,14 @@ const Mypage = () => { 프로필 수정 + + + + Recap of (2025) + + › + + 로그아웃 회원탈퇴 diff --git a/src/pages/Recap.jsx b/src/pages/Recap.jsx new file mode 100644 index 0000000..c255e99 --- /dev/null +++ b/src/pages/Recap.jsx @@ -0,0 +1,125 @@ +import React from 'react'; +import { useNavigate } from 'react-router-dom'; +import Button from '../components/Button'; +import styled from 'styled-components'; + +const Container = styled.div` + width: 390px; + margin: 0 auto; + padding: 40px 30px 30px 30px; + height: 100vh; + display: flex; + flex-direction: column; + box-sizing: border-box; +`; + +const Title = styled.h1` + font-size: 24px; + font-weight: bold; + margin-bottom: 40px; +`; + +const RecapCard = styled.div` + background: #fbf7ec; + border-radius: 20px; + padding: 25px; + margin-bottom: 20px; + box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); + display: flex; + justify-content: space-between; + align-items: center; + transition: + transform 0.2s ease, + box-shadow 0.2s ease; + + &:hover { + transform: translateY(-2px); + box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15); + } + + &:active { + transform: translateY(0); + } +`; + +const CardContent = styled.div` + display: flex; + flex-direction: column; + gap: 8px; +`; + +const CardTitle = styled.div` + font-size: 20px; + margin: 0; +`; + +const CardSubtitle = styled.p` + font-size: 16px; + font-weight: 600; + margin: 0; +`; + +const CardIcon = styled.div` + width: 100px; + height: 100px; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + font-size: 50px; + flex-shrink: 0; + overflow: hidden; + + img { + width: 100%; + height: 100%; + object-fit: cover; + border-radius: 50%; + } +`; + +const Recap = () => { + return ( + + Recap of {2025} + + + + 가장 많이 느낀 감정 + 울음 5회 + + 😭 + + + + + 가장 많이 기록한 아티스트 + DAY6 5회 + + + DAY6 + + + + + + 가장 많이 기록한 노래 + Zombie 6회 + + + Zombie + + + + ); +}; + +export default Recap; From d15b92ef5d6ed0b280cdaf08d4fdc66f3389570d Mon Sep 17 00:00:00 2001 From: Jiyun Kang Date: Thu, 29 May 2025 15:22:59 +0900 Subject: [PATCH 4/5] =?UTF-8?q?refactor:=20Reacap.jsx,=20Monthly.jsx=20?= =?UTF-8?q?=EA=B0=90=EC=A0=95=20=EC=95=84=EC=9D=B4=EC=BD=98=20svg=20?= =?UTF-8?q?=EB=A1=9C=20export=ED=95=A0=20=EC=88=98=20=EC=9E=88=EA=B2=8C=20?= =?UTF-8?q?=EC=84=A4=EC=A0=95=EC=99=84=EB=A3=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/images/angry.svg | 9 +++++++++ src/assets/images/complaint.svg | 9 +++++++++ src/assets/images/confusion.svg | 9 +++++++++ src/assets/images/joy.svg | 9 +++++++++ src/assets/images/sad.svg | 9 +++++++++ src/pages/Monthly.jsx | 14 +++++++++++--- src/pages/Recap.jsx | 11 ++++++++--- 7 files changed, 64 insertions(+), 6 deletions(-) create mode 100644 src/assets/images/angry.svg create mode 100644 src/assets/images/complaint.svg create mode 100644 src/assets/images/confusion.svg create mode 100644 src/assets/images/joy.svg create mode 100644 src/assets/images/sad.svg diff --git a/src/assets/images/angry.svg b/src/assets/images/angry.svg new file mode 100644 index 0000000..833bbca --- /dev/null +++ b/src/assets/images/angry.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/assets/images/complaint.svg b/src/assets/images/complaint.svg new file mode 100644 index 0000000..d226869 --- /dev/null +++ b/src/assets/images/complaint.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/assets/images/confusion.svg b/src/assets/images/confusion.svg new file mode 100644 index 0000000..e225d91 --- /dev/null +++ b/src/assets/images/confusion.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/assets/images/joy.svg b/src/assets/images/joy.svg new file mode 100644 index 0000000..668ff4d --- /dev/null +++ b/src/assets/images/joy.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/assets/images/sad.svg b/src/assets/images/sad.svg new file mode 100644 index 0000000..f79b59a --- /dev/null +++ b/src/assets/images/sad.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/pages/Monthly.jsx b/src/pages/Monthly.jsx index 934e34e..838e25d 100644 --- a/src/pages/Monthly.jsx +++ b/src/pages/Monthly.jsx @@ -2,6 +2,11 @@ import React, { useState } from 'react'; import { useNavigate } from 'react-router-dom'; import styled from 'styled-components'; import monthlyDiary from '../mockData/diary'; +import sad from '../assets/images/sad.svg' +import joy from '../assets/images/joy.svg' +import complaint from '../assets/images/complaint.svg' +import angry from '../assets/images/angry.svg' +import confusion from '../assets/images/confusion.svg' const Container = styled.div` width: 390px; @@ -77,9 +82,10 @@ const CardSubtitle = styled.p` `; const CardIcon = styled.div` - width: 150px; - height: 150px; + width: 100px; + height: 100px; border-radius: 50%; + margin: 20px 0px; display: flex; align-items: center; justify-content: center; @@ -174,7 +180,9 @@ const Monthly = () => { 가장 많이 느낀 감정 울음 5회 - 😭 + + sad + 닉네임님이 기록한 노래들이에요. diff --git a/src/pages/Recap.jsx b/src/pages/Recap.jsx index c255e99..403dc07 100644 --- a/src/pages/Recap.jsx +++ b/src/pages/Recap.jsx @@ -2,6 +2,11 @@ import React from 'react'; import { useNavigate } from 'react-router-dom'; import Button from '../components/Button'; import styled from 'styled-components'; +import sad from '../assets/images/sad.svg' +import joy from '../assets/images/joy.svg' +import complaint from '../assets/images/complaint.svg' +import angry from '../assets/images/angry.svg' +import confusion from '../assets/images/confusion.svg' const Container = styled.div` width: 390px; @@ -88,7 +93,9 @@ const Recap = () => { 가장 많이 느낀 감정 울음 5회 - 😭 + + sad + @@ -100,7 +107,6 @@ const Recap = () => { DAY6 @@ -114,7 +120,6 @@ const Recap = () => { Zombie From 262f6c6939dbebabc55276a71fa9954edf007b09 Mon Sep 17 00:00:00 2001 From: wlswnsdn Date: Fri, 30 May 2025 00:05:26 +0900 Subject: [PATCH 5/5] =?UTF-8?q?fix:=20=EB=8F=84=EC=BB=A4=20=EB=84=A4?= =?UTF-8?q?=ED=8A=B8=EC=9B=8C=ED=81=AC=20=EC=84=A4=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docker-compose.yml | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/docker-compose.yml b/docker-compose.yml index c517cef..552aefb 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -70,4 +70,7 @@ services: container_name: cloudflare restart: unless-stopped image: cloudflare/cloudflared:latest - command: tunnel --no-autoupdate --protocol http2 run --token eyJhIjoiM2FhNmJmMjU1NzdmMDQ1OThhMjYyMGEwMzg4OWVkMzYiLCJ0IjoiM2EzNTk5MTItNmZhYi00OGM0LWIxMDktODRhOTFjMzVmN2MwIiwicyI6Ik9UVm1NV1l3TW1RdE9XWTNOQzAwWkdRd0xXRTJZalV0TldSaFpESTBZek01TjJGbSJ9 \ No newline at end of file + command: tunnel --no-autoupdate --protocol http2 run --token eyJhIjoiM2FhNmJmMjU1NzdmMDQ1OThhMjYyMGEwMzg4OWVkMzYiLCJ0IjoiM2EzNTk5MTItNmZhYi00OGM0LWIxMDktODRhOTFjMzVmN2MwIiwicyI6Ik9UVm1NV1l3TW1RdE9XWTNOQzAwWkdRd0xXRTJZalV0TldSaFpESTBZek01TjJGbSJ9 +networks: + lpilogue-network: + external: true \ No newline at end of file