From c10adb304d754e34ce62eac3e0c9013a5182221c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=A0=95=ED=83=9C=EA=B4=80?= <jxorhks86909763@gmail.com>
Date: Sun, 2 Jun 2024 17:00:26 +0900
Subject: [PATCH 01/16] feat: add profile-share

---
 .../app/src/features/global/Header/index.tsx  |  1 -
 .../atoms/ProfileShareModalFooter/index.tsx   | 53 ++++++++++++++
 .../atoms/ProfileShareModalFooter/style.ts    | 47 +++++++++++++
 .../atoms/ProfileShareModalHeader/index.tsx   | 18 +++++
 .../atoms/ProfileShareModalHeader/style.ts    | 29 ++++++++
 .../atoms/ProfileShareModalSection/index.tsx  | 70 +++++++++++++++++++
 .../atoms/ProfileShareModalSection/style.ts   | 56 +++++++++++++++
 .../molecules/ProfileSharingModal/index.tsx   | 50 +++++++++++++
 .../molecules/ProfileSharingModal/style.ts    | 39 +++++++++++
 .../student/molecules/StudentDetail/index.tsx | 25 +++++--
 .../student/molecules/StudentDetail/style.ts  | 21 ++++++
 .../molecules/StudentDetailModal/index.tsx    |  2 +-
 .../service/createSheareProfilService.ts      | 18 +++++
 13 files changed, 420 insertions(+), 9 deletions(-)
 create mode 100644 packages/app/src/features/student/atoms/ProfileShareModalFooter/index.tsx
 create mode 100644 packages/app/src/features/student/atoms/ProfileShareModalFooter/style.ts
 create mode 100644 packages/app/src/features/student/atoms/ProfileShareModalHeader/index.tsx
 create mode 100644 packages/app/src/features/student/atoms/ProfileShareModalHeader/style.ts
 create mode 100644 packages/app/src/features/student/atoms/ProfileShareModalSection/index.tsx
 create mode 100644 packages/app/src/features/student/atoms/ProfileShareModalSection/style.ts
 create mode 100644 packages/app/src/features/student/molecules/ProfileSharingModal/index.tsx
 create mode 100644 packages/app/src/features/student/molecules/ProfileSharingModal/style.ts
 create mode 100644 packages/app/src/features/student/service/createSheareProfilService.ts

