Feat/v2 publishing (#179)

* feat: apply v2 navigation style and feature * feat: create notification route * refactor: change badge and tag radius value * refactor: unnecessary duplicated theme file deleted, DS 0.5.8 version applied * feat: implement notification section * feat: 알림 갯수 및 글자수에 따라 단축 표현 여부 체크하는 함수 구현 및 적용 * refactor: feed 글쓰러 가기 파트 수정 * refactor: 불필요한 Profile 부분 삭제 * refactor: 축약 Badge 가변 길이 설정토록 업데이트 및 피드에 적용 * refactor: temp commit query string sign up match page * refactor: 프로젝트 매칭 설정 페이지 뼈대 구현 및 이전 form 상태값 유지 * feat: 분야 추가하기 바텀씟 분리 및 적용 * design: 회원가입 프로젝트 매칭 설정 UI 목업 완료 * refactor: wip * API 연동 필요 - 분야 등 * 알림 API 연동 필요
ConceptBe · Nov 17, 2024 · a7980d5 · a7980d5
1 parent 9d5bd71
commit a7980d5
Show file tree

Hide file tree

Showing 34 changed files with 856 additions and 495 deletions.
diff --git a/emotion.d.ts b/emotion.d.ts
@@ -1,12 +1,4 @@
 import '@emotion/react';
-import { ColorType, FontType } from './src/styles/theme';
-
-declare module '@emotion/react' {
-  export interface Theme {
-    color: ColorType;
-    font: FontType;
-  }
-}
 
 declare module '@emotion/styled' {
   import styled from '@emotion/styled';

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -16,7 +16,7 @@
     "@toss/use-overlay": "^1.3.8",
     "axios": "^1.5.1",
     "browser-image-compression": "^2.0.2",
-    "concept-be-design-system": "^0.5.3",
+    "concept-be-design-system": "^0.5.11",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-helmet-async": "^2.0.4",

diff --git a/src/components/ErrorBoundary/ApiErrorBoundary.tsx b/src/components/ErrorBoundary/ApiErrorBoundary.tsx
@@ -115,7 +115,7 @@ class ErrorBoundary extends Component<Props, State> {
       return (
         <>
           <StayDuringRoutingAlert content="삭제된 글이거나 탈퇴한 회원의 페이지입니다." />
-          <Navigate to="/" />;
+          <Navigate to="/" />
         </>
       );
     }

diff --git a/src/layouts/Navbar.tsx b/src/layouts/Navbar.tsx
@@ -1,10 +1,14 @@
 import {
   Navigation,
-  SVGNavActiveFeed,
-  SVGNavActiveProfile,
-  SVGNavFeed,
-  SVGNavProfile,
-  SVGNavWrite24,
+  SVGNavAlarm,
+  SVGNavAlarmFilled,
+  SVGNavEdit,
+  SVGNavEditFilled,
+  SVGNavHome,
+  SVGNavHomeFilled,
+  SVGNavUser,
+  SVGNavUserFilled,
+  Text,
 } from 'concept-be-design-system';
 import { useNavigate, useParams } from 'react-router-dom';
 
@@ -15,20 +19,43 @@ const Navbar = () => {
   const { id: userIdFromParams } = useParams();
   const { hasMatched } = useRouteMatched();
   const navigate = useNavigate();
-  const isShowNavigation = hasMatched('/', '/profile/:id');
+  const isShowNavigation = hasMatched('/', '/profile/:id', '/notification');
 
   return (
     <>
       {isShowNavigation && (
-        <Navigation>
+        <Navigation css={{ borderTop: '1px solid #E5E5E5' }}>
           <Navigation.Item onClick={() => navigate('/')}>
-            {location.pathname.startsWith('/feed') || location.pathname === '/' ? <SVGNavActiveFeed /> : <SVGNavFeed />}
+            {location.pathname.startsWith('/feed') || location.pathname === '/' ? <SVGNavHomeFilled /> : <SVGNavHome />}
+            <Text font="suit10eb" style={{ margin: '4px 0 8px 0' }}>
+              피드
+            </Text>
           </Navigation.Item>
-          <Navigation.Item position="center" onClick={() => navigate('/write')}>
-            <SVGNavWrite24 />
+          <Navigation.Item onClick={() => navigate('/write')}>
+            {location.pathname.startsWith('/write') || location.pathname === '/write' ? (
+              <SVGNavEditFilled />
+            ) : (
+              <SVGNavEdit />
+            )}
+            <Text font="suit10eb" style={{ margin: '4px 0 8px 0' }}>
+              글쓰기
+            </Text>
+          </Navigation.Item>
+          <Navigation.Item onClick={() => navigate('/notification')}>
+            {location.pathname.startsWith('/notification') || location.pathname === '/notification' ? (
+              <SVGNavAlarmFilled />
+            ) : (
+              <SVGNavAlarm />
+            )}
+            <Text font="suit10eb" style={{ margin: '4px 0 8px 0' }}>
+              알림
+            </Text>
           </Navigation.Item>
           <Navigation.Item onClick={() => navigate(`/profile/${getUserId()}`)}>
-            {Number(userIdFromParams) === getUserId() ? <SVGNavActiveProfile /> : <SVGNavProfile />}
+            {Number(userIdFromParams) === getUserId() ? <SVGNavUserFilled /> : <SVGNavUser />}
+            <Text font="suit10eb" style={{ margin: '4px 0 8px 0' }}>
+              내 프로필
+            </Text>
           </Navigation.Item>
         </Navigation>
       )}

diff --git a/src/pages/Feed/Feed.page.tsx b/src/pages/Feed/Feed.page.tsx
@@ -1,15 +1,15 @@
 import styled from '@emotion/styled';
-import { Header, Spacer, Text, theme, SVGHeaderFilter, SVGFeedWrite40, Box } from 'concept-be-design-system';
+import { Button, Header, Spacer, SVGHeaderFilter, SVGWritePencil, Text, theme } from 'concept-be-design-system';
 import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
+import SEOMeta from '../../components/SEOMeta/SEOMeta';
+import Logo from '../../layouts/Logo';
+import { useWritingInfoQuery } from '../Write/hooks/queries/useWritingInfoQuery';
 import BestIdeaCardListSection from './components/BestIdeaCardListSection/BestIdeaCardListSection';
 import FilterBottomSheet from './components/FilterBottomSheet/FilterBottomSheet';
 import NewIdeaCardListSection from './components/NewIdeaCardListSection/NewIdeaCardListSection';
 import { getUserNickname } from './utils/getUserNickname';
-import SEOMeta from '../../components/SEOMeta/SEOMeta';
-import Logo from '../../layouts/Logo';
-import { useWritingInfoQuery } from '../Write/hooks/queries/useWritingInfoQuery';
 
 const Feed = () => {
   const navigate = useNavigate();
@@ -39,12 +39,9 @@ const Feed = () => {
 
       <Wrapper>
         <FeedFixBox>
-          <SVGFeedWrite40 onClick={() => navigate('/write')} cursor="pointer" />
-
-          <Spacer size={27} />
           <FeedFixTextWrapper>
             <Text font="suit22sb" color="w1">
-              {getUserNickname() || 'Guest1234'}
+              {getUserNickname() || 'Guest'}
             </Text>
             <Text font="suit22r" color="w1">
               님,
@@ -53,13 +50,21 @@ const Feed = () => {
 
           <Spacer size={8} />
           <WordBreakText font="suit22r" color="w1">
-            재밌는 아이디어를 들려주세요!
+            재밌있는 아이디어가 있으신가요?
           </WordBreakText>
-          <Spacer size={14} />
 
-          <Box onClick={() => navigate('/write')} cursor="pointer">
-            <Text font="suit15ra" color="w2">{`아이디어 적으러 가기 >`}</Text>
-          </Box>
+          <Spacer size={16} />
+
+          <Button
+            padding="0"
+            css={{ width: 110, height: 34, backgroundColor: theme.color.w1 }}
+            onClick={() => navigate('/write')}
+          >
+            <SVGWritePencil css={{ marginRight: 6 }} />
+            <Text font="suit14sb" color="b2">
+              글쓰러 가기
+            </Text>
+          </Button>
         </FeedFixBox>
         <IdeaSectionBox>
           <BestIdeaCardListSection />

diff --git a/src/pages/Feed/components/NewIdeaCardListSection/NewIdeaCardListSection.tsx b/src/pages/Feed/components/NewIdeaCardListSection/NewIdeaCardListSection.tsx
@@ -2,21 +2,19 @@ import styled from '@emotion/styled';
 import { SVGProfileMessageDots, Spacer, Text } from 'concept-be-design-system';
 import { Fragment, Suspense, useRef } from 'react';
 
-import NewIdeaCardListSkeleton from './NewIdeaCardListSkeleton';
 import useConfirm from '../../../../hooks/useConfirm';
 import { useDeleteIdea } from '../../../components/NewIdeaCard/hooks/mutations/useDeleteIdea';
 import NewIdeaCard from '../../../components/NewIdeaCard/NewIdeaCard';
-import useNavigatePage from '../../../hooks/useNavigatePage';
 import EmptyTabContentSection from '../../../Profile/components/EmptyTabContentSection';
 import { useFilterParams } from '../../context/filterContext';
 import { useIdeasQuery } from '../../hooks/queries/useIdeasQuery';
 import { useFeedInfiniteFetch } from '../../hooks/useFeedInfiniteFetch';
 import { getUserNickname } from '../../utils/getUserNickname';
+import NewIdeaCardListSkeleton from './NewIdeaCardListSkeleton';
 
 const CardList = () => {
   const { filterParams } = useFilterParams();
   const { ideas, fetchNextPage } = useIdeasQuery(filterParams);
-  const { goProfilePage } = useNavigatePage();
   const { deleteIdea } = useDeleteIdea();
   const openConfirm = useConfirm();
   const nickname = getUserNickname();
@@ -66,13 +64,12 @@ const CardList = () => {
         return (
           <Fragment key={idx}>
             {isMine ? (
-              <NewIdeaCard id={idea.id} content={content} footer={footer}>
-                <NewIdeaCard.Content onClickDelete={() => handleDeleteIdea(idea.id)} />
+              <NewIdeaCard id={idea.id} profile={profile} content={content} footer={footer}>
+                <NewIdeaCard.Content onClick={() => handleDeleteIdea(idea.id)} />
                 <NewIdeaCard.Footer />
               </NewIdeaCard>
             ) : (
               <NewIdeaCard id={idea.id} profile={profile} content={content} footer={footer}>
-                <NewIdeaCard.Profile onClickProfile={() => goProfilePage(idea.memberResponse.id)} />
                 <NewIdeaCard.Content />
                 <NewIdeaCard.Footer />
               </NewIdeaCard>

diff --git a/src/pages/Feed/hooks/useFilteredBottomSheetState.ts b/src/pages/Feed/hooks/useFilteredBottomSheetState.ts
@@ -63,11 +63,11 @@ const useFilteredBottomSheetState = ({
   const filteredSkillCategory1Depth =
     filterParams?.skillCategoryIds?.[0] !== undefined
       ? getSkillCategory1DepthFrom2DepthSkillId(filterParams?.skillCategoryIds?.[0]).name
-      : undefined ?? '';
+      : '';
   const filteredSkillCategory2Depth =
     filterParams?.skillCategoryIds?.[0] !== undefined
       ? get2DepthNameFrom2DepthId(filterParams?.skillCategoryIds?.[0])
-      : undefined ?? '';
+      : '';
 
   return {
     filteredBranches,

diff --git a/src/pages/FeedDetail/FeedDetail.page.tsx b/src/pages/FeedDetail/FeedDetail.page.tsx
@@ -92,7 +92,7 @@ const FeedDetailPage = () => {
           </div>
         </Box>
         <Divider color="l3" top={16} bottom={16} />
-        <HyperLinkText font="suit15ra" color="b6" lineHeight="24px">
+        <HyperLinkText font="suit15r" color="b6" lineHeight="24px">
           {introduce}
         </HyperLinkText>
       </Box>
@@ -118,7 +118,7 @@ const FeedDetailPage = () => {
           <Spacer size={12} />
           <Flex wrap="wrap" gap={6}>
             {branchList.map((badge) => (
-              <Badge key={badge} fontColor="b4">
+              <Badge key={badge} fontColor="b4" radius={50}>
                 {badge}
               </Badge>
             ))}
@@ -132,7 +132,7 @@ const FeedDetailPage = () => {
           <Spacer size={12} />
           <Flex wrap="wrap" gap={6}>
             {purposeList.map((badge) => (
-              <Badge key={badge} fontColor="b4">
+              <Badge key={badge} fontColor="b4" radius={50}>
                 {badge}
               </Badge>
             ))}
@@ -164,7 +164,7 @@ const FeedDetailPage = () => {
           <Spacer size={12} />
           <Flex wrap="wrap" gap={6}>
             {skillCategories.map((badge) => (
-              <Badge key={badge} fontColor="b4">
+              <Badge key={badge} fontColor="b4" radius={50}>
                 {badge}
               </Badge>
             ))}

diff --git a/src/pages/Login/Login.tsx b/src/pages/Login/Login.tsx
@@ -1,10 +1,9 @@
 import styled from '@emotion/styled';
-import { Spacer, Text, theme, SVGLoginKakao, SVGLoginNaver, SVGLoginLogo, Flex } from 'concept-be-design-system';
+import { Flex, Spacer, SVGLoginKakao, SVGLoginLogo, SVGLoginNaver, Text, theme } from 'concept-be-design-system';
 import { useNavigate } from 'react-router-dom';
 
 import SEOMeta from '../../components/SEOMeta/SEOMeta';
 import { BASE_URL } from '../../constants';
-import useAlert from '../../hooks/useAlert';
 
 const KAKAO_REQUEST_URL = `${BASE_URL}/oauth/kakao`;
 const NAVER_REQUEST_URL = `${BASE_URL}/oauth/naver`;
@@ -32,7 +31,7 @@ const Login = () => {
             <SVGLoginKakao />
           </LogoBox>
           <TextWrapper>
-            <Text font="suit15rb">카카오 로그인</Text>
+            <Text font="suit15r">카카오 로그인</Text>
           </TextWrapper>
         </ButtonWrapper>
 
@@ -44,7 +43,7 @@ const Login = () => {
             <SVGLoginNaver />
           </LogoBox>
           <TextWrapper>
-            <Text font="suit15rb">네이버 로그인</Text>
+            <Text font="suit15r">네이버 로그인</Text>
           </TextWrapper>
         </ButtonWrapper>
 

diff --git a/src/pages/Notification/Notification.page.tsx b/src/pages/Notification/Notification.page.tsx
@@ -0,0 +1,11 @@
+import { NotificationContainer } from './containers/NotificationContainer';
+
+const NotificationPage = () => {
+  return (
+    <div>
+      <NotificationContainer />
+    </div>
+  );
+};
+
+export default NotificationPage;
diff --git a/src/pages/Notification/components/AdditionalText.tsx b/src/pages/Notification/components/AdditionalText.tsx
@@ -0,0 +1,28 @@
+import { Text, theme } from 'concept-be-design-system';
+
+interface Props {
+  isEmpty: boolean;
+}
+
+export const AdditionalText = ({ isEmpty }: Props) => {
+  const content = isEmpty ? '아직 받은 알림이 없어요!' : '모든 알림을 확인했어요!';
+
+  return (
+    <div
+      css={{
+        width: '100%',
+        height: '260px',
+        marginBottom: `${isEmpty ? '0px' : '65px'}`,
+        paddingTop: `${isEmpty ? '0px' : '42px'}`,
+        display: 'flex',
+        alignItems: `${isEmpty ? 'center' : 'start'}`,
+        justifyContent: 'center',
+        backgroundColor: theme.color.bg1,
+      }}
+    >
+      <Text font="suit16r" color="b6">
+        {content}
+      </Text>
+    </div>
+  );
+};
diff --git a/src/pages/Notification/components/NotificationItem.tsx b/src/pages/Notification/components/NotificationItem.tsx
@@ -0,0 +1,39 @@
+import { Badge, SVGGoldBell, Text } from 'concept-be-design-system';
+import { useNavigate } from 'react-router-dom';
+import { NotificationDTO } from '../types';
+
+export const NotificationItem = ({ feedId, title, createAt, badges }: Omit<NotificationDTO, 'id'>) => {
+  const navigate = useNavigate();
+
+  return (
+    <div
+      css={{ padding: 24, borderBottom: '1px solid #E5E5E5', cursor: 'pointer' }}
+      onClick={() => navigate(`/feed/${feedId}`)}
+    >
+      <div css={{ display: 'flex', gap: '8px', alignItems: 'center', marginBottom: 12 }}>
+        <SVGGoldBell css={{ width: '20px', height: '20px' }} />
+        <Text font="suit14sb" color="c1">
+          나에게 꼭 맞는 알림
+        </Text>
+        <div css={{ width: '3px', height: '3px', backgroundColor: '#DDDDDD', borderRadius: 100 }} />
+        <Text font="suit14r" color="b6" css={{ wordBreak: 'keep-all' }}>
+          {createAt}
+        </Text>
+      </div>
+      <div css={{ marginBottom: 8 }}>
+        <Text font="suit16sb" color="b2" css={{ lineHeight: '24px' }}>
+          {title}
+        </Text>
+      </div>
+      <div css={{ display: 'flex', flexWrap: 'wrap', gap: '4px', alignItems: 'center' }}>
+        {badges.map((badge, idx) => (
+          <div key={`${badge}-${idx}`}>
+            <Badge font="suit14sb" color="c1" radius={50}>
+              {badge}
+            </Badge>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};