Merge: QA1차수정사항 반영 배포

src/components/Boards.tsx

@@ -7,7 +7,7 @@ import CategorySelector from "./CategorySelector";
 import Pagination from "./Pagination";
 import Select from "./Select";
 import { Category, OrderBy, CATEGORY_LABELS } from "../types/ArticleBoards";
-import { Container, GridContainer } from "../styles/ArticleBoards";
+import { Container, GridContainer, NoContent } from "../styles/ArticleBoards";
 import { Option } from "../types/ArticleBoards";
 
 const orderByOptions: Option[] = [
@@ -56,6 +56,7 @@ const Boards = () => {
 
   if (isLoading) return <div>아티클을 불러오는 중입니다.</div>;
   if (isError) return <div>잘못된 접근입니다.</div>;
+
   console.log(data);
   return (
     <Container>
@@ -73,16 +74,20 @@ const Boards = () => {
           options={orderByOptions}
         />
       </div>
-      <GridContainer>
-        {data &&
-          data.results.content.map((article: any) => (
-            <PostItemMain
-              key={article.postId}
-              {...article}
-              postCategory={CATEGORY_LABELS[article.postCategory as Category]}
-            />
-          ))}
-      </GridContainer>
+      {data && data.results.empty === true ? (
+        <NoContent>조건에 맞는 아티클이 없습니다.</NoContent>
+      ) : (
+        <GridContainer>
+          {data &&
+            data.results.content.map((article: any) => (
+              <PostItemMain
+                key={article.postId}
+                {...article}
+                postCategory={CATEGORY_LABELS[article.postCategory as Category]}
+              />
+            ))}
+        </GridContainer>
+      )}
       <Pagination
         currentPage={page}
         totalPages={data.results.totalPages}

src/components/HighlightModal.tsx

@@ -1,85 +1,15 @@
 import React, { useState } from "react";
-import styled from "styled-components";
 import ConfirmationModal from "./ConfirmationModal";
 import StopConfirmationModal from "./StopConfirmationModal";
-
-const ModalOverlay = styled.div`
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: 100vh;
-  background: rgba(0, 0, 0, 0.5);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  z-index: 999;
-`;
-
-const ModalContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 72px 112px;
-  width: 800px;
-  height: 600px;
-  background-color: #fff;
-  border-radius: 10px;
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-  position: relative;
-`;
-
-const ModalHeader = styled.div`
-  font-size: 24px;
-  font-weight: bold;
-  margin-bottom: 40px;
-  align-self: flex-start;
-`;
-
-const HighlightedTextContainer = styled.div`
-  width: 100%;
-  padding: 10px;
-  color: #272726;
-  margin-bottom: 40px;
-  font-size: 18px;
-  white-space: pre-wrap;
-`;
-
-const TextArea = styled.textarea`
-  width: 93%;
-  height: 570px;
-  padding: 30px;
-  background-color: #f4f4f7;
-  border-radius: 20px;
-  border: none;
-  resize: none;
-  font-size: 16px;
-  color: #afafb6;
-  font-weight: 500;
-`;
-
-const Button = styled.button`
-  margin-top: 32px;
-  width: 90.75px;
-  padding: 7.5px;
-  background-color: #463efb;
-  color: white;
-  border: none;
-  border-radius: 10px;
-  cursor: pointer;
-  align-self: flex-end;
-`;
-
-const CloseButton = styled.button`
-  position: absolute;
-  top: 60px;
-  right: 90px;
-  width: 15px;
-  height: 15px;
-  background: none;
-  border: none;
-  cursor: pointer;
-`;
+import {
+  ModalOverlay,
+  ModalContainer,
+  ModalHeader,
+  HighlightedTextContainer,
+  TextArea,
+  Button,
+  CloseButton,
+} from "../styles/HighlightModal";
 
 interface HighlightModalProps {
   highlightedText: string;

src/components/PostItemGroup.tsx

@@ -15,6 +15,7 @@ import styled from "styled-components";
 import { Category, CATEGORY_LABELS } from "../types/ArticleBoards";
 
 interface ResponseItem {
+  postId: number;
   title: string;
   imageUrl: string;
   category: string;
@@ -85,6 +86,7 @@ const PostItemGroup = ({ topic, responseList }: Result) => {
         <Slider {...settings}>
           {responseList.map((post) => (
             <PostItemHome
+              postId={post.postId}
               imageUrl={post.imageUrl}
               category={CATEGORY_LABELS[post.category as Category]}
               title={post.title}

src/components/PostItemHome.tsx

@@ -1,11 +1,11 @@
-import React, { useState } from "react";
+import { useNavigate, useLocation } from "react-router-dom";
 import styled from "@emotion/styled";
-import { css } from "@emotion/react";
 import { ReactComponent as SaveIcon } from "../assets/saveIcon.svg";
 import axiosInstance from "../api/AxiosInstance";
 
 // 게시물 정보를 나타내는 타입 정의
 interface ResponseItem {
+  postId: number;
   title: string;
   imageUrl: string;
   category: string;
@@ -14,21 +14,30 @@ interface ResponseItem {
 }
 
 const PostItemHome = ({
+  postId,
   title,
   imageUrl,
   category,
   author,
   createdDate,
 }: ResponseItem) => {
+  const navigate = useNavigate();
+  const location = useLocation();
+
+  const handleNavigate = () => {
+    navigate(`/post/${postId}`, {
+      state: { from: location.pathname + location.search },
+    });
+  };
   return (
-    <Container>
+    <Container onClick={handleNavigate}>
       <Image src={imageUrl} alt="미리보기 이미지" />
       <CategoryRow>
         <Category>{category}</Category>
       </CategoryRow>
       <Title>{title}</Title>
       <Author>
-        {author} {createdDate}
+        {author} | {createdDate}
       </Author>
     </Container>
   );

src/components/PostItemMain.tsx

@@ -68,7 +68,7 @@ const PostItemMain: React.FC<PostItemProps> = ({
       <Title>{title}</Title>
       {content && <Summary>{content}</Summary>}
       <Author hasSummary={!!content}>
-        {author} {createdDate}
+        {author} | {createdDate}
       </Author>
     </Container>
   );

src/components/SubscriptionModal.tsx

@@ -1,5 +1,4 @@
-import React from "react";
-import { useState } from "react";
+import React, { useState, useEffect } from "react";
 import {
   ModalOverlay,
   ModalContent,
@@ -20,6 +19,8 @@ import {
   Span,
 } from "../styles/MainPage";
 import styled from "styled-components";
+import axiosInstance from "../api/AxiosInstance";
+
 interface SubscribtionModalProps {
   isOpen: boolean;
   onClose: () => void;
@@ -87,6 +88,29 @@ const CloseIcon = () => (
 const SubscribtionModal = ({ isOpen, onClose }: SubscribtionModalProps) => {
   const [isRequiredChecked, setIsRequiredChecked] = useState<boolean>(false);
   const [isOptionalChecked, setIsOptionalChecked] = useState<boolean>(false);
+  const [selectedDay, setSelectedDay] = useState<string>("");
+
+  const isSubmitEnabled = selectedDay !== "" && isRequiredChecked;
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!isSubmitEnabled) return;
+
+    const params = {
+      subsDay: selectedDay,
+      agreeInfo: isRequiredChecked,
+      agreeMarketing: isOptionalChecked,
+    };
+
+    try {
+      const response = await axiosInstance.post("/home/subscription", params);
+      console.log("Subscription successful:", response.data);
+
+      onClose();
+    } catch (error) {
+      console.error("Subscription failed:", error);
+    }
+  };
 
   return (
     <ModalOverlay isOpen={isOpen}>
@@ -109,17 +133,20 @@ const SubscribtionModal = ({ isOpen, onClose }: SubscribtionModalProps) => {
         <Form>
           <FormGroup>
             <Label>요일</Label>
-            <Select defaultValue="">
-              <option value="" disabled hidden selected>
+            <Select
+              value={selectedDay}
+              onChange={(e) => setSelectedDay(e.target.value)}
+            >
+              <option value="" disabled hidden>
                 아티클을 받을 요일을 선택해주세요.
               </option>
-              <option value="monday">월요일</option>
-              <option value="tuesday">화요일</option>
-              <option value="wednesday">수요일</option>
-              <option value="thursday">목요일</option>
-              <option value="friday">금요일</option>
-              <option value="saturday">토요일</option>
-              <option value="sunday">일요일</option>
+              <option value="MONDAY">월요일</option>
+              <option value="TUESDAY">화요일</option>
+              <option value="WEDNESDAY">수요일</option>
+              <option value="THURSDAY">목요일</option>
+              <option value="FRIDAY">금요일</option>
+              <option value="SATURDAY">토요일</option>
+              <option value="SUNDAY">일요일</option>
               {/* 요일 옵션 추가 */}
             </Select>
           </FormGroup>
@@ -147,7 +174,12 @@ const SubscribtionModal = ({ isOpen, onClose }: SubscribtionModalProps) => {
               <Link href="#">약관 상세보기</Link>
             </CheckboxLabel>
           </CheckboxGroup>
-          <SubmitButton type="submit">구독하기</SubmitButton>
+          <SubmitButton
+            isSubmitEnabled={isSubmitEnabled}
+            onClick={handleSubmit}
+          >
+            구독하기
+          </SubmitButton>
         </Form>
       </ModalContent>
     </ModalOverlay>

src/components/TicleNote.tsx

@@ -36,7 +36,7 @@ const TicleNote = ({
     setIsEditing(false);
     // Replace with your question ID
     try {
-      await axiosInstance.put(`/mypage/my-note/${postId}`, {
+      await axiosInstance.put(`/mypage/my-note/${noteId}`, {
         content: answer,
       });
       // Optionally handle the response or refresh data
@@ -49,7 +49,7 @@ const TicleNote = ({
     // Replace with your question ID
 
     try {
-      await axiosInstance.delete(`/mypage/my-note/${postId}`);
+      await axiosInstance.delete(`/mypage/my-note/${noteId}`);
       // Optionally handle the response or refresh data
       alert("삭제되었습니다.");
     } catch (error) {

src/hooks/useHomeData.ts

@@ -2,6 +2,7 @@ import { useQuery } from "@tanstack/react-query";
 import axiosInstance from "../api/AxiosInstance";
 
 interface ResponseItem {
+  postId: number;
   title: string;
   imageUrl: string;
   category: string;