Merge pull request #206 from themoment-team/develop

Release v0.2.0

README.md

@@ -2,7 +2,7 @@
 
 광주소프트웨어마이스터고등학교 공식 홈페이지입니다.
 
-## commands
+## Commands
 
 > root `package.json` scripts에 `--filter` command를 포함하여 작성해두었습니다.
 
@@ -12,13 +12,13 @@ $ cd official-gsm-front
 $ pnpm install
 
 # command of a specific package
-$ pnpm <workspace-name> <command>
+$ pnpm <package-name> <command>
 
 # example
 $ pnpm client dev
 ```
 
-## directory structure
+## Directory structure
 
 ```bash
 ...
@@ -36,3 +36,17 @@ $ pnpm client dev
 │   └── ui
 ...
 ```
+
+## Skill set
+
+```txt
+- application
+  Next.js - App Router
+
+- core library
+  Storybook
+  Typescript
+  emotion
+  @tanstack/react-query
+  axios
+```

apps/admin/src/app/post/edit/[postSeq]/page.tsx

@@ -52,7 +52,7 @@ export default function EditPage({ params: { postSeq } }: EditPageProps) {
   const { data } = useGetPostDetail(postSeq);
 
   const isGallery = category === 'EVENT_GALLERY';
-  const gallerySubmitDisabled = isGallery && files.length === 0;
+  const galleryEditDisabled = isGallery && !prevFiles?.length && !files.length;
 
   const {
     register,
@@ -240,7 +240,7 @@ export default function EditPage({ params: { postSeq } }: EditPageProps) {
             <Button
               width='22.5625rem'
               type='submit'
-              disabled={gallerySubmitDisabled}
+              disabled={galleryEditDisabled}
             >
               완료
             </Button>

apps/admin/src/components/ApproveModal/index.tsx

@@ -13,7 +13,7 @@ const ApproveModal: React.FC<ApproveModalProps> = ({ close }) => {
   const { data: unApproveList, refetch } = useGetUnapproveList();
 
   return (
-    <S.ModalConatiner onClick={(e) => e.stopPropagation()}>
+    <S.ModalContainer onClick={(e) => e.stopPropagation()}>
       <S.ModalHeader>
         🤝 가입 요청
         <div onClick={close}>
@@ -29,7 +29,7 @@ const ApproveModal: React.FC<ApproveModalProps> = ({ close }) => {
           />
         ))}
       </S.ModalContent>
-    </S.ModalConatiner>
+    </S.ModalContainer>
   );
 };
 

apps/admin/src/components/ApproveModal/style.ts

@@ -1,6 +1,6 @@
 import styled from '@emotion/styled';
 
-export const ModalConatiner = styled.div`
+export const ModalContainer = styled.div`
   display: flex;
   flex-direction: column;
   position: absolute;

apps/admin/src/components/DeleteModal/index.tsx

@@ -9,7 +9,7 @@ const DeleteModal: React.FC<DeleteModalProps> = ({ onClick }) => (
     <S.DeletePostText>게시물 삭제</S.DeletePostText>
     <S.ReQuestionText>정말 게시물을 삭제하실건가요?</S.ReQuestionText>
     <S.ButtonForm method='dialog'>
-      <S.CancleButton>취소하기</S.CancleButton>
+      <S.CancelButton>취소하기</S.CancelButton>
       <S.DeleteButton onClick={onClick}>삭제하기</S.DeleteButton>
     </S.ButtonForm>
   </S.ModalWrapper>

apps/admin/src/components/DeleteModal/style.ts

@@ -40,7 +40,7 @@ export const Button = styled.button`
   cursor: pointer;
 `;
 
-export const CancleButton = styled(Button)`
+export const CancelButton = styled(Button)`
   background: ${({ theme }) => theme.color.gray['040']};
   color: ${({ theme }) => theme.color.gray['080']};
 `;

apps/client/src/app/about/location/page.tsx

