Merge pull request #98 from DevKor-github/fix/#96/post-todo

[#96] 포스트 자잘구리한 디자인 수정

Author: jw0202058

package.json

@@ -22,6 +22,7 @@
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-router": "^7.6.3",
+    "react-textarea-autosize": "^8.5.9",
     "swiper": "^11.2.10",
     "zustand": "^5.0.6"
   },

src/features/chat/apis/usePostChatRoom.ts

@@ -0,0 +1,18 @@
+// 채팅방 들어갔을 때 오는 값
+import client from '@/common/utils/client';
+import { useMutation } from '@tanstack/react-query';
+
+const postChatRoom = async ({ chatRoomId }: { chatRoomId: number }) => {
+  const res = await client.post(`/api/v1/chatroom/${chatRoomId}/enter`, null, {
+    params: { pageSize: 5 },
+  });
+
+  console.log(res.data.message);
+
+  return res;
+};
+
+export const usePostChatRoom = () =>
+  useMutation({
+    mutationFn: postChatRoom,
+  });

…/features/post/hooks/apis/usePostItem.ts src/features/post/apis/usePostItem.tssrc/features/post/hooks/apis/usePostItem.ts renamed to src/features/post/apis/usePostItem.ts src/features/post/hooks/apis/usePostItem.ts renamed to src/features/post/apis/usePostItem.ts

@@ -1,7 +1,7 @@
 import client from '@/common/utils/client';
-import { getPresignedUrl } from '../../apis/useGetPresignedUrl';
-import { s3PutImageToUrl } from '../../apis/usePutPresignedUrl';
-import type { PostItemRequest, PostPayload } from '../../types/post';
+import { getPresignedUrl } from './useGetPresignedUrl';
+import { s3PutImageToUrl } from './usePutPresignedUrl';
+import type { PostItemRequest, PostPayload } from '../types/post';
 import type { ItemDetailResponse } from '@/features/detail/types';
 import { useMutation } from '@tanstack/react-query';
 

src/features/post/components/AlertText/index.tsx

@@ -0,0 +1,22 @@
+import type { ReactNode } from 'react';
+import * as s from './style.css';
+
+interface Props {
+  children: ReactNode;
+  isIcon?: boolean;
+}
+
+const AlertText = ({ children, isIcon }: Props) => {
+  return (
+    <div className={s.AlertText}>
+      {isIcon && (
+        <div className={s.Container}>
+          <div className={s.Ellipse} />
+        </div>
+      )}
+      {children}
+    </div>
+  );
+};
+
+export default AlertText;

src/features/post/components/AlertText/style.css.ts

@@ -0,0 +1,30 @@
+import { css } from '@styled-system/css';
+
+export const AlertText = css({
+  display: 'flex',
+  alignItems: 'center',
+  gap: '0.25rem',
+  color: '80',
+  fontFamily: 'Pretendard',
+  fontSize: '0.75rem',
+  fontStyle: 'normal',
+  fontWeight: '400',
+  lineHeight: 'normal',
+  letterSpacing: '-0.03rem',
+});
+
+export const Container = css({
+  w: '0.75rem',
+  h: '0.75rem',
+  aspectRatio: '1/1',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+});
+
+export const Ellipse = css({
+  w: '2px',
+  h: '2px',
+  borderRadius: 'full',
+  backgroundColor: '80',
+});

src/features/post/components/InputField/index.tsx

@@ -1,15 +1,23 @@
 import { MAX_PRICE } from '@/libs/constants';
 import * as s from './style.css';
 import { useState } from 'react';
+import { cx } from '@styled-system/css';
 
 interface InputProps<T extends number | string> {
   className?: string;
   value: T;
   setValue: (value: T) => void;
   maxLength?: number;
+  placeholder?: string;
 }
 
