chore: 충돌 해결

.eslintignore

@@ -0,0 +1 @@
+src/__generated__

.github/workflows/AutomaticAssignReviewer.yml

@@ -0,0 +1,14 @@
+name: Review Assign
+
+on:
+  pull_request:
+    types: [opened, ready_for_review]
+
+jobs:
+  assign:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: hkusu/review-assign-action@v1
+        with:
+          assignees: ${{ github.actor }} # assign pull request author
+          reviewers: 100Gyeon, na-reum, eunsukimme, borimong # if draft, assigned when draft is released

.gitignore

@@ -36,4 +36,7 @@ yarn-error.log*
 next-env.d.ts
 
 # vscode
-.vscode/
+.vscode/
+
+# __generated__
+src/__generated__/open-api-specification.json

.storybook/main.ts

@@ -1,4 +1,5 @@
 import type { StorybookConfig } from '@storybook/nextjs';
+
 const config: StorybookConfig = {
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
   addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-interactions'],
@@ -9,5 +10,34 @@ const config: StorybookConfig = {
   docs: {
     autodocs: 'tag',
   },
+  webpackFinal(config) {
+    const imageRule = config.module!.rules!.find((rule) => {
+      if (rule && typeof rule !== 'string' && rule.test instanceof RegExp) {
+        return rule.test.test('.svg')
+      }
+    })
+    if (imageRule && typeof imageRule !== 'string') {
+      imageRule.exclude = /\.svg$/
+    }
+
+    config.module!.rules!.push({
+      test: /\.svg$/,
+      oneOf: [
+        {
+          resourceQuery: /rect/,
+          use: {
+            loader: '@svgr/webpack',
+            options: {
+              svgo: false,
+            },
+          },
+        },
+        {
+          use: '@svgr/webpack',
+        },
+      ],
+    })
+    return config;
+  },
 };
 export default config;

.storybook/preview.ts → .storybook/preview.tsx

@@ -1,4 +1,7 @@
 import type { Preview } from '@storybook/react';
+import { OverlayProvider } from '../src/hooks/useOverlay/OverlayProvider';
+import React from 'react';
+import '../styles/globals.css'
 
 const preview: Preview = {
   parameters: {
@@ -19,6 +22,13 @@ const preview: Preview = {
       },
     },
   },
+  decorators: [
+    (Story) => (
+      <OverlayProvider>
+        <Story />
+      </OverlayProvider>
+    ),
+  ],
 };
 
 export default preview;

README.md

@@ -1,4 +1,4 @@
-# SOPT Crew Product <img src="https://user-images.githubusercontent.com/58380158/228783681-abf6e13f-b274-4150-a043-32161b7539ad.png" align="left" width="100" />
+# SOPT Crew Product <img src="https://github.com/sopt-makers/sopt-crew-frontend/assets/58380158/485fa458-b78f-4fba-aa83-5f230d3e4beb" align="left" width="100" />
 > SOPT 구성원들이 하나로 모일 수 있는 모임 서비스
 
 <img src="https://user-images.githubusercontent.com/58380158/228786812-912b193e-11d2-4b95-8e1f-38a04177c9f4.png" />

next.config.js

@@ -17,6 +17,27 @@ const nextConfig = {
             },
           },
         },
+        {
+          resourceQuery: /v2/, // *.svg?v2
+          use: {
+            loader: '@svgr/webpack',
+            options: {
+              svgo: true,
+              svgoConfig: {
+                plugins: [
+                  {
+                    name: 'preset-default',
+                    params: {
+                      overrides: {
+                        removeViewBox: false,
+                      },
+                    },
+                  },
+                ],
+              },
+            },
+          },
+        },
         {
           use: '@svgr/webpack',
         },

package.json

@@ -11,19 +11,23 @@
     "wrangler": "wrangler",
     "where": "sh -c 'export IP=`ipconfig getifaddr en0` && echo [info] we are in ... http://${IP}:3000'",
     "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
