Merge branch 'dev' into feature-046

.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/branch_push.yml

@@ -0,0 +1,35 @@
+name: Vi.No Client Build Test
+
+on: push
+
+jobs:
+  build:
+    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 # 빌드

.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>

package.json

@@ -12,9 +12,11 @@
   "dependencies": {
     "@types/jest": "^29.5.11",
     "@types/node": "^20.11.9",
+    "@types/react-modal": "^3.16.3",
     "axios": "^1.6.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-modal": "^3.16.1",
     "react-router-dom": "^6.21.2",
     "recoil": "^0.7.7",
     "recoil-persist": "^5.1.0",

src/App.tsx

@@ -11,10 +11,14 @@ 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 SearchResult from './pages/SearchResultPage';
 import SignInPage from '@/pages/SignInPage';
 import SignUpPage from '@/pages/SignUpPage';
+import SignUpSuccessPage from '@/pages/SignUpSuccessPage';
+import SocialAccountPage from '@/pages/SocialAccountPage';
 import SummaryPage from '@/pages/SummaryPage';
 
 // Layouts
@@ -52,15 +56,18 @@ const App = () => {
             <>
               <Route path="/sign-in" element={<SignInPage />} />
               <Route path="/sign-up" element={<SignUpPage />} />
+              <Route path="/sign-up/success" element={<SignUpSuccessPage />} />
               <Route path="/find-email" element={<FindEmailPage />} />
               <Route path="/find-password" element={<FindPasswordPage />} />
+              <Route path="/social-account" element={<SocialAccountPage />} />
             </>
           )}
 
           <Route element={<Layout />}>
             {userToken && (
               <>
                 <Route path="/search" element={<SearchPage />} />
+                <Route path="/search/result" element={<SearchResult />} />
                 <Route path="/profile" element={<ProfilePage />} />
               </>
             )}
@@ -71,7 +78,7 @@ const App = () => {
               path="/category/:top_folder/:sub_folder"
               element={<CategoryPage />}
             />
-            <Route path="/summary" element={<SummaryPage />} />
+            <Route path="/summary/:videoId" element={<SummaryPage />} />
             <Route path="/" element={<HomePage />} />
           </Route>
 

src/apis/search.ts

@@ -0,0 +1,12 @@
+import { APIResponse } from '@/models/config/axios';
+import axios from './config/instance';
+import { ResponseSearch } from '@/models/search';
+
+const PREFIX = '/search';
+
+export const searchAPI = (type : string, keyword : string) => {
+    const paramType = type === 'keyword' ? 'keywordName' : 'hashtagName';
+    return axios.get<APIResponse<ResponseSearch>>(PREFIX + `/${type}/`, {
+        params : {[paramType] : keyword}
+    });
+}

src/apis/social-account.ts

@@ -0,0 +1,5 @@
+import axios from './config/instance';
+
+export const kakaoLoginAPI = (token: string) => {
+  return axios.get(`/kakao-login?token=${token}`);
+};

src/apis/user.ts

@@ -1,7 +1,19 @@
 import { APIResponse } from '@/models/config/axios';
-import { LoginRequest, LoginResponse } from '@/models/user';
-import { AlarmResponse } from '@/models/alarm';
-
+import {
+  CheckEmailRequest,
+  CheckEmailResponse,
+  JoinRequest,
+  JoinResponse,
+  LoginRequest,
+  LoginResponse,
+} from '@/models/user';
+import {
+  AlarmResponse,
+  ConfirmAlarmRequest,
+  DeleteAlarmRequest,
+  DeleteAlarmResponse,
+} from '@/models/alarm';
+import { getNicknameResponse } from '@/models/user';
 import axios from './config/instance';
 
 const PREFIX = '/user';
@@ -10,10 +22,23 @@ export const loginAPI = (data: LoginRequest) => {
   return axios.post<APIResponse<LoginResponse>>(PREFIX + '/login', data);
 };
 
-export const getAlarm = () => {
+export const getAlarmAPI = () => {
   return axios.get<APIResponse<AlarmResponse>>(PREFIX + '/alarm');
 };
 
+export const deleteSelectAlarmAPI = (data: DeleteAlarmRequest) => {
+  return axios.delete<APIResponse<DeleteAlarmResponse>>(
+    PREFIX + '/alarm/selectDelete',
+    {
+      data,
+    },
+  );
+};
+
+export const confirmSelectAlarmAPI = (data: ConfirmAlarmRequest) => {
+  return axios.patch(PREFIX + '/alarm/selectedConfirm', data);
+};
+
 export const checkEmailAPI = (data: CheckEmailRequest) => {
   return axios.post<APIResponse<CheckEmailResponse>>(
     PREFIX + '/checkemail',
@@ -22,8 +47,9 @@ export const checkEmailAPI = (data: CheckEmailRequest) => {
 };
 
 export const joinAPI = (data: JoinRequest) => {
-  return axios.post<APIResponse<JoinResponse>>(
-    PREFIX + '/join',
-    data,
-  );
+  return axios.post<APIResponse<JoinResponse>>(PREFIX + '/join', data);
+};
+
+export const getNicknameAPI = () => {
+  return axios.get<APIResponse<getNicknameResponse>>(PREFIX + '/myPage/myInfo');
 };

src/apis/videos.ts

@@ -0,0 +1,13 @@
+import { APIResponse } from '@/models/config/axios';
+import { IVideo, VideoVersionType } from '@/models/video';
+
+import axios from './config/instance';
+
+const PREFIX = '/videos';
+
+export const getVideoAPI = (
+  videoId: string | number,
+  versionId: VideoVersionType = 'revision',
+) => {
+  return axios.get<APIResponse<IVideo>>(PREFIX + `/${videoId}/${versionId}`);
+};