Merge branch 'dev' into feature-050

.ebextensions/yarn.config

@@ -0,0 +1,12 @@
+commands:
+  01_install_node:
+    command: |
+      sudo curl --silent --location https://rpm.nodesource.com/setup_8.x | sudo bash -
+      sudo yum -y install nodejs
+
+  02_install_yarn:
+    # don't run the command if yarn is already installed (file /usr/bin/yarn exists)
+    test: '[ ! -f /usr/bin/yarn ] && echo "Yarn not found, installing..."'
+    command: |
+      sudo wget https://dl.yarnpkg.com/rpm/yarn.repo -O /etc/yum.repos.d/yarn.repo
+      sudo yum -y install yarn

.github/workflows/dev__deploy.yml

@@ -0,0 +1,90 @@
+
+name: Node.js Dev CI/CD
+
+on:
+  pull_request:      # pull request -> merge 가 되었을 때 Github Action 실행!
+    types: [ closed ]
+  workflow_dispatch: # 수동 실행도 가능하도록 함
+
+jobs:
+  build:
+    # pull 요청이 dev에 merge 되었을 때 아래 steps를 실행
+    if: github.event.pull_request.merged == true && github.event.pull_request.base.ref == 'dev'
+
+    runs-on: ubuntu-latest  # 우분투 최신 버전으로 실행
+
+    strategy:
+      matrix:
+        node-version: ['18.x']  # 노드 버전 지정! 여러 개도 가능! ['18.x', '14.x'] 요렇게
+
+    steps:
+      # build 할 코드를 가져옴 (코드 checkout - github에서 제공해주는 checkout@v3 사용)
+      - name: Checkout
+        uses: actions/checkout@v3   
+
+      # Node.js 세팅
+      - name: Set up Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: 'yarn'
+
+      - name: Install Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node-version }}
+
+      # dependencies 설치, test and build
+      - name: Install dependencies
+        run: yarn install   # dependencies 설치 npm ci, npm install 모두 다 됨!
+
+      - name: Run Build
+        run: yarn build # 빌드
+
+      # 배포 패키지 생성
+      - name: Generate deployment package
+        run: |
+          cp -R .platform build
+          cp -R .ebextensions build
+          cp -R dist build
+          cp package.json build/package.json
+          cp package-lock.json build/package-lock.json
+          cp yarn.lock build/yarn.lock
+          cp Procfile build/Procfile
+          cd build
+          zip -r deploy.zip .
+      
+      # 생성한 deploy.zip 파일 내부 확인용!
+      - name: Get Zip Inside
+        run: zipinfo -1 build/deploy.zip
+
+      # 현재 시간 얻기 (Build 시점의 시간 얻기)
+      - name: Get current time
+        uses: 1466587594/get-current-time@v2
+        id: current-time
+        with:
+          format: YYYY-MM-DDTHH-mm-ss
+          utcOffset: "+09:00" # 한국 시간 고려
+
+      # 현재 시간 출력 (위에서 얻은 build 시점의 시간 보여주기)
+      - name: Show Current Time
+        run: echo "CurrentTime=${{steps.current-time.outputs.formattedTime}}"
+        shell: bash 
+
+      # Beanstalk 배포
+      - name: Beanstalk Deploy
+        uses: einaregilsson/beanstalk-deploy@v21
+        with:
+          aws_access_key: ${{secrets.AWS_ACTION_ACCESS_KEY_ID}}
+          aws_secret_key: ${{secrets.AWS_ACTION_SECRET_ACCESS_KEY}}
+          application_name: Vino-client
+          environment_name: Vino-client-env
+          version_label: github-action-${{ steps.current-time.outputs.formattedTime }}  # version_label은 이전에 배포한 label과 중복되면 안됨!
+          use_existing_version_if_available: true
+          region: ap-northeast-2
+          deployment_package: build/deploy.zip
+          wait_for_deployment: false  # 바로 Beanstalk으로 넘어갈 수 있도록 함
+
+      # 그냥 다 했다고 출력하기
+      - name: Deployed!
+        run: echo App deployed to ELB

.platform/nginx/nginx.conf

