[Feature] 디자인 자잘한 수정

src/components/Common/Input.tsx

@@ -27,6 +27,7 @@ interface InputProps {
   textIndent?: string;
   onClick?: () => void;
   alignCenter?: boolean;
+  isCut?: boolean;
 }
 const Input = ({
   width = 'auto',
@@ -54,6 +55,7 @@ const Input = ({
   isBoxSizing = false,
   textIndent = '0',
   onClick,
+  isCut = false,
 }: InputProps) => {
   return (
     <StyledInput
@@ -82,6 +84,7 @@ const Input = ({
       textIndent={textIndent}
       onClick={onClick}
       alignCenter={alignCenter}
+      isCut={isCut}
     />
   );
 };
@@ -102,6 +105,7 @@ const StyledInput = styled.input<{
   isBoxSizing: boolean;
   textIndent: string;
   alignCenter: boolean;
+  isCut: boolean;
 }>`
   border-radius: 10px;
   border: ${(props) => (props.isError ? '1px solid #ff002e' : '')};
@@ -114,6 +118,7 @@ const StyledInput = styled.input<{
   font-weight: ${({ fontWeight }) => fontWeight};
   line-height: 150%;
   color: ${({ fontColor }) => fontColor};
+  text-overflow: ${({ isCut }) => (isCut ? 'ellipsis' : '')};
   text-indent: ${({ textIndent }) => textIndent};
   padding: ${({ padding }) => padding};
   margin: ${({ margin }) => margin};

src/components/Common/TagLetterStatus.tsx

@@ -1,7 +1,8 @@
 import styled from 'styled-components';
 import { Black, Green, Grey5, White } from 'styles/color';
-import { Caption2 } from 'styles/font';
+import { Body2, Button2, Caption2 } from 'styles/font';
 import { LetterState } from 'utils/type';
+
 interface TagLetterStatusProps {
   tagType: LetterState;
   isActive?: boolean;
@@ -21,9 +22,9 @@ export const TagLetterStatus = ({
       onClick={onClick}
       disabled={!isActive}
     >
-      <Caption2 color={isSelect ? White : isActive ? Black : White}>
+      <Button2 color={isSelect ? White : isActive ? Black : White}>
         {tagType}
-      </Caption2>
+      </Button2>
     </Wrapper>
   );
 };
@@ -37,6 +38,6 @@ const Wrapper = styled.button<{
   cursor: pointer;
   align-items: center;
   padding: 0.8rem 1.6rem;
-  border-radius: 0.8rem;
+  border-radius: 1.2rem;
   background-color: ${(props) => (props.isSelect ? Green : Grey5)};
 `;

src/components/Seller/Common/OngoingCounsultBox.tsx

@@ -114,6 +114,7 @@ const OngoingCounsultBoxWrapper = styled.div`
   margin: 0 2rem;
   .button {
     display: flex;
+    width: 6rem;
     justify-content: center;
   }
   .flex-1 {

src/components/Seller/SellerConsult/SellerConsultSection.tsx

@@ -19,6 +19,7 @@ import { ReactComponent as NoConsultGraphicIcon } from 'assets/icons/graphic-no-
 import { ConsultInfoList } from 'utils/type';
 import { LoadingSpinner } from 'utils/LoadingSpinner';
 import { Skeleton } from '@mui/material';
+import ConsultCardSkeleton from 'components/Skeleton/ConsultCardSkeleton';
 
 interface ConsultTypeProps {
   isActive: boolean;
@@ -111,18 +112,13 @@ export const SellerConsultSection = () => {
           </div>
         </div>
       </ConsultSortingMenu>
+      {/* 스켈레톤 UI 적용 */}
       {isLoading ? (
-        <div
-          style={{
-            height: '40vh',
-            display: 'flex',
-            justifyContent: 'center',
-            alignItems: 'center',
-          }}
-        >
-          <LoadingSpinner />
-          <Skeleton />
-        </div>
+        <SkeletonList>
+          {Array.from({ length: 5 }).map((_, index) => (
+            <ConsultCardSkeleton />
+          ))}
+        </SkeletonList>
       ) : (
         <ConsultBoxList>
           {consultInfo?.length === 0 ? (
@@ -211,7 +207,7 @@ const ConsultSortingMenu = styled.div`
 const ConsultType = styled.div<ConsultTypeProps>`
   display: flex;
   width: 5.7rem;
-  height: 3.1rem;
+  height: 3.4rem;
   cursor: pointer;
   justify-content: center;
   align-items: center;
@@ -232,6 +228,13 @@ const SortingType = styled.div`
   cursor: pointer;
 `;
 
+const SkeletonList = styled.div`
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  gap: 0.8rem;
+`;
+
 const ConsultBoxList = styled.div`
   display: flex;
   flex-direction: column;

src/components/Seller/SellerLetter/LetterTagListSection.tsx

@@ -2,7 +2,7 @@ import { TagLetterStatus } from 'components/Common/TagLetterStatus';
 import { useEffect } from 'react';
 import styled from 'styled-components';
 interface LetterTagListSectionProps {
-  tagStatus: number;
+  tagStatus?: number;
   setTagStatus: React.Dispatch<React.SetStateAction<number>>;
   tagActiveLevel: number;
 }

src/components/Seller/SellerLetterWrite/LetterWriteMainSection.tsx

@@ -12,6 +12,8 @@ import {
   getLetterMessages,
   getLetterRecentType,
 } from 'api/get';
+import { LoadingSpinner } from 'utils/LoadingSpinner';
+import { Space } from 'components/Common/Space';
 interface LetterConsultInform {
   categoryStatus?: CartegoryState;
   counselorName: string | undefined;
@@ -66,6 +68,7 @@ export const LetterWriteMainSection = ({
     질문: 'first_question',
     '추가 질문': 'second_question',
   };
+  const [isLoading, setIsLoading] = useState(true);
 
   useEffect(() => {
     const fetchData = async () => {
@@ -105,7 +108,6 @@ export const LetterWriteMainSection = ({
         setSaveText(minderSaveResponse?.data?.content);
         setSaveDate(minderSaveResponse?.data?.updatedAt);
         setSaveId(minderSaveResponse?.data?.messageId);
-        console.log(minderSaveResponse);
       }
 
       // 셰어가 최근에 보낸 질문 조회하는 API
@@ -130,8 +132,7 @@ export const LetterWriteMainSection = ({
         content: letterResponse?.data?.content,
         date: letterResponse?.data?.updatedAt,
       });
-      console.log(letterResponse);
-      console.log(customerInfoResponse);
+      setIsLoading(false);
     };
     fetchData();
   }, [isSave]);
@@ -168,8 +169,12 @@ export const LetterWriteMainSection = ({
       {isActivePostModal || isActiveSaveModal || isActiveSavePostModal ? (
         <BackDrop />
       ) : null}
-
-      {isViewQuestion ? (
+      {isLoading ? (
+        <>
+          <Space height="18vh" />
+          <LoadingSpinner />
+        </>
+      ) : isViewQuestion ? (
         <>
           <QuestionDate>{consultInform?.date}</QuestionDate>
           <UnfoldedTextField>{consultInform?.content}</UnfoldedTextField>

src/components/Seller/SellerMyPageModifyProfile/ModifyProfileMainSection.tsx

@@ -265,6 +265,7 @@ export const ModifyProfileMainSection = ({
           <Input
             width="100%"
             height="4.8rem"
+            isCut={true}
             value={convertObjectToString(selectAvailableTime)}
             readOnly={true}
             padding="1.2rem 1.6rem"

src/components/Seller/SellerMyPageModifyProfile/SetChatTimeSection.tsx

@@ -67,8 +67,6 @@ function SetChatTimeSection({
     useRecoilState(isTimeModalOpenState);
   const [isOutPopupOpen, setIsOutPopupOpen] =
     useRecoilState(isOutPopupOpenState);
-  console.log(selectedTimeList['THU'][0]);
-  console.log(selectedTimeList);
   return (
     <Wrapper>
       <ScrollContainer>

src/components/Seller/SellerMyPageModifyProfile/TimeSelectModal.tsx

@@ -185,13 +185,13 @@ function TimeSelectModal({
             isBlock={
               !blockRange
                 ? false
-                : hour >= blockRange[0] - 1 && hour <= blockRange[1] + 1
+                : hour >= blockRange[0] && hour <= blockRange[1]
                 ? true
                 : false
             }
             onClick={() => {
               if (blockRange) {
-                if (hour >= blockRange[0] - 1 && hour <= blockRange[1] + 1) {
+                if (hour >= blockRange[0] && hour <= blockRange[1]) {
                   return;
                 }
               }

src/components/Skeleton/ConsultCardSkeleton.tsx

@@ -0,0 +1,61 @@
+import { Skeleton } from '@mui/material';
+import { Space } from 'components/Common/Space';
+import React from 'react';
+import styled from 'styled-components';
+import { Grey6 } from 'styles/color';
+
+function ConsultCardSkeleton() {
+  return (
+    <ConsultCardSkeletonWrapper>
+      <div className="flex-1">
+        <Skeleton width={'4rem'} height={'2.5rem'} variant="rounded" />
+        <Space height="0.6rem" />
+        <div>
+          <Skeleton variant="circular" width={'4rem'} height="4rem" />
+        </div>
+      </div>
+      <div className="flex-2">
+        <div
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            height: '2.5rem',
+          }}
+        >
+          <div>
+            <Skeleton width={'5rem'} height={'2rem'} />
+          </div>
+        </div>
+        <div>
+          <Skeleton width={'100%'} height={'4rem'} variant="rectangular" />
+        </div>
+      </div>
+    </ConsultCardSkeletonWrapper>
+  );
+}
+
+const ConsultCardSkeletonWrapper = styled.div`
+  display: flex;
+  width: calc(100% - 4rem);
+  height: 11.5rem;
+  padding: 1.4rem 1.6rem 1.4rem 1.6rem;
+  border-radius: 0.4rem;
+  box-sizing: border-box;
+  background-color: ${Grey6};
+  gap: 3rem;
+  .flex-1 {
+    display: flex;
+    width: 6rem;
+    flex-direction: column;
+    gap: 0.5rem;
+    align-items: center;
+  }
+  .flex-2 {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    gap: 1.5rem;
+  }
+`;
+
+export default ConsultCardSkeleton;

src/pages/Seller/SellerLetter.tsx

@@ -26,7 +26,7 @@ import {
 export const SellerLetter = () => {
   const navigate = useNavigate();
   // 상단 태그상태 -> 질문, 답장, 추가질문 , 추가답장 : 0,1,2,3
-  const [tagStatus, setTagStatus] = useState<number>(0);
+  const [tagStatus, setTagStatus] = useState<number>();
   // 현재 편지의 태그 활성화레벨, tagStatus가 tagActiveLevel보다 작으면 검은색, 같거나 크면 희색:  0 1 2 3 4
   const [tagActiveLevel, setTagActiveLevel] = useState<number>(0);
   // 신고할 것인지 여부
@@ -113,17 +113,19 @@ export const SellerLetter = () => {
     const fetchMessages = async () => {
       setIsLoading(true);
       const params = {
-        messageType: messageTypeMap[tagStatus as keyof typeof messageTypeMap],
+        messageType:
+          messageTypeMap[tagStatus as keyof typeof messageTypeMap] ?? "intended_error",
         isCompleted: true,
       };
       try {
         const res: any = await getLetterMessages({ params }, consultid);
-        setText(res.data.content);
-        setDate(res.data.updatedAt);
+        setText(res.data?.content);
+        setDate(res.data?.updatedAt);
         setIsLoading(false);
       } catch (err) {
         alert(err);
-        navigate('/seller');
+        console.log(err);
+        navigate('/minder');
       }
     };
     fetchMessages();

src/pages/Seller/SellerMyPageModifyProfile.tsx

@@ -1,4 +1,5 @@
 import { getMyInfo, getProfiles } from 'api/get';
+import { Space } from 'components/Common/Space';
 import { CategoryModal } from 'components/Seller/SellerMyPageModifyProfile/CategoryModal';
 import IsOutPopup from 'components/Seller/SellerMyPageModifyProfile/IsOutPopup';
 import { ModifyProfileHeader } from 'components/Seller/SellerMyPageModifyProfile/ModifyProfileHeader';
@@ -15,6 +16,7 @@ import { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useRecoilState } from 'recoil';
 import styled from 'styled-components';
+import { LoadingSpinner } from 'utils/LoadingSpinner';
 import {
   isBankModalOpenState,
   isCategoryModalOpenState,
@@ -87,6 +89,7 @@ export const SellerMypageModifyProfile = () => {
   const oneLiner = useInput('');
   const experience = useInput('');
   const [isNoProfile, setIsNoProfile] = useState(false);
+  const [isLoading, setIsLoading] = useState(true);
   const navigate = useNavigate();
   useEffect(() => {
     const fetchProfile = async () => {
@@ -133,6 +136,7 @@ export const SellerMypageModifyProfile = () => {
           setSelectedTimeList({ ...selectedTimeList, ...data?.consultTimes });
           oneLiner.setValue(data?.introduction);
           experience.setValue(data?.experience);
+          setIsLoading(false);
         }
       } catch (err) {
         navigate('/seller/mypage');
@@ -144,15 +148,19 @@ export const SellerMypageModifyProfile = () => {
     };
     fetchProfile();
   }, []);
-  console.log(selectType);
   return (
     <>
       <ModifyProfileHeader
         isNoProfile={isNoProfile}
         isSetChatTime={isSetChatTime}
         setIsSetChatTime={setIsSetChatTime}
       />
-      {isSucessUpdate ? (
+      {isLoading ? (
+        <>
+          <Space height="20vh" />
+          <LoadingSpinner />
+        </>
+      ) : isSucessUpdate ? (
         <UpdateSuccess />
       ) : isSetChatTime ? (
         <SetChatTimeSection