프론트엔드 부트캠프 63일차, 팀 프로젝트(9) 배너에 네비게이션 이름 띄우기

 

클라우디너리 가입하기

 

여기서 라이언을 메모해놓는다. 

 

상단바 오른쪽에 아이디가 적혀있는데 이것도 메모 해놓는다.

 

 

vscode에서

  const [createThemegql] = useMutation(CREATE_THEME);
  const router = useRouter();
  const [imgurl, setImgurl] = useState("");
  const { register, handleSubmit } = useForm();
  const [value, setValue] = useState(0);
  const onSubmitCreateTheme = async (data) => {
    try {
      const result = await createThemegql({
        variables: {
          cafeName: data.cafeName,
          genreName: data.genreName,
          createThemeInput: {
            title: data.title,
            rank: value,
            intro_title: data.intro_title,
            intro_content: data.intro_content,
            mainImg: imgurl,
            subImgs: [imgurl],
            agelimit: Number(data.agelimit),
          },
        },
      });
      Modal.success({ content: "테마등록 성공" });
      // router.push(`/admin/theme/detail/${result.data.createTheme.title}`);
    } catch (error) {
      Modal.error({ content: error.message });
    }
  };
  const upload = (file) => {
    const formData = new FormData();
    formData.append("file", file);
    formData.append("upload_preset", "{unsigned아이디(라이언)}");

    const result = fetch(
      "https://api.cloudinary.com/v1_1/{본인아이디}/image/upload",
      {
        method: "POST",
        body: formData,
      }
    ).then((response) => {
      return response.json();
    });
    return result;
  };
  const onChangeFile = async (event) => {
    const file = event.target.files?.[0];
    upload(file).then((result) => setImgurl(result.url));
  };

라이언이랑 본인 아이디 있는 부분에 각각 넣는다. 

 

우화하

오늘은 완전 뿌듯한날,,,

 

테마 관련 페이지에선 배너에 Theme, 테마 글씨를 띄우고 

예약 관련 페이지에선 배너에 Reservation, 예약 이런식으로 바뀌게 할 거다! 

(gif찍은거보니까 배너 이미지가 조금 흔들리는데 휠이 생겼다 없어졌다 하면서 조금 흔들리는 것 같다. 휴)

 

