Merge branch 'dev' into feature/session-time-table

pythonkr · Jul 21, 2023 · 448f83c · 448f83c
2 parents d148ee3 + 6e0ca34
commit 448f83c
Show file tree

Hide file tree

Showing 17 changed files with 701 additions and 95 deletions.
diff --git a/@types/session.ts b/@types/session.ts
@@ -13,6 +13,27 @@ export interface SessionList {
   day_of_week: 'Sat' | 'Sun' | null;
 }
 
+export interface SessionDetail {
+  id: number;
+  title: string;
+  brief?: string; // 리뷰용: 발표에 대한 간단한 설명.
+  desc?: string; // 리뷰용: 발표에 대한 자세한 설명
+  comment?: string; // 리뷰용: 파준위에게 전하고 싶은 말
+  difficulty: SessionDifficulty;
+  duration: SessionDuration;
+  language: SessionLanguage;
+  category: number;
+  category_name: string;
+  accepted: boolean;
+  introduction: string;
+  video_url: string | null;
+  slide_url: string | null;
+  room_num: SessionRoomNumber;
+  created_at: string;
+  updated_at: string;
+  user: User | null;
+}
+
 export interface User {
   nickname: string;
   profile_img: string | null;
@@ -41,3 +62,7 @@ export interface TimeTableSessions {
   room_num: string[];
   category?: (typeof SessionCategory)[number];
 }
+export type SessionDifficulty = 'BEGINNER' | 'INTERMEDIATE' | 'EXPERIENCED';
+export type SessionDuration = 'SHORT' | 'LONG';
+export type SessionLanguage = 'KOREAN' | 'ENGLISH';
+type SessionRoomNumber = '101' | '102' | '103' | '104' | '105';
diff --git a/@types/sponsor.ts b/@types/sponsor.ts
@@ -74,3 +74,7 @@ export interface ISponsorApiListItem {
   level: number;
   id: number;
 }
+
+export interface ISponsorDetail extends ISponsorApiListItem {
+  desc: string;
+}
diff --git a/api/session.ts b/api/session.ts
@@ -1,7 +1,15 @@
 import axios from '@/lib/axios';
-import { SessionList } from '@/@types/session';
+import { SessionDetail, SessionList } from '@/@types/session';
 
 export async function getSessionList(): Promise<SessionList[]> {
   const response = await axios.get(`/sessions/`);
   return response.data;
 }
+
+export async function getSessionDetail(
+  sessionId: string
+): Promise<SessionDetail> {
+  const response = await axios.get<SessionDetail>(`/sessions/${sessionId}/`);
+  const { brief, desc, comment, ...data } = response.data;
+  return data;
+}
diff --git a/api/sponsor.ts b/api/sponsor.ts
@@ -1,6 +1,6 @@
 import axios from '@/lib/axios';
 import { getHeaders } from '.';
-import { ISponsorApiListItem } from '@/@types/sponsor';
+import { ISponsorApiListItem, ISponsorDetail } from '@/@types/sponsor';
 import { SponsorLevel } from '@/data/enums/SponsorLevel';
 import { groupBy } from '@/helpers/array.helpers';
 
@@ -49,3 +49,15 @@ export async function getSponsorList(): Promise<
   }));
   return sponsorList;
 }
