Merge branch 'develop' of https://github.com/prgrms-web-devcourse-fin…

…al-project/WEB1_1_Q-Feed_FE into QFEED-56
prgrms-web-devcourse-final-project · Nov 28, 2024 · 2480d06 · 2480d06
2 parents 5ae2c8d + 351281e
commit 2480d06
Show file tree

Hide file tree

Showing 11 changed files with 408 additions and 47 deletions.
diff --git a/src/components/common/Header.tsx b/src/components/common/Header.tsx
@@ -1,29 +1,34 @@
-import { IoSearch } from 'react-icons/io5';
-import { HiOutlineBell } from 'react-icons/hi';
-import styled from '@emotion/styled';
-import theme from '@/styles/theme';
-import Logo from '@/assets/qfeed-logo.svg?react';
+import { IoSearch } from "react-icons/io5";
+import { HiOutlineBell } from "react-icons/hi";
+import styled from "@emotion/styled";
+import { useNavigate } from "react-router-dom"; // React Router의 useNavigate 가져오기
+import theme from "@/styles/theme";
+import Logo from "@/assets/qfeed-logo.svg?react";
 
 interface HeaderProps {
   onSearchClick?: () => void;
-  onNotificationClick?: () => void;
-  onProfileClick?: () => void;
   onLogoClick?: () => void;
   profileImage?: string;
   className?: string;
 }
 
