codeit-FE-18-part2 · nidor022 · Aug 16, 2025 · Aug 11, 2025 · Aug 11, 2025 · Aug 11, 2025
diff --git a/index.html b/index.html
@@ -16,6 +16,7 @@
   <body>
     <div id="root"></div>
     <div id="dropdown"></div>
+    <div id="modal"></div>
     <script type="module" src="/src/main.jsx"></script>
   </body>
 </html>
diff --git a/src/app.jsx b/src/app.jsx
@@ -1,18 +1,74 @@
 import { BrowserRouter, Route, Routes } from "react-router";
+import ModalProvider from "./components/modal/modal-provider";
 import DropdownProvider from "./components/text-field/dropdown-input/dropdown-provider";
-import MessagePage from "./pages/message-list";
+import ContentLayout from "./layouts/content-layout";
+import OnboardingLayout from "./layouts/onboarding-layout";
+import CreatePostPage from "./pages/create-post-page";
+import MainPage from "./pages/main-page";
+import MessagePage from "./pages/rolling-paper-list-page";
+import RecipientPostPage from "./pages/recipient-post-page";
+import SendMessagePage from "./pages/send-message-page";
 import TestPage from "./pages/test-page";
 
+function Provider({ children }) {
+  return (
+    <ModalProvider>
+      <DropdownProvider>{children}</DropdownProvider>
+    </ModalProvider>
+  );
+}
+
 function App() {
   return (
-    <DropdownProvider>
+    <Provider>
       <BrowserRouter>
         <Routes>
+          <Route
+            path="/"
+            element={
+              <OnboardingLayout>
+                <MainPage />
+              </OnboardingLayout>
+            }
+          />
+          <Route
+            path="/list"
+            element={
+              <OnboardingLayout>
+                <MessagePage />
+              </OnboardingLayout>
+            }
+          />
+          <Route path="/post">
+            <Route
+              index
+              element={
+                <ContentLayout>
+                  <CreatePostPage />
+                </ContentLayout>
+              }
+            />
+            <Route
+              path=":id/message"
+              element={
+                <ContentLayout>
+                  <SendMessagePage />
+                </ContentLayout>
+              }
+            />
+            <Route
+              path=":id"
+              element={
+                <ContentLayout>
+                  <RecipientPostPage />
+                </ContentLayout>
+              }
+            />
+          </Route>
           <Route path="/test-components" element={<TestPage />} />
-          <Route path="/list" element={<MessagePage />} />
         </Routes>
       </BrowserRouter>
-    </DropdownProvider>
+    </Provider>
   );
 }
 