export default function LayoutBanner() {
  const router = useRouter();
  const [activedMenu, setActivedMenu] = useState("");
  const NAVIGATION_MENUS = [
    { kor: "매장", eng: "Cafe", page: "/cafe" },
    { kor: "테마", eng: "Theme", page: "/theme" },
    { kor: "예약", eng: "Reservation", page: "/reservation" },
    { kor: "커뮤니티", eng: "Community", page: "/community" },
    { kor: "마이페이지", eng: "Mypage", page: "/mypage" },
  ];

  useEffect(() => {
    if (!router.asPath.includes(activedMenu) || activedMenu === "") {
      setActivedMenu(router.asPath);
    }
  }, [router.asPath]);

어제 헤더에 했던 것처럼 담는데, 보여줄 이름 두 개를 추가했다(kor, eng). 

 

useEffect는 페이지가 바뀔때마다 activedMenu를 바꾸는 역할을 한다. 

	<EngMenu>
            {NAVIGATION_MENUS.map((el) => {
              if (activedMenu.includes(el.page)) return el.eng;
              else return "";
            })}
          </EngMenu>
          <KorMenu>
            {NAVIGATION_MENUS.map((el) => {
              if (activedMenu.includes(el.page)) return el.kor;
              else return "";
            })}
          </KorMenu>

메뉴에 맵을 돌려서 activedMenu가 요소의 page를 포함하고 있으면, 즉 각각의 page 중 activedMenu안에 포함된 게 있으면

그것의 eng와 kor을 return하는 식으로 짜봤는데 괜찮은건진 모르겠다. 아무래도 map을 돌리니까 전부 다 순회하면서 찾으니까 비효율적인가 싶기도 하고...

 

+ 처음에 이 부분 map이 아니라 filter로 해서 오류나고 그랬었다! 단순히 그런 요소만 걸러내서 보여주면 되지 않나? 라고 생각했었는데 생각대로 되지 않았다... 

(Objects are not valid as a React child (found: object with keys {kor, eng, page}). If you meant to render a collection of children, use an array instead.)

return el.kor에 문제가 있는 걸 깨닫고 map으로 바꿔봄~ 처음엔 배열의 page의 첫글자를 대문자로 바꾸면 됐다가 소문자로 바꾸면 안됐다가...해서 뭐지?이게 무슨 상관이지 했는데 당연함... else에 걸려서 return "";로 빠져서 오류가 안나는 것 뿐이었음 이것때매 되게 헤맬뻔했다! 

 

모바일에선 이렇게 뜨게 크기도 조절했는데 햄버거가 약간 두꺼운,,,맛있는 햄버거네...!

 

좌충우돌 배너 이미지 정하기도 끝났는데 이건 내가 너무 지쳐보여서ㅠㅠㅋㅋㅋ Ok해준 것 같아서 걱정... 

배너 이미지는 unsplash에서 하늘 가져오고 달 따로 가져와서 달 넣고 지우개로 밑에 지우고 수채화 브러쉬 다운받은 거 있던 것 중에 두 개 찍어서 만든건데, 색 보정을 몇 번 했다고 화질이 저렇게 안 좋아져도 되는거야?? 이건 해결해야할 것 같다. 퍼블리싱은 언제 끝날까! 하핫

 

 

 오늘은 정!!!말 일찍 나왔다. 4시~5시 그쯤에 나온 것 같다. 프리캠프때부터, 5월 2일부터 평일에는 6시 30분 이전에는 나간적이 없으니까 두달만이다. 조퇴하는 것 같고 기분이 이상하고 집에 와서도 참 찝찝했다... 쉬는 게 쉬는 게 아니지만 그래도 좋다^ㅅ^ 저번주는 항상 밤까지 있었어서 기분이 더 이상하다. 배너를 (얼렁뚱땅) 마치기도 했고, api 요청하고 받아오는 부분에 문제가 있는데 백엔드 중 한 분이 면접보러가셔서 진도가 더 나갈 수 없다고 생각했다. 그리고 내가 맡은 부분이 바뀌어져있었는데 하필 그 부분에서 또 문제가 있어서... 아주 약간은 속상하기도 했다.🥹 (당연히 어느 누구의 탓도 아니였다! 오히려 감사한 부분이었다.) 오늘 내가 일찍 빠졌으니 관리자 페이지 UI도 좀 해야겠다ㅎㅎ흐흐 UI는 참 잘되면 재밌는데,,, 

 

  공원에서 산책하고 돗자리 깔고 싶어서 바로 애들 데리러~~!!! 돗자리는 학원에 있는거 이제 집에 가져갈까 생각중이었어서 그거 그대로 들고 나왔다. 생각보다 더웠다...! 그래도 오늘은 어제보단 시원했던 것 같다. 아마도. 근데 허리가 너무 아파서 누워있을 수가 없었고 두 마리를 감당하기엔 역부족이었다... ㅠㅠㅠ~~~ 그래도 엄마 오시고 잠시 산책할 땐 너무 평화롭고 좋았다. 이 평화로운 느낌이 영원하기를 

 

🐻 프론트엔드

 - 퍼블리싱 +(배너, 사이드바, 반응형), 관리자 페이지 조금 

 

🐻‍❄️ 백엔드

 - api

 

🍚 점심

 - 프레퍼스 닭가슴살 샐러드 

 

🍬 간식

 - 미니 트윅스

 

☕️ 커피

 - 콤부차 

 

🎵 노래

 - 메이플스토리 공연 예습!!! 공허의 파도 듣는데 왜 지휘자가 필요한지 이제야 조금 느껴지고... 실제로 들으면 눈물날 것 같았다! 아빠가 베토벤 바이러스 같이 보자면서 지휘자가 왜 필요한지 토막 영상 보여주셨었는데 그때 생각났다. 

 

👀 비고

 - 오늘은 정말 일찍 나온날. 그리고 정말 일찍 잘거야! 컨디션 완전 회복하고 가잣😎 얇은 담요를 사고 싶어!