feature/music player merge into dev

.nvmrc

@@ -0,0 +1 @@
+v16.16.0

README.md

@@ -1,4 +1,5 @@
-This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+This is a [Next.js](https://nextjs.org/) project bootstrapped
+with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
 
 ## Getting Started
 
@@ -14,9 +15,12 @@ Open [http://localhost:3000](http://localhost:3000) with your browser to see the
 
 You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
 
-[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.
+[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed
+on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited
+in `pages/api/hello.ts`.
 
-The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
+The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated
+as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
 
 ## Learn More
 
@@ -25,10 +29,13 @@ To learn more about Next.js, take a look at the following resources:
 - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
 - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
 
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions
+are welcome!
 
 ## Deploy on Vercel
 
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+The easiest way to deploy your Next.js app is to use
+the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme)
+from the creators of Next.js.
 
 Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

next-sitemap.config.js

@@ -1,6 +1,6 @@
 /** @type {import('next-sitemap').IConfig} */
 
 module.exports = {
-  siteUrl: process.env.NEXT_PUBLIC_URL || 'https://colabo.ai',
+  siteUrl: process.env.NEXT_PUBLIC_URL || 'https://loop.colabo.ai',
   generateRobotsTxt: true,
 };

next.config.js

@@ -8,6 +8,9 @@ const nextConfig = {
   sassOptions: {
     includePaths: [path.join(__dirname, 'styles')],
   },
+  images: {
+    domains: ['colaboai-server-v1.s3.ap-northeast-2.amazonaws.com'],
+  },
   i18n,
 };
 

package.json

@@ -18,22 +18,35 @@
     "prepare": "husky install"
   },
   "dependencies": {
+    "@emotion/react": "^11.9.3",
+    "@emotion/styled": "^11.9.3",
+    "@mui/material": "^5.9.2",
     "@tanstack/react-query": "^4.0.8",
+    "@types/react-lottie": "^1.2.6",
+    "@types/react-responsive": "^8.0.5",
+    "axios": "^0.27.2",
+    "file-loader": "^6.2.0",
     "next": "^12.2.2",
     "next-i18next": "^11.2.2",
     "next-seo": "^5.5.0",
     "next-sitemap": "^3.1.11",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-h5-audio-player": "^3.8.6",
+    "react-hot-toast": "^2.3.0",
+    "react-icons": "^4.4.0",
+    "react-lottie": "^1.2.3",
+    "react-responsive": "^9.0.0",
     "recoil": "^0.7.4",
     "sass": "^1.53.0"
   },
   "devDependencies": {
-    "@testing-library/dom": "^8.16.0",
-    "@testing-library/jest-dom": "^5.16.4",
+    "@tanstack/react-query-devtools": "^4.2.3",
+    "@testing-library/dom": "^8.17.1",
+    "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.3.0",
     "@testing-library/react-hooks": "^8.0.1",
-    "@testing-library/user-event": "^14.3.0",
+    "@testing-library/user-event": "^14.4.3",
     "@types/node": "18.0.6",
     "@types/react": "18.0.15",
     "@types/react-dom": "18.0.6",
@@ -50,12 +63,12 @@
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react": "^7.30.1",
     "eslint-plugin-react-hooks": "^4.6.0",
+    "husky": "^8.0.0",
     "jest": "^28.1.3",
     "jest-dom": "^4.0.0",
     "jest-environment-jsdom": "^28.1.3",
     "prettier": "^2.7.1",
     "ts-jest": "^28.0.7",
-    "typescript": "4.7.4",
-    "husky": "^8.0.0"
+    "typescript": "4.7.4"
   }
 }

pages/_app.tsx

@@ -1,4 +1,4 @@
-import '../styles/globals.scss';
+import '@styles/common/globals.scss';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { RecoilRoot } from 'recoil';
 import type { ReactElement, ReactNode } from 'react';
@@ -8,9 +8,12 @@ import { DefaultSeo } from 'next-seo';
 import SEO from 'seo.config';
 import { appWithTranslation } from 'next-i18next';
 import '/public/static/fonts/styles.scss';
+import 'react-h5-audio-player/src/styles.scss';
+import { Toaster } from 'react-hot-toast';
 
-const queryClient = new QueryClient();
-
+const queryClient = new QueryClient({
+  defaultOptions: { queries: { retry: false, refetchOnWindowFocus: false } },
+});
 export type NextPageWithLayout = NextPage & {
   getLayout?: (page: ReactElement) => ReactNode;
 };
@@ -27,6 +30,7 @@ function MyApp({ Component, pageProps }: AppPropsWithLayout) {
       <RecoilRoot>
         <DefaultSeo {...SEO} />
         {getLayout(<Component {...pageProps} />)}
+        <Toaster position="top-center" reverseOrder={false} />
       </RecoilRoot>
     </QueryClientProvider>
   );

pages/api/client.ts

@@ -0,0 +1,3 @@
+import axios from 'axios';
+
+axios.defaults.withCredentials = true;

pages/favorites.tsx

@@ -1,5 +1,5 @@
 import type { ReactElement } from 'react';
-import Layout from '../src/components/layout';
+import Layout from '@src/components/layout/layout';
 import type { NextPageWithLayout } from './_app';
 import { NextSeo } from 'next-seo';
 

pages/index.tsx

@@ -1,9 +1,48 @@
 import type { ReactElement } from 'react';
-import Layout from '../src/components/layout';
+import Layout from '@src/components/layout/layout';
 import type { NextPageWithLayout } from './_app';
 import { NextSeo } from 'next-seo';
+import usePlay from '@src/hooks/usePlay';
+import {
+  IoMdArrowRoundDown,
+  IoMdHeartEmpty,
+  IoMdHeart,
+  IoMdPause,
+  IoMdPlay,
+  IoMdShare,
+  IoMdStarOutline,
+  IoMdStar,
+} from 'react-icons/io';
+import styles from '/styles/index.module.scss';
+import useHeart from '@src/hooks/useHeart';
+import useStar from '@src/hooks/useStar';
+import useMusicQuery from '@src/queries/music.queries';
+import Image from 'next/image';
+import { Mobile, DesktopOrTablet } from '@src/hooks/useMediaQuery';
+import MusicLottie from '@src/utils/lotties/musicLottie';
+import Proto from '@src/utils/proto';
+import { useRecoilState } from 'recoil';
+import { currentIndexState } from '@src/store/atom';
+import { useEffect, useRef } from 'react';
+
+const Index: NextPageWithLayout = () => {
+  const [start, stop, restart, play, musicId] = usePlay();
+  const [heart, fillHeart, unFillHeart] = useHeart();
+  const [star, fillStar, unFillStar] = useStar();
+  const [currentIndex, setCurrentIndex] = useRecoilState(currentIndexState);
+  const { data, isLoading } = useMusicQuery();
+  const divRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (currentIndex !== -1 && data !== undefined) {
+      start(data[currentIndex]);
+    }
+  }, [currentIndex]);
+
+  if (isLoading || data === undefined) {
+    return <div>로딩 중...</div>;
+  }
 
