From 0f456ecda61713390935c65018021e78c82426fc Mon Sep 17 00:00:00 2001
From: litae <109706689+qkdflrgs@users.noreply.github.com>
Date: Thu, 10 Aug 2023 20:24:52 +0900
Subject: [PATCH] =?UTF-8?q?[FE]=20refactor/#146:=203=EC=A3=BC=EC=B0=A8=20?=
=?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EB=A6=AC=ED=8C=A9?=
=?UTF-8?q?=ED=86=A0=EB=A7=81=20(#147)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
* feat/#146: 코멘트 컴포넌트 구현
* feat/#146: 시간 차이를 구하는 함수 구현
* refactor/#146: Alert 컴포넌트 리팩토링
* refactor/#146: input 컴포넌트 리팩토링
* refactor/#146: TextInput 컴포넌트 리팩토링
* refactor/#146: 드롭다운 인디케이터 리팩토링
* refactor/#146: 드롭다운 아이템 컴포넌트 리팩토링
* refactor/#146: 드롭다운 패널 컴포넌트 리팩토링
* refactor/#146: 이슈 리스트 컴포넌트 리팩토링
* refactor/#146: 메인 페이지 리팩토링
* refactor/#146: 스타일 object 수정
* feat/#146: 마일스톤 상세 페이지(작업중)
---
FE/src/components/Alert/Alert.tsx | 32 +-
FE/src/components/Comment/Comment.tsx | 317 ++++++++++++++++++
.../DropdownIndicator/DropdownIndicator.tsx | 46 +--
.../components/DropdownPanel/DropdownItem.tsx | 27 +-
.../DropdownPanel/DropdownPanel.tsx | 8 +-
FE/src/components/IssueList/IssueList.tsx | 10 +-
FE/src/components/common/Input/Input.tsx | 3 +
.../components/common/TextInput/TextInput.tsx | 10 +-
FE/src/pages/MainPage.tsx | 53 ++-
FE/src/pages/MilestonesPage.tsx | 90 +++++
FE/src/styles/base/Object.ts | 2 +-
FE/src/utils/calculateTime.ts | 18 +
12 files changed, 524 insertions(+), 92 deletions(-)
create mode 100644 FE/src/components/Comment/Comment.tsx
create mode 100644 FE/src/pages/MilestonesPage.tsx
create mode 100644 FE/src/utils/calculateTime.ts
diff --git a/FE/src/components/Alert/Alert.tsx b/FE/src/components/Alert/Alert.tsx
index febddcdd0..13277aa95 100644
--- a/FE/src/components/Alert/Alert.tsx
+++ b/FE/src/components/Alert/Alert.tsx
@@ -1,10 +1,24 @@
import { styled } from "styled-components";
+import Button from "../common/Button/Button";
-export default function Alert() {
+type Props = {
+ onClickCancel(): void;
+ onClickActive(): void;
+};
+
+export default function Alert({ onClickCancel, onClickActive }: Props) {
return (
-
-
+ 정말 삭제하시겠습니까?
+
+
+
+
);
}
@@ -12,11 +26,21 @@ export default function Alert() {
const Container = styled.div`
display: flex;
flex-direction: column;
+ justify-content: space-between;
padding: 32px;
width: 424px;
height: 180px;
+ background-color: ${({ theme }) => theme.colorSystem.neutral.surface.strong};
+ border: ${({ theme }) =>
+ `${theme.border.default} ${theme.colorSystem.neutral.border.default}`};
+ border-radius: ${({ theme }) => theme.radius.large};
+ box-shadow: ${({ theme }) => theme.dropShadow.lightMode};
`;
const AlertContent = styled.p``;
-const ButtonTap = styled.div``;
+const ButtonTap = styled.div`
+ width: 100%;
+ display: flex;
+ justify-content: space-around;
+`;
diff --git a/FE/src/components/Comment/Comment.tsx b/FE/src/components/Comment/Comment.tsx
new file mode 100644
index 000000000..a5bbd2a11
--- /dev/null
+++ b/FE/src/components/Comment/Comment.tsx
@@ -0,0 +1,317 @@
+import { styled } from "styled-components";
+import { AssigneesList } from "../../type";
+import UserProfileButton from "../UserProfileButton/UserProfileButton";
+import { calculateTime } from "../../utils/calculateTime";
+import Button from "../common/Button/Button";
+import { useEffect, useState } from "react";
+
+type Props = {
+ id: number;
+ commentId?: number;
+ type?: "content" | "comment";
+ author: AssigneesList;
+ createAt: string;
+ content: string;
+};
+
+export default function Comment({
+ id,
+ commentId,
+ type = "comment",
+ author,
+ createAt,
+ content,
+}: Props) {
+ const [isEdit, setIsEdit] = useState(false);
+ const [commentContent, setCommentContent] = useState(content);
+ const [showCounter, setShowCounter] = useState(false);
+
+ const editComment = () => {
+ setIsEdit(true);
+ };
+
+ const cancelEditComment = () => {
+ setCommentContent(content);
+ setIsEdit(false);
+ };
+
+ const handleCommentInputChange = (
+ e: React.ChangeEvent,
+ ) => {
+ const { target } = e;
+ target.style.height = "auto";
+ target.style.height = `${target.scrollHeight}px`;
+ setCommentContent(e.target.value);
+ };
+
+ const updateContent = async () => {
+ const URL = `http://3.34.141.196/api/issues/${id}/content`; // PATCH 요청을 보낼 리소스 URL로 변경
+
+ const patchData = {
+ content: commentContent,
+ };
+
+ const headers = {
+ "Content-Type": "application/json",
+ };
+
+ try {
+ const response = await fetch(URL, {
+ method: "PATCH",
+ headers: headers,
+ body: JSON.stringify(patchData),
+ });
+
+ if (response.status === 204) {
+ window.location.reload();
+ } else {
+ console.log("PATCH 요청에 실패하였습니다. 상태 코드:", response.status);
+ }
+ } catch (error) {
+ console.error("API 호출 오류:", error);
+ }
+ };
+
+ const updateComment = async () => {
+ const URL = `http://3.34.141.196/api/issues/${id}/comments/${commentId}`; // PATCH 요청을 보낼 리소스 URL로 변경
+
+ const patchData = {
+ content: commentContent,
+ };
+
+ const headers = {
+ "Content-Type": "application/json",
+ };
+
+ try {
+ const response = await fetch(URL, {
+ method: "PATCH",
+ headers: headers,
+ body: JSON.stringify(patchData),
+ });
+
+ if (response.status === 204) {
+ window.location.reload();
+ } else {
+ console.log("PATCH 요청에 실패하였습니다. 상태 코드:", response.status);
+ }
+ } catch (error) {
+ console.error("API 호출 오류:", error);
+ }
+ };
+
+ useEffect(() => {
+ let timer: NodeJS.Timeout | null = null;
+
+ if (commentContent) {
+ setShowCounter(true);
+ timer = setTimeout(() => {
+ setShowCounter(false);
+ }, 2000);
+ }
+
+ return () => {
+ if (timer) {
+ clearTimeout(timer);
+ }
+ };
+ }, [commentContent]);
+
+ return (
+
+
+
+
+
+ {author.nickname}
+
+
+
+
+
+
+ {!isEdit && (
+
+
+
+ )}
+ {isEdit && (
+
+
+
+
+
+ {showCounter && (
+ 띄어쓰기 포함 {commentContent.length}자
+ )}
+
+
+
+
+
+
+ )}
+
+ {isEdit && (
+
+
+
+
+ )}
+
+ );
+}
+
+const Container = styled.li`
+ display: flex;
+ flex-direction: column;
+ gap: 24px;
+ width: 100%;
+ height: min-content;
+`;
+
+const Header = styled.div`
+ padding: 16px 24px;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ width: 100%;
+ height: 64px;
+ border-top-left-radius: inherit;
+ border-top-right-radius: inherit;
+`;
+
+const Info = styled.div`
+ display: flex;
+ gap: 8px;
+ align-items: center;
+ height: 32px;
+ font: ${({ theme }) => theme.font.displayMedium16};
+ background-color: ${({ theme }) => theme.colorSystem.neutral.surface.default};
+`;
+
+const UserName = styled.span`
+ color: ${({ theme }) => theme.colorSystem.neutral.text.default};
+`;
+
+const Time = styled.span`
+ color: ${({ theme }) => theme.colorSystem.neutral.text.weak};
+`;
+
+const ButtonTap = styled.div`
+ display: flex;
+ gap: 16px;
+`;
+
+const ContentWrapper = styled.div<{ $isEdit: boolean }>`
+ position: relative;
+ padding: ${({ $isEdit }) => ($isEdit ? "16px" : "16px 24px 24px 24px")};
+ width: 100%;
+ background-color: ${({ theme }) => theme.colorSystem.neutral.surface.strong};
+ border-bottom-left-radius: inherit;
+ border-bottom-right-radius: inherit;
+ &::after {
+ content: "";
+ position: absolute;
+ top: 0px;
+ left: 0px;
+ width: 100%;
+ height: 1px;
+ background-color: ${({ theme }) =>
+ theme.colorSystem.neutral.border.default};
+ }
+`;
+
+const Content = styled.textarea`
+ padding: 0px;
+ width: 100%;
+ min-height: 24px;
+ resize: none;
+ border: none;
+ outline: none;
+ overflow: hidden;
+ font: ${({ theme }) => theme.font.displayMedium16};
+ color: ${({ theme }) => theme.colorSystem.neutral.text.default};
+ background-color: transparent;
+`;
+
+const CommentWrapper = styled.div<{ $isEdit: boolean }>`
+ display: flex;
+ flex-direction: column;
+ border: ${({ $isEdit, theme }) =>
+ $isEdit
+ ? `${theme.border.default} ${theme.colorSystem.neutral.border.defaultActive}`
+ : `${theme.border.default} ${theme.colorSystem.neutral.border.default}`};
+ border-radius: ${({ theme }) => theme.radius.large};
+`;
+
+const EditButtons = styled.div`
+ display: flex;
+ gap: 16px;
+ justify-content: end;
+ width: 100%;
+`;
+
+const CountWrapper = styled.div`
+ display: flex;
+ justify-content: end;
+ align-items: center;
+ gap: 8px;
+ width: 100%;
+ height: 52px;
+ padding: 16px;
+`;
+
+const Counter = styled.span`
+ font: ${({ theme }) => theme.font.displayMedium12};
+ color: ${({ theme }) => theme.colorSystem.neutral.text.weak};
+`;
+
+const IconImg = styled.img`
+ width: 20px;
+ height: 20px;
+`;
+
+const AddFileWrapper = styled.div`
+ padding: 10px 16px;
+ display: flex;
+ align-items: center;
+ width: 100%;
+ height: 52px;
+ border-top: ${({ theme }) =>
+ `${theme.border.dash} ${theme.colorSystem.neutral.border.default}`};
+`;
+
+const AddFileInput = styled.input``;
+
+const EditWrapper = styled.div`
+ background-color: ${({ theme }) => theme.colorSystem.neutral.surface.strong};
+ border-bottom-left-radius: inherit;
+ border-bottom-right-radius: inherit;
+`;
diff --git a/FE/src/components/DropdownIndicator/DropdownIndicator.tsx b/FE/src/components/DropdownIndicator/DropdownIndicator.tsx
index bdde9052e..1ef85a102 100644
--- a/FE/src/components/DropdownIndicator/DropdownIndicator.tsx
+++ b/FE/src/components/DropdownIndicator/DropdownIndicator.tsx
@@ -1,7 +1,4 @@
import { styled } from "styled-components";
-import DropdownPanel from "../DropdownPanel/DropdownPanel";
-import { useEffect, useState } from "react";
-import { AssigneesProps } from "../../type";
type Props = {
icon?: string;
@@ -9,7 +6,6 @@ type Props = {
padding?: string;
width?: string;
height?: string;
- hasDropdown?: boolean;
};
export default function DropdownIndicator({
@@ -18,51 +14,11 @@ export default function DropdownIndicator({
padding = "4px 0px",
width = "80px",
height = "32px",
- hasDropdown = false,
}: Props) {
- const [isOpen, setIsOpen] = useState(false);
- const [assigneesData, setAssigneesData] = useState();
-
- const openDropdown = () => {
- setIsOpen(true);
- };
-
- const closeDropdown = () => {
- setIsOpen(false);
- };
-
- useEffect(() => {
- const fetchData = async () => {
- try {
- const response = await fetch(
- "http://3.34.141.196/api/issues/assignees",
- );
- const data = await response.json();
- setAssigneesData(data);
- } catch (error) {
- console.log("error");
- }
- };
-
- fetchData();
- }, []);
-
return (
-
+
{label}
- {hasDropdown && isOpen && (
-
- )}
);
}
diff --git a/FE/src/components/DropdownPanel/DropdownItem.tsx b/FE/src/components/DropdownPanel/DropdownItem.tsx
index 32a83cd47..49e48d061 100644
--- a/FE/src/components/DropdownPanel/DropdownItem.tsx
+++ b/FE/src/components/DropdownPanel/DropdownItem.tsx
@@ -1,38 +1,27 @@
import { styled } from "styled-components";
import UserProfileButton from "../UserProfileButton/UserProfileButton";
-import { useNavigate, useParams } from "react-router-dom";
type Props = {
id: number;
userImg?: string;
itemName: string;
- closeDropdown(): void;
+ onClick(): void;
};
export default function DropdownItem({
id,
userImg = "/logo/profile.jpg",
itemName,
- closeDropdown,
+ onClick,
}: Props) {
- const navigate = useNavigate();
- const { filter } = useParams();
- const checkAssignee = () => {
- navigate(`/issues/${filter}&assigneeIds=${id}`);
- closeDropdown();
- };
-
return (
-
+
- {userImg && (
-
- )}
-
+ {userImg && }
+
diff --git a/FE/src/components/DropdownPanel/DropdownPanel.tsx b/FE/src/components/DropdownPanel/DropdownPanel.tsx
index b50f0e460..8ab323740 100644
--- a/FE/src/components/DropdownPanel/DropdownPanel.tsx
+++ b/FE/src/components/DropdownPanel/DropdownPanel.tsx
@@ -19,13 +19,13 @@ export default function DropdownPanel({
{title}
{assigneesList &&
- assigneesList.assignees.map((assignee, key) => (
+ assigneesList.assignees.map((assignee) => (
))}
diff --git a/FE/src/components/IssueList/IssueList.tsx b/FE/src/components/IssueList/IssueList.tsx
index 6f791b025..e7ad782a9 100644
--- a/FE/src/components/IssueList/IssueList.tsx
+++ b/FE/src/components/IssueList/IssueList.tsx
@@ -2,6 +2,7 @@ import { styled } from "styled-components";
import Button from "../common/Button/Button";
import { IssueListProps } from "../../type";
import LabelItem from "../SideBar/LabelItem";
+import { calculateTime } from "../../utils/calculateTime";
type Props = {
issue: IssueListProps;
@@ -18,7 +19,9 @@ export default function IssueList({ issue }: Props) {
<IssueIcon src={"/icons/alertCircle.svg"} alt="" />
- <IssueTitle>{issue.title}</IssueTitle>
+ <IssueTitle href={`/detail/${issue.id}`}>
+ {issue.title}
+ </IssueTitle>
{issue.labels &&
issue.labels.map((label, key) => (
<LabelItem
@@ -31,7 +34,8 @@ export default function IssueList({ issue }: Props) {
<Caption>
<span>#{issue.id}</span>
<span>
- 이 이슈가 8분 전, {issue.author}님에 의해 작성되었습니다
+ 이 이슈가 {calculateTime(issue.createAt)}, {issue.author}
+ 님에 의해 작성되었습니다
</span>
{issue.milestone !== null && (
<Button
@@ -126,7 +130,7 @@ const IssueIcon = styled.img`
filter: ${({ theme }) => theme.filter.brand.text.weak};
`;
-const IssueTitle = styled.span`
+const IssueTitle = styled.a`
font: ${({ theme }) => theme.font.availableMedium20};
color: ${({ theme }) => theme.colorSystem.neutral.text.strong};
`;
diff --git a/FE/src/components/common/Input/Input.tsx b/FE/src/components/common/Input/Input.tsx
index 74a836d82..6f6687e8d 100644
--- a/FE/src/components/common/Input/Input.tsx
+++ b/FE/src/components/common/Input/Input.tsx
@@ -8,6 +8,7 @@ type Props = {
handleBlur?(): void;
onChange?(e: React.ChangeEvent<HTMLInputElement>): void;
value?: string;
+ maxLength?: number;
handleEnterFilter?(): void;
};
@@ -19,6 +20,7 @@ export default function Input({
handleBlur,
onChange,
value,
+ maxLength,
handleEnterFilter,
}: Props) {
const enterKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {
@@ -37,6 +39,7 @@ export default function Input({
onFocus={handleFocus}
onBlur={handleBlur}
value={value}
+ maxLength={maxLength}
onKeyPress={enterKeyPress}
/>
);
diff --git a/FE/src/components/common/TextInput/TextInput.tsx b/FE/src/components/common/TextInput/TextInput.tsx
index dab9ccec0..886b5a787 100644
--- a/FE/src/components/common/TextInput/TextInput.tsx
+++ b/FE/src/components/common/TextInput/TextInput.tsx
@@ -38,7 +38,11 @@ export default function TextInput({
return (
<Container>
<InputWrapper isFocus={isFocus} $size={size} $direction={direction}>
- {isFocus && <Label htmlFor={id}>{label}</Label>}
+ {isFocus && (
+ <Label htmlFor={id} $direction={direction}>
+ {label}
+ </Label>
+ )}
<Input
id={id}
inputType={inputType}
@@ -68,6 +72,7 @@ const InputWrapper = styled.div<{
padding: 8px 16px;
display: flex;
justify-content: center;
+ align-items: ${({ $direction }) => ($direction === "row" ? "center" : "")};
flex-direction: ${({ $direction }) =>
$direction === "column" ? "column" : "row"};
width: 100%;
@@ -79,7 +84,8 @@ const InputWrapper = styled.div<{
border-radius: ${({ theme }) => theme.radius.large};
`;
-const Label = styled.label`
+const Label = styled.label<{ $direction: "row" | "column" }>`
+ width: ${({ $direction }) => ($direction === "row" ? "64px" : "")};
font: ${({ theme }) => theme.font.displayMedium12};
color: ${({ theme }) => theme.colorSystem.neutral.text.weak};
`;
diff --git a/FE/src/pages/MainPage.tsx b/FE/src/pages/MainPage.tsx
index 987c755cd..b5d1cb7c9 100644
--- a/FE/src/pages/MainPage.tsx
+++ b/FE/src/pages/MainPage.tsx
@@ -21,6 +21,14 @@ export default function MainPage() {
navigate("/new");
};
+ const goLabelsPage = () => {
+ navigate("/labels");
+ };
+
+ const goMilestonesPage = () => {
+ navigate("/milestones");
+ };
+
const showOpenIssue = () => {
navigate("/issues/isOpen=true");
};
@@ -78,15 +86,15 @@ export default function MainPage() {
type={"ghost"}
size={"medium"}
width={"50%"}
- onClick={() => {}}
+ onClick={goLabelsPage}
/>
<Button
icon={"milestone"}
- label={`레이블(${data && data.metadata.milestoneCount})`}
+ label={`마일스톤(${data && data.metadata.milestoneCount})`}
type={"ghost"}
size={"medium"}
width={"50%"}
- onClick={() => {}}
+ onClick={goMilestonesPage}
/>
</TapButtonWrapper>
<Button
@@ -96,6 +104,17 @@ export default function MainPage() {
/>
</Taps>
</FilterSection>
+ {filter !== "isOpen=true" && (
+ <RemoveFilterWrapper>
+ <Button
+ icon={"xSquare"}
+ label={"현재의 검색 필터 및 정렬 지우기"}
+ type={"ghost"}
+ height={"32px"}
+ onClick={showOpenIssue}
+ />
+ </RemoveFilterWrapper>
+ )}
<IssueTable>
<TableHeader>
<CheckboxWrapper>
@@ -120,7 +139,7 @@ export default function MainPage() {
/>
</IssueTap>
<FilterTap>
- <DropdownIndicator label={"담당자"} hasDropdown={true} />
+ <DropdownIndicator label={"담당자"} />
<DropdownIndicator label={"레이블"} />
<DropdownIndicator label={"마일스톤"} />
<DropdownIndicator label={"작성자"} />
@@ -130,8 +149,8 @@ export default function MainPage() {
<IssueContents>
{data &&
(data.issues.length !== 0 ? (
- data.issues.map((issue, key) => (
- <IssueList key={key} issue={issue} />
+ data.issues.map((issue) => (
+ <IssueList key={issue.id} issue={issue} />
))
) : (
<EmptyList>
@@ -145,17 +164,16 @@ export default function MainPage() {
}
const Main = styled.div`
- padding-top: 32px;
+ padding: 32px 0px;
display: flex;
+ width: 1280px;
+ gap: 24px;
flex-direction: column;
align-items: center;
- min-width: 100vw;
- min-height: 100vh;
- background-color: ${({ theme }) => theme.colorSystem.neutral.surface.default};
`;
const FilterSection = styled.section`
- width: 1280px;
+ width: 100%;
display: flex;
justify-content: space-between;
`;
@@ -200,14 +218,14 @@ const TapButtonWrapper = styled.div`
`;
const IssueTable = styled.section`
- margin: 24px 0px;
+ z-index: 10;
border: ${({ theme }) =>
`${theme.border.default} ${theme.colorSystem.neutral.border.default}`};
border-radius: ${({ theme }) => theme.radius.large};
`;
const TableHeader = styled.div`
- width: 1280px;
+ width: 100%;
height: 64px;
display: flex;
padding: 16px 32px;
@@ -240,7 +258,7 @@ const CheckboxLabel = styled.label`
`;
const TapWrapper = styled.div`
- width: 1168px;
+ width: 100%;
display: flex;
justify-content: space-between;
`;
@@ -291,3 +309,10 @@ const EmptyContent = styled.span`
font: ${({ theme }) => theme.font.displayMedium16};
color: ${({ theme }) => theme.colorSystem.neutral.text.weak};
`;
+
+const RemoveFilterWrapper = styled.div`
+ width: 100%;
+ display: flex;
+ justify-content: left;
+ align-items: center;
+`;
diff --git a/FE/src/pages/MilestonesPage.tsx b/FE/src/pages/MilestonesPage.tsx
new file mode 100644
index 000000000..5b1d767c3
--- /dev/null
+++ b/FE/src/pages/MilestonesPage.tsx
@@ -0,0 +1,90 @@
+import { styled } from "styled-components";
+import Button from "../components/common/Button/Button";
+import { useNavigate } from "react-router-dom";
+
+export default function MilestonesPage() {
+ const navigate = useNavigate();
+ const goLabelsPage = () => {
+ navigate("/labels");
+ };
+
+ const goMilestonesPage = () => {
+ navigate("/milestones");
+ };
+
+ return (
+ <Main>
+ <Tap>
+ <TapButtonWrapper>
+ <Button
+ icon={"label"}
+ label={`레이블`}
+ type={"ghost"}
+ size={"medium"}
+ width={"50%"}
+ onClick={goLabelsPage}
+ />
+ <Button
+ icon={"milestone"}
+ label={`마일스톤`}
+ type={"ghost"}
+ size={"medium"}
+ width={"50%"}
+ onClick={goMilestonesPage}
+ />
+ </TapButtonWrapper>
+ <Button icon={"plus"} label={"마일스톤 추가"} onClick={() => {}} />
+ </Tap>
+ </Main>
+ );
+}
+
+const Main = styled.div`
+ padding: 32px 0px;
+ display: flex;
+ flex-direction: column;
+ width: 1280px;
+`;
+
+const Tap = styled.div`
+ display: flex;
+ justify-content: space-between;
+ width: 100%;
+`;
+
+const TapButtonWrapper = styled.div`
+ position: relative;
+ display: flex;
+ width: 320px;
+ height: 40px;
+ border: ${({ theme }) =>
+ `${theme.border.default} ${theme.colorSystem.neutral.border.default}`};
+ border-radius: ${({ theme }) => theme.radius.medium};
+ &::after {
+ content: "";
+ position: absolute;
+ top: 0px;
+ bottom: 0;
+ left: 159px;
+ width: 1px;
+ background-color: ${({ theme }) =>
+ theme.colorSystem.neutral.border.default};
+ }
+ > button {
+ &:hover {
+ background-color: ${({ theme }) =>
+ theme.colorSystem.neutral.surface.bold};
+ }
+ }
+ > button:first-child {
+ border-top-right-radius: 0px;
+ border-bottom-right-radius: 0px;
+ }
+ > button:last-child {
+ border-top-left-radius: 0px;
+ border-bottom-left-radius: 0px;
+ font: ${({ theme }) => theme.font.selectedBold16};
+ color: ${({ theme }) => theme.colorSystem.neutral.text.strong};
+ background-color: ${({ theme }) => theme.colorSystem.neutral.surface.bold};
+ }
+`;
diff --git a/FE/src/styles/base/Object.ts b/FE/src/styles/base/Object.ts
index 7782a6ba3..8fc2716cb 100644
--- a/FE/src/styles/base/Object.ts
+++ b/FE/src/styles/base/Object.ts
@@ -7,7 +7,7 @@ export const objectStyles = {
border: {
default: "1px solid",
icon: "1.6px solid",
- dash: "1px dash",
+ dash: "1px dashed",
},
opacity: {
default: "100%",
diff --git a/FE/src/utils/calculateTime.ts b/FE/src/utils/calculateTime.ts
new file mode 100644
index 000000000..76fb53798
--- /dev/null
+++ b/FE/src/utils/calculateTime.ts
@@ -0,0 +1,18 @@
+export function calculateTime(createdAt: string): string {
+ const createdTime = new Date(Date.parse(createdAt));
+ const currentTime = new Date();
+ const timeDifference = currentTime.getTime() - createdTime.getTime();
+ const minutes = Math.floor(timeDifference / (1000 * 60));
+
+ if (minutes < 1) {
+ return "방금 전";
+ } else if (minutes < 60) {
+ return `${minutes}분 전`;
+ } else if (minutes < 1440) {
+ const hours = Math.floor(minutes / 60);
+ return `${hours}시간 전`;
+ } else {
+ const days = Math.floor(minutes / 1440);
+ return `${days}일 전`;
+ }
+}