Merge branch 'develop' into 60-googlelogin

hyeiis · Mar 29, 2024 · 1ff1a11 · 1ff1a11
2 parents 656ebed + ca36d3f
commit 1ff1a11
Show file tree

Hide file tree

Showing 15 changed files with 120 additions and 112 deletions.
diff --git a/README.md b/README.md
@@ -23,6 +23,7 @@
 - 기능 구현 위주로 프로젝트를 진행하며 발생한 문제점 보완
     - 코드의 재사용성과 생산성이 떨어짐 >> 아토믹 디자인 패턴을 도입하며 앞의 문제를 해결
     - 성능에 초점을 맞추지 못해 사용자 경험이 떨어짐 >> LIGHTHOUSE 등을 이용해 성능을 검사하며 프로젝트 진행
+    - 웹 표준과 웹 접근성을 고려하지 못함 >> 웹 표준과 웹 접근성에 대해 공부하고 적용
 
 - 모든 피드 게시물을 불러와 보여주는 기존 페드 페이지의 데이터 로딩 방식이 SNS에 맞지 않을 뿐더러 사용자 경험을 떨어뜨림
     - React Query와 useInfiniteQuery로 무한 스크롤을 구현하여 해결

diff --git a/weatherfit_refactoring/src/Components/Molecules/BestThreeCodi.tsx b/weatherfit_refactoring/src/Components/Molecules/BestThreeCodi.tsx
@@ -2,50 +2,13 @@ import Link from 'next/link'
 import BoxStore, { BoxStyle } from '../Atoms/Box/BoxStore'
 import Image from 'next/image'
 