diff --git a/src/assets/ic-check-circle-green.svg b/src/assets/ic-check-circle-green.svg
diff --git a/src/assets/ic-person.svg b/src/assets/ic-person.svg
diff --git a/src/assets/ic-xmark.svg b/src/assets/ic-xmark.svg
diff --git a/src/assets/logo.svg b/src/assets/logo.svg
diff --git a/src/components/header/header.jsx b/src/components/header/header.jsx
@@ -0,0 +1,37 @@
+import styled from "styled-components";
+import logoImg from "../../assets/logo.svg";
+import { media } from "../../utils/media";
+
+const HeaderContent = styled.div`
+  width: 100%;
+  max-width: 1200px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+`;
+
+const StyledHeader = styled.header`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 64px;
+  border-bottom: 1px solid #ededed;
+  padding: 0 24px;
+
+  ${media.mobile} {
+    padding: 0 16px;
+  }
+`;
+
+function Header({ className, children }) {
+  return (
+    <StyledHeader className={className}>
+      <HeaderContent>
+        <img src={logoImg} alt="로고" />
+        <div>{children}</div>
+      </HeaderContent>
+    </StyledHeader>
+  );
+}
+
+export default Header;
diff --git a/src/components/modal/modal-context.js b/src/components/modal/modal-context.js
@@ -0,0 +1,5 @@
+import { createContext } from "react";
+
+const ModalContext = createContext();
+
+export default ModalContext;
diff --git a/src/components/modal/modal-provider.jsx b/src/components/modal/modal-provider.jsx
@@ -0,0 +1,10 @@
+import { useState } from "react";
+import ModalContext from "./modal-context";
+
+function ModalProvider({ children }) {
+  const [showsModal, setShowsModal] = useState(false);
+  const value = { showsModal, setShowsModal };
+  return <ModalContext value={value}>{children}</ModalContext>;
+}
+
+export default ModalProvider;
diff --git a/src/components/modal/modal.jsx b/src/components/modal/modal.jsx
@@ -0,0 +1,208 @@
+import { createPortal } from "react-dom";
+import styled, { css } from "styled-components";
+import defaultProfileImg from "../../assets/ic-person.svg";
+import { useModal } from "../../hooks/use-modal";
+import { formatDate } from "../../utils/formatter";
+import Badge from "../badge/badge";
+import BADGE_TYPE from "../badge/badge-type";
+import { PrimaryButton } from "../button/button";
+import BUTTON_SIZE from "../button/button-size";
+import Colors from "../color/colors";
+
+/* ProfileImage */
+
+const profileImageStyle = css`
+  width: 56px;
+  height: 56px;
+  border-radius: 28px;
+`;
+
+const UserProfileImage = styled.div`
+  ${profileImageStyle}
+
+  img {
+    width: 100%;
+    height: 100%;
+  }
+`;
+
+const DefaultProfileImage = styled.div`
+  ${profileImageStyle}
+  background-color: ${Colors.gray(300)};
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  img {
+    width: 32px;
+    height: 32px;
+  }
+`;
+
+function ProfileImage({ profileImg }) {
+  const img = <img src={profileImg ?? defaultProfileImg} alt="프로필 사진" />;
+  return profileImg ? (
+    <UserProfileImage>{img}</UserProfileImage>
+  ) : (
+    <DefaultProfileImage>{img}</DefaultProfileImage>
+  );
+}
+
+/* UserInfo */
+
+const Name = styled.span`
+  font-size: 20px;
+  font-weight: 400;
+  line-height: 24px;
+
+  span {
+    font-weight: 700;
+  }
+`;
+
+const StyledUserInfo = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 6px;
+`;
+
+function UserInfo({ name, type }) {
+  return (
+    <StyledUserInfo>
+      <Name>
+        From.<span>{` ${name}`}</span>
+      </Name>
+      <Badge type={type} />
+    </StyledUserInfo>
+  );
+}
+
+/* UserProfile */
+
+const StyledUserProfile = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 16px;
+`;
+
+function UserProfile({ profileImg, name }) {
+  return (
+    <StyledUserProfile>
+      <ProfileImage profileImg={profileImg} />
+      <UserInfo name={name} type={BADGE_TYPE.coworker} />
+    </StyledUserProfile>
+  );
+}
+
+/* Header */
+
+const Date = styled.span`
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 20px;
+  color: ${Colors.gray(400)};
+`;
+
+const StyledHeader = styled.div`
+  width: 100%;
+  border-bottom: 1px solid ${Colors.gray(200)};
+
+  & > div {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 19px;
+  }
+`;
+
+function Header({ profileImg, name, date }) {
+  return (
+    <StyledHeader>
+      <div>
+        <UserProfile profileImg={profileImg} name={name} />
+        <Date>{formatDate(date, ".")}</Date>
+      </div>
+    </StyledHeader>
+  );
+}
+
+/* Modal */
+
+const Content = styled.p`
+  margin: 16px 0 24px;
+  height: 240px;
+  overflow: scroll;
+  font-size: 18px;
+  font-weight: 400;
+  line-height: 28px;
+  color: #5a5a5a;
+  padding-right: 16px;
+
+  &::-webkit-scrollbar {
+    width: 4px;
+    height: 0px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: ${Colors.gray(300)};
+    border-radius: 2px;
+
+    &:hover {
+      background-color: ${Colors.gray(400)};
+    }
+  }
+`;
+
+const StyledModal = styled.div`
+  background-color: white;
+  width: 600px;
+  border-radius: 16px;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.08);
+  padding: 40px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`;
+
+/* Container */
+
+const ModalContainer = styled.div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.6);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+
+function Modal({ user, date, content }) {
+  const { setShowsModal } = useModal();
+
+  const ModalPortal = ({ children }) => {
+    return createPortal(children, document.getElementById("modal"));
+  };
+
+  const handleConfirmClick = () => setShowsModal(false);
+
+  return (
+    <ModalPortal>
+      <ModalContainer>
+        <StyledModal>
+          <Header profileImg={user.profileImg} name={user.name} date={date} />
+          <Content>{content}</Content>
+          <PrimaryButton
+            size={BUTTON_SIZE.medium}
+            title="확인"
+            onClick={handleConfirmClick}
+          />
+        </StyledModal>
+      </ModalContainer>
+    </ModalPortal>
+  );
+}
+
+export default Modal;
diff --git a/src/components/text-field/dropdown-input/dropdown-input.jsx b/src/components/text-field/dropdown-input/dropdown-input.jsx
@@ -1,7 +1,7 @@
 import styled from "styled-components";
 import arrowDownImg from "../../../assets/ic-chevron-down.svg";
 import arrowUpImg from "../../../assets/ic-chevron-up.svg";
-import { useDropdown } from "../../../hooks/dropdown/use-dropdown";
+import { useDropdown } from "../../../hooks/use-dropdown";
 import INPUT_STYLES from "../input-styles";
 import Dropdown from "./dropdown";
 import DropdownOption from "./dropdown-option";