diff --git a/packages/app/src/features/global/Header/index.tsx b/packages/app/src/features/global/Header/index.tsx
index ead9fc01..11c729f8 100644
--- a/packages/app/src/features/global/Header/index.tsx
+++ b/packages/app/src/features/global/Header/index.tsx
@@ -60,7 +60,6 @@ const Header = ({ onFilter }: Props) => {
             </S.UserCircle>
 
             <S.DropdownMenu isShow={isShow} onClose={() => setIsShow(false)}>
-
               {/* <S.DropdownItem onClick={redirectGSMInfo}>
                 <Icon.Document color='var(--N50)' /> 인증제
               </S.DropdownItem> */}
diff --git a/packages/app/src/features/student/atoms/ProfileShareModalFooter/index.tsx b/packages/app/src/features/student/atoms/ProfileShareModalFooter/index.tsx
new file mode 100644
index 00000000..7c29360b
--- /dev/null
+++ b/packages/app/src/features/student/atoms/ProfileShareModalFooter/index.tsx
@@ -0,0 +1,53 @@
+import React from 'react'
+import createSheareProfilService from '@features/student/service/createSheareProfilService'
+import * as S from './style'
+
+interface Props {
+  isLinkCreated: boolean
+  setIsLinkCreated: (value: boolean) => void
+  periodDay: number | undefined
+  toggleModal: () => void
+  studentId: string
+  setProfileShareData: React.Dispatch<React.SetStateAction<ProfileShareData[]>> // 수정된 부분
+}
+
+interface ProfileShareData {
+  token: string
+}
+
+const ProfileShareModalFooter = ({
+  isLinkCreated,
+  setIsLinkCreated,
+  periodDay,
+  toggleModal,
+  studentId,
+  setProfileShareData,
+}: Props) => {
+  const handleCreateLinkButtonClick = async () => {
+    if (isLinkCreated) {
+      toggleModal()
+    } else {
+      setIsLinkCreated(true)
+      const res = await createSheareProfilService(studentId, periodDay)
+      setProfileShareData(res)
+    }
+  }
+
+  const buttonText = isLinkCreated ? '확인' : '링크 생성'
+  const beforeText = !isLinkCreated && (
+    <S.BeforeText onClick={toggleModal}>이전으로</S.BeforeText>
+  )
+
+  return (
+    <S.FooterContainer>
+      <S.ButtonContainr>
+        {beforeText}
+        <S.CreateLinkButton onClick={handleCreateLinkButtonClick}>
+          {buttonText}
+        </S.CreateLinkButton>
+      </S.ButtonContainr>
+    </S.FooterContainer>
+  )
+}
+
+export default ProfileShareModalFooter
diff --git a/packages/app/src/features/student/atoms/ProfileShareModalFooter/style.ts b/packages/app/src/features/student/atoms/ProfileShareModalFooter/style.ts
new file mode 100644
index 00000000..d90e2b0f
--- /dev/null
+++ b/packages/app/src/features/student/atoms/ProfileShareModalFooter/style.ts
@@ -0,0 +1,47 @@
+import styled from '@emotion/styled'
+
+export const FooterContainer = styled.div`
+  width: 100%;
+  height: 3rem;
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  justify-content: flex-end;
+`
+
+export const ButtonContainr = styled.div`
+  display: flex;
+  gap: 2.875rem;
+`
+
+export const BeforeText = styled.p`
+  color: var(--N30);
+  font-family: Pretendard;
+  font-size: 1.0625rem;
+  font-weight: 700;
+  line-height: 1.3125rem;
+  letter-spacing: -0.002em;
+  align-self: center;
+  cursor: pointer;
+`
+
+export const CreateLinkButton = styled.button`
+  width: 11.4375rem;
+  height: 3rem;
+  padding: 0.75rem;
+  border-radius: 0.5rem;
+  background: var(--P2);
+
+  font-family: Pretendard;
+  font-size: 1.0625rem;
+  font-weight: 700;
+  line-height: 1.3125rem;
+  letter-spacing: -0.002em;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border: none;
+
+  color: var(--WHITE);
+  cursor: pointer;
+`
diff --git a/packages/app/src/features/student/atoms/ProfileShareModalHeader/index.tsx b/packages/app/src/features/student/atoms/ProfileShareModalHeader/index.tsx
new file mode 100644
index 00000000..0aca99d4
--- /dev/null
+++ b/packages/app/src/features/student/atoms/ProfileShareModalHeader/index.tsx
@@ -0,0 +1,18 @@
+import React from 'react'
+import * as S from './style'
+
+interface Props {
+  isLinkCreated: boolean
+}
+
+const ProfileShareModalHeader = ({ isLinkCreated }: Props) => {
+  const modalHeaderTitle = isLinkCreated ? '링크 복사' : '만료 시간 선택'
+
+  return (
+    <S.ModalHeaderContainer>
+      <S.ModalHeaderTitle>{modalHeaderTitle}</S.ModalHeaderTitle>
+    </S.ModalHeaderContainer>
+  )
+}
+
+export default ProfileShareModalHeader
diff --git a/packages/app/src/features/student/atoms/ProfileShareModalHeader/style.ts b/packages/app/src/features/student/atoms/ProfileShareModalHeader/style.ts
new file mode 100644
index 00000000..6ed56b6b
--- /dev/null
+++ b/packages/app/src/features/student/atoms/ProfileShareModalHeader/style.ts
@@ -0,0 +1,29 @@
+import styled from '@emotion/styled'
+
+export const ModalHeaderContainer = styled.div`
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  box-sizing: border-box;
+`
+
+export const ModalExpirationContainer = styled.div`
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+`
+
+export const ModalHeaderTitle = styled.p`
+  font-family: Pretendard;
+  font-size: 1.0625rem;
+  font-weight: 700;
+  line-height: 1.3125rem;
+  letter-spacing: -0.002em;
+  margin: 0;
+`
+
+export const ModalExitSvgContainer = styled.div`
+  cursor: pointer;
+`
diff --git a/packages/app/src/features/student/atoms/ProfileShareModalSection/index.tsx b/packages/app/src/features/student/atoms/ProfileShareModalSection/index.tsx
new file mode 100644
index 00000000..98d8955e
--- /dev/null
+++ b/packages/app/src/features/student/atoms/ProfileShareModalSection/index.tsx
@@ -0,0 +1,70 @@
+import { Radio } from '@sms/shared'
+import { useRef } from 'react'
+import * as S from './style'
+
+interface ProfileShareData {
+  token: string
+}
+
+interface Props {
+  isLinkCreated: boolean
+  setPeriodDay: React.Dispatch<React.SetStateAction<number | undefined>>
+  periodDay: number | undefined
+  profileShareData: ProfileShareData[]
+}
+
+const ProfileShareModalSection = ({
+  isLinkCreated,
+  setPeriodDay,
+  periodDay,
+  profileShareData,
+}: Props) => {
+  const linkUrl = `https://sms.msg-team.com/student/link?token=${profileShareData}`
+  const linkRef = useRef<HTMLDivElement>(null)
+
+  const copyLinkToClipboard = async () => {
+    if (linkRef.current) {
+      await navigator.clipboard.writeText(linkUrl)
+    }
+  }
+
+  const handleRadioChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setPeriodDay(parseInt(event.target.value))
+  }
+
+  const expirationOptions = [
+    { value: '5', label: '5일' },
+    { value: '10', label: '10일' },
+    { value: '15', label: '15일' },
+    { value: '20', label: '20일' },
+    { value: '25', label: '25일' },
+    { value: '30', label: '30일' },
+  ]
+
+  return (
+    <S.ModalSectionContainer>
+      <S.ModalExpirationContainer>
+        {isLinkCreated ? (
+          <S.ModalViewLinkContainer>
+            <S.ModalViewLinkText ref={linkRef}>{linkUrl}</S.ModalViewLinkText>
+            <S.ModalViewLinkCopy onClick={copyLinkToClipboard}>
+              복사
+            </S.ModalViewLinkCopy>
+          </S.ModalViewLinkContainer>
+        ) : (
+          expirationOptions.map((option) => (
+            <Radio
+              key={option.value}
+              value={option.value}
+              label={option.label}
+              checked={periodDay === parseInt(option.value)}
+              onChange={handleRadioChange}
+            />
+          ))
+        )}
+      </S.ModalExpirationContainer>
+    </S.ModalSectionContainer>
+  )
+}
+
+export default ProfileShareModalSection
diff --git a/packages/app/src/features/student/atoms/ProfileShareModalSection/style.ts b/packages/app/src/features/student/atoms/ProfileShareModalSection/style.ts
new file mode 100644
index 00000000..8c8f2d3a
--- /dev/null
+++ b/packages/app/src/features/student/atoms/ProfileShareModalSection/style.ts
@@ -0,0 +1,56 @@
+import styled from '@emotion/styled'
+
+export const ModalSectionContainer = styled.div`
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  gap: 2.5rem;
+  box-sizing: border-box;
+`
+
+export const ModalExpirationContainer = styled.div`
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  gap: 1.4563rem;
+
+  @media (max-width: 544px) {
+    gap: 16px;
+  }
+`
+
+export const ModalViewLinkContainer = styled.div`
+  width: 100%;
+  background: var(--N10);
+  padding: 0.75rem;
+  border-radius: 0.5rem;
+  border: 0.0625rem solid var(--N20);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+`
+
+export const ModalViewLinkText = styled.p`
+  font-family: Pretendard;
+  font-size: 0.9375rem;
+  font-weight: 400;
+  line-height: 1.3125rem;
+  letter-spacing: -0.002em;
+  color: var(--N50);
+`
+
+export const ModalViewLinkCopy = styled.button`
+  padding: 0.3125rem 1.25rem;
+  border-radius: 3.5rem;
+  border: 0.0625rem solid #2260ff;
+  background-color: var(--WHITE);
+  color: #2260ff;
+
+  font-family: Pretendard;
+  font-size: 0.9375rem;
+  font-weight: 400;
+  line-height: 1.3125rem;
+  letter-spacing: -0.002em;
+
+  cursor: pointer;
+`
diff --git a/packages/app/src/features/student/molecules/ProfileSharingModal/index.tsx b/packages/app/src/features/student/molecules/ProfileSharingModal/index.tsx
new file mode 100644
index 00000000..8c164db4
--- /dev/null
+++ b/packages/app/src/features/student/molecules/ProfileSharingModal/index.tsx
@@ -0,0 +1,50 @@
+import React, { useState } from 'react'
+import ProfileShareModalHeader from '@features/student/atoms/ProfileShareModalHeader'
+import ProfileShareModalSection from '@features/student/atoms/ProfileShareModalSection'
+import ProfileShareModalFooter from '@features/student/atoms/ProfileShareModalFooter'
+import * as S from './style'
+
+interface Props {
+  toggleModal: () => void
+  studentId: string
+}
+
+interface ProfileShareData {
+  token: string
+}
+
+const ProfileSharingModal = ({ toggleModal, studentId }: Props) => {
+  const [periodDay, setPeriodDay] = useState<number | undefined>(5)
+  const [isLinkCreated, setIsLinkCreated] = useState(false)
+  const [profileShareData, setProfileShareData] = useState<ProfileShareData[]>(
+    []
+  )
+
+  return (
+    <S.ModalBackground>
+      <S.ModalContainer>
+        <S.ModalContainerResponce>
+          <S.ModalMainContainer>
+            <ProfileShareModalHeader isLinkCreated={isLinkCreated} />
+            <ProfileShareModalSection
+              isLinkCreated={isLinkCreated}
+              periodDay={periodDay}
+              setPeriodDay={setPeriodDay}
+              profileShareData={profileShareData}
+            />
+          </S.ModalMainContainer>
+          <ProfileShareModalFooter
+            isLinkCreated={isLinkCreated}
+            setIsLinkCreated={setIsLinkCreated}
+            periodDay={periodDay}
+            toggleModal={toggleModal}
+            studentId={studentId}
+            setProfileShareData={setProfileShareData}
+          />
+        </S.ModalContainerResponce>
+      </S.ModalContainer>
+    </S.ModalBackground>
+  )
+}
+
+export default ProfileSharingModal
diff --git a/packages/app/src/features/student/molecules/ProfileSharingModal/style.ts b/packages/app/src/features/student/molecules/ProfileSharingModal/style.ts
new file mode 100644
index 00000000..f0e91057
--- /dev/null
+++ b/packages/app/src/features/student/molecules/ProfileSharingModal/style.ts
@@ -0,0 +1,39 @@
+import styled from '@emotion/styled'
+
+export const ModalBackground = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--LIGHTBOX);
+  backdrop-filter: blur(20px);
+  overflow: hidden;
+`
+
+export const ModalContainer = styled.div`
+  width: 31.625rem;
+  height: 14.3125rem;
+  background-color: var(--WHITE);
+  border-radius: 1rem;
+`
+
+export const ModalContainerResponce = styled.div`
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  padding: 1.5rem;
+`
+
+export const ModalMainContainer = styled.div`
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+  align-items: center;
+`
diff --git a/packages/app/src/features/student/molecules/StudentDetail/index.tsx b/packages/app/src/features/student/molecules/StudentDetail/index.tsx
index 0d900435..3c5c3a48 100644
--- a/packages/app/src/features/student/molecules/StudentDetail/index.tsx
+++ b/packages/app/src/features/student/molecules/StudentDetail/index.tsx
@@ -2,13 +2,22 @@ import PrizesDetail from '@features/student/atoms/PrizesDetail'
 import ProfileDetail from '@features/student/atoms/ProfileDetail'
 import ProjectDetail from '@features/student/atoms/ProjectDetail'
 import StudentInfo from '@features/student/atoms/StudentInfo'
+import { useState } from 'react'
+import ProfileSharingModal from '@features/student/molecules/ProfileSharingModal'
 import * as S from './style'
 
 interface Props {
   student: StudentDetail | null
+  studentId: string
 }
 
-const StudentDetail = ({ student }: Props) => {
+const StudentDetail = ({ student, studentId }: Props) => {
+  const [isModalOpen, setIsModalOpen] = useState(false)
+
+  const toggleModal = () => {
+    setIsModalOpen(!isModalOpen)
+  }
+
   return (
     <S.Wrapper>
       <ProfileDetail
@@ -33,13 +42,15 @@ const StudentDetail = ({ student }: Props) => {
       />
       <PrizesDetail prizes={student?.prizes} />
       <ProjectDetail projects={student?.projects} />
+      <S.PortfolioWrapper>
+        {student?.portfolioUrl && (
+          <S.PortfolioButton href='/'>포트폴리오</S.PortfolioButton>
+        )}
+        <S.ShareButton onClick={toggleModal}>공유</S.ShareButton>
+      </S.PortfolioWrapper>
 
-      {student?.portfolioUrl && (
-        <S.PortfolioWrapper>
-          <S.PortfolioButton href={student?.portfolioUrl}>
-            포트폴리오
-          </S.PortfolioButton>
-        </S.PortfolioWrapper>
+      {isModalOpen && (
+        <ProfileSharingModal studentId={studentId} toggleModal={toggleModal} />
       )}
     </S.Wrapper>
   )
diff --git a/packages/app/src/features/student/molecules/StudentDetail/style.ts b/packages/app/src/features/student/molecules/StudentDetail/style.ts
index 93714bcf..3cac8a7f 100644
--- a/packages/app/src/features/student/molecules/StudentDetail/style.ts
+++ b/packages/app/src/features/student/molecules/StudentDetail/style.ts
@@ -19,6 +19,7 @@ export const PortfolioWrapper = styled.div`
   padding: 0 1.25rem 3.5rem;
   display: flex;
   justify-content: center;
+  gap: 0.5rem;
 `
 
 export const PortfolioButton = styled(Link)`
@@ -38,3 +39,23 @@ export const PortfolioButton = styled(Link)`
     max-width: 100%;
   }
 `
