Hotfix v1 (#246)

* design: LoadingDots 의 dot이 모바일에서 깨지지 않도록 수정 (#229) * refactor: logo 수정 (#229) * refactor: categoryNavbar 스크롤 에러 수정 (#229) * fix: 로그인시 새 창이 열리는 문제 수정 (#229) * refactor: 모바일 반응형 케러셀 및 일부 디자인 수정 (#229) * refactor: 불필요한 반응형 삭제 (#229) * refactor: 음식점이 없을 때 안내문구 추가 (#229) * refactor: 음식점 데이터 요청 딜레이 제거 (#229) * refactor: 네이버 링크 추가 (#229) * design: 지도 음식점 카드 디자인 수정 (#229) * design: 필터 관련 디자인 수정 (#229) * refactor: 불필요한 props 제거 (#229) * design: 셀럽 드롭다운 디자인 수정 (#229) * design: favicon 추가 (#229) * design: favicon 확장자 변경 (#229)
woowacourse-teams · Aug 4, 2023 · 9bf0b70 · 9bf0b70
1 parent d76b723
commit 9bf0b70
Show file tree

Hide file tree

Showing 20 changed files with 140 additions and 110 deletions.
diff --git a/frontend/public/celuveat-logo.png b/frontend/public/celuveat-logo.png
diff --git a/frontend/public/index.html b/frontend/public/index.html
@@ -2,6 +2,7 @@
 <html lang="ko">
   <head>
     <meta charset="utf-8" />
+    <link rel="icon" href="https://dev.celuveat.com/images-data/celuveat-logo.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>celuveat</title>
   </head>

diff --git a/frontend/src/api/index.ts b/frontend/src/api/index.ts
@@ -22,7 +22,9 @@ export const apiClient = axios.create({
 
 export const getRestaurants = async (queryParams: GetRestaurantsQueryParams) => {
   const queryString = getQueryString(queryParams);
+
   const response = await apiClient.get<RestaurantListData>(`/restaurants?${queryString}`);
+
   return response.data;
 };
 

diff --git a/frontend/src/assets/icons/dot.svg b/frontend/src/assets/icons/dot.svg
diff --git a/frontend/src/assets/icons/logo.svg b/frontend/src/assets/icons/logo.svg
diff --git a/frontend/src/assets/logo.png b/frontend/src/assets/logo.png
diff --git a/frontend/src/components/@common/Header/Header.tsx b/frontend/src/components/@common/Header/Header.tsx
@@ -1,6 +1,6 @@
 import React, { useMemo } from 'react';
 import { styled } from 'styled-components';
-import Logo from '~/assets/logo.png';
+import Logo from '~/assets/icons/logo.svg';
 import { Modal, ModalContent } from '~/components/@common/Modal';
 import InfoDropDown from '~/components/InfoDropDown';
 import LoginModalContent from '~/components/LoginModalContent';
@@ -31,7 +31,7 @@ function Header() {
   return (
     <>
       <StyledHeader isMobile={isMobile}>
-        <StyledLogo alt="홈" src={Logo} role="button" />
+        <Logo width={124} />
         <InfoDropDown options={options} externalOnClick={handleInfoDropDown} isOpen={isModalOpen} label="로그인" />
       </StyledHeader>
       <Modal>
@@ -55,14 +55,10 @@ const StyledHeader = styled.header<{ isMobile: boolean }>`
   z-index: 20;
 
   width: 100%;
-  height: 80px;
+  height: ${({ isMobile }) => (isMobile ? '60px' : '80px')};
 
   padding: 1.2rem 2.4rem;
 
   background-color: var(--white);
   border-bottom: 1px solid var(--gray-1);
 `;
-
-const StyledLogo = styled.img`
-  width: 136px;
-`;
diff --git a/frontend/src/components/@common/ImageCarousel/ImageCarousel.tsx b/frontend/src/components/@common/ImageCarousel/ImageCarousel.tsx
@@ -19,19 +19,25 @@ function ImageCarousel({ images, type }: ImageCarouselProps) {
   const { movingDirection } = useTouchMoveDirection(ref);
   const [currentIndex, setCurrentIndex] = useState<number>(0);
 
-  const goToPrevious = () => setCurrentIndex(prevIndex => prevIndex - 1);
-  const goToNext = () => setCurrentIndex(prevIndex => prevIndex + 1);
+  const goToPrevious: React.MouseEventHandler<HTMLButtonElement> = e => {
+    e.stopPropagation();
+    setCurrentIndex(prevIndex => prevIndex - 1);
+  };
+  const goToNext: React.MouseEventHandler<HTMLButtonElement> = e => {
+    e.stopPropagation();
+    setCurrentIndex(prevIndex => prevIndex + 1);
+  };
 
   useEffect(() => {
-    if (movingDirection.X === 'left' && currentIndex !== images.length - 1) goToNext();
-    if (movingDirection.X === 'right' && currentIndex !== 0) goToPrevious();
+    if (movingDirection.X === 'left' && currentIndex !== images.length - 1) setCurrentIndex(prevIndex => prevIndex + 1);
+    if (movingDirection.X === 'right' && currentIndex !== 0) setCurrentIndex(prevIndex => prevIndex - 1);
   }, [movingDirection.X]);
 
   return (
     <StyledCarouselContainer type={type}>
       <StyledCarouselSlide currentIndex={currentIndex} ref={ref}>
         {images.map(({ id, name, author }) => (
-          <WaterMarkImage key={id} imageUrl={name} waterMark={author} />
+          <WaterMarkImage key={id} imageUrl={name} waterMark={author} type={type} />
         ))}
       </StyledCarouselSlide>
       {!isMobile && currentIndex !== 0 && (
@@ -122,9 +128,6 @@ const StyledCarouselSlide = styled.div<{ currentIndex: number }>`
 
   transition: transform 0.3s ease-in-out;
   transform: ${({ currentIndex }) => `translateX(-${currentIndex * 100}%)`};
-  flex-wrap: nowrap;
-
-  aspect-ratio: 1.05 / 1;
 `;
 
 const StyledDots = styled.div<{ currentIndex: number }>`

diff --git a/frontend/src/components/@common/LoadingDots/LoadingDots.tsx b/frontend/src/components/@common/LoadingDots/LoadingDots.tsx
@@ -21,7 +21,7 @@ export default LoadingDots;
 
 const StyledLoadingDots = styled.div`
   display: flex;
-  gap: 0 1.4rem;
+  gap: 0 1rem;
 
   & > div:nth-child(2) {
     animation-delay: 0.14s;
@@ -34,10 +34,10 @@ const StyledLoadingDots = styled.div`
 
 const pulseAnimation = keyframes`
   0% {
-    transform: scale(0);
+    transform: scale(1);
   }
   90%, 100% {
-    transform: scale(10);
+    transform: scale(0);
   }
 `;
 
@@ -46,8 +46,8 @@ const StyledLoadingDot = styled.div`
   justify-content: center;
   align-items: center;
 
-  width: 1.2px;
-  height: 1.2px;
+  width: 12px;
+  height: 12px;
 
   animation: ${pulseAnimation} 0.4s ease-in-out infinite alternate;
   animation-timing-function: cubic-bezier(0, 0, 1, 1);

diff --git a/frontend/src/components/@common/LoginButton/LoginButton.tsx b/frontend/src/components/@common/LoginButton/LoginButton.tsx
@@ -20,7 +20,7 @@ const LoginIcon: Record<string, React.ReactNode> = {
 
 function LoginButton({ type }: LoginButtonProps) {
   return (
-    <StyledLoginButtonWrapper type={type} to={OAUTH_LINK[type]} target="_blank">
+    <StyledLoginButtonWrapper type={type} to={OAUTH_LINK[type]}>
       <div>{LoginIcon[type]}</div>
       <StyledLoginButtonText>{OAUTH_BUTTON_MESSAGE[type]}</StyledLoginButtonText>
     </StyledLoginButtonWrapper>

diff --git a/frontend/src/components/@common/Map/OverlayMarker.tsx b/frontend/src/components/@common/Map/OverlayMarker.tsx
@@ -34,23 +34,27 @@ function OverlayMarker({ celeb, restaurant, map, quadrant, isRestaurantHovered }
   return (
     map && (
       <Overlay position={{ lat, lng }} map={map} zIndex={isClicked || isRestaurantHovered ? 18 : 0}>
-        <div ref={ref}>
+        <StyledMarkerContainer ref={ref}>
           <StyledMarker onClick={clickMarker} isClicked={isClicked} isRestaurantHovered={isRestaurantHovered}>
-            <ProfileImage name={celeb.name} imageUrl={celeb.profileImageUrl} border size="100%" />
+            <ProfileImage name={celeb.name} imageUrl={celeb.profileImageUrl} size="100%" />
           </StyledMarker>
           {isClicked && (
             <StyledModal quadrant={quadrant} onClick={clickModal}>
               <RestaurantCard restaurant={restaurant} type="map" />
             </StyledModal>
           )}
-        </div>
+        </StyledMarkerContainer>
       </Overlay>
     )
   );
 }
 
 export default OverlayMarker;
 
+const StyledMarkerContainer = styled.div`
+  position: relative;
+`;
+
 const scaleUp = keyframes`
   0% {
     transform: scale(1);
@@ -73,10 +77,10 @@ const StyledMarker = styled.div<{ isClicked: boolean; isRestaurantHovered: boole
   border-radius: 50%;
 
   transition: transform 0.2s ease-in-out;
-  transform: ${({ isClicked }) => (isClicked ? 'scale(1.5)' : 'scale(1)')};
+  transform: ${({ isClicked }) => (isClicked ? 'scale(1.4)' : 'scale(1)')};
 
   &:hover {
-    transform: scale(1.5);
+    transform: scale(1.4);
   }
 
   ${({ isRestaurantHovered }) =>
@@ -97,10 +101,10 @@ const fadeInAnimation = keyframes`
 
 const StyledModal = styled.div<{ quadrant: Quadrant }>`
   position: absolute;
-  top: ${({ quadrant }) => (quadrant === 1 || quadrant === 2 ? '40px' : '-280px')};
-  right: ${({ quadrant }) => (quadrant === 1 || quadrant === 4 ? '45px' : '-210px')};
+  top: ${({ quadrant }) => (quadrant === 1 || quadrant === 2 ? '48px' : '-288px')};
+  right: ${({ quadrant }) => (quadrant === 1 || quadrant === 4 ? '0px' : '-210px')};
 
-  width: 200px;
+  width: 248px;
 
   border-radius: 12px;
   background-color: #fff;

diff --git a/frontend/src/components/@common/ProfileImage/ProfileImage.tsx b/frontend/src/components/@common/ProfileImage/ProfileImage.tsx
@@ -3,17 +3,16 @@ import { styled } from 'styled-components';
 interface ProfileImageProps extends React.HTMLAttributes<HTMLImageElement> {
   name: string;
   imageUrl: string;
-  border?: boolean;
   size?: string;
 }
 
-function ProfileImage({ name = '셀럽', imageUrl, size, border = false, ...props }: ProfileImageProps) {
-  return <StyledProfile alt={`${name} 프로필`} src={imageUrl} border={border} size={size} {...props} />;
+function ProfileImage({ name = '셀럽', imageUrl, size, ...props }: ProfileImageProps) {
+  return <StyledProfile alt={`${name} 프로필`} src={imageUrl} size={size} {...props} />;
 }
 
 export default ProfileImage;
 
-const StyledProfile = styled.img<{ size: string; border: boolean }>`
+const StyledProfile = styled.img<{ size: string }>`
   width: ${({ size }) => size || 'auto'};
   height: ${({ size }) => size || 'auto'};
 

diff --git a/frontend/src/components/@common/WaterMarkImage/WaterMarkImage.tsx b/frontend/src/components/@common/WaterMarkImage/WaterMarkImage.tsx
@@ -4,36 +4,37 @@ import { BORDER_RADIUS, FONT_SIZE, paintSkeleton } from '~/styles/common';
 interface WaterMarkImageProps {
   waterMark: string;
   imageUrl: string;
+  type: 'list' | 'map';
 }
 
-function WaterMarkImage({ waterMark, imageUrl }: WaterMarkImageProps) {
+function WaterMarkImage({ waterMark, imageUrl, type }: WaterMarkImageProps) {
   return (
-    <StyledWaterMarkImage>
-      <StyledImage src={`https://dev.celuveat.com/images-data/${imageUrl}`} alt="음식점" loading="lazy" />
+    <StyledWaterMarkImage type={type}>
+      <StyledImage src={`${process.env.BASE_URL}/images-data/${imageUrl}`} alt="음식점" loading="lazy" />
       <StyledWaterMark aria-hidden="true">{waterMark}</StyledWaterMark>
     </StyledWaterMarkImage>
   );
 }
 
 export default WaterMarkImage;
 
-const StyledWaterMarkImage = styled.div`
+const StyledWaterMarkImage = styled.div<{ type: 'list' | 'map' }>`
   position: relative;
 
   width: 100%;
-  aspect-ratio: 1.05 / 1;
-
-  height: auto;
+  min-width: 100%;
+  ${({ type }) => (type === 'list' ? `padding-top: 95%;` : `padding-top: 65%;`)}
 `;
 
 const StyledImage = styled.img`
   ${paintSkeleton}
-  display: block;
+  position: absolute;
+  inset: 0;
 
-  aspect-ratio: 1.05 / 1;
   object-fit: cover;
 
   width: 100%;
+  height: 100%;
 `;
 
 const StyledWaterMark = styled.div`

diff --git a/frontend/src/components/CategoryNavbar/CategoryNavbar.tsx b/frontend/src/components/CategoryNavbar/CategoryNavbar.tsx
@@ -41,6 +41,9 @@ const StyledCategoryNavbarWrapper = styled.ul`
   display: flex;
   align-items: center;
 
+  width: 100%;
+  height: 100%;
+
   background: transparent;
 
   overflow-x: scroll;

diff --git a/frontend/src/components/CelebDropDown/CelebDropDown.tsx b/frontend/src/components/CelebDropDown/CelebDropDown.tsx
@@ -9,6 +9,7 @@ import NavItem from '~/components/@common/NavButton/NavButton';
 import useBooleanState from '~/hooks/useBooleanState';
 
 import type { Celeb } from '~/@types/celeb.types';
+import { BORDER_RADIUS, FONT_SIZE } from '~/styles/common';
 
 interface DropDownProps {
   celebs: Celeb[];
@@ -35,13 +36,16 @@ function CelebDropDown({ celebs, externalOnClick, isOpen = false }: DropDownProp
       {isShow && (
         <StyledDropDownWrapper>
           <StyledSelectContainer>
-            {celebs.map(({ id, name, profileImageUrl }) => (
+            {celebs.map(({ id, name, youtubeChannelName, profileImageUrl }) => (
               <StyledDropDownOption data-id={id} onMouseDown={onSelection(name)}>
                 <div>
-                  <ProfileImage name={name} imageUrl={profileImageUrl} size="20px" />
-                  {name}
+                  <ProfileImage name={name} imageUrl={profileImageUrl} size="32px" />
+                  <div>
+                    <StyledCelebName>{name}</StyledCelebName>
+                    <StyledChannelName>{youtubeChannelName}</StyledChannelName>
+                  </div>
                 </div>
-                {isEqual(selected, name) && <SearchIcon />}
+                {isEqual(selected, name) && <SearchIcon width={24} />}
               </StyledDropDownOption>
             ))}
           </StyledSelectContainer>
@@ -74,20 +78,20 @@ const StyledDropDownWrapper = styled.ul`
   top: calc(100% + 16px);
   left: 18px;
 
-  width: 216px;
-  height: 176px;
+  width: 380px;
+  height: 440px;
 
-  padding: 1.8rem 0;
+  padding: 1.2rem 0;
 
-  border-radius: 10px;
-  background: white;
+  border-radius: ${BORDER_RADIUS.md};
+  background: var(--white);
 
   box-shadow: var(--shadow);
 `;
 
 const StyledSelectContainer = styled.div`
   width: 100%;
-  height: 150px;
+  height: 100%;
 
   background: transparent;
 
@@ -99,9 +103,11 @@ const StyledDropDownOption = styled.li`
   justify-content: space-between;
   align-items: center;
 
-  height: 44px;
+  height: 60px;
 
-  margin: 0 1.8rem;
+  padding: 0 1.8rem;
+
+  font-size: ${FONT_SIZE.md};
 
   cursor: pointer;
 
@@ -116,6 +122,21 @@ const StyledDropDownOption = styled.li`
   & > div {
     display: flex;
     align-items: center;
-    gap: 0.4rem;
+    gap: 0 1.2rem;
+  }
+
+  &:hover {
+    background-color: var(--gray-1);
   }
 `;
+
+const StyledCelebName = styled.div`
+  font-family: SUIT-Medium;
+`;
+
+const StyledChannelName = styled.div`
+  padding-top: 0.4rem;
+
+  color: var(--gray-3);
+  font-size: ${FONT_SIZE.sm};
+`;
diff --git a/frontend/src/components/InfoDropDown/InfoDropDown.tsx b/frontend/src/components/InfoDropDown/InfoDropDown.tsx
@@ -57,9 +57,6 @@ const StyledInfoDropDown = styled.div`
   display: relative;
 
   z-index: 100000000;
-
-  width: 77px;
-  height: 42px;
 `;
 
 const StyledDropDownWrapper = styled.ul`