From 7906bbc214223ef0d61e7ec6636613b100984c21 Mon Sep 17 00:00:00 2001 From: ss0526100 Date: Wed, 23 Oct 2024 11:36:01 +0900 Subject: [PATCH 1/4] =?UTF-8?q?refactor:=20=EB=B2=84=ED=8A=BC=20=EB=B6=84?= =?UTF-8?q?=EA=B8=B0=20=EB=A6=AC=ED=8C=A9=ED=86=A0=EB=A7=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Moim/MoimDetailPage/MoimDetailPage.tsx | 232 ++++++++++-------- 1 file changed, 126 insertions(+), 106 deletions(-) diff --git a/frontend/src/pages/Moim/MoimDetailPage/MoimDetailPage.tsx b/frontend/src/pages/Moim/MoimDetailPage/MoimDetailPage.tsx index b9d7db6bf..78aa21d96 100644 --- a/frontend/src/pages/Moim/MoimDetailPage/MoimDetailPage.tsx +++ b/frontend/src/pages/Moim/MoimDetailPage/MoimDetailPage.tsx @@ -1,3 +1,4 @@ +import { MoimInfo, Role } from '@_types/index'; import { useNavigate, useParams } from 'react-router-dom'; import BackLogo from '@_common/assets/back.svg'; @@ -31,6 +32,48 @@ import useReopenMoim from '@_hooks/mutaions/useReopenMoim'; import { useTheme } from '@emotion/react'; import useZzimMine from '@_hooks/queries/useZzimMine'; +const getButtonMessage = (moim: MoimInfo, role: Role) => { + if (moim.status === 'CANCELED') return '취소된 모임이에요'; + + if (role === 'MOIMER') { + if (moim.status === 'MOIMING') return '모집 완료하기'; + if (moim.status === 'COMPLETED') return '채팅방 열기(이동하기)'; + return ''; + } + if (role === 'NON_MOIMEE') { + if (moim.status === 'MOIMING') return '참여하기'; + if (moim.status === 'COMPLETED') return '모집이 완료되었어요'; + return ''; + } + if (role === 'MOIMEE') { + if (moim.status === 'MOIMING') return '방장이 채팅방을 만들지 않았습니다'; + if (moim.status === 'COMPLETED') return '채팅방으로 가기'; + return ''; + } + return ''; +}; + +const getButtonDisabled = (moim: MoimInfo, role: Role) => { + if (moim.status === 'CANCELED') return true; + + if (role === 'MOIMER') { + if (moim.status === 'MOIMING') return false; + if (moim.status === 'COMPLETED') return false; + return true; + } + if (role === 'NON_MOIMEE') { + if (moim.status === 'MOIMING') return false; + if (moim.status === 'COMPLETED') return true; + return true; + } + if (role === 'MOIMEE') { + if (moim.status === 'MOIMING') return true; + if (moim.status === 'COMPLETED') return false; + return true; + } + return true; +}; + export default function MoimDetailPage() { const navigate = useNavigate(); const params = useParams(); @@ -39,11 +82,11 @@ export default function MoimDetailPage() { const moimId = Number(params.moimId); const { moim, isLoading: isMoimLoading } = useMoim(moimId); - const { role, isChamyoMineLoading } = useChamyoMine(moimId); + const { role } = useChamyoMine(moimId); const { isZzimed, isZzimMineLoading } = useZzimMine(moimId); const { participants, chamyoAllIsLoading } = useChamyoAll(moimId); const { mutate: changZzim } = useChangeZzim(); - const { mutate, isPending: isPendingJoinMoim } = useJoinMoim(() => { + const { mutate: joinMoim } = useJoinMoim(() => { navigate(GET_ROUTES.nowDarakbang.moimParticipateComplete()); }); @@ -52,49 +95,64 @@ export default function MoimDetailPage() { const { mutate: ReopenMoim, isPending: isPendingReopenMoim } = useReopenMoim(); - const { mutate: completeMoim, isPending: isPendingCompleteMoim } = - useCompleteMoin(); + const { mutate: completeMoim } = useCompleteMoin(); const { mutate: cancelChamyo, isPending: isPendingCancelChamyo } = useCancelChamyo(); - const { mutate: openChat, isPending: isPendingOpenChat } = useOpenChat( - (chatRoomId: number) => - navigate(GET_ROUTES.nowDarakbang.chattingRoom(chatRoomId)), + const { mutate: openChat } = useOpenChat((chatRoomId: number) => + navigate(GET_ROUTES.nowDarakbang.chattingRoom(chatRoomId)), ); const kebabMenu = useMemo(() => { - return role === 'MOIMER' ? ( - - navigate(GET_ROUTES.nowDarakbang.modify(moimId), { - state: { - ...moim, - moimId, - }, - }), - }, - { - name: '모임 취소하기', - disabled: isPendingCancelMoim, - onClick: () => cancelMoim(moimId), - }, - { - name: '모임 다시 열기', - disabled: isPendingReopenMoim, - onClick: () => ReopenMoim(moimId), - }, - ]} - /> - ) : ( + if (role === 'MOIMER') { + return ( + + navigate(GET_ROUTES.nowDarakbang.modify(moimId), { + state: { + ...moim, + moimId, + }, + }), + }, + { + name: '모임 취소하기', + disabled: isPendingCancelMoim, + onClick: () => cancelMoim(moimId), + }, + { + name: '모임 다시 열기', + disabled: isPendingReopenMoim, + onClick: () => ReopenMoim(moimId), + }, + ]} + /> + ); + } + if (role === 'MOIMEE') { + return ( + cancelChamyo(moimId), + }, + ]} + /> + ); + } + + return ( cancelChamyo(moimId), + onClick: () => {}, }, ]} /> @@ -112,75 +170,28 @@ export default function MoimDetailPage() { role, ]); - const button = useMemo(() => { - return isChamyoMineLoading ? ( - '' - ) : role === 'MOIMER' ? ( - moim?.status === 'MOIMING' ? ( - - ) : moim?.status === 'CANCELED' ? ( - - ) : ( - - ) - ) : role === 'NON_MOIMEE' ? ( - moim?.status === 'MOIMING' ? ( - - ) : moim?.status === 'COMPLETED' ? ( - - ) : ( - - ) - ) : moim?.status === 'MOIMING' ? ( - - ) : ( - - ); - }, [ - completeMoim, - isPendingCompleteMoim, - isPendingJoinMoim, - isPendingOpenChat, - moim?.status, - moimId, - navigate, - mutate, - openChat, - role, - isChamyoMineLoading, - ]); + const buttonClickHandler = (moim: MoimInfo, role: Role) => { + if (moim.status === 'CANCELED') return; + + if (role === 'MOIMER') { + if (moim.status === 'MOIMING') return completeMoim(moimId); + if (moim.status === 'COMPLETED') return openChat(moimId); + return; + } + if (role === 'NON_MOIMEE') { + if (moim.status === 'MOIMING') return joinMoim(moimId); + if (moim.status === 'COMPLETED') return; + return; + } + if (role === 'MOIMEE') { + if (moim.status === 'MOIMING') return; + if (moim.status === 'COMPLETED') + return navigate(GET_ROUTES.nowDarakbang.chattingRoom(moimId)); + return; + } + return; + }; + return ( @@ -242,7 +253,16 @@ export default function MoimDetailPage() { )} - {button} + {moim && role && ( + + )} ); From 91f4ae335448716b47776377c0c6269d64fd21bd Mon Sep 17 00:00:00 2001 From: ss0526100 Date: Wed, 23 Oct 2024 12:47:52 +0900 Subject: [PATCH 2/4] =?UTF-8?q?feat:=EB=AA=A8=EC=9E=84=20=EC=83=81?= =?UTF-8?q?=EC=84=B8=20=EB=AA=A9=EB=A1=9D=20aria=20=ED=99=9C=EC=84=B1?= =?UTF-8?q?=ED=99=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/Button/Button.tsx | 7 ++- .../Input/MessagInput/MessageInput.tsx | 5 +- .../src/components/KebabMenu/KebabMenu.tsx | 12 +++- frontend/src/index.html | 4 +- .../Moim/MoimDetailPage/MoimDetailPage.tsx | 8 ++- .../CommentCard/CommentCard.style.ts | 14 +++-- .../CommentList/CommentCard/CommentCard.tsx | 55 ++++++++++++++----- .../CommentCard/CommentCardSkeleton.tsx | 4 +- .../MoimDescription/MoimDescription.tsx | 14 ++++- .../MoimInformation/MoimInformation.tsx | 32 ++++++----- .../components/MoimSummary/MoimSummary.tsx | 22 ++++++-- .../ProfileList/ProfileCard/ProfileCard.tsx | 17 ++++-- .../components/ProfileList/ProfileList.tsx | 13 +++-- .../MoimDetailPage/components/Tag/Tag.tsx | 6 +- .../components/Zzim/ZzimButton.tsx | 10 ++-- 15 files changed, 152 insertions(+), 71 deletions(-) diff --git a/frontend/src/components/Button/Button.tsx b/frontend/src/components/Button/Button.tsx index 00135be0b..156a4d1a0 100644 --- a/frontend/src/components/Button/Button.tsx +++ b/frontend/src/components/Button/Button.tsx @@ -1,3 +1,4 @@ +import { HTMLAttributes, ReactNode } from 'react'; import { Interpolation, SerializedStyles, @@ -5,10 +6,9 @@ import { useTheme, } from '@emotion/react'; -import { ReactNode } from 'react'; import { shapes } from '@_components/Button/Button.style'; -export interface ButtonProps { +export interface ButtonProps extends HTMLAttributes { shape: 'circle' | 'bar'; onClick?: () => void; disabled?: boolean; @@ -22,13 +22,14 @@ export interface ButtonProps { } export default function Button(props: ButtonProps) { - const { onClick, disabled, children, font } = props; + const { onClick, disabled, children, font, ...restProps } = props; const theme = useTheme(); return ( diff --git a/frontend/src/components/Input/MessagInput/MessageInput.tsx b/frontend/src/components/Input/MessagInput/MessageInput.tsx index 2aa20539a..67e926e12 100644 --- a/frontend/src/components/Input/MessagInput/MessageInput.tsx +++ b/frontend/src/components/Input/MessagInput/MessageInput.tsx @@ -1,8 +1,8 @@ import * as S from '@_components/Input/MessagInput/MessageInput.style'; -import { useTheme } from '@emotion/react'; -import { useState } from 'react'; import SubmitButton from '@_common/assets/submit_message_button.svg'; +import { useState } from 'react'; +import { useTheme } from '@emotion/react'; export interface MessageInputProps { placeHolder: string; @@ -36,6 +36,7 @@ export default function MessageInput(props: MessageInputProps) { css={S.button({ theme })} type="submit" disabled={!message.trim() || disabled} + aria-label={`댓글쓰기 버튼 ${!message.trim() || disabled ? '댓글을 작성하여 버튼을 활성화하세요' : ''}`} > diff --git a/frontend/src/components/KebabMenu/KebabMenu.tsx b/frontend/src/components/KebabMenu/KebabMenu.tsx index 701a69f51..2df2bfbeb 100644 --- a/frontend/src/components/KebabMenu/KebabMenu.tsx +++ b/frontend/src/components/KebabMenu/KebabMenu.tsx @@ -1,5 +1,7 @@ import * as S from '@_components/KebabMenu/KebabMenu.style'; -import { useRef, useState, FocusEvent } from 'react'; + +import { FocusEvent, useRef, useState } from 'react'; + import KebabButton from '@_common/assets/kebab_menu.svg'; import { useTheme } from '@emotion/react'; @@ -35,7 +37,12 @@ export default function KebabMenu(props: KebabMenuProps) { return (
- {isKebabOpen && ( @@ -43,6 +50,7 @@ export default function KebabMenu(props: KebabMenuProps) { {options.map((option) => { return ( +
+ {dateTime}
- )} +
+
+ {content} +
-
{content}
+ {!isChild && ( +
+ +
+ )} - + {children && (
{children.map((childComment) => ( @@ -64,6 +89,6 @@ export default function CommentCard(props: CommentCardProps) { ))}
)} - + ); } diff --git a/frontend/src/pages/Moim/MoimDetailPage/components/CommentList/CommentCard/CommentCardSkeleton.tsx b/frontend/src/pages/Moim/MoimDetailPage/components/CommentList/CommentCard/CommentCardSkeleton.tsx index 77f0128f4..558d5959a 100644 --- a/frontend/src/pages/Moim/MoimDetailPage/components/CommentList/CommentCard/CommentCardSkeleton.tsx +++ b/frontend/src/pages/Moim/MoimDetailPage/components/CommentList/CommentCard/CommentCardSkeleton.tsx @@ -11,8 +11,8 @@ export default function CommentCardSkeleton() {
-
-
+
+
diff --git a/frontend/src/pages/Moim/MoimDetailPage/components/MoimDescription/MoimDescription.tsx b/frontend/src/pages/Moim/MoimDetailPage/components/MoimDescription/MoimDescription.tsx index 375af85cc..ca039de24 100644 --- a/frontend/src/pages/Moim/MoimDetailPage/components/MoimDescription/MoimDescription.tsx +++ b/frontend/src/pages/Moim/MoimDetailPage/components/MoimDescription/MoimDescription.tsx @@ -1,5 +1,6 @@ -import { ReactNode } from 'react'; import * as S from './MoimDescription.style'; + +import { ReactNode } from 'react'; import { useTheme } from '@emotion/react'; interface MoimDescriptionProps { @@ -18,8 +19,15 @@ export default function MoimDescription(props: MoimDescriptionProps) { return (
-

{title}

-
{children}
+

+ {title} +

+
+ {children} +
); } diff --git a/frontend/src/pages/Moim/MoimDetailPage/components/MoimInformation/MoimInformation.tsx b/frontend/src/pages/Moim/MoimDetailPage/components/MoimInformation/MoimInformation.tsx index 52c927bf7..0ee015198 100644 --- a/frontend/src/pages/Moim/MoimDetailPage/components/MoimInformation/MoimInformation.tsx +++ b/frontend/src/pages/Moim/MoimDetailPage/components/MoimInformation/MoimInformation.tsx @@ -17,39 +17,45 @@ export default function MoimInformation(props: MoimInformationProps) { const theme = useTheme(); return ( -
-

모임 정보

+
+

+ 모임 정보 +

{date && (
- 날짜 - {formatYyyymmddToKorean(date)} + 날짜 + + {formatYyyymmddToKorean(date)} +
)} {time && (
- 시간 - {formatHhmmToKorean(time)} + 시간 + + {formatHhmmToKorean(time)} +
)} {place && (
- 장소 - {place} + 장소 + {place}
)}
- 최대 인원 - {maxPeople}명 + 최대 인원 + {maxPeople}명
- 현재 참여 인원 - {currentPeople}명 + 현재 참여 인원 + {currentPeople}명
-
+ ); } diff --git a/frontend/src/pages/Moim/MoimDetailPage/components/MoimSummary/MoimSummary.tsx b/frontend/src/pages/Moim/MoimDetailPage/components/MoimSummary/MoimSummary.tsx index 8e4617797..42731e6f8 100644 --- a/frontend/src/pages/Moim/MoimDetailPage/components/MoimSummary/MoimSummary.tsx +++ b/frontend/src/pages/Moim/MoimDetailPage/components/MoimSummary/MoimSummary.tsx @@ -1,12 +1,21 @@ -import { MoimInfo } from '@_types/index'; import * as S from './MoimSummary.style'; -import { useTheme } from '@emotion/react'; + +import { MoimInfo, MoimStatus } from '@_types/index'; + import Tag from '@_pages/Moim/MoimDetailPage/components/Tag/Tag'; +import { useTheme } from '@emotion/react'; interface MoimSummaryProps { moimInfo: Pick; } +const getStatusKoKR = (status: MoimStatus) => { + if (status === 'CANCELED') return '모임 취소'; + if (status === 'COMPLETED') return '모집 완료'; + if (status === 'MOIMING') return '모임 중'; + return ''; +}; + export default function MoimSummary(props: MoimSummaryProps) { const theme = useTheme(); const { @@ -16,8 +25,13 @@ export default function MoimSummary(props: MoimSummaryProps) { return (
-

{title}

- +

+ {title} +

+
); diff --git a/frontend/src/pages/Moim/MoimDetailPage/components/ProfileList/ProfileCard/ProfileCard.tsx b/frontend/src/pages/Moim/MoimDetailPage/components/ProfileList/ProfileCard/ProfileCard.tsx index cd2344dec..6af542f51 100644 --- a/frontend/src/pages/Moim/MoimDetailPage/components/ProfileList/ProfileCard/ProfileCard.tsx +++ b/frontend/src/pages/Moim/MoimDetailPage/components/ProfileList/ProfileCard/ProfileCard.tsx @@ -1,8 +1,9 @@ import * as S from './ProfileCard.style'; -import { useTheme } from '@emotion/react'; + import { Participation } from '@_types/index'; import ProfileFrame from '../../../../../../components/ProfileFrame/ProfileFrame'; import useNicknameWidthEffect from '@_hooks/useNicknameWidthEffect'; +import { useTheme } from '@emotion/react'; interface ProfileCardProps { info: Participation; @@ -18,11 +19,17 @@ export default function ProfileCard(props: ProfileCardProps) { const theme = useTheme(); return ( -
- -
+
  • + +
    {formattedNickname}
    -
    • + ); } diff --git a/frontend/src/pages/Moim/MoimDetailPage/components/ProfileList/ProfileList.tsx b/frontend/src/pages/Moim/MoimDetailPage/components/ProfileList/ProfileList.tsx index 0e95eb118..40d011d74 100644 --- a/frontend/src/pages/Moim/MoimDetailPage/components/ProfileList/ProfileList.tsx +++ b/frontend/src/pages/Moim/MoimDetailPage/components/ProfileList/ProfileList.tsx @@ -1,8 +1,9 @@ import * as S from './ProfileList.style'; -import { Participation } from '@_types/index'; -import { useTheme } from '@emotion/react'; + import { Fragment } from 'react'; +import { Participation } from '@_types/index'; import ProfileCard from './ProfileCard/ProfileCard'; +import { useTheme } from '@emotion/react'; interface ProfileListProps { participants: Participation[]; @@ -13,12 +14,14 @@ export default function ProfileList(props: ProfileListProps) { const { participants } = props; return ( -
    참여자
    -
    +

    + 참여자 +

    +
      {participants.map((participant) => { return ; })} -
    +     ); } diff --git a/frontend/src/pages/Moim/MoimDetailPage/components/Tag/Tag.tsx b/frontend/src/pages/Moim/MoimDetailPage/components/Tag/Tag.tsx index e5eb7a1c0..bfbe01b23 100644 --- a/frontend/src/pages/Moim/MoimDetailPage/components/Tag/Tag.tsx +++ b/frontend/src/pages/Moim/MoimDetailPage/components/Tag/Tag.tsx @@ -1,8 +1,8 @@ import * as S from '@_pages/Moim/MoimDetailPage/components/Tag/Tag.style'; import { HTMLProps } from 'react'; -import { useTheme } from '@emotion/react'; import { MoimStatus } from '@_types/index'; +import { useTheme } from '@emotion/react'; interface TagProps extends HTMLProps { status: MoimStatus; @@ -10,9 +10,9 @@ interface TagProps extends HTMLProps { export default function Tag(props: TagProps) { const theme = useTheme(); - const { status } = props; + const { status, ...restProps } = props; return ( -
    +
    {status === 'CANCELED' ? '모임 취소' : status === 'MOIMING' diff --git a/frontend/src/pages/Moim/MoimDetailPage/components/Zzim/ZzimButton.tsx b/frontend/src/pages/Moim/MoimDetailPage/components/Zzim/ZzimButton.tsx index 57cd23946..ec375b441 100644 --- a/frontend/src/pages/Moim/MoimDetailPage/components/Zzim/ZzimButton.tsx +++ b/frontend/src/pages/Moim/MoimDetailPage/components/Zzim/ZzimButton.tsx @@ -1,16 +1,18 @@ -import { useTheme } from '@emotion/react'; import * as S from '@_pages/Moim/MoimDetailPage/components/Zzim/ZzimButton.style'; + +import { HTMLAttributes } from 'react'; import HeartIcon from '@_components/Icons/HeartIcon'; +import { useTheme } from '@emotion/react'; -interface ZzimButtonProps { +interface ZzimButtonProps extends HTMLAttributes { isZzimed: boolean; onClick: () => void; } export default function ZzimButton(props: ZzimButtonProps) { const theme = useTheme(); - const { isZzimed, onClick } = props; + const { isZzimed, onClick, ...restProps } = props; return ( - ); From d24e407b9cf501e71a3c7808df262323a068879e Mon Sep 17 00:00:00 2001 From: ss0526100 Date: Wed, 23 Oct 2024 13:55:15 +0900 Subject: [PATCH 3/4] =?UTF-8?q?style:eslint=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../DarakbangNameWrapper/DarakbangNameWrapper.style.ts | 2 -- .../src/components/ProfileFrame/ProfileFrame.style.ts | 2 +- .../InformationBottomWrapper.style.ts | 8 +++++--- .../layouts/LoginLayout/LoginFooter/LoginFooter.style.ts | 2 +- .../Explanation/DataMigrationExplanationPage.style.ts | 2 +- 5 files changed, 8 insertions(+), 8 deletions(-) diff --git a/frontend/src/components/DarakbangNameWrapper/DarakbangNameWrapper.style.ts b/frontend/src/components/DarakbangNameWrapper/DarakbangNameWrapper.style.ts index 7c1802fe4..1fb32001c 100644 --- a/frontend/src/components/DarakbangNameWrapper/DarakbangNameWrapper.style.ts +++ b/frontend/src/components/DarakbangNameWrapper/DarakbangNameWrapper.style.ts @@ -2,9 +2,7 @@ import { SerializedStyles, css } from '@emotion/react'; export const name = ({ font }: { font: string | SerializedStyles }) => css` ${font} - max-width: 40vw; - overflow-x: hidden; text-overflow: ellipsis; white-space: nowrap; diff --git a/frontend/src/components/ProfileFrame/ProfileFrame.style.ts b/frontend/src/components/ProfileFrame/ProfileFrame.style.ts index df39cfb4e..c1ca76fa8 100644 --- a/frontend/src/components/ProfileFrame/ProfileFrame.style.ts +++ b/frontend/src/components/ProfileFrame/ProfileFrame.style.ts @@ -38,8 +38,8 @@ export const profileFrame = ({ width: ${width}rem; height: ${height}rem; - background: ${theme.colorPalette.white[100]}; + background: ${theme.colorPalette.white[100]}; border: ${borderWidth}rem solid ${theme.colorPalette.orange[200]}; border-radius: 300rem; `; diff --git a/frontend/src/layouts/InformationLayout/InformationBottomWrapper/InformationBottomWrapper.style.ts b/frontend/src/layouts/InformationLayout/InformationBottomWrapper/InformationBottomWrapper.style.ts index 5a33645d8..b5563f971 100644 --- a/frontend/src/layouts/InformationLayout/InformationBottomWrapper/InformationBottomWrapper.style.ts +++ b/frontend/src/layouts/InformationLayout/InformationBottomWrapper/InformationBottomWrapper.style.ts @@ -4,12 +4,14 @@ import { css } from '@emotion/react'; // TODO: 바텀 버튼 UI에 대한 기획 논의 필요 export const bottomFixedStyle = css` position: fixed; + bottom: 26px; + display: flex; flex-direction: column; - justify-content: center; - align-items: center; - bottom: 26px; gap: 1rem; + align-items: center; + justify-content: center; + width: 100%; max-width: ${DISPLAY_MAX_WIDTH}; padding: 0 16px; diff --git a/frontend/src/layouts/LoginLayout/LoginFooter/LoginFooter.style.ts b/frontend/src/layouts/LoginLayout/LoginFooter/LoginFooter.style.ts index 690b765a8..b076996cf 100644 --- a/frontend/src/layouts/LoginLayout/LoginFooter/LoginFooter.style.ts +++ b/frontend/src/layouts/LoginLayout/LoginFooter/LoginFooter.style.ts @@ -1,7 +1,7 @@ import { css } from '@emotion/react'; export const footerStyle = css` - margin: 1rem 0 0 0; + margin: 1rem 0 0; padding: 0 24px 48px; text-align: center; `; diff --git a/frontend/src/pages/Login/DataMigrationPage/Explanation/DataMigrationExplanationPage.style.ts b/frontend/src/pages/Login/DataMigrationPage/Explanation/DataMigrationExplanationPage.style.ts index a3f274a0a..d84601ffe 100644 --- a/frontend/src/pages/Login/DataMigrationPage/Explanation/DataMigrationExplanationPage.style.ts +++ b/frontend/src/pages/Login/DataMigrationPage/Explanation/DataMigrationExplanationPage.style.ts @@ -1,6 +1,6 @@ import { css, Theme } from '@emotion/react'; export const explanationSection = ({ theme }: { theme: Theme }) => css` - margin: 0rem 5rem; + margin: 0 5rem; ${theme.typography.s1} `; From 3ea7b8015a4a7b9cf6ce8b0ae8b05827675bed62 Mon Sep 17 00:00:00 2001 From: ss0526100 Date: Wed, 23 Oct 2024 14:06:08 +0900 Subject: [PATCH 4/4] =?UTF-8?q?fix=20:=20=EC=82=AC=EC=9A=A9=ED=95=98?= =?UTF-8?q?=EC=A7=80=20=EC=95=8A=EB=8A=94=20svg=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/pages/Moim/MoimDetailPage/MoimDetailPage.tsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/frontend/src/pages/Moim/MoimDetailPage/MoimDetailPage.tsx b/frontend/src/pages/Moim/MoimDetailPage/MoimDetailPage.tsx index 8e43d11b5..724e3fd4b 100644 --- a/frontend/src/pages/Moim/MoimDetailPage/MoimDetailPage.tsx +++ b/frontend/src/pages/Moim/MoimDetailPage/MoimDetailPage.tsx @@ -1,5 +1,7 @@ import { MoimInfo, Role } from '@_types/index'; import { useNavigate, useParams } from 'react-router-dom'; + +import BackLogo from '@_common/assets/back.svg'; import Button from '@_components/Button/Button'; import CommentList from './components/CommentList/CommentList'; import CommentListSkeleton from './components/CommentList/CommentListSkeleton'; @@ -29,7 +31,6 @@ import useOpenChat from '@_hooks/mutaions/useOpenChat'; import useReopenMoim from '@_hooks/mutaions/useReopenMoim'; import { useTheme } from '@emotion/react'; import useZzimMine from '@_hooks/queries/useZzimMine'; -import BackArrowButton from '@_components/Button/BackArrowButton/BackArrowButton'; const getButtonMessage = (moim: MoimInfo, role: Role) => { if (moim.status === 'CANCELED') return '취소된 모임이에요'; @@ -195,7 +196,6 @@ export default function MoimDetailPage() { -
    -     {isZzimMineLoading && (