[fix] #36 코드 수정

weatherfit_refactoring/contexts/AuthContext.tsx

@@ -0,0 +1,34 @@
+import React, { createContext, useContext, useState, ReactNode } from 'react'
+
+interface AuthContextType {
+  isLoggedIn: boolean
+  login: (email: string, token: string) => void
+}
+
+// 초기값 undefined
+const AuthContext = createContext<AuthContextType | undefined>(undefined)
+
+// 커스텀 훅 인증 없을 때 오류 알림
+export const useAuth = () => {
+  const context = useContext(AuthContext)
+  if (!context) {
+    throw new Error('useAuth must be used within an AuthProvider')
+  }
+  return context
+}
+
+export const AuthProvider = ({ children }: { children: ReactNode }) => {
+  const [isLoggedIn, setIsLoggedIn] = useState<boolean>(false)
+
+  const login = (email: string, token: string) => {
+    localStorage.setItem('user_email', email)
+    document.cookie = `accessToken=${token}; path=/`
+    setIsLoggedIn(true)
+  }
+
+  return (
+    <AuthContext.Provider value={{ isLoggedIn, login }}>
+      {children}
+    </AuthContext.Provider>
+  )
+}

weatherfit_refactoring/src/Components/Atoms/Button/ButtonStore.tsx