-const Header = ({ onSearchClick, onNotificationClick, onLogoClick, className }: HeaderProps) => {
+const Header = ({ onSearchClick, onLogoClick, className }: HeaderProps) => {
+  const navigate = useNavigate();
+
+  const handleNotificationClick = () => {
+    navigate("/alarm");
+  };
+
   return (
     <StyledHeader className={className}>
       <LogoWrapper onClick={onLogoClick}>
         <Logo />
       </LogoWrapper>
       <RightSection>
-        <IconButton onClick={onSearchClick} aria-label='검색'>
+        <IconButton onClick={onSearchClick} aria-label="검색">
           <IoSearch size={24} />
         </IconButton>
-        <IconButton onClick={onNotificationClick} aria-label='알림'>
+        <IconButton onClick={handleNotificationClick} aria-label="알림">
           <HiOutlineBell size={28} />
         </IconButton>
       </RightSection>

diff --git a/src/components/ui/CategoryButtons/CategoryButton.tsx b/src/components/ui/CategoryButtons/CategoryButton.tsx
@@ -14,7 +14,7 @@ const StyledTag = styled.button<{ isSelected?: boolean }>`
   border: 1px solid ${theme.colors.gray[300]};
   background-color: ${(props) => (props.isSelected ? theme.colors.primary : theme.colors.white)};
   color: ${(props) => (props.isSelected ? theme.colors.white : theme.colors.gray[500])};
-  font-family: ${theme.typography.body1};
+  font-family: ${theme.typography.body1.fontFamily};
   font-size: ${theme.typography.body1.size};
   font-weight: ${theme.typography.body1.weight};
   line-height: ${theme.typography.body1.lineHeight};

diff --git a/src/components/ui/CommentList/CommentList.tsx b/src/components/ui/CommentList/CommentList.tsx
@@ -2,6 +2,7 @@ import styled from '@emotion/styled';
 import { Avatar } from '@chakra-ui/react';
 import LikeButtonContainer from '@/components/ui/LikeButtonContainer/LikeButtonContainer';
 import { ReplyContainer } from '@/components/ui/ReplyContainer/ReplyContainer';
+import theme from '@/styles/theme';
 
 interface Comment {
   id: string;
@@ -93,27 +94,27 @@ const CommentContent = styled.div`
 
 const AuthorInfo = styled.div`
   display: flex;
+  justify-content: space-between;
   align-items: center;
   gap: 0.5rem;
   margin-bottom: 0.25rem;
 `;
 
 const AuthorName = styled.span`
-  font-weight: 600;
-  color: #111111;
-  font-size: 0.875rem;
+  color: ${theme.colors.gray[400]};
+  font-weight: ${theme.typography.weights.medium};
+  font-size: ${theme.typography.body2.size};
 `;
 
 const CreatedAt = styled.span`
-  color: #dddddd;
-  font-size: 0.75rem;
+  color: ${theme.colors.gray[200]};
+  font-size: ${theme.typography.body3.size};
 `;
 
 const Content = styled.p`
-  color: #111111;
-  font-size: 0.875rem;
-  margin: 0.25rem 0 0.5rem 0;
-  line-height: 1.5;
+  color: ${theme.colors.black};
+  font-size: ${theme.typography.body2.size};
+  font-weight: ${theme.typography.weights.regular};
 `;
 
 const ActionButtons = styled.div`

diff --git a/src/components/ui/LikeButtonContainer/LikeButtonContainer.tsx b/src/components/ui/LikeButtonContainer/LikeButtonContainer.tsx
@@ -1,6 +1,7 @@
 import { useState } from 'react';
 import styled from '@emotion/styled';
 import { AiOutlineHeart, AiFillHeart } from 'react-icons/ai';
+import theme from '@/styles/theme';
 
 export interface LikeButtonProps {
   initialLiked?: boolean;
@@ -75,10 +76,10 @@ const ButtonContainer = styled.button<{ isLiked: boolean; disabled?: boolean }>`
 const IconWrapper = styled.div<{ isLiked: boolean }>`
   display: flex;
   align-items: center;
-  color: ${(props) => (props.isLiked ? '#ef4444' : '#6b7280')};
+  color: ${(props) => (props.isLiked ? theme.colors.notice : theme.colors.gray[400])};
 `;
 
 const Count = styled.span<{ isLiked: boolean }>`
-  font-size: 0.725rem;
-  color: #6b7280;
+  font-size: ${theme.typography.body3.size};
+  color: ${theme.colors.gray[400]};
 `;
diff --git a/src/components/ui/ReplyContainer/ReplyContainer.tsx b/src/components/ui/ReplyContainer/ReplyContainer.tsx
@@ -1,3 +1,4 @@
+import theme from '@/styles/theme';
 import styled from '@emotion/styled';
 import { BiComment } from 'react-icons/bi';
 
@@ -27,11 +28,11 @@ const Container = styled.div`
 `;
 
 const ReplyIcon = styled(BiComment)`
-  font-size: 1rem;
-  color: #666;
+  font-size: ${theme.typography.body1.size};
+  color: ${theme.colors.gray[400]};
 `;
 
 const ReplyCount = styled.span`
-  font-size: 0.725rem;
-  color: #666;
+  font-size: ${theme.typography.body3.size};
+  color: ${theme.colors.gray[400]};
 `;
diff --git a/src/pages/Alarm/index.tsx b/src/pages/Alarm/index.tsx
@@ -0,0 +1,201 @@
+/** @jsxImportSource @emotion/react */
+import { css } from "@emotion/react";
+import React, { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { IoChevronBack } from "react-icons/io5";
+import ProfileImage from "@/components/ui/ProfileImageCon/ProfileImageCon";
+interface NotificationItem {
+  id: number;
+  type: string;
+  message: string;
+  time: string;
+}
+
+const NotificationPage: React.FC = () => {
+  const navigate = useNavigate();
+  const notifications: NotificationItem[] = [
+    {
+      id: 1,
+      type: "알림 유형(큐스페이스, 이벤트 등)",
+      message: "큐피드님이 나의 글에 '댓글'을 남겼습니다.",
+      time: "방금",
+    },
+    {
+      id: 2,
+      type: "알림 유형(큐스페이스, 이벤트 등)",
+      message: "큐피드님이 나의 글에 '댓글'을 남겼습니다.",
+      time: "1시간 전",
+    },
+    {
+      id: 3,
+      type: "알림 유형(큐스페이스, 이벤트 등)",
+      message: "큐피드님이 나의 글에 '댓글'을 남겼습니다.",
+      time: "1시간 전",
+    },
+    {
+      id: 4,
+      type: "알림 유형(큐스페이스, 이벤트 등)",
+      message: "큐피드님이 나의 글에 '댓글'을 남겼습니다.",
+      time: "방금",
+    },
+    {
+      id: 5,
+      type: "알림 유형(큐스페이스, 이벤트 등)",
+      message: "큐피드님이 나의 글에 '댓글'을 남겼습니다.",
+      time: "1시간 전",
+    },
+    {
+      id: 6,
+      type: "알림 유형(큐스페이스, 이벤트 등)",
+      message: "큐피드님이 나의 글에 '댓글'을 남겼습니다.",
+      time: "1시간 전",
+    },
+  ];
+
+  const [readItems, setReadItems] = useState<number[]>([]); // 읽음 처리된 알림 ID 저장
+
+  const handleItemClick = (id: number) => {
+    setReadItems((prev) => (prev.includes(id) ? prev : [...prev, id]));
+  };
+
+  const markAllAsRead = () => {
+    setReadItems(notifications.map((notification) => notification.id));
+  };
+
+  return (
+    <div css={containerStyle}>
+      {/* Header */}
+      <div css={headerStyle}>
+        <IoChevronBack css={backIconStyle} onClick={() => navigate(-1)} />
+        <span css={headerTitleStyle}>알림</span>
+      </div>
+
+      {/* Unread count */}
+      <div css={readWrap}>
+        <div css={unreadCountStyle}>
+          안읽은 알림 {notifications.length - readItems.length}개
+        </div>
+        <span css={markAllAsReadStyle} onClick={markAllAsRead}>
+          모두 읽음 표시
+        </span>
+      </div>
+
+      {/* Notification List */}
+      <div css={listStyle}>
+        {notifications.map((notification) => (
+          <div
+            key={notification.id}
+            css={[
+              listCon,
+              readItems.includes(notification.id) && listConRead, // 읽음 처리된 항목 스타일
+            ]}
+            onClick={() => handleItemClick(notification.id)}
+          >
+            <ProfileImage src="" size={40} />
+            <div css={notificationContentStyle}>
+              <span css={notificationTypeStyle}>{notification.type}</span>
+              <p css={notificationMessageStyle}>{notification.message}</p>
+            </div>
+            <span css={timeStyle}>{notification.time}</span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default NotificationPage;
+
+// 스타일 정의
+const containerStyle = css`
+  display: flex;
+  flex-direction: column;
+  height: 773px;
+  background-color: #f9f4ef;
+`;
+
+const headerStyle = css`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  padding: 10px 15px;
+  background-color: #ffffff;
+  border-bottom: 1px solid #ccc;
+`;
+const readWrap = css`
+  display: flex;
+  text-align: center;
+  align-items: center;
+  justify-content: space-between;
+  padding-right: 12px;
+`;
+
+const backIconStyle = css`
+  position: absolute;
+  left: 15px;
+  font-size: 24px;
+  cursor: pointer;
+`;
+
+const headerTitleStyle = css`
+  font-size: 18px;
+  font-weight: bold;
+`;
+
+const markAllAsReadStyle = css`
+  font-size: 14px;
+  border-radius: 16px;
+  padding: 6px;
+  color: #b9a298;
+  background-color: #f3ebe1;
+  cursor: pointer;
+`;
+
+const unreadCountStyle = css`
+  padding: 10px 15px;
+  font-size: 14px;
+  color: #666;
+`;
+
+const listStyle = css`
+  flex: 1;
+  overflow-y: auto;
+  background-color: #f9f3ec;
+`;
+
+const listCon = css`
+  background-color: #f3ebe1;
+  padding: 8px;
+  height: 80px;
+  border-bottom: 1px solid #ccc;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  cursor: pointer;
+`;
+
+const listConRead = css`
+  background-color: #f9f4ef; /* 읽음 처리된 배경 색 */
+`;
+
+const notificationContentStyle = css`
+  flex: 1;
+  margin-left: 8px;
+`;
+
+const notificationTypeStyle = css`
+  font-size: 12px;
+  color: #999;
+`;
+
+const notificationMessageStyle = css`
+  margin-top: 4px;
+  font-size: 14px;
+  color: #333;
+`;
+
+const timeStyle = css`
+  font-size: 12px;
+  color: #999;
+`;
diff --git a/src/pages/Main/index.tsx b/src/pages/Main/index.tsx
@@ -1,5 +1,4 @@
-import Header from '@/components/common/Header';
-
+import Header from "@/components/common/Header";
 export default function Main() {
   return (
     <div>

diff --git a/src/pages/QSpaceMain/components/FloatingButton/FloatingButton.tsx b/src/pages/QSpaceMain/components/FloatingButton/FloatingButton.tsx
@@ -1,3 +1,4 @@
+import { useNavigate } from 'react-router-dom';
 import styled from '@emotion/styled';
 import theme from '@/styles/theme';
 
@@ -6,9 +7,15 @@ interface FloatingButtonProps {
   className?: string;
 }
 
-const FloatingButton = ({ onClick, className }: FloatingButtonProps) => {
+const FloatingButton = ({ className }: FloatingButtonProps) => {
+  const navigate = useNavigate();
+
+  const handleClick = () => {
+    navigate('/qspace/category');
+  };
+
   return (
-    <StyledButton onClick={onClick} className={className} aria-label='Add new item'>
+    <StyledButton onClick={handleClick} className={className} aria-label='Add new item'>
       <PlusIcon />
     </StyledButton>
   );

diff --git a/src/pages/QSpaceMain/components/GroupStateCheckBox/GroupStateCheckBox.tsx b/src/pages/QSpaceMain/components/GroupStateCheckBox/GroupStateCheckBox.tsx
@@ -52,7 +52,7 @@ const StyledContainer = styled.div`
 
 const StyledTitle = styled.span`
   color: ${theme.colors.gray[400]};
-  font-family: ${theme.typography.body2};
+  font-family: ${theme.typography.body2.fontFamily};
   font-size: ${theme.typography.body2.size};
   font-weight: ${theme.typography.body2.weight};
   line-height: ${theme.typography.body2.lineHeight};