From d114bc69f1d6b23e8b7a2a2f0bed3fc420d17461 Mon Sep 17 00:00:00 2001 From: KimDoHyun Date: Wed, 24 Jul 2024 11:03:31 +0900 Subject: [PATCH 1/5] =?UTF-8?q?feat:=20=EA=B7=B8=EB=A3=B9=20=EA=B8=B0?= =?UTF-8?q?=EB=B3=B8=EC=A0=95=EB=B3=B4=20=ED=8E=98=EC=9D=B4=EC=A7=80=20?= =?UTF-8?q?=EB=A0=88=EC=9D=B4=EC=95=84=EC=9B=83=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 11 ++ package.json | 1 + src/pages/group/BasicInfo.jsx | 42 ----- src/pages/group/Rank.jsx | 118 ------------ src/pages/group/Schedule.jsx | 139 --------------- src/pages/group/ScheduleAdd.jsx | 168 ------------------ src/pages/group/basicinfo/BasicInfo.jsx | 3 +- src/pages/group/basicinfo/Rank.jsx | 39 ++-- .../basicInfo_components/ClubMainInfo.jsx | 1 + .../basicInfo_components/RankItem.jsx | 8 +- .../basicInfo_components/RankTab.jsx | 79 ++------ src/pages/group/fee/FeeStatus.jsx | 50 ++++-- .../group/group_components/ClubSubInfo.jsx | 38 ++-- src/pages/group/schedule/Schedule.jsx | 51 +++++- src/pages/group/schedule/ScheduleAdd.jsx | 108 ++++++----- .../schedule/schedule_components/Calendar.jsx | 16 +- src/pages/home/Calendar.jsx | 52 +++++- src/pages/home/Home.jsx | 12 +- .../home/home_components/CalendarDateItem.jsx | 47 +++++ .../home/home_components/CalendarDayItem.jsx | 34 ++++ src/styles/global-style.js | 8 + 21 files changed, 352 insertions(+), 673 deletions(-) delete mode 100644 src/pages/group/BasicInfo.jsx delete mode 100644 src/pages/group/Rank.jsx delete mode 100644 src/pages/group/Schedule.jsx delete mode 100644 src/pages/group/ScheduleAdd.jsx create mode 100644 src/pages/home/home_components/CalendarDateItem.jsx create mode 100644 src/pages/home/home_components/CalendarDayItem.jsx diff --git a/package-lock.json b/package-lock.json index 5d3728b..fb0cbd6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,6 +11,7 @@ "@testing-library/jest-dom": "^5.17.0", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", + "date-fns": "^3.6.0", "react": "^18.3.1", "react-calendar": "^5.0.0", "react-dom": "^18.3.1", @@ -7195,6 +7196,16 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/date-fns": { + "version": "3.6.0", + "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-3.6.0.tgz", + "integrity": "sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==", + "license": "MIT", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/kossnocorp" + } + }, "node_modules/debug": { "version": "4.3.5", "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.5.tgz", diff --git a/package.json b/package.json index fd3c9c6..f9b86ff 100644 --- a/package.json +++ b/package.json @@ -6,6 +6,7 @@ "@testing-library/jest-dom": "^5.17.0", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", + "date-fns": "^3.6.0", "react": "^18.3.1", "react-calendar": "^5.0.0", "react-dom": "^18.3.1", diff --git a/src/pages/group/BasicInfo.jsx b/src/pages/group/BasicInfo.jsx deleted file mode 100644 index 503216b..0000000 --- a/src/pages/group/BasicInfo.jsx +++ /dev/null @@ -1,42 +0,0 @@ -import styled from 'styled-components'; -import ClubMainInfo from './group_components/ClubMainInfo'; -import ClubSubInfo from './group_components/ClubSubInfo'; -import { useState } from 'react'; -import Rank from './Rank'; - -const BaseContainer = styled.div` - width: 100%; - height: 100vh; - padding: 16px 20px; - display: flex; - flex-direction: column; - gap: 12px; - box-sizing: border-box; -`; - -const BasicInfo = () => { - const [isModalOpen, setIsModalOpen] = useState(false); - const toggleModal = () => { - setIsModalOpen((prev) => !prev); - console.log(isModalOpen); - }; - const closeModal = () => { - setIsModalOpen(false); - }; - return ( - - - - - - ); -}; - -export default BasicInfo; diff --git a/src/pages/group/Rank.jsx b/src/pages/group/Rank.jsx deleted file mode 100644 index 2930e15..0000000 --- a/src/pages/group/Rank.jsx +++ /dev/null @@ -1,118 +0,0 @@ -import { useState } from 'react'; -import styled from 'styled-components'; -import RankItem from './group_components/RankItem'; - -const BaseContainer = styled.div` - max-width: 649px; - position: fixed; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - width: 100%; - height: 100vh; - z-index: 10001; - padding: 4px 20px; - border-radius: 16px 16px 0px 0px; - box-shadow: 0px -2px 87px 0px #475467; - box-sizing: border-box; - display: ${(props) => (props.isOpen ? 'block' : 'none')}; - background: linear-gradient(270deg, #1e58ec 0%, #525e9d 100%); -`; -const TopBar = styled.div` - width: 100%; - height: 64px; /* Hug (64px) px를 64px로 변경 */ - padding: 0px 20px; - font-family: Pretendard; - font-size: 20px; - font-weight: 600; - line-height: 22px; - color: #ffffff; - display: flex; - align-items: center; - position: relative; -`; - -const BackButton = styled.button` - background: none; - border: none; - font-size: 20px; - cursor: pointer; - font-weight: 600; - line-height: 22px; - color: #ffffff; - font-size: 24px; - position: absolute; - left: 20px; -`; - -const TopText = styled.div` - margin: 0 auto; - font-size: 20px; - font-weight: 600; - line-height: 22px; - text-align: center; -`; - -const ListContainer = styled.div` - width: 100%; - height: Hug (502.9px) px; - padding: 16px 0px; - border-radius: 16px 16px 0px 0px; - background-color: #ffffff; -`; -const mockData = [ - { - rank: 1, - isUp: true, - upDown: 2, - name: '중앙가르드', - score: 238, - }, - { - rank: 2, - isUp: false, - upDown: 1, - name: '중앙가르드', - score: 238, - }, - { - rank: 3, - isUp: false, - upDown: 2, - name: '중앙가르드', - score: 238, - }, - { - rank: 4, - isUp: true, - upDown: 1, - name: '중앙가르드', - score: 238, - }, - { - rank: 5, - isUp: false, - upDown: 1, - name: '중앙가르드', - score: 238, - }, -]; -const Rank = ({ isOpen, onClose }) => { - return ( -
- - - < - 티어 - - - {mockData.map((item) => ( - - ))} - - -
- ); -}; - -export default Rank; diff --git a/src/pages/group/Schedule.jsx b/src/pages/group/Schedule.jsx deleted file mode 100644 index 083a02b..0000000 --- a/src/pages/group/Schedule.jsx +++ /dev/null @@ -1,139 +0,0 @@ -import styled from 'styled-components'; -import { CalenderContainer, GroupCalendar } from './group_components/Calendar'; -import { useState, useEffect, useCallback, useMemo } from 'react'; -import ScheduleItem, { - AddSchedule, - PlusIcon, -} from './group_components/ScheduleItem'; -import ScheduleAdd from './ScheduleAdd'; - -const BaseContainer = styled.div` - width: 100%; - height: 100vh; - padding: 16px 20px; - display: flex; - flex-direction: column; - gap: 12px; - box-sizing: border-box; -`; - -const ScheduleList = styled.div` - width: 100%; - padding: 24px 16px; - display: flex; - flex-direction: column; - gap: 12px; - border-radius: 26px 26px 0px 0px; - box-shadow: 0px -2px 12px 0px #555ba021; - box-sizing: border-box; -`; - -const ScheduleTitle = styled.div` - font-size: 20px; - font-weight: 600; - line-height: 22px; - color: #344054; -`; - -const Schedule = () => { - const [date, setDate] = useState(new Date()); - const [selectedSchedule, setSelectedSchedule] = useState([]); - - const [isModalOpen, setIsModalOpen] = useState(false); - - const formattedDate = `${date.getFullYear()}년 ${ - date.getMonth() + 1 - }월 ${date.getDate()}일`; - - const mockData = useMemo( - () => [ - { - scheduleDate: new Date(2024, 6, 25), - startTime: '17:00', - endTime: '19:00', - eventName: '정기 훈련', - location: '홍익대학교 체육관', - }, - { - scheduleDate: new Date(2024, 6, 25), - startTime: '19:00', - endTime: '21:00', - eventName: '정기 매치', - location: '홍익대학교 체육관', - }, - ], - [] - ); - - const filterSchedule = useCallback( - (newDate) => { - return mockData.filter( - (item) => - item.scheduleDate.getFullYear() === newDate.getFullYear() && - item.scheduleDate.getMonth() === newDate.getMonth() && - item.scheduleDate.getDate() === newDate.getDate() - ); - }, - [mockData] - ); - - const onChange = (newDate) => { - setDate(newDate); - const filteredSchedule = filterSchedule(newDate); - setSelectedSchedule(filteredSchedule); - }; - - useEffect(() => { - const filteredSchedule = filterSchedule(date); - setSelectedSchedule(filteredSchedule); - }, [date, filterSchedule]); - - const formatShortWeekday = (locale, date) => { - const weekdays = ['S', 'M', 'T', 'W', 'T', 'F', 'S']; - return weekdays[date.getDay()]; - }; - - const onClickDay = (value) => { - onChange(value); - }; - const toggleModal = () => { - setIsModalOpen((prev) => !prev); - console.log(isModalOpen); - }; - const closeModal = () => { - setIsModalOpen(false); - }; - return ( - - - date.getDate()} - navigationLabel={({ date, view }) => `${date.getMonth() + 1}월`} - formatShortWeekday={formatShortWeekday} - /> - - - {formattedDate} - {selectedSchedule.map((item, index) => ( - - ))} - - + 새로운 일정 추가하기 - - - - - ); -}; - -export default Schedule; diff --git a/src/pages/group/ScheduleAdd.jsx b/src/pages/group/ScheduleAdd.jsx deleted file mode 100644 index f66c90f..0000000 --- a/src/pages/group/ScheduleAdd.jsx +++ /dev/null @@ -1,168 +0,0 @@ -import styled from 'styled-components'; -import { ReactComponent as MemoIcon } from '../../assets/icons/group/memo.svg'; -import { ReactComponent as LocationIcon } from '../../assets/icons/group/location.svg'; -import { ReactComponent as LinkIcon } from '../../assets/icons/group/link.svg'; -import { ReactComponent as ClockIcon } from '../../assets/icons/group/clock.svg'; -import { ReactComponent as AlarmIcon } from '../../assets/icons/group/alarm.svg'; -import { - ToggleSwitch, - ToggleSlider, - CheckBox, -} from './group_components/ToggleButton'; -import { useState } from 'react'; -const BaseContainer = styled.div` - max-width: 649px; - position: fixed; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - width: 100%; - height: 100vh; - z-index: 10001; - padding: 4px 20px; - border-radius: 16px 16px 0px 0px; - box-shadow: 0px -2px 87px 0px #475467; - box-sizing: border-box; - display: ${(props) => (props.isOpen ? 'block' : 'none')}; - - background-color: #ffffff; -`; -const ModalNavi = styled.div` - width: 100%; - height: 78px; - padding: 20px 0px 36px 0px; - border-radius: 8px 0px 0px 0px; - display: flex; - justify-content: space-between; -`; -const CloseButton = styled.button` - background: none; - border: none; - font-size: 20px; - cursor: pointer; - font-size: 20px; - font-weight: 600; - line-height: 22px; - color: #101828; -`; -const AddButton = styled.button` - color: #ff6330; - background: none; - border: none; - font-size: 20px; - cursor: pointer; - font-size: 20px; - font-weight: 600; - line-height: 22px; -`; - -const AddContainer = styled.div` - width: 100%; - display: flex; - flex-direction: column; - gap: 12px; -`; -const AddWrapper = styled.div` - display: flex; - justify-content: space-between; - align-items: center; - width: 100%; - height: 40px; - padding: 12px 0px; - - border: 1px solid #f9fafb; -`; -const AddInput = styled.input` - outline: none; - border: 0px; - // color: #98a2b3; - color: #101828; - font-size: 16px; - font-weight: 400; - line-height: 14px; - text-align: right; -`; -const AddTitle = styled.div` - display: flex; - align-items: center; - width: 100%; - height: 48px; - padding: 12px 6px; - gap: 8px; - border: 1px solid F9FAFB; -`; -const TiTlePoint = styled.div` - width: 12px; - height: 12px; - border-radius: 17px; - background: #ff6330; - margin-right: 8px; -`; - -const TiTleText = styled.input` - font-size: 24px; - font-weight: 600; - line-height: 22px; - letter-spacing: -0.03em; - color: #101828; - outline: none; - border: 0px; -`; -const ScheduleAdd = ({ isOpen, onClose }) => { - const [isActive, setIsActive] = useState(false); - const [input, setInput] = useState({ - title: '', - location: '', - startTime: '', - endTime: '', - checkedAlarm: false, - url: '', - memo: '', - }); - - return ( - - - 취소 - 추가 - - - - - - - - - - -

하루종일

- - setIsActive(!isActive)} - /> - - - - - - - > - - - -

알람

- - - - - - - - - - ); -}; - -export default ScheduleAdd; diff --git a/src/pages/group/basicinfo/BasicInfo.jsx b/src/pages/group/basicinfo/BasicInfo.jsx index 8a98525..bbf4edf 100644 --- a/src/pages/group/basicinfo/BasicInfo.jsx +++ b/src/pages/group/basicinfo/BasicInfo.jsx @@ -6,7 +6,8 @@ import Rank from './Rank'; const BaseContainer = styled.div` width: 100%; - height: 100vh; + height: 100%; + overflow-y: auto; padding: 16px 20px; display: flex; flex-direction: column; diff --git a/src/pages/group/basicinfo/Rank.jsx b/src/pages/group/basicinfo/Rank.jsx index a0ec7d0..9961210 100644 --- a/src/pages/group/basicinfo/Rank.jsx +++ b/src/pages/group/basicinfo/Rank.jsx @@ -12,13 +12,12 @@ const BaseContainer = styled.div` left: 50%; transform: translate(-50%, -50%); width: 100%; - height: 100vh; + height: 100%; + overflow-y: auto; z-index: 10001; - padding: 4px 20px; border-radius: 16px 16px 0px 0px; box-shadow: 0px -2px 87px 0px #475467; box-sizing: border-box; - display: ${(props) => (props.isOpen ? 'block' : 'none')}; background: linear-gradient(270deg, #1e58ec 0%, #525e9d 100%); `; const Header = styled.div` @@ -79,6 +78,7 @@ const RankBackIcon2Styled = styled(RankBackIcon2)` height: 231.89px; top: 81.24px; right: 0px; + pointer-events: none; `; const mockDataMonthly = [ { @@ -159,22 +159,23 @@ const Rank = ({ isOpen, onClose }) => { const listdata = activeTab === 'monthly' ? mockDataMonthly : mockDataAllTime; return ( <> - -
- < - 티어 -
- - - - {listdata.map((item) => ( - - ))} - - - - - + {isOpen && ( + +
+ < + 티어 +
+ + + + {listdata.map((item) => ( + + ))} + + + + + )} ); }; diff --git a/src/pages/group/basicinfo/basicInfo_components/ClubMainInfo.jsx b/src/pages/group/basicinfo/basicInfo_components/ClubMainInfo.jsx index f28bc98..038d510 100644 --- a/src/pages/group/basicinfo/basicInfo_components/ClubMainInfo.jsx +++ b/src/pages/group/basicinfo/basicInfo_components/ClubMainInfo.jsx @@ -13,6 +13,7 @@ const Container = styled.div` flex-direction: column; gap: 8px; box-sizing: border-box; + height: 100%; `; const TagInfo = styled.div` display: flex; diff --git a/src/pages/group/basicinfo/basicInfo_components/RankItem.jsx b/src/pages/group/basicinfo/basicInfo_components/RankItem.jsx index 3011e41..4ace37c 100644 --- a/src/pages/group/basicinfo/basicInfo_components/RankItem.jsx +++ b/src/pages/group/basicinfo/basicInfo_components/RankItem.jsx @@ -33,11 +33,8 @@ const RankSpan = styled.div` line-height: 45px; letter-spacing: -0.011em; text-align: left; - color: ${({ isUp }) => (isUp ? '#008FDF' : '#FF6330')}; `; -// const RankDirection = ` -// font-size:15px; -// `; + const ScoreWrapper = styled.div` display: flex; flex-direction: column; @@ -76,11 +73,12 @@ const Score = styled.div` color: #475467; `; const RankItem = ({ rank, isUp, upDown, name, score }) => { + const rankColor = isUp ? '#008FDF' : '#FF6330'; return ( 0{rank} - + {isUp ? '↑' : '↓'} {upDown} diff --git a/src/pages/group/basicinfo/basicInfo_components/RankTab.jsx b/src/pages/group/basicinfo/basicInfo_components/RankTab.jsx index d735d22..95a07ec 100644 --- a/src/pages/group/basicinfo/basicInfo_components/RankTab.jsx +++ b/src/pages/group/basicinfo/basicInfo_components/RankTab.jsx @@ -1,53 +1,3 @@ -// import styled from 'styled-components'; - -// const Container = styled.div` -// display: flex; -// justify-content: center; -// width: 100%; -// height: 45px; -// padding: 12px 20px; -// `; - -// const TabItem = styled(NavLink)` -// color: #ffffff; -// font-size: 18px; -// font-weight: 600; -// line-height: 27px; -// text-align: center; -// position: relative; -// width: 168.5px; -// height: 27px; -// margin: 0 10px; -// opacity: 1; - -// &.active { -// &:after { -// content: ''; -// display: block; -// position: absolute; -// bottom: -5px; -// left: 0; -// height: 2px; -// background: #ff6330; -// width: 100%; -// } -// } -// `; - -// const RankTab = () => { -// return ( -// -// -// Monthly -// -// -// All time -// -// -// ); -// }; - -// export default RankTab; import React from 'react'; import styled from 'styled-components'; @@ -60,6 +10,7 @@ const Container = styled.div` `; const TabItem = styled.div` + z-index: 10; color: #ffffff; font-size: 18px; font-weight: 600; @@ -71,33 +22,29 @@ const TabItem = styled.div` margin: 0 10px; cursor: pointer; - ${({ isActive }) => - isActive && - ` - &:after { - content: ''; - display: block; - position: absolute; - bottom: -5px; - left: 0; - height: 2px; - background: #ff6330; - width: 100%; - } - `} + &::after { + content: ''; + display: ${({ $active }) => ($active ? 'block' : 'none')}; + position: absolute; + bottom: -5px; + left: 0; + height: 2px; + background: #ff6330; + width: 100%; + } `; const RankTab = ({ activeTab, setActiveTab }) => { return ( setActiveTab('monthly')} > Monthly setActiveTab('all-time')} > All time diff --git a/src/pages/group/fee/FeeStatus.jsx b/src/pages/group/fee/FeeStatus.jsx index 162b4e6..5b73892 100644 --- a/src/pages/group/fee/FeeStatus.jsx +++ b/src/pages/group/fee/FeeStatus.jsx @@ -11,13 +11,13 @@ const HeaderContainer = styled.div` width: 100%; top: 0; left: 0; - z-index: 1000; // 다른 요소 위에 위치하도록 + z-index: 1000; box-sizing: border-box; display: flex; - justify-content: space-between; // 왼쪽과 오른쪽 컨텐츠 사이의 공간을 균등하게 분배 - align-items: center; // 세로 중앙 정렬 - padding: 20px; // 헤더 패딩 - border-bottom: 1px solid #dcdcdc; // 임시 + justify-content: space-between; + align-items: center; / + padding: 20px; + border-bottom: 1px solid #dcdcdc; `; const CloseButton = styled.button` @@ -76,8 +76,10 @@ const FilterButton = styled.button` padding: 8px 12px; border: none; border-radius: 16px; - background-color: ${({ theme, $active }) => ($active ? theme.colors.neutral[700] : theme.colors.neutral[50])}; - color: ${({ theme, $active }) => ($active ? theme.colors.neutral[50] : theme.colors.neutral[500])}; + background-color: ${({ theme, $active }) => + $active ? theme.colors.neutral[700] : theme.colors.neutral[50]}; + color: ${({ theme, $active }) => + $active ? theme.colors.neutral[50] : theme.colors.neutral[500]}; font-size: 14px; font-weight: 500; `; @@ -93,7 +95,7 @@ const FeeStatus = ({ closeFeeStatus }) => { { name: '이름', isPaid: true }, { name: '이름', isPaid: true }, { name: '이름', isPaid: true }, - { name: '다인', isPaid: true } + { name: '다인', isPaid: true }, ]; const [filter, setFilter] = useState('전체'); @@ -102,13 +104,12 @@ const FeeStatus = ({ closeFeeStatus }) => { setFilter(newFilter); }; - const filteredMembers = members.filter(member => { + const filteredMembers = members.filter((member) => { if (filter === '납부') return member.isPaid; if (filter === '미납부') return !member.isPaid; return true; }); - return ( @@ -122,13 +123,32 @@ const FeeStatus = ({ closeFeeStatus }) => { 6.30일까지, 3만원씩 - handleFilterChange('전체')}>전체 - handleFilterChange('납부')}>납부 - handleFilterChange('미납부')}>미납부 + handleFilterChange('전체')} + > + 전체 + + handleFilterChange('납부')} + > + 납부 + + handleFilterChange('미납부')} + > + 미납부 + {filteredMembers.map((member, index) => ( - - ))} + + ))} ); diff --git a/src/pages/group/group_components/ClubSubInfo.jsx b/src/pages/group/group_components/ClubSubInfo.jsx index b446238..3b10d14 100644 --- a/src/pages/group/group_components/ClubSubInfo.jsx +++ b/src/pages/group/group_components/ClubSubInfo.jsx @@ -1,5 +1,25 @@ import ClubComment from './ClubComment'; import styled from 'styled-components'; + +const ClubSubInfo = ({ onClick }) => { + return ( + + + + + 티어 정보 + 실버 + 138팀 중 7위 + 다음 레벨까지 남은 순위 : 3위 + + + {' '} + + ); +}; + +export default ClubSubInfo; + const Container = styled.div` display: flex; flex-direction: column; @@ -46,21 +66,3 @@ const TextBIg = styled.div` letter-spacing: -0.011em; color: #ffffff; `; -const ClubSubInfo = ({ onClick }) => { - return ( - - - - - 티어 정보 - 실버 - 138팀 중 7위 - 다음 레벨까지 남은 순위 : 3위 - - - {' '} - - ); -}; - -export default ClubSubInfo; diff --git a/src/pages/group/schedule/Schedule.jsx b/src/pages/group/schedule/Schedule.jsx index 9bf9391..0c2822d 100644 --- a/src/pages/group/schedule/Schedule.jsx +++ b/src/pages/group/schedule/Schedule.jsx @@ -2,6 +2,7 @@ import styled from 'styled-components'; import { CalenderContainer, GroupCalendar, + StyledDot, } from './schedule_components/Calendar'; import { useState, useEffect, useCallback, useMemo } from 'react'; import ScheduleItem, { @@ -12,8 +13,8 @@ import ScheduleAdd from './ScheduleAdd'; const BaseContainer = styled.div` width: 100%; - height: 100vh; - padding: 16px 20px; + height: 100%; + overflow-y: auto; display: flex; flex-direction: column; gap: 12px; @@ -64,6 +65,34 @@ const Schedule = () => { eventName: '정기 매치', location: '홍익대학교 체육관', }, + { + scheduleDate: new Date(2024, 7, 3), + startTime: '17:00', + endTime: '19:00', + eventName: '정기 훈련', + location: '홍익대학교 체육관', + }, + { + scheduleDate: new Date(2024, 7, 3), + startTime: '19:00', + endTime: '21:00', + eventName: '정기 매치', + location: '홍익대학교 체육관', + }, + { + scheduleDate: new Date(2024, 7, 10), + startTime: '17:00', + endTime: '19:00', + eventName: '정기 훈련', + location: '홍익대학교 체육관', + }, + { + scheduleDate: new Date(2024, 7, 10), + startTime: '19:00', + endTime: '21:00', + eventName: '정기 매치', + location: '홍익대학교 체육관', + }, ], [] ); @@ -106,6 +135,23 @@ const Schedule = () => { const closeModal = () => { setIsModalOpen(false); }; + + // 특정 날짜에 점 표시 및 디버깅용 console.log 추가 + const tileContent = ({ date, view }) => { + if (view === 'month') { + const isScheduled = mockData.some( + (item) => + item.scheduleDate.getFullYear() === date.getFullYear() && + item.scheduleDate.getMonth() === date.getMonth() && + item.scheduleDate.getDate() === date.getDate() + ); + + if (isScheduled) { + return ; + } + } + return null; + }; return ( @@ -116,6 +162,7 @@ const Schedule = () => { formatDay={(locale, date) => date.getDate()} navigationLabel={({ date, view }) => `${date.getMonth() + 1}월`} formatShortWeekday={formatShortWeekday} + tileContent={tileContent} /> diff --git a/src/pages/group/schedule/ScheduleAdd.jsx b/src/pages/group/schedule/ScheduleAdd.jsx index 7a01f0a..2cdd322 100644 --- a/src/pages/group/schedule/ScheduleAdd.jsx +++ b/src/pages/group/schedule/ScheduleAdd.jsx @@ -11,6 +11,56 @@ import { CheckBox, } from './schedule_components/ToggleButton'; import { useState } from 'react'; + +const ScheduleAdd = ({ isOpen, onClose }) => { + const [isActive, setIsActive] = useState(false); + + return ( + + + 취소 + 추가 + + + + + + + + + + +

