[Fix] kdt-8-4#3, kdt-8-4#14 게시물 관련 웹 크기 맞게 디자인 수정

hyeiis · Mar 31, 2024 · c42a38d · c42a38d
1 parent b8a6a4a
commit c42a38d
Show file tree

Hide file tree

Showing 9 changed files with 40 additions and 54 deletions.
diff --git a/weatherfit_refactoring/src/Components/Molecules/header/EditHeader.tsx b/weatherfit_refactoring/src/Components/Molecules/header/EditHeader.tsx
@@ -65,7 +65,7 @@ export default function EditHeader(boardId: BOARDID) {
   }
 
   return (
-    <div className="fixed w-full top-0 z-10">
+    <div className="absolute w-full top-0 z-10">
       <Header
         title="수정하기"
         buttonStyleCase={ButtonStyle.TEXT_BTN}

diff --git a/weatherfit_refactoring/src/Components/Molecules/header/UploadHeader.tsx b/weatherfit_refactoring/src/Components/Molecules/header/UploadHeader.tsx
@@ -59,7 +59,7 @@ export default function UploadHeader() {
   }
 
   return (
-    <div className="fixed w-full top-0 z-10">
+    <div className="absolute w-full top-0 z-10">
       <Header
         title="등록하기"
         buttonStyleCase={ButtonStyle.TEXT_BTN}

diff --git a/weatherfit_refactoring/src/Components/Molecules/post/EditWeather.tsx b/weatherfit_refactoring/src/Components/Molecules/post/EditWeather.tsx
diff --git a/weatherfit_refactoring/src/Components/Molecules/post/UploadWeather.tsx b/weatherfit_refactoring/src/Components/Molecules/post/UploadWeather.tsx
diff --git a/weatherfit_refactoring/src/Components/Molecules/post/Weather.tsx b/weatherfit_refactoring/src/Components/Molecules/post/Weather.tsx
@@ -0,0 +1,28 @@
+import Image from 'next/image'
+import { WeatherIcon } from '@/Store/WeatherIcon'
+
+export default function Weather({
+  initialWeatherIcon,
+}: {
+  initialWeatherIcon?: FEEDDATA_detail['weatherIcon']
+}) {
+  const { weatherIcon } = WeatherIcon()
+  return (
+    <div className="flex mb-3 items-center w-fit">
+      <p className="font-gmarketsans pt-[5px] mr-3 text-sm">
+        {initialWeatherIcon ? '업로드 당시 날씨' : '업로드 날씨'}
+      </p>
+      <Image
+        src={
+          initialWeatherIcon
+            ? initialWeatherIcon
+            : `https://openweathermap.org/img/wn/${weatherIcon}.png`
+        }
+        alt="날씨"
+        width={20}
+        height={20}
+        loading="lazy"
+      />
+    </div>
+  )
+}
diff --git a/weatherfit_refactoring/src/Components/Organisms/edit/EditOrganism.tsx b/weatherfit_refactoring/src/Components/Organisms/edit/EditOrganism.tsx
@@ -1,4 +1,4 @@
-import EditWeather from '../../Molecules/post/EditWeather'
+import Weather from '../../Molecules/post/Weather'
 import TextAreaMolecule from '../../Molecules/post/TextAreaMolecule'
 import EditHeader from '../../Molecules/header/EditHeader'
 import ImageUpload from '../../Molecules/post/ImageUpload'
@@ -16,9 +16,9 @@ export default async function EditOrganism({ boardId }: BOARDID) {
   return (
     <div className="h-screen">
       <EditHeader boardId={boardId} />
-      <main className="mx-5 h-full mt-[50px]">
+      <main className="mx-5 h-full mt-[50px] overflow-y-auto">
         <div className="flex-col items-center justify-center mb-7">
-          <EditWeather weatherIcon={data.weatherIcon} />
+          <Weather initialWeatherIcon={data.weatherIcon} />
           <ImageUpload images={data.images} mode="edit" />
         </div>
         <TextAreaMolecule initContent={data.content} mode="edit" />

diff --git a/weatherfit_refactoring/src/Components/WebView/WebView.tsx b/weatherfit_refactoring/src/Components/WebView/WebView.tsx
@@ -19,7 +19,9 @@ export default function WebView({ children }: { children: ReactNode }) {
             디자인 같이 해주세요ㅠㅠ
           </div>
         </aside>
-        <div className="w-[400px] min-h-[844px] border-2">{children}</div>
+        <div className="w-[400px] min-h-[844px] border-2 relative">
+          {children}
+        </div>
       </div>
     </div>
   )

diff --git a/weatherfit_refactoring/src/app/feed/detail/[id]/edit/page.tsx b/weatherfit_refactoring/src/app/feed/detail/[id]/edit/page.tsx
@@ -8,7 +8,7 @@ export default function Edit({ params }: { params: { id: string } }) {
   const { id: boardId } = params
 
   return (
-    <div className="h-screen">
+    <div className="h-screen ">
       <EditOrganism boardId={boardId} />
     </div>
   )

diff --git a/weatherfit_refactoring/src/app/upload/page.tsx b/weatherfit_refactoring/src/app/upload/page.tsx
@@ -4,15 +4,14 @@ import ImageUpload from '@/Components/Molecules/post/ImageUpload'
 import TextAreaMolecule from '@/Components/Molecules/post/TextAreaMolecule'
 import SelectCategory from '@/Components/Molecules/post/SelectCategory'
 import UploadHeader from '@/Components/Molecules/header/UploadHeader'
-import UploadWeather from '@/Components/Molecules/post/UploadWeather'
+import Weather from '@/Components/Molecules/post/Weather'
 import Loading from '@/Components/Molecules/check/Loading'
 import NoLogin from '@/Components/Molecules/check/NoLogin'
 import { LoadingStore } from '@/Store/Loading'
 import { CheckStore } from '@/Store/Check'
 import { AuthTokenStore } from '@/Store/AuthToken'
 import { loginCheck } from '@/utils/function/utilFunction'
 import { useEffect } from 'react'
-import NavBar from '@/Components/Molecules/bar/NavBar'
 
 export default function Upload() {
   const { loading, setLoading } = LoadingStore()
@@ -33,9 +32,9 @@ export default function Upload() {
           {check ? (
             <div className="h-screen">
               <UploadHeader />
-              <main className="mx-5 h-full mt-[50px]">
+              <main className="mx-5 h-full mt-[50px] overflow-y-auto">
                 <section className="flex-col items-center justify-center mb-7">
-                  <UploadWeather />
+                  <Weather />
                   <ImageUpload mode="upload" />
                 </section>
                 <TextAreaMolecule mode="upload" />