Merge pull request #177 from prgrms-web-devcourse/develop

배포

Author: limkhl

public/assets/error.svg

@@ -10,7 +10,9 @@ interface Props {
 
 const LinkStrong = ({ href, children }: Props) => (
   <Link href={href} passHref>
-    <Strong>{children}</Strong>
+    <a>
+      <Strong>{children}</Strong>
+    </a>
   </Link>
 );
 

src/components/base/LinkStrong/index.tsx

@@ -1,3 +1,4 @@
+import { useNavigationContext } from "@contexts/hooks";
 import styled from "@emotion/styled";
 import Text from "../Text";
 
@@ -9,8 +10,14 @@ interface Props {
 }
 
 const TabItem = ({ title, index, active = false, ...props }: Props) => {
+  const { navigationProps } = useNavigationContext();
+
   return (
-    <TabItemWrapper active={active} {...props}>
+    <TabItemWrapper
+      active={active}
+      isBackgroundTransparent={navigationProps.isTopTransparent}
+      {...props}
+    >
       <Text strong={active}>{title}</Text>
     </TabItemWrapper>
   );
@@ -20,14 +27,28 @@ interface TabItemWrapperProps {
   active?: boolean;
 }
 
-const TabItemWrapper = styled.div<TabItemWrapperProps>`
+const TabItemWrapper = styled.div<{
+  active?: boolean;
+  isBackgroundTransparent: boolean;
+}>`
   flex-grow: 1;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 140px;
-  height: 40px;
+  height: 50px;
   cursor: pointer;
+  background: rgba(
+    255,
+    255,
+    255,
+    ${({ isBackgroundTransparent }) => (isBackgroundTransparent ? 0 : 1)}
+  );
+  transition: background 200ms;
+
+  :hover {
+    background: ${({ theme }) => theme.colors.gray200};
+  }
 `;
 
 TabItem.defaultProps = {

src/components/base/Tab/TabItem.tsx

@@ -66,6 +66,10 @@ const Tab = ({
 
 const TabItemContainer = styled.div`
   display: flex;
+  position: sticky;
+  align-self: flex-start;
+  box-shadow: ${({ theme }) => theme.boxShadows.sm};
+  top: 56px;
 `;
 
 const childrenToArray = (children: ReactNode, types: "Tab.Item") => {

src/components/base/Tab/index.tsx

@@ -41,7 +41,9 @@ const BottomFixedButton: React.FC<Props> = ({
       <Background bottom={bottom} custom={custom} style={containerStyle}>
         {iconButton && iconButton.href ? (
           <Link href={iconButton.href} passHref>
-            <IconButton name={iconButton.icon} />
+            <a>
+              <IconButton name={iconButton.icon} />
+            </a>
           </Link>
         ) : (
           iconButton && <IconButton name={iconButton.icon} />

src/components/domain/BottomFixedButton/index.tsx

@@ -16,11 +16,13 @@ const NavIcon = ({ href, iconName, pageType }: Props) => {
 
   return (
     <Link href={href} key={href} passHref>
-      <Icon
-        name={iconName}
-        size={24}
-        color={currentPage === pageType ? "black" : "#cfcfcf"}
-      />
+      <a>
+        <Icon
+          name={iconName}
+          size={24}
+          color={currentPage === pageType ? "black" : "#cfcfcf"}
+        />
+      </a>
     </Link>
   );
 };

src/components/domain/BottomNavigtion/NavIcon/index.tsx

@@ -9,7 +9,9 @@ interface Props {
 const ChatButton: React.FC<Props> = ({ courtId }) => {
   return (
     <Link href={`/chat/courts/${courtId}`} passHref>
-      <IconButton name="message-square" />
+      <a>
+        <IconButton name="message-square" />
+      </a>
     </Link>
   );
 };

src/components/domain/CourtItem/ChatLink.tsx

@@ -0,0 +1,54 @@
+import { Button, Icon, Image, Spacer, Text } from "@components/base";
+import styled from "@emotion/styled";
+import Link from "next/link";
+import React, { CSSProperties } from "react";
+
+interface Props {
+  title: string;
+  description: string;
+  buttonTitle?: string;
+  style?: CSSProperties;
+}
+
+const ErrorMessage = ({ title, description, buttonTitle, style }: Props) => {
+  return (
+    <WrapperSpacer gap="base" type="vertical" style={style}>
+      <Image src={"/assets/error.svg"} alt="error" />
+      <Spacer gap="xxs" type="vertical" style={{ textAlign: "center" }}>
+        <Text size="md" block strong>
+          {title}
+        </Text>
+        <TextGray size="xs">{description}</TextGray>
+      </Spacer>
+      <Link href="/courts" passHref>
+        <SearchButton fullWidth>
+          <SearchIcon name="map" size="sm" color="white" />
+          {buttonTitle}
+        </SearchButton>
+      </Link>
+      <div style={{ height: 40 }}></div>
+    </WrapperSpacer>
+  );
+};
+
+export default ErrorMessage;
+
+const TextGray = styled(Text)`
+  color: ${({ theme }) => theme.colors.gray500};
+`;
+
+const SearchButton = styled(Button)`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+
+const SearchIcon = styled(Icon)`
+  margin-right: 5px;
+`;
+
+const WrapperSpacer = styled(Spacer)`
+  height: 80%;
+  align-items: center;
+  justify-content: center;
+`;

src/components/domain/ErrorMessage/index.tsx

@@ -2,13 +2,15 @@ import React, { CSSProperties } from "react";
 import styled from "@emotion/styled";
 import type { ReactNode } from "react";
 import { Avatar, Button, Spacer, Text } from "@components/base";
+import { LinkAvatar } from "@components/domain";
 
 interface Props {
   children: ReactNode;
   className?: string;
   style?: CSSProperties;
   src: string;
   isFollowed: boolean;
+  userId: number;
 }
 // 아바타 + 이름 + 버튼
 
@@ -18,6 +20,7 @@ const FollowListItem: React.FC<Props> = ({
   style,
   src,
   isFollowed,
+  userId,
 }) => {
   return (
     <ListItem className={className} style={style}>
@@ -27,7 +30,7 @@ const FollowListItem: React.FC<Props> = ({
           alignItems: "center",
         }}
       >
-        <Avatar shape="circle" size={36} src={src} />
+        <LinkAvatar size={36} imageUrl={src} userId={userId} />
         <Text size="base" strong>
           {children}
         </Text>

src/components/domain/FollowListItem/index.tsx

@@ -20,13 +20,19 @@ const getSize = (size: Size) => {
 interface Props {
   userId: string | number;
   imageUrl: string;
-  size?: Size;
+  size?: Size | number;
 }
 
 const LinkAvatar = ({ userId, imageUrl, size = "middle" }: Props) => {
   return (
     <Link href={`/user/${userId || 1}`} passHref>
-      <Avatar size={getSize(size)} src={imageUrl} shape="circle" />
+      <a>
+        <Avatar
+          size={typeof size === "number" ? size : getSize(size)}
+          src={imageUrl}
+          shape="circle"
+        />
+      </a>
     </Link>
   );
 };