+    "build-storybook": "storybook build",
+    "generate-types": "openapi-typescript ./src/__generated__/open-api-specification.json -o ./src/__generated__/schema.d.ts"
   },
   "dependencies": {
     "@headlessui/react": "^1.7.3",
     "@hookform/resolvers": "^2.9.10",
     "@sentry/nextjs": "^7.51.0",
-    "@sopt-makers/playground-common": "^1.2.0",
+    "@sopt-makers/colors": "^1.0.0",
+    "@sopt-makers/playground-common": "^1.2.2",
     "@stitches/react": "^1.2.8",
     "@tanstack/react-query": "^4.10.3",
     "axios": "^1.1.3",
     "dayjs": "^1.11.6",
+    "embla-carousel-react": "^8.0.0-rc13",
     "nanoid": "^4.0.0",
     "next": "12.3.1",
+    "openapi-fetch": "^0.7.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-hook-form": "^7.39.1",
@@ -56,6 +60,7 @@
     "eslint-plugin-react": "^7.31.10",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-storybook": "^0.6.12",
+    "openapi-typescript": "^6.3.9",
     "prettier": "^2.7.1",
     "storybook": "^7.0.23",
     "typescript": "4.8.4",

pages/_app.tsx

@@ -1,5 +1,4 @@
 import type { AppProps } from 'next/app';
-import Head from 'next/head';
 import Script from 'next/script';
 import { useRouter } from 'next/router';
 import React, { useEffect, useState } from 'react';
@@ -14,6 +13,8 @@ import Loader from '@components/loader/Loader';
 import ChannelService from '@utils/ChannelService';
 import { api, playgroundApi } from '@api/index';
 import { fetchMyProfile } from '@api/user';
+import { OverlayProvider } from '@hooks/useOverlay/OverlayProvider';
+import SEO from '@components/seo/SEO';
 
 function MyApp({ Component, pageProps }: AppProps) {
   const [queryClient] = React.useState(() => new QueryClient());
@@ -74,9 +75,7 @@ function MyApp({ Component, pageProps }: AppProps) {
 
   return (
     <QueryClientProvider client={queryClient}>
-      <Head>
-        <title>SOPT Playground</title>
-      </Head>
+      <SEO />
       <Script
         id="gtag-base"
         strategy="afterInteractive"
@@ -109,14 +108,16 @@ function MyApp({ Component, pageProps }: AppProps) {
           },
         }}
       >
-        {isServiceReady ? (
-          <>
-            <Header />
-            <Component {...pageProps} />
-          </>
-        ) : (
-          <Loader />
-        )}
+        <OverlayProvider>
+          {isServiceReady ? (
+            <>
+              <Header />
+              <Component {...pageProps} />
+            </>
+          ) : (
+            <Loader />
+          )}
+        </OverlayProvider>
       </Box>
     </QueryClientProvider>
   );

pages/detail/index.tsx

@@ -5,14 +5,18 @@ import { styled } from 'stitches.config';
 import { useMutationDeleteMeeting, useMutationPostApplication, useQueryGetMeeting } from '@api/meeting/hooks';
 import { useRouter } from 'next/router';
 import Loader from '@components/loader/Loader';
-import InformationPanel from '@components/page/meetingDetail/InformationPanel';
+import InformationPanel from '@components/page/meetingDetail/Information/InformationPanel';
 import { Tab } from '@headlessui/react';
-import FeedPanel from '@components/page/meetingDetail/FeedPanel';
+import FeedPanel from '@components/page/meetingDetail/Feed/FeedPanel';
 import { Fragment, useState } from 'react';
+import dayjs from 'dayjs';
+import 'dayjs/locale/ko';
+
+dayjs.locale('ko');
 
 const enum SelectedTab {
-  INFORMATION,
   FEED,
+  INFORMATION,
 }
 
 const DetailPage = () => {
@@ -28,32 +32,35 @@ const DetailPage = () => {
   }
 
   return (
-    <SDetailPage>
-      <Carousel imageList={detailData?.imageURL} />
-      <DetailHeader
-        detailData={detailData}
-        mutateMeetingDeletion={mutateDeleteMeeting}
-        mutateApplication={mutatePostApplication}
-      />
-      <Tab.Group selectedIndex={selectedIndex} onChange={index => setSelectedIndex(index)}>
-        <STabList>
-          <Tab as={Fragment}>
-            <STabButton isSelected={selectedIndex === SelectedTab.INFORMATION}>모임 안내</STabButton>
-          </Tab>
-          <Tab as={Fragment}>
-            <STabButton isSelected={selectedIndex === SelectedTab.FEED}>피드</STabButton>
-          </Tab>
-        </STabList>
-        <Tab.Panels>
-          <Tab.Panel>
-            <InformationPanel detailData={detailData} />
-          </Tab.Panel>
-          <Tab.Panel>
-            <FeedPanel />
-          </Tab.Panel>
-        </Tab.Panels>
-      </Tab.Group>
-    </SDetailPage>
+    <>
+      <SDetailPage>
+        <Carousel imageList={detailData?.imageURL} />
+        <DetailHeader
+          detailData={detailData}
+          mutateMeetingDeletion={mutateDeleteMeeting}
+          mutateApplication={mutatePostApplication}
+        />
+        <Tab.Group selectedIndex={selectedIndex} onChange={index => setSelectedIndex(index)}>
+          <STabList>
+            <Tab as={Fragment}>
+              <STabButton isSelected={selectedIndex === SelectedTab.FEED}>피드</STabButton>
+            </Tab>
+            <Tab as={Fragment}>
+              <STabButton isSelected={selectedIndex === SelectedTab.INFORMATION}>모임 안내</STabButton>
+            </Tab>
+          </STabList>
+          <Tab.Panels>
+            <Tab.Panel>
+              {/* <FeedPanel isMember={detailData?.approved || detailData?.host} /> */}
+              <FeedPanel />
+            </Tab.Panel>
+            <Tab.Panel>
+              <InformationPanel detailData={detailData} />
+            </Tab.Panel>
+          </Tab.Panels>
+        </Tab.Group>
+      </SDetailPage>
+    </>
   );
 };
 

pages/index.tsx

@@ -37,7 +37,7 @@ const Home: NextPage = () => {
   return (
     <>
       <div>
-        <Flex align="center" justify="between">
+        <Flex align="start" justify="between">
           <TabList text="all" size="big">
             <Link href="/" passHref>
               <a>
@@ -94,12 +94,12 @@ export default Home;
 const SMakeMeetingButton = styled('button', {
   flexType: 'verticalCenter',
   padding: '$16 $24 $16 $20',
-  background: '$purple100',
+  background: '$white100',
   borderRadius: '16px',
   '& > span': {
     ml: '$12',
     fontAg: '18_bold_100',
-    color: '$white100',
+    color: '$black100',
   },
   '@tablet': {
     display: 'none',

pages/post/index.tsx

@@ -0,0 +1,29 @@
+import { paths } from '@/__generated__/schema';
+import { apiV2 } from '@api/index';
+import FeedPostViewer from '@components/feed/FeedPostViewer/FeedPostViewer';
+import Loader from '@components/loader/Loader';
+import { useQuery } from '@tanstack/react-query';
+import { useRouter } from 'next/router';
+
+export default function PostPage() {
+  const { query } = useRouter();
+  const data = useQuery({
+    queryFn: () => apiV2.GET('/post/v1/{postId}', { params: { path: { postId: Number(query.id as string) } } }),
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    select: res => res.data.data,
+    enabled: !!query.id,
+  });
+
+  // TODO: 자동으로 타입 추론 되게끔 endpoint 수정 필요
+  const post = data.data as paths['/post/v1/{postId}']['get']['responses']['200']['content']['application/json'];
+
+  // TODO: loading 스켈레톤 UI가 있으면 좋을 듯
+  if (!post) return <Loader />;
+
+  return (
+    <div>
+      <FeedPostViewer post={post} Actions={['수정', '삭제']} />
+    </div>
+  );
+}