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 diff --git a/src/App.jsx b/src/App.jsx index bfefc86..09d03c2 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -14,6 +14,9 @@ import Mypage from './pages/Mypage'; import Details from './pages/Details'; 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 ( @@ -22,6 +25,7 @@ function App() { } /> } /> } /> + } /> } /> } /> } /> @@ -31,6 +35,8 @@ function App() { } /> } /> } /> + } /> + } /> } /> } /> 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/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/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/Home.jsx b/src/pages/Home.jsx index c872946..94e50f9 100644 --- a/src/pages/Home.jsx +++ b/src/pages/Home.jsx @@ -2,62 +2,147 @@ 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('/onboarding/today'); }; const handleUserIconClick = () => { @@ -66,14 +151,37 @@ const Home = () => { return ( - +
👤 - - 만나서 반가워요! - 오늘은 어떤 일기를 작성해볼까요? - - 일기 쓰기 - +
+ + + 오늘은 ({weatherInfo}) + 이런 날엔 + + {`{${recommendedSong.artist}} - {${recommendedSong.title}}`} + + 음 추천드렸어요!😊 + + + + + 오늘 LP/플로그 유저들이 +
+ 많이 기록한 노래예요. + + + + {popularSongs.map((song) => ( + + {song.number}. + {`{${song.artist}} - {${song.title}}`} + + ))} + + + + ✏️ ); }; diff --git a/src/pages/Monthly.jsx b/src/pages/Monthly.jsx new file mode 100644 index 0000000..838e25d --- /dev/null +++ b/src/pages/Monthly.jsx @@ -0,0 +1,207 @@ +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; + 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; + margin-top: 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 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: 100px; + height: 100px; + border-radius: 50%; + margin: 20px 0px; + 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; + border-radius: 10px; + cursor: pointer; + + img { + width: 100%; + border-radius: 20px; + + &:hover { + transform: translateY(-2px); + box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15); + } + } + + 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}월 + + + + + + + + + + 가장 많이 느낀 감정 + 울음 5회 + + + sad + + + + 닉네임님이 기록한 노래들이에요. + + + {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/Mypage.jsx b/src/pages/Mypage.jsx index 68ba8e9..d022155 100644 --- a/src/pages/Mypage.jsx +++ b/src/pages/Mypage.jsx @@ -1,138 +1,152 @@ -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'; +import LP from '../assets/images/Logo_LP.svg'; const Container = styled.div` width: 390px; margin: 0 auto; - padding-top: 20px; + padding: 40px 30px 30px 30px; + height: 100vh; + display: flex; + flex-direction: column; + box-sizing: border-box; +`; + +const Title = styled.h1` + font-size: 32px; + font-weight: bold; + text-align: center; + margin-bottom: 40px; color: #333; - min-height: 100vh; `; -const Title = styled.div` - font-size: 28px; - margin: 0; +const ButtonGrid = styled.div` + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 20px; + margin-bottom: 30px; `; -const Subtitle = styled.div` - margin-bottom: 15px; - color: #555; +const MenuButton = styled.button` + background: white; + border: none; + border-radius: 15px; + padding: 15px 30px; + 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 Navigation = styled.div` +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; - margin-bottom: 10px; - - button { - background: #56b7c4; - border: none; - border-radius: 5px; - padding: 5px 10px; - color: white; - cursor: pointer; - - &:disabled { - background: #ccc; - cursor: not-allowed; - } + width: 100%; + + &:hover { + transform: translateY(-2px); + box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15); } -`; -const Grid = styled.div` - display: grid; - grid-template-columns: repeat(2, 1fr); - gap: 20px; + &:active { + transform: translateY(0); + } `; -const Card = styled.div` +const RecapContent = 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; + gap: 15px; +`; - img { - width: 100%; - border-radius: 5px; - } +const RecapLogo = styled.img` + width: 40px; + height: 40px; + border-radius: 50%; +`; - p { - margin: 10px 0; - } +const ArrowIcon = styled.span` + font-size: 18px; + color: #666; `; -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 SubText = styled.p` + font-size: 16px; + margin-top: 4px; + maring-left: 35px; +`; +const Mypage = () => { 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}`); // 동적 라우트로 이동 + const handleDiaryClick = () => { + navigate('/mypage/monthly'); // 기존 Mypage 컴포넌트로 이동 + }; + + const handleProfileClick = () => { + navigate('/signup/profile'); // 기존 Mypage 컴포넌트로 이동 + }; + + const recapClick = () => { + navigate('/mypage/recap'); // 기존 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}

- - ); - })} - + 닉네임님 + + + 일기 보기 + 프로필 수정 + + + + + + Recap of (2025) + + › + + + + 로그아웃 + 회원탈퇴 + ); }; 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/Recap.jsx b/src/pages/Recap.jsx new file mode 100644 index 0000000..403dc07 --- /dev/null +++ b/src/pages/Recap.jsx @@ -0,0 +1,130 @@ +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; + 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회 + + + sad + + + + + + 가장 많이 기록한 아티스트 + DAY6 5회 + + + DAY6 + + + + + + 가장 많이 기록한 노래 + Zombie 6회 + + + Zombie + + + + ); +}; + +export default Recap; 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;