@@ -0,0 +1,55 @@
+user                    nginx;
+error_log               /var/log/nginx/error.log warn;
+pid                     /var/run/nginx.pid;
+worker_processes        auto;
+worker_rlimit_nofile    33282;
+
+events {
+    use epoll;
+    worker_connections  1024;
+    multi_accept on;
+}
+
+http {
+    include       /etc/nginx/mime.types;
+    default_type  application/octet-stream;
+
+    log_format  main    '$remote_addr - $remote_user [$time_local] "$request" '
+                        '$status $body_bytes_sent "$http_referer" '
+                        '"$http_user_agent" "$http_x_forwarded_for"';
+
+    include       conf.d/*.conf;
+
+    map $http_upgrade $connection_upgrade {
+        default     "upgrade";
+    }
+
+    upstream node {
+        server 127.0.0.1:4173;
+        keepalive 1024;
+    }
+
+    server {
+        listen        80 default_server;
+        listen        [::]:80 default_server;
+
+        location / {
+            proxy_pass          http://node;
+            proxy_http_version  1.1;
+            proxy_set_header    Connection          $connection_upgrade;
+            proxy_set_header    Upgrade             $http_upgrade;
+
+            proxy_set_header    Host                $host;
+            proxy_set_header    X-Real-IP           $remote_addr;
+            proxy_set_header    X-Forwarded-For     $proxy_add_x_forwarded_for;
+        }
+
+        access_log    /var/log/nginx/access.log main;
+
+        gzip                  off;
+        gzip_comp_level       4;
+
+        # Include the Elastic Beanstalk generated locations
+        include conf.d/elasticbeanstalk/healthd.conf;
+    }
+}

Procfile

@@ -0,0 +1 @@
+web: yarn install &&  yarn run preview

build/README.md

@@ -0,0 +1,12 @@
+# ViNo-Client
+
+```bash
+# Install package
+yarn install
+
+# Run dev server
+yarn dev
+
+# Build project
+yarn build
+```

index.html

@@ -17,5 +17,6 @@
     <div id="root"></div>
 
     <script type="module" src="/src/main.tsx"></script>
+    <script src="https://developers.kakao.com/sdk/js/kakao.js"></script>
   </body>
 </html>

src/App.tsx

@@ -11,6 +11,7 @@ import CategoryPage from '@/pages/CategoryPage';
 import FindEmailPage from '@/pages/FindEmailPage';
 import FindPasswordPage from '@/pages/FindPasswordPage';
 import HomePage from '@/pages/HomePage';
+// import GuestPage from './pages/GuestPage';
 import ProfilePage from '@/pages/ProfilePage';
 import SearchPage from '@/pages/SearchPage';
 import SignInPage from '@/pages/SignInPage';

src/components/Home/InsightVideos.tsx

@@ -1,36 +1,32 @@
 import React from 'react';
+
 import { InsightVideosContainer } from '@/styles/HomepageStyle';
-import Videos from '@/components/Home/Videos';
-import { Video } from '@/pages/HomePage';
 
 interface InsightVideosProps {
-  videos: Video[];
   username: string;
   popularHashtags: string[];
 }
 
-const InsightVideos: React.FC<InsightVideosProps> = ({ videos, username, popularHashtags }) => {
-  const formattedHashtags = popularHashtags.map(tag => '#' + tag);
+const InsightVideos: React.FC<InsightVideosProps> = ({
+  username,
+  popularHashtags,
+}) => {
+  const formattedHashtags = popularHashtags.map((tag) => '#' + tag);
 
   return (
     <InsightVideosContainer>
-      <div className='insight-container'>
-        <div className='text-container'>
-          <h2 className='insight-title'>
-            이런 인사이트는 어때요?
-          </h2>
-          <h4 className='insight-subtitle'>
-            {username}님이 많이 찾은 {formattedHashtags.join(', ')} 관련 콘텐츠에요!
+      <div className="insight-container">
+        <div className="text-container">
+          <h2 className="insight-title">이런 인사이트는 어때요?</h2>
+          <h4 className="insight-subtitle">
+            {username}님이 많이 찾은 {formattedHashtags.join(', ')} 관련
+            콘텐츠에요!
           </h4>
         </div>
-        <div className='insight-videos'>
-          <Videos videos={videos}/>
-          <Videos videos={videos}/>
-        </div>
-
+        <div className="insight-videos">{/* <Card /> */}</div>
       </div>
     </InsightVideosContainer>
   );
 };
 
-export default InsightVideos;
+export default InsightVideos;

src/components/Home/ProgressBar.tsx

