Hotfix/#71/jaeguk (#77)

* fix: refresh토큰 만료시간 6시간으로 조정 * feat: 마일리지 관련 팁 데이터 변경 * fix: 회원가입 완료시 confirm이 아닌 alert로 알림 * fix: 내 글 목록에서 글쓰기 버튼시 Not Found로 가는 버그 해결 * style: MapCard 컴포넌트 스타일링 변경 * feat: 기업회원 회원가입 추가 * feat: 사업자 등록번호 key registNum으로 통일 * chore: 불필요한 import 제거 * feat: 헤더 NavBar 클릭 시 대표 페이지로 이동 * chore: D-day 표시에 D- 빠진 것 추가 * chore: confrim 메시지 출력 후 취소시 뒤로가기 * style: 게시물 목록 컴포넌트 width 고정 * style: 게시물 Item 레이아웃 조정 * style: 게시물 Item 등록날짜 태그 width 변경 * fix: 게시물 상세 페이지에서 데이터 로드되지 않으면 레이아웃 보이지 않게
Kusitms-28th-Meet-Up-B · Nov 23, 2023 · 718954e · 718954e
1 parent 98fce9d
commit 718954e
Show file tree

Hide file tree

Showing 7 changed files with 68 additions and 44 deletions.
diff --git a/src/apis/index.ts b/src/apis/index.ts
@@ -79,6 +79,8 @@ Axios.interceptors.response.use(
         // refreshToken이 없다는 건 로그인을 해야 한다는 것
         if (window.confirm('로그인이 필요한 서비스입니다.')) {
           window.location.href = '/login';
+        } else {
+          window.history.go(-1);
         }
       }
     } else if (error.response?.data?.code === 1001) {
@@ -91,7 +93,7 @@ Axios.interceptors.response.use(
         )}`;
       }
     }
-    return error;
+    throw error;
   },
 );
 

diff --git a/src/pages/DetailPosting/PostingBox.tsx b/src/pages/DetailPosting/PostingBox.tsx
@@ -1,36 +1,15 @@
-import { useState, useEffect } from 'react';
-import { useParams } from 'react-router-dom';
 import styled from 'styled-components';
 
 import Attatchment from './Attatchment';
 import Posting from './Posting';
 import { PostingDataType } from '@/types';
 import PostingNav from './PostingNav';
-import { useQuery } from 'react-query';
-import { fetchPostingDetail } from '@/apis/posting';
-import Loading from '@/components/Loading/Loading';
-
-const PostingBox: React.FC<{ postingType: string }> = ({ postingType }) => {
-  const { id } = useParams();
-  const postingId = parseInt(id as string, 10);
-  const [isLike, setIsLike] = useState(false);
-
-  const { isLoading, data } = useQuery(
-    [postingType, 'detail', postingId],
-    fetchPostingDetail(postingType, postingId),
-  );
-
-  useEffect(() => {
-    const likeCheck = data?.data?.result?.likeCheck;
-    if (likeCheck) {
-      setIsLike(likeCheck);
-    }
-  }, [data?.data?.result?.likeCheck]);
-
-  if (isLoading) return <Loading />;
-
-  const postingData: PostingDataType = data?.data?.result;
-
+const PostingBox: React.FC<{
+  id: number;
+  postingData: PostingDataType;
+  isLike: boolean;
+  setIsLike: React.Dispatch<React.SetStateAction<boolean>>;
+}> = ({ id: postingId, postingData, isLike, setIsLike }) => {
   return (
     <Container>
       <Posting {...postingData} isLike={isLike} setIsLike={setIsLike} />
@@ -43,7 +22,7 @@ const PostingBox: React.FC<{ postingType: string }> = ({ postingType }) => {
       <PostingNav
         prevId={postingData?.previousId || postingId}
         nextId={postingData?.nextId || postingId}
-        id={parseInt(id as string, 10)}
+        id={postingId}
       />
     </Container>
   );

diff --git a/src/pages/DetailPosting/index.tsx b/src/pages/DetailPosting/index.tsx
@@ -1,29 +1,67 @@
 import styled from 'styled-components';
 import PostingBox from './PostingBox';
 import OtherPostings from './OtherPostings';
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
+import { PostingDataType } from '@/types';
+import { useParams } from 'react-router-dom';
+import { useQuery } from 'react-query';
+import { fetchPostingDetail } from '@/apis/posting';
+import Loading from '@/components/Loading/Loading';
 
 interface Props {
   title: string;
 }
 
 const DetailPosting: React.FC<Props> = ({ title }) => {
+  const { id } = useParams();
+  const postingId = parseInt(id as string, 10);
+  const [isLike, setIsLike] = useState(false);
+
   const postingType: string = window.location.pathname.includes('review')
     ? 'reviews'
     : 'archives';
 
+  const { isLoading, data } = useQuery(
+    [postingType, 'detail', postingId],
+    fetchPostingDetail(postingType, postingId),
+  );
+
+  useEffect(() => {
+    const likeCheck = data?.data?.result?.likeCheck;
+    if (likeCheck) {
+      setIsLike(likeCheck);
+    }
+  }, [data?.data?.result?.likeCheck]);
+
+  useEffect(() => {
+    console.log('render');
+  }, []);
+
+  if (isLoading) return <Loading />;
+
   useEffect(() => {
     window.scrollTo({ top: 0, behavior: 'smooth' });
   }, []);
 
+  const postingData: PostingDataType = data?.data?.result;
+
   return (
-    <Container>
-      <Title>{title}</Title>
-      <PostingBox postingType={postingType} />
-      {!window.location.pathname.includes('user') && (
-        <OtherPostings postingType={postingType} />
+    <>
+      {postingData && (
+        <Container>
+          <Title>{title}</Title>
+          <PostingBox
+            id={parseInt(id as string, 10)}
+            postingData={postingData}
+            isLike={isLike}
+            setIsLike={setIsLike}
+          />
+          {!window.location.pathname.includes('user') && (
+            <OtherPostings postingType={postingType} />
+          )}
+        </Container>
       )}
-    </Container>
+    </>
   );
 };
 

diff --git a/src/pages/board/Board.tsx b/src/pages/board/Board.tsx
@@ -106,8 +106,8 @@ const Container = styled.div`
   align-items: center;
   gap: 88px;
 
