@@ -44,23 +48,7 @@ const GoalRoomList = () => { } 개

- - {(selectedOption) => { - setSortedOption(selectedOption); - return ( - - - - {goalRoomFilter['1']} - - - {goalRoomFilter['2']} - - - - ); - }} - + {RecruitingGoalRoomList.length ? ( From 2cee9fdf5e10ffe7ebbe04200dcfbe16b7cda9ea Mon Sep 17 00:00:00 2001 From: NaveOWO <87578512+NaveOWO@users.noreply.github.com> Date: Wed, 27 Dec 2023 00:50:03 +0900 Subject: [PATCH 04/12] =?UTF-8?q?refactor:=20=EB=B6=88=ED=95=84=EC=9A=94?= =?UTF-8?q?=ED=95=9C=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 --- .../roadmapCreateForm/RoadmapCreateForm.tsx | 17 ++--------------- 1 file changed, 2 insertions(+), 15 deletions(-) diff --git a/client/src/components/roadmapCreatePage/roadmapCreateForm/RoadmapCreateForm.tsx b/client/src/components/roadmapCreatePage/roadmapCreateForm/RoadmapCreateForm.tsx index 2c11169b6..ccfc66a3a 100644 --- a/client/src/components/roadmapCreatePage/roadmapCreateForm/RoadmapCreateForm.tsx +++ b/client/src/components/roadmapCreatePage/roadmapCreateForm/RoadmapCreateForm.tsx @@ -1,5 +1,4 @@ import { useCollectRoadmapData } from '@/hooks/roadmap/useCollectRoadmapData'; -import React, { createContext, PropsWithChildren, useRef } from 'react'; import Category from '../category/Category'; import Description from '../description/Description'; import Difficulty from '../difficulty/Difficulty'; @@ -11,18 +10,6 @@ import Tag from '../tag/Tag'; import Title from '../title/Title'; import * as S from './roadmapCreateForm.styles'; -// ref공유를 위한 context - 다음 브랜치에서 파일 옮길 예정 -const FormRefContext = createContext<{ ref: React.MutableRefObject | null }>({ - ref: null, -}); - -const RefProvider = ({ children }: PropsWithChildren) => { - const ref = useRef(); - - return {children}; -}; -// - const RoadmapCreateForm = () => { const { roadmapValue, @@ -36,7 +23,7 @@ const RoadmapCreateForm = () => { } = useCollectRoadmapData(); return ( - + <>

로드맵

을 생성해주세요 @@ -75,7 +62,7 @@ const RoadmapCreateForm = () => { 로드맵 생성완료 - + ); }; From db42b2ac711292e4fbda097c25d9bb89926f3592 Mon Sep 17 00:00:00 2001 From: NaveOWO <87578512+NaveOWO@users.noreply.github.com> Date: Wed, 27 Dec 2023 03:23:18 +0900 Subject: [PATCH 05/12] =?UTF-8?q?refactor:=20roadmap=20create=20=EB=82=9C?= =?UTF-8?q?=EC=9D=B4=EB=8F=84=20select=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8?= =?UTF-8?q?=20=EC=9C=A0=ED=8B=B8=20=EB=9D=BC=EC=9D=B4=EB=B8=8C=EB=9F=AC?= =?UTF-8?q?=EB=A6=AC=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../difficulty/Difficulty.tsx | 62 ++++++++----------- .../difficulty/difficulty.styles.ts | 6 ++ 2 files changed, 33 insertions(+), 35 deletions(-) diff --git a/client/src/components/roadmapCreatePage/difficulty/Difficulty.tsx b/client/src/components/roadmapCreatePage/difficulty/Difficulty.tsx index c5b07ce0a..4e61e00c4 100644 --- a/client/src/components/roadmapCreatePage/difficulty/Difficulty.tsx +++ b/client/src/components/roadmapCreatePage/difficulty/Difficulty.tsx @@ -1,9 +1,13 @@ /* eslint-disable react/no-unused-prop-types */ import { useSelect } from '@/hooks/_common/useSelect'; import { DifficultiesType, DifficultyKeyType } from '@/myTypes/roadmap/internal'; -import { getInvariantObjectKeys, invariantOf } from '@/utils/_common/invariantType'; +import { + getInvariantObjectKeys, + getInvariantObjectValues, + invariantOf, +} from '@/utils/_common/invariantType'; import { useEffect } from 'react'; -import { Select, SelectBox } from '../selector/SelectBox'; +import { Select } from 'ck-util-components'; import * as S from './difficulty.styles'; const Difficulties: DifficultiesType = { @@ -19,54 +23,42 @@ type DifficultyProps = { }; const Difficulty = ({ getSelectedDifficulty }: DifficultyProps) => { - const { selectOption, selectedOption } = useSelect(); + const { selectOption, selectedOption } = useSelect(); useEffect(() => { if (selectedOption === null) return; - getSelectedDifficulty( - getInvariantObjectKeys(invariantOf(Difficulties))[selectedOption] - ); + getSelectedDifficulty(selectedOption); }, [selectedOption]); return ( - - - - 난이도

*

- - - - - 컨텐츠의 달성 난이도를 선택해주세요 - - + ); }; diff --git a/client/src/components/roadmapCreatePage/difficulty/difficulty.styles.ts b/client/src/components/roadmapCreatePage/difficulty/difficulty.styles.ts index 7d6684b0b..7089b6992 100644 --- a/client/src/components/roadmapCreatePage/difficulty/difficulty.styles.ts +++ b/client/src/components/roadmapCreatePage/difficulty/difficulty.styles.ts @@ -34,6 +34,12 @@ export const Wrapper = styled.ul` `; export const TriggerButton = styled.button` + cursor: pointer; + + display: flex; + align-items: center; + justify-content: center; + width: 15.4rem; height: 4rem; From 0044a56f0c3101a6882f89deb91fbf91dab13b5f Mon Sep 17 00:00:00 2001 From: NaveOWO <87578512+NaveOWO@users.noreply.github.com> Date: Wed, 27 Dec 2023 03:24:05 +0900 Subject: [PATCH 06/12] =?UTF-8?q?feat:=20invariantType=20=ED=95=A8?= =?UTF-8?q?=EC=88=98=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/src/utils/_common/invariantType.ts | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/client/src/utils/_common/invariantType.ts b/client/src/utils/_common/invariantType.ts index 7a59183fc..3238c1e3f 100644 --- a/client/src/utils/_common/invariantType.ts +++ b/client/src/utils/_common/invariantType.ts @@ -23,3 +23,13 @@ export function invariantOf(value: T): InvariantOf { export function getInvariantObjectKeys(arg: InvariantOf): (keyof T)[] { return Object.keys(arg) as unknown as (keyof T)[]; } + +export function getInvariantObjectValues(arg: InvariantOf): T[keyof T][] { + return Object.values(arg) as unknown as T[keyof T][]; +} + +export function getInvariantObjectEntries( + arg: InvariantOf +): [keyof T, T[keyof T]][] { + return Object.entries(arg) as unknown as [keyof T, T[keyof T]][]; +} From aebf1f2aa802eac7bf0e78aff5197d492b79d7c0 Mon Sep 17 00:00:00 2001 From: NaveOWO <87578512+NaveOWO@users.noreply.github.com> Date: Wed, 27 Dec 2023 03:50:01 +0900 Subject: [PATCH 07/12] =?UTF-8?q?refactor:=20roadmap=20search=20select?= =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=9C=A0=ED=8B=B8=20?= =?UTF-8?q?=EB=9D=BC=EC=9D=B4=EB=B8=8C=EB=9F=AC=EB=A6=AC=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 --- .../roadmapSearch/RoadmapSearch.tsx | 53 +++++++++++-------- 1 file changed, 31 insertions(+), 22 deletions(-) diff --git a/client/src/components/roadmapListPage/roadmapSearch/RoadmapSearch.tsx b/client/src/components/roadmapListPage/roadmapSearch/RoadmapSearch.tsx index 1bded6fbb..b0cceeb2b 100644 --- a/client/src/components/roadmapListPage/roadmapSearch/RoadmapSearch.tsx +++ b/client/src/components/roadmapListPage/roadmapSearch/RoadmapSearch.tsx @@ -1,15 +1,10 @@ import { SearchIcon } from '@/components/icons/svgIcons'; -import { Select } from '@/components/roadmapCreatePage/selector/SelectBox'; +import { getInvariantObjectKeys, invariantOf } from '@/utils/_common/invariantType'; +import { Select } from 'ck-util-components'; import { FormEvent, useRef, useState } from 'react'; import { useNavigate } from 'react-router-dom'; import * as S from './roadmapSearch.styles'; -const searchCategoryKeyword = { - 1: 'tagName', - 2: 'roadmapTitle', - 3: 'creatorName', -} as const; - const searchCategorySelection = { tagName: '태그', roadmapTitle: '로드맵 제목', @@ -22,12 +17,15 @@ const RoadmapSearch = () => { const [searchCategory, setSearchCategory] = useState< 'tagName' | 'roadmapTitle' | 'creatorName' >('roadmapTitle'); + const [categoryOpen, setCategoryOpen] = useState(false); + + const selectSearchCategory = (option: keyof typeof searchCategorySelection) => { + setSearchCategory(option); + }; - const selectSearchCategory = (id: number) => { - // eslint-disable-next-line no-prototype-builtins - if (searchCategory.hasOwnProperty(id)) { - setSearchCategory(searchCategoryKeyword[id as keyof typeof searchCategoryKeyword]); - } + const toggleSearchCategory = () => { + // eslint-disable-next-line no-unused-expressions + categoryOpen ? setCategoryOpen(false) : setCategoryOpen(true); }; const searchRoadmap = (e: FormEvent) => { @@ -42,7 +40,12 @@ const RoadmapSearch = () => {
) => searchRoadmap(e)}> - @@ -52,15 +55,21 @@ const RoadmapSearch = () => { - - 태그 - - - 로드맵 제목 - - - 크리에이터 - + {getInvariantObjectKeys(invariantOf(searchCategorySelection)).map( + (categ) => { + return ( + toggleSearchCategory()} + asChild + > + + {searchCategorySelection[categ]} + + + ); + } + )} From bf446cce13c611ddad0096e9eb188fc513ff564b Mon Sep 17 00:00:00 2001 From: NaveOWO <87578512+NaveOWO@users.noreply.github.com> Date: Wed, 27 Dec 2023 03:57:05 +0900 Subject: [PATCH 08/12] =?UTF-8?q?chore:=20=EB=B6=88=ED=95=84=EC=9A=94?= =?UTF-8?q?=ED=95=9C=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 --- .../roadmapCreatePage/selector/SelectBox.tsx | 166 ------------------ .../selector/selectBox.styles.ts | 37 ---- .../roadmapListPage/categories/Categories.tsx | 4 +- .../roadmapList/RoadmapList.tsx | 7 +- .../roadmapListView/RoadmapListView.tsx | 15 +- client/src/context/selectContext.ts | 9 - 6 files changed, 5 insertions(+), 233 deletions(-) delete mode 100644 client/src/components/roadmapCreatePage/selector/SelectBox.tsx delete mode 100644 client/src/components/roadmapCreatePage/selector/selectBox.styles.ts delete mode 100644 client/src/context/selectContext.ts diff --git a/client/src/components/roadmapCreatePage/selector/SelectBox.tsx b/client/src/components/roadmapCreatePage/selector/SelectBox.tsx deleted file mode 100644 index 5c65dd22a..000000000 --- a/client/src/components/roadmapCreatePage/selector/SelectBox.tsx +++ /dev/null @@ -1,166 +0,0 @@ -import React, { cloneElement, PropsWithChildren, ReactElement, useEffect } from 'react'; -import { useContextScope } from '@/hooks/_common/useContextScope'; -import { combineStates, getCustomElement } from '@/hooks/_common/compound'; -import { - DescriptionProps, - externalStateType, - IndicatorProps, - LabelProps, - OptionGroupProps, - OptionProps, - SelectBoxProps, - SelectContextType, - TriggerProps, - ValueProps, -} from '@/myTypes/_common/select'; -import { useSelect } from '@/hooks/_common/useSelect'; -import { SelectContext } from '@/context/selectContext'; -import { S } from './selectBox.styles'; - -// select컴포넌트가 context를 공유할 수 있게 하는 provider컴포넌트 -export const SelectBox = ( - props: PropsWithChildren> -) => { - const { children, defaultOpen, externalSelectState } = props; - const { - selectedOption: selectedId, - selectOption: innerSelectState, - isSelecBoxOpen, - toggleBoxOpen, - } = useSelect(defaultOpen); - const selectOption = combineStates(externalSelectState, innerSelectState); - - return ( - - {children} - - ); -}; - -// select컴포넌트의 라벨 -export const Label = (props: PropsWithChildren) => { - const { asChild = false, children, ...restProps } = props; - - if (asChild) { - return getCustomElement(children as ReactElement, { ...restProps }); - } - return {children}; -}; - -// select컴포넌트에 대한 설명 -export const Description = (props: PropsWithChildren) => { - const { asChild = false, children, ...restProps } = props; - - if (asChild) { - return getCustomElement(children as ReactElement, { ...restProps }); - } - return {children}; -}; - -// 클릭하면 selectBox를 보여줄 수 있는 trigger 버튼 -export const Trigger = (props: PropsWithChildren) => { - const { asChild = false, children, ...restProps } = props; - const { toggleBoxOpen } = useContextScope(SelectContext); - - if (asChild) { - return getCustomElement(children as ReactElement, { - ...restProps, - onClick: (e: React.MouseEvent) => { - e.preventDefault(); - toggleBoxOpen(); - }, - }); - } - return ( - ) => { - e.preventDefault(); - toggleBoxOpen(); - }} - > - {children} - - ); -}; - -export const Value = (props: ValueProps) => { - const { asChild = false, children, ...restProps } = props; - const { selectedId } = useContextScope(SelectContext); - return cloneElement(children({ selectedId })); -}; - -// Option들을 담는 컨테이너 컴포넌트 -export const OptionGroup = (props: PropsWithChildren) => { - const { asChild = false, children, ...restProps } = props; - const { isSelecBoxOpen } = useContextScope(SelectContext); - - if (asChild) { - return isSelecBoxOpen - ? getCustomElement(children as ReactElement, { ...restProps }) - : null; - } - return isSelecBoxOpen ? {children} : null; -}; - -// Option이 선택되었는지 나타내는 indicator -export const Indicator = (props: PropsWithChildren) => { - const { asChild = false, children, ...restProps } = props; - const { selectedId } = useContextScope(SelectContext); - const isSelected = restProps.id === selectedId; - - if (asChild) { - return getCustomElement(children as ReactElement, { ...restProps, isSelected }); - } - return {children}; -}; - -// select의 각 Option -export const Option = (props: PropsWithChildren) => { - const { asChild = false, children, ...restProps } = props; - const { selectOption, selectedId, toggleBoxOpen } = - useContextScope(SelectContext); - const isSelected = restProps.id === selectedId; - - useEffect(() => { - if (restProps.defaultSelected) { - selectOption(restProps.id); - } - }, []); - - if (asChild) { - return getCustomElement(children as ReactElement, { - ...restProps, - isSelected, - onClick: (e: React.MouseEvent) => { - e.preventDefault(); - selectOption(restProps.id); - if (!restProps.defaultOpen) { - toggleBoxOpen(); - } - }, - }); - } - return ( - ) => { - e.preventDefault(); - selectOption(restProps.id); - }} - > - {children} - - ); -}; - -export const Select = Object.assign(SelectBox, { - Label, - Description, - Trigger, - Value, - OptionGroup, - Indicator, - Option, -}); diff --git a/client/src/components/roadmapCreatePage/selector/selectBox.styles.ts b/client/src/components/roadmapCreatePage/selector/selectBox.styles.ts deleted file mode 100644 index 6fbc512d3..000000000 --- a/client/src/components/roadmapCreatePage/selector/selectBox.styles.ts +++ /dev/null @@ -1,37 +0,0 @@ -import styled from 'styled-components'; - -const DefaultLabel = styled.div` - ${({ theme }) => theme.fonts.title_large} -`; - -const DefaultDescription = styled.div` - ${({ theme }) => theme.fonts.description5} -`; - -const DefaultTrigger = styled.div` - width: 2rem; - height: 2rem; -`; - -const DefaultIndicator = styled.div<{ isSelected: boolean }>` - width: 0.2rem; - height: 0.2rem; -`; - -const DefaultOptionGroup = styled.div` - width: 2rem; -`; - -const DefaultOption = styled.div<{ isSelected: boolean }>` - width: 8rem; - height: 2rem; -`; - -export const S = { - DefaultLabel, - DefaultDescription, - DefaultTrigger, - DefaultIndicator, - DefaultOptionGroup, - DefaultOption, -}; diff --git a/client/src/components/roadmapListPage/categories/Categories.tsx b/client/src/components/roadmapListPage/categories/Categories.tsx index 536fa56a4..156cff2f0 100644 --- a/client/src/components/roadmapListPage/categories/Categories.tsx +++ b/client/src/components/roadmapListPage/categories/Categories.tsx @@ -1,4 +1,3 @@ -import { MouseEvent } from 'react'; import type { CategoryType, SelectedCategoryId } from '@myTypes/roadmap/internal'; import { CategoriesInfo } from '@constants/roadmap/category'; import SVGIcon from '@components/icons/SVGIcon'; @@ -7,10 +6,9 @@ import { useNavigate } from 'react-router-dom'; type CategoriesProps = { selectedCategoryId: SelectedCategoryId; - selectCategory: ({ currentTarget }: MouseEvent) => void; }; -const Categories = ({ selectedCategoryId, selectCategory }: CategoriesProps) => { +const Categories = ({ selectedCategoryId }: CategoriesProps) => { const categories = Object.values(CategoriesInfo); const upCategories = categories.slice(0, 5); const downCategories = categories.slice(5); diff --git a/client/src/components/roadmapListPage/roadmapList/RoadmapList.tsx b/client/src/components/roadmapListPage/roadmapList/RoadmapList.tsx index 9f7fc50bb..ff9b7ca46 100644 --- a/client/src/components/roadmapListPage/roadmapList/RoadmapList.tsx +++ b/client/src/components/roadmapListPage/roadmapList/RoadmapList.tsx @@ -1,17 +1,12 @@ import { useRoadmapList } from '@hooks/queries/roadmap'; import RoadmapItem from '@components/_common/roadmapItem/RoadmapItem'; import * as S from './RoadmapList.styles'; -import { SelectedCategoryId } from '@myTypes/roadmap/internal'; import { useLocation, useNavigate } from 'react-router-dom'; import { useInfiniteScroll } from '@hooks/_common/useInfiniteScroll'; import WavyLoading from '@/components/_common/wavyLoading/WavyLoading'; import NoResult from '@components/roadmapListPage/roadmapSearch/NoResult'; -type RoadmapListProps = { - selectedCategoryId: SelectedCategoryId; -}; - -const RoadmapList = ({ selectedCategoryId }: RoadmapListProps) => { +const RoadmapList = () => { const location = useLocation(); const queryParams = new URLSearchParams(location.search); const categoryId = queryParams.get('category'); diff --git a/client/src/components/roadmapListPage/roadmapListView/RoadmapListView.tsx b/client/src/components/roadmapListPage/roadmapListView/RoadmapListView.tsx index e581f4911..c8d3b2672 100644 --- a/client/src/components/roadmapListPage/roadmapListView/RoadmapListView.tsx +++ b/client/src/components/roadmapListPage/roadmapListView/RoadmapListView.tsx @@ -9,7 +9,7 @@ import SVGIcon from '@/components/icons/SVGIcon'; import AsyncBoundary from '@/components/_common/errorBoundary/AsyncBoundary'; const RoadmapListView = () => { - const [selectedCategoryId, selectCategory] = useSelectCategory(); + const [selectedCategoryId] = useSelectCategory(); const { search } = useValidParams(); return ( @@ -20,20 +20,11 @@ const RoadmapListView = () => { - + - {!search && ( - - )} + {!search && } ); diff --git a/client/src/context/selectContext.ts b/client/src/context/selectContext.ts deleted file mode 100644 index f161b0157..000000000 --- a/client/src/context/selectContext.ts +++ /dev/null @@ -1,9 +0,0 @@ -import { createContext } from 'react'; -import { SelectContextType } from '@/myTypes/_common/select'; - -export const SelectContext = createContext({ - isSelecBoxOpen: false, - toggleBoxOpen: () => {}, - selectedId: null, - selectOption: (_id: number) => {}, -}); From 0e02da514660d20338c79cb5064c934412ac0e88 Mon Sep 17 00:00:00 2001 From: NaveOWO <87578512+NaveOWO@users.noreply.github.com> Date: Wed, 27 Dec 2023 03:57:33 +0900 Subject: [PATCH 09/12] chore: ck-util-components version update --- client/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/package.json b/client/package.json index 13d5e694d..e010d3127 100644 --- a/client/package.json +++ b/client/package.json @@ -34,7 +34,7 @@ "ajv": "^8.12.0", "axios": "^1.4.0", "babel-plugin-transform-builtin-extend": "^1.1.2", - "ck-util-components": "^1.3.12", + "ck-util-components": "^1.3.15", "react": "^18.2.0", "react-dom": "^18.2.0", "react-lightweight-form": "^1.2.5", From b13e70bdee2babfe0a967e5060c1cdc7a8831a89 Mon Sep 17 00:00:00 2001 From: NaveOWO <87578512+NaveOWO@users.noreply.github.com> Date: Thu, 28 Dec 2023 04:12:36 +0900 Subject: [PATCH 10/12] =?UTF-8?q?refactor:=20goalroomDashboard=20modal=20?= =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EB=9D=BC=EC=9D=B4?= =?UTF-8?q?=EB=B8=8C=EB=9F=AC=EB=A6=AC=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../GoalRoomCertificationFeed.tsx | 23 +++++++---------- .../GoalRoomDashboardRoadmap.tsx | 25 ++++++++----------- .../GoalRoomDashboardTodo.tsx | 23 +++++++---------- .../GoalRoomDashboardHeader.tsx | 23 +++++++---------- .../GoalRoomUserRanking.tsx | 23 +++++++---------- .../goalRoomDetail/GoalRoomDetailDialog.tsx | 23 +++++++---------- .../GoalRoomDetailDialogContent.tsx | 6 ++--- 7 files changed, 58 insertions(+), 88 deletions(-) diff --git a/client/src/components/goalRoomDahsboardPage/goalRoomCertificationFeed/GoalRoomCertificationFeed.tsx b/client/src/components/goalRoomDahsboardPage/goalRoomCertificationFeed/GoalRoomCertificationFeed.tsx index a29ac4ffd..822054887 100644 --- a/client/src/components/goalRoomDahsboardPage/goalRoomCertificationFeed/GoalRoomCertificationFeed.tsx +++ b/client/src/components/goalRoomDahsboardPage/goalRoomCertificationFeed/GoalRoomCertificationFeed.tsx @@ -2,12 +2,7 @@ import * as S from './GoalRoomCertificationFeed.styles'; import SVGIcon from '@components/icons/SVGIcon'; import { GoalRoomBrowseResponse } from '@myTypes/goalRoom/remote'; import { StyledImage } from './GoalRoomCertificationFeed.styles'; -import { - DialogBackdrop, - DialogBox, - DialogContent, - DialogTrigger, -} from '@components/_common/dialog/dialog'; +import { Dialog } from 'ck-util-components'; import CertificationFeedModal from '@components/goalRoomDahsboardPage/goalRoomCertificationFeed/certificationFeedModal/CertificationFeedModal'; import ToolTip from '@components/_common/toolTip/ToolTip'; @@ -19,7 +14,7 @@ const GoalRoomCertificationFeed = ({ goalRoomData }: GoalRoomCertificationFeedPr const { checkFeeds } = goalRoomData; return ( - +
@@ -31,12 +26,12 @@ const GoalRoomCertificationFeed = ({ goalRoomData }: GoalRoomCertificationFeedPr - + - +
{checkFeeds.map((feed) => { @@ -49,14 +44,14 @@ const GoalRoomCertificationFeed = ({ goalRoomData }: GoalRoomCertificationFeedPr - + - + - + - - + + ); }; diff --git a/client/src/components/goalRoomDahsboardPage/goalRoomDahsboardRoadmap/GoalRoomDashboardRoadmap.tsx b/client/src/components/goalRoomDahsboardPage/goalRoomDahsboardRoadmap/GoalRoomDashboardRoadmap.tsx index c715da4dd..751f320f6 100644 --- a/client/src/components/goalRoomDahsboardPage/goalRoomDahsboardRoadmap/GoalRoomDashboardRoadmap.tsx +++ b/client/src/components/goalRoomDahsboardPage/goalRoomDahsboardRoadmap/GoalRoomDashboardRoadmap.tsx @@ -1,12 +1,7 @@ import * as S from './GoalRoomDashboardRoadmap.styles'; import { useGoalRoomDetail } from '@/hooks/queries/goalRoom'; import { useGoalRoomDashboardContext } from '@/context/goalRoomDashboardContext'; -import { - DialogBackdrop, - DialogBox, - DialogContent, - DialogTrigger, -} from '@components/_common/dialog/dialog'; +import { Dialog } from 'ck-util-components'; import SVGIcon from '@components/icons/SVGIcon'; import RoadmapModal from '@components/goalRoomDahsboardPage/goalRoomDahsboardRoadmap/roadmapModal/RoadmapModal'; import { GoalRoomRecruitmentStatus } from '@myTypes/goalRoom/internal'; @@ -20,19 +15,19 @@ const GoalRoomDashboardRoadmap = ({ goalRoomStatus }: GoalRoomDashboardRoadmapPr const { goalRoomInfo } = useGoalRoomDetail(Number(goalroomId)); return ( - +

로드맵

 - + - +
{goalRoomInfo.goalRoomNodes.map((node) => { @@ -49,14 +44,14 @@ const GoalRoomDashboardRoadmap = ({ goalRoomStatus }: GoalRoomDashboardRoadmapPr - + - + - - {goalRoomStatus === 'RUNNING' && } - - + + <>{goalRoomStatus === 'RUNNING' && } + + ); }; diff --git a/client/src/components/goalRoomDahsboardPage/goalRoomDahsboardTodo/GoalRoomDashboardTodo.tsx b/client/src/components/goalRoomDahsboardPage/goalRoomDahsboardTodo/GoalRoomDashboardTodo.tsx index 3c3e09976..92932ddd6 100644 --- a/client/src/components/goalRoomDahsboardPage/goalRoomDahsboardTodo/GoalRoomDashboardTodo.tsx +++ b/client/src/components/goalRoomDahsboardPage/goalRoomDahsboardTodo/GoalRoomDashboardTodo.tsx @@ -2,12 +2,7 @@ import * as S from './GoalRoomDashboardTodo.styles'; import SVGIcon from '@components/icons/SVGIcon'; import { GoalRoomBrowseResponse } from '@myTypes/goalRoom/remote'; import SingleTodo from '@components/goalRoomDahsboardPage/goalRoomDahsboardTodo/singleTodo/SingleTodo'; -import { - DialogBackdrop, - DialogBox, - DialogContent, - DialogTrigger, -} from '@components/_common/dialog/dialog'; +import { Dialog } from 'ck-util-components'; import TodoModal from '@components/goalRoomDahsboardPage/goalRoomDahsboardTodo/todoModal/TodoModal'; import ToolTip from '@components/_common/toolTip/ToolTip'; @@ -23,7 +18,7 @@ const GoalRoomDashboardTodo = ({ const { goalRoomTodos } = goalRoomData; return ( - +
@@ -33,12 +28,12 @@ const GoalRoomDashboardTodo = ({ - + - +
@@ -50,14 +45,14 @@ const GoalRoomDashboardTodo = ({
- + - + - + - - + + ); }; diff --git a/client/src/components/goalRoomDahsboardPage/goalRoomDashboardHeader/GoalRoomDashboardHeader.tsx b/client/src/components/goalRoomDahsboardPage/goalRoomDashboardHeader/GoalRoomDashboardHeader.tsx index e11753bee..83379906c 100644 --- a/client/src/components/goalRoomDahsboardPage/goalRoomDashboardHeader/GoalRoomDashboardHeader.tsx +++ b/client/src/components/goalRoomDahsboardPage/goalRoomDashboardHeader/GoalRoomDashboardHeader.tsx @@ -3,12 +3,7 @@ import SVGIcon from '@components/icons/SVGIcon'; import * as S from './GoalRoomDashboardHeader.styles'; import recruitmentStatus from '@constants/goalRoom/recruitmentStatus'; import { GoalRoomBrowseResponse } from '@myTypes/goalRoom/remote'; -import { - DialogBackdrop, - DialogBox, - DialogContent, - DialogTrigger, -} from '@components/_common/dialog/dialog'; +import { Dialog } from 'ck-util-components'; import GoalRoomParticipantsListModal from '@components/goalRoomDahsboardPage/goalRoomDashboardHeader/goalRoomParticipantsListModal/GoalRoomParticipantsListModal'; import isTodayOrAfter from '@utils/_common/isTodayOrAfter'; import { useGoalRoomDashboardContext } from '@/context/goalRoomDashboardContext'; @@ -38,7 +33,7 @@ const GoalRoomDashboardHeader = ({ }; return ( - +
{name} {isStartButtonVisible && ( @@ -55,9 +50,9 @@ const GoalRoomDashboardHeader = ({ {currentMemberCount} / {limitedMemberCount} 명 참여 중 - + 전체 참여인원 보기 - + @@ -67,14 +62,14 @@ const GoalRoomDashboardHeader = ({
- + - + - + - - + + ); }; diff --git a/client/src/components/goalRoomDahsboardPage/goalRoomUserRanking/GoalRoomUserRanking.tsx b/client/src/components/goalRoomDahsboardPage/goalRoomUserRanking/GoalRoomUserRanking.tsx index 7b842feaa..3ba23b0e8 100644 --- a/client/src/components/goalRoomDahsboardPage/goalRoomUserRanking/GoalRoomUserRanking.tsx +++ b/client/src/components/goalRoomDahsboardPage/goalRoomUserRanking/GoalRoomUserRanking.tsx @@ -5,12 +5,7 @@ import { GoalRoomDashboardContentParams } from '@components/goalRoomDahsboardPag import podiumImg from '@assets/images/podium.png'; import podiumImgAV from '@assets/images/podium.avif'; import { useUserInfoContext } from '@components/_providers/UserInfoProvider'; -import { - DialogBackdrop, - DialogBox, - DialogContent, - DialogTrigger, -} from '@components/_common/dialog/dialog'; +import { Dialog } from 'ck-util-components'; import SVGIcon from '@components/icons/SVGIcon'; import GoalRoomRankingModal from '@components/goalRoomDahsboardPage/goalRoomUserRanking/goalRoomRankingModal/GoalRoomRankingModal'; import ToolTip from '@components/_common/toolTip/ToolTip'; @@ -33,7 +28,7 @@ const GoalRoomUserRanking = () => { ) + 1; return ( - +

모임 유저 랭킹

@@ -43,12 +38,12 @@ const GoalRoomUserRanking = () => {

- + - +
@@ -84,13 +79,13 @@ const GoalRoomUserRanking = () => { )} - + - - + + - - + + ); }; diff --git a/client/src/components/goalRoomListPage/goalRoomDetail/GoalRoomDetailDialog.tsx b/client/src/components/goalRoomListPage/goalRoomDetail/GoalRoomDetailDialog.tsx index 57ff00346..2c997c597 100644 --- a/client/src/components/goalRoomListPage/goalRoomDetail/GoalRoomDetailDialog.tsx +++ b/client/src/components/goalRoomListPage/goalRoomDetail/GoalRoomDetailDialog.tsx @@ -1,9 +1,4 @@ -import { - DialogBackdrop, - DialogBox, - DialogContent, - DialogTrigger, -} from '@components/_common/dialog/dialog'; +import { Dialog } from 'ck-util-components'; import * as S from './goalRoomDetailDialog.styles'; import GoalRoomDetailDialogContent from './GoalRoomDetailDialogContent'; @@ -13,17 +8,17 @@ type GoalRoomDetailDialogProps = { const GoalRoomDetailDialog = ({ goalRoomId }: GoalRoomDetailDialogProps) => { return ( - - + + 자세히 보기 - - + + - - + + - - + + ); }; diff --git a/client/src/components/goalRoomListPage/goalRoomDetail/GoalRoomDetailDialogContent.tsx b/client/src/components/goalRoomListPage/goalRoomDetail/GoalRoomDetailDialogContent.tsx index ccaaedbb5..a4d889384 100644 --- a/client/src/components/goalRoomListPage/goalRoomDetail/GoalRoomDetailDialogContent.tsx +++ b/client/src/components/goalRoomListPage/goalRoomDetail/GoalRoomDetailDialogContent.tsx @@ -1,4 +1,4 @@ -import { DialogTrigger } from '@/components/_common/dialog/dialog'; +import { Dialog } from 'ck-util-components'; import { useGoalRoomDetail, useJoinGoalRoom } from '@hooks/queries/goalRoom'; import { Link } from 'react-router-dom'; import * as S from './goalRoomDetailDialog.styles'; @@ -19,9 +19,9 @@ const GoalRoomDetailDialogContent = ({
{goalRoomInfo.name} - + X - +

{goalRoomInfo.currentMemberCount}

/{goalRoomInfo.limitedMemberCount} From 29762ed371d34524d714df88f109b2e62797bd41 Mon Sep 17 00:00:00 2001 From: NaveOWO <87578512+NaveOWO@users.noreply.github.com> Date: Thu, 28 Dec 2023 04:12:58 +0900 Subject: [PATCH 11/12] =?UTF-8?q?chore:=20=EC=82=AC=EC=9A=A9=ED=95=98?= =?UTF-8?q?=EC=A7=80=20=EC=95=8A=EB=8A=94=20=EB=AA=A8=EB=93=88=20=EC=A0=9C?= =?UTF-8?q?=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/_common/dialog/dialog.tsx | 64 ------------------- client/src/components/mainPage/MainPage.tsx | 47 -------------- client/src/context/dialogContext.ts | 8 --- 3 files changed, 119 deletions(-) delete mode 100644 client/src/components/_common/dialog/dialog.tsx delete mode 100644 client/src/components/mainPage/MainPage.tsx delete mode 100644 client/src/context/dialogContext.ts diff --git a/client/src/components/_common/dialog/dialog.tsx b/client/src/components/_common/dialog/dialog.tsx deleted file mode 100644 index 6c41a0c54..000000000 --- a/client/src/components/_common/dialog/dialog.tsx +++ /dev/null @@ -1,64 +0,0 @@ -import { DialogContext } from '@/context/dialogContext'; -import { getCustomElement } from '@/hooks/_common/compound'; -import { useContextScope } from '@/hooks/_common/useContextScope'; -import { useSwitch } from '@/hooks/_common/useSwitch'; -import { DialogBackdropProps, DialogTriggerProps } from '@/myTypes/_common/dialog'; -import { PropsWithChildren, ReactElement, useEffect } from 'react'; - -export const DialogBox = ({ - children, - defaultOpen = false, -}: PropsWithChildren<{ defaultOpen?: boolean }>) => { - const { - isSwitchOn: isOpen, - turnSwitchOn: openDialog, - turnSwitchOff: closeDialog, - } = useSwitch(defaultOpen); - - return ( - - {children} - - ); -}; - -export const DialogTrigger = (props: PropsWithChildren) => { - const { asChild, children, ...restProps } = props; - const { isOpen, openDialog, closeDialog } = useContextScope(DialogContext); - - const toggleDialog = () => { - if (isOpen) closeDialog(); - if (!isOpen) openDialog(); - }; - - if (asChild) { - return getCustomElement(children as ReactElement, { - ...restProps, - onClick: toggleDialog, - }); - } - - return ; -}; - -export const DialogBackdrop = (props: PropsWithChildren) => { - const { asChild = false, children, ...restProps } = props; - const { isOpen, closeDialog } = useContextScope(DialogContext); - - useEffect(() => { - document.body.style.overflow = isOpen ? 'hidden' : 'auto'; - }, [isOpen]); - - if (asChild) { - return isOpen - ? getCustomElement(children as ReactElement, { ...restProps, onClick: closeDialog }) - : null; - } - - return isOpen ? : null; -}; - -export const DialogContent = ({ children }: PropsWithChildren) => { - const { isOpen } = useContextScope(DialogContext); - return isOpen ? <>{children} : null; -}; diff --git a/client/src/components/mainPage/MainPage.tsx b/client/src/components/mainPage/MainPage.tsx deleted file mode 100644 index 090b88d27..000000000 --- a/client/src/components/mainPage/MainPage.tsx +++ /dev/null @@ -1,47 +0,0 @@ -import { - DialogBackdrop, - DialogBox, - DialogContent, - DialogTrigger, -} from '../_common/dialog/dialog'; -import styled from 'styled-components'; - -const BackDrop = styled.div` - position: fixed; - top: 0; - right: 0; - bottom: 0; - left: 0; - - background-color: black; -`; - -const Trigger = styled.div` - width: 1rem; - height: 1rem; - background-color: black; -`; - -const MainPage = () => { - return ( - // 모달을 사용하고싶은 곳에서 최상위로 꼭 DialogBox를 감싸줘야합니다 - - {/* 눌렀을 때 모달이 열고 닫히는 trigger버튼이에요. 골룸에서는 전체보기 or 크게보기 버틴이 되겠죠? asChild 속성을 준 후에, 스타일링하고싶은 컴포넌트 꼭 1개만 자식으로 줘야해요 */} - - {/* 이렇게 커스텀 된 trigger버튼 1개만!! */} - - - {/* 모달 뜨면 뒤에 생기는 배경입니다! 이것도 asChild 속성을 준 후에 스타일링하고싶은 컴포넌트 꼭 1개만 자식으로 줘야합니다. */} - - {/* 이렇게 커스텀 된 backdreop 1개만!! */} - - - {/* 모달의 내용물이 들어가는 부분입니다. 이부분은 asChild 속성을 주면 안되고, children을 줘서 마음대로 모달 내용물을 넣어주면 됩니다~ */} - -
모달 내용물~
- - - ); -}; - -export default MainPage; diff --git a/client/src/context/dialogContext.ts b/client/src/context/dialogContext.ts deleted file mode 100644 index cc9eb0251..000000000 --- a/client/src/context/dialogContext.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { DialogContextType } from '@/myTypes/_common/dialog'; -import { createContext } from 'react'; - -export const DialogContext = createContext({ - isOpen: false, - openDialog: () => {}, - closeDialog: () => {}, -}); From a539029780a18028e50094e9d009990cf9b8bfed Mon Sep 17 00:00:00 2001 From: NaveOWO <87578512+NaveOWO@users.noreply.github.com> Date: Thu, 28 Dec 2023 04:13:24 +0900 Subject: [PATCH 12/12] chore: ck-util-components version update --- client/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/package.json b/client/package.json index e010d3127..c522742f2 100644 --- a/client/package.json +++ b/client/package.json @@ -34,7 +34,7 @@ "ajv": "^8.12.0", "axios": "^1.4.0", "babel-plugin-transform-builtin-extend": "^1.1.2", - "ck-util-components": "^1.3.15", + "ck-util-components": "^1.4.0", "react": "^18.2.0", "react-dom": "^18.2.0", "react-lightweight-form": "^1.2.5",