@@ -0,0 +1,74 @@
+import { useState, useEffect } from 'react';
+import axios from 'axios';
+import { ProgressWrapper } from '@/styles/Progress';
+import theme from '@/styles/theme';
+
+const ProgressBar = () => {
+  // 진행도 상태
+  const [progress, setProgress] = useState(0);
+  // 변환중 상태
+  const [convertingState, setConvertingState] = useState('변환중');
+
+  const handleConvertingBtn = () => {
+    if (convertingState === '변환중') {
+        setConvertingState('다시 시작');
+      } else {
+        setConvertingState('변환중');
+      }
+  }
+
+  useEffect(() => {
+    const updateProgress = async () => {
+        if (convertingState === '변환중') {
+            for (let step = 0; step < 4; step++) {
+                try {
+                    setConvertingState('변환중');
+                // 응답을 받아올 주소 입력
+                const response = await axios.get('');
+
+                if (response.status === 200) {
+                    // 각 단계가 끝날 때마다 프로그레스바 25%씩 증가
+                    setProgress((step + 1) * 25);
+                }
+                } catch (error) {
+                    setConvertingState('변환오류');
+                }
+            }
+        }
+    };
+
+    updateProgress();
+  }, [convertingState]); //convertingState 상태가 변경될 때마다 effect 재실행
+  return (
+    <ProgressWrapper>
+        <div className='progress-bar' style={{ flexDirection: 'column' }}>
+            <div style={{ display: 'flex', alignItems: 'center' }}>
+                <div className='progress'>
+                </div>
+                <div className='converting-state' style={{ 
+                    color: convertingState === '변환오류' ? `${theme.color.red}`: convertingState === '변환중지' ? `${theme.color.gray300}` : `${theme.color.green400}`
+                }}>
+                    {convertingState}
+                </div>
+            </div>
+            <div className='converting-text'>
+                <button className='converting-btn' 
+                        onClick={handleConvertingBtn}
+                        style={{ 
+                            color: convertingState === '변환중' ? theme.color.gray500 : theme.color.gray500, 
+                            backgroundColor: convertingState === '변환중' ? theme.color.gray400 : theme.color.green400 
+                          }}
+                        >
+                    {convertingState === '변환중' ? '변환중지' : '다시 시작' }
+                </button>
+                <div className='converting-percentage'>
+                    {progress}%
+                </div>
+            </div>
+        </div>
+    </ProgressWrapper>
+  );
+
+};
+
+export default ProgressBar;

src/components/Home/RecentVideos.tsx

@@ -1,46 +1,39 @@
-import React from 'react'
-import { RecentVideosContainer, VideoButton, VideosSubtitle, VideosTitle } from '@/styles/HomepageStyle';
-import { Video } from '@/pages/HomePage';
-import Videos from '@/components/Home/Videos';
+import React from 'react';
+import {
+  RecentVideosContainer,
+  VideoButton,
+  VideosSubtitle,
+  VideosTitle,
+} from '@/styles/HomepageStyle';
+// import Card from '../category/Card';
 
-const RecentVideos: React.FC<{ videos: Video[] }>= ({ videos }) => {
-  const videoCount = videos.length;
+import CardImage from '@/assets/empty-video.png';
 
+const RecentVideos: React.FC = () => {
   return (
     <RecentVideosContainer>
-      <div className='container'>
+      <div className="container">
         <VideosTitle>최근 읽은 영상</VideosTitle>
 
         {/* 영상 개수 0개일 때  */}
-        {videoCount === 0 && (
         <>
-          <div className='empty-video'>
-            <img src='/src/assets/empty-video.png' alt='비어있는 비디오 이미지' />
+          <div className="empty-video">
+            <img src={CardImage} alt="비어있는 비디오 이미지" />
           </div>
           <VideosSubtitle>
             처음 방문하셨나요? <br /> 아직 정리해본 영상이 없어요!
           </VideosSubtitle>
           <VideoButton>
-            <h2 className='button-text'>영상 정리해보기</h2>
+            <h2 className="button-text">영상 정리해보기</h2>
           </VideoButton>
         </>
-        )}
 
         {/* 영상 개수 3개 이하일 때  */}
-        {videoCount > 0 && videoCount <= 3 && (
-          <Videos videos={videos}/>
-        )}
 
         {/* 영상 개수 4개 이상일 때 '더보기 버튼' 활성화 & 전체 카드 모두 보여짐 */}
-        {videoCount > 3 && (
-          <>
-
-          </>
-        )}
       </div>
     </RecentVideosContainer>
-
   );
 };
 
-export default RecentVideos;
+export default RecentVideos;