🔧 FIx : 충돌수정 (#20)

prgrms-fe-devcourse · Oct 2, 2024 · f37cec9 · f37cec9
2 parents a394ba6 + 88c11bb
commit f37cec9
Show file tree

Hide file tree

Showing 22 changed files with 889 additions and 0 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -34,6 +34,25 @@ const App = () => {
       <Route 
         path="*" 
         element={<Navigate to={isFirstVisit ? "/splash" : "/"} replace />} 
+     <Route
+        path='/postdetail'
+        element={<PostDetailPage />}
+      />
+      <Route
+        path='/my'
+        element={<MyPage />}
+      />
+      <Route
+        path='/create-post'
+        element={<PostCreate />}
+      />
+      <Route
+        path='/notification'
+        element={<NotificationPage />}
+      />
+      <Route
+        path='/'
+        element={<PostList />}
       />
     </Routes>
   )

diff --git a/src/pages/MyPage/Component/InfoSection/InfoSection.css b/src/pages/MyPage/Component/InfoSection/InfoSection.css
@@ -1,3 +1,4 @@
+<<<<<<< HEAD
 .info-card{
   display: flex;
   padding: 1rem;
@@ -28,3 +29,35 @@
     color: #7d7d7d
   }
 }
+=======
+.info-card{
+  display: flex;
+  padding: 1rem;
+  flex-direction: column;
+  gap: 1rem;
+  border-bottom: 1px solid #eeeeee;
+
+  .info-title {
+    font-size: 1.2rem;
+    font-weight: bold;
+  }
+
+  .info-item {
+    display: flex;
+    justify-content: space-between;
+    font-size: 1rem;
+    color: #393939;
+  }
+
+  .info-edit{
+    display: flex;
+    justify-content: center;
+    font-size: 1rem;
+    color: #393939;
+  }
+
+  .value{
+    color: #7d7d7d
+  }
+}
+>>>>>>> develop
diff --git a/src/pages/MyPage/Component/InfoSection/InfoSection.tsx b/src/pages/MyPage/Component/InfoSection/InfoSection.tsx
@@ -1,3 +1,4 @@
+<<<<<<< HEAD
 import './InfoSection.css'
 
 interface SectionProps {
@@ -15,3 +16,22 @@ const InfoSection: React.FC<SectionProps> = ({ title, children }) => {
 }
 
 export default InfoSection
+=======
+import './InfoSection.css'
+
+interface SectionProps {
+  title: string
+  children: React.ReactNode
+}
+
+const InfoSection: React.FC<SectionProps> = ({ title, children }) => {
+  return (
+    <div className='info-card'>
+      <p className='info-title'>{title}</p>
+      {children}
+    </div>
+  )
+}
+
+export default InfoSection
+>>>>>>> develop
diff --git a/src/pages/MyPage/Component/ModalComponent/ModalComponent.css b/src/pages/MyPage/Component/ModalComponent/ModalComponent.css
@@ -1,3 +1,4 @@
+<<<<<<< HEAD
 .modal-section{
   display: flex;
   width: 100%;
@@ -42,3 +43,49 @@
     margin-left: 35px;
   }
 }
+=======
+.modal-section{
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 1.2rem;
+
+  .modal-instruction{
+    margin-top: 1.5rem;
+    font-size: 1.3rem;
+    font-weight: bold;
+  }
+
+  .modal-label{
+  font-size:0.9rem;
+  }
+
+  .modal-check{
+    font-size: 0.5rem;
+    color:#FD3747;
+    font-weight: bold;
+  }
+
+  .modal-input {
+    width: 430px;
+    height: 40px;
+    padding: 1rem;
+    margin-top: 0.5rem;
+    background-color: #ededed;
+    border: none;
+    border-radius: 5px;
+  }
+
+  .search-button{
+    position: absolute;
+    right: 50px;
+    bottom: 50px;
+  }
+
+  .modal-input.active{
+    margin-left: 35px;
+  }
+}
+>>>>>>> develop
diff --git a/src/pages/MyPage/Component/ModalComponent/ModalComponent.tsx b/src/pages/MyPage/Component/ModalComponent/ModalComponent.tsx
@@ -1,3 +1,4 @@
+<<<<<<< HEAD
 import BottomModal from '@/components/BottomModal/BottomModal'
 import './ModalComponent.css'
 
