Merge pull request #80 from olmangjolmang/develop

Merge: 프로필 제외 QA 수정사항 반영 배포

.babelrc

@@ -0,0 +1,7 @@
+{
+  "presets": [
+    "@babel/preset-env",
+    "@babel/preset-react",
+    "@babel/preset-typescript"
+  ]
+}

__mocks__/fileMock.js

@@ -0,0 +1 @@
+module.exports = "test-file-stub";

jest.config.js

@@ -0,0 +1,16 @@
+module.exports = {
+  preset: "ts-jest",
+  testEnvironment: "jsdom",
+  transform: {
+    "^.+\\.(ts|tsx)$": "ts-jest",
+    "^.+\\.jsx?$": "babel-jest", // 추가된 부분: ES6 모듈 지원
+  },
+  transformIgnorePatterns: [
+    "/node_modules", // 추가된 부분: axios 모듈 변환
+  ],
+  moduleNameMapper: {
+    "\\.(css|less|scss|sass)$": "identity-obj-proxy",
+    "\\.(svg)$": "<rootDir>/__mocks__/svgMock.js",
+  },
+  setupFilesAfterEnv: ["<rootDir>/src/setupTests.ts"],
+};

package.json

@@ -4,11 +4,7 @@
   "private": true,
   "dependencies": {
     "@emotion/styled": "^11.11.5",
-    "@tanstack/react-query": "^5.51.9",
     "@tanstack/react-query-devtools": "^5.51.9",
-    "@testing-library/jest-dom": "^5.17.0",
-    "@testing-library/react": "^13.4.0",
-    "@testing-library/user-event": "^13.5.0",
     "axios": "^1.7.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
@@ -44,9 +40,26 @@
     ]
   },
   "devDependencies": {
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
+    "@babel/preset-env": "^7.24.8",
+    "@babel/preset-typescript": "^7.24.7",
     "@emotion/react": "^11.11.4",
+    "@tanstack/react-query": "^5.51.11",
+    "@testing-library/jest-dom": "^6.4.8",
+    "@testing-library/react": "^16.0.0",
+    "@testing-library/user-event": "^14.5.2",
+    "@types/jest": "^29.5.12",
     "@types/react": "^18.3.3",
     "@types/react-slick": "^0.23.13",
+    "babel-jest": "^29.7.0",
+    "jest": "^29.7.0",
+    "ts-jest": "^29.2.3",
     "typescript": "~4.9.5"
+  },
+  "type": "module",
+  "jest": {
+    "moduleNameMapper": {
+      "^axios$": "axios/dist/node/axios.cjs"
+    }
   }
 }

src/App.tsx

@@ -1,7 +1,7 @@
 import "./App.css";
 import React from "react";
 import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
-import axios from "axios";
+
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import MainPage from "./pages/MainPage";
 import { Login } from "./pages/Login";
@@ -15,7 +15,6 @@ import InterestEdit from "./pages/InterestEdit";
 import QnaBoard from "./pages/QnaBoard";
 import AnswerList from "./pages/AnswerList";
 import MyPage from "./pages/Mypage";
-import axiosInstance from "./api/AxiosInstance"; // Axios 인스턴스 가져오기
 
 const queryClient = new QueryClient();
 

src/components/Answer.tsx

@@ -1,6 +1,5 @@
-import React, { useState } from "react";
+import { useState } from "react";
 import styled from "styled-components";
-
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import ticleImg from "../assets/signupmodalimg.png";
 import axiosInstance from "../api/AxiosInstance";
