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

배포
prgrms-web-devcourse · Dec 22, 2021 · bafb7d8 · bafb7d8
2 parents c22b174 + 2826c23
commit bafb7d8
Show file tree

Hide file tree

Showing 24 changed files with 271 additions and 58 deletions.
diff --git a/public/assets/error.svg b/public/assets/error.svg
diff --git a/src/components/base/LinkStrong/index.tsx b/src/components/base/LinkStrong/index.tsx
@@ -10,7 +10,9 @@ interface Props {
 
 const LinkStrong = ({ href, children }: Props) => (
   <Link href={href} passHref>
-    <Strong>{children}</Strong>
+    <a>
+      <Strong>{children}</Strong>
+    </a>
   </Link>
 );
 

diff --git a/src/components/base/Tab/TabItem.tsx b/src/components/base/Tab/TabItem.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 = {

diff --git a/src/components/base/Tab/index.tsx b/src/components/base/Tab/index.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") => {

diff --git a/src/components/domain/BottomFixedButton/index.tsx b/src/components/domain/BottomFixedButton/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} />

diff --git a/src/components/domain/BottomNavigtion/NavIcon/index.tsx b/src/components/domain/BottomNavigtion/NavIcon/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>
   );
 };

diff --git a/src/components/domain/CourtItem/ChatLink.tsx b/src/components/domain/CourtItem/ChatLink.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>
   );
 };

diff --git a/src/components/domain/ErrorMessage/index.tsx b/src/components/domain/ErrorMessage/index.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;
+`;
diff --git a/src/components/domain/FollowListItem/index.tsx b/src/components/domain/FollowListItem/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>

diff --git a/src/components/domain/LinkAvatar/index.tsx b/src/components/domain/LinkAvatar/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>
   );
 };

diff --git a/src/components/domain/ProfileForm/index.tsx b/src/components/domain/ProfileForm/index.tsx
@@ -3,15 +3,7 @@ import styled from "@emotion/styled";
 import { useRouter } from "next/router";
 
 import useForm, { Error } from "@hooks/useForm";
-import {
-  Avatar,
-  Spacer,
-  Upload,
-  Button,
-  Label,
-  Input,
-  Text,
-} from "@components/base";
+import { Avatar, Spacer, Upload, Button, Label, Input } from "@components/base";
 import {
   BottomFixedButton,
   PositionsPicker,
@@ -49,7 +41,10 @@ const ProfileForm = ({
   // TODO: 리팩토링
 
   const router = useRouter();
-  const [isOpenConfirmModal, setIsOpenConfirmModal] = useState<boolean>(false);
+  const [isOpenDeleteImageConfirmModal, setIsOpenDeleteImageConfirmModal] =
+    useState<boolean>(false);
+  const [isOpenEditConfirmModal, setIsOpenEditConfirmModal] =
+    useState<boolean>(false);
 
   useEffect(() => {
     setSelectedProficiency(proficiency);
@@ -95,12 +90,16 @@ const ProfileForm = ({
       if (!selectedProficiency) {
         errors.proficiency = "숙련도를 선택해주세요.";
       }
-      if (!selectedPositions) {
+      if (selectedPositions.length < 1) {
         errors.positions = "포지션 2개 혹은 미정을 선택해주세요.";
       }
 
       return errors;
     },
+    confirmModal: {
+      isOpenConfirmModal: isOpenEditConfirmModal,
+      setIsOpenConfirmModal: setIsOpenEditConfirmModal,
+    },
   });
 
   return (
@@ -117,7 +116,7 @@ const ProfileForm = ({
               />
             </Upload>
             <Button
-              onClick={() => setIsOpenConfirmModal(true)}
+              onClick={() => setIsOpenDeleteImageConfirmModal(true)}
               type="button"
               secondary
             >
@@ -165,19 +164,15 @@ const ProfileForm = ({
               selectedValue={selectedPositions}
               onChange={handleChangePositions}
             />
-            <ValidationNoticeBar
-              errors={errors.positions}
-            ></ValidationNoticeBar>
+            <ValidationNoticeBar errors={errors.positions} />
           </div>
           <div>
             <Label isRequired>숙련도</Label>
             <ProficiencyPicker
               selectedValue={selectedProficiency}
               onChange={handleChangeProficiency}
             />
-            <ValidationNoticeBar
-              errors={errors.proficiency}
-            ></ValidationNoticeBar>
+            <ValidationNoticeBar errors={errors.proficiency} />
           </div>
         </Container>
         <BottomFixedButton
@@ -191,20 +186,42 @@ const ProfileForm = ({
       </form>
 
       <LeadToLoginModal
-        headerContent={`기본 프로필 이미지로 변경하시겠습니까?`}
-        isOpen={isOpenConfirmModal}
+        headerContent={`기본 프로필 이미지로 변경하시겠어요?`}
+        isOpen={isOpenDeleteImageConfirmModal}
         cancel={{
           content: "닫기",
           handle: () => {
-            setIsOpenConfirmModal(false);
+            setIsOpenDeleteImageConfirmModal(false);
           },
         }}
         confirm={{
           content: "변경하기",
           handle: (e) => {
             try {
               handleDeleteProfileImage();
-              setIsOpenConfirmModal(false);
+              setIsOpenDeleteImageConfirmModal(false);
+              router.replace("/user/edit");
+            } catch (error) {
+              console.error(error);
+            }
+          },
+        }}
+      />
+
+      <LeadToLoginModal
+        headerContent={`프로필을 수정하시겠어요?`}
+        isOpen={isOpenEditConfirmModal}
+        cancel={{
+          content: "닫기",
+          handle: () => {
+            setIsOpenEditConfirmModal(false);
+          },
+        }}
+        confirm={{
+          content: "수정하기",
+          handle: (e) => {
+            try {
+              handleSubmit(e);
               router.replace("/user/edit");
             } catch (error) {
               console.error(error);

diff --git a/src/components/domain/ReservationItem/ReservationItemBottom/index.tsx b/src/components/domain/ReservationItem/ReservationItemBottom/index.tsx
@@ -52,6 +52,7 @@ const ReservationItemBottom = ({
                   key={userId}
                   src={profileImage}
                   isFollowed={isFollowed}
+                  userId={userId}
                 >
                   {nickname}
                 </FollowListItem>

diff --git a/src/components/domain/ReservationModalContent/BlockStatus.tsx b/src/components/domain/ReservationModalContent/BlockStatus.tsx
@@ -36,7 +36,9 @@ const BlockStatusContent = ({
             {participants &&
               participants.map(({ userId, avatarImgSrc }: any) => (
                 <Link key={userId} href={`/user/${userId}`} passHref>
-                  <Avatar src={avatarImgSrc} shape="circle" size="lg" />
+                  <a>
+                    <Avatar src={avatarImgSrc} shape="circle" size="lg" />
+                  </a>
                 </Link>
               ))}
           </S.AvatarGroup>

diff --git a/src/components/domain/ReservationModalContent/ParticipantsPerTime.tsx b/src/components/domain/ReservationModalContent/ParticipantsPerTime.tsx
@@ -18,7 +18,9 @@ const ParticipantsPerTime: React.FC<{ participantsPerBlock: any[] }> = ({
             {users &&
               users.map(({ userId, avatarImgSrc }: any) => (
                 <Link href={`/user/${userId}`} key={userId} passHref>
-                  <Avatar src={avatarImgSrc} shape="circle" size="md" />
+                  <a>
+                    <Avatar src={avatarImgSrc} shape="circle" size="md" />
+                  </a>
                 </Link>
               ))}
           </S.AvatarGroup>