-// export default function BestThreeCodi({ data }: { data?: FEEDDATA_detail }) {
-//   if (!data || !data.images) {
-//     return (
-//       <div className="flex space-x-2 w-full justify-center cursor-pointer">
-//         <BoxStore boxStyle={BoxStyle.BOX_IMAGE}>
-//           <Image
-//             src={''}
-//             alt={`없을 경우..`}
-//             width={100}
-//             height={100}
-//             className="w-full h-full object-cover border rounded-2xl"
-//           />
-//         </BoxStore>
-//       </div>
-//     )
-//   }
-
-//   return (
-//     <div className="flex space-x-2 w-full justify-center cursor-pointer">
-//       {data.images.map((image, index) => (
-//         <Link href={`/detail/${data.boardId}`}>
-//           <BoxStore boxStyle={BoxStyle.BOX_IMAGE} key={index}>
-//             <Image
-//               src={image.imageUrl}
-//               alt={`Image ${index}`}
-//               width={100}
-//               height={100}
-//               className="w-full h-full object-cover border rounded-2xl"
-//             />
-//           </BoxStore>
-//         </Link>
-//         // 유저 정보
-//       ))}
-//     </div>
-//   )
-// }
-
-export default function BestThreeCodi({ data }: { data?: FEEDDATA_detail[] }) {
-  if (!data) {
+export default function BestThreeCodi({ data }: { data?: FEEDDATA_detail }) {
+  if (!data || !data.images) {
     return (
       <div className="flex space-x-2 w-full justify-center cursor-pointer">
         <BoxStore boxStyle={BoxStyle.BOX_IMAGE}>
           <Image
-            src={'../../../public/images/question.bmp'}
+            src={'/images/question.bmp'}
             alt={`없을 경우..`}
             width={100}
             height={100}
@@ -58,11 +21,11 @@ export default function BestThreeCodi({ data }: { data?: FEEDDATA_detail[] }) {
 
   return (
     <div className="flex space-x-2 w-full justify-center cursor-pointer">
-      {data.map((item, index) => (
-        <Link key={index} href={`/detail/${item.boardId}`}>
-          <BoxStore boxStyle={BoxStyle.BOX_IMAGE}>
+      {data.images.map((image, index) => (
+        <Link href={`/detail/${data.boardId}`}>
+          <BoxStore boxStyle={BoxStyle.BOX_IMAGE} key={index}>
             <Image
-              src={item.images[0] as unknown as string}
+              src={image.imageUrl}
               alt={`Image ${index}`}
               width={100}
               height={100}
@@ -75,3 +38,40 @@ export default function BestThreeCodi({ data }: { data?: FEEDDATA_detail[] }) {
     </div>
   )
 }
+
+// export default function BestThreeCodi({ data }: { data?: FEEDDATA_detail[] }) {
+//   if (!data) {
+//     return (
+//       <div className="flex space-x-2 w-full justify-center cursor-pointer">
+//         <BoxStore boxStyle={BoxStyle.BOX_IMAGE}>
+//           <Image
+//             src={'../../../public/images/question.bmp'}
+//             alt={`없을 경우..`}
+//             width={100}
+//             height={100}
+//             className="w-full h-full object-cover border rounded-2xl"
+//           />
+//         </BoxStore>
+//       </div>
+//     )
+//   }
+
+//   return (
+//     <div className="flex space-x-2 w-full justify-center cursor-pointer">
+//       {data.map((item, index) => (
+//         <Link key={index} href={`/detail/${item.boardId}`}>
+//           <BoxStore boxStyle={BoxStyle.BOX_IMAGE}>
+//             <Image
+//               src={item.images[0] as unknown as string}
+//               alt={`Image ${index}`}
+//               width={100}
+//               height={100}
+//               className="w-full h-full object-cover border rounded-2xl"
+//             />
+//           </BoxStore>
+//         </Link>
+//         // 유저 정보
+//       ))}
+//     </div>
+//   )
+// }
diff --git a/weatherfit_refactoring/src/Components/Molecules/Comment.tsx b/weatherfit_refactoring/src/Components/Molecules/Comment.tsx
@@ -273,7 +273,7 @@ export default function Comment({
             style="my-[5px]"
             inputStyle="w-[285px] h-[30px]"
             btnText="게시"
-            place="닉네임(으)로 작성..."
+            place="황동준(으)로 작성..."
           />
         </div>
       )}

diff --git a/weatherfit_refactoring/src/Components/Molecules/CommentModal.tsx b/weatherfit_refactoring/src/Components/Molecules/CommentModal.tsx
@@ -109,7 +109,7 @@ export default function CommentModal({ onClickFunction }: Props) {
           style="m-[10px] absolute bottom-[5px]"
           inputStyle="w-[325px] h-[30px]"
           btnText="게시"
-          place="닉네임(으)로 작성..."
+          place="황동준(으)로 작성..."
         />
       </div>
     </div>

diff --git a/weatherfit_refactoring/src/Components/Molecules/DetailImage.tsx b/weatherfit_refactoring/src/Components/Molecules/DetailImage.tsx
@@ -17,15 +17,15 @@ export default function DetailImage({
 
   return (
     <div className="flex justify-center items-center">
-      <div className="relative w-[250px] h-[350px]">
+      <div className="relative w-[350px] h-[350px]">
         <Image
           key={images[index].imageId}
           src={images[index].imageUrl}
           layout="fill"
           objectFit="cover"
           sizes="auto"
           alt={`image-${index}`}
-          className="rounded-xl m-2"
+          className="rounded-xl"
         />
       </div>
       {images.length > 1 && (

diff --git a/weatherfit_refactoring/src/Components/Molecules/DetailProfile.tsx b/weatherfit_refactoring/src/Components/Molecules/DetailProfile.tsx
@@ -12,15 +12,24 @@ export default function DetailProfile({
   return (
     <div className="flex items-center font-NanumSquareRound mt-5">
       <Image
-        src={userData.userImage}
+        src={
+          'https://cdnimg.melon.co.kr/cm2/artistcrop/images/002/61/143/261143_20210325180240_500.jpg?61e575e8653e5920470a38d1482d7312/melon/optimize/90'
+        }
         width={50}
         height={50}
         alt="profile"
         className="rounded-full"
       />
+      {/* <Image
+        src={userData.userImage}
+        width={50}
+        height={50}
+        alt="profile"
+        className="rounded-full"
+      /> */}
       <div className="flex-col ml-3 pb-1">
         <p className="text-lg">{nickName}</p>
-        <p className="text-xs text-gray-400">@user_one</p>
+        <p className="text-xs text-gray-400">@user1</p>
         {/* <p className="text-xs text-gray-400">여기 아이디 들어가면 되려나</p> */}
       </div>
     </div>

diff --git a/weatherfit_refactoring/src/Components/Molecules/Header.tsx b/weatherfit_refactoring/src/Components/Molecules/Header.tsx
@@ -29,7 +29,7 @@ export default function Header({
     title === '옷늘날씨' ? () => router.push('/') : undefined // 또는 다른 함수
 
   return (
-    <div className="relative flex items-center justify-between h-[50px] m-0 pb-1 bg-white">
+    <header className="relative flex items-center justify-between h-[50px] m-0 pb-1 bg-white">
       <IconStore
         iconStyle={IconStyle.PREV2}
         size={20}
@@ -59,6 +59,6 @@ export default function Header({
       ) : (
         <div className="hidden"></div>
       )}
-    </div>
+    </header>
   )
 }
diff --git a/weatherfit_refactoring/src/Components/Molecules/NavBar.tsx b/weatherfit_refactoring/src/Components/Molecules/NavBar.tsx
@@ -3,7 +3,7 @@ import NavBarBox from './NavBarBox'
 export default function NavBar() {
   return (
     <footer
-      className="fixed bottom-[35px] mx-[5px] flex justify-around items-center bg-white w-[370px] h-[52px] border border-black rounded-[30px] z-10 py-[5px]"
+      className="fixed bottom-[15px] mx-[5px] flex justify-around items-center bg-white w-[370px] h-[52px] border border-black rounded-[30px] z-10 py-[5px]"
       style={{ boxShadow: '7px 7px 1px' }}>
       <NavBarBox iconStyle="HOME" title="홈" url="/" />
       <NavBarBox iconStyle="SEARCH" title="구경" url="/feed" />

diff --git a/weatherfit_refactoring/src/Components/Molecules/WeatherInfo.tsx b/weatherfit_refactoring/src/Components/Molecules/WeatherInfo.tsx
@@ -106,7 +106,7 @@ export default function WeatherInfo() {
   console.log('주소: ', address)
 
   return (
-    <div className="relative h-[300px] flex justify-center">
+    <article className="relative h-[300px] flex justify-center">
       {weat && (
         <Image
           src={`/images/${weatherImage[weat]}`}
@@ -135,6 +135,6 @@ export default function WeatherInfo() {
           최고 {temperatureMax}℃ / 최저 {temperatureMin}℃
         </TextStore>
       </div>
-    </div>
+    </article>
   )
 }
diff --git a/weatherfit_refactoring/src/Components/Organisms/EditOrganism.tsx b/weatherfit_refactoring/src/Components/Organisms/EditOrganism.tsx
@@ -16,15 +16,15 @@ export default async function EditOrganism({ boardId }: BOARDID) {
   return (
     <div className="h-screen">
       <EditHeader boardId={boardId} />
-      <div className="mx-5 h-full mt-[50px]">
+      <main className="mx-5 h-full mt-[50px]">
         <div className="flex-col items-center justify-center mb-7">
           <EditWeather weatherIcon={data.weatherIcon} />
           <ImageUpload images={data.images} mode="edit" />
         </div>
         <TextAreaMolecule initContent={data.content} mode="edit" />
         <hr />
         <SelectCategory initCategory={data.category} mode="edit" />
-      </div>
+      </main>
     </div>
   )
 }
diff --git a/weatherfit_refactoring/src/Components/Organisms/MainOrganism.tsx b/weatherfit_refactoring/src/Components/Organisms/MainOrganism.tsx
@@ -12,41 +12,42 @@ export default function MainOrganism() {
   const { temperatureMax } = WeatherTempMax()
   const { temperatureMin } = WeatherTempMin()
 
-  // const [data, setData] = useState<FEEDDATA_detail | undefined>([undefined])
-  const [data, setData] = useState<FEEDDATA_detail[]>(
-    bestCodi as unknown as FEEDDATA_detail[],
-  )
-  console.log(data)
-
-  // useEffect(() => {
-  //   const getBestCodi = async () => {
-  //     try {
-  //       const response = await fetch(
-  //         `https://www.jerneithe.site/board/tops?temp_min=${temperatureMax}&temp_max=${temperatureMin}`,
-  //         {
-  //           method: 'GET',
-  //         },
-  //       )
-
-  //       const data = await response.json()
-  //       setData(data)
-  //     } catch (error) {
-  //       console.error(error)
-  //     }
-  //   }
-  //   getBestCodi()
-  // }, [temperatureMax, temperatureMin])
-
-  // console.log(temperatureMax, temperatureMin)
+  const [data, setData] = useState<FEEDDATA_detail | undefined>()
+  // const [data, setData] = useState<FEEDDATA_detail[]>(
+  //   bestCodi as unknown as FEEDDATA_detail[],
+  // )
+  // console.log(data)
+
+  useEffect(() => {
+    const getBestCodi = async () => {
+      try {
+        const response = await fetch(
+          `https://www.jerneithe.site/board/tops?temp_min=${temperatureMax}&temp_max=${temperatureMin}`,
+          {
+            method: 'GET',
+          },
+        )
+
+        const data = await response.json()
+        setData(data)
+      } catch (error) {
+        console.error(error)
+      }
+    }
+    getBestCodi()
+  }, [temperatureMax, temperatureMin])
+
+  console.log(temperatureMax, temperatureMin)
 
   return (
-    <>
+    <main>
       <div className="w-full  flex flex-col items-center mt-[40px]">
         <TextStore
           textStyle={TextStyle.NANUM_TEXT}
           style="mb-[20px] text-[20px]">
           다른 캐스터들은 이렇게 입었어요!
         </TextStore>
+
         <Image
           src="https://cdn-icons-png.flaticon.com/128/8371/8371286.png"
           alt="crown"
@@ -56,6 +57,6 @@ export default function MainOrganism() {
         <span className=" font-NanumSquareRound">BEST 3</span>
       </div>
       <BestThreeCodi data={data} />
-    </>
+    </main>
   )
 }
diff --git a/weatherfit_refactoring/src/app/detail/[id]/edit/page.tsx b/weatherfit_refactoring/src/app/detail/[id]/edit/page.tsx
@@ -1,5 +1,9 @@
 import EditOrganism from '@/Components/Organisms/EditOrganism'
 
+// type Params {
+
+// }
+
 export default function Edit({ params }: { params: { id: string } }) {
   const { id: boardId } = params
 

diff --git a/weatherfit_refactoring/src/app/detail/[id]/page.tsx b/weatherfit_refactoring/src/app/detail/[id]/page.tsx
@@ -1,4 +1,5 @@
 import Header from '@/Components/Molecules/Header'
+import NavBar from '@/Components/Molecules/NavBar'
 import WeatherNavbar from '@/Components/Molecules/WeatherNavbar'
 import DetailOrganism from '@/Components/Organisms/DetailOrganism'
 
@@ -10,6 +11,7 @@ export default function Detail({ params }: { params: { id: BOARDID } }) {
       <Header title="옷늘날씨" />
       <WeatherNavbar />
       <DetailOrganism boardId={boardId} />
+      <NavBar />
     </div>
   )
 }
diff --git a/weatherfit_refactoring/src/app/mypage/page.tsx b/weatherfit_refactoring/src/app/mypage/page.tsx
@@ -103,39 +103,31 @@ export default function Mypage() {
 
   return (
     <>
-      <ProfileHeader />
-      {userInfo && (
-        <ProfileInfo
-          profileImage={profileImage}
-          userInfo={userInfo}
-          myPost={myPostData}
-          myLikePost={myLikePostData}
-        />
-      )}
-      <ProfileBoard myPost={myPostData} myLikePost={myLikePostData} />
-      <NavBar />
-      {/* {loading ? (
+      {loading ? (
         <Loading />
       ) : (
         <>
           {check ? (
             <>
               <ProfileHeader />
-              {userInfo && (
-                <ProfileInfo
-                  profileImage={profileImage}
-                  userInfo={userInfo}
-                  myPost={myPostData}
-                  myLikePost={myLikePostData}
-                />
-              )}
-              <ProfileBoard myPost={myPostData} myLikePost={myLikePostData} />
+              <main>
+                {userInfo && (
+                  <ProfileInfo
+                    profileImage={profileImage}
+                    userInfo={userInfo}
+                    myPost={myPostData}
+                    myLikePost={myLikePostData}
+                  />
+                )}
+                <ProfileBoard myPost={myPostData} myLikePost={myLikePostData} />
+                <NavBar />
+              </main>
             </>
           ) : (
             <NoLogin />
           )}
         </>
-      )} */}
+      )}
     </>
   )
 }