하루종일

+ + setIsActive(!isActive)} + /> + + + + + + + > + + + +

알람

+ + + + + + + + + + ); +}; + +export default ScheduleAdd; const BaseContainer = styled.div` max-width: 649px; position: fixed; @@ -109,61 +159,3 @@ const TiTleText = styled.input` outline: none; border: 0px; `; -const ScheduleAdd = ({ isOpen, onClose }) => { - const [isActive, setIsActive] = useState(false); - // const [input, setInput] = useState({ - // title: '', - // location: '', - // startTime: '', - // endTime: '', - // checkedAlarm: false, - // url: '', - // memo: '', - // }); - - return ( - - - 취소 - 추가 - - - - - - - - - - -

하루종일

- - setIsActive(!isActive)} - /> - - - - - - - > - - - -

알람

- - - - - - - - - - ); -}; - -export default ScheduleAdd; diff --git a/src/pages/group/schedule/schedule_components/Calendar.jsx b/src/pages/group/schedule/schedule_components/Calendar.jsx index 80b87fe..b0aea0f 100644 --- a/src/pages/group/schedule/schedule_components/Calendar.jsx +++ b/src/pages/group/schedule/schedule_components/Calendar.jsx @@ -7,6 +7,7 @@ export const CalenderContainer = styled.div` justify-content: center; position: relative; box-sizing: border-box; + padding: 16px 20px; //기본 캘린더 css속성 .react-calendar { @@ -39,8 +40,10 @@ export const CalenderContainer = styled.div` } //일 간격 설정 .react-calendar__tile { - padding: 8px 16px 8px 16px; + padding: 6px 16px; position: relative; + width: 50px; + height: 50px; } //이웃 달 글씨 연하게 .react-calendar__month-view__days__day--neighboringMonth { @@ -49,7 +52,7 @@ export const CalenderContainer = styled.div` .react-calendar__tile--active, .react-calendar__tile--now { padding: 10px 10px; - border-radius: 100px; + border-radius: 150px; } .react-calendar__tile--active { background-color: #ff6330; @@ -79,14 +82,13 @@ export const CalenderContainer = styled.div` export const GroupCalendar = styled(Calendar)``; -/* 출석한 날짜에 점 표시 스타일 */ export const StyledDot = styled.div` - background-color: ${(props) => props.theme.br_2}; + background-color: #0bde7a; border-radius: 50%; - width: 0.3rem; - height: 0.3rem; + width: 5.49px; + height: 5.49px; position: absolute; - top: 60%; + top: 15%; left: 50%; transform: translateX(-50%); `; diff --git a/src/pages/home/Calendar.jsx b/src/pages/home/Calendar.jsx index 310be17..c088371 100644 --- a/src/pages/home/Calendar.jsx +++ b/src/pages/home/Calendar.jsx @@ -1,14 +1,47 @@ -import styled from "styled-components"; +import styled from 'styled-components'; +import CalendarDayItem from './home_components/CalendarDayItem'; +import CalendarDateItem from './home_components/CalendarDateItem'; +import { startOfWeek, endOfWeek, addDays } from 'date-fns'; +const Calendar = () => { + const date = new Date(); + const WEEKDAY = ['일', '월', '화', '수', '목', '금', '토']; + const formattedDate = `${date.getMonth() + 1}월 ${date.getDate()}일 (${ + WEEKDAY[date.getDay()] + })`; + const week = []; + let tmpDay = startOfWeek(date, { weekStartsOn: 1 }); + while (tmpDay <= endOfWeek(date, { weekStartsOn: 1 })) { + week.push(new Date(tmpDay)); + tmpDay = addDays(tmpDay, 1); + } + + console.log(week); + return ( + + + {formattedDate} + + + + + ); +}; + +export default Calendar; const Container = styled.div` height: auto; `; -//라이브러리 상용할 것임 const CalendarDiv = styled.div` height: auto; display: flex; flex-direction: column; + gap: 5px; align-items: center; padding: 16px 0; border-radius: 16px; @@ -16,10 +49,11 @@ const CalendarDiv = styled.div` box-shadow: 0px 0px 12px #4a576b1a; `; -const Calendar = () => ( - - i'm calendar - -); - -export default Calendar; +const NowDate = styled.div` + font-family: Pretendard; + font-size: 20px; + font-weight: 600; + line-height: 18px; + text-align: center; + color: #ff6330; +`; diff --git a/src/pages/home/Home.jsx b/src/pages/home/Home.jsx index 6fd50fe..81cdd6d 100644 --- a/src/pages/home/Home.jsx +++ b/src/pages/home/Home.jsx @@ -1,9 +1,9 @@ -import MainBanner from "./MainBanners"; -import MainCalendar from "./Calendar"; -import MainSchedule from "./MainSchedule"; -import MainNotice from "./MainNotice"; -import MainArticle from "./MainArticle"; -import styled from "styled-components"; +import MainBanner from './MainBanners'; +import MainCalendar from './Calendar'; +import MainSchedule from './MainSchedule'; +import MainNotice from './MainNotice'; +import MainArticle from './MainArticle'; +import styled from 'styled-components'; const Container = styled.div` display: flex; diff --git a/src/pages/home/home_components/CalendarDateItem.jsx b/src/pages/home/home_components/CalendarDateItem.jsx new file mode 100644 index 0000000..698955d --- /dev/null +++ b/src/pages/home/home_components/CalendarDateItem.jsx @@ -0,0 +1,47 @@ +import styled from 'styled-components'; + +const DateWrapper = styled.div` + width: 100%; + max-height: 41.49; + padding: 0px 16px; + display: flex; + justify-content: space-between; +`; +const DatItem = styled.div` + width: 36px; + height: 36px; + /* font-family: Poppins; */ + font-size: 16px; + font-weight: 500; + line-height: 24px; + text-align: center; + color: ${({ isToday, isOtherMonth }) => { + if (isToday) return '#FF6330'; + if (isOtherMonth) return 'blue'; + return '#344054'; + }}; +`; + +const CalendarDateItem = ({ week, today, currentMonth }) => { + return ( + + {week.map((day) => { + const isToday = + day.getDate() === today && day.getMonth() + 1 === currentMonth; + const isOtherMonth = day.getMonth() + 1 !== currentMonth; + + return ( + + {day.getDate()} + + ); + })} + + ); +}; + +export default CalendarDateItem; diff --git a/src/pages/home/home_components/CalendarDayItem.jsx b/src/pages/home/home_components/CalendarDayItem.jsx new file mode 100644 index 0000000..c255e8d --- /dev/null +++ b/src/pages/home/home_components/CalendarDayItem.jsx @@ -0,0 +1,34 @@ +import styled from 'styled-components'; + +const DayWrapper = styled.div` + width: 100%; + max-height: 38px; + padding: 10px 20px 0px 20px; + display: flex; + justify-content: space-between; +`; +const DayItem = styled.div` + width: 36px; + height: 28px; + padding: 2px 0px; + + /* font-family: Poppins; */ + font-size: 13px; + font-weight: 500; + line-height: 24px; + text-align: center; + color: #667085; +`; +const CalendarDayItem = () => ( + + M + T + W + T + F + S + S + +); + +export default CalendarDayItem; diff --git a/src/styles/global-style.js b/src/styles/global-style.js index cc6f714..65a1f42 100644 --- a/src/styles/global-style.js +++ b/src/styles/global-style.js @@ -28,4 +28,12 @@ a { text-decoration: none; color: inherit; } + +*{ + box-sizing:border-box; +} +.hidden-day { + visibility: hidden; +} + `; From 5ab4b0be60c64f164536e8137ba62a1df7f330ff Mon Sep 17 00:00:00 2001 From: KimDoHyun Date: Thu, 25 Jul 2024 11:03:55 +0900 Subject: [PATCH 2/5] =?UTF-8?q?feat:=20=EC=9D=BC=EC=A0=95=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EB=A0=88=EC=9D=B4?= =?UTF-8?q?=EC=95=84=EC=9B=83=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/MainLayout.jsx | 1 + src/pages/group/Schedule.jsx | 139 ++++++++++++++++++++++++++ src/pages/group/ScheduleAdd.jsx | 168 ++++++++++++++++++++++++++++++++ 3 files changed, 308 insertions(+) create mode 100644 src/pages/group/Schedule.jsx create mode 100644 src/pages/group/ScheduleAdd.jsx diff --git a/src/components/MainLayout.jsx b/src/components/MainLayout.jsx index f72b8bb..b6ddec1 100644 --- a/src/components/MainLayout.jsx +++ b/src/components/MainLayout.jsx @@ -22,6 +22,7 @@ function MainLayout({ children }) { return ( {children} + ); diff --git a/src/pages/group/Schedule.jsx b/src/pages/group/Schedule.jsx new file mode 100644 index 0000000..083a02b --- /dev/null +++ b/src/pages/group/Schedule.jsx @@ -0,0 +1,139 @@ +import styled from 'styled-components'; +import { CalenderContainer, GroupCalendar } from './group_components/Calendar'; +import { useState, useEffect, useCallback, useMemo } from 'react'; +import ScheduleItem, { + AddSchedule, + PlusIcon, +} from './group_components/ScheduleItem'; +import ScheduleAdd from './ScheduleAdd'; + +const BaseContainer = styled.div` + width: 100%; + height: 100vh; + padding: 16px 20px; + display: flex; + flex-direction: column; + gap: 12px; + box-sizing: border-box; +`; + +const ScheduleList = styled.div` + width: 100%; + padding: 24px 16px; + display: flex; + flex-direction: column; + gap: 12px; + border-radius: 26px 26px 0px 0px; + box-shadow: 0px -2px 12px 0px #555ba021; + box-sizing: border-box; +`; + +const ScheduleTitle = styled.div` + font-size: 20px; + font-weight: 600; + line-height: 22px; + color: #344054; +`; + +const Schedule = () => { + const [date, setDate] = useState(new Date()); + const [selectedSchedule, setSelectedSchedule] = useState([]); + + const [isModalOpen, setIsModalOpen] = useState(false); + + const formattedDate = `${date.getFullYear()}년 ${ + date.getMonth() + 1 + }월 ${date.getDate()}일`; + + const mockData = useMemo( + () => [ + { + scheduleDate: new Date(2024, 6, 25), + startTime: '17:00', + endTime: '19:00', + eventName: '정기 훈련', + location: '홍익대학교 체육관', + }, + { + scheduleDate: new Date(2024, 6, 25), + startTime: '19:00', + endTime: '21:00', + eventName: '정기 매치', + location: '홍익대학교 체육관', + }, + ], + [] + ); + + const filterSchedule = useCallback( + (newDate) => { + return mockData.filter( + (item) => + item.scheduleDate.getFullYear() === newDate.getFullYear() && + item.scheduleDate.getMonth() === newDate.getMonth() && + item.scheduleDate.getDate() === newDate.getDate() + ); + }, + [mockData] + ); + + const onChange = (newDate) => { + setDate(newDate); + const filteredSchedule = filterSchedule(newDate); + setSelectedSchedule(filteredSchedule); + }; + + useEffect(() => { + const filteredSchedule = filterSchedule(date); + setSelectedSchedule(filteredSchedule); + }, [date, filterSchedule]); + + const formatShortWeekday = (locale, date) => { + const weekdays = ['S', 'M', 'T', 'W', 'T', 'F', 'S']; + return weekdays[date.getDay()]; + }; + + const onClickDay = (value) => { + onChange(value); + }; + const toggleModal = () => { + setIsModalOpen((prev) => !prev); + console.log(isModalOpen); + }; + const closeModal = () => { + setIsModalOpen(false); + }; + return ( + + + date.getDate()} + navigationLabel={({ date, view }) => `${date.getMonth() + 1}월`} + formatShortWeekday={formatShortWeekday} + /> + + + {formattedDate} + {selectedSchedule.map((item, index) => ( + + ))} + + + 새로운 일정 추가하기 + + + + + ); +}; + +export default Schedule; diff --git a/src/pages/group/ScheduleAdd.jsx b/src/pages/group/ScheduleAdd.jsx new file mode 100644 index 0000000..f66c90f --- /dev/null +++ b/src/pages/group/ScheduleAdd.jsx @@ -0,0 +1,168 @@ +import styled from 'styled-components'; +import { ReactComponent as MemoIcon } from '../../assets/icons/group/memo.svg'; +import { ReactComponent as LocationIcon } from '../../assets/icons/group/location.svg'; +import { ReactComponent as LinkIcon } from '../../assets/icons/group/link.svg'; +import { ReactComponent as ClockIcon } from '../../assets/icons/group/clock.svg'; +import { ReactComponent as AlarmIcon } from '../../assets/icons/group/alarm.svg'; +import { + ToggleSwitch, + ToggleSlider, + CheckBox, +} from './group_components/ToggleButton'; +import { useState } from 'react'; +const BaseContainer = styled.div` + max-width: 649px; + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 100%; + height: 100vh; + z-index: 10001; + padding: 4px 20px; + border-radius: 16px 16px 0px 0px; + box-shadow: 0px -2px 87px 0px #475467; + box-sizing: border-box; + display: ${(props) => (props.isOpen ? 'block' : 'none')}; + + background-color: #ffffff; +`; +const ModalNavi = styled.div` + width: 100%; + height: 78px; + padding: 20px 0px 36px 0px; + border-radius: 8px 0px 0px 0px; + display: flex; + justify-content: space-between; +`; +const CloseButton = styled.button` + background: none; + border: none; + font-size: 20px; + cursor: pointer; + font-size: 20px; + font-weight: 600; + line-height: 22px; + color: #101828; +`; +const AddButton = styled.button` + color: #ff6330; + background: none; + border: none; + font-size: 20px; + cursor: pointer; + font-size: 20px; + font-weight: 600; + line-height: 22px; +`; + +const AddContainer = styled.div` + width: 100%; + display: flex; + flex-direction: column; + gap: 12px; +`; +const AddWrapper = styled.div` + display: flex; + justify-content: space-between; + align-items: center; + width: 100%; + height: 40px; + padding: 12px 0px; + + border: 1px solid #f9fafb; +`; +const AddInput = styled.input` + outline: none; + border: 0px; + // color: #98a2b3; + color: #101828; + font-size: 16px; + font-weight: 400; + line-height: 14px; + text-align: right; +`; +const AddTitle = styled.div` + display: flex; + align-items: center; + width: 100%; + height: 48px; + padding: 12px 6px; + gap: 8px; + border: 1px solid F9FAFB; +`; +const TiTlePoint = styled.div` + width: 12px; + height: 12px; + border-radius: 17px; + background: #ff6330; + margin-right: 8px; +`; + +const TiTleText = styled.input` + font-size: 24px; + font-weight: 600; + line-height: 22px; + letter-spacing: -0.03em; + color: #101828; + outline: none; + border: 0px; +`; +const ScheduleAdd = ({ isOpen, onClose }) => { + const [isActive, setIsActive] = useState(false); + const [input, setInput] = useState({ + title: '', + location: '', + startTime: '', + endTime: '', + checkedAlarm: false, + url: '', + memo: '', + }); + + return ( + + + 취소 + 추가 + + + + + + + + + + +

