From 7916f5e7f2ff2168f7902da4575dc0374f624eb8 Mon Sep 17 00:00:00 2001 From: Patrick Date: Wed, 9 Aug 2023 17:03:19 +0900 Subject: [PATCH 01/21] =?UTF-8?q?refactor:=20article=20=EB=A1=9C=EA=B7=B8?= =?UTF-8?q?=EC=9D=B8=20=EC=8B=9C=EC=97=90=EB=A7=8C=20=EA=B8=80=EC=93=B0?= =?UTF-8?q?=EA=B8=B0=20=EB=B2=84=ED=8A=BC=20=ED=99=9C=EC=84=B1=ED=99=94=20?= =?UTF-8?q?=EB=90=98=EB=8F=84=EB=A1=9D=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/pages/ArticleListPage/index.tsx | 26 +++++++++++++------- 1 file changed, 17 insertions(+), 9 deletions(-) diff --git a/frontend/src/pages/ArticleListPage/index.tsx b/frontend/src/pages/ArticleListPage/index.tsx index 4c4f8cc2c..dee4145ae 100644 --- a/frontend/src/pages/ArticleListPage/index.tsx +++ b/frontend/src/pages/ArticleListPage/index.tsx @@ -7,23 +7,31 @@ import { useHistory } from 'react-router-dom'; import { PATH } from '../../constants'; import styled from '@emotion/styled'; import { MainContentStyle } from '../../PageRouter'; +import { useContext } from 'react'; +import { UserContext } from '../../contexts/UserProvider'; const ArticleListPage = () => { const history = useHistory(); + + const { user } = useContext(UserContext); + const { isLoggedIn } = user; + const goNewArticlePage = () => history.push(PATH.NEW_ARTICLE); return (
- + {isLoggedIn && ( + + )}
From 96151021b046261ac5fb9a8bd43cab42a0e01381 Mon Sep 17 00:00:00 2001 From: splitCoding Date: Fri, 11 Aug 2023 16:33:21 +0900 Subject: [PATCH 02/21] =?UTF-8?q?refactor:=20=EC=95=84=ED=8B=B0=ED=81=B4?= =?UTF-8?q?=20=EC=83=9D=EC=84=B1=EC=8B=9C=20CREW=20=EA=B6=8C=ED=95=9C=20?= =?UTF-8?q?=ED=99=95=EC=9D=B8=20=EB=A1=9C=EC=A7=81=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../article/application/ArticleService.java | 3 +++ .../prolog/common/exception/BadRequestCode.java | 5 +++-- .../article/application/ArticleServiceTest.java | 15 +++++++++++++++ 3 files changed, 21 insertions(+), 2 deletions(-) diff --git a/backend/src/main/java/wooteco/prolog/article/application/ArticleService.java b/backend/src/main/java/wooteco/prolog/article/application/ArticleService.java index b3b2d3054..8e25d4ae2 100644 --- a/backend/src/main/java/wooteco/prolog/article/application/ArticleService.java +++ b/backend/src/main/java/wooteco/prolog/article/application/ArticleService.java @@ -27,6 +27,9 @@ public class ArticleService { @Transactional public Long create(final ArticleRequest articleRequest, final LoginMember loginMember) { final Member member = memberService.findById(loginMember.getId()); + if (member.isAnonymous()) { + throw new BadRequestException(BadRequestCode.UNVALIDATED_MEMBER_EXCEPTION); + } final Article article = articleRequest.toArticle(member); return articleRepository.save(article).getId(); } diff --git a/backend/src/main/java/wooteco/prolog/common/exception/BadRequestCode.java b/backend/src/main/java/wooteco/prolog/common/exception/BadRequestCode.java index e5ff32781..d263b0792 100644 --- a/backend/src/main/java/wooteco/prolog/common/exception/BadRequestCode.java +++ b/backend/src/main/java/wooteco/prolog/common/exception/BadRequestCode.java @@ -88,8 +88,9 @@ public enum BadRequestCode { INVALID_ARTICLE_AUTHOR_EXCEPTION(12005, "INVALID_ARTICLE_AUTHOR_EXCEPTION"), ARTICLE_IMAGE_URL_NULL_OR_EMPTY_EXCEPTION(12006, "ARTICLE_IMAGE_URL_NULL_OR_EMPTY_EXCEPTION"), ARTICLE_IMAGE_URL_OVER_LENGTH_EXCEPTION(12007, "ARTICLE_IMAGE_URL_OVER_LENGTH_EXCEPTION"), - ARTICLE_INVALID_URL_EXCEPTION(12008, "ARTICLE_INVALID_URL_EXCEPTION"); - + ARTICLE_INVALID_URL_EXCEPTION(12008, "ARTICLE_INVALID_URL_EXCEPTION"), + UNVALIDATED_MEMBER_EXCEPTION(12009, "UNVALIDATED_MEMBER_EXCEPTION"); + private int code; private String message; } diff --git a/backend/src/test/java/wooteco/prolog/article/application/ArticleServiceTest.java b/backend/src/test/java/wooteco/prolog/article/application/ArticleServiceTest.java index 9c67907f1..b324068f3 100644 --- a/backend/src/test/java/wooteco/prolog/article/application/ArticleServiceTest.java +++ b/backend/src/test/java/wooteco/prolog/article/application/ArticleServiceTest.java @@ -59,6 +59,21 @@ void create_success() { verify(articleRepository).save(any()); } + @DisplayName("아티클 생성시 UNVALIDATED 권한일 경우 예외를 발생한다.") + @Test + void create_success_unAuthorized() { + //given + final ArticleRequest judyRequest = new ArticleRequest("title", "url", "imageUrl"); + final Member member = new Member(1L, "username", "nickname", Role.UNVALIDATED, 1L, "url"); + final LoginMember judyLogin = new LoginMember(1L, MEMBER); + + when(memberService.findById(any())).thenReturn(member); + + //when + assertThatThrownBy(() -> articleService.create(judyRequest, judyLogin)) + .isInstanceOf(BadRequestException.class); + } + @DisplayName("아티클을 수정한다.") @Test void update_success() { From b25ffaa2d1bc8a7eb2af6a350163e2d0bfb2b54a Mon Sep 17 00:00:00 2001 From: n0eyes Date: Fri, 1 Sep 2023 16:54:57 +0900 Subject: [PATCH 03/21] =?UTF-8?q?refactor:=20CreatableSelectBox=20js=20>?= =?UTF-8?q?=20ts=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 --- ...bleSelectBox.js => CreatableSelectBox.tsx} | 29 ++++++++++++++++++- 1 file changed, 28 insertions(+), 1 deletion(-) rename frontend/src/components/CreatableSelectBox/{CreatableSelectBox.js => CreatableSelectBox.tsx} (72%) diff --git a/frontend/src/components/CreatableSelectBox/CreatableSelectBox.js b/frontend/src/components/CreatableSelectBox/CreatableSelectBox.tsx similarity index 72% rename from frontend/src/components/CreatableSelectBox/CreatableSelectBox.js rename to frontend/src/components/CreatableSelectBox/CreatableSelectBox.tsx index da7ffc0d6..7793e11b5 100644 --- a/frontend/src/components/CreatableSelectBox/CreatableSelectBox.js +++ b/frontend/src/components/CreatableSelectBox/CreatableSelectBox.tsx @@ -1,6 +1,7 @@ import CreatableSelect from 'react-select/creatable'; import COLOR from '../../constants/color'; +import { Tag } from '../../models/Studylogs'; const selectStyles = { container: (styles) => ({ @@ -34,7 +35,33 @@ const selectStyles = { menu: (styles) => ({ ...styles, fontSize: '1.4rem', fontColor: COLOR.DARK_GRAY_900 }), }; -const CreatableSelectBox = ({ isMulti = true, options, placeholder, onChange, ...props }) => ( +type Options = { + value: string, + label: string, +}[]; + +interface CreatableSelectBoxProps { + isMulti?: boolean; + placeholder: string; + options: Options; + onChange: ( + tags: Tag[], + actionMeta: { + option: { + label: string, + }, + } + ) => void; + value: Options; +} + +const CreatableSelectBox = ({ + isMulti = true, + options, + placeholder, + onChange, + ...props +}: CreatableSelectBoxProps) => ( Date: Fri, 1 Sep 2023 16:57:38 +0900 Subject: [PATCH 04/21] =?UTF-8?q?refactor:=20/SearchBar=20js=20>=20ts=20?= =?UTF-8?q?=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 --- .../{SearchBar.styles.js => SearchBar.styles.tsx} | 5 ++++- .../SearchBar/{SearchBar.js => SearchBar.tsx} | 11 ++++++++++- 2 files changed, 14 insertions(+), 2 deletions(-) rename frontend/src/components/SearchBar/{SearchBar.styles.js => SearchBar.styles.tsx} (85%) rename frontend/src/components/SearchBar/{SearchBar.js => SearchBar.tsx} (58%) diff --git a/frontend/src/components/SearchBar/SearchBar.styles.js b/frontend/src/components/SearchBar/SearchBar.styles.tsx similarity index 85% rename from frontend/src/components/SearchBar/SearchBar.styles.js rename to frontend/src/components/SearchBar/SearchBar.styles.tsx index c1a1e03d7..5b28d146d 100644 --- a/frontend/src/components/SearchBar/SearchBar.styles.js +++ b/frontend/src/components/SearchBar/SearchBar.styles.tsx @@ -1,7 +1,10 @@ import styled from '@emotion/styled'; import COLOR from '../../constants/color'; +import { css } from '@emotion/react'; -const Container = styled.div` +const Container = styled.div<{ + css: ReturnType; +}>` background-color: ${COLOR.LIGHT_GRAY_100}; height: 4.8rem; width: 36rem; diff --git a/frontend/src/components/SearchBar/SearchBar.js b/frontend/src/components/SearchBar/SearchBar.tsx similarity index 58% rename from frontend/src/components/SearchBar/SearchBar.js rename to frontend/src/components/SearchBar/SearchBar.tsx index e7f2c2cb3..9a241ee79 100644 --- a/frontend/src/components/SearchBar/SearchBar.js +++ b/frontend/src/components/SearchBar/SearchBar.tsx @@ -1,8 +1,17 @@ import Button from '../Button/Button'; import SearchIcon from '../../assets/images/search_icon.svg'; import { Container } from './SearchBar.styles'; +import { css } from '@emotion/react'; +import { ChangeEventHandler, FormEventHandler } from 'react'; -const SearchBar = ({ css, onSubmit, onChange, value }) => { +interface SearchBarProps { + onSubmit?: FormEventHandler; + onChange: ChangeEventHandler; + css: ReturnType; + value: string; +} + +const SearchBar = ({ css, onSubmit, onChange, value }: SearchBarProps) => { return (
From dae285611de75b2fd0fa51a84ca576da747e485c Mon Sep 17 00:00:00 2001 From: d0dam Date: Fri, 1 Sep 2023 17:21:15 +0900 Subject: [PATCH 05/21] =?UTF-8?q?refactor:=20js=20ts=20=EB=A7=88=EC=9D=B4?= =?UTF-8?q?=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 --- .../{NotFound.styles.js => NotFound.styles.ts} | 0 .../components/NotFound/{NotFound.js => NotFound.tsx} | 1 - ...eSideBar.styles.js => ProfilePageSideBar.styles.ts} | 2 +- .../{ProfilePageSideBar.js => ProfilePageSideBar.tsx} | 10 +++++++--- .../{SelectBox.styles.js => SelectBox.styles.ts} | 8 ++++---- .../SelectBox/{SelectBox.js => SelectBox.tsx} | 4 ++-- .../{useCustomSelectBox.js => useCustomSelectBox.ts} | 10 +++++++--- 7 files changed, 21 insertions(+), 14 deletions(-) rename frontend/src/components/NotFound/{NotFound.styles.js => NotFound.styles.ts} (100%) rename frontend/src/components/NotFound/{NotFound.js => NotFound.tsx} (94%) rename frontend/src/components/ProfilePageSideBar/{ProfilePageSideBar.styles.js => ProfilePageSideBar.styles.ts} (98%) rename frontend/src/components/ProfilePageSideBar/{ProfilePageSideBar.js => ProfilePageSideBar.tsx} (94%) rename frontend/src/components/SelectBox/{SelectBox.styles.js => SelectBox.styles.ts} (90%) rename frontend/src/components/SelectBox/{SelectBox.js => SelectBox.tsx} (93%) rename frontend/src/hooks/{useCustomSelectBox.js => useCustomSelectBox.ts} (67%) diff --git a/frontend/src/components/NotFound/NotFound.styles.js b/frontend/src/components/NotFound/NotFound.styles.ts similarity index 100% rename from frontend/src/components/NotFound/NotFound.styles.js rename to frontend/src/components/NotFound/NotFound.styles.ts diff --git a/frontend/src/components/NotFound/NotFound.js b/frontend/src/components/NotFound/NotFound.tsx similarity index 94% rename from frontend/src/components/NotFound/NotFound.js rename to frontend/src/components/NotFound/NotFound.tsx index f8609c2b0..3f3bcf339 100644 --- a/frontend/src/components/NotFound/NotFound.js +++ b/frontend/src/components/NotFound/NotFound.tsx @@ -1,4 +1,3 @@ -import React from 'react'; import Lottie from 'react-lottie'; import { NotFoundAnimation } from '../../assets/lotties'; import { Container } from './NotFound.styles'; diff --git a/frontend/src/components/ProfilePageSideBar/ProfilePageSideBar.styles.js b/frontend/src/components/ProfilePageSideBar/ProfilePageSideBar.styles.ts similarity index 98% rename from frontend/src/components/ProfilePageSideBar/ProfilePageSideBar.styles.js rename to frontend/src/components/ProfilePageSideBar/ProfilePageSideBar.styles.ts index 4a6a5fa7b..a7f40fa8c 100644 --- a/frontend/src/components/ProfilePageSideBar/ProfilePageSideBar.styles.js +++ b/frontend/src/components/ProfilePageSideBar/ProfilePageSideBar.styles.ts @@ -79,7 +79,7 @@ const MenuList = styled.ul` } `; -const MenuItem = styled.li` +const MenuItem = styled.li<{ isSelectedMenu: boolean }>` height: 4rem; display: flex; align-items: center; diff --git a/frontend/src/components/ProfilePageSideBar/ProfilePageSideBar.js b/frontend/src/components/ProfilePageSideBar/ProfilePageSideBar.tsx similarity index 94% rename from frontend/src/components/ProfilePageSideBar/ProfilePageSideBar.js rename to frontend/src/components/ProfilePageSideBar/ProfilePageSideBar.tsx index 571f1f078..b923b5f97 100644 --- a/frontend/src/components/ProfilePageSideBar/ProfilePageSideBar.js +++ b/frontend/src/components/ProfilePageSideBar/ProfilePageSideBar.tsx @@ -22,9 +22,13 @@ import { NicknameInput, } from './ProfilePageSideBar.styles'; -const ProfilePageSideBar = ({ menu }) => { +interface ProfilePageSideBarProps { + menu: string; +} + +const ProfilePageSideBar = ({ menu }: ProfilePageSideBarProps) => { const history = useHistory(); - const { username } = useParams(); + const { username } = useParams<{ username: string }>(); const { user: loginUser } = useContext(UserContext); const { accessToken, username: loginUsername } = loginUser; @@ -105,7 +109,7 @@ const ProfilePageSideBar = ({ menu }) => { {isLoading ? <> : } {getMenuList({ username, isOwner }).map((menuItem) => ( - + ` position: relative; display: inline-block; width: ${({ width }) => width ?? `${width}`}; @@ -31,7 +31,7 @@ const Label = styled.label` } `; -const Select = styled.select` +const Select = styled.select<{ fontSize: string }>` padding: 1rem 2rem; width: 100%; @@ -47,7 +47,7 @@ const Select = styled.select` appearance: none; `; -const SelectItemList = styled.ul` +const SelectItemList = styled.ul<{ maxHeight: string }>` position: absolute; top: 0; width: 100%; @@ -79,7 +79,7 @@ const SelectItemList = styled.ul` } `; -const SelectItem = styled.li` +const SelectItem = styled.li<{ fontSize: string; isSelected: boolean }>` display: flex; align-items: center; padding: 1rem 2rem; diff --git a/frontend/src/components/SelectBox/SelectBox.js b/frontend/src/components/SelectBox/SelectBox.tsx similarity index 93% rename from frontend/src/components/SelectBox/SelectBox.js rename to frontend/src/components/SelectBox/SelectBox.tsx index abf84c874..77b780169 100644 --- a/frontend/src/components/SelectBox/SelectBox.js +++ b/frontend/src/components/SelectBox/SelectBox.tsx @@ -18,7 +18,7 @@ const SelectBox = ({ const $label = useRef(null); const $selectorContainer = useRef(null); - const [isSelectBoxOpened, setIsSelectBoxOpened] = useCustomSelectBox({ targetRef: $label }); + const { isSelectBoxOpened, setIsSelectBoxOpened } = useCustomSelectBox({ targetRef: $label }); useScrollToSelected({ container: $selectorContainer, @@ -33,7 +33,7 @@ const SelectBox = ({ } }, [options]); - const onSelectItem = (event, option) => { + const onSelectItem = (event, option = null) => { event.stopPropagation(); option ? setSelectedOption(option) : setSelectedOption(event.target.value); diff --git a/frontend/src/hooks/useCustomSelectBox.js b/frontend/src/hooks/useCustomSelectBox.ts similarity index 67% rename from frontend/src/hooks/useCustomSelectBox.js rename to frontend/src/hooks/useCustomSelectBox.ts index 1e60e8914..df561abdf 100644 --- a/frontend/src/hooks/useCustomSelectBox.js +++ b/frontend/src/hooks/useCustomSelectBox.ts @@ -1,7 +1,11 @@ import { useEffect, useState } from 'react'; -const useCustomSelectBox = ({ targetRef }) => { - const [isSelectBoxOpened, setIsSelectBoxOpened] = useState(false); +interface Params { + targetRef: React.MutableRefObject; +} + +const useCustomSelectBox = ({ targetRef }: Params) => { + const [isSelectBoxOpened, setIsSelectBoxOpened] = useState(false); useEffect(() => { const onCloseOptionList = (event) => { @@ -21,7 +25,7 @@ const useCustomSelectBox = ({ targetRef }) => { }; }, [isSelectBoxOpened, targetRef]); - return [isSelectBoxOpened, setIsSelectBoxOpened]; + return { isSelectBoxOpened, setIsSelectBoxOpened }; }; export default useCustomSelectBox; From 5e8a6f6f4a282a50de7c6e349b65810ca25383bb Mon Sep 17 00:00:00 2001 From: n0eyes Date: Fri, 1 Sep 2023 17:22:59 +0900 Subject: [PATCH 06/21] =?UTF-8?q?feat:=20useValidParams=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/hooks/useValidParams.ts | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) create mode 100644 frontend/src/hooks/useValidParams.ts diff --git a/frontend/src/hooks/useValidParams.ts b/frontend/src/hooks/useValidParams.ts new file mode 100644 index 000000000..5b4b35be7 --- /dev/null +++ b/frontend/src/hooks/useValidParams.ts @@ -0,0 +1,17 @@ +import { useParams } from 'react-router-dom'; + +type Params = { + [key in Key]: string; +}; + +export const useValidParams = (paramKeys: T[]): Readonly> => { + const params = useParams>>(); + const validParams = paramKeys.reduce((acc, key) => { + if (!(key in params)) throw new Error(`Param '${key}' not found`); + if (!params[key]) throw new Error('Invalid Params'); + + return { ...acc, [key]: params[key] }; + }, {} as Readonly>); + + return validParams; +}; From 876939a3d43c094aa98cbdbdb38fe678341bf9b0 Mon Sep 17 00:00:00 2001 From: n0eyes Date: Fri, 1 Sep 2023 17:25:53 +0900 Subject: [PATCH 07/21] =?UTF-8?q?feat:=20useValidQueryString=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/hooks/useValidQueryString.ts | 23 +++++++++++++++++++++++ frontend/src/utils/arrayMutation.ts | 8 ++++++++ 2 files changed, 31 insertions(+) create mode 100644 frontend/src/hooks/useValidQueryString.ts create mode 100644 frontend/src/utils/arrayMutation.ts diff --git a/frontend/src/hooks/useValidQueryString.ts b/frontend/src/hooks/useValidQueryString.ts new file mode 100644 index 000000000..10d0a0baf --- /dev/null +++ b/frontend/src/hooks/useValidQueryString.ts @@ -0,0 +1,23 @@ +import { useLocation } from 'react-router-dom'; +import { arrayMutation } from '../utils/arrayMutation'; + +const getValidQueries = (search: string, queryKeys: Readonly) => + search + .replace(/^\?/, '') + .split('&') + .reduce>>((queries, keyValue, _, search) => { + const [key, value] = keyValue.split('='); + const includes = arrayMutation(queryKeys, 'includes'); + + if (Object.hasOwn(queries, key)) { + throw new Error('Duplicated query'); + } + + return includes(key) ? { ...queries, [key]: value } : queries; + }, Object.create(Object.prototype)); + +const useValidQueryString = ( + queryKeys: Readonly +): Partial> => getValidQueries(useLocation().search, queryKeys); + +export default useValidQueryString; diff --git a/frontend/src/utils/arrayMutation.ts b/frontend/src/utils/arrayMutation.ts new file mode 100644 index 000000000..6c965ad9b --- /dev/null +++ b/frontend/src/utils/arrayMutation.ts @@ -0,0 +1,8 @@ +export const arrayMutation = >(arr: T, method: keyof T) => { + switch (method) { + case 'includes': + return (arg: unknown): boolean => arr.includes(arg); + default: + throw new Error('Invalid method'); + } +}; From 09c86e0501e17a133d4921cbb28517ea2b28067a Mon Sep 17 00:00:00 2001 From: Dain Lee Date: Fri, 1 Sep 2023 17:44:27 +0900 Subject: [PATCH 08/21] =?UTF-8?q?refactor:=20useSnackBar=20ts=EB=A1=9C=20?= =?UTF-8?q?=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 --- frontend/src/hooks/{useSnackBar.js => useSnackBar.tsx} | 3 ++- frontend/src/redux/reducers/{index.js => index.ts} | 0 .../reducers/{snackBarReducer.js => snackBarReducer.ts} | 6 +++++- 3 files changed, 7 insertions(+), 2 deletions(-) rename frontend/src/hooks/{useSnackBar.js => useSnackBar.tsx} (87%) rename frontend/src/redux/reducers/{index.js => index.ts} (100%) rename frontend/src/redux/reducers/{snackBarReducer.js => snackBarReducer.ts} (83%) diff --git a/frontend/src/hooks/useSnackBar.js b/frontend/src/hooks/useSnackBar.tsx similarity index 87% rename from frontend/src/hooks/useSnackBar.js rename to frontend/src/hooks/useSnackBar.tsx index ff93321a2..427eff650 100644 --- a/frontend/src/hooks/useSnackBar.js +++ b/frontend/src/hooks/useSnackBar.tsx @@ -3,10 +3,11 @@ import ReactDOM from 'react-dom'; import { useDispatch, useSelector } from 'react-redux'; import { default as SnackBarComponent } from '../components/@shared/SnackBar/SnackBar'; import { CLOSE_SNACKBAR, OPEN_SNACKBAR } from '../redux/actions/snackBarAction'; +import type { SnackBar } from '../redux/reducers/snackBarReducer'; const useSnackBar = () => { const dispatch = useDispatch(); - const { isSnackBarOpen, message } = useSelector((state) => state.snackBar); + const { isSnackBarOpen, message } = useSelector((state: SnackBar) => state); const SnackbarPortal = ({ children }) => ReactDOM.createPortal(children, document.getElementById('snackbar')); diff --git a/frontend/src/redux/reducers/index.js b/frontend/src/redux/reducers/index.ts similarity index 100% rename from frontend/src/redux/reducers/index.js rename to frontend/src/redux/reducers/index.ts diff --git a/frontend/src/redux/reducers/snackBarReducer.js b/frontend/src/redux/reducers/snackBarReducer.ts similarity index 83% rename from frontend/src/redux/reducers/snackBarReducer.js rename to frontend/src/redux/reducers/snackBarReducer.ts index cdc375e87..da2ef596c 100644 --- a/frontend/src/redux/reducers/snackBarReducer.js +++ b/frontend/src/redux/reducers/snackBarReducer.ts @@ -1,6 +1,10 @@ import { CLOSE_SNACKBAR, OPEN_SNACKBAR } from '../actions/snackBarAction'; +export interface SnackBar { + isSnackBarOpen: boolean; + message: string; +} -const initialState = { +const initialState: SnackBar = { isSnackBarOpen: false, message: '', }; From 30265f2135979005464c8eec3dea053e1f085a6b Mon Sep 17 00:00:00 2001 From: Dain Lee Date: Fri, 1 Sep 2023 17:47:14 +0900 Subject: [PATCH 09/21] =?UTF-8?q?refactor:=20`Tag`=20=ED=8F=B4=EB=8D=94=20?= =?UTF-8?q?ts=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 --- frontend/src/components/Tag/Tag.js | 18 ------------------ .../Tag/{Tag.styles.js => Tag.styles.ts} | 4 ++-- frontend/src/components/Tag/Tag.tsx | 17 +++++++++++++++++ frontend/src/components/{index.js => index.ts} | 0 frontend/src/redux/{store.js => store.ts} | 0 5 files changed, 19 insertions(+), 20 deletions(-) delete mode 100644 frontend/src/components/Tag/Tag.js rename frontend/src/components/Tag/{Tag.styles.js => Tag.styles.ts} (86%) create mode 100644 frontend/src/components/Tag/Tag.tsx rename frontend/src/components/{index.js => index.ts} (100%) rename frontend/src/redux/{store.js => store.ts} (100%) diff --git a/frontend/src/components/Tag/Tag.js b/frontend/src/components/Tag/Tag.js deleted file mode 100644 index edee08da9..000000000 --- a/frontend/src/components/Tag/Tag.js +++ /dev/null @@ -1,18 +0,0 @@ -import PropTypes from 'prop-types'; -import { Container, PostCount } from './Tag.styles'; - -const Tag = ({ id, name, postCount, selectedTagId, onClick }) => ( - - #{name} {postCount} - -); - -Tag.propTypes = { - id: PropTypes.number.isRequired, - name: PropTypes.string.isRequired, - postCount: PropTypes.number.isRequired, - selectedTagId: PropTypes.number.isRequired, - onClick: PropTypes.func.isRequired, -}; - -export default Tag; diff --git a/frontend/src/components/Tag/Tag.styles.js b/frontend/src/components/Tag/Tag.styles.ts similarity index 86% rename from frontend/src/components/Tag/Tag.styles.js rename to frontend/src/components/Tag/Tag.styles.ts index 3e5e278a9..a516cfeb9 100644 --- a/frontend/src/components/Tag/Tag.styles.js +++ b/frontend/src/components/Tag/Tag.styles.ts @@ -2,7 +2,7 @@ import { css } from '@emotion/react'; import styled from '@emotion/styled'; import COLOR from '../../constants/color'; -const Container = styled.div` +const Container = styled.div<{ isSelected: boolean }>` border: 0.1rem solid ${COLOR.LIGHT_GRAY_200}; width: fit-content; padding: 0.6rem 0.8rem; @@ -21,7 +21,7 @@ const Container = styled.div` `} `; -const PostCount = styled.span` +const PostCount = styled.span<{ isSelected: boolean }>` color: ${COLOR.LIGHT_GRAY_500}; margin-left: 0.4rem; diff --git a/frontend/src/components/Tag/Tag.tsx b/frontend/src/components/Tag/Tag.tsx new file mode 100644 index 000000000..e861d2c6a --- /dev/null +++ b/frontend/src/components/Tag/Tag.tsx @@ -0,0 +1,17 @@ +import { Container, PostCount } from './Tag.styles'; + +interface Props { + id: number; + name: string; + postCount: number; + selectedTagId: number; + onClick: () => void; +} + +const Tag = ({ id, name, postCount, selectedTagId, onClick }: Props) => ( + + #{name} {postCount} + +); + +export default Tag; \ No newline at end of file diff --git a/frontend/src/components/index.js b/frontend/src/components/index.ts similarity index 100% rename from frontend/src/components/index.js rename to frontend/src/components/index.ts diff --git a/frontend/src/redux/store.js b/frontend/src/redux/store.ts similarity index 100% rename from frontend/src/redux/store.js rename to frontend/src/redux/store.ts From 55f495807579dc54f33919d8522b14a087c6aeaf Mon Sep 17 00:00:00 2001 From: Dain Lee Date: Mon, 4 Sep 2023 15:37:23 +0900 Subject: [PATCH 10/21] =?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 --- .../hooks/{useFilterWithParams.js => useFilterWithParams.ts} | 0 frontend/src/hooks/{useNotFound.js => useNotFound.ts} | 0 frontend/src/pages/EssayAnswerPage/{Content.js => Content.tsx} | 0 frontend/src/pages/LevellogPage/{Content.js => Content.tsx} | 0 frontend/src/pages/LoginCallbackPage/{index.js => index.tsx} | 0 frontend/src/pages/ProfilePage/{index.js => index.tsx} | 3 +-- frontend/src/pages/ProfilePage/{styles.js => styles.ts} | 0 frontend/src/pages/ProfilePageAccount/{index.js => index.tsx} | 0 frontend/src/pages/ProfilePageScraps/{styles.js => styles.ts} | 0 .../src/pages/ProfilePageStudylogs/{styles.js => styles.ts} | 0 frontend/src/pages/{index.js => index.ts} | 0 .../src/redux/actions/{snackBarAction.js => snackBarAction.ts} | 0 frontend/src/styles/{markdown.styles.js => markdown.styles.ts} | 0 13 files changed, 1 insertion(+), 2 deletions(-) rename frontend/src/hooks/{useFilterWithParams.js => useFilterWithParams.ts} (100%) rename frontend/src/hooks/{useNotFound.js => useNotFound.ts} (100%) rename frontend/src/pages/EssayAnswerPage/{Content.js => Content.tsx} (100%) rename frontend/src/pages/LevellogPage/{Content.js => Content.tsx} (100%) rename frontend/src/pages/LoginCallbackPage/{index.js => index.tsx} (100%) rename frontend/src/pages/ProfilePage/{index.js => index.tsx} (98%) rename frontend/src/pages/ProfilePage/{styles.js => styles.ts} (100%) rename frontend/src/pages/ProfilePageAccount/{index.js => index.tsx} (100%) rename frontend/src/pages/ProfilePageScraps/{styles.js => styles.ts} (100%) rename frontend/src/pages/ProfilePageStudylogs/{styles.js => styles.ts} (100%) rename frontend/src/pages/{index.js => index.ts} (100%) rename frontend/src/redux/actions/{snackBarAction.js => snackBarAction.ts} (100%) rename frontend/src/styles/{markdown.styles.js => markdown.styles.ts} (100%) diff --git a/frontend/src/hooks/useFilterWithParams.js b/frontend/src/hooks/useFilterWithParams.ts similarity index 100% rename from frontend/src/hooks/useFilterWithParams.js rename to frontend/src/hooks/useFilterWithParams.ts diff --git a/frontend/src/hooks/useNotFound.js b/frontend/src/hooks/useNotFound.ts similarity index 100% rename from frontend/src/hooks/useNotFound.js rename to frontend/src/hooks/useNotFound.ts diff --git a/frontend/src/pages/EssayAnswerPage/Content.js b/frontend/src/pages/EssayAnswerPage/Content.tsx similarity index 100% rename from frontend/src/pages/EssayAnswerPage/Content.js rename to frontend/src/pages/EssayAnswerPage/Content.tsx diff --git a/frontend/src/pages/LevellogPage/Content.js b/frontend/src/pages/LevellogPage/Content.tsx similarity index 100% rename from frontend/src/pages/LevellogPage/Content.js rename to frontend/src/pages/LevellogPage/Content.tsx diff --git a/frontend/src/pages/LoginCallbackPage/index.js b/frontend/src/pages/LoginCallbackPage/index.tsx similarity index 100% rename from frontend/src/pages/LoginCallbackPage/index.js rename to frontend/src/pages/LoginCallbackPage/index.tsx diff --git a/frontend/src/pages/ProfilePage/index.js b/frontend/src/pages/ProfilePage/index.tsx similarity index 98% rename from frontend/src/pages/ProfilePage/index.js rename to frontend/src/pages/ProfilePage/index.tsx index 8b540d44f..9e1d7d8a1 100644 --- a/frontend/src/pages/ProfilePage/index.js +++ b/frontend/src/pages/ProfilePage/index.tsx @@ -10,8 +10,7 @@ import { FlexStyle } from '../../styles/flex.styles'; import StudylogOverview from './StudylogOverviews'; import { Content } from './styles'; - - +// TODO: any 타입 const ProfilePage = ({ children, menu }) => { const { isNotFound, NotFound } = useNotFound(); diff --git a/frontend/src/pages/ProfilePage/styles.js b/frontend/src/pages/ProfilePage/styles.ts similarity index 100% rename from frontend/src/pages/ProfilePage/styles.js rename to frontend/src/pages/ProfilePage/styles.ts diff --git a/frontend/src/pages/ProfilePageAccount/index.js b/frontend/src/pages/ProfilePageAccount/index.tsx similarity index 100% rename from frontend/src/pages/ProfilePageAccount/index.js rename to frontend/src/pages/ProfilePageAccount/index.tsx diff --git a/frontend/src/pages/ProfilePageScraps/styles.js b/frontend/src/pages/ProfilePageScraps/styles.ts similarity index 100% rename from frontend/src/pages/ProfilePageScraps/styles.js rename to frontend/src/pages/ProfilePageScraps/styles.ts diff --git a/frontend/src/pages/ProfilePageStudylogs/styles.js b/frontend/src/pages/ProfilePageStudylogs/styles.ts similarity index 100% rename from frontend/src/pages/ProfilePageStudylogs/styles.js rename to frontend/src/pages/ProfilePageStudylogs/styles.ts diff --git a/frontend/src/pages/index.js b/frontend/src/pages/index.ts similarity index 100% rename from frontend/src/pages/index.js rename to frontend/src/pages/index.ts diff --git a/frontend/src/redux/actions/snackBarAction.js b/frontend/src/redux/actions/snackBarAction.ts similarity index 100% rename from frontend/src/redux/actions/snackBarAction.js rename to frontend/src/redux/actions/snackBarAction.ts diff --git a/frontend/src/styles/markdown.styles.js b/frontend/src/styles/markdown.styles.ts similarity index 100% rename from frontend/src/styles/markdown.styles.js rename to frontend/src/styles/markdown.styles.ts From 97dcf189caee5e852d741ba454b622c0de836f96 Mon Sep 17 00:00:00 2001 From: d0dam Date: Tue, 12 Sep 2023 17:23:00 +0900 Subject: [PATCH 11/21] =?UTF-8?q?refactor:=20js=20ts=20=EB=A7=88=EC=9D=B4?= =?UTF-8?q?=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/Button/PageButton.tsx | 8 +++++--- .../{FilterList.styles.js => FilterList.styles.ts} | 9 +++++++-- .../FilterList/{FilterList.js => FilterList.tsx} | 0 .../{SelectedFilterList.js => SelectedFilterList.tsx} | 0 .../{Pagination.styles.js => Pagination.styles.ts} | 0 .../Pagination/{Pagination.js => Pagination.tsx} | 0 frontend/src/hooks/useValidQueryString.ts | 2 +- .../src/utils/{filteringList.js => filteringList.ts} | 0 8 files changed, 13 insertions(+), 6 deletions(-) rename frontend/src/components/FilterList/{FilterList.styles.js => FilterList.styles.ts} (96%) rename frontend/src/components/FilterList/{FilterList.js => FilterList.tsx} (100%) rename frontend/src/components/FilterList/{SelectedFilterList.js => SelectedFilterList.tsx} (100%) rename frontend/src/components/Pagination/{Pagination.styles.js => Pagination.styles.ts} (100%) rename frontend/src/components/Pagination/{Pagination.js => Pagination.tsx} (100%) rename frontend/src/utils/{filteringList.js => filteringList.ts} (100%) diff --git a/frontend/src/components/Button/PageButton.tsx b/frontend/src/components/Button/PageButton.tsx index 024b62550..f987452fc 100644 --- a/frontend/src/components/Button/PageButton.tsx +++ b/frontend/src/components/Button/PageButton.tsx @@ -1,13 +1,15 @@ import Button from './Button'; import { css } from '@emotion/react'; import COLOR from '../../constants/color'; +import { ComponentPropsWithoutRef, PropsWithChildren } from 'react'; -interface PageButtonProps extends React.HTMLAttributes { - children: number; +interface PageButtonProps extends ComponentPropsWithoutRef<'button'> { + size: string; + css: ReturnType; selected?: boolean; } -const PageButton = ({ children, ...props }: PageButtonProps) => { +const PageButton = ({ children, ...props }: PropsWithChildren) => { return (