+
+export async function getSponsorDetail(id: string): Promise<ISponsorDetail> {
+  const { data } = await axios.get(`/sponsors/list/${id}/`);
+  return {
+    id: data.id ?? 0,
+    name: data.name ?? '',
+    url: data.url ?? '',
+    logo_image: data.logo_image?.replace(/\?.+$/, '') ?? '',
+    level: data.level ?? 0,
+    desc: data.desc ?? '',
+  };
+}
diff --git a/components/session/SessionBasicInfo.tsx b/components/session/SessionBasicInfo.tsx
@@ -0,0 +1,30 @@
+import { SessionDetail } from '@/@types/session';
+import { DIFFICULTY, DURATION, LANGUAGE } from '@/constants/session';
+import { styled } from '@/stitches.config';
+
+const Wrapper = styled('div', {
+  marginTop: '8px',
+});
+
+interface Props {
+  info: Pick<
+    SessionDetail,
+    'category_name' | 'difficulty' | 'duration' | 'language' | 'room_num'
+  >;
+}
+
+export const SessionBasicInfo = ({ info }: Props) => {
+  return (
+    <Wrapper>
+      카테고리 : {info.category_name}
+      <br />
+      난이도 : {DIFFICULTY[info.difficulty]}
+      <br />
+      발표 시간 : {DURATION[info.duration]}
+      <br />
+      언어 : {LANGUAGE[info.language]}
+      <br />
+      발표 장소 : {`${info.room_num}호`}
+    </Wrapper>
+  );
+};
diff --git a/components/session/SpeakerInfo.tsx b/components/session/SpeakerInfo.tsx
@@ -0,0 +1,41 @@
+import { User } from '@/@types/session';
+import * as P from '@/components/session/styles';
+import Image from 'next/image';
+import { H4 } from '../heading';
+import { styled } from '@/stitches.config';
+
+export const SpeakerContainer = styled('div', {
+  display: 'block',
+  marginTop: '16px',
+  '@bp2': {
+    display: 'flex',
+    gap: '20px',
+  },
+});
+
+export const ImageContainer = styled('div', {
+  position: 'relative',
+  aspectRatio: '1/1',
+  '@bp2': {
+    height: '200px',
+  },
+});
+
+export const SpeakerInfo = ({ user }: { user: User }) => {
+  return (
+    <SpeakerContainer>
+      <ImageContainer>
+        <Image
+          src={user.profile_img || '/images/Logo.png'}
+          fill
+          style={{ objectFit: 'cover', borderRadius: '50%' }}
+          alt={user.nickname}
+        />
+      </ImageContainer>
+      <div>
+        <H4>{user.nickname}</H4>
+        <P.DescContainer>{user.bio}</P.DescContainer>
+      </div>
+    </SpeakerContainer>
+  );
+};
diff --git a/components/session/sessonList.tsx b/components/session/sessonList.tsx
@@ -87,41 +87,40 @@ const DayofWeek = styled(Label, {
 
 const ListItem = (props: SessionList) => {
   return (
-    // TODO 세션 상세 페이지가 나올 때까지 Link 비활성화
-    // <Link href={`/session/${props.id}`} passHref>
-    <ItemContainer>
-      <ImageBox>
-        <Image
-          src={props.user?.profile_img ?? '/images/Logo.png'}
-          width={100}
-          height={100}
-          alt={'profile image'}
-        />
-      </ImageBox>
-      <ContentBox>
-        <Title>{props.title}</Title>
-        <Labels>
-          {props.day_of_week === 'Sat' && <DayofWeek day="sat">토</DayofWeek>}
-          {props.day_of_week === 'Sun' && <DayofWeek day="sun">일</DayofWeek>}
-          {props.difficulty === 'BEGINNER' && (
-            <DayofWeek difficulty="beginner">초급</DayofWeek>
+    <Link href={`/session/${props.id}`} passHref>
+      <ItemContainer>
+        <ImageBox>
+          <Image
+            src={props.user?.profile_img ?? '/images/Logo.png'}
+            width={100}
+            height={100}
+            alt={'profile image'}
+          />
+        </ImageBox>
+        <ContentBox>
+          <Title>{props.title}</Title>
+          <Labels>
+            {props.day_of_week === 'Sat' && <DayofWeek day="sat">토</DayofWeek>}
+            {props.day_of_week === 'Sun' && <DayofWeek day="sun">일</DayofWeek>}
+            {props.difficulty === 'BEGINNER' && (
+              <DayofWeek difficulty="beginner">초급</DayofWeek>
+            )}
+            {props.difficulty === 'INTERMEDIATE' && (
+              <DayofWeek difficulty="intermediate">중급</DayofWeek>
+            )}
+            {props.difficulty === 'EXPERIENCED' && (
+              <DayofWeek difficulty="experienced">고급</DayofWeek>
+            )}
+            {props.language === 'ENGLISH' && (
+              <DayofWeek language="english">영어</DayofWeek>
+            )}
+          </Labels>
+          {props.user?.nickname !== undefined && (
+            <Text>{props.user?.nickname}</Text>
           )}
-          {props.difficulty === 'INTERMEDIATE' && (
-            <DayofWeek difficulty="intermediate">중급</DayofWeek>
-          )}
-          {props.difficulty === 'EXPERIENCED' && (
-            <DayofWeek difficulty="experienced">고급</DayofWeek>
-          )}
-          {props.language === 'ENGLISH' && (
-            <DayofWeek language="english">영어</DayofWeek>
-          )}
-        </Labels>
-        {props.user?.nickname !== undefined && (
-          <Text>{props.user?.nickname}</Text>
-        )}
-      </ContentBox>
-    </ItemContainer>
-    //  </Link>
+        </ContentBox>
+      </ItemContainer>
+    </Link>
   );
 };
 

diff --git a/components/session/styles.tsx b/components/session/styles.tsx
@@ -0,0 +1,31 @@
+import { styled } from '@/stitches.config';
+
+export const Section = styled('section', {
+  borderBottom: '2px solid $textPrimary',
+
+  '&:last-child': {
+    borderBottom: '2px solid transparent',
+  },
+
+  '@bp1': {
+    padding: '1.2rem 1.2rem',
+  },
+  '@bp2': {
+    padding: '4rem 4rem',
+  },
+});
+
+export const PageContainer = styled('div', {
+  bodyText: 1,
+});
+
+export const DescContainer = styled('div', {
+  marginTop: '8px',
+  wordWrap: 'break-word',
+  wordBreak: 'keep-all',
+  whiteSpace: 'pre-line',
+});
+
+export const IntroContainer = styled(DescContainer, {});
+
+export const Block = styled('div', {});
diff --git a/components/sponsor/SponsorList.tsx b/components/sponsor/SponsorList.tsx
@@ -61,13 +61,9 @@ const SponsorListItem: React.FC<{ sponsor: ISponsorData }> = (props: {
 
   return (
     <SponsorGroupItem isLogoBig={isLogoBig}>
-      {sponsor.url != null ? (
-        <Link href={sponsor.url} target="_blank">
-          <SponsorImage src={sponsor.logoImage} alt={sponsor.name} />
-        </Link>
-      ) : (
+      <Link href={`/sponsor/list/${sponsor.id}`}>
         <SponsorImage src={sponsor.logoImage} alt={sponsor.name} />
-      )}
+      </Link>
     </SponsorGroupItem>
   );
 };
@@ -79,13 +75,17 @@ const SponsorList: React.FC<{ list: ISponsorListItem[] }> = (props: {
     <div>
       <H3>후원사 목록</H3>
       <SponsorGroupContainer>
-        {props.list.map((item: ISponsorListItem) => (
-          <SponsorLevelContainer key={`level-${item.level}`}>
+        {props.list.map((sponsorListItem: ISponsorListItem) => (
+          <SponsorLevelContainer key={`level-${sponsorListItem.level}`}>
             <H4>
-              {sponsorLevelLabel[item.level as keyof typeof sponsorLevelLabel]}
+              {
+                sponsorLevelLabel[
+                  sponsorListItem.level as keyof typeof sponsorLevelLabel
+                ]
+              }
             </H4>
             <SponsorGroup>
-              {item.list.map((item, index) => (
+              {sponsorListItem.list.map((item, index) => (
                 <SponsorListItem
                   key={`sponsor-${item.level}-${index}`}
                   sponsor={item}

diff --git a/constants/routes.ts b/constants/routes.ts
@@ -1,5 +1,4 @@
 import { RouteType } from '@/interfaces/RouteType';
-import { isEnvProd } from '@/utils';
 
 const routeKeys = [
   'HOME',
@@ -16,6 +15,7 @@ const routeKeys = [
   'SESSION',
   'TUTORIAL_LIST',
   'SPRINT_LIST',
+  'FINANCIAL_AID',
 ] as const;
 
 export const Routes: { [key in (typeof routeKeys)[number]]: RouteType } = {
@@ -75,23 +75,30 @@ export const Routes: { [key in (typeof routeKeys)[number]]: RouteType } = {
     title: '스프린트',
     route: '/sprint',
   },
+  FINANCIAL_AID: {
+    title: '재정 지원',
+    route: '/fa',
+  },
 };
 
 export const NavBarMenus = [
   Routes.COC,
   Routes.SPONSOR_INFO,
   // Routes.CFP_APPLY,
   Routes.SESSION,
+  Routes.FINANCIAL_AID,
   Routes.TUTORIAL_LIST,
   Routes.SPRINT_LIST,
   Routes.TICKET,
 ];
 export const MobileNavBarMenus = [
-  Routes.SESSION,
+  Routes.COC,
+  Routes.SPONSOR_INFO,
   // Routes.CFP_APPLY,
+  Routes.SESSION,
+  Routes.FINANCIAL_AID,
   Routes.TUTORIAL_LIST,
   Routes.SPRINT_LIST,
-  Routes.COC,
-  Routes.SPONSOR_INFO,
-  Routes.SPONSOR_JOIN,
+  // Routes.SPONSOR_JOIN,
+  Routes.TICKET,
 ];
diff --git a/constants/session.ts b/constants/session.ts
@@ -1,4 +1,10 @@
-import { TimeTable, TimeTableInfo } from '@/@types/session';
+import {
+  TimeTable,
+  TimeTableInfo,
+  SessionDifficulty,
+  SessionDuration,
+  SessionLanguage,
+} from '@/@types/session';
 
 export const Day = ['Day1', 'Day2'] as const;
 export const SessionCategory = [
@@ -736,3 +742,19 @@ export const TimeTables: { [T in (typeof Day)[number]]: TimeTableInfo } = {
     TimeTable: Day2,
   },
 };
+
+export const DIFFICULTY: { [T in SessionDifficulty]: string } = {
+  BEGINNER: '하',
+  INTERMEDIATE: '중',
+  EXPERIENCED: '상',
+};
+
+export const DURATION: { [T in SessionDuration]: string } = {
+  SHORT: '25분',
+  LONG: '40분',
+};
+
+export const LANGUAGE: { [T in SessionLanguage]: string } = {
+  KOREAN: '한국어',
+  ENGLISH: '영어',
+};