@@ -38,3 +39,45 @@ const ModalComponent = ({
 }
 
 export default ModalComponent
+=======
+import BottomModal from '@/components/BottomModal/BottomModal'
+import './ModalComponent.css'
+
+interface ModalProps {
+  isOpen: boolean
+  onClose: () => void
+  buttonText: string
+  instruction: string
+  detail?: string
+  filter?: boolean
+  children: React.ReactNode
+}
+
+const ModalComponent = ({
+  isOpen,
+  onClose,
+  buttonText,
+  instruction,
+  detail,
+  children,
+}: ModalProps) => {
+  return (
+    <>
+      {isOpen && (
+        <BottomModal
+          onClick={onClose}
+          buttonText={buttonText}
+        >
+          <div className='modal-section'>
+            <p className='modal-instruction'>{instruction}</p>
+            {detail && <p className='modal-label'>{detail}</p>}
+            <div className='modal-inner-section'>{children}</div>
+          </div>
+        </BottomModal>
+      )}
+    </>
+  )
+}
+
+export default ModalComponent
+>>>>>>> develop
diff --git a/src/pages/MyPage/MyPage.css b/src/pages/MyPage/MyPage.css
@@ -1,3 +1,4 @@
+<<<<<<< HEAD
 .user-info{
   display: flex;
   height: 5rem;
@@ -9,4 +10,17 @@
     font-size: 1.6rem;
     font-weight: bold;
   }
+=======
+.user-info{
+  display: flex;
+  height: 5rem;
+  justify-content: center;
+  align-items: center;
+  border-bottom: 1px solid #eeeeee;
+
+  .info-title{
+    font-size: 1.6rem;
+    font-weight: bold;
+  }
+>>>>>>> develop
 }
diff --git a/src/pages/MyPage/MyPage.tsx b/src/pages/MyPage/MyPage.tsx
@@ -1,3 +1,4 @@
+<<<<<<< HEAD
 import MainPageLayout from '@/layouts/MainPageLayout/MainPageLayout'
 import ProfileSection from './MyPageSection/ProfileSection'
 import AccountSection from './MyPageSection/AccountSection'
@@ -19,3 +20,26 @@ const MyPage = () => {
 }
 
 export default MyPage
+=======
+import MainPageLayout from '@/layouts/MainPageLayout/MainPageLayout'
+import ProfileSection from './MyPageSection/ProfileSection'
+import AccountSection from './MyPageSection/AccountSection'
+import OtherSection from './MyPageSection/OtherSection'
+
+const MyPage = () => {
+  return (
+    <MainPageLayout>
+      <section>
+        <div className='user-info'>
+          <p className='info-title'>내 정보</p>
+        </div>
+        <ProfileSection />
+        <AccountSection />
+        <OtherSection />
+      </section>
+    </MainPageLayout>
+  )
+}
+
+export default MyPage
+>>>>>>> develop
diff --git a/src/pages/MyPage/MyPageSection/AccountSection.tsx b/src/pages/MyPage/MyPageSection/AccountSection.tsx
@@ -1,3 +1,4 @@
+<<<<<<< HEAD
 import { useState } from 'react'
 import ModalComponent from '../Component/ModalComponent/ModalComponent'
 import InfoSection from '../Component/InfoSection/InfoSection'
@@ -63,3 +64,70 @@ const AccountSection = () => {
 }
 
 export default AccountSection
+=======
+import { useState } from 'react'
+import ModalComponent from '../Component/ModalComponent/ModalComponent'
+import InfoSection from '../Component/InfoSection/InfoSection'
+import '../MyPage.css'
+
+const AccountSection = () => {
+  const [isModalOpen, setIsModalOpen] = useState(false)
+  const [oldPassword, setOldPassword] = useState('')
+  const [newPassword, setNewPassword] = useState('')
+  const [confirmPassword, setConfirmPassword] = useState('')
+
+  const handleOpenModal = () => setIsModalOpen(true)
+  const handleCloseModal = () => {
+    setIsModalOpen(false)
+    setOldPassword('')
+    setNewPassword('')
+    setConfirmPassword('')
+  }
+
+  return (
+    <InfoSection title='계정'>
+      <p className='info-item'>
+        아이디<span className='value'>djfkd</span>
+      </p>
+      <button
+        className='info-item'
+        onClick={handleOpenModal}
+      >
+        비밀번호 변경
+      </button>
+      <ModalComponent
+        isOpen={isModalOpen}
+        onClose={handleCloseModal}
+        buttonText={
+          oldPassword || newPassword || confirmPassword ? '확인' : '닫기'
+        }
+        instruction='새로운 비밀번호를 입력해주세요!'
+      >
+        <p className='modal-label'>기존 비밀번호</p>
+        <input
+          type='password'
+          className='modal-input'
+          value={oldPassword}
+          onChange={(e) => setOldPassword(e.target.value)}
+        />
+        <p className='modal-label'>새로운 비밀번호</p>
+        <input
+          type='password'
+          className='modal-input'
+          value={newPassword}
+          onChange={(e) => setNewPassword(e.target.value)}
+        />
+        <p className='modal-label'>비밀번호 확인</p>
+        <input
+          type='password'
+          className='modal-input'
+          value={confirmPassword}
+          onChange={(e) => setConfirmPassword(e.target.value)}
+        />
+      </ModalComponent>
+    </InfoSection>
+  )
+}
+
+export default AccountSection
+>>>>>>> develop
diff --git a/src/pages/MyPage/MyPageSection/OtherSection.tsx b/src/pages/MyPage/MyPageSection/OtherSection.tsx
@@ -1,3 +1,4 @@
+<<<<<<< HEAD
 import { useState } from 'react'
 import ModalComponent from '../Component/ModalComponent/ModalComponent'
 import InfoSection from '../Component/InfoSection/InfoSection'
@@ -41,3 +42,48 @@ const OtherSection = () => {
 }
 
 export default OtherSection
+=======
+import { useState } from 'react'
+import ModalComponent from '../Component/ModalComponent/ModalComponent'
+import InfoSection from '../Component/InfoSection/InfoSection'
+import '../MyPage.css'
+
+const OtherSection = () => {
+  const [isModalOpen, setIsModalOpen] = useState(false)
+  const [deletePassword, setDeletePassword] = useState('')
+
+  const handleOpenModal = () => setIsModalOpen(true)
+  const handleCloseModal = () => {
+    setIsModalOpen(false)
+    setDeletePassword('')
+  }
+
+  return (
+    <InfoSection title='기타'>
+      <button
+        className='info-item'
+        onClick={handleOpenModal}
+      >
+        회원탈퇴
+      </button>
+      <ModalComponent
+        isOpen={isModalOpen}
+        onClose={handleCloseModal}
+        buttonText={deletePassword ? '확인' : '닫기'}
+        instruction='탈퇴 하시겠습니까?'
+      >
+        <p className='modal-label'>비밀번호 확인</p>
+        <input
+          type='password'
+          className='modal-input'
+          value={deletePassword}
+          onChange={(e) => setDeletePassword(e.target.value)}
+        />
+      </ModalComponent>
+      <p className='info-item'>로그아웃</p>
+    </InfoSection>
+  )
+}
+
+export default OtherSection
+>>>>>>> develop