Refactor/#65: MobileView 375px에서 420px로 확장 (#66)

* refactor: public 키워드 제거 public은 root path으로 자동 설정되어 다음과 같은 경고가 발생하여 제거한다. files in the public directory are served at the root path. Instead of /public/assets/favicon.png, use /assets/favicon.png. * design: 본문 overflow hidden 시 1열로 작성된 본문이 가려지지 않는 오류 수정 * refactor: Feed 페이지 420px 대응 * fix: 본인의 Profile 페이지가 아닌데도 Navbar에 My SVG가 포커스 된 유형으로 변경되던 오류 수정 * refactor: Profile 페이지 420px 대응 * refactor: IdeaSection key idx 대신 idea.id로 적용 * refactor: Agreement 페이지 420px 대응 * refactor: memberInfo가 없을 경우 로그인 이후 진행하지 않은 케이스로 간주하고 경고 후 라우팅 진행 * refactor: userInfo(memberInfo) 없이 url로 직접 sign-up, agreement 페이지 접근 시 경고 및 라우팅하도록 보완 동일한 로직이므로 useValidateUserInfo 훅으로 분리한다. * fix: 회원가입시 자기소개 누락된 오류 수정 * design: 댓글, 대댓글 좋아요 cursor pointer 추가 * design: 글쓰기 가능 조건시 확인 버튼 cursor pointer 추가 * feat: Feed 페이지 상단 글쓰기 버튼 및 '아이디어 적으러 가기'를 통해서 글쓰기 페이지로 이동토록 추가 * refactor: assets 디자인 시스템 반영 사항 업데이트 * design: 프로필 수정 버튼 폴드 280px에서 단어 단위 개행 및 가운데 정렬 유지 * chore: 디자인 시스템 0.4.6 버전 적용 * refactor: 프로필 페이지에서 쓴 게시글, 북마크 한 게시글이 없을 시 아이콘 클릭하여 라우팅 하는 기능 추가 * refactor: 디자인 시스템에서 SVG 컴포넌트 import 하여 적용 * refactor: 프로필 사진 부재 시 default image url 지정 * refactor: img 중복 컴포넌트 ImageView 컴포넌트로 대체 및 불필요한 상수 제거 * refactor: img onError default image 지정 일괄 수정 * design: 프로필 수정 뒤로가기 색 흰색으로 변경 * refactor: 아이디어 카드 스킬셋 개행 대응 * fix: 대댓글 작성 시간 미노출 오류 수정 및 삭제된 답글 시 내용 치환 * refactor: 스킬셋 영역 초과 문제 수정 * refactor: TabLayout width 반응형 대응 * refactor: Feed 상단 '재밌는 아이디어를 들려주세요!' word break keep all 적용 * refactor: 2글자 -> 두 글자 로 단어 변경 * design: 팀원 추가 버튼 margin right, cursor pointer 추가 * refactor: FixedSizeText width 속성 통일 * refactor: Image DefaultSrc 를 보이기 위해 onError 발생 작업 및 alt 수정
ConceptBe · Mar 18, 2024 · 574e851 · 574e851
1 parent be57dcb
commit 574e851
Show file tree

Hide file tree

Showing 46 changed files with 260 additions and 310 deletions.
diff --git a/index.html b/index.html
@@ -2,7 +2,7 @@
 <html lang="ko">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" href="/public/assets/favicon.png" />
+    <link rel="icon" href="/assets/favicon.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>컨셉비 - 당신의 상상이 현실로!</title>
     <meta

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -15,7 +15,7 @@
     "@tanstack/react-query": "^5.17.19",
     "@toss/use-overlay": "^1.3.8",
     "axios": "^1.5.1",
-    "concept-be-design-system": "^0.4.5",
+    "concept-be-design-system": "^0.4.8",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-helmet-async": "^2.0.4",

