Merge pull request #96 from miind-palace/dev

Dev into Main

.eslintrc.json

@@ -1,4 +1,11 @@
 {
-  "plugins": ["prettier"],
-  "extends": ["next", "plugin:prettier/recommended", "prettier"] 
+  "plugins": [
+    "prettier"
+  ],
+  "extends": [
+    "next",
+    "plugin:prettier/recommended",
+    "prettier",
+    "plugin:storybook/recommended"
+  ]
 }

.github/ISSUE_TEMPLATE/feature_request.md

@@ -6,14 +6,14 @@ labels: ''
 assignees: ''
 ---
 
-# Feature
+## Feature
 <!--어떠한 기능을 구현할 것인지 요약하여 서술해주세요-->
 
-# Description
-<!--Epic의 내용을 조금 더 상세히 설명해주세요.-->
+## Description
+<!--Feature의 내용을 조금 더 상세히 설명해주세요.-->
 
-# To do list
+## To do list
 <!--작업 목록을 체크박스 형식으로 작성해주세요.-->
 
-# 추가 컨텍스트
+## 추가 컨텍스트
 <!--기능 요청에 대한 추가 컨텍스트나 스크린샷 등을 추가해주세요.-->

.github/pull_request_template.md

@@ -1,11 +1,11 @@
-### 관련 문서
+## 관련 문서
 <!--노션, Figma, 이슈 링크-->
 <!--Closes 뒤에 본 PR을 머지하면 close할 issue number를 적어주세요.-->
 
-Closes [issue link]
+Closes #issue link
 
-### 변경사항:
+## 변경사항:
 <!--중요 커밋은 링크로 연결해서 추가-->
 
-### 확인할 목록:
+## 확인할 목록:
 <!--리뷰어에게 부탁할 확인 목록 및 테스트 방법을 작성-->

.github/workflows/chromatic.yml

@@ -0,0 +1,26 @@
+# .github/workflows/chromatic.yml
+
+# Workflow name
+name: 'Chromatic'
+
+# Event for the workflow
+on: push
+
+# List of jobs
+jobs:
+  chromatic-deployment:
+    # Operating System
+    runs-on: ubuntu-latest
+    # Job steps
+    steps:
+      - uses: actions/checkout@v1
+      - name: Install dependencies
+        # 👇 Install dependencies with the same package manager used in the project (replace it as needed), e.g. yarn, npm, pnpm
+        run: yarn
+        # 👇 Adds Chromatic as a step in the workflow
+      - name: Publish to Chromatic
+        uses: chromaui/action@v1
+        # Chromatic GitHub Action options
+        with:
+          # 👇 Chromatic projectToken, refer to the manage page to obtain it.
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}

.gitignore

@@ -34,4 +34,7 @@ yarn-error.log*
 *.tsbuildinfo
 next-env.d.ts
 
-.env
+.env
+
+.env.development
+.env.production

.storybook/main.ts

@@ -0,0 +1,19 @@
+import type { StorybookConfig } from '@storybook/nextjs'
+
+const config: StorybookConfig = {
+  stories: ['../**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-onboarding',
+    '@storybook/addon-interactions',
+  ],
+  framework: {
+    name: '@storybook/nextjs',
+    options: {},
+  },
+  docs: {
+    autodocs: true,
+  },
+}
+export default config

.storybook/preview.ts

@@ -0,0 +1,15 @@
+import type { Preview } from '@storybook/react'
+
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: '^on[A-Z].*' },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+  },
+}
+
+export default preview

components/Card.tsx

@@ -2,53 +2,26 @@ import { forwardRef } from 'react'
 import styled from '@emotion/styled'
 
 import { MemoryType } from '@/pages/memory-list'
-import CardPlayButton from './button/CardPlayButton'
+import CardPlayButton from './common/Button/CardPlayButton'
 
 import makeYouTubeVideoId from '@/lib/utils/makeYouTubeVideoId'
