[#182] 디테일 모달 수정

packages/app/src/features/modal/hooks/index.ts

@@ -1 +1,2 @@
 export { default as useModal } from './useModal'
+export { default as usePortal } from './usePortal'

packages/app/src/features/modal/hooks/useModal.tsx

@@ -1,11 +1,14 @@
 import { close, show } from '@store/modalSlice'
 import { ReactElement } from 'react'
 import { useDispatch } from 'react-redux'
+import { useRouter } from 'next/router'
 
 const useModal = () => {
+  const router = useRouter()
   const dispatch = useDispatch()
 
   const onClose = () => {
+    router.push('/', '/')
     dispatch(close())
   }
 

packages/app/src/features/modal/hooks/usePortal.tsx

@@ -0,0 +1,49 @@
+import { useEffect, useState, MouseEvent } from 'react'
+import { useRouter } from 'next/router'
+import { useDispatch } from 'react-redux'
+import { close } from '@store/modalSlice'
+
+const usePortal = () => {
+  const router = useRouter()
+  const [isCSR, setIsCSR] = useState(false)
+  const dispatch = useDispatch()
+
+  useEffect(() => {
+    setIsCSR(true)
+  }, [])
+
+  useEffect(() => {
+    document.body.style.cssText = `
+      position: fixed; 
+      top: -${window.scrollY}px;
+      width: 100%;`
+    return () => {
+      const scrollY = document.body.style.top
+      document.body.style.cssText = ''
+      window.scrollTo(0, -parseInt(scrollY))
+    }
+  }, [])
+
+  if (typeof window === 'undefined') return null
+  if (!isCSR) return null
+
+  const portal = document.getElementById('modal')
+  if (!portal) throw new Error('Not found modal')
+
+  const onClick = (e: MouseEvent<HTMLDivElement>) => {
+    e.stopPropagation()
+  }
+
+  const onClose = () => {
+    router.push('/', '/')
+    dispatch(close())
+  }
+
+  return {
+    onClick,
+    onClose,
+    portal,
+  }
+}
+
+export default usePortal

packages/app/src/features/modal/portals/BlurPortal/index.tsx

@@ -0,0 +1,28 @@
+import { usePortal } from '@features/modal/hooks'
+import ReactDOM from 'react-dom'
+import { cloneElement, ReactElement } from 'react'
+import * as S from './style'
+
+interface Props {
+  children: ReactElement
+}
+
+/**
+ * 배경은 blur로 되어 있음
+ */
+const BlurPortal = ({ children }: Props) => {
+  const portalValue = usePortal()
+
+  if (!portalValue) return <></>
+
+  const { onClick, onClose, portal } = portalValue
+
+  return ReactDOM.createPortal(
+    <S.Wrapper onClick={onClose}>
+      {cloneElement(children, { onClick })}
+    </S.Wrapper>,
+    portal
+  )
+}
+
+export default BlurPortal

packages/app/src/features/modal/portals/BlurPortal/style.ts

@@ -0,0 +1,14 @@
+import styled from '@emotion/styled'
+
+export const Wrapper = styled.div`
+  position: fixed;
+  z-index: 1000;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  background: rgba(0, 0, 0, 0.25);
+  backdrop-filter: blur(1.25rem);
+  overflow-y: scroll;
+`

packages/app/src/features/modal/portals/ModalPortal/index.tsx

@@ -1,58 +1,22 @@
-import { close } from '@store/modalSlice'
-import {
-  cloneElement,
-  useEffect,
-  useState,
-  MouseEvent,
-  ReactElement,
-} from 'react'
+import { usePortal } from '@features/modal/hooks'
+import { cloneElement, ReactElement } from 'react'
 import ReactDOM from 'react-dom'
-import { useDispatch } from 'react-redux'
 import * as S from './style'
 
 interface Props {
   children: ReactElement
 }
 
 const ModalPortal = ({ children }: Props) => {
-  const [isCSR, setIsCSR] = useState(false)
-  const dispatch = useDispatch()
+  const portal = usePortal()
 
-  useEffect(() => {
-    setIsCSR(true)
-  }, [])
-
-  useEffect(() => {
-    document.body.style.cssText = `
-      position: fixed; 
-      top: -${window.scrollY}px;
-      width: 100%;`
-    return () => {
-      const scrollY = document.body.style.top
-      document.body.style.cssText = ''
-      window.scrollTo(0, -parseInt(scrollY))
-    }
-  }, [])
-
-  if (typeof window === 'undefined') return <></>
-  if (!isCSR) return <></>
-
-  const portal = document.getElementById('modal')
-  if (!portal) throw new Error('Not found modal')
-
-  const onClick = (e: MouseEvent<HTMLDivElement>) => {
-    e.stopPropagation()
-  }
-
-  const onClose = () => {
-    dispatch(close())
-  }
+  if (!portal) return <></>
 
   return ReactDOM.createPortal(
-    <S.Wrapper onClick={onClose}>
-      {cloneElement(children, { onClick })}
+    <S.Wrapper onClick={portal.onClose}>
+      {cloneElement(children, { onClick: portal.onClick })}
     </S.Wrapper>,
-    portal
+    portal.portal
   )
 }
 

packages/app/src/features/modal/portals/index.ts

@@ -1 +1,2 @@
 export { default as ModalPortal } from './ModalPortal'
+export { default as BlurPortal } from './BlurPortal'

packages/app/src/features/register/type/PrizeType.d.ts

@@ -1,5 +1,5 @@
 interface PrizeType {
   name: string
-  kind: string
+  type: string
   date: string
 }

packages/app/src/features/register/type/RegisterFormType.ts

@@ -17,6 +17,12 @@ interface RegisterFormType {
   prizes: PrizeType[]
 }
 
+interface PrizeType {
+  name: string
+  kind: string
+  date: string
+}
+
 interface LanguageCertificateType {
   languageCertificateName: string
   score: string

packages/app/src/features/student/atoms/FilterHeader/index.tsx

@@ -1,4 +1,4 @@
-import useModal from '@features/student/hooks/useModal'
+import { useModal } from '@features/modal/hooks'
 import * as Icon from '@sms/shared/src/icons'
 
 import * as S from './style'
@@ -8,7 +8,7 @@ interface Props {
 }
 
 const FilterHeader = ({ reset }: Props) => {
-  const { onClose } = useModal('filter')
+  const { onClose } = useModal()
 
   return (
     <S.Wrapper>

packages/app/src/features/student/atoms/PrizesDetail/index.tsx

@@ -0,0 +1,26 @@
+import * as S from './style'
+
+interface Props {
+  prizes?: PrizeType[]
+}
+
+const PrizesDetail = ({ prizes }: Props) => {
+  if (!prizes?.length) return null
+
+  return (
+    <S.Wrapper>
+      <S.Title>수상</S.Title>
+      {prizes.map((prize, idx) => (
+        <S.Prize key={idx}>
+          <S.PrizeTop>
+            <S.PrizeTitle>{prize.name}</S.PrizeTitle>
+            <S.PrizeDate>{prize.date}</S.PrizeDate>
+          </S.PrizeTop>
+          <S.PrizeInfo>{prize.type}</S.PrizeInfo>
+        </S.Prize>
+      ))}
+    </S.Wrapper>
+  )
+}
+
+export default PrizesDetail

packages/app/src/features/student/atoms/PrizesDetail/style.ts

@@ -0,0 +1,41 @@
+import styled from '@emotion/styled'
+
+export const Wrapper = styled.div`
+  padding: 1.5rem 2.5rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+
+  @media (max-width: 34rem) {
+    padding: 1.25rem 1.5rem;
+  }
+`
+
+export const Title = styled.h3`
+  ${({ theme }) => theme.title1}
+`
+
+export const Prize = styled.section`
+  background: var(--N10);
+  padding: 0.5rem;
+  border-radius: 0.5rem;
+`
+
+export const PrizeTop = styled.div`
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 0.5rem;
+`
+
+export const PrizeTitle = styled.h3`
+  ${({ theme }) => theme.body1}
+`
+
+export const PrizeDate = styled.p`
+  ${({ theme }) => theme.caption2}
+`
+
+export const PrizeInfo = styled.p`
+  ${({ theme }) => theme.caption2}
+  color: var(--N40);
+`

packages/app/src/features/student/atoms/ProfileDetail/index.tsx

@@ -0,0 +1,70 @@
+import { useState } from 'react'
+import * as SVG from '@sms/shared/src/assets/svg'
+import * as S from './style'
+
+interface Props {
+  major?: string
+  name?: string
+  grade?: number
+  classNum?: number
+  number?: number
+  techStack?: string[]
+  introduce?: string
+  profileImg?: string
+}
+
+const ProfileDetail = ({
+  major,
+  name,
+  grade,
+  number,
+  profileImg,
+  classNum,
+  introduce,
+  techStack,
+}: Props) => {
+  const [isError, setIsError] = useState<boolean>(false)
+
+  return (
+    <S.Wrapper>
+      <S.Left>
+        <S.Major>{major}</S.Major>
+
+        <S.Name>{name?.replace('**', '소금')}</S.Name>
+
+        {grade && classNum && number && (
+          <S.SchoolInfo>
+            {grade}학년 {classNum}반 {number}번 • 소프트웨어 개발과
+          </S.SchoolInfo>
+        )}
+
+        <S.Tags>
+          {techStack?.map((stack, idx) => (
+            <S.Tag key={idx}>{stack}</S.Tag>
+          ))}
+        </S.Tags>
+
+        <S.Introduce>
+          <S.IntroduceLabel>자기소개</S.IntroduceLabel>
+          {introduce}
+        </S.Introduce>
+      </S.Left>
+
+      <S.Right>
+        {!isError && profileImg ? (
+          <S.ProfileImage
+            src={profileImg}
+            alt='profile image'
+            onError={() => setIsError(true)}
+          />
+        ) : (
+          <S.TemeporaryImage>
+            <SVG.Person />
+          </S.TemeporaryImage>
+        )}
+      </S.Right>
+    </S.Wrapper>
+  )
+}
+
+export default ProfileDetail