모집 공고 생성 페이지 일부 수정( feat/#355 )

src/api/admin/customerService/inquiry.api.ts

@@ -21,6 +21,16 @@ export const getAllInquiries = async (
   }
 };
 
+export const getInquiriesPreview = async () => {
+  try {
+    const response = await httpClient.get<ApiAdminInquiry>(`/inquiry/preview`);
+    return response.data.data;
+  } catch (e) {
+    console.error('문의 미리보기 조회 에러', e);
+    throw e;
+  }
+};
+
 export const getInquiryDetail = async (id: string) => {
   try {
     const response = await httpClient.get<ApiAdminInquiryDetail>(

src/api/admin/tag.api.ts

@@ -1,5 +1,5 @@
 import type { ApiCommonBasicType } from '../../models/apiCommon';
-import type { TagFormType } from '../../models/tags';
+
 import { httpClient } from '../http.api';
 
 export const postSkillTag = async (formData: FormData) => {

src/api/http.api.ts

@@ -1,12 +1,11 @@
 import axios, { AxiosRequestConfig } from 'axios';
 import useAuthStore from '../store/authStore';
-import { postRefresh } from './auth.api';
 
 export const BASE_URL = `${import.meta.env.VITE_APP_API_BASE_URL}`;
 const DEFAULT_TIMEOUT = 15000;
 
 export const createClient = (config?: AxiosRequestConfig) => {
-  const { login, logout } = useAuthStore.getState();
+  const { logout } = useAuthStore.getState();
 
   const axiosInstance = axios.create({
     baseURL: BASE_URL,

src/components/admin/adminInquiry/AdminInquiryList.tsx

@@ -8,7 +8,7 @@ import type { AdminInquiryChangeSearchParams } from '../../../models/inquiry';
 
 export type SearchParamsInquiryKeyType = keyof AdminInquiryChangeSearchParams;
 export default function AdminInquiryList() {
-  const [searchParams, setSearchParams] = useSearchParams();
+  const [searchParams] = useSearchParams();
   const userId = searchParams.get('userId') || '';
   const startDate = searchParams.get('startDate') || '';
   const endDate = searchParams.get('endDate') || '';

src/components/admin/adminTags/AdminTagsBasic.tsx

@@ -4,7 +4,7 @@ import { useAdminSkillTag } from '../../../hooks/admin/useAdminTag';
 import { useLocation } from 'react-router-dom';
 import AdminTagCRUD from './AdminTagCRUD';
 import AdminSkillTagItems from './skills/AdminSkillTagItems';
-import type { TagFormType } from '../../../models/tags';
+
 import AdminPositionItems from './positions/AdminPositionItems';
 
 export type TWitchTag = 'skill' | 'position';

src/components/admin/adminUserReport/AdminReportDetail.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import * as S from './AdminReportDetail.styled';
 import AdminTitle from '../../common/admin/title/AdminTitle';
 import Avatar from '../../common/avatar/Avatar';

src/components/admin/mainCard/graphCard/GraphCard.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import * as S from './GraphCard.styled';
 import { Line } from 'react-chartjs-2';
 import 'chart.js/auto';
@@ -58,7 +57,6 @@ const options: ChartOptions<'line'> = {
     x: {
       grid: {
         display: true,
-        borderDash: [5, 5],
         color: 'rgba(0,0,0,0.1)',
       },
       ticks: {
@@ -71,9 +69,6 @@ const options: ChartOptions<'line'> = {
     y: {
       grid: {
         display: true,
-        drawBorder: false,
-
-        borderDash: [5, 5],
         color: 'rgba(0,0,0,0.1)',
       },
       ticks: {

src/components/admin/previewComponent/allUserPreview/AllUserPreview.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import * as S from './AllUserPreview.styled';
 import Avatar from '../../../common/avatar/Avatar';
 import { ADMIN_ROUTE } from '../../../../constants/routes';

src/components/admin/previewComponent/inquiresPreview/InquiresPreview.tsx

@@ -1,19 +1,13 @@
 import * as S from './InquiresPreview.styled';
-import { useGetAllInquiries } from '../../../../hooks/admin/useGetAllInquiries';
 import Avatar from '../../../common/avatar/Avatar';
 import { ADMIN_ROUTE } from '../../../../constants/routes';
 import arrow_right from '../../../../assets/ArrowRight.svg';
 import Spinner from '../../../user/mypage/Spinner';
-import { AdminInquiryChangeSearchParams } from '../../../../models/inquiry';
+import { useGetInquiriesPreview } from '../../../../hooks/admin/useGetInquiriesPreview';
 
 const InquiresPreview = () => {
-  const childSearchParams: AdminInquiryChangeSearchParams = {
-    userId: '',
-    startDate: '',
-    endDate: '',
-  };
-  const { allInquiriesData, isLoading, isFetching } =
-    useGetAllInquiries(childSearchParams);
+  const { allInquiriesPreviewData, isLoading, isFetching } =
+    useGetInquiriesPreview();
 
   if (isLoading || isFetching) {
     return (
@@ -23,13 +17,13 @@ const InquiresPreview = () => {
     );
   }
 
-  if (!allInquiriesData || allInquiriesData.length === 0) {
+  if (!allInquiriesPreviewData || allInquiriesPreviewData.length === 0) {
     return <S.Container>등록된 문의가 없습니다.</S.Container>;
   }
 
   return (
     <S.Container>
-      {allInquiriesData?.map((inquiry) => (
+      {allInquiriesPreviewData.map((inquiry) => (
         <S.Wrapper key={inquiry.id}>
           <S.Content>
             {/* <Link to={`${ADMIN_ROUTE.}`} */}

src/components/admin/previewComponent/noticePreview/NoticePreview.tsx

@@ -15,7 +15,7 @@ const NoticePreview = () => {
   }
 
   if (!noticeData) {
-    return <S.Container>공지사힝이 없습니다.</S.Container>;
+    return <S.Container>공지사항이 없습니다.</S.Container>;
   }
 
   return (

src/components/admin/userCard/UserCard.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import * as S from './UserCard.styled';
 import Avatar from '../../common/avatar/Avatar';
 import type { AllUser } from '../../../models/auth';

src/components/user/comment/DropDownItem.tsx

@@ -61,7 +61,6 @@ const DropDownItem = ({
           targetId={recommentId ? recommentId : commentId}
           type={recommentId ? 'recomment' : 'comment'}
           onClose={handleCloseReportModal}
-          route={projectId}
         />
       )}
     </>

src/components/user/comment/commentComponent/CommentComponentLayout.styled.ts

@@ -1,10 +1,13 @@
 import styled from 'styled-components';
 
-export const Container = styled.div``;
+export const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
 
 export const CommentContainer = styled.div`
   display: flex;
-  justify-content: space-between;
+  flex: 1;
   width: 100%;
   margin-bottom: 20px;
 `;

src/components/user/comment/commentComponent/commentComponent/CommentComponent.styled.ts

@@ -16,10 +16,11 @@ export const Container = styled.div<{ $reply: boolean }>`
 
 export const Wrapper = styled.div`
   display: flex;
-  flex-grow: 1;
+  flex: 1;
 `;
 
 export const CommentWrapper = styled.div`
+  flex: 1;
   margin-top: 4px;
 `;
 
@@ -41,15 +42,18 @@ export const Comment = styled.span`
 
 export const ReplyInputButton = styled.div`
   display: flex;
+  margin-left: 7px;
   margin-top: 11px;
   cursor: pointer;
 `;
 
 export const Icon = styled.div`
+  color: ${({ theme }) => theme.color.blue};
   margin-left: 11px;
 `;
 
 export const ReplyContent = styled.p`
+  color: ${({ theme }) => theme.color.blue};
   margin-left: 10px;
   margin-bottom: 10px;
 `;

src/components/user/comment/commentComponent/commentComponent/CommentComponent.tsx

@@ -1,11 +1,11 @@
 import { Dispatch, SetStateAction } from 'react';
 import * as S from './CommentComponent.styled';
-import chat from '../../../../../assets/chat.svg';
 import { Link } from 'react-router-dom';
 import CommentInput from '../../commentInput/CommentInput';
 import type { CommentType } from '../../../../../models/comment';
 import { ROUTES } from '../../../../../constants/routes';
 import Avatar from '../../../../common/avatar/Avatar';
+import { ChatBubbleBottomCenterTextIcon } from '@heroicons/react/24/outline';
 
 interface CommentComponentProps {
   item: CommentType;
@@ -84,9 +84,9 @@ const CommentComponent = ({
               }
             >
               <S.Icon>
-                <img src={chat} />
+                <ChatBubbleBottomCenterTextIcon width={20} height={20} />
               </S.Icon>
-              <S.ReplyContent>댓글 달기</S.ReplyContent>
+              <S.ReplyContent>답글 달기</S.ReplyContent>
             </S.ReplyInputButton>
           )}
         </S.CommentWrapper>

src/components/user/comment/commentInput/CommentInput.styled.ts

@@ -4,18 +4,21 @@ import Button from '../../../common/Button/Button';
 export const InputContainer = styled.div`
   display: flex;
   flex: 1;
+  margin-left: 10px;
 `;
 
-export const Input = styled.input`
+export const Input = styled.input<{ $isEditMode?: boolean }>`
   width: 100%;
+  flex: 1;
   font-size: 15px;
-  margin-left: 10px;
+  margin-left: ${({ $isEditMode }) => ($isEditMode ? '0' : '10px')};
 `;
 
 export const InputWrapper = styled.div`
   width: 100%;
   margin-left: 5px;
   margin-top: 7px;
+  flex: 1;
 `;
 
 export const ButtonWrapper = styled.div`
@@ -24,11 +27,11 @@ export const ButtonWrapper = styled.div`
   gap: 0.5rem;
   margin-top: 3px;
 `;
-export const Line = styled.hr<{ $isFocused: boolean }>`
+export const Line = styled.hr<{ $isFocused: boolean; $isEditMode?: boolean }>`
   opacity: ${({ $isFocused }) => ($isFocused ? 1.0 : 0.2)};
   border: ${({ $isFocused }) => ($isFocused ? 2 : 1)};
   margin-top: 4px;
-  margin-left: 10px;
+  margin-left: ${({ $isEditMode }) => ($isEditMode ? '0' : '10px')};
 `;
 
 export const ButtonCancel = styled(Button)``;

src/components/user/comment/commentInput/CommentInput.tsx

@@ -85,7 +85,7 @@ const CommentInput = ({
 
   return (
     <S.InputContainer>
-      <Avatar size={'55px'} image={profileImg} />
+      {!activateEditMode && <Avatar size={'55px'} image={profileImg} />}
       <S.InputWrapper>
         <form
           onSubmit={
@@ -97,8 +97,9 @@ const CommentInput = ({
             type='text'
             placeholder='댓글을 입력하세요'
             onFocus={handleFocus}
+            $isEditMode={!!activateEditMode}
           />
-          <S.Line $isFocused={isFocused} />
+          <S.Line $isFocused={isFocused} $isEditMode={!!activateEditMode} />
           {isFocused && (
             <S.ButtonWrapper>
               <S.ButtonCancel

src/components/user/mypage/activityLog/inquiries/inquiry/Inquiry.tsx

@@ -25,6 +25,7 @@ export default function Inquiry({ list, no }: InquiryProps) {
     url: '',
   });
   const answer = list.answer || '';
+
   const divRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {

src/components/user/mypage/myProfile/editProfile/ProfileGithubSuccess.tsx

@@ -1,9 +1,7 @@
 import { useEffect } from 'react';
 import { useNavigate, useSearchParams } from 'react-router-dom';
-import { ROUTES } from '../../../../../constants/routes';
 import { useModal } from '../../../../../hooks/useModal';
 import Modal from '../../../../common/modal/Modal';
-import { MODAL_MESSAGE } from '../../../../../constants/user/modalMessage';
 import { useGithubLink } from '../../../../../hooks/user/useMyInfo';
 
 export default function ProfileGithubSuccess() {

src/components/user/projectFormComponents/inputComponent/InputComponent.styled.ts

@@ -6,15 +6,34 @@ export const InputContainer = styled.div`
   flex-direction: column;
 `;
 
-export const InputStyle = styled.input<{ type?: string }>`
+export const InputWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 2px;
+`;
+
+export const UnitText = styled.span`
+  font-size: ${({ theme }) => theme.heading.xsSmall.fontSize};
+  color: ${({ theme }) => theme.color.deepGrey};
+  white-space: nowrap;
+`;
+
+export const InputStyle = styled.input<{ type?: string; name?: string }>`
   padding: 10px;
   border: 1px solid ${({ theme }) => theme.color.border};
   border-radius: ${({ theme }) => theme.borderRadius.primary};
   font-size: ${({ theme }) => theme.heading.small.fontSize};
 
-  ${({ type }) => {
+  ${({ type, name }) => {
     switch (type) {
       case 'text':
+        if (name === 'maxVolunteers' || name === 'duration') {
+          return css`
+            width: 60px;
+            text-align: right;
+            border-radius: 13px;
+          `;
+        }
         return css`
           width: 100%;
           border-radius: 13px;
@@ -40,19 +59,20 @@ export const InputStyle = styled.input<{ type?: string }>`
   }}
 `;
 
-export const InputInfoStyle = styled.input<{ type?: string }>`
+export const InputInfoStyle = styled.input<{ type?: string; name?: string }>`
   font-size: ${({ theme }) => theme.heading.small.fontSize};
   border: none;
 
-  ${({ type }) => {
+  ${({ type, name }) => {
     switch (type) {
       case 'text':
-        return css`
-          width: 220px;
-          text-align: left;
-          padding-left: 1px;
-        `;
-      case 'number':
+        if (name === 'maxVolunteers' || name === 'duration') {
+          return css`
+            width: 30px;
+            text-align: right;
+            padding-left: 1px;
+          `;
+        }
         return css`
           width: 220px;
           text-align: left;