From f0f53fae8cead521395b4ff352769004444a78a0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E1=84=8B=E1=85=B5=E1=84=86=E1=85=B5=E1=86=AB=E1=84=92?= =?UTF-8?q?=E1=85=B4?= Date: Tue, 10 Sep 2024 00:51:20 +0900 Subject: [PATCH 01/11] =?UTF-8?q?feat:=20#330=20=ED=9A=8C=EA=B3=A0=20?= =?UTF-8?q?=EC=83=9D=EC=84=B1=20=EB=A7=88=EA=B0=90=EC=9D=BC=20=EC=88=98?= =?UTF-8?q?=EC=A0=95=20UI/UX=20=EB=B0=98=EC=98=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../component/common/radioButton/Radio.tsx | 4 +- .../common/radioButton/RadioButtonGroup.tsx | 9 ++--- .../retrospectCreate/steps/DueDate.tsx | 37 ++++++++++++++----- apps/web/src/hooks/useRadioButton.ts | 1 + apps/web/src/types/retrospectCreate/index.ts | 2 +- 5 files changed, 35 insertions(+), 18 deletions(-) diff --git a/apps/web/src/component/common/radioButton/Radio.tsx b/apps/web/src/component/common/radioButton/Radio.tsx index 8395fdba..bd22d8d8 100644 --- a/apps/web/src/component/common/radioButton/Radio.tsx +++ b/apps/web/src/component/common/radioButton/Radio.tsx @@ -18,9 +18,7 @@ export function Radio({ value, children, ...props }: RadioProps) { htmlFor={value} css={css` font-weight: 600; - display: flex; - justify-content: center; - align-items: center; + width: fit-content; padding: 1.2rem 1.6rem; border-radius: 0.6rem; background-color: ${radioContext?.isChecked(value) ? DESIGN_SYSTEM_COLOR.theme3 : DESIGN_SYSTEM_COLOR.lightGrey2}; diff --git a/apps/web/src/component/common/radioButton/RadioButtonGroup.tsx b/apps/web/src/component/common/radioButton/RadioButtonGroup.tsx index a9c63606..39b3e211 100644 --- a/apps/web/src/component/common/radioButton/RadioButtonGroup.tsx +++ b/apps/web/src/component/common/radioButton/RadioButtonGroup.tsx @@ -1,11 +1,10 @@ -import { css, Interpolation, Theme } from "@emotion/react"; +import { css, SerializedStyles } from "@emotion/react"; import { createContext, forwardRef } from "react"; export type RadioContextState = { radioName: string; isChecked: (value: string) => boolean; onChange: (value: string) => void; - radioStyles?: Interpolation; }; export const RadioContext = createContext(undefined); @@ -14,11 +13,11 @@ type RadioButtonGroupProps = { children: React.ReactNode; direction?: "row" | "column"; gap?: number; - styles?: Interpolation; + styles?: SerializedStyles; } & RadioContextState; export const RadioButtonGroup = forwardRef(function ( - { children, styles, gap = 0.8, direction = "row", ...props }, + { children, gap = 0.8, direction = "row", styles, radioName, isChecked, onChange }, ref, ) { return ( @@ -34,7 +33,7 @@ export const RadioButtonGroup = forwardRef - {children} + {children} ); }); diff --git a/apps/web/src/component/retrospectCreate/steps/DueDate.tsx b/apps/web/src/component/retrospectCreate/steps/DueDate.tsx index 941cf847..956fde56 100644 --- a/apps/web/src/component/retrospectCreate/steps/DueDate.tsx +++ b/apps/web/src/component/retrospectCreate/steps/DueDate.tsx @@ -1,3 +1,4 @@ +import { css } from "@emotion/react"; import { useSetAtom } from "jotai"; import { useContext, useState } from "react"; @@ -5,18 +6,18 @@ import { RetrospectCreateContext } from "@/app/retrospectCreate/RetrospectCreate import { ButtonProvider } from "@/component/common/button"; import { Header } from "@/component/common/header"; import { DateTimeInput } from "@/component/common/input/DateTimeInput"; +import { Radio, RadioButtonGroup } from "@/component/common/radioButton"; import { Spacing } from "@/component/common/Spacing"; +import { useRadioButton } from "@/hooks/useRadioButton"; import { retrospectCreateAtom } from "@/store/retrospect/retrospectCreate"; export function DueDate() { const { goNext, isMutatePending } = useContext(RetrospectCreateContext); const setRetroCreateData = useSetAtom(retrospectCreateAtom); const [selectedDateTime, setSelectedDateTime] = useState(); + const { selectedValue, isChecked, onChange } = useRadioButton(); const handleDataSave = () => { - if (!selectedDateTime) { - return; - } setRetroCreateData((prev) => ({ ...prev, deadline: selectedDateTime })); }; @@ -29,13 +30,31 @@ export function DueDate() { <>
- { - setSelectedDateTime(value); - }} - /> + + 마감일 미지정 + 마감일 지정 + + {selectedValue === "has-duedate-pos" && ( + { + setSelectedDateTime(value); + }} + /> + )} - + 다음 diff --git a/apps/web/src/hooks/useRadioButton.ts b/apps/web/src/hooks/useRadioButton.ts index 934be9f4..eff25d20 100644 --- a/apps/web/src/hooks/useRadioButton.ts +++ b/apps/web/src/hooks/useRadioButton.ts @@ -1,6 +1,7 @@ import { useState } from "react"; export const useRadioButton = (defaultValue?: string) => { + //FIXME - value를 제네릭 타입으로 수정하기 const [selectedValue, setSelectedValue] = useState(defaultValue); const isChecked = (value: string) => selectedValue === value; const onChange = (value: string) => setSelectedValue(value); diff --git a/apps/web/src/types/retrospectCreate/index.ts b/apps/web/src/types/retrospectCreate/index.ts index be851f29..6cd278ff 100644 --- a/apps/web/src/types/retrospectCreate/index.ts +++ b/apps/web/src/types/retrospectCreate/index.ts @@ -11,7 +11,7 @@ export type RetrospectCreateReq = { title: string; introduction?: string; questions: Questions; - deadline: string; + deadline?: string; /** * 기본 템플릿을 수정한 경우 true */ From 27724e3fe942bbb879cff9866fa456773acce2e4 Mon Sep 17 00:00:00 2001 From: klmhyeonwoo Date: Wed, 11 Sep 2024 01:08:04 +0900 Subject: [PATCH 02/11] fix: #330 Fixed an issue where there was a blank space on the floor --- apps/web/src/layout/DualToneLayout.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/apps/web/src/layout/DualToneLayout.tsx b/apps/web/src/layout/DualToneLayout.tsx index 4793ca36..1e2d3fe6 100644 --- a/apps/web/src/layout/DualToneLayout.tsx +++ b/apps/web/src/layout/DualToneLayout.tsx @@ -66,7 +66,6 @@ export function DualToneLayout({ background-color: ${DESIGN_SYSTEM_COLOR.themeBackground[bottomTheme]}; overflow-y: auto; overflow-x: hidden; - padding-bottom: 2rem; `} > {children} From f6dec270c8ab6e5e0886ecd466320ac220876aba Mon Sep 17 00:00:00 2001 From: klmhyeonwoo Date: Wed, 11 Sep 2024 01:38:41 +0900 Subject: [PATCH 03/11] Fix: #330 Render Completed Retrospect List --- .../component/space/view/ActionItemListView.tsx | 17 +++++++++++------ 1 file changed, 11 insertions(+), 6 deletions(-) diff --git a/apps/web/src/component/space/view/ActionItemListView.tsx b/apps/web/src/component/space/view/ActionItemListView.tsx index 3627c357..2280c772 100644 --- a/apps/web/src/component/space/view/ActionItemListView.tsx +++ b/apps/web/src/component/space/view/ActionItemListView.tsx @@ -9,6 +9,7 @@ import { Button, ButtonProvider } from "@/component/common/button"; import { Icon } from "@/component/common/Icon"; import { TextArea } from "@/component/common/input"; import { SelectBox } from "@/component/common/SelectBox"; +import { SelectBoxType } from "@/component/common/SelectBox/SelectBox.tsx"; import { Spacing } from "@/component/common/Spacing"; import { Typography } from "@/component/common/typography"; import { useCreateActionItem } from "@/hooks/api/actionItem/useCreateActionItem"; @@ -32,11 +33,15 @@ type ActionItemProps = { }; export function ActionItemListView({ isPossibleMake, teamActionList, spaceId, leaderId, restrospectArr = [] }: ActionItemListViewProps) { - const retrospectInfo = restrospectArr.map((item) => ({ - retrospectId: item.retrospectId, - retrospectTitle: item.title, - status: item.retrospectStatus, - })); + const isCompleteRetrospect = restrospectArr.reduce((acc: SelectBoxType["data"], cur) => { + if (cur.retrospectStatus === "DONE") + acc.push({ + retrospectId: cur.retrospectId, + retrospectTitle: cur.title, + status: cur.retrospectStatus, + }); + return acc; + }, []); const navigate = useNavigate(); const queryClient = useQueryClient(); @@ -180,7 +185,7 @@ export function ActionItemListView({ isPossibleMake, teamActionList, spaceId, le position: relative; `} > - {}} value={retrospect} updateRetroSpectData={updateRetroSpectData} /> + {}} value={retrospect} updateRetroSpectData={updateRetroSpectData} />