Merge branch 'develop' into feature-64/header

.github/workflows/deploy_develop.yml

@@ -0,0 +1,48 @@
+name: Deploy-Develop
+
+on:
+  push:
+    branches: ['develop']
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    container: pandoc/latex
+
+    steps:
+      - uses: actions/checkout@v2
+
+      - name: Install mustache (to update the date)
+
+        run: apk add ruby && gem install mustache
+
+      - name: creates output
+
+        run: sh ./build.sh
+
+      - name: Pushes to another repository
+
+        id: push_directory
+
+        uses: cpina/github-action-push-to-another-repository@main
+
+        env:
+          API_TOKEN_GITHUB: ${{ secrets.AUTO_ACTIONS }}
+
+        with:
+          source-directory: 'output'
+
+          destination-github-username: Si-off
+
+          destination-repository-name: partage_web_develop
+
+          user-email: ${{ secrets.EMAIL }}
+
+          commit-message: ${{ github.event.commits[0].message }}
+
+          target-branch: main
+
+      - name: Test get variable exported by push-to-another-repository
+
+        run: echo $DESTINATION_CLONED_DIRECTORY

build.sh

@@ -0,0 +1,5 @@
+#!/bin/sh
+cd ../
+mkdir output
+cp -R ./partage_web/* ./output
+cp -R ./output ./partage_web/

next.config.mjs

@@ -1,5 +1,7 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
+  runtime: 'edge',
+  unstable_allowDynamic: ['lodash/merge.js'],
   images: {
     remotePatterns: [
       {

src/app/(main)/_components/ChannelList.tsx

@@ -1,9 +1,9 @@
 'use client';
 import { useCallback, useEffect, useRef, useState } from 'react';
 
+import { useMainStore } from '@/providers/main-store-provider';
 import { getSearchChannelList } from '@/services/channel';
 import { GetChannelSearchResponse } from '@/services/channel/type';
-import { useChannelStore } from '@/stores/useChannelStore';
 import { useInView } from 'react-intersection-observer';
 
 import ChannelItem from './ChannelItem';
@@ -14,9 +14,15 @@ interface ChannelListProps {
 }
 
 const ChannelList = ({ query, channelsData }: ChannelListProps) => {
-  const { channels, setChannels, cursor, incrementCursor } = useChannelStore();
   const [loading, setLoading] = useState(false);
 
+  const { channels, setChannels, addChannels, cursor } = useMainStore((state) => ({
+    channels: state.channels,
+    setChannels: state.setChannels,
+    addChannels: state.addChannels,
+    cursor: state.cursor,
+  }));
+
   const [ref, inView] = useInView();
   const channelsRef = useRef<HTMLDivElement>(null);
   const noNextChannel = channelsData.page.total_count < cursor * 12;
@@ -27,14 +33,13 @@ const ChannelList = ({ query, channelsData }: ChannelListProps) => {
     setLoading(true);
 
     const nextChannelsData = await getSearchChannelList({
-      cursor: cursor + 1,
+      cursor: cursor,
       keyword: `${query ? query : ''}`,
     });
-    setChannels(nextChannelsData.channels);
-    incrementCursor();
+    addChannels(nextChannelsData.channels);
 
     setLoading(false);
-  }, [cursor, incrementCursor, loading, query, setChannels]);
+  }, [cursor, loading, query, addChannels]);
 
   useEffect(() => {
     if (channelsData && channelsData.channels) {

src/app/(main)/_components/Hashtags.tsx

@@ -1,5 +1,8 @@
 import { useState, useEffect, useCallback } from 'react';
 
+import { PAGE_ROUTE } from '@/utils/route';
+import Link from 'next/link';
+
 interface HashtagsProps {
   hashtage: string;
   color: string;
@@ -21,17 +24,18 @@ const Hashtags = ({ hashtage, color }: HashtagsProps) => {
 
       if (windowWidth >= 1200) {
         maxWidth = 180;
-        // maxWidth = 155;
+        /** maxWidth = 155; */
       } else if (windowWidth >= 744) {
         maxWidth = 240;
-        // maxWidth = 215;
+        /** maxWidth = 215; */
       } else if (windowWidth >= 375) {
         maxWidth = 283;
-        // maxWidth = 258;
+        /** maxWidth = 258; */
       }
 
       for (let i = 0; i < hashtagArray.length; i++) {
-        const width = (hashtagArray[i].length - 1) * 12 + 9 + 5; // 전체 글자수 -1(#) * 글자당 12 + # 9 + gap 5
+        const width = (hashtagArray[i].length - 1) * 12 + 9 + 5;
+        /** 전체 글자수 -1(#) * 글자당 12 + # 9 + gap 5 */
         totalWidth += width;
 
         if (totalWidth > maxWidth) return;
@@ -56,11 +60,15 @@ const Hashtags = ({ hashtage, color }: HashtagsProps) => {
   return (
     <div className="flex h-[21px] w-fit gap-x-[5px]">
       {hashtagArray.map((tag, index) => {
+        const noSharpTag = tag.substring(tag.indexOf('#') + 1);
+
         if (index < visibleIndex)
           return (
-            <span key={index} className="shrink-0 small-regular" style={{ color: color }}>
-              {tag}
-            </span>
+            <Link key={index} href={PAGE_ROUTE.SEARCH(noSharpTag)}>
+              <span key={index} className="shrink-0 small-regular" style={{ color: color }}>
+                {tag}
+              </span>
+            </Link>
           );
       })}
       {restHashtagCount !== 0 && (

src/app/page.tsx

@@ -1,5 +1,6 @@
 import ChannelCreatorBox from '@/components/ChannelCreatorBox';
 import SearchBar from '@/components/SearchBar';
+import { MainStoreProvider } from '@/providers/main-store-provider';
 import { getSearchChannelList } from '@/services/channel';
 import { PLACEHOLDER } from '@/utils/constants';
 
@@ -11,20 +12,18 @@ const MainPage = async () => {
   const noChannel = channelsData?.page.total_count === 0;
 
   return (
-    <main className="flex flex-col items-center gap-[40px] p-[40px]">
-      {noChannel ? (
-        <ChannelCreatorBox>
-          생성된 채널이 없어서 조용하네요!
-          <br />
-          폭탄뉴진세님의 채널을 기다릴지도!
-        </ChannelCreatorBox>
-      ) : (
-        <>
-          <SearchBar placeholder={PLACEHOLDER.CHANNEL_SEARCHBAR} />
-          <ChannelList channelsData={channelsData} />
-        </>
-      )}
-    </main>
+    <MainStoreProvider>
+      <main className="flex flex-col items-center gap-[40px] p-[40px]">
+        {noChannel ? (
+          <ChannelCreatorBox />
+        ) : (
+          <>
+            <SearchBar placeholder={PLACEHOLDER.CHANNEL_SEARCHBAR} />
+            <ChannelList channelsData={channelsData} />
+          </>
+        )}
+      </main>
+    </MainStoreProvider>
   );
 };
 

src/app/search/page.tsx

@@ -1,5 +1,6 @@
 import ChannelCreatorBox from '@/components/ChannelCreatorBox';
 import SearchBar from '@/components/SearchBar';
+import { MainStoreProvider } from '@/providers/main-store-provider';
 import { getSearchChannelList } from '@/services/channel';
 import { PLACEHOLDER } from '@/utils/constants';
 
@@ -12,25 +13,21 @@ interface SearchPageProps {
 const SearchPage = async ({ searchParams }: SearchPageProps) => {
   const query = typeof searchParams.query === 'string' ? searchParams.query : '';
 
-  const channelsData = await getSearchChannelList({ cursor: 1, keyword: query });
+  const channelsData = query && (await getSearchChannelList({ cursor: 1, keyword: query }));
 
-  const noChannel = channelsData?.page.total_count === 0;
+  const noChannel = channelsData && channelsData?.page.total_count === 0;
 
   return (
-    <>
+    <MainStoreProvider>
       {noChannel ? (
-        <ChannelCreatorBox page="search">
-          &apos;{query}&apos;로 검색된 채널이 없어요.
-          <br />
-          폭탄뉴진세님이 먼저 만들어보는 건 어떠세요?
-        </ChannelCreatorBox>
+        <ChannelCreatorBox query={query} />
       ) : (
         <>
           <SearchBar initialQuery={query} placeholder={PLACEHOLDER.CHANNEL_SEARCHBAR} />
-          <ChannelList channelsData={channelsData} query={query} />
+          {channelsData && <ChannelList channelsData={channelsData} query={query} />}
         </>
       )}
-    </>
+    </MainStoreProvider>
   );
 };
 

src/components/ChannelCreatorBox.tsx

@@ -1,21 +1,29 @@
-import { ReactNode } from 'react';
+'use client';
 
+import { getNoChannelText } from '@/utils/getNoChannelText';
 import { PAGE_ROUTE } from '@/utils/route';
 import { Plus } from 'lucide-react';
 import Link from 'next/link';
+import { useSession } from 'next-auth/react';
 
 import { Button } from './ui/button';
 
 interface ChannelCreatorBoxProps {
-  page?: string;
-  children: ReactNode;
+  query?: string | undefined;
 }
 
-const ChannelCreatorBox = ({ page = 'main', children }: ChannelCreatorBoxProps) => {
+const ChannelCreatorBox = ({ query }: ChannelCreatorBoxProps) => {
+  const { data: session } = useSession();
+  const username = session?.user?.name ?? undefined;
+
+  const content = getNoChannelText(query, username);
+
   return (
     <div className="flex h-[350px] w-[280px] flex-col items-center justify-center gap-48 rounded-lg border border-dashed border-main-skyblue small-medium tablet:h-[350px] tablet:w-[532px] tablet:base-medium desktop:h-[400px] desktop:w-[800px]">
       <div className="flex flex-col items-center gap-12 text-center">
-        {children}
+        {content && content.text1}
+        <br />
+        {content && content.text2}
         <div className="flex w-full flex-col items-center gap-4">
           <Button
             variant="active"
@@ -25,7 +33,7 @@ const ChannelCreatorBox = ({ page = 'main', children }: ChannelCreatorBoxProps)
             <Plus width={20} height={20} strokeWidth={2} />
             채널 생성
           </Button>
-          {page === 'search' && (
+          {query && (
             <Link
               href={PAGE_ROUTE.HOME}
               className="flex h-[48px] w-[159px] items-center justify-center rounded-lg text-neutral-200 base-medium hover:bg-neutral-500 tablet:h-[54px] tablet:w-[220px] desktop:h-[58px] desktop:w-[240px]"

src/components/Header.tsx

@@ -28,7 +28,7 @@ function Header() {
   };
 
   return (
-    <header className="flex h-[68px] w-full min-w-[375px] items-center justify-between border-b-1 border-neutral-400 px-5 tablet:min-h-[76px] tablet:px-10 desktop:min-h-[84px]">
+    <header className="flex min-h-[68px] w-full min-w-[375px] items-center justify-between border-b-1 border-neutral-400 px-5 tablet:min-h-[76px] tablet:px-10 desktop:min-h-[84px]">
       <Link
         href={PAGE_ROUTE.HOME}
         className="relative h-[28px] w-[92px] tablet:h-[32px] tablet:w-[105px] desktop:h-[36px] desktop:w-[120px]"

src/components/SearchBar.tsx

@@ -23,7 +23,7 @@ const SearchBar = ({ initialQuery = '', handleSearch, placeholder }: SearchBarPr
 
   const handleDelete = () => {
     setSearchQuery('');
-    router.replace(PAGE_ROUTE.HOME);
+    router.push(PAGE_ROUTE.HOME);
   };
 
   const handleSubmit = (event: React.FormEvent<HTMLFormElement | HTMLButtonElement>) => {
@@ -37,7 +37,7 @@ const SearchBar = ({ initialQuery = '', handleSearch, placeholder }: SearchBarPr
     if (handleSearch) {
       handleSearch(searchQuery);
     } else {
-      router.replace(PAGE_ROUTE.SEARCH(searchQuery));
+      router.push(PAGE_ROUTE.SEARCH(searchQuery));
     }
   };
 

src/lib/fetcher/index.ts

@@ -1,4 +1,4 @@
-import { merge } from 'lodash';
+import merge from 'lodash/merge';
 import qs from 'qs';
 
 type FetcherRequestInit = Omit<RequestInit, 'method'>;

src/providers/main-store-provider.tsx

@@ -0,0 +1,33 @@
+'use client';
+
+import { ReactNode, createContext, useContext, useRef } from 'react';
+
+import { CreateMainStoreType, createMainStore } from '@/stores/useMainStore';
+import { useStore } from 'zustand';
+
+export type MainStoreApi = ReturnType<typeof createMainStore>;
+
+export const MainStoreContext = createContext<MainStoreApi | undefined>(undefined);
+
+export interface MainStoreProviderProps {
+  children: ReactNode;
+}
+
+export const MainStoreProvider = ({ children }: MainStoreProviderProps) => {
+  const storeRef = useRef<MainStoreApi>();
+  if (!storeRef.current) {
+    storeRef.current = createMainStore();
+  }
+
+  return <MainStoreContext.Provider value={storeRef.current}>{children}</MainStoreContext.Provider>;
+};
+
+export const useMainStore = <T,>(selector: (store: CreateMainStoreType) => T): T => {
+  const mainStoreContext = useContext(MainStoreContext);
+
+  if (!mainStoreContext) {
+    throw new Error('useMainStore은 반드시 MainStoreProvider 안에서 사용해야 합니다.');
+  }
+
+  return useStore(mainStoreContext, selector);
+};