@@ -0,0 +1,25 @@
+import { Location, Header, Footer } from 'client/components';
+
+import type { Metadata } from 'next';
+
+export const metadata: Metadata = {
+  description:
+    '광주소프트웨어마이스터고등학교 공식 홈페이지 찾아오시는 길 페이지입니다.',
+  title: { absolute: '찾아오시는 길' },
+  openGraph: {
+    title: '찾아오시는 길',
+    description:
+      '광주소프트웨어마이스터고등학교 공식 홈페이지 찾아오시는 길 페이지입니다.',
+    url: 'https://official.hellogsm.kr/about/location',
+  },
+};
+
+export default function LocationPage() {
+  return (
+    <>
+      <Header segment='about' />
+      <Location />
+      <Footer />
+    </>
+  );
+}

apps/client/src/app/policy/cctv/page.tsx

@@ -0,0 +1,25 @@
+import { Footer, Header, MediaPolicy } from 'client/components';
+
+import type { Metadata } from 'next';
+
+export const metadata: Metadata = {
+  description:
+    '광주소프트웨어마이스터고등학교 공식 홈페이지 영상정보처리기기 운영ㆍ관리 방침 페이지입니다.',
+  title: { absolute: '영상정보처리기기 운영ㆍ관리 방침' },
+  openGraph: {
+    title: '영상정보처리기기 운영ㆍ관리 방침',
+    description:
+      '광주소프트웨어마이스터고등학교 공식 홈페이지 영상정보처리기기 운영ㆍ관리 방침 페이지입니다.',
+    url: 'https://official.hellogsm.kr/policy/copyright',
+  },
+};
+
+export default function cctvPage() {
+  return (
+    <>
+      <Header segment='about' />
+      <MediaPolicy />
+      <Footer />
+    </>
+  );
+}

apps/client/src/app/policy/copyright/page.tsx

@@ -0,0 +1,25 @@
+import { Footer, Header, CopyrightPolicy } from 'client/components';
+
+import type { Metadata } from 'next';
+
+export const metadata: Metadata = {
+  description:
+    '광주소프트웨어마이스터고등학교 공식 홈페이지 저작권신고 및 보호규정 페이지입니다.',
+  title: { absolute: '저작권신고 및 보호규정' },
+  openGraph: {
+    title: '저작권신고 및 보호규정',
+    description:
+      '광주소프트웨어마이스터고등학교 공식 홈페이지 저작권신고 및 보호규정 페이지입니다.',
+    url: 'https://official.hellogsm.kr/policy/copyright',
+  },
+};
+
+export default function CopyrightPage() {
+  return (
+    <>
+      <Header segment='about' />
+      <CopyrightPolicy />
+      <Footer />
+    </>
+  );
+}

apps/client/src/app/policy/privacy/page.tsx

@@ -0,0 +1,25 @@
+import { PrivacyPolicy, Header, Footer } from 'client/components';
+
+import type { Metadata } from 'next';
+
+export const metadata: Metadata = {
+  description:
+    '광주소프트웨어마이스터고등학교 공식 홈페이지 개인정보처리방침 페이지입니다.',
+  title: { absolute: '개인정보처리방침' },
+  openGraph: {
+    title: '개인정보처리방침',
+    description:
+      '광주소프트웨어마이스터고등학교 공식 홈페이지 개인정보처리방침 페이지입니다.',
+    url: 'https://official.hellogsm.kr/policy/privacy',
+  },
+};
+
+export default function Privacy() {
+  return (
+    <>
+      <Header segment='about' />
+      <PrivacyPolicy />
+      <Footer />
+    </>
+  );
+}

apps/client/src/app/post/[postSeq]/page.tsx

@@ -4,6 +4,8 @@ import { Footer, Header, AssembledPost } from 'client/components';
 
 import { postUrl } from 'api/client';
 
+import { descriptionFormatting } from 'common';
+
 import type { PostDetailType } from 'types';
 
 import type { Metadata } from 'next';
@@ -12,11 +14,13 @@ interface PostPageProps {
   params: { postSeq: string };
 }
 
