From 6a66b80f3a7b13aa607676198c85ffe9904ab1e9 Mon Sep 17 00:00:00 2001 From: d0dam Date: Wed, 14 Jun 2023 17:36:32 +0900 Subject: [PATCH 01/28] =?UTF-8?q?refactor:=20assets=20=ED=8F=B4=EB=8D=94?= =?UTF-8?q?=EC=9D=98=20js=20=ED=8C=8C=EC=9D=BC=20ts=20=ED=8C=8C=EC=9D=BC?= =?UTF-8?q?=EB=A1=9C=20=EB=A7=88=EC=9D=B4=EA=B7=B8=EB=A0=88=EC=9D=B4?= =?UTF-8?q?=EC=85=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit #1344 Co-authored-by: 이도현 --- frontend/src/assets/lotties/index.js | 3 --- frontend/src/assets/lotties/index.ts | 1 + 2 files changed, 1 insertion(+), 3 deletions(-) delete mode 100644 frontend/src/assets/lotties/index.js create mode 100644 frontend/src/assets/lotties/index.ts diff --git a/frontend/src/assets/lotties/index.js b/frontend/src/assets/lotties/index.js deleted file mode 100644 index 74f51274d..000000000 --- a/frontend/src/assets/lotties/index.js +++ /dev/null @@ -1,3 +0,0 @@ -import NotFoundAnimation from './not-found.json'; - -export { NotFoundAnimation }; diff --git a/frontend/src/assets/lotties/index.ts b/frontend/src/assets/lotties/index.ts new file mode 100644 index 000000000..14ff2c46b --- /dev/null +++ b/frontend/src/assets/lotties/index.ts @@ -0,0 +1 @@ +export { default as NotFoundAnimation } from './not-found.json'; From ac19b6f2174130ca8173298192a635aa10713adf Mon Sep 17 00:00:00 2001 From: d0dam Date: Wed, 14 Jun 2023 17:37:34 +0900 Subject: [PATCH 02/28] =?UTF-8?q?refactor:=20=20@shared=20=ED=8F=B4?= =?UTF-8?q?=EB=8D=94=EC=9D=98=20js=20=ED=8C=8C=EC=9D=BC=20ts=20=ED=8C=8C?= =?UTF-8?q?=EC=9D=BC=EB=A1=9C=20=EB=A7=88=EC=9D=B4=EA=B7=B8=EB=A0=88?= =?UTF-8?q?=EC=9D=B4=EC=85=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit #1344 Co-authored-by: 이도현 --- .../components/@shared/Icons/{CancelIcon.js => CancelIcon.tsx} | 2 -- .../@shared/SnackBar/{SnackBar.styles.js => SnackBar.styles.ts} | 0 .../components/@shared/SnackBar/{SnackBar.js => SnackBar.tsx} | 0 3 files changed, 2 deletions(-) rename frontend/src/components/@shared/Icons/{CancelIcon.js => CancelIcon.tsx} (91%) rename frontend/src/components/@shared/SnackBar/{SnackBar.styles.js => SnackBar.styles.ts} (100%) rename frontend/src/components/@shared/SnackBar/{SnackBar.js => SnackBar.tsx} (100%) diff --git a/frontend/src/components/@shared/Icons/CancelIcon.js b/frontend/src/components/@shared/Icons/CancelIcon.tsx similarity index 91% rename from frontend/src/components/@shared/Icons/CancelIcon.js rename to frontend/src/components/@shared/Icons/CancelIcon.tsx index 0083ba8ab..7ef11ce99 100644 --- a/frontend/src/components/@shared/Icons/CancelIcon.js +++ b/frontend/src/components/@shared/Icons/CancelIcon.tsx @@ -1,5 +1,3 @@ -import React from 'react'; - const CancelIcon = ({ width, height, stroke, strokeWidth }) => { return ( Date: Wed, 14 Jun 2023 17:38:07 +0900 Subject: [PATCH 03/28] =?UTF-8?q?refactor:=20=20Button=20=ED=8F=B4?= =?UTF-8?q?=EB=8D=94=EC=9D=98=20js=20=ED=8C=8C=EC=9D=BC=20ts=20=ED=8C=8C?= =?UTF-8?q?=EC=9D=BC=EB=A1=9C=20=EB=A7=88=EC=9D=B4=EA=B7=B8=EB=A0=88?= =?UTF-8?q?=EC=9D=B4=EC=85=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit #1344 Co-authored-by: 이도현 --- frontend/src/components/Button/Button.js | 49 ------------------- .../{Button.styles.js => Button.styles.ts} | 6 +-- frontend/src/components/Button/Button.tsx | 38 ++++++++++++++ .../Button/{PageButton.js => PageButton.tsx} | 1 - 4 files changed, 41 insertions(+), 53 deletions(-) delete mode 100644 frontend/src/components/Button/Button.js rename frontend/src/components/Button/{Button.styles.js => Button.styles.ts} (90%) create mode 100644 frontend/src/components/Button/Button.tsx rename frontend/src/components/Button/{PageButton.js => PageButton.tsx} (95%) diff --git a/frontend/src/components/Button/Button.js b/frontend/src/components/Button/Button.js deleted file mode 100644 index 18674d9a3..000000000 --- a/frontend/src/components/Button/Button.js +++ /dev/null @@ -1,49 +0,0 @@ -import PropTypes from 'prop-types'; -import { BUTTON_SIZE, Container, Icon, Image } from './Button.styles'; - -const Button = ({ - children, - size, - alt, - icon, - css, - cssProps, - backgroundImageUrl, - onClick, - type, - disabled, -}) => { - return ( - - {icon && } - {backgroundImageUrl && } - {children && {children}} - - ); -}; - -Button.propTypes = { - children: PropTypes.node, - size: PropTypes.string, - alt: PropTypes.string, - icon: PropTypes.string, - css: PropTypes.object, - cssProps: PropTypes.object, - backgroundImageUrl: PropTypes.string, - onClick: PropTypes.func, - type: PropTypes.string, - disabled: PropTypes.bool, -}; - -Button.defaultProps = { - size: BUTTON_SIZE.MEDIUM, -}; - -export default Button; diff --git a/frontend/src/components/Button/Button.styles.js b/frontend/src/components/Button/Button.styles.ts similarity index 90% rename from frontend/src/components/Button/Button.styles.js rename to frontend/src/components/Button/Button.styles.ts index 9609d04d0..d90cf37ab 100644 --- a/frontend/src/components/Button/Button.styles.js +++ b/frontend/src/components/Button/Button.styles.ts @@ -65,7 +65,7 @@ const imageSizeStyle = { }, }; -const Container = styled.button` +const Container = styled.button<{ size: string; css: {} }>` display: flex; justify-content: center; align-items: center; @@ -78,13 +78,13 @@ const Container = styled.button` ${({ css }) => css}; `; -const Icon = styled.img` +const Icon = styled.img<{ hasText: boolean; size: string }>` margin-right: ${({ hasText }) => (hasText ? '0.5em' : '0')}; ${({ size }) => imageSizeStyle[size] || imageSizeStyle.MEDIUM}; `; -const Image = styled.div` +const Image = styled.div<{ backgroundImage: string }>` background-image: url(${({ backgroundImage }) => backgroundImage}); background-size: contain; width: inherit; diff --git a/frontend/src/components/Button/Button.tsx b/frontend/src/components/Button/Button.tsx new file mode 100644 index 000000000..9ca9cf53b --- /dev/null +++ b/frontend/src/components/Button/Button.tsx @@ -0,0 +1,38 @@ +import { SerializedStyles } from '@emotion/react'; +import { BUTTON_SIZE, Container, Icon, Image } from './Button.styles'; + +interface ButtonProps { + children?: React.ReactNode; + size?: string; + alt?: string; + icon?: string; + css?: SerializedStyles; + cssProps?: SerializedStyles; + backgroundImageUrl?: string; + type?: 'button' | 'submit' | 'reset'; + disabled?: boolean; + onClick?: React.MouseEventHandler; +} + +const Button = ({ + children, + size = BUTTON_SIZE.MEDIUM, + alt = '', + icon, + css = { name: '', styles: '' }, + cssProps, + backgroundImageUrl, + type, + disabled, + onClick, +}: ButtonProps) => { + return ( + + {icon && } + {backgroundImageUrl && } + {children && {children}} + + ); +}; + +export default Button; diff --git a/frontend/src/components/Button/PageButton.js b/frontend/src/components/Button/PageButton.tsx similarity index 95% rename from frontend/src/components/Button/PageButton.js rename to frontend/src/components/Button/PageButton.tsx index f70fbfdec..a2f371c07 100644 --- a/frontend/src/components/Button/PageButton.js +++ b/frontend/src/components/Button/PageButton.tsx @@ -1,4 +1,3 @@ -import React from 'react'; import Button from './Button'; import { css } from '@emotion/react'; import COLOR from '../../constants/color'; From 6f4bf4da60ef9efe3d9e2dde6c372267950caf90 Mon Sep 17 00:00:00 2001 From: d0dam Date: Fri, 16 Jun 2023 16:54:37 +0900 Subject: [PATCH 04/28] =?UTF-8?q?refactor:=20=20CancelIcon=20props=20inter?= =?UTF-8?q?face=20=ED=83=80=EC=9E=85=20=EC=A0=95=EC=9D=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit #1344 Co-authored-by: 이도현 --- frontend/src/components/@shared/Icons/CancelIcon.tsx | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/frontend/src/components/@shared/Icons/CancelIcon.tsx b/frontend/src/components/@shared/Icons/CancelIcon.tsx index 7ef11ce99..1c7f6cfff 100644 --- a/frontend/src/components/@shared/Icons/CancelIcon.tsx +++ b/frontend/src/components/@shared/Icons/CancelIcon.tsx @@ -1,4 +1,11 @@ -const CancelIcon = ({ width, height, stroke, strokeWidth }) => { +interface CancelIconProps { + width: string; + height: string; + stroke: string; + strokeWidth?: string; +} + +const CancelIcon = ({ width, height, stroke, strokeWidth }: CancelIconProps) => { return ( Date: Fri, 16 Jun 2023 16:56:25 +0900 Subject: [PATCH 05/28] =?UTF-8?q?refactor:=20=20SnackBar=20props=20?= =?UTF-8?q?=ED=83=80=EC=9E=85=20=EC=A0=95=EC=9D=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit #1344 Co-authored-by: 이도현 --- frontend/src/components/@shared/SnackBar/SnackBar.tsx | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/frontend/src/components/@shared/SnackBar/SnackBar.tsx b/frontend/src/components/@shared/SnackBar/SnackBar.tsx index b797f5aeb..c18be6337 100644 --- a/frontend/src/components/@shared/SnackBar/SnackBar.tsx +++ b/frontend/src/components/@shared/SnackBar/SnackBar.tsx @@ -1,10 +1,5 @@ -import PropTypes from 'prop-types'; import { Container } from './SnackBar.styles'; -const SnackBar = ({ children }) => {children}; - -SnackBar.propTypes = { - children: PropTypes.string.isRequired, -}; +const SnackBar = ({ children }: { children: string }) => {children}; export default SnackBar; From 0895e412d43c6ca18d5909551d3bbe0fe6e5cb9f Mon Sep 17 00:00:00 2001 From: d0dam Date: Fri, 16 Jun 2023 17:18:12 +0900 Subject: [PATCH 06/28] =?UTF-8?q?refactor:=20=20PageButton=20props=20?= =?UTF-8?q?=ED=83=80=EC=9E=85=20=EC=A0=95=EC=9D=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit #1344 Co-authored-by: 이도현 --- frontend/src/components/Button/PageButton.tsx | 21 ++++++++++++------- 1 file changed, 13 insertions(+), 8 deletions(-) diff --git a/frontend/src/components/Button/PageButton.tsx b/frontend/src/components/Button/PageButton.tsx index a2f371c07..024b62550 100644 --- a/frontend/src/components/Button/PageButton.tsx +++ b/frontend/src/components/Button/PageButton.tsx @@ -2,6 +2,19 @@ import Button from './Button'; import { css } from '@emotion/react'; import COLOR from '../../constants/color'; +interface PageButtonProps extends React.HTMLAttributes { + children: number; + selected?: boolean; +} + +const PageButton = ({ children, ...props }: PageButtonProps) => { + return ( + + ); +}; + const selectedStyle = css` background-color: ${COLOR.DARK_BLUE_800}; color: ${COLOR.WHITE}; @@ -12,12 +25,4 @@ const unselectedStyle = css` color: ${COLOR.BLACK_800}; `; -const PageButton = ({ children, ...props }) => { - return ( - - ); -}; - export default PageButton; From 0e3a2a76540aa54deb5829c07a18d0f290ddaf69 Mon Sep 17 00:00:00 2001 From: d0dam Date: Fri, 16 Jun 2023 18:07:39 +0900 Subject: [PATCH 07/28] =?UTF-8?q?refactor:=20=20Calendar=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20ts=20=ED=8C=8C=EC=9D=BC=EB=A1=9C?= =?UTF-8?q?=20=EB=A7=88=EC=9D=B4=EA=B7=B8=EB=A0=88=EC=9D=B4=EC=85=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit #1344 Co-authored-by: 이도현 --- ...{Calendar.styles.js => Calendar.styles.ts} | 23 ++++++++-- .../Calendar/{Calendar.js => Calendar.tsx} | 44 ++++++++++++------- 2 files changed, 49 insertions(+), 18 deletions(-) rename frontend/src/components/Calendar/{Calendar.styles.js => Calendar.styles.ts} (90%) rename frontend/src/components/Calendar/{Calendar.js => Calendar.tsx} (82%) diff --git a/frontend/src/components/Calendar/Calendar.styles.js b/frontend/src/components/Calendar/Calendar.styles.ts similarity index 90% rename from frontend/src/components/Calendar/Calendar.styles.js rename to frontend/src/components/Calendar/Calendar.styles.ts index 31caf36e9..d7ad4191d 100644 --- a/frontend/src/components/Calendar/Calendar.styles.js +++ b/frontend/src/components/Calendar/Calendar.styles.ts @@ -55,7 +55,12 @@ const WeekWrapper = styled.ul` height: 5rem; `; -const Week = styled.strong` +interface WeekProps { + isSunday: boolean; + isSaturday: boolean; +} + +const Week = styled.strong` font-size: 1.4rem; ${({ isSunday, isSaturday }) => css` @@ -85,7 +90,15 @@ const ListItem = styled.li` text-align: center; `; -const Day = styled.button` +interface DayProps { + isSunday: boolean; + isSaturday: boolean; + isHover: boolean; + isSelected: boolean; + count: number; +} + +const Day = styled.button` position: relative; user-select: none; cursor: pointer; @@ -145,7 +158,11 @@ const Day = styled.button` `} `; -const TitleList = styled.div` +interface TitleListProp { + isRight: boolean; +} + +const TitleList = styled.div` position: absolute; top: -0.5rem; border: 1px solid #ccc; diff --git a/frontend/src/components/Calendar/Calendar.js b/frontend/src/components/Calendar/Calendar.tsx similarity index 82% rename from frontend/src/components/Calendar/Calendar.js rename to frontend/src/components/Calendar/Calendar.tsx index 531819692..c0db99a5a 100644 --- a/frontend/src/components/Calendar/Calendar.js +++ b/frontend/src/components/Calendar/Calendar.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useState } from 'react'; +import { useEffect, useState } from 'react'; import { CalendarWrapper, Year, @@ -17,11 +17,11 @@ import { ReactComponent as ArrowIcon } from '../../assets/images/right-arrow-ang import { requestGetCalendar } from '../../service/requests'; import { useParams } from 'react-router'; -const getStartDayOfMonth = (year, month) => { +const getStartDayOfMonth = (year: number, month: number) => { return new Date(year, month, 1).getDay(); }; -const isLeapYear = (year) => { +const isLeapYear = (year: number) => { return (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0; }; @@ -30,17 +30,29 @@ const DAYS_LEAP = [31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]; const WEEK = ['일', '월', '화', '수', '목', '금', '토']; const MONTHS = ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12']; -const Calendar = ({ newDate, onClick = () => {}, selectedDay = -1, setSelectedDay = () => {} }) => { +interface CalenderProps { + newDate: { + year: number; + month: number; + day: number; + }; + onClick: (year: number, month: number, day: number) => void; + selectedDay: number; + setSelectedDay: React.Dispatch>; +} + +const Calendar = ({ newDate, onClick, selectedDay = -1, setSelectedDay }: CalenderProps) => { const today = newDate ? new Date(newDate.year, newDate.month - 1, newDate.day) : new Date(); - const [date, setDate] = useState(today); + const [date, setDate] = useState(today); const [currentMonth, setCurrentMonth] = useState(date.getMonth()); const [currentYear, setCurrentYear] = useState(date.getFullYear()); const [startDay, setStartDay] = useState(getStartDayOfMonth(currentYear, currentMonth)); - const [titleList, setTitleList] = useState([]); - const [titleListIndex, setTitleListIndex] = useState(null); + // any type 수정 필요 + const [titleList, setTitleList] = useState([]); + const [titleListIndex, setTitleListIndex] = useState(null); - const { username } = useParams(); + const { username } = useParams<{ username: string }>(); const days = isLeapYear(currentYear) ? DAYS_LEAP : DAYS; @@ -53,26 +65,28 @@ const Calendar = ({ newDate, onClick = () => {}, selectedDay = -1, setSelectedDa throw new Error(await response.text()); } + // 이 data 형식 알 필요 있음 const { data: titleData } = await response.json(); - const data = []; + const data: number[] = []; [...Array(days[currentMonth])].forEach((_, index) => { const day = index + 1; - const firstIndex = titleData.findIndex( + const firstIndex: number = titleData.findIndex( ({ createdAt }) => day === Number(createdAt.slice(8, 10)) ); - const lastIndex = titleData.findIndex( + const lastIndex: number = titleData.findIndex( ({ createdAt }) => day < Number(createdAt.slice(8, 10)) ); - data.push( + const filteredData = firstIndex !== -1 ? titleData.slice(firstIndex, lastIndex === -1 ? titleData.length : lastIndex) - : [] - ); + : []; + + data.push(filteredData); }); setTitleList(data); @@ -130,7 +144,7 @@ const Calendar = ({ newDate, onClick = () => {}, selectedDay = -1, setSelectedDa ))} - {[...Array(days[currentMonth] + startDay)].map((_, index) => { + {[...Array(days[currentMonth] + startDay)].map((_, index: number) => { const day = index - (startDay - 1); const isSunday = index % 7 === 0; const isThursday = index % 7 === 4; From 8e697320f126aa84c41d891be68b5f034c12dcac Mon Sep 17 00:00:00 2001 From: solo5star Date: Fri, 16 Jun 2023 09:12:08 +0000 Subject: [PATCH 08/28] =?UTF-8?q?refactor:=20`constants`=20=EC=BB=A8?= =?UTF-8?q?=EB=B2=A4=EC=85=98=EC=97=90=20=EB=A7=9E=EA=B2=8C=20SNAKE=5FCASE?= =?UTF-8?q?=EB=A1=9C=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/GlobalStyles.js | 4 ++-- frontend/src/PageRouter.tsx | 4 ++-- frontend/src/components/Banner/Banner.styles.ts | 10 +++++----- frontend/src/components/Banner/BannerList.styles.ts | 4 ++-- .../src/components/FilterList/FilterList.styles.js | 4 ++-- frontend/src/components/Items/LevellogItem.styles.ts | 4 ++-- frontend/src/components/Items/StudylogItem.styles.ts | 4 ++-- frontend/src/components/NavBar/NavBar.styles.js | 10 +++++----- frontend/src/constants/mediaQuery.ts | 4 ++-- frontend/src/pages/EssayAnswerListPage/index.tsx | 4 ++-- frontend/src/pages/EssayAnswerListPage/styles.ts | 4 ++-- frontend/src/pages/LevellogListPage/index.tsx | 6 +++--- frontend/src/pages/LevellogListPage/styles.ts | 4 ++-- frontend/src/pages/MainPage/styles.ts | 4 ++-- frontend/src/pages/StudylogListPage/index.tsx | 6 +++--- frontend/src/pages/StudylogListPage/styles.ts | 4 ++-- 16 files changed, 40 insertions(+), 40 deletions(-) diff --git a/frontend/src/GlobalStyles.js b/frontend/src/GlobalStyles.js index 2abd7a9a5..9681420af 100644 --- a/frontend/src/GlobalStyles.js +++ b/frontend/src/GlobalStyles.js @@ -1,6 +1,6 @@ import { css, Global } from '@emotion/react'; import COLOR from './constants/color'; -import mediaQuery from './constants/mediaQuery'; +import MEDIA_QUERY from './constants/mediaQuery'; const GlobalStyles = () => { const scrollbarWidth = window.innerWidth - document.body.clientWidth; @@ -105,7 +105,7 @@ const GlobalStyles = () => { margin: 0; } - ${mediaQuery.xs} { + ${MEDIA_QUERY.xs} { html { font-size: 8px; } diff --git a/frontend/src/PageRouter.tsx b/frontend/src/PageRouter.tsx index e0ae788de..174ce2aa6 100644 --- a/frontend/src/PageRouter.tsx +++ b/frontend/src/PageRouter.tsx @@ -4,7 +4,7 @@ import { css } from '@emotion/react'; import { BrowserRouter as Router, Redirect, Route, Switch } from 'react-router-dom'; import { NavBar } from './components'; import { PATH } from './constants'; -import mediaQuery from './constants/mediaQuery'; +import MEDIA_QUERY from './constants/mediaQuery'; import pageRoutes from './routes'; export const MainContentStyle = css` @@ -12,7 +12,7 @@ export const MainContentStyle = css` margin: 4rem auto; padding: 0 4rem 8rem; - ${mediaQuery.xs} { + ${MEDIA_QUERY.xs} { min-width: 280px; max-width: 420px; padding: 0 1rem; diff --git a/frontend/src/components/Banner/Banner.styles.ts b/frontend/src/components/Banner/Banner.styles.ts index 4d127bfab..e31edce03 100644 --- a/frontend/src/components/Banner/Banner.styles.ts +++ b/frontend/src/components/Banner/Banner.styles.ts @@ -1,6 +1,6 @@ import { css } from '@emotion/react'; import { COLOR } from '../../constants'; -import mediaQuery from '../../constants/mediaQuery'; +import MEDIA_QUERY from '../../constants/mediaQuery'; import { getTextColor } from '../../utils/textColorPicker'; export const bannerWrapperStyle = css` @@ -29,7 +29,7 @@ export const bannerWrapperStyle = css` text-align: center; } - ${mediaQuery.xs} { + ${MEDIA_QUERY.xs} { height: 180px; br { @@ -51,7 +51,7 @@ export const bannerInnerWrapperStyle = css` justify-content: center; align-items: center; - ${mediaQuery.xs} { + ${MEDIA_QUERY.xs} { max-width: calc(100% - 5rem); } `; @@ -79,7 +79,7 @@ export const bannerTextAreaStyle = css` line-height: 1.5; } - ${mediaQuery.xs} { + ${MEDIA_QUERY.xs} { padding-right: 0; h2 { @@ -136,7 +136,7 @@ export const getBannerSideImageStyle = (sideImageUrl, sideImagePadding, reverse) ${reverse ? 'margin-left: 3rem;' : 'margin-right: 3rem;'} - ${mediaQuery.xs} { + ${MEDIA_QUERY.xs} { width: 0; height: 0; margin: 0; diff --git a/frontend/src/components/Banner/BannerList.styles.ts b/frontend/src/components/Banner/BannerList.styles.ts index 262472dde..78c4ce9c2 100644 --- a/frontend/src/components/Banner/BannerList.styles.ts +++ b/frontend/src/components/Banner/BannerList.styles.ts @@ -1,6 +1,6 @@ import { css } from '@emotion/react'; import { COLOR } from '../../constants'; -import mediaQuery from '../../constants/mediaQuery'; +import MEDIA_QUERY from '../../constants/mediaQuery'; import { getTextColor } from '../../utils/textColorPicker'; export const BannerSliderWrapperStyle = css` @@ -12,7 +12,7 @@ export const BannerSliderWrapperStyle = css` box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.2); - ${mediaQuery.xs} { + ${MEDIA_QUERY.xs} { height: 180px; } `; diff --git a/frontend/src/components/FilterList/FilterList.styles.js b/frontend/src/components/FilterList/FilterList.styles.js index ca804ce9e..fe3289c99 100644 --- a/frontend/src/components/FilterList/FilterList.styles.js +++ b/frontend/src/components/FilterList/FilterList.styles.js @@ -1,7 +1,7 @@ import { css } from '@emotion/react'; import styled from '@emotion/styled'; import COLOR from '../../constants/color'; -import mediaQuery from '../../constants/mediaQuery'; +import MEDIA_QUERY from '../../constants/mediaQuery'; const DropdownToggledStyle = css` &:before { @@ -35,7 +35,7 @@ const Container = styled.div` & > div:not(:last-child) { margin-right: 3.2rem; - ${mediaQuery.xs} { + ${MEDIA_QUERY.xs} { margin-right: 2rem; } } diff --git a/frontend/src/components/Items/LevellogItem.styles.ts b/frontend/src/components/Items/LevellogItem.styles.ts index fb06695f0..8519e6d75 100644 --- a/frontend/src/components/Items/LevellogItem.styles.ts +++ b/frontend/src/components/Items/LevellogItem.styles.ts @@ -1,7 +1,7 @@ import { css } from '@emotion/react'; import styled from '@emotion/styled'; import { Link } from 'react-router-dom'; -import mediaQuery from '../../constants/mediaQuery'; +import MEDIA_QUERY from '../../constants/mediaQuery'; import { COLOR } from '../../enumerations/color'; export const CardStyle = css` @@ -40,7 +40,7 @@ export const DescriptionStyle = css` overflow: hidden; text-overflow: ellipsis; - ${mediaQuery.xs} { + ${MEDIA_QUERY.xs} { font-size: 2.5rem; height: calc(2.5rem * 4.5); } diff --git a/frontend/src/components/Items/StudylogItem.styles.ts b/frontend/src/components/Items/StudylogItem.styles.ts index 9f41c9f5e..00eae82f3 100644 --- a/frontend/src/components/Items/StudylogItem.styles.ts +++ b/frontend/src/components/Items/StudylogItem.styles.ts @@ -1,5 +1,5 @@ import { css } from '@emotion/react'; -import mediaQuery from '../../constants/mediaQuery'; +import MEDIA_QUERY from '../../constants/mediaQuery'; import { COLOR } from '../../enumerations/color'; export const CardStyle = css` @@ -38,7 +38,7 @@ export const DescriptionStyle = css` overflow: hidden; text-overflow: ellipsis; - ${mediaQuery.xs} { + ${MEDIA_QUERY.xs} { font-size: 2.5rem; height: calc(2.5rem * 4.5); } diff --git a/frontend/src/components/NavBar/NavBar.styles.js b/frontend/src/components/NavBar/NavBar.styles.js index 064d48488..f52822ddf 100644 --- a/frontend/src/components/NavBar/NavBar.styles.js +++ b/frontend/src/components/NavBar/NavBar.styles.js @@ -1,7 +1,7 @@ import { css } from '@emotion/react'; import styled from '@emotion/styled'; import COLOR from '../../constants/color'; -import mediaQuery from '../../constants/mediaQuery'; +import MEDIA_QUERY from '../../constants/mediaQuery'; const DropdownToggledStyle = css` &:before { @@ -36,7 +36,7 @@ const Wrapper = styled.div` align-items: center; justify-content: space-between; - ${mediaQuery.xs} { + ${MEDIA_QUERY.xs} { padding: 0 1rem; } `; @@ -70,7 +70,7 @@ const Menu = styled.div` & > * { margin-left: 1rem; - ${mediaQuery.xs} { + ${MEDIA_QUERY.xs} { margin-left: 0.5rem; } } @@ -91,7 +91,7 @@ const DropdownStyle = css` text-align: center; } - ${mediaQuery.xs} { + ${MEDIA_QUERY.xs} { transform: translateX(-10%); } `; @@ -107,7 +107,7 @@ const WritingDropdownStyle = css` text-align: center; } - ${mediaQuery.xs} { + ${MEDIA_QUERY.xs} { transform: translateX(-10%); } `; diff --git a/frontend/src/constants/mediaQuery.ts b/frontend/src/constants/mediaQuery.ts index 48a983fd9..103e29759 100644 --- a/frontend/src/constants/mediaQuery.ts +++ b/frontend/src/constants/mediaQuery.ts @@ -20,7 +20,7 @@ import SCREEN_BREAKPOINT, { ScreenBreakpoint } from './screenBreakpoints'; * } * ` */ -const mediaQuery: Record = { +const MEDIA_QUERY: Readonly> = { xs: `@media screen and (max-width: ${SCREEN_BREAKPOINT.xs})`, sm: `@media screen and (max-width: ${SCREEN_BREAKPOINT.sm})`, md: `@media screen and (max-width: ${SCREEN_BREAKPOINT.md})`, @@ -28,4 +28,4 @@ const mediaQuery: Record = { xl: `@media screen and (max-width: ${SCREEN_BREAKPOINT.xl})`, }; -export default mediaQuery; +export default MEDIA_QUERY; diff --git a/frontend/src/pages/EssayAnswerListPage/index.tsx b/frontend/src/pages/EssayAnswerListPage/index.tsx index e006ebd1e..88b4e1ea7 100644 --- a/frontend/src/pages/EssayAnswerListPage/index.tsx +++ b/frontend/src/pages/EssayAnswerListPage/index.tsx @@ -2,7 +2,7 @@ import { css } from '@emotion/react'; import EssayAnswerList from '../../components/Lists/EssayAnswerList'; -import mediaQuery from '../../constants/mediaQuery'; +import MEDIA_QUERY from '../../constants/mediaQuery'; import { useEssayAnswerList } from '../../hooks/EssayAnswer/useEssayAnswerList'; import { MainContentStyle } from '../../PageRouter'; import { @@ -26,7 +26,7 @@ const EssayAnswerListPage = () => { css` margin-bottom: 1rem; - ${mediaQuery.xs} { + ${MEDIA_QUERY.xs} { flex-direction: column; } `, diff --git a/frontend/src/pages/EssayAnswerListPage/styles.ts b/frontend/src/pages/EssayAnswerListPage/styles.ts index 32ad85a8d..542b66cfa 100644 --- a/frontend/src/pages/EssayAnswerListPage/styles.ts +++ b/frontend/src/pages/EssayAnswerListPage/styles.ts @@ -1,12 +1,12 @@ import styled from '@emotion/styled'; -import mediaQuery from '../../constants/mediaQuery'; +import MEDIA_QUERY from '../../constants/mediaQuery'; const HeaderContainer = styled.div` display: flex; flex-direction: column; margin-bottom: 1.5rem; - ${mediaQuery.xs} { + ${MEDIA_QUERY.xs} { margin-bottom: 0.8rem; } `; diff --git a/frontend/src/pages/LevellogListPage/index.tsx b/frontend/src/pages/LevellogListPage/index.tsx index 71a4cfba5..a31f61aab 100644 --- a/frontend/src/pages/LevellogListPage/index.tsx +++ b/frontend/src/pages/LevellogListPage/index.tsx @@ -6,7 +6,7 @@ import PencilIcon from '../../assets/images/pencil_icon.svg'; import { Button, Pagination } from '../../components'; import LevellogList from '../../components/Lists/LevellogList'; import { PATH } from '../../constants'; -import mediaQuery from '../../constants/mediaQuery'; +import MEDIA_QUERY from '../../constants/mediaQuery'; import { useLevellogList } from '../../hooks/Levellog/useLevellogList'; import { MainContentStyle } from '../../PageRouter'; import { @@ -31,7 +31,7 @@ const LevellogListPage = () => { css` margin-bottom: 1rem; - ${mediaQuery.xs} { + ${MEDIA_QUERY.xs} { flex-direction: column; } `, @@ -50,7 +50,7 @@ const LevellogListPage = () => { FlexStyle, JustifyContentEndStyle, css` - ${mediaQuery.xs} { + ${MEDIA_QUERY.xs} { > button { display: none; } diff --git a/frontend/src/pages/LevellogListPage/styles.ts b/frontend/src/pages/LevellogListPage/styles.ts index 32ad85a8d..542b66cfa 100644 --- a/frontend/src/pages/LevellogListPage/styles.ts +++ b/frontend/src/pages/LevellogListPage/styles.ts @@ -1,12 +1,12 @@ import styled from '@emotion/styled'; -import mediaQuery from '../../constants/mediaQuery'; +import MEDIA_QUERY from '../../constants/mediaQuery'; const HeaderContainer = styled.div` display: flex; flex-direction: column; margin-bottom: 1.5rem; - ${mediaQuery.xs} { + ${MEDIA_QUERY.xs} { margin-bottom: 0.8rem; } `; diff --git a/frontend/src/pages/MainPage/styles.ts b/frontend/src/pages/MainPage/styles.ts index ea0a3ae16..0a20a6860 100644 --- a/frontend/src/pages/MainPage/styles.ts +++ b/frontend/src/pages/MainPage/styles.ts @@ -2,7 +2,7 @@ import { css } from '@emotion/react'; import styled from '@emotion/styled'; import { Chip } from '../../components'; import { COLOR } from '../../constants'; -import mediaQuery from '../../constants/mediaQuery'; +import MEDIA_QUERY from '../../constants/mediaQuery'; // 메인페이지 전체 적용 export const SectionHeaderGapStyle = css` @@ -12,7 +12,7 @@ export const SectionHeaderGapStyle = css` padding-left: 1.2rem; margin-bottom: 1.2rem; - ${mediaQuery.xs} { + ${MEDIA_QUERY.xs} { padding-left: 0.8rem; margin-bottom: 0.4rem; } diff --git a/frontend/src/pages/StudylogListPage/index.tsx b/frontend/src/pages/StudylogListPage/index.tsx index 626ef4fe4..2c7084df4 100644 --- a/frontend/src/pages/StudylogListPage/index.tsx +++ b/frontend/src/pages/StudylogListPage/index.tsx @@ -9,7 +9,7 @@ import Chip from '../../components/Chip/Chip'; import StudylogList from '../../components/Lists/StudylogList'; import SearchBar from '../../components/SearchBar/SearchBar'; import { PATH } from '../../constants'; -import mediaQuery from '../../constants/mediaQuery'; +import MEDIA_QUERY from '../../constants/mediaQuery'; import { ERROR_MESSAGE } from '../../constants/message'; import { UserContext } from '../../contexts/UserProvider'; import useFetch from '../../hooks/useFetch'; @@ -141,7 +141,7 @@ const StudylogListPage = (): JSX.Element => { css` margin-bottom: 1rem; - ${mediaQuery.xs} { + ${MEDIA_QUERY.xs} { flex-direction: column; } `, @@ -166,7 +166,7 @@ const StudylogListPage = (): JSX.Element => { css={[ FlexStyle, css` - ${mediaQuery.xs} { + ${MEDIA_QUERY.xs} { > button { display: none; } diff --git a/frontend/src/pages/StudylogListPage/styles.ts b/frontend/src/pages/StudylogListPage/styles.ts index fb04e69fa..860a025e1 100644 --- a/frontend/src/pages/StudylogListPage/styles.ts +++ b/frontend/src/pages/StudylogListPage/styles.ts @@ -1,12 +1,12 @@ import styled from '@emotion/styled'; -import mediaQuery from '../../constants/mediaQuery'; +import MEDIA_QUERY from '../../constants/mediaQuery'; const HeaderContainer = styled.div` display: flex; flex-direction: column; margin-bottom: 1.5rem; - ${mediaQuery.xs} { + ${MEDIA_QUERY.xs} { margin-bottom: 0.8rem; } `; From 46cd8454042a3f363eecb6d8431a0f11caae3c8c Mon Sep 17 00:00:00 2001 From: solo5star Date: Fri, 16 Jun 2023 09:21:10 +0000 Subject: [PATCH 09/28] =?UTF-8?q?refactor:=20=EA=B8=B0=EC=A1=B4=20?= =?UTF-8?q?=EC=BD=94=EB=93=9C=EC=97=90=20`MEDIA=5FQUERY`=20=EB=B0=8F=20`us?= =?UTF-8?q?eScreenMediaQuery`=20=ED=9B=85=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../@shared/SideSheet/SideSheet.style.ts | 7 +-- .../src/components/Badge/BadgeList.styles.ts | 3 +- .../FilterList/FilterList.styles.js | 2 +- frontend/src/components/NavBar/NavBar.js | 48 ++++++------------- .../ProfilePageSideBar.styles.js | 7 +-- frontend/src/constants/screenSize.js | 3 -- frontend/src/pages/ProfilePage/index.js | 17 +++---- frontend/src/pages/ProfilePage/styles.js | 3 +- 8 files changed, 37 insertions(+), 53 deletions(-) delete mode 100644 frontend/src/constants/screenSize.js diff --git a/frontend/src/components/@shared/SideSheet/SideSheet.style.ts b/frontend/src/components/@shared/SideSheet/SideSheet.style.ts index fda0fba74..0a27d9029 100644 --- a/frontend/src/components/@shared/SideSheet/SideSheet.style.ts +++ b/frontend/src/components/@shared/SideSheet/SideSheet.style.ts @@ -1,7 +1,7 @@ -import styled from '@emotion/styled'; import { css, keyframes } from '@emotion/react'; +import styled from '@emotion/styled'; +import MEDIA_QUERY from '../../../constants/mediaQuery'; import { SideSheetProps } from './SideSheet'; -import MOBILE_MAX_SIZE from '../../../constants/screenSize'; export type SideSheetContentProps = Pick; @@ -30,7 +30,8 @@ export const SideSheetContent = styled.div` z-index: 101; animation: 0.25s ease-in forwards ${slide}; `} - @media (max-width: ${MOBILE_MAX_SIZE}) { + + ${MEDIA_QUERY.xs} { top: initial; bottom: 0; height: 50%; diff --git a/frontend/src/components/Badge/BadgeList.styles.ts b/frontend/src/components/Badge/BadgeList.styles.ts index 4617505c9..f655e8dfc 100644 --- a/frontend/src/components/Badge/BadgeList.styles.ts +++ b/frontend/src/components/Badge/BadgeList.styles.ts @@ -1,5 +1,6 @@ import styled from '@emotion/styled'; import { COLOR } from '../../constants'; +import MEDIA_QUERY from '../../constants/mediaQuery'; export const Container = styled.div` width: 100%; @@ -13,7 +14,7 @@ export const Container = styled.div` background: white; border-radius: 2rem; - @media screen and (max-width: 768px) { + ${MEDIA_QUERY.md} { flex-direction: column; flex-wrap: nowrap; align-items: center; diff --git a/frontend/src/components/FilterList/FilterList.styles.js b/frontend/src/components/FilterList/FilterList.styles.js index fe3289c99..f8e323c68 100644 --- a/frontend/src/components/FilterList/FilterList.styles.js +++ b/frontend/src/components/FilterList/FilterList.styles.js @@ -95,7 +95,7 @@ display: flex; & > div:not(:last-child) { margin-right: 3.2rem; - @media screen and (max-width: 420px) { + ${MEDIA_QUERY.xs} { margin-right: 2rem; } } diff --git a/frontend/src/components/NavBar/NavBar.js b/frontend/src/components/NavBar/NavBar.js index e7711d350..2c1953ea7 100644 --- a/frontend/src/components/NavBar/NavBar.js +++ b/frontend/src/components/NavBar/NavBar.js @@ -1,31 +1,25 @@ /** @jsxImportSource @emotion/react */ import PropTypes from 'prop-types'; -import { useContext, useState, useEffect } from 'react'; -import { useHistory, Link, NavLink } from 'react-router-dom'; -import MobileLogo from '../../assets/images/woteco-logo.png'; +import { useContext, useState } from 'react'; +import { Link, NavLink, useHistory } from 'react-router-dom'; import LogoImage from '../../assets/images/logo.svg'; +import NoProfileImage from '../../assets/images/no-profile-image.png'; +import PencilIcon from '../../assets/images/pencil_icon.svg'; +import MobileLogo from '../../assets/images/woteco-logo.png'; +import { APP_MODE, isProd } from '../../configs/environment'; import { PATH } from '../../constants'; +import { UserContext } from '../../contexts/UserProvider'; +import useScreenMediaQuery from '../../hooks/useScreenMediaQuery'; +import Button from '../Button/Button'; import GithubLogin from '../GithubLogin/GithubLogin'; import { DropdownMenu } from '../index'; -import Button from '../Button/Button'; -import PencilIcon from '../../assets/images/pencil_icon.svg'; -import NoProfileImage from '../../assets/images/no-profile-image.png'; - import { - Container, - Wrapper, - Logo, - Menu, - DropdownStyle, - pencilButtonStyle, - profileButtonStyle, - Navigation, - loginButtonStyle, + Container, DropdownStyle, loginButtonStyle, Logo, + Menu, Navigation, pencilButtonStyle, + profileButtonStyle, Wrapper } from './NavBar.styles'; -import { UserContext } from '../../contexts/UserProvider'; -import { APP_MODE, isProd } from '../../configs/environment'; -import MOBILE_MAX_SIZE from '../../constants/screenSize'; + const navigationConfig = [ { @@ -52,9 +46,7 @@ const NavBar = () => { const [isDropdownToggled, setDropdownToggled] = useState(false); const [isWritingDropdownToggled, setWritingDropdownToggled] = useState(false); - const [isMobile, setIsMobile] = useState(false); - - const mobileScreen = window.matchMedia(`(max-width: ${MOBILE_MAX_SIZE})`); + const { isXs } = useScreenMediaQuery(); const goMain = () => { history.push(PATH.ROOT); @@ -82,16 +74,6 @@ const NavBar = () => { } }; - useEffect(() => { - const handleResize = () => { - setIsMobile(mobileScreen.matches); - }; - mobileScreen.addEventListener('change', handleResize); - return () => { - mobileScreen.removeEventListener('change', handleResize); - }; - }, [mobileScreen]); - return ( { > - + {!isProd && {logoTag}} diff --git a/frontend/src/components/ProfilePageSideBar/ProfilePageSideBar.styles.js b/frontend/src/components/ProfilePageSideBar/ProfilePageSideBar.styles.js index 94ab931a0..4a6a5fa7b 100644 --- a/frontend/src/components/ProfilePageSideBar/ProfilePageSideBar.styles.js +++ b/frontend/src/components/ProfilePageSideBar/ProfilePageSideBar.styles.js @@ -1,13 +1,14 @@ import { css } from '@emotion/react'; import styled from '@emotion/styled'; import COLOR from '../../constants/color'; +import MEDIA_QUERY from '../../constants/mediaQuery'; const Container = styled.div` display: flex; flex-direction: column; max-width: 20rem; - @media screen and (max-width: 768px) { + ${MEDIA_QUERY.md} { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto 1fr; @@ -35,7 +36,7 @@ const Profile = styled.div` height: fit-content; width: fit-content; - @media screen and (max-width: 768px) { + ${MEDIA_QUERY.md} { height: 100%; } `; @@ -70,7 +71,7 @@ const MenuList = styled.ul` border: 1px solid ${COLOR.LIGHT_GRAY_200}; padding: 1.6rem 0; - @media screen and (max-width: 768px) { + ${MEDIA_QUERY.md} { height: 100%; padding: 0; margin: 0; diff --git a/frontend/src/constants/screenSize.js b/frontend/src/constants/screenSize.js deleted file mode 100644 index 4f108ff34..000000000 --- a/frontend/src/constants/screenSize.js +++ /dev/null @@ -1,3 +0,0 @@ -const MOBILE_MAX_SIZE = '420px'; - -export default MOBILE_MAX_SIZE; diff --git a/frontend/src/pages/ProfilePage/index.js b/frontend/src/pages/ProfilePage/index.js index aca7c9a5b..8b540d44f 100644 --- a/frontend/src/pages/ProfilePage/index.js +++ b/frontend/src/pages/ProfilePage/index.js @@ -1,15 +1,16 @@ /** @jsxImportSource @emotion/react */ -import StudylogOverview from './StudylogOverviews'; -import Introduction from '../../components/Introduction/Introduction'; +import { css } from '@emotion/react'; import { ProfilePageSideBar } from '../../components'; - +import Introduction from '../../components/Introduction/Introduction'; +import MEDIA_QUERY from '../../constants/mediaQuery'; import useNotFound from '../../hooks/useNotFound'; - -import { Content } from './styles'; -import { FlexStyle } from '../../styles/flex.styles'; import { MainContentStyle } from '../../PageRouter'; -import { css } from '@emotion/react'; +import { FlexStyle } from '../../styles/flex.styles'; +import StudylogOverview from './StudylogOverviews'; +import { Content } from './styles'; + + const ProfilePage = ({ children, menu }) => { const { isNotFound, NotFound } = useNotFound(); @@ -24,7 +25,7 @@ const ProfilePage = ({ children, menu }) => { MainContentStyle, FlexStyle, css` - @media screen and (max-width: 768px) { + ${MEDIA_QUERY.md} { flex-direction: column; } `, diff --git a/frontend/src/pages/ProfilePage/styles.js b/frontend/src/pages/ProfilePage/styles.js index 06c0f0012..4305d803a 100644 --- a/frontend/src/pages/ProfilePage/styles.js +++ b/frontend/src/pages/ProfilePage/styles.js @@ -1,6 +1,7 @@ import { css } from '@emotion/react'; import styled from '@emotion/styled'; import COLOR from '../../constants/color'; +import MEDIA_QUERY from '../../constants/mediaQuery'; const Container = styled.div` display: flex; @@ -13,7 +14,7 @@ const Content = styled.div` display: flex; justify-content: center; - @media screen and (max-width: 768px) { + ${MEDIA_QUERY.md} { margin: 0; } `; From d8bc614c2baaa1a68919b3ef017acc4f47e4da52 Mon Sep 17 00:00:00 2001 From: solo5star Date: Fri, 16 Jun 2023 09:30:14 +0000 Subject: [PATCH 10/28] =?UTF-8?q?fix:=20=EC=9E=98=EB=AA=BB=EB=90=9C=20medi?= =?UTF-8?q?a=20query=20=EB=AC=B8=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/constants/mediaQuery.ts | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/frontend/src/constants/mediaQuery.ts b/frontend/src/constants/mediaQuery.ts index 103e29759..f5baecae6 100644 --- a/frontend/src/constants/mediaQuery.ts +++ b/frontend/src/constants/mediaQuery.ts @@ -21,11 +21,11 @@ import SCREEN_BREAKPOINT, { ScreenBreakpoint } from './screenBreakpoints'; * ` */ const MEDIA_QUERY: Readonly> = { - xs: `@media screen and (max-width: ${SCREEN_BREAKPOINT.xs})`, - sm: `@media screen and (max-width: ${SCREEN_BREAKPOINT.sm})`, - md: `@media screen and (max-width: ${SCREEN_BREAKPOINT.md})`, - lg: `@media screen and (max-width: ${SCREEN_BREAKPOINT.lg})`, - xl: `@media screen and (max-width: ${SCREEN_BREAKPOINT.xl})`, + xs: `@media screen and (max-width: ${SCREEN_BREAKPOINT.xs}px)`, + sm: `@media screen and (max-width: ${SCREEN_BREAKPOINT.sm}px)`, + md: `@media screen and (max-width: ${SCREEN_BREAKPOINT.md}px)`, + lg: `@media screen and (max-width: ${SCREEN_BREAKPOINT.lg}px)`, + xl: `@media screen and (max-width: ${SCREEN_BREAKPOINT.xl}px)`, }; export default MEDIA_QUERY; From 4f84f839d0dae8b6aba95a20aa8348ad00a0e92e Mon Sep 17 00:00:00 2001 From: solo5star Date: Fri, 16 Jun 2023 09:32:01 +0000 Subject: [PATCH 11/28] =?UTF-8?q?refactor:=20=EA=B8=B0=EC=A1=B4=20?= =?UTF-8?q?=EC=BD=94=EB=93=9C=EC=97=90=20`MEDIA=5FQUERY`=20=EC=A0=81?= =?UTF-8?q?=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../FilterList/FilterList.styles.js | 58 +++++++++---------- 1 file changed, 29 insertions(+), 29 deletions(-) diff --git a/frontend/src/components/FilterList/FilterList.styles.js b/frontend/src/components/FilterList/FilterList.styles.js index f8e323c68..1dead8d96 100644 --- a/frontend/src/components/FilterList/FilterList.styles.js +++ b/frontend/src/components/FilterList/FilterList.styles.js @@ -40,7 +40,7 @@ const Container = styled.div` } } - @media screen and (max-width: 450px) { + ${MEDIA_QUERY.xs} { font-size: 1rem; } @@ -90,40 +90,40 @@ const Container = styled.div` `; const FilterContainer = styled.div` -display: flex; + display: flex; -& > div:not(:last-child) { - margin-right: 3.2rem; + & > div:not(:last-child) { + margin-right: 3.2rem; - ${MEDIA_QUERY.xs} { - margin-right: 2rem; + ${MEDIA_QUERY.xs} { + margin-right: 2rem; + } } -} -@media screen and (max-width: 620px) { - display: grid; - grid-template-columns: repeat(2, 1fr); -} - -& button { - display: flex; - align-items: center; - height: 100%; - text-align: center; - color: ${COLOR.DARK_GRAY_500}; + ${MEDIA_QUERY.sm} { + display: grid; + grid-template-columns: repeat(2, 1fr); + } - ::after { - content: ''; - width: 0; - height: 0; - transform: translateY(50%); - margin-left: 0.2rem; - border-top: 0.5rem solid ${COLOR.DARK_GRAY_500}; - border-bottom: 0.5rem solid transparent; - border-left: 0.5rem solid transparent; - border-right: 0.5rem solid transparent; + & button { + display: flex; + align-items: center; + height: 100%; + text-align: center; + color: ${COLOR.DARK_GRAY_500}; + + ::after { + content: ''; + width: 0; + height: 0; + transform: translateY(50%); + margin-left: 0.2rem; + border-top: 0.5rem solid ${COLOR.DARK_GRAY_500}; + border-bottom: 0.5rem solid transparent; + border-left: 0.5rem solid transparent; + border-right: 0.5rem solid transparent; + } } -} `; const FilterDetail = styled.button` From 8b8b3a1cf0e1d803d38cf228eeb863a3b1dafd4d Mon Sep 17 00:00:00 2001 From: Dain Lee Date: Wed, 5 Jul 2023 17:48:26 +0900 Subject: [PATCH 12/28] =?UTF-8?q?refactor:=20ts=EB=A1=9C=20=EB=A7=88?= =?UTF-8?q?=EC=9D=B4=EA=B7=B8=EB=A0=88=EC=9D=B4=EC=85=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/Card/Card.js | 29 ------------------- frontend/src/components/Card/Card.stories.js | 24 --------------- frontend/src/components/Card/Card.stories.tsx | 26 +++++++++++++++++ .../Card/{Card.styles.js => Card.styles.ts} | 8 ++++- frontend/src/components/Card/Card.tsx | 25 ++++++++++++++++ 5 files changed, 58 insertions(+), 54 deletions(-) delete mode 100644 frontend/src/components/Card/Card.js delete mode 100644 frontend/src/components/Card/Card.stories.js create mode 100644 frontend/src/components/Card/Card.stories.tsx rename frontend/src/components/Card/{Card.styles.js => Card.styles.ts} (80%) create mode 100644 frontend/src/components/Card/Card.tsx diff --git a/frontend/src/components/Card/Card.js b/frontend/src/components/Card/Card.js deleted file mode 100644 index be9e378f7..000000000 --- a/frontend/src/components/Card/Card.js +++ /dev/null @@ -1,29 +0,0 @@ -import PropTypes from 'prop-types'; -import { CARD_SIZE, Container, Title } from './Card.styles'; - -const Card = ({ title, children, size, cssProps, css, onClick }) => { - return ( -
- {title && {title} } - - {children} - -
- ); -}; - -Card.propTypes = { - children: PropTypes.node.isRequired, - title: PropTypes.string, - size: PropTypes.string, - cssProps: PropTypes.object, - css: PropTypes.object, - onClick: PropTypes.func, -}; - -Card.defaultProps = { - title: '', - size: CARD_SIZE.SMALL, -}; - -export default Card; diff --git a/frontend/src/components/Card/Card.stories.js b/frontend/src/components/Card/Card.stories.js deleted file mode 100644 index 70581e117..000000000 --- a/frontend/src/components/Card/Card.stories.js +++ /dev/null @@ -1,24 +0,0 @@ -import Card, { SIZE } from './Card'; - -export default { - title: 'Component/Card', - component: Card, - argTypes: { - size: { options: Object.values(SIZE), control: { type: 'select' } }, - }, -}; - -const Template = (args) => ; - -export const Basic = Template.bind({}); - -Basic.args = { - children:
hello
, -}; - -export const Large = Template.bind({}); - -Large.args = { - children:
hello
, - size: 'LARGE', -}; diff --git a/frontend/src/components/Card/Card.stories.tsx b/frontend/src/components/Card/Card.stories.tsx new file mode 100644 index 000000000..10a76b2db --- /dev/null +++ b/frontend/src/components/Card/Card.stories.tsx @@ -0,0 +1,26 @@ +import Card from './Card'; +import { CARD_SIZE } from './Card.styles'; + +interface Props { + children: JSX.Element; + size: string; +} + +export default { + title: 'Component/Card', + component: Card, + args: { + size: 'SMALL', + }, + argTypes: { + size: { options: Object.values(CARD_SIZE), control: { type: 'select' } }, + }, +}; + +export const Default = (args: Props) => { + return ( + +
hello
+ + ); +}; diff --git a/frontend/src/components/Card/Card.styles.js b/frontend/src/components/Card/Card.styles.ts similarity index 80% rename from frontend/src/components/Card/Card.styles.js rename to frontend/src/components/Card/Card.styles.ts index 66c8f3f1e..488013f63 100644 --- a/frontend/src/components/Card/Card.styles.js +++ b/frontend/src/components/Card/Card.styles.ts @@ -1,5 +1,11 @@ import styled from '@emotion/styled'; import COLOR from '../../constants/color'; +import { SerializedStyles } from '@emotion/react'; + +interface ContainerProps { + size: string; + css?: SerializedStyles; +} const CARD_SIZE = { EXTRA_SMALL: 'EXTRA_SMALL', @@ -22,7 +28,7 @@ const sizeStyle = { }, }; -const Container = styled.section` +const Container = styled.section` background-color: ${COLOR.WHITE}; border: 1px solid ${COLOR.LIGHT_GRAY_400}; border-radius: 2rem; diff --git a/frontend/src/components/Card/Card.tsx b/frontend/src/components/Card/Card.tsx new file mode 100644 index 000000000..5fb05d13a --- /dev/null +++ b/frontend/src/components/Card/Card.tsx @@ -0,0 +1,25 @@ +// import PropTypes from 'prop-types'; +import { SerializedStyles } from '@emotion/react'; +import { Container, Title } from './Card.styles'; + +interface Props { + children: JSX.Element; + title?: string; + size: string; + cssProps?: SerializedStyles; + css?: SerializedStyles ; + onClick?: () => void; +} + +const Card = ({ title, children, size, cssProps, css, onClick }: Props) => { + return ( +
+ {title && {title} } + + {children} + +
+ ); +}; + +export default Card; From 8cb546ac7060502ffe547f8fddaa840ceed31678 Mon Sep 17 00:00:00 2001 From: d0dam Date: Fri, 7 Jul 2023 12:45:21 +0900 Subject: [PATCH 13/28] =?UTF-8?q?refactor:=20=20Dropdown=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20ts=20=ED=8C=8C=EC=9D=BC=EB=A1=9C?= =?UTF-8?q?=20=EB=A7=88=EC=9D=B4=EA=B7=B8=EB=A0=88=EC=9D=B4=EC=85=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit #1344 #1372 Co-authored-by: 이도현 --- .../components/DropdownMenu/DropdownMenu.js | 12 --- .../DropdownMenu/DropdownMenu.styles.js | 88 ------------------- .../DropdownMenu/DropdownMenu.styles.tsx | 42 +++++++++ .../components/DropdownMenu/DropdownMenu.tsx | 19 ++++ 4 files changed, 61 insertions(+), 100 deletions(-) delete mode 100644 frontend/src/components/DropdownMenu/DropdownMenu.js delete mode 100644 frontend/src/components/DropdownMenu/DropdownMenu.styles.js create mode 100644 frontend/src/components/DropdownMenu/DropdownMenu.styles.tsx create mode 100644 frontend/src/components/DropdownMenu/DropdownMenu.tsx diff --git a/frontend/src/components/DropdownMenu/DropdownMenu.js b/frontend/src/components/DropdownMenu/DropdownMenu.js deleted file mode 100644 index 0065f8a93..000000000 --- a/frontend/src/components/DropdownMenu/DropdownMenu.js +++ /dev/null @@ -1,12 +0,0 @@ -import PropTypes from 'prop-types'; -import { Container } from './DropdownMenu.styles'; - -const DropdownMenu = ({ children, cssProps, css }) => { - return {children}; -}; - -DropdownMenu.propTypes = { - children: PropTypes.node, -}; - -export default DropdownMenu; diff --git a/frontend/src/components/DropdownMenu/DropdownMenu.styles.js b/frontend/src/components/DropdownMenu/DropdownMenu.styles.js deleted file mode 100644 index 34d7bae60..000000000 --- a/frontend/src/components/DropdownMenu/DropdownMenu.styles.js +++ /dev/null @@ -1,88 +0,0 @@ -import styled from '@emotion/styled'; -import COLOR from '../../constants/color'; - -const Container = styled.div` - height: fit-content; - max-height: 32rem; - white-space: nowrap; - overflow-y: auto; - background-color: ${COLOR.WHITE}; - border-radius: 1.2rem; - box-shadow: 0px 0px 6px ${COLOR.BLACK_OPACITY_300}; - padding: 1rem 1.2rem; - position: absolute; - z-index: 100; - - /* transform: translateY(30%); */ - - && { - ${(props) => props.css} - } - - /* &:before { - position: fixed; - top: 0; - bottom: 0; - left: 0; - right: 0; - z-index: -1; - content: ' '; - background-color: rgba(0, 0, 0, 0.4); - } */ - - /* 삼각형 입니다 ^^ - &:before { - content: ''; - position: absolute; - border-style: solid; - border-width: 0 14px 15px; - border-color: #ffffff transparent; - display: block; - width: 0; - z-index: 0; - top: -14px; - right: 16px; - } - - &:after { - content: ''; - position: absolute; - border-style: solid; - border-width: 0 14px 15px; - border-color: #ffffff transparent; - display: block; - width: 0; - z-index: 0; - top: -14px; - right: 16px; - } */ - - & li { - height: 4rem; - display: flex; - align-items: center; - padding: 0 0.8rem; - width: 100%; - - & > * { - width: 100%; - font-size: 1.4rem; - font-weight: 500; - color: ${COLOR.DARK_GRAY_900}; - transition: font-size 0.1s ease; - text-align: left; - } - } - - & li:not(:last-child) { - border-bottom: 0.7px solid ${COLOR.LIGHT_GRAY_700}; - } - - /* & li:hover { - & > * { - font-size: 2.2rem; - } - } */ -`; - -export { Container }; diff --git a/frontend/src/components/DropdownMenu/DropdownMenu.styles.tsx b/frontend/src/components/DropdownMenu/DropdownMenu.styles.tsx new file mode 100644 index 000000000..499ae1e5a --- /dev/null +++ b/frontend/src/components/DropdownMenu/DropdownMenu.styles.tsx @@ -0,0 +1,42 @@ +import styled from '@emotion/styled'; +import COLOR from '../../constants/color'; + +const Container = styled.div<{ css: {} }>` + height: fit-content; + max-height: 32rem; + white-space: nowrap; + overflow-y: auto; + background-color: ${COLOR.WHITE}; + border-radius: 1.2rem; + box-shadow: 0px 0px 6px ${COLOR.BLACK_OPACITY_300}; + padding: 1rem 1.2rem; + position: absolute; + z-index: 100; + + && { + ${(props) => props.css} + } + + & li { + height: 4rem; + display: flex; + align-items: center; + padding: 0 0.8rem; + width: 100%; + + & > * { + width: 100%; + font-size: 1.4rem; + font-weight: 500; + color: ${COLOR.DARK_GRAY_900}; + transition: font-size 0.1s ease; + text-align: left; + } + } + + & li:not(:last-child) { + border-bottom: 0.7px solid ${COLOR.LIGHT_GRAY_700}; + } +`; + +export { Container }; diff --git a/frontend/src/components/DropdownMenu/DropdownMenu.tsx b/frontend/src/components/DropdownMenu/DropdownMenu.tsx new file mode 100644 index 000000000..9e7c59218 --- /dev/null +++ b/frontend/src/components/DropdownMenu/DropdownMenu.tsx @@ -0,0 +1,19 @@ +import PropTypes from 'prop-types'; +import { Container } from './DropdownMenu.styles'; +import { SerializedStyles } from '@emotion/react'; + +interface DropdownMenuProps { + children?: React.ReactNode; + css?: SerializedStyles; + cssProps?: SerializedStyles; +} + +const DropdownMenu = ({ children, cssProps, css }: DropdownMenuProps) => { + return css && {children}; +}; + +DropdownMenu.propTypes = { + children: PropTypes.node, +}; + +export default DropdownMenu; From 49933fedbf8ebdbd062794c92fc504d01e849655 Mon Sep 17 00:00:00 2001 From: Dain Lee Date: Mon, 10 Jul 2023 15:39:56 +0900 Subject: [PATCH 14/28] =?UTF-8?q?refactor:=20=ED=95=84=EC=9A=94=EC=97=86?= =?UTF-8?q?=EB=8A=94=20=EC=BD=94=EB=93=9C=20=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/Card/Card.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/frontend/src/components/Card/Card.tsx b/frontend/src/components/Card/Card.tsx index 5fb05d13a..b5aedcade 100644 --- a/frontend/src/components/Card/Card.tsx +++ b/frontend/src/components/Card/Card.tsx @@ -1,4 +1,3 @@ -// import PropTypes from 'prop-types'; import { SerializedStyles } from '@emotion/react'; import { Container, Title } from './Card.styles'; @@ -7,7 +6,7 @@ interface Props { title?: string; size: string; cssProps?: SerializedStyles; - css?: SerializedStyles ; + css?: SerializedStyles; onClick?: () => void; } From dd4889939fd3b0373c4672a276e809522a5b6c20 Mon Sep 17 00:00:00 2001 From: d0dam Date: Mon, 17 Jul 2023 14:01:37 +0900 Subject: [PATCH 15/28] =?UTF-8?q?refactor:=20=20Constant=20=ED=8C=8C?= =?UTF-8?q?=EC=9D=BC=20ts=20=ED=8C=8C=EC=9D=BC=EB=A1=9C=20=EB=B3=80?= =?UTF-8?q?=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit #1344 #1372 --- frontend/src/configs/{environment.js => environment.ts} | 0 frontend/src/constants/{errorCode.js => errorCode.ts} | 0 frontend/src/constants/{index.js => index.ts} | 0 frontend/src/constants/{input.js => input.ts} | 0 frontend/src/constants/{localStorage.js => localStorage.ts} | 0 frontend/src/constants/{message.js => message.ts} | 0 frontend/src/constants/{path.js => path.ts} | 0 frontend/src/constants/{profilePageMenu.js => profilePageMenu.ts} | 0 frontend/src/constants/{reactQueryKey.js => reactQueryKey.ts} | 0 frontend/src/constants/{requestType.js => requestType.ts} | 0 frontend/src/constants/{screenSize.js => screenSize.ts} | 0 11 files changed, 0 insertions(+), 0 deletions(-) rename frontend/src/configs/{environment.js => environment.ts} (100%) rename frontend/src/constants/{errorCode.js => errorCode.ts} (100%) rename frontend/src/constants/{index.js => index.ts} (100%) rename frontend/src/constants/{input.js => input.ts} (100%) rename frontend/src/constants/{localStorage.js => localStorage.ts} (100%) rename frontend/src/constants/{message.js => message.ts} (100%) rename frontend/src/constants/{path.js => path.ts} (100%) rename frontend/src/constants/{profilePageMenu.js => profilePageMenu.ts} (100%) rename frontend/src/constants/{reactQueryKey.js => reactQueryKey.ts} (100%) rename frontend/src/constants/{requestType.js => requestType.ts} (100%) rename frontend/src/constants/{screenSize.js => screenSize.ts} (100%) diff --git a/frontend/src/configs/environment.js b/frontend/src/configs/environment.ts similarity index 100% rename from frontend/src/configs/environment.js rename to frontend/src/configs/environment.ts diff --git a/frontend/src/constants/errorCode.js b/frontend/src/constants/errorCode.ts similarity index 100% rename from frontend/src/constants/errorCode.js rename to frontend/src/constants/errorCode.ts diff --git a/frontend/src/constants/index.js b/frontend/src/constants/index.ts similarity index 100% rename from frontend/src/constants/index.js rename to frontend/src/constants/index.ts diff --git a/frontend/src/constants/input.js b/frontend/src/constants/input.ts similarity index 100% rename from frontend/src/constants/input.js rename to frontend/src/constants/input.ts diff --git a/frontend/src/constants/localStorage.js b/frontend/src/constants/localStorage.ts similarity index 100% rename from frontend/src/constants/localStorage.js rename to frontend/src/constants/localStorage.ts diff --git a/frontend/src/constants/message.js b/frontend/src/constants/message.ts similarity index 100% rename from frontend/src/constants/message.js rename to frontend/src/constants/message.ts diff --git a/frontend/src/constants/path.js b/frontend/src/constants/path.ts similarity index 100% rename from frontend/src/constants/path.js rename to frontend/src/constants/path.ts diff --git a/frontend/src/constants/profilePageMenu.js b/frontend/src/constants/profilePageMenu.ts similarity index 100% rename from frontend/src/constants/profilePageMenu.js rename to frontend/src/constants/profilePageMenu.ts diff --git a/frontend/src/constants/reactQueryKey.js b/frontend/src/constants/reactQueryKey.ts similarity index 100% rename from frontend/src/constants/reactQueryKey.js rename to frontend/src/constants/reactQueryKey.ts diff --git a/frontend/src/constants/requestType.js b/frontend/src/constants/requestType.ts similarity index 100% rename from frontend/src/constants/requestType.js rename to frontend/src/constants/requestType.ts diff --git a/frontend/src/constants/screenSize.js b/frontend/src/constants/screenSize.ts similarity index 100% rename from frontend/src/constants/screenSize.js rename to frontend/src/constants/screenSize.ts From 19955dbc3ee410d5d556f0530fa0e016b5fc84fb Mon Sep 17 00:00:00 2001 From: d0dam Date: Mon, 17 Jul 2023 15:05:17 +0900 Subject: [PATCH 16/28] =?UTF-8?q?refactor:=20=20App,=20index,=20GlobalStyl?= =?UTF-8?q?es=20=ED=8C=8C=EC=9D=BC=20ts=20=ED=8C=8C=EC=9D=BC=EB=A1=9C=20?= =?UTF-8?q?=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit #1344 #1372 --- frontend/src/{App.js => App.tsx} | 0 frontend/src/GlobalStyles.js | 116 -------------------------- frontend/src/GlobalStyles.tsx | 118 +++++++++++++++++++++++++++ frontend/src/{index.js => index.tsx} | 0 4 files changed, 118 insertions(+), 116 deletions(-) rename frontend/src/{App.js => App.tsx} (100%) delete mode 100644 frontend/src/GlobalStyles.js create mode 100644 frontend/src/GlobalStyles.tsx rename frontend/src/{index.js => index.tsx} (100%) diff --git a/frontend/src/App.js b/frontend/src/App.tsx similarity index 100% rename from frontend/src/App.js rename to frontend/src/App.tsx diff --git a/frontend/src/GlobalStyles.js b/frontend/src/GlobalStyles.js deleted file mode 100644 index 109073019..000000000 --- a/frontend/src/GlobalStyles.js +++ /dev/null @@ -1,116 +0,0 @@ -import { css, Global } from '@emotion/react'; -import COLOR from './constants/color'; - -const GlobalStyles = () => { - const scrollbarWidth = window.innerWidth - document.body.clientWidth; - - return -}; - -export default GlobalStyles; diff --git a/frontend/src/GlobalStyles.tsx b/frontend/src/GlobalStyles.tsx new file mode 100644 index 000000000..9ad1120c2 --- /dev/null +++ b/frontend/src/GlobalStyles.tsx @@ -0,0 +1,118 @@ +import { css, Global } from '@emotion/react'; +import COLOR from './constants/color'; + +const GlobalStyles = () => { + const scrollbarWidth = window.innerWidth - document.body.clientWidth; + + return ( + + ); +}; + +export default GlobalStyles; diff --git a/frontend/src/index.js b/frontend/src/index.tsx similarity index 100% rename from frontend/src/index.js rename to frontend/src/index.tsx From ba9312beb7e8bdfc115e2c072ac0e63d56a307c4 Mon Sep 17 00:00:00 2001 From: d0dam Date: Mon, 17 Jul 2023 15:32:15 +0900 Subject: [PATCH 17/28] =?UTF-8?q?refactor:=20=20prettierrc=20=EC=84=A4?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/.prettierrc | 8 +- frontend/src/components/Calendar/Calendar.tsx | 331 +++++++++--------- 2 files changed, 169 insertions(+), 170 deletions(-) diff --git a/frontend/.prettierrc b/frontend/.prettierrc index e9eb8060d..cf52c1996 100644 --- a/frontend/.prettierrc +++ b/frontend/.prettierrc @@ -1,5 +1,7 @@ { - "printWidth": 100, - "singleQuote": true, - "endOfLine": "auto" + "printWidth": 100, + "singleQuote": true, + "endOfLine": "auto", + "tabWidth": 2, + "useTabs": false } diff --git a/frontend/src/components/Calendar/Calendar.tsx b/frontend/src/components/Calendar/Calendar.tsx index 160c40051..7aca68fb2 100644 --- a/frontend/src/components/Calendar/Calendar.tsx +++ b/frontend/src/components/Calendar/Calendar.tsx @@ -1,28 +1,28 @@ import { useEffect, useState } from 'react'; import { - CalendarWrapper, - Year, - Month, - Week, - Day, - Container, - Header, - WeekWrapper, - DayWrapper, - ListItem, - TitleList, - MoreTitle, + CalendarWrapper, + Year, + Month, + Week, + Day, + Container, + Header, + WeekWrapper, + DayWrapper, + ListItem, + TitleList, + MoreTitle, } from './Calendar.styles'; import { ReactComponent as ArrowIcon } from '../../assets/images/right-arrow-angle.svg'; import { requestGetCalendar } from '../../service/requests'; import { useParams } from 'react-router'; const getStartDayOfMonth = (year: number, month: number) => { - return new Date(year, month, 1).getDay(); + return new Date(year, month, 1).getDay(); }; const isLeapYear = (year: number) => { - return (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0; + return (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0; }; const DAYS = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]; @@ -31,164 +31,161 @@ const WEEK = ['일', '월', '화', '수', '목', '금', '토']; const MONTHS = ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12']; interface CalenderProps { - newDate: { - year: number; - month: number; - day: number; - }; - onClick: (year: number, month: number, day: number) => void; - selectedDay: number; - setSelectedDay: React.Dispatch>; + newDate: { + year: number; + month: number; + day: number; + }; + onClick: (year: number, month: number, day: number) => void; + selectedDay: number; + setSelectedDay: React.Dispatch>; } const Calendar = ({ newDate, onClick, selectedDay = -1, setSelectedDay }: CalenderProps) => { - const today = newDate ? new Date(newDate.year, newDate.month - 1, newDate.day) : new Date(); - - const [date, setDate] = useState(today); - const [currentMonth, setCurrentMonth] = useState(date.getMonth()); - const [currentYear, setCurrentYear] = useState(date.getFullYear()); - const [startDay, setStartDay] = useState(getStartDayOfMonth(currentYear, currentMonth)); - // any type 수정 필요 - const [titleList, setTitleList] = useState([]); - const [titleListIndex, setTitleListIndex] = useState(null); - - const { username } = useParams<{ username: string }>(); - - const days = isLeapYear(currentYear) ? DAYS_LEAP : DAYS; - - useEffect(() => { - const getCalendar = async () => { - try { - const response = await requestGetCalendar(currentYear, currentMonth + 1, username); - - const { data: titleData } = await response.json(); - - const data: number[] = []; - - [...Array(days[currentMonth])].forEach((_, index) => { - const day = index + 1; - - const firstIndex: number = titleData.findIndex( - ({ createdAt }) => day === Number(createdAt.slice(8, 10)) - ); - - const lastIndex: number = titleData.findIndex( - ({ createdAt }) => day < Number(createdAt.slice(8, 10)) - ); - - const filteredData = - firstIndex !== -1 - ? titleData.slice( - firstIndex, - lastIndex === -1 ? titleData.length : lastIndex - ) - : []; - - data.push(filteredData); - }); - - setTitleList(data); - } catch (error) { - console.error(error); - } - }; - - getCalendar(); - }, [currentYear, currentMonth, username, days]); - - useEffect(() => { - const year = date.getFullYear(); - const month = date.getMonth(); - - setCurrentMonth(month); - setCurrentYear(year); - setStartDay(getStartDayOfMonth(year, month)); - }, [date]); - - return ( - -
- -
- {currentYear} - {MONTHS[currentMonth]} -
- +
+ {currentYear} + {MONTHS[currentMonth]} +
+ +
+ + + {WEEK.map((week) => ( + + + {week} + + + ))} + + + {[...Array(days[currentMonth] + startDay)].map((_, index: number) => { + const day = index - (startDay - 1); + const isSunday = index % 7 === 0; + const isThursday = index % 7 === 4; + const isFriday = index % 7 === 5; + const isSaturday = index % 7 === 6; + + const targetTitleList = titleList[day - 1] ?? []; + + return ( + + {index === titleListIndex && targetTitleList.length > 0 && ( + + {targetTitleList.map(({ title, id }, index) => { + if (index >= 3) return null; + + return
{title}
; + })} + {targetTitleList.length > 3 && ( + 외 {targetTitleList.length - 3}개 + )} + + )} + {day > 0 && ( + setTitleListIndex(index)} + onMouseLeave={() => setTitleListIndex(null)} onClick={() => { - setDate(new Date(currentYear, currentMonth + 1, 1)); - setSelectedDay(-1); + onClick(currentYear, currentMonth + 1, day); + setSelectedDay(day); }} - > - - - - - - {WEEK.map((week) => ( - - - {week} - - - ))} - - - {[...Array(days[currentMonth] + startDay)].map((_, index: number) => { - const day = index - (startDay - 1); - const isSunday = index % 7 === 0; - const isThursday = index % 7 === 4; - const isFriday = index % 7 === 5; - const isSaturday = index % 7 === 6; - - const targetTitleList = titleList[day - 1] ?? []; - - return ( - - {index === titleListIndex && targetTitleList.length > 0 && ( - - {targetTitleList.map(({ title, id }, index) => { - if (index >= 3) return null; - - return
{title}
; - })} - {targetTitleList.length > 3 && ( - 외 {targetTitleList.length - 3}개 - )} - - )} - {day > 0 && ( - setTitleListIndex(index)} - onMouseLeave={() => setTitleListIndex(null)} - onClick={() => { - onClick(currentYear, currentMonth + 1, day); - setSelectedDay(day); - }} - count={targetTitleList.length} - > - {day} - - )} - - ); - })} - - - - ); + count={targetTitleList.length} + > + {day} + + )} + + ); + })} + + + + ); }; export default Calendar; From a9123c212cdec5f73b43e50db0e6e88285536a0c Mon Sep 17 00:00:00 2001 From: d0dam Date: Mon, 17 Jul 2023 15:36:19 +0900 Subject: [PATCH 18/28] =?UTF-8?q?refactor:=20js=20=ED=8C=8C=EC=9D=BC=20?= =?UTF-8?q?=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/GlobalStyles.js | 117 ----------------------------------- 1 file changed, 117 deletions(-) delete mode 100644 frontend/src/GlobalStyles.js diff --git a/frontend/src/GlobalStyles.js b/frontend/src/GlobalStyles.js deleted file mode 100644 index 9681420af..000000000 --- a/frontend/src/GlobalStyles.js +++ /dev/null @@ -1,117 +0,0 @@ -import { css, Global } from '@emotion/react'; -import COLOR from './constants/color'; -import MEDIA_QUERY from './constants/mediaQuery'; - -const GlobalStyles = () => { - const scrollbarWidth = window.innerWidth - document.body.clientWidth; - - return -}; - -export default GlobalStyles; From 9311017b5c19e30f1bfddfdeb7f9f215e6ced909 Mon Sep 17 00:00:00 2001 From: DOBOB_LAPTOP Date: Wed, 19 Jul 2023 17:57:24 +0900 Subject: [PATCH 19/28] =?UTF-8?q?fix:=20api=20=EB=AA=85=EC=84=B8=EC=99=80?= =?UTF-8?q?=20=EB=A7=9E=EC=A7=80=EC=95=8A=EC=95=98=EB=8D=98=20type=20?= =?UTF-8?q?=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/models/Article.ts | 2 +- frontend/src/pages/NewArticlePage/index.tsx | 10 +++++----- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/frontend/src/models/Article.ts b/frontend/src/models/Article.ts index dea7df2c6..20be3771f 100644 --- a/frontend/src/models/Article.ts +++ b/frontend/src/models/Article.ts @@ -1,7 +1,7 @@ export interface ArticleRequest { title: string; - link: string; + url: string; } export interface ArticleType { diff --git a/frontend/src/pages/NewArticlePage/index.tsx b/frontend/src/pages/NewArticlePage/index.tsx index 3f81a1a7a..c1765eb52 100644 --- a/frontend/src/pages/NewArticlePage/index.tsx +++ b/frontend/src/pages/NewArticlePage/index.tsx @@ -17,7 +17,7 @@ import { PATH } from '../../constants'; const NewArticlePage = () => { const [articleContent, setArticleContent] = useState({ title: '', - link: '', + url: '', }); const history = useHistory(); @@ -28,8 +28,8 @@ const NewArticlePage = () => { setArticleContent({ ...articleContent, title: e.target.value }); }; - const onArticleLinkChanged = (e: React.ChangeEvent) => { - setArticleContent({ ...articleContent, link: e.target.value }); + const onArticleUrlChanged = (e: React.ChangeEvent) => { + setArticleContent({ ...articleContent, url: e.target.value }); }; const createArticle = () => { @@ -51,9 +51,9 @@ const NewArticlePage = () => {