Skip to content

Commit

Permalink
fix: 세션 탭 정보 배치 수정
Browse files Browse the repository at this point in the history
  • Loading branch information
@cjy3458
cjy3458 committed May 11, 2024
1 parent 6ab9750 commit 30f42a1
Show file tree
Hide file tree
Showing 5 changed files with 60 additions and 53 deletions.
29 changes: 16 additions & 13 deletions src/components/session/SessionDetailSection.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,12 +25,12 @@ const SessionDetailSection = ({ sessionDetail }: { sessionDetail: ISessionDetail

<DescriptionBox>{sessionDetail.description}</DescriptionBox>

{sessionDetail.reference ? (
{/* {sessionDetail.reference ? (
<ReferenceBox>
<b> 세션 자료 </b>
<div>{sessionDetail.reference}</div>
</ReferenceBox>
) : null}
) : null} */}
</RightWrapper>
</Wrapper>
);
Expand All @@ -42,8 +42,9 @@ const Wrapper = styled.div`
display: flex;
justify-content: center;
gap: 3rem;
@media (max-width: 900px){
/* width: 30%; */
margin-top: 3rem;
@media (max-width: 900px) {
flex-direction: column;
align-items: start;
gap: 1rem;
Expand All @@ -54,8 +55,7 @@ const LeftWrapper = styled.div`
display: flex;
flex-direction: column;
align-items: flex-start;
/* margin-top: 5rem; */
gap: 1.5rem;
@media (max-width: 900px) {
padding: 2rem;
}
Expand All @@ -66,15 +66,18 @@ const LeftWrapper = styled.div`
`;

const RightWrapper = styled.div`
flex-basis: 70%;
display: flex;
flex-direction: column;
gap: 2rem;
margin-left: 2rem;
margin-top: 2rem;
`;

const TitleText = styled.div`
font-family: 'GmarketSans';
font-style: normal;
font-weight: 900;
font-size: 3rem;
font-size: 2.3rem;
margin-bottom: 0.7rem;
color: ${Basic.default};
`;
Expand All @@ -97,21 +100,21 @@ const PresenterText = styled.div`
const TopicText = styled.div`
display: flex;
gap: 2rem;
padding: 3rem 3rem 0 3rem;
font-size: 2rem;
/* padding: 3rem 3rem 0 3rem; */
font-size: 1.8rem;
color: ${Basic.default};
font-weight: 500;
line-height: 2.5rem;
font-family: 'Pretendard';
font-style: normal;
@media (max-width: 900px) {
padding: 0rem 3rem;
/* padding: 0rem 3rem; */
}
`;

const DescriptionBox = styled.div`
padding: 3rem;
/* padding: 3rem; */
font-size: 1.4rem;
color: ${Basic.default};
font-weight: 500;
Expand Down
8 changes: 5 additions & 3 deletions src/pages/gallery/[gallery_id].tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import { getIdFromAsPath, getPaths } from '@utils/index';
import DetailPageHead from 'src/components/meta/DetailPageHead';
import { ARCHIVING } from '@utils/constant';

const GalleryDetail = ({ galleryDetailStaticData }: { galleryDetailStaticData: IGalleryDetail; }) => {
const GalleryDetail = ({ galleryDetailStaticData }: { galleryDetailStaticData: IGalleryDetail }) => {
const router = useRouter();
const { data, isLoading } = useQuery<IGalleryDetail>(['galleryDeatil', router.asPath], () =>
getGalleryDetail(getIdFromAsPath(router.asPath, 'gallery')),
Expand All @@ -30,7 +30,8 @@ const GalleryDetail = ({ galleryDetailStaticData }: { galleryDetailStaticData: I
canoUrl={`https://cau-likelion.org/gallery/${data?.id}`}
img={data?.thumbnail}
category={ARCHIVING.GALLERY}
description={data?.subtitle} />
description={data?.subtitle}
/>
<Wrapper>
<Carousel images={isLoading ? galleryDetailStaticData.image : data!.image} />
<GalleryDetailSection galleryDetail={isLoading ? galleryDetailStaticData : data!} />
Expand All @@ -53,7 +54,7 @@ export const getStaticPaths: GetStaticPaths = async () => {
};
};

export async function getStaticProps({ params }: { params: { gallery_id: string; }; }) {
export async function getStaticProps({ params }: { params: { gallery_id: string } }) {
const galleryDeatilStaticData = await getGalleryDetail(params.gallery_id);
return {
props: {
Expand All @@ -69,6 +70,7 @@ const Wrapper = styled.div`
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
&hr {
Expand Down
11 changes: 8 additions & 3 deletions src/pages/project/[project_id].tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ import { getIdFromAsPath, getPaths } from '@utils/index';
import DetailPageHead from 'src/components/meta/DetailPageHead';
import { ARCHIVING } from '@utils/constant';

const ProjectDetail = ({ projectDetailStaticData }: { projectDetailStaticData: IProjectDetail; }) => {
const ProjectDetail = ({ projectDetailStaticData }: { projectDetailStaticData: IProjectDetail }) => {
const router = useRouter();
const { data, isLoading } = useQuery<IProjectDetail>(['projectDeatil', router.query.project_id], () =>
getProjectDetail(getIdFromAsPath(router.asPath, 'project')),
Expand All @@ -32,7 +32,8 @@ const ProjectDetail = ({ projectDetailStaticData }: { projectDetailStaticData: I
canoUrl={`https://cau-likelion.org/project/${data?.id}`}
img={data?.thumbnail}
category={ARCHIVING.PROJECT}
description={data?.subtitle} />
description={data?.subtitle}
/>
<Wrapper>
<Carousel images={isLoading ? projectDetailStaticData.image : data!.image} />
<DetailMainSection data={isLoading ? projectDetailStaticData : data!} />
Expand All @@ -55,7 +56,7 @@ export const getStaticPaths: GetStaticPaths = async () => {
};
};

export async function getStaticProps({ params }: { params: { project_id: string; }; }) {
export async function getStaticProps({ params }: { params: { project_id: string } }) {
const projectDetailStaticData = await getProjectDetail(params.project_id);
return {
props: {
Expand All @@ -70,6 +71,10 @@ export default ProjectDetail;
const Wrapper = styled.div`
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
&hr {
background: ${GreyScale.light};
}
Expand Down
8 changes: 5 additions & 3 deletions src/pages/session/[session_id].tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import { getIdFromAsPath, getPaths } from '@utils/index';
import DetailPageHead from 'src/components/meta/DetailPageHead';
import { ARCHIVING } from '@utils/constant';

const SessionDetail = ({ sessionDetailStaticData }: { sessionDetailStaticData: ISessionDetail; }) => {
const SessionDetail = ({ sessionDetailStaticData }: { sessionDetailStaticData: ISessionDetail }) => {
const router = useRouter();
const { data, isLoading } = useQuery<ISessionDetail>(['sessionDetail', router.query.project_id], () =>
getSessionDetail(getIdFromAsPath(router.asPath, 'session')),
Expand All @@ -29,7 +29,8 @@ const SessionDetail = ({ sessionDetailStaticData }: { sessionDetailStaticData: I
canoUrl={`https://cau-likelion.org/session/${data?.id}`}
img={data?.thumbnail}
category={ARCHIVING.SESSION}
description={data?.subtitle} />
description={data?.subtitle}
/>
<Wrapper>
<StCarousel images={isLoading ? sessionDetailStaticData.image : data!.image} />
<SessionDetailSection sessionDetail={sessionDetailStaticData} />
Expand All @@ -51,7 +52,7 @@ export const getStaticPaths: GetStaticPaths = async () => {
};
};

export async function getStaticProps({ params }: { params: { session_id: string; }; }) {
export async function getStaticProps({ params }: { params: { session_id: string } }) {
const sessionDeatilStaticData = await getSessionDetail(params.session_id);
return {
props: {
Expand All @@ -67,6 +68,7 @@ const Wrapper = styled.div`
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
&hr {
Expand Down
57 changes: 26 additions & 31 deletions src/pages/session/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,45 +9,40 @@ import { useQuery } from 'react-query';
import styled from 'styled-components';
import ListPageHead from 'src/components/meta/ListPageHead';

const SessionList = ({ sessionStaticData }: { sessionStaticData: ArchivingArrayType<ISessionData>; }) => {
const { data, isLoading } = useQuery(['sessionData'], getSessions);
const SessionList = ({ sessionStaticData }: { sessionStaticData: ArchivingArrayType<ISessionData> }) => {
const { data, isLoading } = useQuery(['sessionData'], getSessions);

return (
<>
<ListPageHead
category={ARCHIVING.SESSION}
canoUrl={'https://cau-likelion.org/session'}
/>
<Header pageName="세션" introduce="멋사에서 진행한 세션" />
<Wrapper>
{Object.values(isLoading ? sessionStaticData : data!).map((data, i) => {
return (
<SessionSection key={i} trackName={TRACK_NAME[i]} trackData={data} />
);
})}
</Wrapper>
</>
);
return (
<>
<ListPageHead category={ARCHIVING.SESSION} canoUrl={'https://cau-likelion.org/session'} />
<Header pageName="세션" introduce="멋사에서 진행한 세션" />
<Wrapper>
{Object.values(isLoading ? sessionStaticData : data!).map((data, i) => {
return <SessionSection key={i} trackName={TRACK_NAME[i]} trackData={data} />;
})}
</Wrapper>
</>
);
};

SessionList.getLayout = function getLayout(page: ReactElement) {
return <LayoutArchiving>{page}</LayoutArchiving>;
return <LayoutArchiving>{page}</LayoutArchiving>;
};

export async function getStaticProps({ params }: { params: { track: string; }; }) {
const sessionStaticData = await getSessions();
return {
props: {
sessionStaticData,
},
revalidate: 86400,
};
export async function getStaticProps({ params }: { params: { track: string } }) {
const sessionStaticData = await getSessions();
return {
props: {
sessionStaticData,
},
revalidate: 86400,
};
}

export default SessionList;

const Wrapper = styled.div`
display: flex;
flex-direction: column;
margin: 3rem;
`;
display: flex;
flex-direction: column;
margin: 3rem;
`;

0 comments on commit 30f42a1

Please sign in to comment.