Merge pull request #312 from prgrms-web-devcourse-final-project/chore/#…

…304 chore: 판매 내역 및 기타 디자인 적용
J1P5 · Dec 8, 2024 · 9108cdd · 9108cdd
2 parents bc303c6 + 885cbff
commit 9108cdd
Show file tree

Hide file tree

Showing 9 changed files with 66 additions and 24 deletions.
diff --git 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
@@ -1,4 +1,5 @@
 import styled from "@emotion/styled";
+import { InputWrapper } from "components/atoms/Input/styled";
 
 export const LabeledInputWrapper: ReturnType<typeof styled.div> = styled.div`
   display: flex;
@@ -7,4 +8,19 @@ export const LabeledInputWrapper: ReturnType<typeof styled.div> = 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
@@ -17,12 +17,14 @@ export const ChatBubblesWrapper: ReturnType<typeof styled.div> = styled.div`
 `;
 
 export const WriteBoxWrapper: ReturnType<typeof styled.div> = 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
@@ -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 (
     <PostItemLocationAndTimeWrapper>
       <Text variant="tag_regular" content={address} />
       <Text variant="tag_regular" content="·" />
-      <Text variant="tag_regular" content={getRelativeTime(uploadTime)} />
+      <Text variant="tag_regular" content={time} />
     </PostItemLocationAndTimeWrapper>
   );
 };

diff --git a/src/components/organisms/PostList/index.tsx b/src/components/organisms/PostList/index.tsx
@@ -73,13 +73,22 @@ export const PostList = ({ posts, type }: IPostListProps) => {
     onTextButtonClick,
     onIconButtonClick,
     isSeller,
+    address,
+    uploadTime,
   }: IPost) => {
     return (
       <PostItem key={productId} onClick={onClick}>
         <PostItem.Image imgUrl={imgUrl} />
         <PostItem.Container>
           <PostItem.Title title={title} />
           <PostItem.Price price={price} />
+          <div className="location-con">
+            <PostItem.LocationAndTime
+              type="2"
+              address={address}
+              uploadTime={uploadTime}
+            />
+          </div>
         </PostItem.Container>
         {isSeller && (
           <PostItem.ButtonContainer

diff --git a/src/components/organisms/TopBar/styled.ts b/src/components/organisms/TopBar/styled.ts
@@ -6,10 +6,10 @@ import { IconButtonWrapper } from "components/atoms/Button/IconButton/styled";
 
 const CommonIconWrapper: ReturnType<typeof styled.div> = 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<typeof styled.div> = 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
@@ -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
@@ -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
@@ -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");
+};