+
+export const ShareButton = styled.div`
+  ${({ theme }) => theme.title2}
+  max-width: 15rem;
+  width: 100%;
+  height: 3rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: var(--BLACK);
+  background: var(--WHITE);
+  text-decoration: none;
+  border-radius: 0.5rem;
+  border: 1px solid var(--P2);
+  cursor: pointer;
+
+  @media (max-width: 34rem) {
+    max-width: 100%;
+  }
+`
diff --git a/packages/app/src/features/student/molecules/StudentDetailModal/index.tsx b/packages/app/src/features/student/molecules/StudentDetailModal/index.tsx
index a8f2c4b7..9cfacbf4 100644
--- a/packages/app/src/features/student/molecules/StudentDetailModal/index.tsx
+++ b/packages/app/src/features/student/molecules/StudentDetailModal/index.tsx
@@ -34,7 +34,7 @@ const StudentDetailModal = ({ student, studentId }: Props) => {
         {isLoading ? (
           <StudentDetailSkeleton />
         ) : (
-          <StudentDetail student={student || data} />
+          <StudentDetail studentId={studentId} student={student || data} />
         )}
       </S.Wrapper>
     </BlurPortal>
diff --git a/packages/app/src/features/student/service/createSheareProfilService.ts b/packages/app/src/features/student/service/createSheareProfilService.ts
new file mode 100644
index 00000000..1cc3cc3a
--- /dev/null
+++ b/packages/app/src/features/student/service/createSheareProfilService.ts
@@ -0,0 +1,18 @@
+import { axiosApi } from '@api'
+
+const createSheareProfilService = async (
+  studentId?: string,
+  periodDay?: number | undefined
+) => {
+  try {
+    const { data } = await axiosApi.post(`/server/link`, {
+      studentId: studentId,
+      periodDay: periodDay,
+    })
+    return data
+  } catch (e) {
+    return null
+  }
+}
+
+export default createSheareProfilService

From f0d181630a76981e34dc546cc4077b6769ff4458 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=A0=95=ED=83=9C=EA=B4=80?= <jxorhks86909763@gmail.com>
Date: Tue, 4 Jun 2024 17:16:12 +0900
Subject: [PATCH 02/16] fix: periodDay type

---
 .../student/atoms/ProfileShareModalFooter/index.tsx       | 6 +++---
 .../student/atoms/ProfileShareModalSection/index.tsx      | 4 ++--
 .../student/molecules/ProfileSharingModal/index.tsx       | 2 +-
 ...SheareProfilService.ts => createShareProfilService.ts} | 8 ++++----
 4 files changed, 10 insertions(+), 10 deletions(-)
 rename packages/app/src/features/student/service/{createSheareProfilService.ts => createShareProfilService.ts} (62%)

diff --git a/packages/app/src/features/student/atoms/ProfileShareModalFooter/index.tsx b/packages/app/src/features/student/atoms/ProfileShareModalFooter/index.tsx
index 7c29360b..160983e6 100644
--- a/packages/app/src/features/student/atoms/ProfileShareModalFooter/index.tsx
+++ b/packages/app/src/features/student/atoms/ProfileShareModalFooter/index.tsx
@@ -1,11 +1,11 @@
 import React from 'react'
