fix: 배포 시 production모드 읽지 못하는 문제 수정

.github/workflows/deploy.yml

@@ -17,7 +17,7 @@ jobs:
         uses: actions/checkout@v3
 
       - name: Inject .env file
-        run: echo "${{ secrets.FRONTEND_ENV }}" > ./.env
+        run: echo "${{ secrets.FRONTEND_ENV }}" > ./.env.production
 
       - name: Set up Docker Buildx
         uses: docker/setup-buildx-action@v2

.gitignore

@@ -1,6 +1,7 @@
 .DS_Store
 node_modules
 .env
+.env.*
 *storybook.log
 .next
 

Dockerfile

@@ -9,4 +9,6 @@ RUN npm i pm2 -g
 
 COPY . .
 
+RUN npm run build:prod
+
 CMD ["npm", "run", "serve"]

next.config.js

@@ -3,7 +3,9 @@ const nextConfig = {
   images: {
     domains: ['localhost', 'via.placeholder.com', 'picsum.photos', 'i.namu.wiki'],
   },
-
+  eslint: {
+    ignoreDuringBuilds: true,
+  },
   async rewrites() {
     return [
       {

package.json

@@ -9,6 +9,7 @@
     "serve:kill": "pm2 kill",
     "serve:monit": "pm2 monit",
     "build:dev": "env-cmd -f .env next build",
+    "build:prod": "env-cmd -f .env.production next build",
     "storybook": "storybook dev -p 6006",
     "dev:mock": "npx tsx watch src/mocks/server/index.ts",
     "build-storybook": "storybook build"
@@ -26,6 +27,7 @@
   "dependencies": {
     "@tanstack/react-query": "^5.51.23",
     "axios": "^1.7.2",
+    "dotenv": "^16.4.5",
     "next": "^14.2.3",
     "react-cookie": "^7.1.4",
     "react-fast-marquee": "^1.6.5",

server.js

@@ -1,12 +1,16 @@
 // const https = require('https');
 const http = require('http');
+const dotenv = require('dotenv');
 const fs = require('fs');
 
 const { parse } = require('url');
 
 const next = require('next');
 
+dotenv.config();
+
 const isDev = process.env.NEXT_PUBLIC_NODE_ENV !== 'production';
+
 const PORT = 3000;
 const app = next({ dev: isDev, hostname: 'localhost', port: PORT });
 const handle = app.getRequestHandler();
@@ -34,6 +38,6 @@ app.prepare().then(() => {
     })
     .listen(PORT, err => {
       if (err) throw err;
-      console.log(`running server on https://localhost:${PORT}`);
+      console.log(`running server on http://localhost:${PORT}`);
     });
 });

src/app/auth/redirect/google/layout.tsx

@@ -0,0 +1,5 @@
+import { PropsWithChildren, Suspense } from 'react';
+
+export default function Layout({ children }: Readonly<PropsWithChildren>) {
+  return <Suspense fallback={<div></div>}>{children}</Suspense>;
+}

src/app/domain/[id]/page.tsx

@@ -51,7 +51,7 @@ const DomainPage = async ({ params }: DomainPageProps) => {
 
 export default DomainPage;
 
-export const getDomainPageData = async (id: string) => {
+const getDomainPageData = async (id: string) => {
   const response = await GET(`/domainData/${id}`);
   return response;
 };

src/app/main/layout.tsx

@@ -1,5 +1,6 @@
 import MainListTap from '@/components/ListTap/MainListTap';
 import MainPageHeader from '@/components/Header/MainPageHeader';
+import { Suspense } from 'react';
 
 export default async function MainPageLayout({
   children,
@@ -11,7 +12,9 @@ export default async function MainPageLayout({
     <>
       <MainPageHeader />
       <div className='flex flex-col w-content'>
-        <MainListTap tabData={tabApiData} />
+        <Suspense fallback={<div></div>}>
+          <MainListTap tabData={tabApiData} />
+        </Suspense>
         <div className='flex justify-center w-full h-full'>{children}</div>
       </div>
     </>

src/app/mypage/subscribe/page.tsx

@@ -8,6 +8,7 @@ interface SubscribeDataType {
   id: string;
   name: string;
   type: string;
+  profile: string;
 }
 
 const SubscribePage = async () => {

src/app/onboard/emailList/page.tsx

@@ -2,11 +2,8 @@ import ServiceIcon from '@/assets/icons/ServiceIcon';
 import EmailListInteraction from '@/components/PageInteraction/Onboard/EmailListInteraction';
 import { GET } from '@/network';
 
-interface EmailListProps {
-  userName: string;
-}
-
-const EmailList = async ({ userName = '채현' }: EmailListProps) => {
+const EmailList = async () => {
+  const userName = '채현';
   const incomingSenders = await getIncomingSenders();
   const incomingSenders2 = await getIncomingSenders2();
   return (

src/app/onboard/interest/page.tsx

@@ -1,12 +1,8 @@
 import { getInterestList } from '@/api/onboard';
 import InterestInteraction from '@/components/PageInteraction/Onboard/InterestInteraction';
 
-interface InterestProps {
-  userName: string;
-}
-
-const Interest = async ({ userName = '채현' }: InterestProps) => {
-  // const interestList = await getInterestList();
+const Interest = async () => {
+  const userName = '채현';
 
   const interestList = [
     {

src/app/onboard/page.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import ServiceIcon from '@/assets/icons/ServiceIcon';
-import Carousel from '@/components/Carousel/Carousel';
+// import Carousel from '@/components/Carousel/Carousel';
 import Image from 'next/image';
 import Link from 'next/link';
 import { GOOGLE_AUTH_API_URL } from '@/utils/constants/api/api';
@@ -17,35 +17,6 @@ const OnBoard = () => {
         </span>
         <span className='text-black text-h1'>방치되는 유익한 메일을 큐레이팅해요</span>
       </span>
-      <Carousel width={603.75} height={350} length={3}>
-        <div className='flex flex-col items-center justify-center'>
-          <Carousel.Wrapper>
-            <Carousel.Item index={0}>
-              {/* child img tag에 object-cover w-full h-full 속성 적용 */}
-              <img
-                className='object-cover w-full h-full'
-                src='https://i.namu.wiki/i/8i-B9u3OUzEhUR1amZyU_PAMsp58lPIRpNvxPCy_xgyw9VYS3t13rbLEBgINOU4QoAheMcnfsWV1T3So58SXwnCdUF8V-x-X6yCF_fdBMYNPlplTK0XNDSPW84V1c4mtGKWm07hiTGTKPScRDkVKEEAZWWlHqNHgck2fD9ELErQ.webp'
-              />
-            </Carousel.Item>
-            <Carousel.Item index={1}>
-              <img
-                className='object-cover w-full h-full'
-                src='https://i.namu.wiki/i/8i-B9u3OUzEhUR1amZyU_PAMsp58lPIRpNvxPCy_xgyw9VYS3t13rbLEBgINOU4QoAheMcnfsWV1T3So58SXwnCdUF8V-x-X6yCF_fdBMYNPlplTK0XNDSPW84V1c4mtGKWm07hiTGTKPScRDkVKEEAZWWlHqNHgck2fD9ELErQ.webp'
-              />
-            </Carousel.Item>
-            <Carousel.Item index={2}>
-              <img
-                className='object-cover w-full h-full'
-                src='https://i.namu.wiki/i/8i-B9u3OUzEhUR1amZyU_PAMsp58lPIRpNvxPCy_xgyw9VYS3t13rbLEBgINOU4QoAheMcnfsWV1T3So58SXwnCdUF8V-x-X6yCF_fdBMYNPlplTK0XNDSPW84V1c4mtGKWm07hiTGTKPScRDkVKEEAZWWlHqNHgck2fD9ELErQ.webp'
-              />
-            </Carousel.Item>
-          </Carousel.Wrapper>
-          <div className='text-body2'>당신의 이메일 함 속 유용한 이메일을 보여줄게요</div>
-          <div style={{ width: '48px', paddingTop: '40px' }}>
-            <Carousel.Dots imageLength={3} size={8} selectedColor='green' unSelectedColor='lightgrey' />
-          </div>
-        </div>
-      </Carousel>
 
       <Link href={GOOGLE_AUTH_API_URL}>
         <Image className='cursor-pointer' src='./googleLogin.svg' alt='google login' width={350} height={64} />

src/app/page.tsx

@@ -5,18 +5,19 @@ import { useEffect, useState, useRef } from 'react';
 import Landing1 from '@/app/landingpage/Landing1';
 import Landing2 from '@/app/landingpage/Landing2/index';
 import Landing3 from '@/app/landingpage/Landing3';
-import Landing4 from './landingpage/Landing4/index';
-import Landing7 from './landingpage/Landing7';
-import Landing8 from './landingpage/Landing8/index';
+import Landing4 from '@/app/landingpage/Landing4/index';
+import Landing7 from '@/app/landingpage/Landing7';
+import Landing8 from '@/app/landingpage/Landing8/index';
 import Landing9 from '@/app/landingpage/Landing9';
-import Landing5 from './landingpage/Landing5';
-import Landing6 from './landingpage/Landing6';
+import Landing5 from '@/app/landingpage/Landing5';
+import Landing6 from '@/app/landingpage/Landing6';
 
 export default function Home() {
   const [backgroundFill, setBackgroundFill] = useState<'black' | 'white'>('black');
   const landing1Ref = useRef<HTMLDivElement>(null);
+
   useEffect(() => {
-    if (typeof window === 'undefined' || !landing1Ref.current) return;
+    if (!landing1Ref.current) return;
 
     const observer = new IntersectionObserver(
       ([entry]) => {
@@ -39,6 +40,7 @@ export default function Home() {
       }
     };
   }, []);
+
   return (
     <main className='flex flex-col items-center w-full h-screen'>
       <LandingPageHeader backgroundFill={backgroundFill} />

src/stories/EmailSenderButton.stories.tsx

@@ -27,7 +27,6 @@ type Story = StoryObj<typeof meta>;
 export const BeforeRegister: Story = {
   args: {
     title: 'LinkedIn 채용공고 알림',
-    email: '[email protected]',
     tag: '채용',
     ChildIcon: <LinkedInIcon width={48} disabled={true} />,
     type: 'subscribe',
@@ -39,7 +38,6 @@ export const BeforeRegister: Story = {
 export const AfterRegister: Story = {
   args: {
     title: 'LinkedIn 채용공고 알림',
-    email: '[email protected]',
     tag: '채용',
     ChildIcon: <LinkedInIcon width={48} />,
     type: 'subscribe',
@@ -51,7 +49,6 @@ export const AfterRegister: Story = {
 export const BeforeSpam: Story = {
   args: {
     title: 'LinkedIn 채용공고 알림',
-    email: '[email protected]',
     tag: '채용',
     ChildIcon: <LinkedInIcon width={48} disabled={true} />,
     type: 'spam',
@@ -63,7 +60,6 @@ export const BeforeSpam: Story = {
 export const AfterSpam: Story = {
   args: {
     title: 'LinkedIn 채용공고 알림',
-    email: '[email protected]',
     tag: '채용',
     ChildIcon: <LinkedInIcon width={48} disabled={false} />,
     type: 'spam',

src/stories/Header.stories.ts

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { Header } from '../components/Header/Header';
+import Header from '../components/Header/OnboardHeader';
 
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
 const meta = {

src/utils/constants/api/api.ts

@@ -1,7 +1,5 @@
 export const PROD = process.env.NODE_ENV === 'production';
 
-export const BASE_URL = PROD
-  ? `${window.location.protocol}//${process.env.NEXT_PUBLIC_API_URL}`
-  : 'http://localhost:3000';
+export const BASE_URL = PROD ? `http://${process.env.NEXT_PUBLIC_API_URL}` : 'http://localhost:3000';
 
 export const GOOGLE_AUTH_API_URL = `https://accounts.google.com/o/oauth2/v2/auth?client_id=${process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID}&response_type=code&redirect_uri=${BASE_URL}/${process.env.NEXT_PUBLIC_GOOGLE_REDIRECT_URI}&scope=https%3A//www.googleapis.com/auth/userinfo.profile&access_type=offline`;