diff --git a/src/components/ErrorBoundary/ErrorFallback.tsx b/src/components/ErrorBoundary/ErrorFallback.tsx
@@ -1,5 +1,5 @@
 import styled from '@emotion/styled';
-import { Box, Button, Flex, PNGErrorBackground, Spacer, theme } from 'concept-be-design-system';
+import { Box, Button, Flex, ImageView, PNGErrorBackground, Spacer, theme } from 'concept-be-design-system';
 import { ReactNode } from 'react';
 import { useNavigate } from 'react-router-dom';
 
@@ -30,15 +30,17 @@ const ErrorFallback = ({ title, children, isInApiErrorBoundary, resetErrorBounda
 
   return (
     <Flex
-      maxWidth={375}
+      maxWidth={420}
       margin="0 auto"
       shadow="rgba(149, 157, 165, 0.2) 0px 8px 24px"
       height="100%"
       direction="column"
       padding="20px 22px"
       boxSizing="border-box"
     >
-      <img src={PNGErrorBackground} />
+      <Box maxWidth={375} maxHeight={375}>
+        <ImageView src={PNGErrorBackground} alt="에러 페이지 이미지" />
+      </Box>
       <Spacer size={26} />
       <Flex direction="column" alignItems="center" justifyContent="center">
         <TitleWrapper>{title}</TitleWrapper>

diff --git a/src/components/ProfileInfo.tsx b/src/components/ProfileInfo.tsx
@@ -1,9 +1,6 @@
-import styled from '@emotion/styled';
-import { Text, TextDivider, Box, Flex } from 'concept-be-design-system';
+import { Text, TextDivider, Box, Flex, ImageView, PNGDefaultProfileInfo36 } from 'concept-be-design-system';
 import { Fragment } from 'react';
 
-import { DEFAULT_IMAGE_URL } from '../constants';
-
 interface Props {
   imageUrl: string;
   nickname: string;
@@ -16,7 +13,7 @@ const ProfileInfo = ({ imageUrl, nickname, skillList }: Props) => {
   return (
     <Flex alignItems="center" gap={10}>
       <Box width={36} height={36} overflow="hidden" borderRadius="0 150px 150px 0">
-        <Img src={imageUrl || DEFAULT_IMAGE_URL} />
+        <ImageView src={imageUrl} alt="프로필" defaultSrc={PNGDefaultProfileInfo36} />
       </Box>
       <Flex direction="column" gap={4}>
         <Text font="suit14m" color="b4">
@@ -38,8 +35,3 @@ const ProfileInfo = ({ imageUrl, nickname, skillList }: Props) => {
 };
 
 export default ProfileInfo;
-
-const Img = styled.img`
-  width: 100%;
-  height: 100%;
-`;
diff --git a/src/constants/index.ts b/src/constants/index.ts
@@ -2,5 +2,3 @@ export const BASE_URL = 'http://conceptbe.kr:8080';
 
 // 서버 작업으로 인한 임시 상수값
 export const ROOT_COMMENT_ID = '0';
-
-export const DEFAULT_IMAGE_URL = '';
diff --git a/src/layouts/Back.tsx b/src/layouts/Back.tsx
@@ -8,7 +8,7 @@ const Back = () => {
   const { hasMatched } = useRouteMatched();
   const navigate = useNavigate();
 
-  const isMatchedWhiteStyle = hasMatched('/feed/:id');
+  const isMatchedWhiteStyle = hasMatched('/feed/:id', '/profile-edit');
 
   return (
     <Wrapper onClick={() => navigate(-1)} isWhiteStyle={isMatchedWhiteStyle}>

diff --git a/src/layouts/MobileView.tsx b/src/layouts/MobileView.tsx
@@ -22,7 +22,7 @@ export default MobileView;
 const Container = styled.main`
   width: auto;
   height: 100dvh;
-  max-width: 375px;
+  max-width: 420px;
   max-height: 100%;
   margin: 0 auto;
   overflow: hidden;

diff --git a/src/layouts/Navbar.tsx b/src/layouts/Navbar.tsx
@@ -6,12 +6,13 @@ import {
   SVGNavProfile,
   SVGNavWrite24,
 } from 'concept-be-design-system';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate, useParams } from 'react-router-dom';
 
 import useRouteMatched from '../hooks/useRouteMatch';
 import { getUserId } from '../pages/Profile/utils/getUserId';
 
 const Navbar = () => {
+  const { id: userIdFromParams } = useParams();
   const { hasMatched } = useRouteMatched();
   const navigate = useNavigate();
   const isMatchedNavigation = hasMatched(
@@ -37,7 +38,7 @@ const Navbar = () => {
             <SVGNavWrite24 />
           </Navigation.Item>
           <Navigation.Item onClick={() => navigate(`/profile/${getUserId()}`)}>
-            {location.pathname.startsWith('/profile') ? <SVGNavActiveProfile /> : <SVGNavProfile />}
+            {Number(userIdFromParams) === getUserId() ? <SVGNavActiveProfile /> : <SVGNavProfile />}
           </Navigation.Item>
         </Navigation>
       )}

diff --git a/src/pages/Feed/Feed.page.tsx b/src/pages/Feed/Feed.page.tsx
@@ -1,6 +1,7 @@
 import styled from '@emotion/styled';
-import { Header, Spacer, Text, theme, SVGHeaderFilter, SVGFeedWrite40 } from 'concept-be-design-system';
+import { Header, Spacer, Text, theme, SVGHeaderFilter, SVGFeedWrite40, Box } from 'concept-be-design-system';
 import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
 
 import BestIdeaCardListSection from './components/BestIdeaCardListSection/BestIdeaCardListSection';
 import FilterBottomSheet from './components/FilterBottomSheet/FilterBottomSheet';
@@ -12,6 +13,7 @@ import Logo from '../../layouts/Logo';
 import { useWritingInfoQuery } from '../Write/hooks/queries/useWritingInfoQuery';
 
 const Feed = () => {
+  const navigate = useNavigate();
   const [isFilterBottomSheetOpen, setIsFilterBottomSheetOpen] = useState(false);
   const { branches, purposes, recruitmentPlaces, skillCategoryResponses } = useWritingInfoQuery();
 
@@ -38,7 +40,7 @@ const Feed = () => {
 
       <Wrapper>
         <FeedFixBox>
-          <SVGFeedWrite40 />
+          <SVGFeedWrite40 onClick={() => navigate('/write')} cursor="pointer" />
 
           <Spacer size={27} />
           <FeedFixTextWrapper>
@@ -51,12 +53,14 @@ const Feed = () => {
           </FeedFixTextWrapper>
 
           <Spacer size={8} />
-          <Text font="suit22r" color="w1">
+          <WordBreakText font="suit22r" color="w1">
             재밌는 아이디어를 들려주세요!
-          </Text>
+          </WordBreakText>
           <Spacer size={14} />
 
-          <Text font="suit15ra" color="w2">{`아이디어 적으러 가기 >`}</Text>
+          <Box onClick={() => navigate('/write')} cursor="pointer">
+            <Text font="suit15ra" color="w2">{`아이디어 적으러 가기 >`}</Text>
+          </Box>
         </FeedFixBox>
         <IdeaSectionBox>
           <BestIdeaCardListSection />
@@ -90,7 +94,9 @@ const Wrapper = styled.section`
 `;
 
 const FeedFixBox = styled.div`
+  max-width: 315px;
   padding: 90px 30px 50px 30px;
+  margin: 0 auto;
   display: flex;
   flex-direction: column;
   background-color: ${theme.color.c1};
@@ -106,3 +112,8 @@ const IdeaSectionBox = styled.div`
   background-color: ${theme.color.bg1};
   border-radius: 16px 16px 0 0;
 `;
+
+const WordBreakText = styled(Text)`
+  word-break: keep-all;
+  line-height: 120%;
+`;
diff --git a/src/pages/Feed/components/BestIdeaCard/BestIdeaCard.tsx b/src/pages/Feed/components/BestIdeaCard/BestIdeaCard.tsx
@@ -7,6 +7,7 @@ import {
   PNGIdeaBackground3,
   PNGIdeaBackground4,
   PNGIdeaBackground5,
+  ImageView,
 } from 'concept-be-design-system';
 import { useNavigate } from 'react-router-dom';
 
@@ -32,7 +33,7 @@ const BestIdeaCard = ({ id, branches, title, idx }: Props) => {
 
   return (
     <BestIdeaCardWrapper onClick={() => navigate(`/feed/${id}`)}>
-      <img src={ideaBackground[idx % 5]} />
+      <ImageView src={ideaBackground[idx % 5]} alt="인기 아이디어 이미지" />
       <CardBoxBack />
       <CardBox>
         <Text style={{ fontSize: 13, fontWeight: 800 }} color="w1">

diff --git a/src/pages/Feed/components/BestIdeaCardListSection/BestIdeaCardListSection.tsx b/src/pages/Feed/components/BestIdeaCardListSection/BestIdeaCardListSection.tsx
@@ -33,20 +33,41 @@ const BestIdeaCardListSection = () => {
       <Suspense fallback={<BestIdeaCardListSkeleton />}>
         <CardList />
       </Suspense>
+      <TransparentBox />
     </Wrapper>
   );
 };
 
 export default BestIdeaCardListSection;
 
+const TransparentBox = styled.div`
+  width: 22px;
+  opacity: 0;
+`;
+
 export const Wrapper = styled.div`
   padding: 47px 0 0 22px;
+  max-width: 375px;
+  margin-left: auto;
+
+  @media (max-width: 420px) {
+    // NewIdeaSection은 margin이 좌우 auto인 반면 BestIdeaSection은 left만 auto여서 margin-left 1/2 연산을 직접 수행
+    margin-left: calc((100vw - 375px) * 0.5);
+  }
+
+  @media (max-width: 375px) {
+    // BestIdeaSection은 위 미디어쿼리문으로 인해 margin이 음수값이 될 수 있으므로 0으로 일괄 지정
+    margin-left: 0;
+  }
 `;
 
 export const CardListWrapper = styled.div`
   display: flex;
   flex-wrap: nowrap;
   gap: 10px;
-  overflow-x: scroll;
-  overflow-y: hidden;
+  overflow: auto;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
 `;
diff --git a/src/pages/Feed/components/NewIdeaCardListSection/NewIdeaCardListSection.tsx b/src/pages/Feed/components/NewIdeaCardListSection/NewIdeaCardListSection.tsx
@@ -6,7 +6,6 @@ import NewIdeaCardListSkeleton from './NewIdeaCardListSkeleton';
 import { useDeleteIdea } from '../../../components/NewIdeaCard/hooks/mutations/useDeleteIdea';
 import NewIdeaCard from '../../../components/NewIdeaCard/NewIdeaCard';
 import useNavigatePage from '../../../hooks/useNavigatePage';
-import { getUserId } from '../../../Profile/utils/getUserId';
 import { useFilterParams } from '../../context/filterContext';
 import { useIdeasQuery } from '../../hooks/queries/useIdeasQuery';
 import { useFeedInfiniteFetch } from '../../hooks/useFeedInfiniteFetch';
@@ -15,7 +14,7 @@ import { getUserNickname } from '../../utils/getUserNickname';
 const nickname = getUserNickname();
 
 const CardList = () => {
-  const { filterParams, updateFilterParams } = useFilterParams();
+  const { filterParams } = useFilterParams();
   const { ideas, fetchNextPage } = useIdeasQuery(filterParams);
   const { goProfilePage } = useNavigatePage();
   const { deleteIdea } = useDeleteIdea();
@@ -95,5 +94,7 @@ const NewIdeaCardListSection = () => {
 export default NewIdeaCardListSection;
 
 export const Wrapper = styled.div`
+  max-width: 331px;
   padding: 47px 22px 0 22px;
+  margin: 0 auto;
 `;
diff --git a/src/pages/FeedDetail/components/Comment.tsx b/src/pages/FeedDetail/components/Comment.tsx
@@ -106,7 +106,7 @@ const Comment = ({
               </Text>
             </Flex>
             <Spacer size={14} />
-            <Flex alignItems="center" gap={4} onClick={toggleLikeComment}>
+            <Flex alignItems="center" gap={4} onClick={toggleLikeComment} cursor="pointer">
               {likes ? <SVGFeedLike /> : <SVGFeedUnLike />}
               <Text font="suit12r" color="b9">
                 {get999PlusCount(likesCount)}

diff --git a/src/pages/FeedDetail/components/CommentProfileInfo.tsx b/src/pages/FeedDetail/components/CommentProfileInfo.tsx
@@ -1,8 +1,7 @@
 import styled from '@emotion/styled';
-import { Box, Flex, Text, TextDivider } from 'concept-be-design-system';
+import { Box, Flex, ImageView, PNGDefaultProfileInfo36, Text, TextDivider } from 'concept-be-design-system';
 import { Fragment } from 'react';
 
-import { DEFAULT_IMAGE_URL } from '../../../constants';
 import { formatCommentDate } from '../../Feed/utils/formatCommentDate';
 
 interface Props {
@@ -14,21 +13,21 @@ interface Props {
 
 const CommentProfileInfo = ({ imageUrl, nickname, skillList, createdAt }: Props) => {
   return (
-    <Flex alignItems="center" gap={10}>
+    <Flex gap={10}>
       <Box width={36} height={36} overflow="hidden" borderRadius="0 150px 150px 0">
-        <Img src={imageUrl || DEFAULT_IMAGE_URL} />
+        <ImageView src={imageUrl} alt="프로필" defaultSrc={PNGDefaultProfileInfo36} />
       </Box>
-      <Flex direction="column" gap={4}>
+      <Flex paddingTop={2} direction="column" gap={4}>
         <Text font="suit14m" color="b4">
           {nickname}
         </Text>
-        <Flex alignItems="center">
+        <Flex wrap="wrap" alignItems="center" gap={4}>
           {skillList.map((skill) => (
             <Fragment key={skill}>
-              <Text font="suit12r" color="b9">
+              <FixedSizeText font="suit12r" color="b9">
                 {skill}
-              </Text>
-              <TextDivider left={6} right={6} color="l2" />
+              </FixedSizeText>
+              <TextDivider left={2} right={2} color="l2" />
             </Fragment>
           ))}
           <Text font="suit12r" color="b9">
@@ -40,9 +39,8 @@ const CommentProfileInfo = ({ imageUrl, nickname, skillList, createdAt }: Props)
   );
 };
 
-const Img = styled.img`
-  width: 100%;
-  height: 100%;
+const FixedSizeText = styled(Text)`
+  width: max-content;
 `;
 
 export default CommentProfileInfo;
diff --git a/src/pages/FeedDetail/components/ModifyDropdown.tsx b/src/pages/FeedDetail/components/ModifyDropdown.tsx
@@ -9,9 +9,9 @@ import {
   SVGTripleDots,
   SVGFeedPencil,
   theme,
+  SVGMore24,
 } from 'concept-be-design-system';
 
-import { ReactComponent as SVGMore24 } from '../../components/NewIdeaCard/assets/more24.svg';
 import useHandleModifyDropdown from '../hooks/useHandleModifyDropdown';
 
 interface Props {
Original file line number	Diff line number	Diff line change
Expand Up		@@ -2,5 +2,3 @@ export const BASE_URL = 'http://conceptbe.kr:8080';

		// 서버 작업으로 인한 임시 상수값
		export const ROOT_COMMENT_ID = '0';

		export const DEFAULT_IMAGE_URL = '';