-import createSheareProfilService from '@features/student/service/createSheareProfilService'
+import createShareProfilService from '@features/student/service/createShareProfilService'
 import * as S from './style'
 
 interface Props {
   isLinkCreated: boolean
   setIsLinkCreated: (value: boolean) => void
-  periodDay: number | undefined
+  periodDay: number
   toggleModal: () => void
   studentId: string
   setProfileShareData: React.Dispatch<React.SetStateAction<ProfileShareData[]>> // 수정된 부분
@@ -28,7 +28,7 @@ const ProfileShareModalFooter = ({
       toggleModal()
     } else {
       setIsLinkCreated(true)
-      const res = await createSheareProfilService(studentId, periodDay)
+      const res = await createShareProfilService(studentId, periodDay)
       setProfileShareData(res)
     }
   }
diff --git a/packages/app/src/features/student/atoms/ProfileShareModalSection/index.tsx b/packages/app/src/features/student/atoms/ProfileShareModalSection/index.tsx
index 98d8955e..45bfeca4 100644
--- a/packages/app/src/features/student/atoms/ProfileShareModalSection/index.tsx
+++ b/packages/app/src/features/student/atoms/ProfileShareModalSection/index.tsx
@@ -8,8 +8,8 @@ interface ProfileShareData {
 
 interface Props {
   isLinkCreated: boolean
-  setPeriodDay: React.Dispatch<React.SetStateAction<number | undefined>>
-  periodDay: number | undefined
+  setPeriodDay: React.Dispatch<React.SetStateAction<number>>
+  periodDay: number
   profileShareData: ProfileShareData[]
 }
 
diff --git a/packages/app/src/features/student/molecules/ProfileSharingModal/index.tsx b/packages/app/src/features/student/molecules/ProfileSharingModal/index.tsx
index 8c164db4..d3de2b5c 100644
--- a/packages/app/src/features/student/molecules/ProfileSharingModal/index.tsx
+++ b/packages/app/src/features/student/molecules/ProfileSharingModal/index.tsx
@@ -14,7 +14,7 @@ interface ProfileShareData {
 }
 
 const ProfileSharingModal = ({ toggleModal, studentId }: Props) => {
-  const [periodDay, setPeriodDay] = useState<number | undefined>(5)
+  const [periodDay, setPeriodDay] = useState<number>(5)
   const [isLinkCreated, setIsLinkCreated] = useState(false)
   const [profileShareData, setProfileShareData] = useState<ProfileShareData[]>(
     []
diff --git a/packages/app/src/features/student/service/createSheareProfilService.ts b/packages/app/src/features/student/service/createShareProfilService.ts
similarity index 62%
rename from packages/app/src/features/student/service/createSheareProfilService.ts
rename to packages/app/src/features/student/service/createShareProfilService.ts
index fb9302b9..57fb5469 100644
--- a/packages/app/src/features/student/service/createSheareProfilService.ts
+++ b/packages/app/src/features/student/service/createShareProfilService.ts
@@ -1,8 +1,8 @@
 import { axiosApi } from '@api'
 
-const createSheareProfilService = async (
-  studentId?: string,
-  periodDay?: number | undefined
+const createShareProfilService = async (
+  studentId: string,
+  periodDay: number
 ) => {
   try {
     const { data } = await axiosApi.post(`/server/student/link`, {
@@ -15,4 +15,4 @@ const createSheareProfilService = async (
   }
 }
 
-export default createSheareProfilService
+export default createShareProfilService

From 8d87a0bce63c3bdbb14a71fdf126b6238d706179 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=A0=95=ED=83=9C=EA=B4=80?= <jxorhks86909763@gmail.com>
Date: Tue, 4 Jun 2024 17:25:08 +0900
Subject: [PATCH 03/16] fix: scroll fixed function

---
 .../modal/portals/BlurPortal/index.tsx         | 18 +-----------------
 1 file changed, 1 insertion(+), 17 deletions(-)

diff --git a/packages/app/src/features/modal/portals/BlurPortal/index.tsx b/packages/app/src/features/modal/portals/BlurPortal/index.tsx
index e8e88ee3..64688adc 100644
--- a/packages/app/src/features/modal/portals/BlurPortal/index.tsx
+++ b/packages/app/src/features/modal/portals/BlurPortal/index.tsx
@@ -1,6 +1,6 @@
 import { usePortal } from '@features/modal/hooks'
 import ReactDOM from 'react-dom'
-import { cloneElement, ReactElement, useEffect } from 'react'
+import { cloneElement, ReactElement } from 'react'
 import * as S from './style'
 
 interface Props {
@@ -14,22 +14,6 @@ interface Props {
 const BlurPortal = ({ children, isModalOpen }: Props) => {
   const portalValue = usePortal(true)
 
-  useEffect(() => {
-    if (isModalOpen) {
-      const scrollY = window.scrollY
-      document.body.style.cssText = `
-        position: fixed;
-        top: -${scrollY}px;
-        width: 100%;
-      `
-
-      return () => {
-        document.body.style.cssText = ''
-        window.scrollTo(0, scrollY)
-      }
-    }
-  }, [isModalOpen])
-
   if (!portalValue) return null
 
   const { onClick, onClose, portal } = portalValue

From 8c0662e0d4bf6ea6b775c74de3bf06a7a1ba1449 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=A0=95=ED=83=9C=EA=B4=80?= <jxorhks86909763@gmail.com>
Date: Sat, 8 Jun 2024 15:25:09 +0900
Subject: [PATCH 04/16] fix: url-data

---
 .../student/atoms/ProfileShareModalFooter/index.tsx        | 6 ++++--
 .../student/atoms/ProfileShareModalSection/index.tsx       | 7 +++++--
 .../student/atoms/ProfileShareModalSection/style.ts        | 5 +++++
 .../src/features/student/molecules/StudentDetail/index.tsx | 1 -
 4 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/packages/app/src/features/student/atoms/ProfileShareModalFooter/index.tsx b/packages/app/src/features/student/atoms/ProfileShareModalFooter/index.tsx
index 160983e6..5b0808bf 100644
--- a/packages/app/src/features/student/atoms/ProfileShareModalFooter/index.tsx
+++ b/packages/app/src/features/student/atoms/ProfileShareModalFooter/index.tsx
@@ -8,7 +8,7 @@ interface Props {
   periodDay: number
   toggleModal: () => void
   studentId: string
-  setProfileShareData: React.Dispatch<React.SetStateAction<ProfileShareData[]>> // 수정된 부분
+  setProfileShareData: React.Dispatch<React.SetStateAction<ProfileShareData[]>>
 }
 
 interface ProfileShareData {
@@ -29,7 +29,9 @@ const ProfileShareModalFooter = ({
     } else {
       setIsLinkCreated(true)
       const res = await createShareProfilService(studentId, periodDay)
-      setProfileShareData(res)
+      if (res) {
+        setProfileShareData([res]) // 배열로 설정
+      }
     }
   }
 
diff --git a/packages/app/src/features/student/atoms/ProfileShareModalSection/index.tsx b/packages/app/src/features/student/atoms/ProfileShareModalSection/index.tsx
index 45bfeca4..78b6255a 100644
--- a/packages/app/src/features/student/atoms/ProfileShareModalSection/index.tsx
+++ b/packages/app/src/features/student/atoms/ProfileShareModalSection/index.tsx
@@ -19,7 +19,10 @@ const ProfileShareModalSection = ({
   periodDay,
   profileShareData,
 }: Props) => {
-  const linkUrl = `https://sms.msg-team.com/student/link?token=${profileShareData}`
+  const linkUrl =
+    profileShareData.length > 0
+      ? `https://sms.msg-team.com/student/link?token=${profileShareData[0].token}`
+      : ''
   const linkRef = useRef<HTMLDivElement>(null)
 
   const copyLinkToClipboard = async () => {
@@ -44,7 +47,7 @@ const ProfileShareModalSection = ({
   return (
     <S.ModalSectionContainer>
       <S.ModalExpirationContainer>
-        {isLinkCreated ? (
+        {isLinkCreated && profileShareData.length > 0 ? (
           <S.ModalViewLinkContainer>
             <S.ModalViewLinkText ref={linkRef}>{linkUrl}</S.ModalViewLinkText>
             <S.ModalViewLinkCopy onClick={copyLinkToClipboard}>
diff --git a/packages/app/src/features/student/atoms/ProfileShareModalSection/style.ts b/packages/app/src/features/student/atoms/ProfileShareModalSection/style.ts
index 8c8f2d3a..4f655846 100644
--- a/packages/app/src/features/student/atoms/ProfileShareModalSection/style.ts
+++ b/packages/app/src/features/student/atoms/ProfileShareModalSection/style.ts
@@ -37,14 +37,19 @@ export const ModalViewLinkText = styled.p`
   line-height: 1.3125rem;
   letter-spacing: -0.002em;
   color: var(--N50);
+  max-width: calc(100% - 100px);
 `
 
 export const ModalViewLinkCopy = styled.button`
+  display: flex;
+  align-items: center;
+  justify-content: center;
   padding: 0.3125rem 1.25rem;
   border-radius: 3.5rem;
   border: 0.0625rem solid #2260ff;
   background-color: var(--WHITE);
   color: #2260ff;
+  overflow: hidden;
 
   font-family: Pretendard;
   font-size: 0.9375rem;
diff --git a/packages/app/src/features/student/molecules/StudentDetail/index.tsx b/packages/app/src/features/student/molecules/StudentDetail/index.tsx
index 8e984937..cb07b5a0 100644
--- a/packages/app/src/features/student/molecules/StudentDetail/index.tsx
+++ b/packages/app/src/features/student/molecules/StudentDetail/index.tsx
@@ -52,7 +52,6 @@ const StudentDetail = ({ student, studentId, role }: Props) => {
           <S.ShareButton onClick={toggleModal}>공유</S.ShareButton>
         )}
       </S.PortfolioWrapper>
-
       {isModalOpen && (
         <BlurPortal isModalOpen={isModalOpen}>
           <ProfileSharingModal

From 504be94742e81114ade4cae6cbe19e84b1350bfc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=A0=95=ED=83=9C=EA=B4=80?= <jxorhks86909763@gmail.com>
Date: Tue, 11 Jun 2024 17:06:13 +0900
Subject: [PATCH 05/16] fix: share modal event bubbling

---
 .../app/src/features/modal/portals/BlurPortal/index.tsx  | 9 +++------
 .../student/molecules/ProfileSharingModal/index.tsx      | 9 +++++++--
 .../student/molecules/ProfileSharingModal/style.ts       | 5 -----
 .../features/student/molecules/StudentDetail/index.tsx   | 6 +++---
 4 files changed, 13 insertions(+), 16 deletions(-)

diff --git a/packages/app/src/features/modal/portals/BlurPortal/index.tsx b/packages/app/src/features/modal/portals/BlurPortal/index.tsx
index 64688adc..c2553db7 100644
--- a/packages/app/src/features/modal/portals/BlurPortal/index.tsx
+++ b/packages/app/src/features/modal/portals/BlurPortal/index.tsx
@@ -5,23 +5,20 @@ import * as S from './style'
 
 interface Props {
   children: ReactElement
-  isModalOpen?: boolean
 }
 
 /**
  * 배경은 blur로 되어 있음
  */
-const BlurPortal = ({ children, isModalOpen }: Props) => {
+const BlurPortal = ({ children }: Props) => {
   const portalValue = usePortal(true)
 
-  if (!portalValue) return null
+  if (!portalValue) return <></>
 
   const { onClick, onClose, portal } = portalValue
 
-  const handleClick = isModalOpen ? undefined : onClose
-
   return ReactDOM.createPortal(
-    <S.Wrapper onClick={handleClick}>
+    <S.Wrapper onClick={onClose}>
       {cloneElement(children, { onClick })}
     </S.Wrapper>,
     portal
diff --git a/packages/app/src/features/student/molecules/ProfileSharingModal/index.tsx b/packages/app/src/features/student/molecules/ProfileSharingModal/index.tsx
index d3de2b5c..15b14984 100644
--- a/packages/app/src/features/student/molecules/ProfileSharingModal/index.tsx
+++ b/packages/app/src/features/student/molecules/ProfileSharingModal/index.tsx
@@ -20,9 +20,14 @@ const ProfileSharingModal = ({ toggleModal, studentId }: Props) => {
     []
   )
 
+  const handleBackgroundClick = (e: React.MouseEvent) => {
+    e.stopPropagation()
+    toggleModal()
+  }
+
   return (
-    <S.ModalBackground>
-      <S.ModalContainer>
+    <S.ModalBackground onClick={handleBackgroundClick}>
+      <S.ModalContainer onClick={(e) => e.stopPropagation()}>
         <S.ModalContainerResponce>
           <S.ModalMainContainer>
             <ProfileShareModalHeader isLinkCreated={isLinkCreated} />
diff --git a/packages/app/src/features/student/molecules/ProfileSharingModal/style.ts b/packages/app/src/features/student/molecules/ProfileSharingModal/style.ts
index 3376c505..63a1847b 100644
--- a/packages/app/src/features/student/molecules/ProfileSharingModal/style.ts
+++ b/packages/app/src/features/student/molecules/ProfileSharingModal/style.ts
@@ -1,16 +1,11 @@
 import styled from '@emotion/styled'
 
 export const ModalBackground = styled.div`
-  position: absolute;
-  top: 0;
-  left: 0;
   width: 100vw;
   height: 100vh;
   display: flex;
   align-items: center;
   justify-content: center;
-  background: var(--LIGHTBOX);
-  backdrop-filter: blur(0.25rem);
 `
 
 export const ModalContainer = styled.div`
diff --git a/packages/app/src/features/student/molecules/StudentDetail/index.tsx b/packages/app/src/features/student/molecules/StudentDetail/index.tsx
index cb07b5a0..b9bc6c03 100644
--- a/packages/app/src/features/student/molecules/StudentDetail/index.tsx
+++ b/packages/app/src/features/student/molecules/StudentDetail/index.tsx
@@ -1,8 +1,8 @@
+import React, { useState } from 'react'
 import PrizesDetail from '@features/student/atoms/PrizesDetail'
 import ProfileDetail from '@features/student/atoms/ProfileDetail'
 import ProjectDetail from '@features/student/atoms/ProjectDetail'
 import StudentInfo from '@features/student/atoms/StudentInfo'
-import { useState } from 'react'
 import ProfileSharingModal from '@features/student/molecules/ProfileSharingModal'
 import { BlurPortal } from '@features/modal/portals'
 import * as S from './style'
@@ -48,12 +48,12 @@ const StudentDetail = ({ student, studentId, role }: Props) => {
         {student?.portfolioUrl && (
           <S.PortfolioButton href='/'>포트폴리오</S.PortfolioButton>
         )}
-        {role === 'ROLE_TEACHER' && (
+        {role === 'ROLE_TEACHER/ROLE_HOMEROOM' && (
           <S.ShareButton onClick={toggleModal}>공유</S.ShareButton>
         )}
       </S.PortfolioWrapper>
       {isModalOpen && (
-        <BlurPortal isModalOpen={isModalOpen}>
+        <BlurPortal>
           <ProfileSharingModal
             studentId={studentId}
             toggleModal={toggleModal}

From 2bc9c5b7ac742a1c3a520bd01743fd84309e3e31 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EB=B3=80=EC=B0=AC=EC=9A=B0?=
 <57276315+chanwoo00106@users.noreply.github.com>
Date: Sun, 9 Jun 2024 18:47:48 +0900
Subject: [PATCH 06/16] =?UTF-8?q?editorconfig=20=EC=84=A4=EC=A0=95=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95=20(#321)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .editorconfig | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.editorconfig b/.editorconfig
index 1c2ceac1..8573e9ed 100644
--- a/.editorconfig
+++ b/.editorconfig
@@ -4,7 +4,7 @@ root = true
 # 모든 파일에 적용
 [*]
 end_of_line = lf
-insert_final_newline = false
+insert_final_newline = true
 charset = utf-8
 indent_size = 2
 indent_style = tab

From d132300924a913d52b6da2e701aa971fd92ad7c1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EB=B3=80=EC=B0=AC=EC=9A=B0?=
 <57276315+chanwoo00106@users.noreply.github.com>
Date: Mon, 10 Jun 2024 21:23:17 +0900
Subject: [PATCH 07/16] =?UTF-8?q?[#311]=20=ED=8C=8C=EC=9D=BC=20=EB=8B=A4?=
 =?UTF-8?q?=EC=9A=B4=EB=A1=9C=EB=93=9C=20=EC=BB=B4=ED=8F=AC=EB=84=8C?=
 =?UTF-8?q?=ED=8A=B8=20=EC=B6=94=EA=B0=80=20(#312)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/shared/src/atoms/Button/index.tsx    |  2 +
 .../shared/src/atoms/Input/index.stories.tsx  |  7 +--
 packages/shared/src/icons/File.tsx            | 13 ++--
 packages/shared/src/icons/Folder.tsx          | 19 ++++++
 packages/shared/src/icons/index.mdx           |  4 +-
 packages/shared/src/icons/index.ts            |  1 +
 .../src/molecules/DownloadList/File.tsx       | 29 +++++++++
 .../molecules/DownloadList/index.stories.tsx  | 19 ++++++
 .../src/molecules/DownloadList/index.tsx      | 26 ++++++++
 .../src/molecules/DownloadList/style.ts       | 62 +++++++++++++++++++
 packages/shared/src/molecules/index.ts        |  1 +
 11 files changed, 174 insertions(+), 9 deletions(-)
 create mode 100644 packages/shared/src/icons/Folder.tsx
 create mode 100644 packages/shared/src/molecules/DownloadList/File.tsx
 create mode 100644 packages/shared/src/molecules/DownloadList/index.stories.tsx
 create mode 100644 packages/shared/src/molecules/DownloadList/index.tsx
 create mode 100644 packages/shared/src/molecules/DownloadList/style.ts

diff --git a/packages/shared/src/atoms/Button/index.tsx b/packages/shared/src/atoms/Button/index.tsx
index 02c376ba..e6a4b85e 100644
--- a/packages/shared/src/atoms/Button/index.tsx
+++ b/packages/shared/src/atoms/Button/index.tsx
@@ -29,6 +29,7 @@ const Wrapper = styled.button`
   outline: none;
   transition: 0.2s;
   border: none;
+  white-space: nowrap;
   ${(props) => props.theme.title2}
   background: var(--P2);
   color: var(--WHITE);
@@ -55,6 +56,7 @@ const WhiteButton = styled.button`
   width: 100%;
   outline: none;
   transition: 0.4s;
+  white-space: nowrap;
   border: 0.0625rem solid var(--N20);
   background: var(--WHITE);
   color: var(--BLACK);
diff --git a/packages/shared/src/atoms/Input/index.stories.tsx b/packages/shared/src/atoms/Input/index.stories.tsx
index 7fadf311..50826110 100644
--- a/packages/shared/src/atoms/Input/index.stories.tsx
+++ b/packages/shared/src/atoms/Input/index.stories.tsx
@@ -1,7 +1,6 @@
 import React from 'react'
 import { Meta, StoryObj } from '@storybook/react'
-import Search from '../../icons/Search'
-import File from '../../icons/File'
+import * as Icon from '../../icons'
 import Input from './index'
 
 const config: Meta<typeof Input> = {
@@ -16,7 +15,7 @@ type Story = StoryObj<typeof Input>
 
 export const Primary: Story = {
   args: {
-    leftIcon: <Search />,
-    rightIcon: <File />,
+    leftIcon: <Icon.Search />,
+    rightIcon: <Icon.Folder />,
   },
 }
diff --git a/packages/shared/src/icons/File.tsx b/packages/shared/src/icons/File.tsx
index 7505b359..974548c9 100644
--- a/packages/shared/src/icons/File.tsx
+++ b/packages/shared/src/icons/File.tsx
@@ -1,4 +1,8 @@
-const File = () => {
+interface Props {
+  fill?: string
+}
+
+const File = ({ fill = '#62636A' }: Props) => {
   return (
     <svg
       width='24'
@@ -8,9 +12,10 @@ const File = () => {
       xmlns='http://www.w3.org/2000/svg'
     >
       <path
-        d='M3 17V7C3 5.89543 3.89543 5 5 5H8.6217C9.45157 5 10.1952 5.5125 10.4907 6.28801L10.7547 6.981C10.9024 7.36875 11.2742 7.625 11.6892 7.625H19C20.1046 7.625 21 8.52043 21 9.625V17C21 18.1046 20.1046 19 19 19H5C3.89543 19 3 18.1046 3 17Z'
-        stroke='black'
-        strokeWidth='2'
+        fillRule='evenodd'
+        clipRule='evenodd'
+        d='M4 4C4 2.89543 4.89543 2 6 2H13.5858C14.1162 2 14.6249 2.21071 15 2.58579L19.4142 7C19.7893 7.37507 20 7.88378 20 8.41421V20C20 21.1046 19.1046 22 18 22H6C4.89543 22 4 21.1046 4 20V4ZM13 4H6V20H18V9H15C13.8954 9 13 8.10457 13 7V4ZM15 5.41421V7H16.5858L15 5.41421ZM8 13C8 12.4477 8.44772 12 9 12H15C15.5523 12 16 12.4477 16 13C16 13.5523 15.5523 14 15 14H9C8.44772 14 8 13.5523 8 13ZM8 17C8 16.4477 8.44772 16 9 16H15C15.5523 16 16 16.4477 16 17C16 17.5523 15.5523 18 15 18H9C8.44772 18 8 17.5523 8 17Z'
+        fill={fill}
       />
     </svg>
   )
diff --git a/packages/shared/src/icons/Folder.tsx b/packages/shared/src/icons/Folder.tsx
new file mode 100644
index 00000000..963a8d68
--- /dev/null
+++ b/packages/shared/src/icons/Folder.tsx
@@ -0,0 +1,19 @@
+const Folder = () => {
+  return (
+    <svg
+      width='24'
+      height='24'
+      viewBox='0 0 24 24'
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'
+    >
+      <path
+        d='M3 17V7C3 5.89543 3.89543 5 5 5H8.6217C9.45157 5 10.1952 5.5125 10.4907 6.28801L10.7547 6.981C10.9024 7.36875 11.2742 7.625 11.6892 7.625H19C20.1046 7.625 21 8.52043 21 9.625V17C21 18.1046 20.1046 19 19 19H5C3.89543 19 3 18.1046 3 17Z'
+        stroke='black'
+        strokeWidth='2'
+      />
+    </svg>
+  )
+}
+
+export default Folder
diff --git a/packages/shared/src/icons/index.mdx b/packages/shared/src/icons/index.mdx
index ba7efca3..594da14f 100644
--- a/packages/shared/src/icons/index.mdx
+++ b/packages/shared/src/icons/index.mdx
@@ -19,6 +19,7 @@ import ArrowUpRight from './ArrowUpRight'
 import Bars3 from './Bars3'
 import Document from './Document'
 import File from './File'
+import Folder from './Folder'
 
 ### SMS
 
@@ -55,4 +56,5 @@ import File from './File'
   <Bars3 />
   <Document />
   <File />
-</div>
+  <Folder />
+</div>
\ No newline at end of file
diff --git a/packages/shared/src/icons/index.ts b/packages/shared/src/icons/index.ts
index 461e0fdc..76668425 100644
--- a/packages/shared/src/icons/index.ts
+++ b/packages/shared/src/icons/index.ts
@@ -20,3 +20,4 @@ export { default as ArrowUpRight } from './ArrowUpRight'
 export { default as Bars3 } from './Bars3'
 export { default as Document } from './Document'
 export { default as File } from './File'
+export { default as Folder } from './Folder'
diff --git a/packages/shared/src/molecules/DownloadList/File.tsx b/packages/shared/src/molecules/DownloadList/File.tsx
new file mode 100644
index 00000000..fce9ea71
--- /dev/null
+++ b/packages/shared/src/molecules/DownloadList/File.tsx
@@ -0,0 +1,29 @@
+import { DetailedHTMLProps, LiHTMLAttributes } from 'react'
+import { Button } from '../../atoms'
+import * as Icon from '../../icons'
+import * as S from './style'
+
+interface Props
+  extends DetailedHTMLProps<LiHTMLAttributes<HTMLLIElement>, HTMLLIElement> {
+  filename: string
+  onClick?: () => void
+}
+
+const File = ({ filename, onClick, ...props }: Props) => {
+  return (
+    <S.File {...props}>
+      <S.FileInfo>
+        <S.Icon>
+          <Icon.File />
+        </S.Icon>
+        <S.FileName>{filename}</S.FileName>
+      </S.FileInfo>
+
+      <Button theme='white' onClick={onClick} style={{ width: 'min-content' }}>
+        다운로드
+      </Button>
+    </S.File>
+  )
+}
+
+export default File
diff --git a/packages/shared/src/molecules/DownloadList/index.stories.tsx b/packages/shared/src/molecules/DownloadList/index.stories.tsx
new file mode 100644
index 00000000..ba778616
--- /dev/null
+++ b/packages/shared/src/molecules/DownloadList/index.stories.tsx
@@ -0,0 +1,19 @@
+import React from 'react'
+import { Meta } from '@storybook/react'
+import DownloadList from './index'
+
+const config: Meta<typeof DownloadList> = {
+  title: 'DownloadList',
+  component: DownloadList,
+}
+
+export default config
+
+export const Primary = () => {
+  return (
+    <DownloadList>
+      <DownloadList.File filename='아주긴_제목을_가진_책의_독후감_양식_파일_이름이_매우_길어서_서비스를_만들_때_긴_이름이_들어간_케이스를_표시할_때_사용할 수 있는_예시_파일.docx' />
+      <DownloadList.File filename='테스트_파일.txt' />
+    </DownloadList>
+  )
+}
diff --git a/packages/shared/src/molecules/DownloadList/index.tsx b/packages/shared/src/molecules/DownloadList/index.tsx
new file mode 100644
index 00000000..e6e0b655
--- /dev/null
+++ b/packages/shared/src/molecules/DownloadList/index.tsx
@@ -0,0 +1,26 @@
+import { DetailedHTMLProps, HTMLAttributes } from 'react'
+import * as S from './style'
+import File from './File'
+
+interface Props
+  extends DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement> {
+  title?: string
+}
+
+const DownloadList = ({
+  title = '파일 다운로드',
+  children,
+  ...props
+}: Props) => {
+  return (
+    <S.Wrapper {...props}>
+      <S.Title>{title}</S.Title>
+
+      <S.FileList>{children}</S.FileList>
+    </S.Wrapper>
+  )
+}
+
+DownloadList.File = File
+
+export default DownloadList
diff --git a/packages/shared/src/molecules/DownloadList/style.ts b/packages/shared/src/molecules/DownloadList/style.ts
new file mode 100644
index 00000000..94a27e50
--- /dev/null
+++ b/packages/shared/src/molecules/DownloadList/style.ts
@@ -0,0 +1,62 @@
+import styled from '@emotion/styled'
+
+export const Wrapper = styled.section`
+  background: #fff;
+  border-radius: 1rem;
+  max-width: 44rem;
+  padding: 2.5rem;
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+`
+
+export const Title = styled.h2`
+  ${({ theme }) => theme.title1}
+`
+
+export const FileList = styled.ul`
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+`
+
+export const File = styled.li`
+  padding: 0.75rem 1rem;
+  background: var(--N10);
+  border: 1px solid var(--N20);
+  border-radius: 0.5rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 0.5rem;
+`
+
+export const FileInfo = styled.div`
+  display: flex;
+  gap: 0.75rem;
+  align-items: center;
+`
+
+export const Icon = styled.figure`
+  width: 2.5rem;
+  height: 2.5rem;
+  min-width: 2.5rem;
+  min-height: 2.5rem;
+  border-radius: 100%;
+  background: #fff;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`
+
+export const FileName = styled.p`
+  ${({ theme }) => theme.body1}
+  display: -webkit-box;
+  color: var(--N50);
+  word-break: break-word;
+  text-overflow: ellipsis;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+`
diff --git a/packages/shared/src/molecules/index.ts b/packages/shared/src/molecules/index.ts
index 66ab1c0e..66a77a43 100644
--- a/packages/shared/src/molecules/index.ts
+++ b/packages/shared/src/molecules/index.ts
@@ -6,5 +6,6 @@ export { default as MultiRangeSlider } from './MultiRangeSlider'
 export { default as MultiMonthPicker } from './MultiMonthPicker'
 export { default as FourImageInputs } from './FourImageInputs'
 export { default as DoubleInput } from './DoubleInput'
+export { default as DownloadList } from './DownloadList'
 
 export type { OptionsType } from './Select/type'

From 23a669368cf7d7dd4c2e134021dffffb0f45a3de Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EB=B3=80=EC=B0=AC=EC=9A=B0?=
 <57276315+chanwoo00106@users.noreply.github.com>
Date: Mon, 10 Jun 2024 21:26:18 +0900
Subject: [PATCH 08/16] =?UTF-8?q?[#305]=20=EC=9D=B8=EC=A6=9D=EC=A0=9C=20?=
 =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=B6=94=EA=B0=80=20(#3?=
 =?UTF-8?q?06)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../molecules/CertificationForm/Context.tsx   | 25 +++++++++++
 .../src/molecules/CertificationForm/Field.tsx | 28 ++++++++++++
 .../molecules/CertificationForm/Header.tsx    | 44 ++++++++++++++++++
 .../src/molecules/CertificationForm/Title.tsx | 15 +++++++
 .../CertificationForm/index.stories.tsx       | 36 +++++++++++++++
 .../src/molecules/CertificationForm/index.tsx | 24 ++++++++++
 .../src/molecules/CertificationForm/style.ts  | 45 +++++++++++++++++++
 packages/shared/src/molecules/index.ts        |  1 +
 8 files changed, 218 insertions(+)
 create mode 100644 packages/shared/src/molecules/CertificationForm/Context.tsx
 create mode 100644 packages/shared/src/molecules/CertificationForm/Field.tsx
 create mode 100644 packages/shared/src/molecules/CertificationForm/Header.tsx
 create mode 100644 packages/shared/src/molecules/CertificationForm/Title.tsx
 create mode 100644 packages/shared/src/molecules/CertificationForm/index.stories.tsx
 create mode 100644 packages/shared/src/molecules/CertificationForm/index.tsx
 create mode 100644 packages/shared/src/molecules/CertificationForm/style.ts

diff --git a/packages/shared/src/molecules/CertificationForm/Context.tsx b/packages/shared/src/molecules/CertificationForm/Context.tsx
new file mode 100644
index 00000000..5f243aae
--- /dev/null
+++ b/packages/shared/src/molecules/CertificationForm/Context.tsx
@@ -0,0 +1,25 @@
+import { ReactNode, createContext, useState } from 'react'
+
+interface ContextType {
+  hidden: boolean
+  setHidden: (value: boolean) => void
+}
+
+export const Context = createContext<ContextType>({
+  hidden: false,
+  setHidden() {},
+})
+
+interface Props {
+  children: ReactNode
+}
+
+export const ContextProvider = ({ children }: Props) => {
+  const [hidden, setHidden] = useState(false)
+
+  return (
+    <Context.Provider value={{ hidden, setHidden }}>
+      {children}
+    </Context.Provider>
+  )
+}
diff --git a/packages/shared/src/molecules/CertificationForm/Field.tsx b/packages/shared/src/molecules/CertificationForm/Field.tsx
new file mode 100644
index 00000000..9f7bb03b
--- /dev/null
+++ b/packages/shared/src/molecules/CertificationForm/Field.tsx
@@ -0,0 +1,28 @@
+import { DetailedHTMLProps, HTMLAttributes, ReactNode, useContext } from 'react'
+import * as S from './style'
+import { Context } from './Context'
+
+interface Props
+  extends DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement> {
+  label?: string
+  children: ReactNode
+}
+
+const Field = ({ label, children, ...props }: Props) => {
+  const { hidden } = useContext(Context)
+
+  return (
+    <S.Field
+      style={{
+        display: hidden ? 'none' : 'grid',
+        ...props.style,
+      }}
+      {...props}
+    >
+      <S.Label>{label}</S.Label>
+      {children}
+    </S.Field>
+  )
+}
+
+export default Field
diff --git a/packages/shared/src/molecules/CertificationForm/Header.tsx b/packages/shared/src/molecules/CertificationForm/Header.tsx
new file mode 100644
index 00000000..3c4e273f
--- /dev/null
+++ b/packages/shared/src/molecules/CertificationForm/Header.tsx
@@ -0,0 +1,44 @@
+import { DetailedHTMLProps, HTMLAttributes, useContext } from 'react'
+import * as Icon from '../../icons'
+import * as S from './style'
+import { Context } from './Context'
+
+interface Props
+  extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
+  toggle?: boolean
+  onClose?: () => void
+}
+
+const Header = ({ children, toggle, onClose, ...props }: Props) => {
+  const { hidden, setHidden } = useContext(Context)
+
+  const onClick = () => {
+    setHidden(!hidden)
+  }
+
+  return (
+    <S.Header {...props}>
+      {children}
+
+      <S.Icons>
+        <S.Icon
+          hidden={toggle}
+          onClick={onClick}
+          style={{
+            transform: hidden ? 'rotate(90deg)' : undefined,
+          }}
+        >
+          <Icon.ArrowDown />
+        </S.Icon>
+
+        {onClose && (
+          <S.Icon onClick={onClose}>
+            <Icon.XMarkOutline />
+          </S.Icon>
+        )}
+      </S.Icons>
+    </S.Header>
+  )
+}
+
+export default Header
diff --git a/packages/shared/src/molecules/CertificationForm/Title.tsx b/packages/shared/src/molecules/CertificationForm/Title.tsx
new file mode 100644
index 00000000..f212e948
--- /dev/null
+++ b/packages/shared/src/molecules/CertificationForm/Title.tsx
@@ -0,0 +1,15 @@
+import { DetailedHTMLProps, HTMLAttributes } from 'react'
+
+import * as S from './style'
+
+interface Props
+  extends DetailedHTMLProps<
+    HTMLAttributes<HTMLHeadingElement>,
+    HTMLDivElement
+  > {}
+
+const Title = ({ ...props }: Props) => {
+  return <S.Title {...props} />
+}
+
+export default Title
diff --git a/packages/shared/src/molecules/CertificationForm/index.stories.tsx b/packages/shared/src/molecules/CertificationForm/index.stories.tsx
new file mode 100644
index 00000000..744be0aa
--- /dev/null
+++ b/packages/shared/src/molecules/CertificationForm/index.stories.tsx
@@ -0,0 +1,36 @@
+import React from 'react'
+import { Meta } from '@storybook/react'
+import { Input } from '../../atoms'
+import CertificationForm from './index'
+
+const config: Meta<typeof CertificationForm> = {
+  title: 'CertificationForm',
+  component: CertificationForm,
+}
+
+export default config
+
+export const Primary = () => {
+  return (
+    <CertificationForm>
+      <CertificationForm.Header onClose={() => {}}>
+        <CertificationForm.Title>Test Form</CertificationForm.Title>
+      </CertificationForm.Header>
+      <CertificationForm.Field label='Test Field'>
+        <Input placeholder='Text' />
+      </CertificationForm.Field>
+      <CertificationForm.Field label='Test Field'>
+        <Input placeholder='Text' />
+      </CertificationForm.Field>
+      <CertificationForm.Field label='Test Field'>
+        <Input placeholder='Text' />
+      </CertificationForm.Field>
+      <CertificationForm.Field label='Test Field'>
+        <Input placeholder='Text' />
+      </CertificationForm.Field>
+      <CertificationForm.Field label='Test Field'>
+        <Input placeholder='Text' />
+      </CertificationForm.Field>
+    </CertificationForm>
+  )
+}
diff --git a/packages/shared/src/molecules/CertificationForm/index.tsx b/packages/shared/src/molecules/CertificationForm/index.tsx
new file mode 100644
index 00000000..70f3bae3
--- /dev/null
+++ b/packages/shared/src/molecules/CertificationForm/index.tsx
@@ -0,0 +1,24 @@
+import { DetailedHTMLProps, HTMLAttributes } from 'react'
+import * as S from './style'
+
+import Header from './Header'
+import Title from './Title'
+import Field from './Field'
+import { ContextProvider } from './Context'
+
+interface Props
+  extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> {}
+
+const CertificationForm = ({ ...props }: Props) => {
+  return (
+    <ContextProvider>
+      <S.Wrapper {...props} />
+    </ContextProvider>
+  )
+}
+
+CertificationForm.Header = Header
+CertificationForm.Title = Title
+CertificationForm.Field = Field
+
+export default CertificationForm
diff --git a/packages/shared/src/molecules/CertificationForm/style.ts b/packages/shared/src/molecules/CertificationForm/style.ts
new file mode 100644
index 00000000..3c84b40c
--- /dev/null
+++ b/packages/shared/src/molecules/CertificationForm/style.ts
@@ -0,0 +1,45 @@
+import styled from '@emotion/styled'
+
+export const Wrapper = styled.div`
+  max-width: 44rem;
+  border-radius: 1rem;
+  background: #fff;
+  padding: 2.5rem;
+  display: flex;
+  flex-direction: column;
+  gap: 2.5rem;
+`
+
+export const Header = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+`
+
+export const Icons = styled.div`
+  display: flex;
+  gap: 1rem;
+  align-items: center;
+`
+
+export const Icon = styled.span`
+  cursor: pointer;
+  width: 1.5rem;
+`
+
+export const Title = styled.h3`
+  ${({ theme }) => theme.title1}
+`
+
+export const Field = styled.section`
+  display: flex;
+  align-items: start;
+  display: grid;
+  grid-template-columns: 1fr 3fr;
+`
+
+export const Label = styled.label`
+  ${({ theme }) => theme.body1}
+  white-space: nowrap;
+  color: var(--N40);
+`
diff --git a/packages/shared/src/molecules/index.ts b/packages/shared/src/molecules/index.ts
index 66a77a43..bb8ecff4 100644
--- a/packages/shared/src/molecules/index.ts
+++ b/packages/shared/src/molecules/index.ts
@@ -6,6 +6,7 @@ export { default as MultiRangeSlider } from './MultiRangeSlider'
 export { default as MultiMonthPicker } from './MultiMonthPicker'
 export { default as FourImageInputs } from './FourImageInputs'
 export { default as DoubleInput } from './DoubleInput'
+export { default as CertificationForm } from './CertificationForm'
 export { default as DownloadList } from './DownloadList'
 
 export type { OptionsType } from './Select/type'

From 7fdf5474aa7d04734128ba64cb77848b9d5e66fe Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=A0=95=ED=83=9C=EA=B4=80?= <jxorhks86909763@gmail.com>
Date: Sun, 2 Jun 2024 17:00:26 +0900
Subject: [PATCH 09/16] feat: add profile-share

---
 .../molecules/ProfileSharingModal/index.tsx    |  1 -
 .../service/createSheareProfilService.ts       | 18 ++++++++++++++++++
 2 files changed, 18 insertions(+), 1 deletion(-)
 create mode 100644 packages/app/src/features/student/service/createSheareProfilService.ts

diff --git a/packages/app/src/features/student/molecules/ProfileSharingModal/index.tsx b/packages/app/src/features/student/molecules/ProfileSharingModal/index.tsx
index 15b14984..66c6db73 100644
--- a/packages/app/src/features/student/molecules/ProfileSharingModal/index.tsx
+++ b/packages/app/src/features/student/molecules/ProfileSharingModal/index.tsx
@@ -19,7 +19,6 @@ const ProfileSharingModal = ({ toggleModal, studentId }: Props) => {
   const [profileShareData, setProfileShareData] = useState<ProfileShareData[]>(
     []
   )
-
   const handleBackgroundClick = (e: React.MouseEvent) => {
     e.stopPropagation()
     toggleModal()
diff --git a/packages/app/src/features/student/service/createSheareProfilService.ts b/packages/app/src/features/student/service/createSheareProfilService.ts
new file mode 100644
index 00000000..1cc3cc3a
--- /dev/null
+++ b/packages/app/src/features/student/service/createSheareProfilService.ts
@@ -0,0 +1,18 @@
+import { axiosApi } from '@api'
+
+const createSheareProfilService = async (
+  studentId?: string,
+  periodDay?: number | undefined
+) => {
+  try {
+    const { data } = await axiosApi.post(`/server/link`, {
+      studentId: studentId,
+      periodDay: periodDay,
+    })
+    return data
+  } catch (e) {
+    return null
+  }
+}
+
+export default createSheareProfilService

From 4d0c667cfee0a5b64c8508a64fca9c0e3e177e19 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=A0=95=ED=83=9C=EA=B4=80?= <jxorhks86909763@gmail.com>
Date: Tue, 4 Jun 2024 17:16:12 +0900
Subject: [PATCH 10/16] fix: periodDay type

---
 .../service/createSheareProfilService.ts       | 18 ------------------
 1 file changed, 18 deletions(-)
 delete mode 100644 packages/app/src/features/student/service/createSheareProfilService.ts

diff --git a/packages/app/src/features/student/service/createSheareProfilService.ts b/packages/app/src/features/student/service/createSheareProfilService.ts
deleted file mode 100644
index 1cc3cc3a..00000000
--- a/packages/app/src/features/student/service/createSheareProfilService.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { axiosApi } from '@api'
-
-const createSheareProfilService = async (
-  studentId?: string,
-  periodDay?: number | undefined
-) => {
-  try {
-    const { data } = await axiosApi.post(`/server/link`, {
-      studentId: studentId,
-      periodDay: periodDay,
-    })
-    return data
-  } catch (e) {
-    return null
-  }
-}
-
-export default createSheareProfilService

From 7303e17c9a34dce6d53ebc03de6e27ad23b6512a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=A0=95=ED=83=9C=EA=B4=80?= <jxorhks86909763@gmail.com>
Date: Tue, 11 Jun 2024 17:06:13 +0900
Subject: [PATCH 11/16] fix: share modal event bubbling

---
 .../features/student/molecules/ProfileSharingModal/index.tsx | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/packages/app/src/features/student/molecules/ProfileSharingModal/index.tsx b/packages/app/src/features/student/molecules/ProfileSharingModal/index.tsx
index 66c6db73..364498bf 100644
--- a/packages/app/src/features/student/molecules/ProfileSharingModal/index.tsx
+++ b/packages/app/src/features/student/molecules/ProfileSharingModal/index.tsx
@@ -24,6 +24,11 @@ const ProfileSharingModal = ({ toggleModal, studentId }: Props) => {
     toggleModal()
   }
 
+  const handleBackgroundClick = (e: React.MouseEvent) => {
+    e.stopPropagation()
+    toggleModal()
+  }
+
   return (
     <S.ModalBackground onClick={handleBackgroundClick}>
       <S.ModalContainer onClick={(e) => e.stopPropagation()}>

From 2b020ec2f231d162d4ae1cb15ff741644113ce93 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=A0=95=ED=83=9C=EA=B4=80?= <jxorhks86909763@gmail.com>
Date: Tue, 11 Jun 2024 17:37:50 +0900
Subject: [PATCH 12/16] fix: delete handle-background-click

---
 .../features/student/molecules/ProfileSharingModal/index.tsx | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/packages/app/src/features/student/molecules/ProfileSharingModal/index.tsx b/packages/app/src/features/student/molecules/ProfileSharingModal/index.tsx
index 364498bf..66c6db73 100644
--- a/packages/app/src/features/student/molecules/ProfileSharingModal/index.tsx
+++ b/packages/app/src/features/student/molecules/ProfileSharingModal/index.tsx
@@ -24,11 +24,6 @@ const ProfileSharingModal = ({ toggleModal, studentId }: Props) => {
     toggleModal()
   }
 
-  const handleBackgroundClick = (e: React.MouseEvent) => {
-    e.stopPropagation()
-    toggleModal()
-  }
-
   return (
     <S.ModalBackground onClick={handleBackgroundClick}>
       <S.ModalContainer onClick={(e) => e.stopPropagation()}>

From 7226d1d737b88c96a31866cfeabf320e8a016215 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=A0=95=ED=83=9C=EA=B4=80?= <jxorhks86909763@gmail.com>
Date: Thu, 13 Jun 2024 23:48:53 +0900
Subject: [PATCH 13/16] fix: expirationOptions

---
 .../atoms/ProfileShareModalSection/index.tsx   | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/packages/app/src/features/student/atoms/ProfileShareModalSection/index.tsx b/packages/app/src/features/student/atoms/ProfileShareModalSection/index.tsx
index 78b6255a..91988850 100644
--- a/packages/app/src/features/student/atoms/ProfileShareModalSection/index.tsx
+++ b/packages/app/src/features/student/atoms/ProfileShareModalSection/index.tsx
@@ -13,6 +13,15 @@ interface Props {
   profileShareData: ProfileShareData[]
 }
 
+const expirationOptions = [
+  { value: '5', label: '5일' },
+  { value: '10', label: '10일' },
+  { value: '15', label: '15일' },
+  { value: '20', label: '20일' },
+  { value: '25', label: '25일' },
+  { value: '30', label: '30일' },
+]
+
 const ProfileShareModalSection = ({
   isLinkCreated,
   setPeriodDay,
@@ -35,15 +44,6 @@ const ProfileShareModalSection = ({
     setPeriodDay(parseInt(event.target.value))
   }
 
-  const expirationOptions = [
-    { value: '5', label: '5일' },
-    { value: '10', label: '10일' },
-    { value: '15', label: '15일' },
-    { value: '20', label: '20일' },
-    { value: '25', label: '25일' },
-    { value: '30', label: '30일' },
-  ]
-
   return (
     <S.ModalSectionContainer>
       <S.ModalExpirationContainer>

From c80c02332d62eb90298944c3fe1f7346b5aee6f2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=A0=95=ED=83=9C=EA=B4=80?= <jxorhks86909763@gmail.com>
Date: Fri, 14 Jun 2024 00:06:13 +0900
Subject: [PATCH 14/16] chore: link container condition

---
 .../student/atoms/ProfileShareModalSection/index.tsx        | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/packages/app/src/features/student/atoms/ProfileShareModalSection/index.tsx b/packages/app/src/features/student/atoms/ProfileShareModalSection/index.tsx
index 91988850..1d5d0b62 100644
--- a/packages/app/src/features/student/atoms/ProfileShareModalSection/index.tsx
+++ b/packages/app/src/features/student/atoms/ProfileShareModalSection/index.tsx
@@ -1,5 +1,4 @@
 import { Radio } from '@sms/shared'
-import { useRef } from 'react'
 import * as S from './style'
 
 interface ProfileShareData {
@@ -32,10 +31,9 @@ const ProfileShareModalSection = ({
     profileShareData.length > 0
       ? `https://sms.msg-team.com/student/link?token=${profileShareData[0].token}`
       : ''
-  const linkRef = useRef<HTMLDivElement>(null)
 
   const copyLinkToClipboard = async () => {
-    if (linkRef.current) {
+    if (isLinkCreated && profileShareData.length > 0) {
       await navigator.clipboard.writeText(linkUrl)
     }
   }
@@ -49,7 +47,7 @@ const ProfileShareModalSection = ({
       <S.ModalExpirationContainer>
         {isLinkCreated && profileShareData.length > 0 ? (
           <S.ModalViewLinkContainer>
-            <S.ModalViewLinkText ref={linkRef}>{linkUrl}</S.ModalViewLinkText>
+            <S.ModalViewLinkText>{linkUrl}</S.ModalViewLinkText>
             <S.ModalViewLinkCopy onClick={copyLinkToClipboard}>
               복사
             </S.ModalViewLinkCopy>

From 85b7ab3d7bf29c941df37c0aed51893d0a00287f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=A0=95=ED=83=9C=EA=B4=80?= <jxorhks86909763@gmail.com>
Date: Fri, 14 Jun 2024 00:17:52 +0900
Subject: [PATCH 15/16] chore: update funtion

---
 packages/app/src/pages/student/[studentId].tsx | 11 ++++-------
 1 file changed, 4 insertions(+), 7 deletions(-)

diff --git a/packages/app/src/pages/student/[studentId].tsx b/packages/app/src/pages/student/[studentId].tsx
index 37ad67be..6f86e3ff 100644
--- a/packages/app/src/pages/student/[studentId].tsx
+++ b/packages/app/src/pages/student/[studentId].tsx
@@ -39,15 +39,12 @@ const StudentDetailPage = ({ query, data }: Props) => {
   useStudentsParam({ query })
 
   useEffect(() => {
-    const fetchAccessService = async () => {
-      if (!data) {
-        router.push('/', '/')
-        return
-      }
-      onShow(<StudentDetailModal studentId='' student={data} />)
+    if (!data) {
+      router.push('/', '/')
+      return
     }
 
-    fetchAccessService()
+    onShow(<StudentDetailModal studentId='' student={data} />)
   }, [])
 
   return (

From 64c60174692b1dfad31cdcabbfd0a2d6400df18d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=A0=95=ED=83=9C=EA=B4=80?= <jxorhks86909763@gmail.com>
Date: Sun, 16 Jun 2024 01:11:14 +0900
Subject: [PATCH 16/16] fix: build error

---
 .../features/student/atoms/ProfileShareModalFooter/index.tsx  | 4 ++--
 .../features/student/molecules/ProfileSharingModal/index.tsx  | 2 +-
 .../src/features/student/molecules/StudentDetail/index.tsx    | 4 ++--
 .../src/features/student/service/createShareProfilService.ts  | 4 ++--
 4 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/app/src/features/student/atoms/ProfileShareModalFooter/index.tsx b/packages/app/src/features/student/atoms/ProfileShareModalFooter/index.tsx
index 5b0808bf..86d138cc 100644
--- a/packages/app/src/features/student/atoms/ProfileShareModalFooter/index.tsx
+++ b/packages/app/src/features/student/atoms/ProfileShareModalFooter/index.tsx
@@ -7,7 +7,7 @@ interface Props {
   setIsLinkCreated: (value: boolean) => void
   periodDay: number
   toggleModal: () => void
-  studentId: string
+  studentId?: string
   setProfileShareData: React.Dispatch<React.SetStateAction<ProfileShareData[]>>
 }
 
@@ -28,7 +28,7 @@ const ProfileShareModalFooter = ({
       toggleModal()
     } else {
       setIsLinkCreated(true)
-      const res = await createShareProfilService(studentId, periodDay)
+      const res = await createShareProfilService(periodDay, studentId)
       if (res) {
         setProfileShareData([res]) // 배열로 설정
       }
diff --git a/packages/app/src/features/student/molecules/ProfileSharingModal/index.tsx b/packages/app/src/features/student/molecules/ProfileSharingModal/index.tsx
index 66c6db73..6357a7dc 100644
--- a/packages/app/src/features/student/molecules/ProfileSharingModal/index.tsx
+++ b/packages/app/src/features/student/molecules/ProfileSharingModal/index.tsx
@@ -6,7 +6,7 @@ import * as S from './style'
 
 interface Props {
   toggleModal: () => void
-  studentId: string
+  studentId?: string
 }
 
 interface ProfileShareData {
diff --git a/packages/app/src/features/student/molecules/StudentDetail/index.tsx b/packages/app/src/features/student/molecules/StudentDetail/index.tsx
index b9bc6c03..50e0ed7f 100644
--- a/packages/app/src/features/student/molecules/StudentDetail/index.tsx
+++ b/packages/app/src/features/student/molecules/StudentDetail/index.tsx
@@ -9,8 +9,8 @@ import * as S from './style'
 
 interface Props {
   student: StudentDetail | null
-  studentId: string
-  role: string | undefined
+  studentId?: string
+  role?: string | undefined
 }
 
 const StudentDetail = ({ student, studentId, role }: Props) => {
diff --git a/packages/app/src/features/student/service/createShareProfilService.ts b/packages/app/src/features/student/service/createShareProfilService.ts
index 57fb5469..4abaa48d 100644
--- a/packages/app/src/features/student/service/createShareProfilService.ts
+++ b/packages/app/src/features/student/service/createShareProfilService.ts
@@ -1,8 +1,8 @@
 import { axiosApi } from '@api'
 
 const createShareProfilService = async (
-  studentId: string,
-  periodDay: number
+  periodDay: number,
+  studentId?: string
 ) => {
   try {
     const { data } = await axiosApi.post(`/server/student/link`, {