하루종일

+ + setIsActive(!isActive)} + /> + + + + + + + > + + + +

알람

+ + + + + + + + + + ); +}; + +export default ScheduleAdd; From bedf440cf3f71013b1adc3b42a5bc32b87c5e43d Mon Sep 17 00:00:00 2001 From: KimDoHyun Date: Sun, 28 Jul 2024 19:49:40 +0900 Subject: [PATCH 3/5] =?UTF-8?q?feat:Rank=ED=8E=98=EC=9D=B4=EC=A7=80=20?= =?UTF-8?q?=EB=A0=88=EC=9D=B4=EC=95=84=EC=9B=83=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/group/BasicInfo.jsx | 42 +++++++ src/pages/group/Rank.jsx | 118 ++++++++++++++++++ .../group/group_components/ClubSubInfo.jsx | 18 +++ 3 files changed, 178 insertions(+) create mode 100644 src/pages/group/BasicInfo.jsx create mode 100644 src/pages/group/Rank.jsx diff --git a/src/pages/group/BasicInfo.jsx b/src/pages/group/BasicInfo.jsx new file mode 100644 index 0000000..503216b --- /dev/null +++ b/src/pages/group/BasicInfo.jsx @@ -0,0 +1,42 @@ +import styled from 'styled-components'; +import ClubMainInfo from './group_components/ClubMainInfo'; +import ClubSubInfo from './group_components/ClubSubInfo'; +import { useState } from 'react'; +import Rank from './Rank'; + +const BaseContainer = styled.div` + width: 100%; + height: 100vh; + padding: 16px 20px; + display: flex; + flex-direction: column; + gap: 12px; + box-sizing: border-box; +`; + +const BasicInfo = () => { + const [isModalOpen, setIsModalOpen] = useState(false); + const toggleModal = () => { + setIsModalOpen((prev) => !prev); + console.log(isModalOpen); + }; + const closeModal = () => { + setIsModalOpen(false); + }; + return ( + + + + + + ); +}; + +export default BasicInfo; diff --git a/src/pages/group/Rank.jsx b/src/pages/group/Rank.jsx new file mode 100644 index 0000000..2930e15 --- /dev/null +++ b/src/pages/group/Rank.jsx @@ -0,0 +1,118 @@ +import { useState } from 'react'; +import styled from 'styled-components'; +import RankItem from './group_components/RankItem'; + +const BaseContainer = styled.div` + max-width: 649px; + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 100%; + height: 100vh; + z-index: 10001; + padding: 4px 20px; + border-radius: 16px 16px 0px 0px; + box-shadow: 0px -2px 87px 0px #475467; + box-sizing: border-box; + display: ${(props) => (props.isOpen ? 'block' : 'none')}; + background: linear-gradient(270deg, #1e58ec 0%, #525e9d 100%); +`; +const TopBar = styled.div` + width: 100%; + height: 64px; /* Hug (64px) px를 64px로 변경 */ + padding: 0px 20px; + font-family: Pretendard; + font-size: 20px; + font-weight: 600; + line-height: 22px; + color: #ffffff; + display: flex; + align-items: center; + position: relative; +`; + +const BackButton = styled.button` + background: none; + border: none; + font-size: 20px; + cursor: pointer; + font-weight: 600; + line-height: 22px; + color: #ffffff; + font-size: 24px; + position: absolute; + left: 20px; +`; + +const TopText = styled.div` + margin: 0 auto; + font-size: 20px; + font-weight: 600; + line-height: 22px; + text-align: center; +`; + +const ListContainer = styled.div` + width: 100%; + height: Hug (502.9px) px; + padding: 16px 0px; + border-radius: 16px 16px 0px 0px; + background-color: #ffffff; +`; +const mockData = [ + { + rank: 1, + isUp: true, + upDown: 2, + name: '중앙가르드', + score: 238, + }, + { + rank: 2, + isUp: false, + upDown: 1, + name: '중앙가르드', + score: 238, + }, + { + rank: 3, + isUp: false, + upDown: 2, + name: '중앙가르드', + score: 238, + }, + { + rank: 4, + isUp: true, + upDown: 1, + name: '중앙가르드', + score: 238, + }, + { + rank: 5, + isUp: false, + upDown: 1, + name: '중앙가르드', + score: 238, + }, +]; +const Rank = ({ isOpen, onClose }) => { + return ( +
+ + + < + 티어 + + + {mockData.map((item) => ( + + ))} + + +
+ ); +}; + +export default Rank; diff --git a/src/pages/group/group_components/ClubSubInfo.jsx b/src/pages/group/group_components/ClubSubInfo.jsx index 3b10d14..20cbcea 100644 --- a/src/pages/group/group_components/ClubSubInfo.jsx +++ b/src/pages/group/group_components/ClubSubInfo.jsx @@ -66,3 +66,21 @@ const TextBIg = styled.div` letter-spacing: -0.011em; color: #ffffff; `; +const ClubSubInfo = () => { + return ( + + + + + 티어 정보 + 실버 + 138팀 중 7위 + 다음 레벨까지 남은 순위 : 3위 + + + {' '} + + ); +}; + +export default ClubSubInfo; From 81adcf861b2eb639b6c4d4a8479515042575cf94 Mon Sep 17 00:00:00 2001 From: KimDoHyun Date: Sat, 3 Aug 2024 21:13:33 +0900 Subject: [PATCH 4/5] =?UTF-8?q?fix:=20=EC=8A=A4=ED=81=AC=EB=A1=A4=20?= =?UTF-8?q?=EB=B2=84=EA=B7=B8=20=EC=88=98=EC=A0=95=20=EB=B0=8F=20Rank?= =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/group/BasicInfo.jsx | 42 -------- src/pages/group/Rank.jsx | 118 ---------------------- src/pages/group/Schedule.jsx | 139 -------------------------- src/pages/group/ScheduleAdd.jsx | 168 -------------------------------- 4 files changed, 467 deletions(-) delete mode 100644 src/pages/group/BasicInfo.jsx delete mode 100644 src/pages/group/Rank.jsx delete mode 100644 src/pages/group/Schedule.jsx delete mode 100644 src/pages/group/ScheduleAdd.jsx diff --git a/src/pages/group/BasicInfo.jsx b/src/pages/group/BasicInfo.jsx deleted file mode 100644 index 503216b..0000000 --- a/src/pages/group/BasicInfo.jsx +++ /dev/null @@ -1,42 +0,0 @@ -import styled from 'styled-components'; -import ClubMainInfo from './group_components/ClubMainInfo'; -import ClubSubInfo from './group_components/ClubSubInfo'; -import { useState } from 'react'; -import Rank from './Rank'; - -const BaseContainer = styled.div` - width: 100%; - height: 100vh; - padding: 16px 20px; - display: flex; - flex-direction: column; - gap: 12px; - box-sizing: border-box; -`; - -const BasicInfo = () => { - const [isModalOpen, setIsModalOpen] = useState(false); - const toggleModal = () => { - setIsModalOpen((prev) => !prev); - console.log(isModalOpen); - }; - const closeModal = () => { - setIsModalOpen(false); - }; - return ( - - - - - - ); -}; - -export default BasicInfo; diff --git a/src/pages/group/Rank.jsx b/src/pages/group/Rank.jsx deleted file mode 100644 index 2930e15..0000000 --- a/src/pages/group/Rank.jsx +++ /dev/null @@ -1,118 +0,0 @@ -import { useState } from 'react'; -import styled from 'styled-components'; -import RankItem from './group_components/RankItem'; - -const BaseContainer = styled.div` - max-width: 649px; - position: fixed; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - width: 100%; - height: 100vh; - z-index: 10001; - padding: 4px 20px; - border-radius: 16px 16px 0px 0px; - box-shadow: 0px -2px 87px 0px #475467; - box-sizing: border-box; - display: ${(props) => (props.isOpen ? 'block' : 'none')}; - background: linear-gradient(270deg, #1e58ec 0%, #525e9d 100%); -`; -const TopBar = styled.div` - width: 100%; - height: 64px; /* Hug (64px) px를 64px로 변경 */ - padding: 0px 20px; - font-family: Pretendard; - font-size: 20px; - font-weight: 600; - line-height: 22px; - color: #ffffff; - display: flex; - align-items: center; - position: relative; -`; - -const BackButton = styled.button` - background: none; - border: none; - font-size: 20px; - cursor: pointer; - font-weight: 600; - line-height: 22px; - color: #ffffff; - font-size: 24px; - position: absolute; - left: 20px; -`; - -const TopText = styled.div` - margin: 0 auto; - font-size: 20px; - font-weight: 600; - line-height: 22px; - text-align: center; -`; - -const ListContainer = styled.div` - width: 100%; - height: Hug (502.9px) px; - padding: 16px 0px; - border-radius: 16px 16px 0px 0px; - background-color: #ffffff; -`; -const mockData = [ - { - rank: 1, - isUp: true, - upDown: 2, - name: '중앙가르드', - score: 238, - }, - { - rank: 2, - isUp: false, - upDown: 1, - name: '중앙가르드', - score: 238, - }, - { - rank: 3, - isUp: false, - upDown: 2, - name: '중앙가르드', - score: 238, - }, - { - rank: 4, - isUp: true, - upDown: 1, - name: '중앙가르드', - score: 238, - }, - { - rank: 5, - isUp: false, - upDown: 1, - name: '중앙가르드', - score: 238, - }, -]; -const Rank = ({ isOpen, onClose }) => { - return ( -
- - - < - 티어 - - - {mockData.map((item) => ( - - ))} - - -
- ); -}; - -export default Rank; diff --git a/src/pages/group/Schedule.jsx b/src/pages/group/Schedule.jsx deleted file mode 100644 index 083a02b..0000000 --- a/src/pages/group/Schedule.jsx +++ /dev/null @@ -1,139 +0,0 @@ -import styled from 'styled-components'; -import { CalenderContainer, GroupCalendar } from './group_components/Calendar'; -import { useState, useEffect, useCallback, useMemo } from 'react'; -import ScheduleItem, { - AddSchedule, - PlusIcon, -} from './group_components/ScheduleItem'; -import ScheduleAdd from './ScheduleAdd'; - -const BaseContainer = styled.div` - width: 100%; - height: 100vh; - padding: 16px 20px; - display: flex; - flex-direction: column; - gap: 12px; - box-sizing: border-box; -`; - -const ScheduleList = styled.div` - width: 100%; - padding: 24px 16px; - display: flex; - flex-direction: column; - gap: 12px; - border-radius: 26px 26px 0px 0px; - box-shadow: 0px -2px 12px 0px #555ba021; - box-sizing: border-box; -`; - -const ScheduleTitle = styled.div` - font-size: 20px; - font-weight: 600; - line-height: 22px; - color: #344054; -`; - -const Schedule = () => { - const [date, setDate] = useState(new Date()); - const [selectedSchedule, setSelectedSchedule] = useState([]); - - const [isModalOpen, setIsModalOpen] = useState(false); - - const formattedDate = `${date.getFullYear()}년 ${ - date.getMonth() + 1 - }월 ${date.getDate()}일`; - - const mockData = useMemo( - () => [ - { - scheduleDate: new Date(2024, 6, 25), - startTime: '17:00', - endTime: '19:00', - eventName: '정기 훈련', - location: '홍익대학교 체육관', - }, - { - scheduleDate: new Date(2024, 6, 25), - startTime: '19:00', - endTime: '21:00', - eventName: '정기 매치', - location: '홍익대학교 체육관', - }, - ], - [] - ); - - const filterSchedule = useCallback( - (newDate) => { - return mockData.filter( - (item) => - item.scheduleDate.getFullYear() === newDate.getFullYear() && - item.scheduleDate.getMonth() === newDate.getMonth() && - item.scheduleDate.getDate() === newDate.getDate() - ); - }, - [mockData] - ); - - const onChange = (newDate) => { - setDate(newDate); - const filteredSchedule = filterSchedule(newDate); - setSelectedSchedule(filteredSchedule); - }; - - useEffect(() => { - const filteredSchedule = filterSchedule(date); - setSelectedSchedule(filteredSchedule); - }, [date, filterSchedule]); - - const formatShortWeekday = (locale, date) => { - const weekdays = ['S', 'M', 'T', 'W', 'T', 'F', 'S']; - return weekdays[date.getDay()]; - }; - - const onClickDay = (value) => { - onChange(value); - }; - const toggleModal = () => { - setIsModalOpen((prev) => !prev); - console.log(isModalOpen); - }; - const closeModal = () => { - setIsModalOpen(false); - }; - return ( - - - date.getDate()} - navigationLabel={({ date, view }) => `${date.getMonth() + 1}월`} - formatShortWeekday={formatShortWeekday} - /> - - - {formattedDate} - {selectedSchedule.map((item, index) => ( - - ))} - - + 새로운 일정 추가하기 - - - - - ); -}; - -export default Schedule; diff --git a/src/pages/group/ScheduleAdd.jsx b/src/pages/group/ScheduleAdd.jsx deleted file mode 100644 index f66c90f..0000000 --- a/src/pages/group/ScheduleAdd.jsx +++ /dev/null @@ -1,168 +0,0 @@ -import styled from 'styled-components'; -import { ReactComponent as MemoIcon } from '../../assets/icons/group/memo.svg'; -import { ReactComponent as LocationIcon } from '../../assets/icons/group/location.svg'; -import { ReactComponent as LinkIcon } from '../../assets/icons/group/link.svg'; -import { ReactComponent as ClockIcon } from '../../assets/icons/group/clock.svg'; -import { ReactComponent as AlarmIcon } from '../../assets/icons/group/alarm.svg'; -import { - ToggleSwitch, - ToggleSlider, - CheckBox, -} from './group_components/ToggleButton'; -import { useState } from 'react'; -const BaseContainer = styled.div` - max-width: 649px; - position: fixed; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - width: 100%; - height: 100vh; - z-index: 10001; - padding: 4px 20px; - border-radius: 16px 16px 0px 0px; - box-shadow: 0px -2px 87px 0px #475467; - box-sizing: border-box; - display: ${(props) => (props.isOpen ? 'block' : 'none')}; - - background-color: #ffffff; -`; -const ModalNavi = styled.div` - width: 100%; - height: 78px; - padding: 20px 0px 36px 0px; - border-radius: 8px 0px 0px 0px; - display: flex; - justify-content: space-between; -`; -const CloseButton = styled.button` - background: none; - border: none; - font-size: 20px; - cursor: pointer; - font-size: 20px; - font-weight: 600; - line-height: 22px; - color: #101828; -`; -const AddButton = styled.button` - color: #ff6330; - background: none; - border: none; - font-size: 20px; - cursor: pointer; - font-size: 20px; - font-weight: 600; - line-height: 22px; -`; - -const AddContainer = styled.div` - width: 100%; - display: flex; - flex-direction: column; - gap: 12px; -`; -const AddWrapper = styled.div` - display: flex; - justify-content: space-between; - align-items: center; - width: 100%; - height: 40px; - padding: 12px 0px; - - border: 1px solid #f9fafb; -`; -const AddInput = styled.input` - outline: none; - border: 0px; - // color: #98a2b3; - color: #101828; - font-size: 16px; - font-weight: 400; - line-height: 14px; - text-align: right; -`; -const AddTitle = styled.div` - display: flex; - align-items: center; - width: 100%; - height: 48px; - padding: 12px 6px; - gap: 8px; - border: 1px solid F9FAFB; -`; -const TiTlePoint = styled.div` - width: 12px; - height: 12px; - border-radius: 17px; - background: #ff6330; - margin-right: 8px; -`; - -const TiTleText = styled.input` - font-size: 24px; - font-weight: 600; - line-height: 22px; - letter-spacing: -0.03em; - color: #101828; - outline: none; - border: 0px; -`; -const ScheduleAdd = ({ isOpen, onClose }) => { - const [isActive, setIsActive] = useState(false); - const [input, setInput] = useState({ - title: '', - location: '', - startTime: '', - endTime: '', - checkedAlarm: false, - url: '', - memo: '', - }); - - return ( - - - 취소 - 추가 - - - - - - - - - - -

하루종일

- - setIsActive(!isActive)} - /> - - - - - - - > - - - -

알람

- - - - - - - - - - ); -}; - -export default ScheduleAdd; From cd5767e0a39dd189842bf5a01bd74bad84e76b3e Mon Sep 17 00:00:00 2001 From: KimDoHyun Date: Sun, 4 Aug 2024 00:12:55 +0900 Subject: [PATCH 5/5] merge --- src/pages/group/basicinfo/Rank.jsx | 2 +- .../basicInfo_components/RankItem.jsx | 3 +- .../basicInfo_components/RankTab.jsx | 1 + .../group/group_components/ClubSubInfo.jsx | 18 --- src/pages/group/schedule/Schedule.jsx | 1 - src/pages/group/schedule/ScheduleAdd.jsx | 104 +++++++++--------- src/styles/global-style.js | 5 - 7 files changed, 58 insertions(+), 76 deletions(-) diff --git a/src/pages/group/basicinfo/Rank.jsx b/src/pages/group/basicinfo/Rank.jsx index 9961210..1aa982e 100644 --- a/src/pages/group/basicinfo/Rank.jsx +++ b/src/pages/group/basicinfo/Rank.jsx @@ -35,6 +35,7 @@ const Header = styled.div` `; const BackButton = styled.button` + position: absolute; background: none; border: none; font-size: 20px; @@ -43,7 +44,6 @@ const BackButton = styled.button` line-height: 22px; color: #ffffff; font-size: 24px; - position: absolute; left: 20px; `; diff --git a/src/pages/group/basicinfo/basicInfo_components/RankItem.jsx b/src/pages/group/basicinfo/basicInfo_components/RankItem.jsx index 4ace37c..ab3af72 100644 --- a/src/pages/group/basicinfo/basicInfo_components/RankItem.jsx +++ b/src/pages/group/basicinfo/basicInfo_components/RankItem.jsx @@ -6,7 +6,8 @@ const Container = styled.div` padding: 16px 20px; display: flex; gap: 10px; - background-color: ${({ rank }) => (rank % 2 === 0 ? '#F2F4F7' : '#ffffff')}; + background-color: ${(props) => + props.rank % 2 === 0 ? '#F2F4F7' : '#ffffff'}; box-sizing: border-box; `; diff --git a/src/pages/group/basicinfo/basicInfo_components/RankTab.jsx b/src/pages/group/basicinfo/basicInfo_components/RankTab.jsx index 95a07ec..52802be 100644 --- a/src/pages/group/basicinfo/basicInfo_components/RankTab.jsx +++ b/src/pages/group/basicinfo/basicInfo_components/RankTab.jsx @@ -7,6 +7,7 @@ const Container = styled.div` width: 100%; height: 45px; padding: 12px 20px; + box-sizing: border-box; `; const TabItem = styled.div` diff --git a/src/pages/group/group_components/ClubSubInfo.jsx b/src/pages/group/group_components/ClubSubInfo.jsx index 20cbcea..3b10d14 100644 --- a/src/pages/group/group_components/ClubSubInfo.jsx +++ b/src/pages/group/group_components/ClubSubInfo.jsx @@ -66,21 +66,3 @@ const TextBIg = styled.div` letter-spacing: -0.011em; color: #ffffff; `; -const ClubSubInfo = () => { - return ( - - - - - 티어 정보 - 실버 - 138팀 중 7위 - 다음 레벨까지 남은 순위 : 3위 - - - {' '} - - ); -}; - -export default ClubSubInfo; diff --git a/src/pages/group/schedule/Schedule.jsx b/src/pages/group/schedule/Schedule.jsx index 0c2822d..fa02d6a 100644 --- a/src/pages/group/schedule/Schedule.jsx +++ b/src/pages/group/schedule/Schedule.jsx @@ -130,7 +130,6 @@ const Schedule = () => { }; const toggleModal = () => { setIsModalOpen((prev) => !prev); - console.log(isModalOpen); }; const closeModal = () => { setIsModalOpen(false); diff --git a/src/pages/group/schedule/ScheduleAdd.jsx b/src/pages/group/schedule/ScheduleAdd.jsx index 2cdd322..213709a 100644 --- a/src/pages/group/schedule/ScheduleAdd.jsx +++ b/src/pages/group/schedule/ScheduleAdd.jsx @@ -12,55 +12,6 @@ import { } from './schedule_components/ToggleButton'; import { useState } from 'react'; -const ScheduleAdd = ({ isOpen, onClose }) => { - const [isActive, setIsActive] = useState(false); - - return ( - - - 취소 - 추가 - - - - - - - - - - -

