[FE] issue53: 디테일 페이지 구현

.gitattributes

@@ -0,0 +1 @@
+frontend/**/*.json linguist-generated

frontend/.storybook/main.js

@@ -17,9 +17,11 @@ module.exports = {
       '@types': resolve(__dirname, '../src/types'),
       '@pages': resolve(__dirname, '../src/pages'),
       '@assets': resolve(__dirname, '../src/assets'),
+      '@utils': resolve(__dirname, '../src/utils'),
       '@constants': resolve(__dirname, '../src/constants.ts'),
       '@api': resolve(__dirname, '../src/api'),
       '@context': resolve(__dirname, '../src/context'),
+      '@detail-page': resolve(__dirname, '../src/pages/detail-page'),
       '@layout': resolve(__dirname, '../src/layout'),
     };
 

frontend/public/mockServiceWorker.js

@@ -2,7 +2,7 @@
 /* tslint:disable */
 
 /**
- * Mock Service Worker (0.43.0).
+ * Mock Service Worker (0.43.1).
  * @see https://github.com/mswjs/msw
  * - Please do NOT modify this file.
  * - Please do NOT serve this file on production.

frontend/src/App.tsx

@@ -1,13 +1,17 @@
+import { BrowserRouter, Route, Routes } from 'react-router-dom';
+
 import { css } from '@emotion/react';
 
 import Footer from '@layout/footer/Footer';
 import Header from '@layout/header/Header';
 
 import MainPage from '@pages/main-page/MainPage';
 
+import DetailPage from '@detail-page/DetailPage';
+
 const App = () => {
   return (
-    <div>
+    <BrowserRouter>
       <Header
         css={css`
           position: fixed;
@@ -23,10 +27,13 @@ const App = () => {
           min-height: calc(100vh - 80px);
         `}
       >
-        <MainPage />
+        <Routes>
+          <Route path="/" element={<MainPage />} />
+          <Route path="/study/:studyId" element={<DetailPage />} />
+        </Routes>
       </main>
       <Footer />
-    </div>
+    </BrowserRouter>
   );
 };
 

frontend/src/api/getStudyDetail.ts

@@ -0,0 +1,10 @@
+import { StudyDetail } from '@custom-types/index';
+
+import axiosInstance from './axiosInstance';
+
+const getStudyDetail = async (studyId: string): Promise<{ study: StudyDetail }> => {
+  const response = await axiosInstance.get<{ study: StudyDetail }>(`/api/study/?study-id=${studyId}`);
+  return response.data;
+};
+
+export default getStudyDetail;

frontend/src/api/getStudyReviews.ts

@@ -0,0 +1,16 @@
+import { StudyReview } from '@custom-types/index';
+
+import axiosInstance from './axiosInstance';
+
+export type StudyReviewResponse = {
+  reviews: Array<StudyReview>;
+  totalResults: number;
+};
+
+const getStudyReviews = async (studyId: string, size: number, loadAll: boolean): Promise<StudyReviewResponse> => {
+  const url = loadAll ? `/api/studies/${studyId}/review` : `/api/studies/${studyId}/review?size=${size}`;
+  const response = await axiosInstance.get<StudyReviewResponse>(url);
+  return response.data;
+};
+
+export default getStudyReviews;

frontend/src/components/Avatar/Avatar.tsx

@@ -0,0 +1,22 @@
+import { MakeOptional } from '@custom-types/index';
+
+import * as S from './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 }) => {
+  return (
+    <S.Avatar className={className} size={size}>
+      <S.Image src={profileImg} alt={profileAlt} />
+    </S.Avatar>
+  );
+};
+
+export default Avatar;

frontend/src/components/avatar/Avatar.stories.tsx

@@ -0,0 +1,22 @@
+import { Story } from '@storybook/react';
+
+import Avatar from '@components/avatar/Avatar';
+import type { AvatarProps } from '@components/avatar/Avatar';
+
+export default {
+  title: 'Components/Avatar',
+  component: Avatar,
+  argTypes: {
+    profileImg: { controls: 'text' },
+    profileAlt: { controls: 'text' },
+  },
+};
+
+const Template: Story<AvatarProps> = props => <Avatar {...props} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  profileImg:
+    'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1770&q=80',
+  profileAlt: '프로필 이미지',
+};

frontend/src/components/avatar/Avatar.style.tsx

@@ -1,7 +1,33 @@
-import { css } from '@emotion/react';
+import { SerializedStyles, css } from '@emotion/react';
 import styled from '@emotion/styled';
 
-export const ImageContainer = styled.div`
+import type { AvatarProps } from './Avatar';
+
+const dynamicSize = {
+  sm: css`
+    width: 36px;
+    min-width: 36px;
+    height: 36px;
+  `,
+  md: css`
+    width: 42px;
+    min-width: 42px;
+    height: 42px;
+  `,
+  lg: css`
+    width: 65px;
+    min-width: 65px;
+    height: 65px;
+  `,
+};
+
+type DynamicImageContainerFn = (props: Pick<AvatarProps, 'size'>) => SerializedStyles;
+
+const dynamicImageContainer: DynamicImageContainerFn = props => css`
+  ${dynamicSize[props.size]}
+`;
+
+export const Avatar = styled.div`
   ${({ theme }) => css`
     width: 36px;
     min-width: 36px;
@@ -16,6 +42,8 @@ export const ImageContainer = styled.div`
       opacity: 0.9;
     }
   `}
+
+  ${dynamicImageContainer}
 `;
 
 export const Image = styled.img`

frontend/src/components/avatar/Avatar.tsx

@@ -1,15 +1,21 @@
-import * as S from '@components/avatar/Avatar.style';
+import { MakeOptional } from '@custom-types/index';
 
-export interface AvatarProps {
+import * as S from './Avatar.style';
+
+export type AvatarProps = {
+  className?: string;
   profileImg: string;
   profileAlt: string;
-}
+  size: 'sm' | 'md' | 'lg';
+};
+
+type OptionalAvatarProps = MakeOptional<AvatarProps, 'size'>;
 
-const Avatar: React.FC<AvatarProps> = ({ profileImg, profileAlt }) => {
+const Avatar: React.FC<OptionalAvatarProps> = ({ className, size = 'sm', profileImg, profileAlt }) => {
   return (
-    <S.ImageContainer>
+    <S.Avatar className={className} size={size}>
       <S.Image src={profileImg} alt={profileAlt} />
-    </S.ImageContainer>
+    </S.Avatar>
   );
 };
 

frontend/src/components/button/Button.stories.tsx

@@ -0,0 +1,16 @@
+import { Story } from '@storybook/react';
+
+import Button from './Button';
+import type { ButtonProp } from './Button';
+
+export default {
+  title: 'Components/Button',
+  component: Button,
+};
+
+const Template: Story<ButtonProp> = props => <Button {...props} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  children: '스터디방 가입하기',
+};

frontend/src/components/button/Button.style.ts

@@ -0,0 +1,19 @@
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+
+import type { ButtonProp } from '@components/button/Button';
+
+export const Button = styled.button<ButtonProp>`
+  ${({ fluid }) => css`
+    width: ${fluid ? '100%' : 'auto'};
+    padding: 20px 10px;
+    text-align: center;
+
+    border: none;
+    border-radius: 10px;
+    background: #1a237e;
+    color: white;
+
+    white-space: nowrap;
+  `}
+`;

frontend/src/components/button/Button.tsx

@@ -0,0 +1,24 @@
+import { noop } from '@utils/index';
+
+import { MakeOptional } from '@custom-types/index';
+
+import * as S from './Button.style';
+
+export type ButtonProp = {
+  className?: string;
+  children: string;
+  fluid: boolean;
+  onClick: () => void;
+};
+
+type OptionalButtonProp = MakeOptional<ButtonProp, 'fluid' | 'onClick'>;
+
+const Button: React.FC<OptionalButtonProp> = ({ className, children, onClick = noop, fluid = true }) => {
+  return (
+    <S.Button className={className} fluid={fluid} onClick={onClick}>
+      {children}
+    </S.Button>
+  );
+};
+
+export default Button;

frontend/src/components/card/Card.stories.tsx

@@ -0,0 +1,37 @@
+import { Story } from '@storybook/react';
+
+import type { CardProps } from '@components/card/Card';
+import Card from '@components/card/Card';
+import Chip from '@components/chip/Chip';
+
+export default {
+  title: 'Components/Card',
+  component: Card,
+  argTypes: {
+    thumbnailUrl: { controls: 'text' },
+    thumbnailAlt: { controls: 'text' },
+    title: { controls: 'text' },
+    description: { controls: 'text' },
+    extraChips: { controls: 'object' },
+  },
+};
+
+const Template: Story<CardProps> = props => (
+  <div style={{ width: '256px' }}>
+    <Card {...props} />
+  </div>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  thumbnailUrl:
+    'https://images.unsplash.com/photo-1456513080510-7bf3a84b82f8?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1673&q=80',
+  thumbnailAlt: '이미지 Alt',
+  title: '타이틀',
+  description: '세부 설명',
+  extraChips: [
+    <Chip disabled={false} key="1">
+      Chip
+    </Chip>,
+  ],
+};

frontend/src/components/chip/Chip.stories.tsx

@@ -0,0 +1,35 @@
+import { Story } from '@storybook/react';
+
+import type { ChipProps } from '@components/chip/Chip';
+import Chip from '@components/chip/Chip';
+
+export default {
+  title: 'Components/Chip',
+  component: Chip,
+  argTypes: {
+    children: { controls: 'text' },
+    disabled: { controls: 'boolean' },
+  },
+};
+
+const Template: Story<ChipProps> = props => <Chip {...props} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  children: '모집중',
+  disabled: false,
+};
+
+export const ActiveChip = Template.bind({});
+ActiveChip.args = {
+  children: '모집중',
+  disabled: false,
+};
+ActiveChip.parameters = { controls: { exclude: ['disabled'] } };
+
+export const DisabledChip = Template.bind({});
+DisabledChip.args = {
+  children: '모집완료',
+  disabled: true,
+};
+DisabledChip.parameters = { controls: { exclude: ['disabled'] } };