-const InputField = <T extends number | string>({ className, value, setValue, maxLength }: InputProps<T>) => {
+const InputField = <T extends number | string>({
+  className,
+  value,
+  setValue,
+  maxLength,
+  placeholder,
+}: InputProps<T>) => {
   const [isFocused, setIsFocused] = useState(false);
 
   const isNumber = typeof value === 'number';
@@ -41,14 +49,15 @@ const InputField = <T extends number | string>({ className, value, setValue, max
 
   return (
     <input
-      className={`${s.Container({ isNumber })} ${className}`}
+      className={cx(s.Container({ isNumber }), className, s.ContainerWithPlaceholder)}
       value={stringValue}
       onChange={handleChange}
       onFocus={handleFocus}
       onBlur={handleBlur}
       inputMode={isNumber ? 'numeric' : 'text'}
       pattern={isNumber ? '[0-9]*' : undefined}
       maxLength={maxLength}
+      placeholder={placeholder}
     />
   );
 };

src/features/post/components/InputField/style.css.ts

@@ -1,13 +1,12 @@
-import { cva } from '@styled-system/css';
+import { css, cva } from '@styled-system/css';
 
 export const Container = cva({
   base: {
     height: '2.75rem',
-    backgroundColor: '#2C2C2E',
+    backgroundColor: 'systemGray5',
     padding: '0rem 1rem',
     borderRadius: '0.375rem',
     color: '100',
-    opacity: '0.9',
     fontFamily: 'Pretendard',
     fontSize: '1rem',
     fontStyle: 'normal',
@@ -25,3 +24,9 @@ export const Container = cva({
     },
   },
 });
+
+export const ContainerWithPlaceholder = css({
+  _placeholder: {
+    color: '54',
+  },
+});

src/features/post/components/MultilineInputField/index.tsx

@@ -1,8 +1,23 @@
 import type { TextareaHTMLAttributes } from 'react';
+import TextareaAutosize from 'react-textarea-autosize';
 import * as s from './style.css';
 
 const MultilineInputfield = (props: TextareaHTMLAttributes<HTMLTextAreaElement>) => {
-  return <textarea className={s.Container} {...props}></textarea>;
+  return (
+    <div className={s.Container}>
+      <TextareaAutosize
+        minRows={3}
+        onChange={props.onChange}
+        maxLength={props.maxLength}
+        value={props.value}
+        placeholder={props.placeholder}
+        className={s.InputField}
+      />
+      <div className={s.MaxLength}>
+        ({typeof props.value === 'string' ? props.value.length : 0}/{props.maxLength})
+      </div>
+    </div>
+  );
 };
 
 export default MultilineInputfield;

src/features/post/components/MultilineInputField/style.css.ts

@@ -1,17 +1,46 @@
 import { css } from '@styled-system/css';
 
 export const Container = css({
-  height: '8.625rem',
-  backgroundColor: '#2C2C2E',
-  width: '100%',
   padding: '1rem',
+  backgroundColor: 'systemGray5',
+  width: '100%',
   borderRadius: '0.375rem',
+  display: 'flex',
+  flexDir: 'column',
+  gap: '1.5rem',
+});
+
+export const InputField = css({
+  w: '100%',
+  h: '3.75rem',
   color: '100',
-  opacity: '0.9',
   fontFamily: 'Pretendard',
   fontSize: '1rem',
   fontStyle: 'normal',
   fontWeight: '400',
   lineHeight: '1.4',
   resize: 'none',
+  '&::placeholder': {
+    color: '54',
+  },
 });
+
+export const MaxLength = css({
+  display: 'flex',
+  justifyContent: 'end',
+  fontSize: '0.6875rem',
+  fontFamily: 'Pretendard',
+  color: '80',
+  fontStyle: 'normal',
+  fontWeight: '400',
+  lineHeight: '1.4',
+  letterSpacing: '-0.0275rem',
+});
+
+// color: var(--80, rgba(255, 255, 255, 0.80));
+// font-family: Pretendard;
+// font-size: 0.6875rem;
+// font-style: normal;
+// font-weight: 400;
+// line-height: 140%; /* 0.9625rem */
+// letter-spacing: -0.0275rem;

src/features/post/components/StepFunnel/Step2/style.css.ts

@@ -2,6 +2,7 @@ import { css } from '@styled-system/css';
 
 export const Grid = css({
   display: 'grid',
+  w: '100%',
   gridTemplateColumns: 'repeat(2, 1fr)',
   gap: '0.62rem',
 });