하루종일

- - setIsActive(!isActive)} - /> - - - - - - - > - - - -

알람

- - - - - - - - - - ); -}; - -export default ScheduleAdd; const BaseContainer = styled.div` max-width: 649px; position: fixed; @@ -74,7 +25,6 @@ const BaseContainer = styled.div` border-radius: 16px 16px 0px 0px; box-shadow: 0px -2px 87px 0px #475467; box-sizing: border-box; - display: ${(props) => (props.isOpen ? 'block' : 'none')}; background-color: #ffffff; `; @@ -159,3 +109,57 @@ const TiTleText = styled.input` outline: none; border: 0px; `; + +const ScheduleAdd = ({ isOpen, onClose }) => { + const [isAllday, setIsAllday] = useState(false); + + return ( + <> + {isOpen && ( + + + 취소 + 추가 + + + + + + + + + + +

하루종일

+ + setIsAllday(!isAllday)} + /> + + + + + + + > + + + +

알람

+ + + + + + + + + + )} + + ); +}; + +export default ScheduleAdd; diff --git a/src/styles/global-style.js b/src/styles/global-style.js index 65a1f42..0a31840 100644 --- a/src/styles/global-style.js +++ b/src/styles/global-style.js @@ -28,12 +28,7 @@ a { text-decoration: none; color: inherit; } - *{ box-sizing:border-box; } -.hidden-day { - visibility: hidden; -} - `;