feat: [61] 댓글 수집, 크롤링, 당첨자 선정 구현

web/package.json

@@ -18,7 +18,10 @@
     "test:ui": "vitest --ui"
   },
   "dependencies": {
+    "@emotion/react": "^11.13.0",
+    "@emotion/styled": "^11.13.0",
     "@hookform/resolvers": "^3.9.0",
+    "@mui/material": "^5.16.7",
     "@radix-ui/react-label": "^2.1.0",
     "@radix-ui/react-tabs": "^1.1.0",
     "@reduxjs/toolkit": "^2.2.6",

web/src/App.tsx

@@ -48,6 +48,17 @@ const router = createBrowserRouter([
           };
         },
       },
+      {
+        path: 'collect',
+        lazy: async () => {
+          const { CollectCommentsPage } = await import(
+            '@/pages/collect-comments-page'
+          );
+          return {
+            Component: CollectCommentsPage,
+          };
+        },
+      },
 
       {
         path: 'survey',
@@ -65,21 +76,13 @@ const router = createBrowserRouter([
           },
         ],
       },
-      {
-        path: 'collect',
-        lazy: async () => {
-          const { CollectCommentsPage } = await import(
-            '@/pages/collect-comments-page'
-          );
-          return {
-            Component: CollectCommentsPage,
-          };
-        },
-      },
+
       {
         path: 'crawling',
         lazy: async () => {
-          const { CrawlingPage } = await import('@/pages/crawling-result-page');
+          const { default: CrawlingPage } = await import(
+            '@/pages/crawling-result-page'
+          );
           return {
             Component: CrawlingPage,
           };

web/src/components/auth/change-pwd.tsx

@@ -15,6 +15,7 @@ import { useForm } from 'react-hook-form';
 import { useNavigate } from 'react-router-dom';
 import { toast } from 'sonner';
 import styled from 'styled-components';
+import { Input } from '../common/input';
 
 const ChangePwd = ({ onClose }: { onClose: () => void }) => {
   const {
@@ -244,23 +245,34 @@ const CurrentPasswordContainer = styled.div`
   width: 100%;
 `;
 
-const CheckButton = styled(Button)`
+const BaseButton = styled.button`
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+`;
+
+const CheckButton = styled(BaseButton)`
   width: 63px;
   height: 46px;
   border-radius: 10px;
   background-color: transparent;
   color: ${COLORS.Main};
   border: 1px solid ${COLORS.Main};
-  font-size: 14px;
-  font-weight: 600;
 `;
 
-const ChangeButton = styled(Button)`
+const ChangeButton = styled(BaseButton)`
   width: 100%;
   height: 46px;
   border-radius: 10px;
   font-size: 16px;
-  font-weight: 600;
   margin-top: 200px;
   background-color: ${COLORS.Main};
   border: none;

web/src/components/common/Ask_Popup.tsx

@@ -0,0 +1,92 @@
+import styled from 'styled-components';
+import { body4Style } from '@/styles/global-styles';
+import { COLORS } from '@/theme';
+
+interface textProps {
+  comment: string;
+  text1: string;
+  text2: string;
+  onConfirm: () => void;
+  onCancel: () => void;
+}
+
+export const AskPopup = ({
+  comment,
+  text1,
+  text2,
+  onConfirm,
+  onCancel,
+}: textProps) => {
+  return (
+    <Overlay>
+      <Container>
+        <Comment>{comment}</Comment>
+        <BtnContainer>
+          <Btn1 onClick={onConfirm}>{text1}</Btn1>
+          <Btn2 onClick={onCancel}>{text2}</Btn2>
+        </BtnContainer>
+      </Container>
+    </Overlay>
+  );
+};
+
+const Overlay = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: #333;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+`;
+
+const Container = styled.div`
+  width: 350px;
+  height: 151px;
+  border-radius: 10px;
+  padding: 16px;
+  background-color: white;
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  align-items: center;
+`;
+
+const Comment = styled.div`
+  color: ${COLORS.Gray1};
+  ${body4Style}
+  margin-bottom: 23px;
+  text-align: center;
+  white-space: pre-line;
+`;
+
+const BtnContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  gap: 10px;
+`;
+
+const Btn1 = styled.button`
+  width: 155px;
+  height: 46px;
+  border-radius: 10px;
+  border: none;
+  background-color: ${COLORS.Main};
+  color: white;
+  font-weight: 600;
+  cursor: pointer;
+`;
+
+const Btn2 = styled.button`
+  width: 155px;
+  height: 46px;
+  border-radius: 10px;
+  border: none;
+  background-color: ${COLORS.Sub2};
+  color: ${COLORS.Main};
+  font-weight: 600;
+  cursor: pointer;
+`;

web/src/components/common/Popup.tsx

@@ -6,13 +6,22 @@ interface PopupProps {
   title: string;
   message: string;
   onClose: () => void;
+  imgSrc: string; // 이미지 소스를 받아올 수 있음
+  width: string;
+  height: string;
 }
 
-export const Popup = ({ message, onClose }: PopupProps) => {
+export const Popup = ({
+  message,
+  onClose,
+  imgSrc,
+  width,
+  height,
+}: PopupProps) => {
   return (
     <PopupOverlay>
       <Container>
-        <Container2></Container2>
+        <Container2 src={imgSrc} width={width} height={height} />
         <Msg>{message}</Msg>
         <Btn_popup onClick={onClose} />
       </Container>
@@ -45,10 +54,9 @@ const Container = styled.div`
   border: 1px solid ${COLORS.Gray4};
 `;
 
-const Container2 = styled.div`
-  border: 1px solid ${COLORS.Gray4};
-  width: 200px;
-  height: 150px;
+const Container2 = styled.img`
+  width: 100px;
+  height: auto;
   margin-bottom: 20px;
 `;
 

web/src/components/common/SingleDatePicker.tsx

@@ -26,7 +26,7 @@ export const SingleDatePicker = ({
   const handleDateChange = (date: Date | null) => {
     if (date) {
       const year = date.getFullYear();
-      const month = String(date.getMonth() + 1).padStart(2, '0'); // 월은 0부터 시작하므로 1을 더합니다.
+      const month = String(date.getMonth() + 1).padStart(2, '0'); // 월은 0부터 시작하므로 1을 더함
       const day = String(date.getDate()).padStart(2, '0');
       const hours = String(date.getHours()).padStart(2, '0');
       const minutes = String(date.getMinutes()).padStart(2, '0');

web/src/components/common/SurveyTimeInput.tsx

@@ -4,11 +4,11 @@ import 'react-datepicker/dist/react-datepicker.css';
 import { useDispatch, useSelector } from 'react-redux';
 import styled from 'styled-components';
 
-import { handleEndDateChange, handleStartDateChange } from '@/lib/timeUtils';
 import { body4Style } from '@/styles/global-styles';
 import { COLORS } from '@/theme';
 import { CSSProperties } from 'react';
 import calendarIcon from '../../assets/calander.png';
+import { handleEndDateChange, handleStartDateChange } from '@/lib/timeUtil';
 
 interface SurveyTimeInputProps {
   placeholderStart: string;

web/src/components/common/Winner.tsx

@@ -1,7 +1,8 @@
-// 당첨자 선정 시 컴포넌트
-
 import { COLORS } from '@/theme';
 import styled from 'styled-components';
+import Accordion from '@mui/material/Accordion';
+import AccordionSummary from '@mui/material/AccordionSummary';
+import btn_open from '@/assets/btn_open.png';
 
 interface CommentBoxProps {
   title: string;
@@ -11,35 +12,91 @@ interface CommentBoxProps {
 export const Winner = ({ title, comment }: CommentBoxProps) => {
   return (
     <Container>
-      <Container2>
-        <Title>{title}</Title>
-        <Comment>{comment}</Comment>
-      </Container2>
+      <CustomAccordion>
+        <CustomAccordionSummary
+          aria-controls="panel1-content"
+          id="panel1-header"
+        >
+          <Title>{title}</Title>
+          <Open src={btn_open} />
+        </CustomAccordionSummary>
+        <Container2>
+          <CommentContainer>
+            <Comment>{comment}</Comment>
+          </CommentContainer>
+        </Container2>
+      </CustomAccordion>
     </Container>
   );
 };
 
 const Container = styled.div`
-  width: 350px;
-  min-height: 120px;
+  margin: 10px 0;
+  width: 100%;
+`;
+
+const CustomAccordion = styled(Accordion)`
+  border: 1px solid ${COLORS.Gray5};
+  border-radius: 10px !important;
+  box-shadow: none;
+
+  &:before {
+    display: none; // MUI에서 기본적으로 추가되는 border 제거
+  }
+`;
+
+const CustomAccordionSummary = styled(AccordionSummary)`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px;
+  background-color: ${COLORS.Gray6};
+  border-bottom: 1px solid ${COLORS.Gray4};
+  border-radius: 10px !important;
+
+  & .MuiAccordionSummary-content {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    margin: 10px 0px;
+  }
+
+  &.Mui-expanded {
+    div {
+      margin: 0px;
+    }
+  }
+`;
+
+const Container2 = styled.div`
+  display: flex;
+  justify-content: center;
+  margin-bottom: 20px;
+`;
+const CommentContainer = styled.div`
+  width: 90%;
+  background-color: ${COLORS.Gray6};
+  padding: 20px;
   border: 1px solid ${COLORS.Gray5};
-  padding: 19px;
   border-radius: 10px;
 `;
-const Container2 = styled.div``;
+
 const Title = styled.p`
   font-size: 16px;
-
   font-weight: 600;
   color: ${COLORS.Gray1};
-  padding-bottom: 13px;
-  border-bottom: 1px solid ${COLORS.Gray4};
 `;
+
 const Comment = styled.div`
-  margin-top: 8px;
   color: ${COLORS.Gray2};
   font-size: 14px;
-  word-wrap: break-word; /* 긴 단어를 줄바꿈 */
-  overflow-wrap: break-word; /* 긴 단어가 있을 때 줄바꿈 */
-  white-space: pre-wrap; /* 연속된 공백을 유지하고 줄바꿈을 허용 */
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  white-space: pre-wrap;
+`;
+
+const Open = styled.img`
+  width: 45px;
+  height: 45px;
 `;