-const Home: NextPageWithLayout = () => {
   return (
     <div>
       <NextSeo
@@ -14,34 +53,149 @@ const Home: NextPageWithLayout = () => {
           url: 'https://colabo.ai',
         }}
       />
-      <section>
-        <h2>인공지능으로 작곡한 음악 저작권 걱정없이 무료로 이용하세요.</h2>
-        <p>
-          This example adds a property <code>getLayout</code> to your page, allowing you to return a React component for
-          the layout. This allows you to define the layout on a per-page basis. Since we are returning a function, we
-          can have complex nested layouts if desired.
-        </p>
-        <p>
-          When navigating between pages, we want to persist page state (input values, scroll position, etc) for a
-          Single-Page Application (SPA) experience.
-        </p>
-        <p>
-          This layout pattern will allow for state persistence because the React component tree is persisted between
-          page transitions. To preserve state, we need to prevent the React component tree from being discarded between
-          page transitions.
-        </p>
-        <h3>Try It Out</h3>
-        <p>
-          To visualize this, try tying in the search input in the <code>Sidebar</code> and then changing routes. You
-          will notice the input state is persisted.
-        </p>
-      </section>
+      <DesktopOrTablet>
+        <>
+          <div className={styles.background}>
+            <video muted autoPlay loop>
+              <source src="/mp4/index_background.mp4" type="video/mp4" />
+            </video>
+          </div>
+          <div className={styles.title}>
+            <p>
+              인공지능으로 작곡한 음악 <br />
+              저작권 걱정없이 무료로 이용하세요
+            </p>
+            {/*<Link href="/login">*/}
+            <button
+              onClick={() => {
+                if (divRef.current !== null) {
+                  divRef.current.scrollIntoView({ behavior: 'smooth' });
+                }
+              }}>
+              시작하기
+            </button>
+            {/*</Link>*/}
+          </div>
+          <div className={styles.playList}>
+            <div className={styles.playListHeader}>
+              <p>AI BGM SAMPLE</p>
+            </div>
+            {data.map((music, currentIndex) => (
+              <div className={styles.musicContainer} key={music.id}>
+                <div>{music.id}</div>
+                <div className={styles.album}>
+                  <Image src={music.cover_image_url} width={60} height={60} />
+                </div>
+                <div className={styles.start}>
+                  {musicId === music.id && play ? (
+                    <IoMdPause size={25} onClick={stop} />
+                  ) : (
+                    <IoMdPlay
+                      size={25}
+                      onClick={() => {
+                        setCurrentIndex(currentIndex);
+                        restart();
+                      }}
+                    />
+                  )}
+                </div>
+                <div className={styles.musicName}>{music.title}</div>
+                <div className={styles.musicArtist}>{music.artist_name}</div>
+                <div className={styles.icons}>
+                  {!heart ? (
+                    <div>
+                      <IoMdHeartEmpty onClick={fillHeart} size={25} />
+                    </div>
+                  ) : (
+                    <div>
+                      <IoMdHeart onClick={unFillHeart} size={25} />
+                    </div>
+                  )}
+                  <div>
+                    <IoMdArrowRoundDown size={25} />
+                  </div>
+                  {!star ? (
+                    <div>
+                      <IoMdStarOutline onClick={fillStar} size={25} />
+                    </div>
+                  ) : (
+                    <div>
+                      <IoMdStar onClick={unFillStar} size={25} />
+                    </div>
+                  )}
+                  <div>
+                    <IoMdShare size={25} />
+                  </div>
+                </div>
+              </div>
+            ))}
+            <div ref={divRef}>
+              <Proto />
+            </div>
+          </div>
+        </>
+      </DesktopOrTablet>
+      <Mobile>
+        <>
+          <div className={styles.background}>
+            <video muted autoPlay loop playsInline={true}>
+              <source src="/mp4/index_background.mp4" type="video/mp4" />
+            </video>
+          </div>
+          <div className={styles.title}>
+            <p>
+              <span style={{ color: '#00ffff' }}>인공지능</span>
+              으로 작곡한 음악 <br />
+              이제는 <span style={{ color: '#00ffff' }}>저작권 </span>
+              걱정없이
+            </p>
+            <div className={styles.subtitle}>
+              <p>
+                숏폼 콘텐츠 제작에 필요한 배경음악
+                <br />
+                이제 무제한으로 즐기세요
+              </p>
+            </div>
+            <MusicLottie />
+          </div>
+          <div className={styles.playList}>
+            <div className={styles.playListHeader}>
+              <p>AI MUSIC</p>
+            </div>
+            {data.map((music, currentIndex) => (
+              <div className={styles.musicContainer} key={music.id}>
+                <div className={styles.album}>
+                  <Image src={music.cover_image_url} width={50} height={50} />
+                </div>
+                <div className={styles.start}>
+                  {musicId === music.id && play ? (
+                    <IoMdPause size={20} onClick={stop} />
+                  ) : (
+                    <IoMdPlay
+                      size={20}
+                      onClick={() => {
+                        setCurrentIndex(currentIndex);
+                        restart();
+                      }}
+                    />
+                  )}
+                </div>
+                <div className={styles.musicName}>{music.title}</div>
+                <div className={styles.musicArtist}>{music.artist_name}</div>
+              </div>
+            ))}
+            <div style={{ width: '300px' }}>
+              <Proto />
+            </div>
+          </div>
+        </>
+      </Mobile>
     </div>
   );
 };
 
-Home.getLayout = function getLayout(page: ReactElement) {
+Index.getLayout = function getLayout(page: ReactElement) {
   return <Layout>{page}</Layout>;
 };
 
-export default Home;
+export default Index;