diff --git a/src/components/atoms/Input/styled.ts b/src/components/atoms/Input/styled.ts index 4bbf9a89..a8ea1ad4 100644 --- a/src/components/atoms/Input/styled.ts +++ b/src/components/atoms/Input/styled.ts @@ -28,7 +28,10 @@ export const InputWrapper: ReturnType< border: none; outline: none; width: 100%; - height: 50px; + + font-size: 1rem; + line-height: 140%; + color: #2d2d39; box-sizing: border-box; padding: 0px; @@ -44,14 +47,4 @@ export const InputWrapper: ReturnType< `cursor: pointer; `} } - - input, - p { - /* 가이드/regular */ - font-size: 13px; - font-style: normal; - font-weight: 400; - line-height: 145%; /* 18.85px */ - letter-spacing: -0.325px; - } `; diff --git a/src/components/molecules/LabeledInput/styled.ts b/src/components/molecules/LabeledInput/styled.ts index 2cc145f1..0f255eee 100644 --- a/src/components/molecules/LabeledInput/styled.ts +++ b/src/components/molecules/LabeledInput/styled.ts @@ -1,4 +1,5 @@ import styled from "@emotion/styled"; +import { InputWrapper } from "components/atoms/Input/styled"; export const LabeledInputWrapper: ReturnType = styled.div` display: flex; @@ -7,4 +8,19 @@ export const LabeledInputWrapper: ReturnType = styled.div` align-items: flex-start; gap: 8px; width: 100%; + + ${InputWrapper} { + input, + p { + /* 가이드/regular */ + font-size: 13px; + font-style: normal; + font-weight: 400; + line-height: 145%; /* 18.85px */ + letter-spacing: -0.325px; + } + input { + height: 50px; + } + } `; diff --git a/src/components/organisms/ChatMessages/styled.ts b/src/components/organisms/ChatMessages/styled.ts index 518d725b..51a647b9 100644 --- a/src/components/organisms/ChatMessages/styled.ts +++ b/src/components/organisms/ChatMessages/styled.ts @@ -17,12 +17,14 @@ export const ChatBubblesWrapper: ReturnType = styled.div` `; export const WriteBoxWrapper: ReturnType = styled.div` + position: fixed; padding: 1rem; background-color: ${({ theme }: { theme: ThemeType }) => theme.colors.white}; - position: absolute; - bottom: 0; + max-width: ${({ theme }: { theme: ThemeType }) => theme.sizes.max_width}; width: 100%; - + left: 50%; + transform: translate(-50%); + bottom: 0; ${InputWithButtonWrapper} { } diff --git a/src/components/organisms/PostItem/index.tsx b/src/components/organisms/PostItem/index.tsx index 7689cd80..b9e72d14 100644 --- a/src/components/organisms/PostItem/index.tsx +++ b/src/components/organisms/PostItem/index.tsx @@ -1,5 +1,5 @@ import { Image, Text, TextButton } from "components/atoms"; -import { getRelativeTime } from "utils"; +import { formatToDateTime, getRelativeTime } from "utils"; import { useRemainingTimer } from "hooks"; import type { IconType } from "types"; import { @@ -95,6 +95,7 @@ const PostItemTitle = ({ title }: IPostItemTitleProps) => { interface IPostItemLocationAndTimeProps { address: string; uploadTime: string; + type?: string; } /** @@ -105,12 +106,18 @@ interface IPostItemLocationAndTimeProps { const PostItemLocationAndTime = ({ address, uploadTime, + type = "default", }: IPostItemLocationAndTimeProps) => { + const time = + type === "default" + ? getRelativeTime(uploadTime) + : formatToDateTime(uploadTime); + console.log("time : ", uploadTime); return ( - + ); }; diff --git a/src/components/organisms/PostList/index.tsx b/src/components/organisms/PostList/index.tsx index a7f889a1..a8a99f21 100644 --- a/src/components/organisms/PostList/index.tsx +++ b/src/components/organisms/PostList/index.tsx @@ -73,6 +73,8 @@ export const PostList = ({ posts, type }: IPostListProps) => { onTextButtonClick, onIconButtonClick, isSeller, + address, + uploadTime, }: IPost) => { return ( @@ -80,6 +82,13 @@ export const PostList = ({ posts, type }: IPostListProps) => { +
+ +
{isSeller && ( = styled.div``; export const TopBarBackIconWrapper: typeof CommonIconWrapper = styled( - CommonIconWrapper, + CommonIconWrapper )``; export const TopBarIconWrapper: typeof CommonIconWrapper = styled( - CommonIconWrapper, + CommonIconWrapper )` ${IconButtonWrapper}:has(${NoIconWrapper}) { cursor: default; @@ -32,8 +32,8 @@ export const TopBarWrapper: ReturnType = styled.div` } & > ${InputWrapper} { flex: 1; - height: auto; - padding: 0.5rem 1rem; + height: 19/16rem; + padding: 15.5/16rem 1rem; background-color: #eee; } &:has(${InputWrapper}) ${TopBarIconWrapper} { diff --git a/src/pages/ChatRoomPage.tsx b/src/pages/ChatRoomPage.tsx index 7d34d261..97a322c0 100644 --- a/src/pages/ChatRoomPage.tsx +++ b/src/pages/ChatRoomPage.tsx @@ -36,7 +36,12 @@ interface IChatRoomBasic { isSeller: boolean; /** 현재 채팅 가능 상태인지(상대방이 채팅방에서 안나갔는지) */ isChatAvailable: boolean; + /** 게시글 판매 동네*/ + sellerAddress: string; + /** 게시글 등록 날짜 */ + productCreatedAt: string; } + export interface IChatMsg { /** 채팅 ObjectId 문자열 / 추후 안읽은 메시지 개수 관리를 위해 */ id: string; @@ -88,8 +93,8 @@ export const ChatRoomPage = () => { title: chatRoomBasicInfo.productTitle, maxPrice: chatRoomBasicInfo.price, price: 0, - address: "", - uploadTime: "", + address: chatRoomBasicInfo.sellerAddress, + uploadTime: chatRoomBasicInfo.productCreatedAt, expiredTime: "", isSeller: chatRoomBasicInfo.isSeller, onClick: () => { diff --git a/src/pages/NeighborhoodAuthPage.tsx b/src/pages/NeighborhoodAuthPage.tsx index db1389f8..d2cf3a42 100644 --- a/src/pages/NeighborhoodAuthPage.tsx +++ b/src/pages/NeighborhoodAuthPage.tsx @@ -10,7 +10,7 @@ import { useUserStore, useTopBarStore } from "stores"; export const NeighborhoodAuthPage = () => { const navigate = useNavigate(); - const { setTitle } = useTopBarStore(); + const { clear, setTitle } = useTopBarStore(); const { user } = useUserStore(); const locationErrorEvent = useLocationErrorEvent(); @@ -23,7 +23,7 @@ export const NeighborhoodAuthPage = () => { const areaAuthPost: IAreaAuthPost = { latitude: location.coord!.lat, longitude: location.coord!.lng, - emdId: user!.emdId as number + emdId: user!.emdId as number, }; try { @@ -40,6 +40,7 @@ export const NeighborhoodAuthPage = () => { ); useEffect(() => { + clear(); setTitle("동네 인증"); }, []); diff --git a/src/utils/dayFormatter.ts b/src/utils/dayFormatter.ts index 71d53630..1e02ed49 100644 --- a/src/utils/dayFormatter.ts +++ b/src/utils/dayFormatter.ts @@ -106,3 +106,12 @@ export const isISOFormat = (dateString: string) => { const isoFormatRegex = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}.\d{3}Z$/; return isoFormatRegex.test(dateString); }; + +/** + * 날짜를 'YYYY-MM-DD HH:mm' 형식으로 변환하는 함수 + * @param date - 변환할 날짜 (Date 객체, 문자열, 숫자 등 Day.js에서 지원하는 입력 타입) + * @returns 'YYYY-MM-DD HH:mm' 형식의 문자열 + */ +export const formatToDateTime = (date: Date | string | number): string => { + return dayjs(date).format("YYYY-MM-DD HH:mm"); +};