fix: api 변경 내용 적용 (#383)

* chore: url param에서 dictionaryPlantIdParam를 filter로 변경 * chore: api url에서 dictionaryPlantIdParam를 filter로 변경 * chore: isLoggedin으로 네이밍 변경 * feat: 비로그인시 글쓰기 버튼 숨김 * design: 메인 페이지 디자인 수정 * test: 비로그인/내 반려 식물 목록 비활성화 * chore: isLoggedIn으로 네이밍 변경 * chore: 글이 없을 때 메세지 보여줌 * design: 메인 페이지 마진 수정 * fix: 문의하기 버튼 pad 너비에 고정
woowacourse-teams · Sep 20, 2023 · 9f06dc3 · 9f06dc3
1 parent 793bbcc
commit 9f06dc3
Show file tree

Hide file tree

Showing 12 changed files with 75 additions and 61 deletions.
diff --git a/frontend/cypress/e2e/auth.cy.ts b/frontend/cypress/e2e/auth.cy.ts
@@ -6,10 +6,10 @@ describe('비로그인 상태에서는 로그인 페이지로 이동한다.', ()
   //   cy.get('#toast-root').contains('로그인 후 이용 가능').url().should('match', /login/);
   // });
 
-  it('내 반려 식물 목록', () => {
-    cy.visit('/pet');
-    cy.get('#toast-root').contains('로그인 후 이용 가능').url().should('match', /login/);
-  });
+  // it('내 반려 식물 목록', () => {
+  //   cy.visit('/pet');
+  //   cy.get('#toast-root').contains('로그인 후 이용 가능').url().should('match', /login/);
+  // });
 
   it('반려 식물 상세 정보', () => {
     cy.visit('/pet/123');

diff --git a/frontend/src/apis/garden.ts b/frontend/src/apis/garden.ts
@@ -12,7 +12,7 @@ const getList = (dictionaryPlantId: DictionaryPlant['id'] | null, page: number)
   let url = `${GARDEN_URL}?page=${page}`;
 
   if (dictionaryPlantId) {
-    url += `&dictionaryPlantId=${dictionaryPlantId}`;
+    url += `&filter=${dictionaryPlantId}`;
   }
 
   return fetch(url);

diff --git a/frontend/src/components/search/SearchBox/index.tsx b/frontend/src/components/search/SearchBox/index.tsx
@@ -34,8 +34,8 @@ interface SearchBoxProps {
 const SearchBox = (props: SearchBoxProps) => {
   const {
     value,
-    height = '56px',
-    fontSize = '2rem',
+    height = '48px',
+    fontSize = '1.6rem',
     showResultSize = 4,
     onChangeValue,
     onResultClick,

diff --git a/frontend/src/mocks/data/garden.ts b/frontend/src/mocks/data/garden.ts
@@ -9,7 +9,7 @@ const DICTIONARY_PLANT_MAP: Record<number, string> = {
 };
 
 export const generateGardenPageData = (
-  dictionaryPlantId: number | null,
+  filter: number | null,
   pageParam: number,
   hasNext: boolean
 ) => {
@@ -96,7 +96,7 @@ export const generateGardenPageData = (
           id: pageParam * 100 + 5,
           createdAt: '1999-12-14',
           updatedAt: '1999-12-14',
-          dictionaryPlantName: '참새',
+          dictionaryPlantName: '아',
           content: '이거 이렇게 키워보아요',
           manageLevel: '초보자',
           petPlant: {
@@ -132,9 +132,9 @@ export const generateGardenPageData = (
         },
       ];
 
-  if (dictionaryPlantId) {
+  if (filter) {
     return page.filter(
-      ({ dictionaryPlantName }) => DICTIONARY_PLANT_MAP[dictionaryPlantId] === dictionaryPlantName
+      ({ dictionaryPlantName }) => DICTIONARY_PLANT_MAP[filter] === dictionaryPlantName
     );
   }
 

diff --git a/frontend/src/mocks/handlers/gardenHandlers.ts b/frontend/src/mocks/handlers/gardenHandlers.ts
@@ -9,11 +9,11 @@ const gardenHandlers = [
     const pageParam = req.url.searchParams.get('page');
     const page = pageParam ? Number(pageParam) : 0;
 
-    const dictionaryPlantIdParam = req.url.searchParams.get('dictionaryPlantId');
-    const dictionaryPlantId = dictionaryPlantIdParam ? Number(dictionaryPlantIdParam) : null;
+    const filterParam = req.url.searchParams.get('filter');
+    const filter = filterParam ? Number(filterParam) : null;
 
     const hasNext = page < 6;
-    const data = generateGardenPageData(dictionaryPlantId, page, hasNext);
+    const data = generateGardenPageData(filter, page, hasNext);
     const response = {
       page,
       size: data.length,

diff --git a/frontend/src/pages/DictionaryPlantDetail/index.tsx b/frontend/src/pages/DictionaryPlantDetail/index.tsx
@@ -14,7 +14,7 @@ const DictionaryPlantDetail = () => {
   const { id } = useParams();
   if (!id) throw new Error('URL에 id가 없습니다.');
 
-  const { isSuccess: isValidSession } = useCheckSessionId(false);
+  const { isSuccess: isLoggedIn } = useCheckSessionId(false);
   const addToast = useAddToast();
 
   const dictionaryPlantId = Number(id);
@@ -47,7 +47,7 @@ const DictionaryPlantDetail = () => {
         <DictionaryPlantContent {...dictionaryPlantDetail} />
       </Main>
       <BottomSheet>
-        <PrimaryButton onClick={isValidSession ? goPetPlantRegisterForm : warning}>
+        <PrimaryButton onClick={isLoggedIn ? goPetPlantRegisterForm : warning}>
           반려 식물로 등록하기
         </PrimaryButton>
       </BottomSheet>

diff --git a/frontend/src/pages/GardenPostList/GardenPostList.style.ts b/frontend/src/pages/GardenPostList/GardenPostList.style.ts
@@ -3,7 +3,7 @@ import { styled } from 'styled-components';
 export const Main = styled.main`
   position: relative;
   width: 100%;
-  height: 100%;
+  height: calc(100% - 90px);
   padding: 8px;
 `;
 

diff --git a/frontend/src/pages/GardenPostList/index.tsx b/frontend/src/pages/GardenPostList/index.tsx
@@ -6,6 +6,7 @@ import Navbar from 'components/@common/Navbar';
 import SvgStroke from 'components/@common/SvgIcons/SvgStroke';
 import { FixedButtonArea, FixedButton, List, Main, Message, Sensor } from './GardenPostList.style';
 import selectedDictionaryPlantAtom from 'store/atoms/garden';
+import useCheckSessionId from 'hooks/queries/auth/useCheckSessionId';
 import useIntersectionRef from 'hooks/useIntersectionRef';
 import { URL_PATH } from 'constants/index';
 import useGardenPostList from '../../hooks/queries/garden/useGardenPostList';
@@ -21,9 +22,9 @@ const GardenPostList = () => {
     selectedDictionaryPlantAtom
   );
 
+  const { isSuccess: isLoggedIn } = useCheckSessionId(false);
   const {
     data: gardenPostList,
-    isLoading,
     isFetchingNextPage,
     hasNextPage,
     fetchNextPage,
@@ -47,6 +48,11 @@ const GardenPostList = () => {
     window.scrollTo(0, 0);
   }, [selectedDictionaryPlant]);
 
+  const Skeletons = () =>
+    Array(SKELETON_LENGTH)
+      .fill(null)
+      .map((_, index) => <GardenPostItemSkeleton key={index} />);
+
   return (
     <>
       <GardenPostListHeader
@@ -55,24 +61,33 @@ const GardenPostList = () => {
         clear={clear}
       />
       <Main>
-        <List>
-          {gardenPostList?.map((gardenPost) => (
-            <GardenPostItem key={gardenPost.id} {...gardenPost} />
-          ))}
-          {(isLoading || isFetchingNextPage) &&
-            Array(SKELETON_LENGTH)
-              .fill(null)
-              .map((_, index) => <GardenPostItemSkeleton key={index} />)}
-        </List>
-        {!isFetchingNextPage && <Sensor ref={intersectionRef} />}
-        {!hasNextPage && <Message>마지막이에요 😊</Message>}
+        {gardenPostList ? (
+          gardenPostList.length ? (
+            <List>
+              {gardenPostList.map((gardenPost) => (
+                <GardenPostItem key={gardenPost.id} {...gardenPost} />
+              ))}
+              {isFetchingNextPage && <Skeletons />}
+              {!hasNextPage && <Message>마지막이에요 😊</Message>}
+              {!isFetchingNextPage && <Sensor ref={intersectionRef} />}
+            </List>
+          ) : (
+            <Message>아직 작성된 글이 없어요 🤔</Message>
+          )
+        ) : (
+          <List>
+            <Skeletons />
+          </List>
+        )}
       </Main>
       <Navbar />
-      <FixedButtonArea>
-        <FixedButton type="button" onClick={goGardenRegisterPick} aria-label="모두의 정원 글쓰기">
-          <SvgStroke color="white" size={32} icon="plus" />
-        </FixedButton>
-      </FixedButtonArea>
+      {isLoggedIn && (
+        <FixedButtonArea>
+          <FixedButton type="button" onClick={goGardenRegisterPick} aria-label="모두의 정원 글쓰기">
+            <SvgStroke color="white" size={32} icon="plus" />
+          </FixedButton>
+        </FixedButtonArea>
+      )}
     </>
   );
 };

diff --git a/frontend/src/pages/Main/Main.style.tsx b/frontend/src/pages/Main/Main.style.tsx
@@ -13,20 +13,15 @@ export const Wrapper = styled.div`
 `;
 
 export const LogoMessage = styled.p`
-  margin-top: 10%;
-  font-size: 3rem;
-  font-weight: 700;
+  margin-top: 15vh;
+  font-size: 2.4rem;
+  font-weight: 500;
   color: ${(props) => props.theme.color.primary};
 `;
 
-export const Logo = styled.img`
-  width: 192px;
-  margin-top: 32px;
-`;
-
 export const SearchBoxArea = styled.div`
   width: 100%;
-  margin-top: 32px;
+  margin-top: 36px;
 `;
 
 export const bounce = keyframes`
@@ -42,13 +37,17 @@ export const bounce = keyframes`
 `;
 
 export const SearchMessage = styled.p`
-  margin-top: 80px;
-  font-size: 2rem;
+  margin-top: 40px;
+  font-size: 1.6rem;
   color: #333333;
   animation: ${bounce} 6s infinite;
 `;
 
 export const Image = styled.img`
-  width: 192px;
-  margin-top: 32px;
+  width: 112px;
+`;
+
+export const ImageArea = styled.div`
+  height: 128px;
+  margin-top: 16px;
 `;
diff --git a/frontend/src/pages/Main/index.tsx b/frontend/src/pages/Main/index.tsx
@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import Navbar from 'components/@common/Navbar';
 import SearchBox from 'components/search/SearchBox';
-import { LogoMessage, SearchBoxArea, SearchMessage, Wrapper, Image } from './Main.style';
+import { LogoMessage, SearchBoxArea, SearchMessage, Wrapper, Image, ImageArea } from './Main.style';
 import useDictionaryNavigate from 'hooks/useDictionaryPlantNavigate';
 import LogoSvg from 'assets/logo.svg';
 import LogoWebp from 'assets/logo.webp';
@@ -14,16 +14,12 @@ const Main = () => {
     <>
       <Wrapper>
         <LogoMessage>식물을 쉽게</LogoMessage>
-        <picture>
-          <source srcSet={LogoWebp} type="image/webp" />
-          <Image
-            width={192}
-            height={174}
-            src={LogoSvg}
-            alt="피움 로고. 녹색으로 '피움'이라는 글자가 적혀 있다."
-          />
-        </picture>
-        <SearchMessage>피움에 등록된 식물을 검색해 보세요!</SearchMessage>
+        <ImageArea>
+          <picture>
+            <source srcSet={LogoWebp} type="image/webp" />
+            <Image src={LogoSvg} alt="피움 로고. 녹색으로 '피움'이라는 글자가 적혀 있다." />
+          </picture>
+        </ImageArea>
         <SearchBoxArea>
           <SearchBox
             value={searchValue}
@@ -33,6 +29,7 @@ const Main = () => {
             onResultClick={goToDictionaryPlantDetailPage}
           />
         </SearchBoxArea>
+        <SearchMessage>피움에 등록된 식물을 검색해 보세요!</SearchMessage>
       </Wrapper>
       <Navbar />
     </>

diff --git a/frontend/src/pages/MyPage/MyPage.style.ts b/frontend/src/pages/MyPage/MyPage.style.ts
@@ -31,7 +31,7 @@ export const Button = styled.button`
 `;
 
 export const BottomSheet = styled(Link)`
-  position: fixed;
+  position: absolute;
   right: 12px;
   bottom: 100px;
 

diff --git a/frontend/src/pages/MyPage/index.tsx b/frontend/src/pages/MyPage/index.tsx
@@ -1,3 +1,4 @@
+import { FixedButtonArea } from 'pages/GardenPostList/GardenPostList.style';
 import ContentHeader from 'components/@common/ContentHeader';
 import Navbar from 'components/@common/Navbar';
 import SvgFill from 'components/@common/SvgIcons/SvgFill';
@@ -40,12 +41,14 @@ const MyPage = () => {
             회원 탈퇴
           </Button>
         </ButtonBox>
+      </Wrapper>
+      <Navbar />
+      <FixedButtonArea>
         <BottomSheet to="https://forms.gle/rQUAi9GbVwrr7oG2A" target="blank">
           <SvgFill icon="survey" color={theme.color.background} size={16} />
           문의하기
         </BottomSheet>
-      </Wrapper>
-      <Navbar />
+      </FixedButtonArea>
     </>
   );
 };