🐛 Fix: 회고 생성일 날짜 형식 수정 및 생성자 닉네임 렌더링 완료

donga-it-club · Apr 20, 2024 · 95033bd · 95033bd
1 parent 1e3597f
commit 95033bd
Show file tree

Hide file tree

Showing 7 changed files with 45 additions and 37 deletions.
diff --git a/src/api/@types/Retrospectives.ts b/src/api/@types/Retrospectives.ts
@@ -46,6 +46,7 @@ export interface GetRetrospectiveResponseNodes {
   startDate: string;
   createdDate: string;
   updatedDate: string;
+  username: string;
 }
 
 export interface GetRetrospectiveData {

diff --git a/src/api/@types/User.ts b/src/api/@types/User.ts
@@ -1,14 +1,14 @@
 // get
-export interface GetUsersRequest {
-  // userId: number;
-}
-
 export interface GetUsersResponse {
-  userId: number;
-  username: string;
-  email: string;
-  thumbnail: string | null;
-  phone: string | null;
-  createDate: Date;
-  updateDate: Date;
+  code: number;
+  data: {
+    userId: number;
+    userName: string;
+    email: string;
+    thumbnail: string | null;
+    phone: string | null;
+    createDate: Date;
+    updateDate: Date;
+  };
+  message: string | null;
 }
diff --git a/src/api/axiosConfig.tsx b/src/api/axiosConfig.tsx
@@ -65,7 +65,7 @@ axiosInstance.interceptors.request.use(
 
       // 헤더에 토큰 추가
       config.headers.Authorization = `Bearer ${authToken}`;
-      console.log('헤더에 토큰 추가 확인', config.headers.Authorization);
+      // console.log('헤더에 토큰 추가 확인', config.headers.Authorization);
       return config;
     } catch (err) {
       console.error('에러', err);

diff --git a/src/components/RetroList/ContentsList.tsx b/src/components/RetroList/ContentsList.tsx
@@ -8,15 +8,12 @@ import { IoMdPerson } from 'react-icons/io';
 import { MdPeople } from 'react-icons/md';
 import { RxCounterClockwiseClock } from 'react-icons/rx'; //before
 import { useNavigate } from 'react-router-dom';
-import { useRecoilState } from 'recoil';
 import { PatchRetrospectiveRequest } from '@/api/@types/Retrospectives';
 import postImageToS3 from '@/api/imageApi/postImageToS3';
 import { patchRetrospective } from '@/api/retrospectivesApi/patchRetrospective';
 import Thumbnail from '@/assets/Thumbnail.png';
 import Modal from '@/components/RetroList/Modal';
-import UserNickname from '@/components/user/UserNickname';
 import { useCustomToast } from '@/hooks/useCustomToast';
-import { userNicknameState } from '@/recoil/user/userAtom';
 import * as S from '@/styles/RetroList/ContentsList.styles';
 
 interface Content {
@@ -31,6 +28,7 @@ interface Content {
   startDate: string;
   createdDate: string;
   updatedDate: string;
+  username: string;
 }
 
 interface ContentListProps {
@@ -42,7 +40,6 @@ interface ContentListProps {
 
 const ContentList: React.FC<ContentListProps> = ({ data, viewMode, searchData, setBookmarkUpdate }) => {
   // const [contentData, setContentData] = useState<Content[]>(data); 받아온데이터
-  const [userNickname, setUserNickname] = useRecoilState(userNicknameState);
   const [openModalId, setOpenModalId] = useState<number | null>(null);
   const toast = useCustomToast();
   const [image, setImage] = useState<{ [key: number]: string }>({});
@@ -73,6 +70,12 @@ const ContentList: React.FC<ContentListProps> = ({ data, viewMode, searchData, s
   console.log('filter', filteredData);
   const navigate = useNavigate();
 
+  const convertToLocalTime = (dateString: string | number | Date) => {
+    const date = new Date(dateString);
+    const localTime = new Date(date.getTime() - date.getTimezoneOffset() * 60000);
+    return localTime.toLocaleString(); // 로컬 타임존으로 변환하여 문자열로 반환
+  };
+
   useEffect(() => {
     const fetchThumbnailsData = async (item: Content) => {
       try {
@@ -138,15 +141,13 @@ const ContentList: React.FC<ContentListProps> = ({ data, viewMode, searchData, s
                     }}
                   />
                 </div>
-                <S.RetroUser>
-                  <UserNickname setUserNickname={setUserNickname} /> {/* 생성자 이름(유저 식별 필요) */}
-                  {userNickname}
-                </S.RetroUser>
+                <S.RetroUser>{item.username}</S.RetroUser>
                 <div></div>
                 <S.RetroDate>
-                  {item.updatedDate && item.updatedDate !== item.startDate
-                    ? `${item.updatedDate} 수정`
-                    : item.startDate}
+                  {item.updatedDate !== item.createdDate
+                    ? `${convertToLocalTime(item.updatedDate)} 수정`
+                    : convertToLocalTime(item.createdDate)}
+                  {/* {item.updatedDate !== item.createdDate ? `${item.updatedDate} 수정` : item.createdDate} */}
                 </S.RetroDate>
                 {item.status === 'NOT_STARTED' && (
                   <RxCounterClockwiseClock
@@ -183,10 +184,7 @@ const ContentList: React.FC<ContentListProps> = ({ data, viewMode, searchData, s
                   <S.ListTitleBox onClick={() => navigate(`/section?retrospectiveId=${item.id}&teamId=${item.teamId}`)}>
                     {item.title}
                   </S.ListTitleBox>
-                  <S.ListUserBox>
-                    <UserNickname setUserNickname={setUserNickname} /> {/* 생성자이름(유저 식별 필요) */}
-                    {userNickname}
-                  </S.ListUserBox>
+                  <S.ListUserBox>{item.username}</S.ListUserBox>
                   <S.ListTimeBox>
                     {item.updatedDate && item.updatedDate !== item.startDate ? `${item.updatedDate}` : item.startDate}
                   </S.ListTimeBox>

diff --git a/src/components/createRetro/modal/ImageUpload.tsx b/src/components/createRetro/modal/ImageUpload.tsx
@@ -45,16 +45,21 @@ const ImageUpload: React.FC<ImageUploadProps> = ({ onChange }) => {
             </Button>
           </label>
         </Center>
-
         {/* 이미지 미리보기 */}
-        {imagePreview && (
-          <Center mt={4}>
-            <Image src={imagePreview} alt="Selected Image" maxH="200px" />
-            <Button variant="outline" borderColor="gray.700" size="md" width="15rem" onClick={handleRemoveImage}>
-              이미지 제거
-            </Button>
-          </Center>
-        )}
+        <Center>
+          {imagePreview && (
+            <Box mt={4}>
+              <Center>
+                <Image src={imagePreview} alt="Selected Image" maxH="200px" />
+              </Center>
+              <Center mt={2}>
+                <Button variant="outline" borderColor="gray.700" size="md" width="15rem" onClick={handleRemoveImage}>
+                  이미지 제거
+                </Button>
+              </Center>
+            </Box>
+          )}
+        </Center>
       </Box>
     </>
   );

diff --git a/src/pages/MyPage.tsx b/src/pages/MyPage.tsx
@@ -56,7 +56,7 @@ const MyPage = () => {
 
       <S.MyPageBGContainer>
         <S.MyPageContainer>
-          {userData?.thumbnail}
+          {userData?.data.thumbnail}
           <ImageUploader image={image} setImage={setImage} />
           <NicknameBox />
           <EmailBox />

diff --git a/src/pages/RetroListPage.tsx b/src/pages/RetroListPage.tsx
@@ -83,6 +83,7 @@ const RetroListPage = () => {
       startDate: formatDate(item.startDate),
       createdDate: formatDate(item.createdDate),
       updatedDate: formatDate(item.updatedDate),
+      username: item.username,
     }));
     setRetroData(rawData);
   }, [data.nodes]);
@@ -104,6 +105,7 @@ const RetroListPage = () => {
           startDate: formatDate(item.startDate),
           createdDate: formatDate(item.createdDate),
           updatedDate: formatDate(item.updatedDate),
+          username: item.username,
         }));
       setRetroData(filtered);
     } else if (filterType === 'Teams') {
@@ -121,6 +123,7 @@ const RetroListPage = () => {
           startDate: formatDate(item.startDate),
           createdDate: formatDate(item.createdDate),
           updatedDate: formatDate(item.updatedDate),
+          username: item.username,
         }));
       setRetroData(filtered);
     } else if (filterType === 'ALL') {
@@ -136,6 +139,7 @@ const RetroListPage = () => {
         startDate: formatDate(item.startDate),
         createdDate: formatDate(item.createdDate),
         updatedDate: formatDate(item.updatedDate),
+        username: item.username,
       }));
       setRetroData(rawData);
     }