@@ -72,7 +72,7 @@ export default function ButtonStore({
       case ButtonStyle.CATEGORY_BTN_Y:
         return (
           <button
-            className={`${style} bg-yellow-200 border border-black rounded-2xl px-2 py-0.5`}
+            className={`${style} bg-yellow-200 border border-black rounded-2xl pb-[5px]`}
             onClick={onClickFunction}>
             {children}
           </button>

weatherfit_refactoring/src/Components/Atoms/Text/TextStore.tsx

@@ -0,0 +1,26 @@
+export enum TextStyle {
+  GMARKET_TEXT = 'GMARKET_TEXT',
+  NANUM_TEXT = 'NANUM_TEXT',
+  CAFE_TEXT = 'CAFA_TEXT',
+}
+
+interface Props {
+  textStyle: TextStyle
+  style?: string
+  children?: React.ReactNode
+}
+
+export default function TextStore({ textStyle, style, children }: Props) {
+  const selectText = (): React.ReactNode => {
+    switch (textStyle) {
+      case TextStyle.GMARKET_TEXT:
+        return <p className={`${style} font-gmarketsans`}>{children}</p>
+      case TextStyle.NANUM_TEXT:
+        return <p className={`${style} font-NanumSquareRound`}>{children}</p>
+      case TextStyle.CAFE_TEXT:
+        return <p className={`${style} font-Cafe24SsurroundAir`}>{children}</p>
+    }
+  }
+
+  return <>{selectText()}</>
+}

weatherfit_refactoring/src/Components/Molecules/CommentModal.tsx

@@ -99,12 +99,14 @@ export default function CommentModal({ onClickFunction }: Props) {
   return (
     <div className="fixed top-0 left-0 m-0 w-[100%] h-[100%] bg-[#bababa4f] z-[100]">
       <div className="fixed bottom-0 bg-[#ffffff] w-[390px] h-[65%] rounded-t-lg z-[200] font-Cafe24SsurroundAir">
-        <div className="flex justify-between m-[5px] font-bold">
+        <div className="flex justify-between my-[10px] mx-[5px] font-bold">
           <p className="w-[100%] text-center">댓글</p>
-          <p onClick={onClickFunction}>X</p>
+          <p className="cursor-pointer" onClick={onClickFunction}>
+            X
+          </p>
         </div>
         <hr />
-        <div className="m-[10px] h-[320px] overflow-auto">
+        <div className="m-[10px] h-[79%] overflow-auto">
           {/* 댓글 목록 부분 */}
           {comments
             .filter(comment => comment.status !== 0)

weatherfit_refactoring/src/Components/Molecules/Header.tsx

@@ -46,9 +46,9 @@ export default function Header({
         <ButtonStore
           buttonStyle={buttonStyleCase}
           style="mr-[10px] font-NanumSquareRound text-xs"
-          btnText={btnText}
-          onClickFunction={onClickFunction}
-        />
+          onClickFunction={onClickFunction}>
+          {btnText}
+        </ButtonStore>
       ) : iconStyleCase ? (
         <IconStore
           iconStyle={iconStyleCase}

weatherfit_refactoring/src/Components/Molecules/LikeAndComment.tsx

@@ -3,7 +3,7 @@ import CommentIcon from './CommentIcon'
 
 export default function LikeAndComment() {
   return (
-    <div className="flex space-x-3">
+    <div className="flex">
       <IconStore iconStyle={IconStyle.UNLIKE} size={25} />
       <CommentIcon />
       {/* <IconStore iconStyle={IconStyle.COMMENTS} size={25} /> */}

weatherfit_refactoring/src/Components/Molecules/LoginForm.tsx

@@ -4,11 +4,13 @@ import InputStore, { InputStyle } from '@/Components/Atoms/Input/InputStore'
 import { confirmAlert } from '@/utils/function/utilFunction'
 import { useRouter } from 'next/navigation'
 import { FormEvent, useState } from 'react'
+import { useAuth } from '../../../contexts/AuthContext'
 
 export default function LoginForm() {
   const [email, setEmail] = useState<string>('')
   const [password, setPassword] = useState<string>('')
   const router = useRouter()
+  const { login } = useAuth()
 
   const handleLogin = async (e: FormEvent) => {
     e.preventDefault()
@@ -30,16 +32,11 @@ export default function LoginForm() {
         body: JSON.stringify({ email, password }),
       })
       const loginRes = await res.json()
-      console.log('로그인 res: ', res)
       console.log('로그인 loginRes: ', loginRes)
 
-      confirmAlert(`${loginRes.nickname}님 환영합니다!`)
-
-      // 토큰을 쿠키에 저장
-      document.cookie = `accessToken=${loginRes.token}; path=/`
+      login(loginRes.email, loginRes.token)
 
-      // 이메일을 로컬스토리지에 저장
-      localStorage.setItem('user_email', loginRes.email)
+      confirmAlert(`${loginRes.nickname}님 환영합니다!`)
 
       router.push('/')
     } catch (error) {

weatherfit_refactoring/src/Components/Molecules/MainHeader.tsx

@@ -0,0 +1,47 @@
+'use client'
+
+import IconStore, { IconStyle } from '../Atoms/Icon/IconStore'
+import ButtonStore, { ButtonStyle } from '../Atoms/Button/ButtonStore'
+import BoxStore, { BoxStyle } from '../Atoms/Box/BoxStore'
+import { MouseEventHandler } from 'react'
+import { useRouter } from 'next/navigation'
+import Link from 'next/link'
+
+interface Props {
+  title: string
+  btnText?: string
+  iconStyleCase?: IconStyle
+  buttonStyleCase?: ButtonStyle
+  onClickFunction?: MouseEventHandler<HTMLButtonElement> | undefined
+  onClickFunction2?: () => void
+}
+
+export default function MainHeader({
+  title,
+  btnText,
+  iconStyleCase,
+  buttonStyleCase,
+  onClickFunction,
+  onClickFunction2,
+}: Props) {
+  const router = useRouter()
+
+  const onClickToMain =
+    title === '옷늘날씨' ? () => router.push('/') : undefined // 또는 다른 함수
+
+  return (
+    <div className="relative flex items-center justify-between h-[50px] my-1 pb-1">
+      <BoxStore
+        boxStyle={BoxStyle.BOX_BLUE}
+        style={`absolute left-1/2 transform -translate-x-1/2 px-2 h-[30px] font-neurimboGothic text-[22px] pb-[7px] shadow-[7px_7px_1px] flex items-center ${title === '옷늘날씨' ? 'cursor-pointer' : ''}`}
+        onClickFunction={onClickToMain}>
+        {title}
+      </BoxStore>
+      <Link
+        href={`/login`}
+        className="absolute right-[19px] font-gmarketsans text-black">
+        로그인
+      </Link>
+    </div>
+  )
+}

weatherfit_refactoring/src/Components/Molecules/NavBarBox.tsx

@@ -3,6 +3,7 @@ import { usePathname, useRouter } from 'next/navigation'
 import IconStore, { IconStyle } from '../Atoms/Icon/IconStore'
 import { useEffect, useState } from 'react'
 import Link from 'next/link'
+import TextStore, { TextStyle } from '../Atoms/Text/TextStore'
 
 interface Props {
   iconStyle: keyof typeof IconStyle
@@ -25,13 +26,15 @@ export default function NavBarBox({ iconStyle, title, url }: Props) {
     ? IconStyle[`${iconStyle}_FILL` as keyof typeof IconStyle]
     : IconStyle[iconStyle]
   const activeTextStyle = isActive
-    ? 'font-Cafe24SsurroundAir text-[11px] font-bold mt-[3px]'
-    : 'font-Cafe24SsurroundAir text-[11px] mt-[3px]'
+    ? 'text-[11px] font-bold mt-[3px]'
+    : 'text-[11px] mt-[3px]'
 
   return (
     <Link href={url} className="flex flex-col items-center cursor-pointer">
       <IconStore iconStyle={activeIconStyle} size={22} />
-      <p className={activeTextStyle}>{title}</p>
+      <TextStore textStyle={TextStyle.CAFE_TEXT} style={activeTextStyle}>
+        {title}
+      </TextStore>
     </Link>
   )
 }

weatherfit_refactoring/src/Components/Molecules/ProfileImageEdit.tsx

@@ -102,7 +102,7 @@ export default function ProfileImageEdit() {
       </div>
       <ButtonStore
         buttonStyle={ButtonStyle.CATEGORY_BTN_Y}
-        style="font-neurimboGothic">
+        style="font-neurimboGothic px-[7px]">
         이미지 수정
       </ButtonStore>
       {/* <button type="submit" className="font-gmarketsans">

weatherfit_refactoring/src/Components/Molecules/WeatherInfo.tsx

@@ -5,6 +5,7 @@ import { WeatherTempMin } from '@/Store/WeatherMinTemp'
 import { WeatherTemp } from '@/Store/WeatherTemp'
 import Image from 'next/image'
 import { useEffect, useState } from 'react'
+import TextStore, { TextStyle } from '../Atoms/Text/TextStore'
 
 type WeatherType =
   | 'Clear'
@@ -41,6 +42,18 @@ export default function WeatherInfo() {
     Haze: '실안개',
   }
 
+  const weatherImage = {
+    Clear: 'clear.png',
+    Rain: 'rain.png',
+    Thunderstorm: 'thunderstorm.png',
+    Snow: 'snow.png',
+    Mist: 'mist.png',
+    Drizzle: 'rain.png',
+    Clouds: 'clouds.png',
+    Fog: 'mist.png',
+    Haze: 'mist.png',
+  }
+
   useEffect(() => {
     const getLocation = async () => {
       try {
@@ -94,25 +107,33 @@ export default function WeatherInfo() {
 
   return (
     <div className="relative h-[300px] flex justify-center">
-      <Image
-        src={`/images/clear.png`}
-        alt="weatherimage"
-        width={390}
-        height={280}
-      />
+      {weat && (
+        <Image
+          src={`/images/${weatherImage[weat]}`}
+          alt="weatherimage"
+          width={390}
+          height={300}
+        />
+      )}
       <div className="absolute top-[140px] flex flex-col items-center">
-        <p className="font-Cafe24SsurroundAir text-[#616161] text-[14px]">
+        <TextStore
+          textStyle={TextStyle.GMARKET_TEXT}
+          style="text-[#616161] text-[14px]">
           {address}
-        </p>
-        <p className="font-NanumSquareRound text-white text-[45px]">
+        </TextStore>
+        <TextStore
+          textStyle={TextStyle.NANUM_TEXT}
+          style="text-white text-[45px]">
           {temperature} ℃
-        </p>
-        <p className="font-gmarketsans text-[#A8C6EC]">
+        </TextStore>
+        <TextStore textStyle={TextStyle.GMARKET_TEXT} style="text-black">
           {weat && weatherValue[weat as keyof typeof weatherValue]}
-        </p>
-        <p className="font-Cafe24SsurroundAir text-[#616161] text-[14px]">
+        </TextStore>
+        <TextStore
+          textStyle={TextStyle.GMARKET_TEXT}
+          style="text-[#616161] text-[14px]">
           최고 {temperatureMax}℃ / 최저 {temperatureMin}℃
-        </p>
+        </TextStore>
       </div>
     </div>
   )

weatherfit_refactoring/src/Components/Organisms/ProfileEditModal.tsx

@@ -35,7 +35,7 @@ export default function ProfileEditModal({ onClickFunction }: Props) {
           <ProfileImageEdit />
           <hr className="my-[10px]" />
           {/* 이메일, 이름, 닉네임 부분 */}
-          <div>
+          <div className="flex flex-col items-center">
             <ProfileModalInfo title="이메일" value="user@test.com" />
             <ProfileModalInfo title="이름" value="가나다" />
             <ProfileModalInfo title="닉네임" value="깜찍이" />
@@ -47,24 +47,24 @@ export default function ProfileEditModal({ onClickFunction }: Props) {
               <p className="font-gmarketsans text-[11px] mb-[10px]">
                 비밀번호 (8~20자 영문, 숫자, 특수기호 조합)
               </p>
-              <div className="mb-[5px]">
+              <div className="flex flex-col items-center mb-[5px]">
                 <InputStore
                   inputStyle={InputStyle.INPUT_WHITE}
                   inputType="password"
                   placeholderContents="현재 비밀번호"
-                  style="w-[40vw] h-[4vh] text-[12px] mb-[5px]"
+                  style="w-[50vw] h-[4vh] text-[12px] mb-[5px]"
                 />
                 <InputStore
                   inputStyle={InputStyle.INPUT_WHITE}
                   inputType="password"
                   placeholderContents="변경 비밀번호"
-                  style="w-[40vw] h-[4vh] text-[12px] mb-[5px]"
+                  style="w-[50vw] h-[4vh] text-[12px] mb-[5px]"
                 />
                 <InputStore
                   inputStyle={InputStyle.INPUT_WHITE}
                   inputType="password"
                   placeholderContents="변경 비밀번호 재확인"
-                  style="w-[40vw] h-[4vh] text-[12px] mb-[5px]"
+                  style="w-[50vw] h-[4vh] text-[12px] mb-[5px]"
                 />
               </div>
             </div>

weatherfit_refactoring/src/Components/molecules/ProfilePostBar.tsx

@@ -31,7 +31,7 @@ export default function ProfilePostBar({ onFeedClick, onLikeClick }: Props) {
               ? ButtonStyle.DEFAULT_BTN_FILL
               : ButtonStyle.DEFAULT_BTN
           }
-          style="font-neurimboGothic w-[100px]"
+          style="font-neurimboGothic w-[100px] pb-[5px]"
           onClickFunction={handleFeedClike}>
           피드
         </ButtonStore>
@@ -41,7 +41,7 @@ export default function ProfilePostBar({ onFeedClick, onLikeClick }: Props) {
               ? ButtonStyle.DEFAULT_BTN_FILL
               : ButtonStyle.DEFAULT_BTN
           }
-          style="font-neurimboGothic w-[100px]"
+          style="font-neurimboGothic w-[100px] pb-[5px]"
           onClickFunction={handleLikeClick}>
           좋아요
         </ButtonStore>

weatherfit_refactoring/src/app/login/page.tsx

@@ -14,9 +14,9 @@ export default function Login() {
         <LoginForm />
         <ButtonStore
           buttonStyle={ButtonStyle.TEXT_BTN}
-          style="font-NanumSquareRound text-[gray]"
-          btnText="회원가입"
-        />
+          style="font-NanumSquareRound text-[gray]">
+          회원가입
+        </ButtonStore>
         <EasyLogin />
       </div>
       <NavBar />