-export default function PostPage({ params: { postSeq } }: PostPageProps) {
+export default async function PostPage({ params: { postSeq } }: PostPageProps) {
+  const post = await getPostDetail(parseInt(postSeq));
+
   return (
     <>
       <Header segment='list' />
-      <AssembledPost postSeq={parseInt(postSeq)} />
+      <AssembledPost post={post} postSeq={parseInt(postSeq)} />
       <Footer />
     </>
   );
@@ -28,9 +32,7 @@ export const generateMetadata = async ({
   try {
     const postSeq = Number(params.postSeq);
 
-    const post: PostDetailType = await fetch(
-      `${process.env.BASE_URL}/api/client${postUrl.postDetail(postSeq)}`
-    ).then((res) => res.json());
+    const post = await getPostDetail(postSeq);
 
     return {
       title: { absolute: post.postTitle },
@@ -46,5 +48,17 @@ export const generateMetadata = async ({
   }
 };
 
-const descriptionFormatting = (description: string) =>
-  description.replace(/\n/g, ' ').replace(/\s+/g, ' ').slice(0, 120);
+async function getPostDetail(postSeq: number) {
+  const res = await fetch(
+    `${process.env.BASE_URL}/api/client${postUrl.postDetail(postSeq)}`,
+    {
+      next: {
+        revalidate: 60,
+      },
+    }
+  );
+
+  const data: PostDetailType = await res.json();
+
+  return data;
+}

apps/client/src/assets/index.ts

@@ -1,6 +1,7 @@
 export { default as ArrowIcon } from './svg/icon/ArrowIcon';
 export { default as ChevronIcon } from './svg/icon/ChevronIcon';
 export { default as CloseIcon } from './svg/icon/CloseIcon';
+export { default as ContactIcon } from './svg/icon/ContactIcon';
 export { default as DownChevronsIcon } from './about/section1/DownChevronsIcon';
 export { default as DreamIcon } from './about/section3/DreamIcon';
 export { default as FooterGSMLogo } from './svg/FooterGSMLogo';
@@ -10,8 +11,11 @@ export { default as HeaderGSMLogo } from './svg/HeaderGSMLogo';
 export { default as HomeScrollDownIcon } from './svg/icon/HomeScrollDownIcon';
 export { default as ImaginationIcon } from './about/section3/ImaginationIcon';
 export { default as LeftArrowIcon } from './about/section7/LeftArrowIcon';
+export { default as MapIcon } from './svg/icon/MapIcon';
+export { default as MarkIcon } from './svg/icon/MarkIcon';
 export { default as MouseIcon } from './about/section1/MouseIcon';
 export { default as NotFoundTitle } from './svg/NotFoundTitle';
 export { default as ReturnChevronIcon } from './svg/icon/ReturnChevronIcon';
 export { default as RightArrowIcon } from './about/section7/RightArrowIcon';
+export { default as SubwayIcon } from './svg/icon/SubwayIcon';
 export { default as UnderscoreIcon } from './svg/icon/UnderscoreIcon';

apps/client/src/assets/svg/icon/ContactIcon.tsx

@@ -0,0 +1,19 @@
+const ContactIcon = () => (
+  <svg
+    width='24'
+    height='25'
+    viewBox='0 0 24 25'
+    fill='none'
+    xmlns='http://www.w3.org/2000/svg'
+  >
+    <path
+      d='M2.25 7.25C2.25 15.534 8.966 22.25 17.25 22.25H19.5C20.0967 22.25 20.669 22.0129 21.091 21.591C21.5129 21.169 21.75 20.5967 21.75 20V18.628C21.75 18.112 21.399 17.662 20.898 17.537L16.475 16.431C16.035 16.321 15.573 16.486 15.302 16.848L14.332 18.141C14.05 18.517 13.563 18.683 13.122 18.521C11.4849 17.9191 9.99815 16.9686 8.76478 15.7352C7.53141 14.5018 6.58087 13.0151 5.979 11.378C5.817 10.937 5.983 10.45 6.359 10.168L7.652 9.198C8.015 8.927 8.179 8.464 8.069 8.025L6.963 3.602C6.90214 3.35869 6.76172 3.1427 6.56405 2.98834C6.36638 2.83397 6.1228 2.75008 5.872 2.75H4.5C3.90326 2.75 3.33097 2.98705 2.90901 3.40901C2.48705 3.83097 2.25 4.40326 2.25 5V7.25Z'
+      stroke='#003365'
+      strokeWidth='2'
+      strokeLinecap='round'
+      strokeLinejoin='round'
+    />
+  </svg>
+);
+
+export default ContactIcon;

apps/client/src/assets/svg/icon/MapIcon.tsx

@@ -0,0 +1,19 @@
+const MapIcon = () => (
+  <svg
+    width='28'
+    height='28'
+    viewBox='0 0 28 28'
+    fill='none'
+    xmlns='http://www.w3.org/2000/svg'
+  >
+    <path
+      d='M10.5 7.87575V17.5007M17.5 10.5007V20.1257M18.0868 24.2067L23.7743 21.3636C24.2188 21.1419 24.5 20.6869 24.5 20.1899V5.62408C24.5 4.64875 23.4733 4.01408 22.6007 4.45041L18.0868 6.70675C17.717 6.89225 17.2818 6.89225 16.9132 6.70675L11.0868 3.79475C10.9046 3.70367 10.7037 3.65625 10.5 3.65625C10.2963 3.65625 10.0954 3.70367 9.91317 3.79475L4.22567 6.63791C3.78 6.86075 3.5 7.31575 3.5 7.81158V22.3774C3.5 23.3527 4.52667 23.9874 5.39933 23.5511L9.91317 21.2947C10.283 21.1092 10.7182 21.1092 11.0868 21.2947L16.9132 24.2079C17.283 24.3922 17.7182 24.3922 18.0868 24.2079V24.2067Z'
+      stroke='white'
+      strokeWidth='2'
+      strokeLinecap='round'
+      strokeLinejoin='round'
+    />
+  </svg>
+);
+
+export default MapIcon;

apps/client/src/assets/svg/icon/MarkIcon.tsx

@@ -0,0 +1,26 @@
+const MarkIcon = () => (
+  <svg
+    width='24'
+    height='25'
+    viewBox='0 0 24 25'
+    fill='none'
+    xmlns='http://www.w3.org/2000/svg'
+  >
+    <path
+      d='M15 11C15 11.7956 14.6839 12.5587 14.1213 13.1213C13.5587 13.6839 12.7956 14 12 14C11.2044 14 10.4413 13.6839 9.87868 13.1213C9.31607 12.5587 9 11.7956 9 11C9 10.2044 9.31607 9.44129 9.87868 8.87868C10.4413 8.31607 11.2044 8 12 8C12.7956 8 13.5587 8.31607 14.1213 8.87868C14.6839 9.44129 15 10.2044 15 11Z'
+      stroke='#003365'
+      strokeWidth='1.5'
+      strokeLinecap='round'
+      strokeLinejoin='round'
+    />
+    <path
+      d='M19.5 11C19.5 18.142 12 22.25 12 22.25C12 22.25 4.5 18.142 4.5 11C4.5 9.01088 5.29018 7.10322 6.6967 5.6967C8.10322 4.29018 10.0109 3.5 12 3.5C13.9891 3.5 15.8968 4.29018 17.3033 5.6967C18.7098 7.10322 19.5 9.01088 19.5 11Z'
+      stroke='#003365'
+      strokeWidth='2'
+      strokeLinecap='round'
+      strokeLinejoin='round'
+    />
+  </svg>
+);
+
+export default MarkIcon;

apps/client/src/assets/svg/icon/SubwayIcon.tsx

@@ -0,0 +1,46 @@
+const MapIcon = () => (
+  <svg
+    width='22'
+    height='22'
+    viewBox='0 0 22 22'
+    fill='none'
+    xmlns='http://www.w3.org/2000/svg'
+  >
+    <rect
+      x='1.3335'
+      y='1.33398'
+      width='19.3333'
+      height='16.6667'
+      rx='3'
+      stroke='white'
+      strokeWidth='2'
+    />
+    <line
+      x1='1.6665'
+      y1='6'
+      x2='20.3332'
+      y2='6'
+      stroke='white'
+      strokeWidth='2'
+    />
+    <line
+      x1='1.6665'
+      y1='10'
+      x2='20.3332'
+      y2='10'
+      stroke='white'
+      strokeWidth='2'
+    />
+    <circle cx='10.9998' cy='13.6673' r='1.33333' fill='white' />
+    <path
+      d='M6.3335 19H8.3335L7.00016 21.6667H4.3335L6.3335 19Z'
+      fill='white'
+    />
+    <path
+      d='M15.6665 19H13.6665L14.9998 21.6667H17.6665L15.6665 19Z'
+      fill='white'
+    />
+  </svg>
+);
+
+export default MapIcon;