[FE] issue75: 이미지 에러 및 스터디 상세 페이지 수정 (#104)

* feat: src 없을 때 이미지 처리 * feat: 에러페이지 구현 * fix: 모집중, 모집완료 수정 open, close -> OPEN, CLOSE * refactor: 스터디 상세 페이지 수정 스타일 컴포넌트 분리 * style: 스터디 리뷰 섹션 스타일 수정 * style: 메인 페이지 카드 너비 균일화 * refactor: 컴포넌트 이름 변경 * refactor: 사용하지 않는 className 속성 삭제 * feat: 선택요소 에러 처리 * refactor: 변경된 api 명세에 맞춰 타입 수정 * fix: mock data 수정 * fix: api 명세에 맞춰 type, props 수정 profileImage -> imageUrl tagName -> name * refactor: 0px 제거
woowacourse-teams · Jul 21, 2022 · 45ddddb · 45ddddb
1 parent cd75d41
commit 45ddddb
Show file tree

Hide file tree

Showing 52 changed files with 1,506 additions and 1,072 deletions.
diff --git a/frontend/env/.env.dev b/frontend/env/.env.dev
@@ -1,2 +1,2 @@
-API_URL="http://52.79.214.158:8080"
+API_URL=""
 CLIENT_ID="cb83d95cd5644436b090"
diff --git a/frontend/env/.env.local b/frontend/env/.env.local
@@ -1,2 +1,2 @@
-API_URL="http://52.79.214.158:8080"
+API_URL=""
 CLIENT_ID="cb83d95cd5644436b090"
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -8,6 +8,7 @@ import { LoginContext } from '@context/login/LoginProvider';
 import Footer from '@layout/footer/Footer';
 import Header from '@layout/header/Header';
 
+import ErrorPage from '@pages/error-page/ErrorPage';
 import LoginRedirectPage from '@pages/login-redirect-page/LoginRedirectPage';
 import MainPage from '@pages/main-page/MainPage';
 
@@ -37,7 +38,7 @@ const App = () => {
           <Route path="/" element={<MainPage />} />
           <Route path="/study/:studyId" element={<DetailPage />} />
           <Route path="/login" element={isLoggedIn ? <Navigate to="/" replace={true} /> : <LoginRedirectPage />} />
-          <Route path="*" element={<div>에러 페이지</div>} />
+          <Route path="*" element={<ErrorPage />} />
         </Routes>
       </main>
       <Footer />

diff --git a/frontend/src/assets/images/no-image-found.png b/frontend/src/assets/images/no-image-found.png
diff --git a/frontend/src/assets/images/sth-went-wrong.png b/frontend/src/assets/images/sth-went-wrong.png
diff --git a/frontend/src/components/avatar/Avatar.style.tsx b/frontend/src/components/avatar/Avatar.style.tsx
@@ -2,6 +2,7 @@ import { SerializedStyles, css } from '@emotion/react';
 import styled from '@emotion/styled';
 
 import type { AvatarProps } from '@components/avatar/Avatar';
+import Image from '@components/image/Image';
 
 const dynamicSize = {
   sm: css`
@@ -33,7 +34,7 @@ export const Avatar = styled.div`
     min-width: 36px;
     height: 36px;
     border-radius: 50%;
-    box-shadow: 0px 1px 5px 0px ${theme.colors.secondary.dark};
+    box-shadow: 0 1px 5px 0 ${theme.colors.secondary.dark};
     overflow: hidden;
     transition: opacity 0.2s ease;
 
@@ -46,7 +47,7 @@ export const Avatar = styled.div`
   ${dynamicImageContainer}
 `;
 
-export const Image = styled.img`
+export const AvatarImage = styled(Image)`
   width: 100%;
   height: 100%;
   object-fit: cover;

diff --git a/frontend/src/components/avatar/Avatar.tsx b/frontend/src/components/avatar/Avatar.tsx
@@ -3,18 +3,17 @@ import { MakeOptional } from '@custom-types/index';
 import * as S from '@components/avatar/Avatar.style';
 
 export type AvatarProps = {
-  className?: string;
   profileImg: string;
   profileAlt: string;
   size: 'sm' | 'md' | 'lg';
 };
 
 type OptionalAvatarProps = MakeOptional<AvatarProps, 'size'>;
 
-const Avatar: React.FC<OptionalAvatarProps> = ({ className, size = 'sm', profileImg, profileAlt }) => {
+const Avatar: React.FC<OptionalAvatarProps> = ({ size = 'sm', profileImg, profileAlt }) => {
   return (
-    <S.Avatar className={className} size={size}>
-      <S.Image src={profileImg} alt={profileAlt} />
+    <S.Avatar size={size}>
+      <S.AvatarImage src={profileImg} alt={profileAlt} />
     </S.Avatar>
   );
 };

diff --git a/frontend/src/components/button/Button.style.ts b/frontend/src/components/button/Button.style.ts
@@ -7,8 +7,9 @@ export const Button = styled.button<ButtonProp>`
   ${({ fluid }) => css`
     width: ${fluid ? '100%' : 'auto'};
     padding: 20px 10px;
-    text-align: center;
 
+    text-align: center;
+    font-size: 24px;
     border: none;
     border-radius: 10px;
     background: #1a237e;

diff --git a/frontend/src/components/button/Button.tsx b/frontend/src/components/button/Button.tsx
@@ -8,7 +8,7 @@ export type ButtonProp = {
   className?: string;
   children: string;
   fluid: boolean;
-  onClick: () => void;
+  onClick: React.MouseEventHandler<HTMLButtonElement>;
 };
 
 type OptionalButtonProp = MakeOptional<ButtonProp, 'fluid' | 'onClick'>;

diff --git a/frontend/src/components/card/Card.style.tsx b/frontend/src/components/card/Card.style.tsx
@@ -1,12 +1,13 @@
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 
+import Image from '@components/image/Image';
+
 export const Card = styled.div`
   ${({ theme }) => css`
     display: flex;
     flex-direction: column;
 
-    width: 100%;
     height: 350px;
     overflow: hidden;
 
@@ -21,14 +22,12 @@ export const Card = styled.div`
 `;
 
 export const ImageContainer = styled.div`
-  width: 100%;
-
   flex-grow: 1;
 
   overflow: hidden;
 `;
 
-export const Image = styled.img`
+export const CardImage = styled(Image)`
   width: 100%;
   height: 100%;
 

diff --git a/frontend/src/components/card/Card.tsx b/frontend/src/components/card/Card.tsx
@@ -14,7 +14,7 @@ const Card: React.FC<CardProps> = ({ thumbnailUrl, thumbnailAlt, title, excerpt,
   return (
     <S.Card>
       <S.ImageContainer>
-        <S.Image src={thumbnailUrl} alt={thumbnailAlt} />
+        <S.CardImage src={thumbnailUrl} alt={thumbnailAlt} />
       </S.ImageContainer>
       <S.Contents>
         <S.Title>{title}</S.Title>

diff --git a/frontend/src/components/chip/Chip.tsx b/frontend/src/components/chip/Chip.tsx
@@ -3,19 +3,14 @@ import { MakeOptional } from '@custom-types/index';
 import * as S from '@components/chip/Chip.style';
 
 export interface ChipProps {
-  className?: string;
   children: string;
   disabled: boolean;
 }
 
 export type OptionalChipProps = MakeOptional<ChipProps, 'disabled'>;
 
-const Chip: React.FC<OptionalChipProps> = ({ className, children, disabled = false }) => {
-  return (
-    <S.Chip className={className} disabled={disabled}>
-      {children}
-    </S.Chip>
-  );
+const Chip: React.FC<OptionalChipProps> = ({ children, disabled = false }) => {
+  return <S.Chip disabled={disabled}>{children}</S.Chip>;
 };
 
 export default Chip;
diff --git a/frontend/src/components/image/Image.tsx b/frontend/src/components/image/Image.tsx
@@ -0,0 +1,17 @@
+import notFoundImage from '@assets/images/no-image-found.png';
+
+interface ImageProps {
+  className?: string;
+  src: string;
+  alt: string;
+}
+
+const Image: React.FC<ImageProps> = ({ className, src, alt }) => {
+  const handleImageError = ({ currentTarget }: React.SyntheticEvent<HTMLImageElement>) => {
+    currentTarget.src = notFoundImage;
+  };
+
+  return <img className={className} src={src} alt={alt} onError={handleImageError} />;
+};
+
+export default Image;
diff --git a/frontend/src/components/study-chip/StudyChip.tsx b/frontend/src/components/study-chip/StudyChip.tsx
@@ -1,16 +1,11 @@
 import Chip from '@components/chip/Chip';
 
 type StudyChipProps = {
-  className?: string;
   isOpen: boolean;
 };
 
-const StudyChip = ({ className, isOpen }: StudyChipProps) => {
-  return (
-    <Chip className={className} disabled={!isOpen}>
-      {isOpen ? '모집중' : '모집완료'}
-    </Chip>
-  );
+const StudyChip = ({ isOpen }: StudyChipProps) => {
+  return <Chip disabled={!isOpen}>{isOpen ? '모집중' : '모집완료'}</Chip>;
 };
 
 export default StudyChip;
diff --git a/frontend/src/components/tag-chip/TagChip.tsx b/frontend/src/components/tag-chip/TagChip.tsx
@@ -3,12 +3,11 @@ import type { FC } from 'react';
 import * as S from '@components/tag-chip/TagChip.style';
 
 export type TagChipProps = {
-  className?: string;
   children: string;
 };
 
-const TagChip: FC<TagChipProps> = ({ className, children }) => {
-  return <S.TagChip className={className}>{children}</S.TagChip>;
+const TagChip: FC<TagChipProps> = ({ children }) => {
+  return <S.TagChip>{children}</S.TagChip>;
 };
 
 export default TagChip;
diff --git a/frontend/src/custom-types/index.ts b/frontend/src/custom-types/index.ts
@@ -1,6 +1,6 @@
 export type MakeOptional<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;
 
-export type StudyStatus = 'open' | 'close';
+export type StudyStatus = 'OPEN' | 'CLOSE';
 
 export type Study = {
   id: number;
@@ -10,14 +10,21 @@ export type Study = {
   status: StudyStatus;
 };
 
+export type Owner = {
+  id: number;
+  username: string;
+  imageUrl: string;
+  profileUrl: string;
+};
+
 export type Member = {
   id: number;
   username: string;
-  profileImage: string;
+  imageUrl: string;
   profileUrl: string;
 };
 
-export type StudyTag = { id: number; tagName: string };
+export type StudyTag = { id: number; name: string };
 
 export type StudyDetail = {
   id: number;
@@ -28,10 +35,11 @@ export type StudyDetail = {
   description: string;
   currentMemberCount: number;
   maxMemberCount: number;
-  deadline: string;
+  createdAt: string;
+  enrollmentEndDate: string;
   startDate: string;
   endDate: string;
-  owner: string;
+  owner: Owner;
   members: Array<Member>;
   tags: Array<StudyTag>;
 } & Study;

diff --git a/frontend/src/layout/header/Header.style.tsx b/frontend/src/layout/header/Header.style.tsx
@@ -85,5 +85,9 @@ export const NavButton = styled.button`
     & > svg {
       fill: ${theme.colors.primary.base};
     }
+
+    & > span {
+      color: ${theme.colors.primary.base};
+    }
   `}
 `;
diff --git a/frontend/src/layout/header/logo/Logo.tsx b/frontend/src/layout/header/logo/Logo.tsx
@@ -2,11 +2,13 @@ import logoImage from '@assets/images/logo.png';
 
 import * as S from '@layout/header/logo/Logo.style';
 
+import Image from '@components/image/Image';
+
 const Logo: React.FC = () => {
   return (
     <S.Row>
       <S.ImageContainer>
-        <img src={logoImage} alt="모아모아 로고 이미지" />
+        <Image src={logoImage} alt="모아모아 로고 이미지" />
       </S.ImageContainer>
       <S.BorderText>MOAMOA</S.BorderText>
     </S.Row>