@@ -73,9 +72,13 @@ const Answer = ({
           <ProfileImage src={ticleImg} alt="Profile" />
           <Author>{nickname}</Author>
         </ProfileSection>
-        <LikeSection onClick={handleLike}>
-          {isHeart === false ? <NonHeartIcon /> : <HeartIcon />}
-          <Likes>{heartCount}</Likes>
+        <LikeSection data-testid="like-section" onClick={handleLike}>
+          {liked ? (
+            <HeartIcon data-testid="heart-icon" />
+          ) : (
+            <NonHeartIcon data-testid="non-heart-icon" />
+          )}
+          <Likes>{likes}</Likes>
         </LikeSection>
       </Container>
       <Content>{content}</Content>
@@ -112,7 +115,7 @@ const ProfileImage = styled.img`
 
 const Author = styled.div`
   font-family: Pretendard;
-  font-size: 24px;
+  font-size: 20px;
   font-style: normal;
   font-weight: 600;
   line-height: 150%; /* 36px */
@@ -121,7 +124,7 @@ const Author = styled.div`
 
 const Content = styled.div`
   font-family: Pretendard;
-  font-size: 24px;
+  font-size: 20px;
   font-style: normal;
   font-weight: 500;
   line-height: 32px; /* 133.333% */
@@ -136,26 +139,23 @@ const LikeSection = styled.div`
 `;
 
 const HeartIcon = styled.div`
-  width: 41px;
-  height: 41px;
+  width: 32px;
+  height: 32px;
   margin-right: 16px;
   background: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="41" height="41" viewBox="0 0 41 41" fill="none"%3E%3Cpath d="M20.5007 35.5L18.084 33.342C9.50065 25.7071 3.83398 20.6717 3.83398 14.4918C3.83398 9.4564 7.86732 5.5 13.0007 5.5C15.9007 5.5 18.684 6.82425 20.5007 8.91689C22.3173 6.82425 25.1007 5.5 28.0007 5.5C33.134 5.5 37.1673 9.4564 37.1673 14.4918C37.1673 20.6717 31.5007 25.7071 22.9173 33.3583L20.5007 35.5Z" fill="%23FF4444" stroke="%23FF4444" stroke-width="3"/%3E%3C/svg%3E')
     no-repeat center center;
   background-size: contain;
 `;
+
 const NonHeartIcon = styled.div`
-  width: 41px;
-  height: 41px;
+  width: 32px;
+  height: 32px;
   margin-right: 16px;
   background: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="41" height="41" viewBox="0 0 41 41" fill="none"%3E%3Cpath d="M20.0007 35L17.584 32.842C9.00065 25.2071 3.33398 20.1717 3.33398 13.9918C3.33398 8.9564 7.36732 5 12.5007 5C15.4007 5 18.184 6.32425 20.0007 8.41689C21.8173 6.32425 24.6007 5 27.5007 5C32.634 5 36.6673 8.9564 36.6673 13.9918C36.6673 20.1717 31.0007 25.2071 22.4173 32.8583L20.0007 35Z" stroke="%23FF4444" stroke-width="3"/%3E%3C/svg%3E')
     no-repeat center center;
   background-size: contain;
 `;
 
-// <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40" fill="none">
-//   <path d="M20.0007 35L17.584 32.842C9.00065 25.2071 3.33398 20.1717 3.33398 13.9918C3.33398 8.9564 7.36732 5 12.5007 5C15.4007 5 18.184 6.32425 20.0007 8.41689C21.8173 6.32425 24.6007 5 27.5007 5C32.634 5 36.6673 8.9564 36.6673 13.9918C36.6673 20.1717 31.0007 25.2071 22.4173 32.8583L20.0007 35Z" stroke="#FF4444" stroke-width="3"/>
-// </svg>
-
 const Likes = styled.div`
   font-family: Pretendard;
   font-size: 24px;

src/components/FloatingButtons.tsx

@@ -20,11 +20,11 @@ const FixedButtons = styled.div`
   z-index: 1000;
 `;
 
-const Icon = styled.img<{ src: string; hoverSrc: string; activeSrc?: string }>`
+const Icon = styled.img<{ hoverSrc: string; activeSrc?: string }>`
   width: 44px;
   height: 44px;
   cursor: pointer;
-  transition: background-color 0.3s;
+  transition: background-color 0.3s, content 0.3s;
   background: white;
   border-radius: 50%;
 
@@ -40,11 +40,12 @@ const Icon = styled.img<{ src: string; hoverSrc: string; activeSrc?: string }>`
 
 interface FloatingButtonsProps {
   onMenuClick: () => void;
-  onSaveClick: () => void; // 추가된 prop
+  onSaveClick: () => void;
+  isSaved: boolean; // 추가된 prop
 }
 
 // 컴포넌트 정의
-const FloatingButtons: React.FC<FloatingButtonsProps> = ({ onMenuClick, onSaveClick }) => {
+const FloatingButtons: React.FC<FloatingButtonsProps> = ({ onMenuClick, onSaveClick, isSaved }) => {
   const scrollToTop = () => {
     window.scrollTo({ top: 0, behavior: "smooth" });
   };
@@ -64,10 +65,10 @@ const FloatingButtons: React.FC<FloatingButtonsProps> = ({ onMenuClick, onSaveCl
         onClick={onMenuClick}
       />
       <Icon
-        src={bookmarkIcon}
+        src={isSaved ? bookmarkIconSelected : bookmarkIcon}
         hoverSrc={bookmarkIconSelected}
         activeSrc={bookmarkIconSelected}
-        onClick={onSaveClick} // 추가된 클릭 핸들러
+        onClick={onSaveClick}
       />
     </FixedButtons>
   );

src/components/HighlightModal.tsx

@@ -51,8 +51,8 @@ const HighlightModal: React.FC<HighlightModalProps> = ({
         <CloseButton onClick={handleStop}>
           <svg
             xmlns="http://www.w3.org/2000/svg"
-            width="45"
-            height="45"
+            width="33"
+            height="32"
             viewBox="0 0 45 45"
             fill="none"
           >
@@ -65,6 +65,7 @@ const HighlightModal: React.FC<HighlightModalProps> = ({
         <ModalHeader>메모</ModalHeader>
         <HighlightedTextContainer>{highlightedText}</HighlightedTextContainer>
         <TextArea
+          hasText={note.length > 0}
           value={note}
           onChange={(e) => setNote(e.target.value)}
           placeholder="메모를 작성해주세요."

src/components/PostItemMain.tsx

@@ -62,7 +62,17 @@ const PostItemMain: React.FC<PostItemProps> = ({
       <CategoryRow>
         <Category>{postCategory}</Category>
         {isSavedIconLoad && (
-          <StyledSaveIcon isSaved={saved} onClick={handleSave} />
+          <SaveIconWrapper
+            role="button"
+            tabIndex={0}
+            aria-pressed={saved}
+            onClick={(e) => {
+              e.stopPropagation();
+              handleSave();
+            }}
+          >
+            <StyledSaveIcon $isSaved={saved} />
+          </SaveIconWrapper>
         )}
       </CategoryRow>
       <Title>{title}</Title>
@@ -162,14 +172,20 @@ const Author = styled.div<{ hasSummary: boolean }>`
   `}
 `;
 
-const StyledSaveIcon = styled(SaveIcon)<{ isSaved: boolean }>`
+const SaveIconWrapper = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+`;
+
+const StyledSaveIcon = styled(SaveIcon)<{ $isSaved: boolean }>`
   width: 16.667px;
   height: 25.976px;
   flex-shrink: 0;
-  fill: ${({ isSaved }) =>
-    isSaved ? "#463efb" : "#ffffff"}; // 조건에 따라 색상 변경
+  fill: ${({ $isSaved }) =>
+    $isSaved ? "#463efb" : "#ffffff"}; // 조건에 따라 색상 변경
   margin-right: 21.67px;
   stroke-width: 3px;
   stroke: #463efb;
-  cursor: pointer;
 `;

src/components/QnA.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import styled from "@emotion/styled";
 import viewIcon from "../assets/viewIcon.png";
 import commentIcon from "../assets/commentIcon.png";
@@ -18,13 +17,13 @@ type QnAProps = {
   comments?: Comment[];
 };
 
-const QnA: React.FC<QnAProps> = ({
+const QnA = ({
   opinionId,
   question,
   viewCount,
   commentCount,
   comments,
-}) => {
+}: QnAProps) => {
   const navigate = useNavigate();
   const location = useLocation();
 
@@ -74,7 +73,7 @@ const QuizContainer = styled.div`
 `;
 
 const Title = styled.div`
-  font-size: 40px;
+  font-size: 28px;
   font-weight: 600;
   font-family: Pretendard;
   color: #000;