-import useControlModal from '@/lib/hooks/useControlModal'
-import MemoryDetail from './MemoryDetail'
-import Modal from './Modal'
-
 import createdAtToTitleDate from '@/lib/utils/createdAtToTitleDate'
 
 type CardProps = {
   memory: MemoryType
 } & React.ComponentProps<'div'>
 
 const Card = forwardRef<HTMLDivElement, CardProps>(({ memory }, ref) => {
-  const { isOpen, handleCloseModal, handleOpenModal } = useControlModal()
-  const handleRemoveMemory = async (id: number) => {
-    const response = await fetch(`${process.env.NEXT_PUBLIC_SERVER_DEFAULT_END_POINT}post/delete?postId=${id}`)
-    const data = await response.json()
-  }
-  const convertedTitle = createdAtToTitleDate(memory.createdAt)
-  const slicedVideoId =
-    !memory.videoId.includes('youtu.be/') && !memory.videoId.includes('youtube.com')
-      ? memory.videoId
-      : makeYouTubeVideoId(memory.videoId)
-
   return (
     <>
-      {isOpen && memory && (
-        <Modal onClose={handleCloseModal}>
-          <MemoryDetail
-            createdAt={convertedTitle}
-            backgroundImage={memory.backgroundImage}
-            videoId={slicedVideoId}
-            text={memory.text}
-            onClickCloseModal={handleCloseModal}
-            onClickRemoveMemory={() => handleRemoveMemory(memory.id)}
-          />
-        </Modal>
-      )}
       <S.CardComponentContainer ref={ref} backgroundImage={memory.backgroundImage}>
         {!!memory.videoId && (
           <S.CardComponentPlayerWrapper>
-            <CardPlayButton videoId={slicedVideoId} />
+            <CardPlayButton videoId={makeYouTubeVideoId(memory.videoId) || memory.videoId} />
           </S.CardComponentPlayerWrapper>
         )}
-        <S.CardComponentWrapper onClick={() => handleOpenModal()}>
-          <S.CardComponentTitle>{convertedTitle}</S.CardComponentTitle>
+        <S.CardComponentWrapper>
+          <S.CardComponentTitle>{createdAtToTitleDate(memory.createdAt)}</S.CardComponentTitle>
           <S.CardComponentDesc>{memory.text}</S.CardComponentDesc>
         </S.CardComponentWrapper>
       </S.CardComponentContainer>

components/CheckEmailForm/CheckEmailForm.tsx

@@ -0,0 +1,70 @@
+import { ChangeEvent, FormEvent } from 'react'
+import styled from '@emotion/styled'
+import Input from '@/components/common/Input/Input'
+import BasicButton from '../common/Button/BasicButton'
+import Spacing from '../common/Spacing/Spacing'
+import { axiosHttp } from '@/lib/utils/httpCore'
+import { validateEmail } from '@/lib/utils/validateUserInfo'
+
+interface CheckEmailFormProps {
+  email: string
+  onChangeEmail: (e: ChangeEvent<HTMLInputElement>) => void
+  goNextStep: () => void
+}
+
+export default function CheckEmailForm({ email, onChangeEmail, goNextStep }: CheckEmailFormProps) {
+  const checkValidateEmail = async (email: string) => {
+    const { data } = await axiosHttp.post(`/member/mailCheck?memberEmail=${email}`)
+    const result = {
+      ...data,
+    }
+    return result
+  }
+
+  const handleValidateEmail = async (e: FormEvent) => {
+    e.preventDefault()
+    console.log('clicked!')
+
+    // 이메일 형식 체크 로직
+    const isValidEmail = validateEmail(email)
+    if (!isValidEmail) {
+      alert('이메일 형식이 올바르지 않습니다.')
+      return
+    }
+
+    // 이메일 중복 검증 로직
+    const { duplicated, message } = await checkValidateEmail(email)
+    if (duplicated) {
+      alert(message)
+      return
+    }
+
+    alert('사용할 수 있는 이메일입니다.')
+    goNextStep()
+  }
+
+  return (
+    <Wrapper>
+      <form onSubmit={handleValidateEmail} autoComplete="off">
+        <Spacing size={20} />
+        <Input
+          inputLabel="Email"
+          id="email"
+          type="text"
+          name="email"
+          colorType="PENETRATED_WHITE"
+          onChange={onChangeEmail}
+        />
+        <Spacing size={10} />
+        <BasicButton type="submit">이메일 중복 확인</BasicButton>
+      </form>
+    </Wrapper>
+  )
+}
+
+const Wrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+`
+
+const AVAILABLE_EMAIL_MSG = '사용가능한 이메일입니다!'