-  padding: 0 260px;
-  margin-bottom: 128px;
+  width: 1400px;
+  margin: 0 auto 128px;
 `;
 
 const SearchBarWrapper = styled.div`

diff --git a/src/pages/board/PostingList.tsx b/src/pages/board/PostingList.tsx
@@ -72,7 +72,7 @@ const TopBarContainer = styled.div`
   background: var(--background, #f6f6f6);
 
   .board_name {
-    width: 63px;
+    width: 143px;
   }
   .title {
     width: 580px;
@@ -83,7 +83,7 @@ const TopBarContainer = styled.div`
     text-align: center;
   }
   .register_date {
-    width: 91px;
+    width: 100px;
     text-align: center;
   }
 `;

diff --git a/src/pages/board/components/Posting.tsx b/src/pages/board/components/Posting.tsx
@@ -40,7 +40,9 @@ const Posting: React.FC<PostingType> = ({
       <B2Bold $fontColor="#53575C" className="writer">
         {writer}
       </B2Bold>
-      <B2Bold $fontColor="#53575C">{truncDate()}</B2Bold>
+      <B2Bold $fontColor="#53575C" className="registerDate">
+        {truncDate()}
+      </B2Bold>
     </Container>
   );
 };
@@ -57,7 +59,7 @@ const Container = styled.div`
   border-bottom: 0.5px solid var(--grey-400, #e3e7ed);
 
   .board_name {
-    width: 64px;
+    width: 143px;
   }
   .title {
     width: 580px;
@@ -76,4 +78,7 @@ const Container = styled.div`
     width: 140px;
     text-align: center;
   }
+  .registerDate {
+    width: 100px;
+  }
 `;
diff --git a/src/pages/map/components/MapCard.tsx b/src/pages/map/components/MapCard.tsx
@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import styled from 'styled-components';
 
-import { B1Bold } from '../../../style/fonts/StyledFonts';
+import { B1Bold } from '@/style/fonts/StyledFonts';
 import LikeButton from '@/components/Button/LikeButton';
 import CloseIcon from '@/assets/icons/icon-close.svg';
 
@@ -52,7 +52,7 @@ const MapCard: React.FC<Props> = ({
       </ImageWrapper>
       <BottomContainer>
         <TextContainer>
-          <B1Bold $fontColor="#FF7D2C">{remainDay}</B1Bold>
+          <B1Bold $fontColor="#FF7D2C">{`D-${remainDay}`}</B1Bold>
           <B1Bold $fontColor="#15191D">{programName}</B1Bold>
         </TextContainer>
         <LikeButton