Merge branch 'main' into br/#298

Team-Packman · Sep 18, 2022 · 489a30b · 489a30b
2 parents ea93653 + bf52877
commit 489a30b
Show file tree

Hide file tree

Showing 99 changed files with 196 additions and 276 deletions.
diff --git a/components/CategoriesWrapper.tsx b/components/CategoriesWrapper.tsx
@@ -9,7 +9,7 @@ function CategoriesWrapper() {
       <CategoryWrapper>
         <CategoryNameWrapper>
           <CategoryName>필수</CategoryName>
-          <Image src={'/assets/png/kebabButton.png'} alt={'categoryName'} width={24} height={24} />
+          <Image src={'/assets/png/kekbab_ic.svg'} alt={'categoryName'} width={24} height={24} />
         </CategoryNameWrapper>
         <ListItemWrapper>
           <input type="checkbox" />

diff --git a/components/Swiper.tsx b/components/Swiper.tsx
@@ -15,11 +15,12 @@ interface SwiperProps {
   key?: string;
   isRecentListExist: boolean;
   getSwiperIndex(index: number): void;
+  activeIndex: number;
   children: ReactNode[];
 }
 
 function SwiperContainer(props: SwiperProps) {
-  const { children, isRecentListExist, getSwiperIndex } = props;
+  const { children, isRecentListExist, getSwiperIndex, activeIndex } = props;
 
   const [swiperRef, setSwiperRef] = useState<SwiperCore>(); /* eslint-disable no-unused-vars */
   const [bullet] = useState<string[]>(['함께 패킹', '혼자 패킹']);
@@ -40,6 +41,7 @@ function SwiperContainer(props: SwiperProps) {
         pagination={pagination}
         onSlideChange={(s) => getSwiperIndex(s.activeIndex)}
         virtual
+        active={activeIndex}
       >
         {slides.map((slideContent, index) => (
           <SwiperSlide key={slideContent.key} virtualIndex={index}>
@@ -63,7 +65,9 @@ export const StyledRoot = styled.div<{ isRecentListExist: boolean }>`
   margin-top: ${({ isRecentListExist }) => (isRecentListExist ? '0' : '4.2rem')};
 `;
 
-export const StyledSwiper = styled(Swiper)`
+export const StyledSwiper = styled(Swiper)<{
+  active: number;
+}>`
   display: flex;
   flex: 1;
   justify-content: center;
@@ -76,8 +80,8 @@ export const StyledSwiper = styled(Swiper)`
     height: 4rem;
     width: 100%;
     border: 1px solid ${packmanColors.pmDeepGrey};
-    border-radius: 0.6rem;
-    background: ${packmanColors.pmWhite};
+    border-radius: 0.8rem;
+    /* background: ${packmanColors.pmWhite}; */
   }
 
   .swiper-pagination-bullet {
@@ -88,18 +92,33 @@ export const StyledSwiper = styled(Swiper)`
     height: 100%;
     border-radius: 0.6rem;
     color: ${packmanColors.pmDeepGrey};
-    font-size: 16px;
-    background: ${packmanColors.pmWhite};
+    ${FONT_STYLES.BODY5_MEDIUM};
+    background: transparent;
   }
   .swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet,
   .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
     margin: 0 0 !important;
+    opacity: 1;
+  }
+  .swiper-pagination {
+    &:after {
+      content: '';
+      position: absolute;
+      transition: transform 0.3s;
+      transform: ${({ active }) => `translateX(calc(${active} * 100%))`};
+      width: 50%;
+      height: 100%;
+      background-color: ${packmanColors.black};
+      border-radius: 0.6rem;
+      z-index: 2;
+    }
   }
 
   .swiper-pagination-bullet-active {
-    ${FONT_STYLES.BODY4_SEMIBOLD};
+    ${FONT_STYLES.BODY5_MEDIUM};
     color: ${packmanColors.pmWhite};
-    background: ${packmanColors.pmBlack};
+    background: transparent;
+    z-index: 3;
   }
   .swiper-slide {
     display: flex;

diff --git a/components/TestLanding.tsx b/components/TestLanding.tsx
diff --git a/components/alone/AloneLanding.tsx b/components/alone/AloneLanding.tsx
@@ -388,6 +388,7 @@ function AloneLanding() {
     <Layout
       back
       title="패킹리스트"
+      folderId={list.folderId}
       option={
         <CheckListHeader
           listId={list.id}

diff --git a/components/common/Error.tsx b/components/common/Error.tsx
@@ -1,7 +1,7 @@
 import Image from 'next/image';
 import React from 'react';
 import styled from 'styled-components';
-import ErrorImage from '/public/assets/png/ErrorImage.png';
+import ErrorImage from '/public/assets/png/ErrorImage.webp';
 import { FONT_STYLES } from '../../styles/font';
 import { packmanColors } from '../../styles/color';
 import HomeIC from '/public/assets/svg/home_ic.svg';

diff --git a/components/common/Header.tsx b/components/common/Header.tsx
@@ -19,19 +19,22 @@ interface HeaderProps {
   title?: string;
   icon?: Icon;
   groupId?: string;
+  folderId?: string;
 }
 
 function Header(props: HeaderProps) {
-  const { back, title, icon, groupId } = props;
+  const { back, title, icon, groupId, folderId } = props;
 
-  const [route, { folderId }] = useHeaderRouter();
   const [scroll] = useGlobalState<boolean>('scroll');
+  const [route] = useHeaderRouter({
+    folderId,
+  });
 
   return (
     <StyledRoot>
       <StyledContent scroll={scroll}>
         {back && (
-          <StyledBack onClick={() => route()}>
+          <StyledBack onClick={route}>
             <Image src={BackIC} layout="fill" alt="back_icon" />
           </StyledBack>
         )}

diff --git a/components/common/Layout.tsx b/components/common/Layout.tsx
@@ -15,17 +15,20 @@ interface LayoutProps {
   option?: ReactNode;
   noHeader?: boolean;
   groupId?: string;
+  folderId?: string;
 }
 
 function Layout(props: LayoutProps) {
-  const { children, back, title, icon, option, padding, noHeader, groupId } = props;
+  const { children, back, title, icon, option, padding, noHeader, groupId, folderId } = props;
 
   const [scroll] = useGlobalState<boolean>('scroll');
   const optionEl = document.querySelector('.layout_option');
 
   return (
     <StyledRoot>
-      {!noHeader && <Header back={back} title={title} icon={icon} groupId={groupId} />}
+      {!noHeader && (
+        <Header back={back} title={title} icon={icon} groupId={groupId} folderId={folderId} />
+      )}
       {option}
       <StyledMain
         scroll={scroll}

diff --git a/components/common/ModalForAddToTemplate.tsx b/components/common/ModalForAddToTemplate.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import styled from 'styled-components';
-import ButtonX from '/public/assets/png/ButtonX.png';
+import iClose from '/public/assets/svg/iClose.svg';
 import { packmanColors } from '../../styles/color';
 import Image from 'next/image';
 
@@ -16,7 +16,7 @@ function ModalForAddToTemplate(props: ModalForAddToTemplateProps) {
       <StyledBg onClick={modalHandler} />
       <StyledModal>
         <StyledButtonContainer onClick={modalHandler}>
-          <Image src={ButtonX} alt="closeModal" width="24" height="24" />
+          <Image src={iClose} alt="closeModal" width="24" height="24" />
         </StyledButtonContainer>
         <div>
           <StyledTitle>{title}</StyledTitle>

diff --git a/components/common/ModalForInvitation.tsx b/components/common/ModalForInvitation.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import styled, { css } from 'styled-components';
 import { packmanColors } from '../../styles/color';
-import ButtonX from '/public/assets/png/ButtonX.png';
+import iClose from '/public/assets/svg/iClose.svg';
 import Image from 'next/image';
 import { useResetRecoilState } from 'recoil';
 import { listState } from '../../utils/recoil/atom/atom';
@@ -31,7 +31,7 @@ function ModalForInvitation(props: ModalForInvitationProps) {
       <StyledBg onClick={closeModal} />
       <StyledModal>
         <ButtonContainer>
-          <Image src={ButtonX} alt="closeModal" width="24" height="24" onClick={closeModal} />
+          <Image src={iClose} alt="closeModal" width="24" height="24" onClick={closeModal} />
         </ButtonContainer>
         <Description>함께 패킹할 멤버를 초대해보세요!</Description>
         <CopyLinkButton onClick={copyToClipboard} isCopied={isCopied}>

diff --git a/components/common/ModalForInvited.tsx b/components/common/ModalForInvited.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
 import { packmanColors } from '../../styles/color';
-import ButtonX from '/public/assets/png/ButtonX.png';
+import iClose from '/public/assets/svg/iClose.svg';
 import Image from 'next/image';
 import Link from 'next/link';
 
@@ -17,7 +17,7 @@ function ModalForInvited(props: ModalForInvitedProps) {
       <StyledBg />
       <StyledModal>
         <ButtonContainer>
-          <Image src={ButtonX} alt="closeModal" width="24" height="24" />
+          <Image src={iClose} alt="closeModal" width="24" height="24" />
         </ButtonContainer>
         <ListName>{title}</ListName>
         <Description>패킹 멤버로 초대되었습니다.</Description>

diff --git a/components/common/ModalForShare.tsx b/components/common/ModalForShare.tsx
@@ -1,8 +1,8 @@
 import React, { useState } from 'react';
 import styled from 'styled-components';
 import { packmanColors } from '../../styles/color';
-import ButtonX from '/public/assets/svg/iClose.svg';
-import forShare from '/public/assets/png/forShare.png';
+import iClose from '/public/assets/svg/iClose.svg';
+import forShare from '/public/assets/png/forShare.webp';
 import Image from 'next/image';
 import { useRouter } from 'next/router';
 
@@ -30,7 +30,7 @@ function ModalForShare(props: ModalForShareProps) {
       <StyledBg onClick={modalHandler} />
       <StyledModal>
         <ButtonContainer>
-          <Image src={ButtonX} alt="closeModal" width="24" height="24" onClick={modalHandler} />
+          <Image src={iClose} alt="closeModal" width="24" height="24" onClick={modalHandler} />
         </ButtonContainer>
         <Description>패킹 리스트 공유</Description>
         <Image src={forShare} alt="forShare" placeholder="blur" width="260" height="260" />

diff --git a/components/common/ModalForShared.tsx b/components/common/ModalForShared.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
 import { packmanColors } from '../../styles/color';
-import ButtonX from '/public/assets/png/ButtonX.png';
+import iClose from '/public/assets/svg/iClose.svg';
 import Image from 'next/image';
 import { useRouter } from 'next/router';
 
@@ -11,7 +11,7 @@ function ModalForShared() {
     <StyledRoot>
       <StyledModal>
         <ButtonContainer>
-          <Image src={ButtonX} alt="closeModal" width="24" height="24" />
+          <Image src={iClose} alt="closeModal" width="24" height="24" />
         </ButtonContainer>
         <Description>친구가 패킹 리스트를 공유했어요! 🎁</Description>
         <SeeListButton onClick={() => router.push('/login')}>

diff --git a/components/common/PackagesWithCategory.tsx b/components/common/PackagesWithCategory.tsx
@@ -23,7 +23,7 @@ function PackagesWithCategory(props: PropsWithChildren<PackagesWithCategoryProps
         {!preview && (
           <li>
             <StyledAddButton onClick={createHandler}>
-              <Image src={Plus} alt="plus_ic" layout="fill" />
+              <Image src={Plus} alt="plus_ic" layout="fill" priority />
             </StyledAddButton>
           </li>
         )}
@@ -34,7 +34,7 @@ function PackagesWithCategory(props: PropsWithChildren<PackagesWithCategoryProps
 
 export default PackagesWithCategory;
 
-const StyledRoot = styled.ul`
+const StyledRoot = styled.div`
   & > ul {
     margin-top: 0.8rem;
   }

diff --git a/components/folder/FloatActionButton.tsx b/components/folder/FloatActionButton.tsx
@@ -51,9 +51,13 @@ const FloatActionButton = (props: FloatModalProps) => {
       <StyledFABContainer pageName={pageName} isAloned={isAloned}>
         <li onClick={handleOpen}>
           {open ? (
-            <Image src={FABOPEN} width={57} height={57} alt="FAB" />
+            <div>
+              <Image src={FABOPEN} alt="FAB" layout="fill" />
+            </div>
           ) : (
-            <Image src={FAB} width={57} height={57} alt="FAB" />
+            <div>
+              <Image src={FAB} alt="FAB" layout="fill" />
+            </div>
           )}
         </li>
         {pageName === 'folder' ? (
@@ -121,6 +125,11 @@ export const StyledFABContainer = styled.ul<{ pageName: string; isAloned: string
   // when user hover over first button
   max-height: 52px;
 
+  li > div {
+    width: 5.7rem;
+    height: 5.7rem;
+  }
+
   li:first-child {
     position: fixed;
     right: 2rem;

diff --git a/components/folder/FolderBox.tsx b/components/folder/FolderBox.tsx
@@ -142,7 +142,7 @@ export const StyledInfo = styled.div`
 export const StyledKebab = styled.div`
   display: flex;
   justify-content: flex-end;
-  padding: 0.5rem 0.4rem 0 0;
+  padding: 0.5rem 0rem 0 0;
   z-index: 10;
   cursor: pointer;
 

diff --git a/components/folder/FolderInitial.tsx b/components/folder/FolderInitial.tsx
@@ -2,8 +2,8 @@ import Image from 'next/image';
 import React, { useState } from 'react';
 import styled from 'styled-components';
 import { packmanColors } from '../../styles/color';
-import InitLogo from '/public/assets/png/home_together.png';
-import InitAloneLogo from '/public/assets/png/home_alone.png';
+import InitLogo from '/public/assets/png/home_together.webp';
+import InitAloneLogo from '/public/assets/png/home_alone.webp';
 
 export interface FolderInitialProps {
   categoryName: string;

diff --git a/components/folder/FolderLanding.tsx b/components/folder/FolderLanding.tsx
@@ -282,7 +282,11 @@ function FolderLanding() {
               </StyledDday>
             </>
           </StyledRecentBanner>
-          <SwiperContainer isRecentListExist={isRecentListExist} getSwiperIndex={getSwiperIndex}>
+          <SwiperContainer
+            isRecentListExist={isRecentListExist}
+            getSwiperIndex={getSwiperIndex}
+            activeIndex={currentSwiperIndex}
+          >
             {
               <FolderList
                 key="1"

diff --git a/components/folder/FolderList.tsx b/components/folder/FolderList.tsx
@@ -79,11 +79,11 @@ export const StyledListRoot = styled.section`
 `;
 
 export const StyledWrapper = styled.div`
-  --auto-grid-min-size: 13rem;
+  --auto-grid-min-size: 15.5rem;
   display: grid;
   align-items: start;
   grid-template-columns: repeat(auto-fill, minmax(var(--auto-grid-min-size), 1fr));
-  grid-gap: 1rem;
+  grid-gap: 0.8rem;
   justify-items: stretch;
   margin-top: 2.4rem;
   padding-bottom: 5rem;

diff --git a/components/packingList/CaptionSection.tsx b/components/packingList/CaptionSection.tsx
@@ -36,13 +36,14 @@ function CaptionSection(props: CaptionSectionProps) {
         {isDeleting ? (
           <p onClick={() => handleIsDragged(Array(packingList.length).fill(false))}>취소</p>
         ) : (
-          <Image
-            src={iTrash}
-            alt="삭제"
-            width={24}
-            height={24}
-            onClick={() => handleIsDragged(Array(packingList.length).fill(false))}
-          />
+          <StyledTrashImage>
+            <Image
+              src={iTrash}
+              alt="삭제"
+              layout="fill"
+              onClick={() => handleIsDragged(Array(packingList.length).fill(false))}
+            />
+          </StyledTrashImage>
         )}
       </StyledCaptionButtonWrapper>
     </StyledRoot>
@@ -78,6 +79,10 @@ const StyledCaptionText = styled.p`
     color: ${packmanColors.pmPink};
   }
 `;
+const StyledTrashImage = styled.div`
+  width: 2.4rem;
+  height: 2.4rem;
+`;
 const StyledCaptionButtonWrapper = styled.div`
   position: absolute;
   display: flex;