[FE] issue243: 링크 모음 CRUD + 링크 미리보기 구현

frontend/.storybook/main.js

@@ -1,4 +1,5 @@
 const { resolve } = require('path');
+const { ESBuildMinifyPlugin } = require('esbuild-loader');
 
 module.exports = {
   stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
@@ -34,27 +35,27 @@ module.exports = {
       '@mocks': resolve(__dirname, '../src/mocks'),
     };
 
-    config.module.rules[0].use[0].options.presets = [
-      require.resolve('@babel/preset-env'),
-      [
-        require.resolve('@babel/preset-react'),
-        {
-          runtime: 'automatic',
-          importSource: '@emotion/react',
+    config.module.rules = [
+      ...config.module.rules,
+      {
+        test: /\.(ts|tsx)$/,
+        exclude: /node_modules/,
+        loader: 'esbuild-loader',
+        options: {
+          loader: 'tsx',
+          target: 'es2022',
         },
-      ],
+      },
+      {
+        test: /\.(png|jpg|jpeg)$/i,
+        type: 'asset/resource',
+      },
     ];
 
-    config.module.rules[0].use[0].options.plugins = [
-      [
-        require.resolve('@emotion/babel-plugin'),
-        {
-          sourceMap: true,
-          autoLabel: 'dev-only',
-          labelFormat: '[local]',
-          cssPropOptimization: true,
-        },
-      ],
+    config.optimization.minimizer = [
+      new ESBuildMinifyPlugin({
+        target: 'es2020',
+      }),
     ];
 
     return config;

frontend/.storybook/preview-body.html

@@ -0,0 +1,2 @@
+<div id="modal"></div>
+<!-- 스토리북에서 Portal 사용을 위해 필요-->

frontend/cypress/e2e/CreateStudyFormValidation.cy.tsx

@@ -24,18 +24,20 @@ describe('스터디 개설 페이지 폼 유효성 테스트', () => {
 
   const minText = 'a';
   const maxText30 = 'abcdefghijklmnopqrstuvwxyzabcd';
-  const redOutlineCss = 'rgb(255, 0, 0) solid 2px';
+  const redBorderCss = '1px solid rgb(255, 0, 0)';
+  const border = 'border';
+
   it(`스터디 제목은 최소 ${TITLE_LENGTH.MIN.VALUE}글자에서 최대 ${TITLE_LENGTH.MAX.VALUE}글자까지 입력할 수 있다.`, () => {
     cy.get(`@${studyTitle}`).type(minText);
-    cy.get(`@${studyTitle}`).should('not.have.css', 'outline', redOutlineCss);
+    cy.get(`@${studyTitle}`).should('not.have.css', border, redBorderCss);
 
     cy.get(`@${studyTitle}`).clear().type(maxText30);
-    cy.get(`@${studyTitle}`).should('not.have.css', 'outline', redOutlineCss);
+    cy.get(`@${studyTitle}`).should('not.have.css', border, redBorderCss);
   });
 
   it(`스터디 제목이 ${TITLE_LENGTH.MIN.VALUE}글자 미만이면 입력창 테두리가 빨갛게 된다.`, () => {
     cy.get(`@${studyTitle}`).type(minText).clear();
-    cy.get(`@${studyTitle}`).should('have.css', 'outline', redOutlineCss);
+    cy.get(`@${studyTitle}`).should('have.css', border, redBorderCss);
   });
 
   it(`스터디 제목이 ${TITLE_LENGTH.MAX.VALUE}글자를 초과하면 초과한 글자는 입력되지 않는다.`, () => {
@@ -46,37 +48,37 @@ describe('스터디 개설 페이지 폼 유효성 테스트', () => {
   it(`스터디 제목이 ${TITLE_LENGTH.MIN.VALUE}글자 미만이면 개설하기 버튼을 눌렀을 때 입력창 테두리가 빨갛게 된다.`, () => {
     cy.get(`@${studyTitle}`).type(minText).clear();
     cy.get(`@${submitButton}`).click();
-    cy.get(`@${studyTitle}`).should('have.css', 'outline', redOutlineCss);
+    cy.get(`@${studyTitle}`).should('have.css', border, redBorderCss);
   });
 
   it(`스터디 소개글은 최소 ${DESCRIPTION_LENGTH.MIN.VALUE}글자를 입력할 수 있다.`, () => {
     cy.get(`@${description}`).type(minText);
-    cy.get(`@${description}`).should('not.have.css', 'outline', redOutlineCss);
+    cy.get(`@${description}`).should('not.have.css', border, redBorderCss);
   });
 
   it(`스터디 소개글이 ${DESCRIPTION_LENGTH.MIN.VALUE}글자 미만이면 입력창 테두리가 빨갛게 된다.`, () => {
     cy.get(`@${description}`).type(minText).clear();
-    cy.get(`@${description}`).should('have.css', 'outline', redOutlineCss);
+    cy.get(`@${description}`).should('have.css', border, redBorderCss);
   });
 
   it(`스터디 소개글이 ${DESCRIPTION_LENGTH.MIN.VALUE}글자 미만이면 개설하기 버튼을 눌렀을 때 입력창 테두리가 빨갛게 된다.`, () => {
     cy.get(`@${description}`).type(minText).clear();
     cy.get(`@${submitButton}`).click();
-    cy.get(`@${description}`).should('have.css', 'outline', redOutlineCss);
+    cy.get(`@${description}`).should('have.css', border, redBorderCss);
   });
 
   const maxText50 = maxText30 + '12345678901234567890';
   it(`스터디 한줄 소개는 최소 ${EXCERPT_LENGTH.MIN.VALUE}글자에서 최대 ${EXCERPT_LENGTH.MAX.VALUE}글자까지 입력할 수 있다.`, () => {
     cy.get(`@${excerpt}`).type(minText);
-    cy.get(`@${excerpt}`).should('not.have.css', 'outline', redOutlineCss);
+    cy.get(`@${excerpt}`).should('not.have.css', border, redBorderCss);
 
     cy.get(`@${excerpt}`).clear().type(maxText50);
-    cy.get(`@${excerpt}`).should('not.have.css', 'outline', redOutlineCss);
+    cy.get(`@${excerpt}`).should('not.have.css', border, redBorderCss);
   });
 
   it(`스터디 한줄 소개가 ${EXCERPT_LENGTH.MIN.VALUE}글자 미만이면 입력창 테두리가 빨갛게 된다.`, () => {
     cy.get(`@${excerpt}`).type(minText).clear();
-    cy.get(`@${excerpt}`).should('have.css', 'outline', redOutlineCss);
+    cy.get(`@${excerpt}`).should('have.css', border, redBorderCss);
   });
 
   it(`스터디 한줄 소개가 ${EXCERPT_LENGTH.MAX.VALUE}글자를 초과하면 초과한 글자는 입력되지 않는다.`, () => {
@@ -87,7 +89,7 @@ describe('스터디 개설 페이지 폼 유효성 테스트', () => {
   it(`스터디 소개글이 ${EXCERPT_LENGTH.MIN.VALUE}글자 미만이면 개설하기 버튼을 눌렀을 때 입력창 테두리가 빨갛게 된다.`, () => {
     cy.get(`@${excerpt}`).type(minText).clear();
     cy.get(`@${submitButton}`).click();
-    cy.get(`@${excerpt}`).should('have.css', 'outline', redOutlineCss);
+    cy.get(`@${excerpt}`).should('have.css', border, redBorderCss);
   });
 
   it('스터디 시작 날짜는 필수로 입력해야 한다.', () => {

frontend/env/.env.dev

@@ -1,2 +1,3 @@
-API_URL="https://dev.moamoa.ne.kr"
+API_URL="https://api.dev.moamoa.space"
 CLIENT_ID="cb83d95cd5644436b090"
+LINK_PREVIEW_API_URL="https://api.og.moamoa.space"

frontend/env/.env.local

@@ -1,2 +1,3 @@
 API_URL=""
 CLIENT_ID="cb83d95cd5644436b090"
+LINK_PREVIEW_API_URL="https://api.og.moamoa.space"

frontend/env/.env.prod

@@ -1,2 +1,3 @@
-API_URL="https://moamoa.ne.kr"
+API_URL="https://api.moamoa.space"
 CLIENT_ID="cb83d95cd5644436b090"
+LINK_PREVIEW_API_URL="https://api.og.moamoa.space"