From f5e54de6388446074ca3c3b7ee5a275b7f6a0e73 Mon Sep 17 00:00:00 2001
From: Jungu Lee <1zzangjun@gmail.com>
Date: Sun, 12 Nov 2023 08:48:22 +0900
Subject: [PATCH 1/2] =?UTF-8?q?New=20:=20=EC=95=84=EC=9D=B4=EC=BD=98=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/assets/icons/CameraIcon.svg | 8 ++++++++
 client/src/assets/icons/PinIcon.svg    | 8 ++++++++
 2 files changed, 16 insertions(+)
 create mode 100644 client/src/assets/icons/CameraIcon.svg
 create mode 100644 client/src/assets/icons/PinIcon.svg

diff --git a/client/src/assets/icons/CameraIcon.svg b/client/src/assets/icons/CameraIcon.svg
new file mode 100644
index 0000000..1ef635f
--- /dev/null
+++ b/client/src/assets/icons/CameraIcon.svg
@@ -0,0 +1,8 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_209_7236" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
+<rect width="24" height="24" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_209_7236)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5 1C2.79086 1 1 2.79086 1 5V19C1 21.2091 2.79086 23 5 23H19C21.2091 23 23 21.2091 23 19V5C23 2.79086 21.2091 1 19 1H5ZM9.55554 7.11111C9.55554 7.78612 9.00834 8.33333 8.33331 8.33333C7.65829 8.33333 7.11109 7.78612 7.11109 7.11111C7.11109 6.43611 7.65829 5.88889 8.33331 5.88889C9.00834 5.88889 9.55554 6.43611 9.55554 7.11111ZM6.95039 18.1111H18.4657C19.4005 18.1111 19.9893 17.1044 19.531 16.2897L16.1208 10.2271C15.6535 9.39644 14.4575 9.39644 13.9903 10.2271L11.7928 14.1337L10.5725 12.3032C10.0887 11.5775 9.02236 11.5775 8.53859 12.3032L5.93344 16.2109C5.39195 17.0232 5.97421 18.1111 6.95039 18.1111Z" fill="#B8B8B8"/>
+</g>
+</svg>
diff --git a/client/src/assets/icons/PinIcon.svg b/client/src/assets/icons/PinIcon.svg
new file mode 100644
index 0000000..63c1bd1
--- /dev/null
+++ b/client/src/assets/icons/PinIcon.svg
@@ -0,0 +1,8 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_209_13747" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
+<rect width="24" height="24" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_209_13747)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 22C12 22 20 17.5556 20 10.0808C20 5.6179 16.4183 2 12 2C7.58172 2 4 5.6179 4 10.0808C4 16.4444 12 22 12 22ZM12 13C13.6569 13 15 11.6569 15 10C15 8.34315 13.6569 7 12 7C10.3431 7 9 8.34315 9 10C9 11.6569 10.3431 13 12 13Z" fill="#B8B8B8"/>
+</g>
+</svg>

From 3f083b5bd7f74cc6af133bdaaae003fa512853c0 Mon Sep 17 00:00:00 2001
From: Jungu Lee <1zzangjun@gmail.com>
Date: Sun, 12 Nov 2023 08:48:44 +0900
Subject: [PATCH 2/2] =?UTF-8?q?Refactor=20:=20=EA=B8=80=EC=93=B0=EA=B8=B0?=
 =?UTF-8?q?=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EA=B3=A0=EB=8F=84=ED=99=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../app/(protectedRoute)/new-post/page.tsx    | 152 ++++++++++++------
 client/src/app/@Modal/(.)new-post/page.tsx    |   5 +-
 2 files changed, 107 insertions(+), 50 deletions(-)

diff --git a/client/src/app/(protectedRoute)/new-post/page.tsx b/client/src/app/(protectedRoute)/new-post/page.tsx
index 4212d0b..fbc3133 100644
--- a/client/src/app/(protectedRoute)/new-post/page.tsx
+++ b/client/src/app/(protectedRoute)/new-post/page.tsx
@@ -15,10 +15,11 @@ import GoBackIcon from "@/assets/icons/GoBackIcon.svg";
 import InputSearchIcon from "@/assets/icons/InputSearchIcon.svg";
 import AlcholeSearchIcon from "@/assets/icons/AlcholeSearchIcon.svg";
 import { useRouter } from "next/navigation";
-import { ChangeEvent, useEffect, useState } from "react";
-import { useUserInfoQuery } from "@/queries/auth/useUserInfoQuery";
+import { ChangeEvent, useEffect, useMemo, useState } from "react";
 import axios from "@/libs/axios";
 import HOME from "@/const/clientPath";
+import CameraIcon from "@/assets/icons/CameraIcon.svg";
+import PinIcon from "@/assets/icons/PinIcon.svg";
 
 export default function NewpostPage() {
   const [formValue, setFormValue] = useState({
@@ -77,11 +78,21 @@ export default function NewpostPage() {
           });
       });
   };
-  const [userTypedTag, setUserTypedTag] = useState<string>();
+  const [userTypedTag, setUserTypedTag] = useState<string>("");
   const [file, setFile] = useState<File>();
+  const [fileUrl, setFileUrl] = useState<string | ArrayBuffer | null>();
+
+  useEffect(() => {
+    if (!file) {
+      return;
+    }
+    const reader = new FileReader();
+    reader.readAsDataURL(file);
+    reader.onloadend = () => setFileUrl(reader.result);
+  }, [file]);
 
   return (
-    <>
+    <Paper>
       <AppBar position={"static"}>
         <Toolbar sx={{ display: "flex", justifyContent: "space-between" }}>
           <ButtonBase onClick={() => router.back()}>
@@ -90,7 +101,11 @@ export default function NewpostPage() {
           <Typography variant="subtitle2" fontWeight={"bold"}>
             포스팅
           </Typography>
-          <Typography variant="subtitle2" color={"primary.main"}>
+          <Typography
+            onClick={submitHandler}
+            variant="subtitle2"
+            color={"primary.main"}
+          >
             공유
           </Typography>
         </Toolbar>
@@ -104,11 +119,6 @@ export default function NewpostPage() {
             gap: 2,
             p: 2,
           }}
-          component="form"
-          onSubmit={(e) => {
-            e.preventDefault();
-            submitHandler();
-          }}
         >
           <TextField
             placeholder="지금 어떤 술을 마시고 있나요?"
@@ -128,7 +138,9 @@ export default function NewpostPage() {
             placeholder="입력해주세요"
             multiline
             name={"postContent"}
-            onChange={changeHadler}
+            onChange={(e) => {
+              e.target.value.length <= 200 && changeHadler(e);
+            }}
             value={formValue.postContent}
             rows={6}
           />
@@ -139,51 +151,93 @@ export default function NewpostPage() {
               200자
             </Typography>
           </Typography>
-          {formValue.tagList.map((tag) => {
-            return <Typography variant="label">{tag}</Typography>;
-          })}
-          <Box>
+          <Box sx={{ display: "flex", gap: 1 }}>
+            {formValue.tagList.map((tag) => {
+              return <Typography variant="label">#{tag}</Typography>;
+            })}
+          </Box>
+          <Box
+            component="form"
+            onSubmit={(e) => {
+              e.preventDefault();
+              setFormValue((prev) => {
+                if (!userTypedTag) return prev;
+                return { ...prev, tagList: [...prev.tagList, userTypedTag] };
+              });
+              setUserTypedTag("");
+            }}
+            sx={{ display: "flex", gap: 1 }}
+          >
             <TextField
               onChange={({ target }) => setUserTypedTag(target.value)}
               value={userTypedTag}
-            ></TextField>
-            <Button
-              onClick={(e) => {
-                e.preventDefault();
-                setFormValue((prev) => {
-                  if (!userTypedTag) return prev;
-                  return { ...prev, tagList: [...prev.tagList, userTypedTag] };
-                });
-                setUserTypedTag("");
-              }}
-            >
-              태그 추가
-            </Button>
+              size="small"
+              sx={{ flexShrink: 1 }}
+            />
+            <Button type="submit">태그 추가</Button>
           </Box>
-          <Button component="label" variant="contained">
-            Upload file
-            <input
-              id="image"
-              type="file"
-              accept="image/*"
-              name="image"
-              onChange={(e) => {
-                if (e.target.files) {
-                  setFile(e.target.files[0]);
-                  let reader = new FileReader();
-                  reader.readAsDataURL(e.target.files[0]);
-                  reader.onloadend = () => {
-                    // 2. 읽기가 완료되면 아래코드가 실행됩니다.
-                    const base64 = reader.result;
-                  };
-                  // setFile(e.target.files[0]);
-                }
+          {fileUrl && (
+            <Box
+              sx={{
+                backgroundImage: `url(${fileUrl})`,
+                width: "100%",
+                height: 142,
+                borderRadius: 4,
+                border: "1px solid",
+                borderColor: "gray.secondary",
+                backgroundRepeat: "no-repeat",
+                backgroundSize: "cover",
+                backgroundPosition: "center",
               }}
             />
-          </Button>
-          <Button type="submit">작성하기</Button>
+          )}
+          <Box sx={{ display: "flex", gap: 2 }}>
+            <Box
+              component={"label"}
+              sx={{
+                bgcolor: "#F5F5F5",
+                border: "1px solid",
+                borderColor: "#E6E6E6",
+                width: 72,
+                height: 72,
+                borderRadius: 1.5,
+                display: "flex",
+                justifyContent: "center",
+                alignItems: "center",
+              }}
+            >
+              <CameraIcon />
+              <input
+                name="image"
+                style={{ display: "none" }}
+                type="file"
+                accept="image/*"
+                onChange={(e) => {
+                  if (e.target.files) {
+                    setFile(e.target.files[0]);
+                  }
+                }}
+              />
+            </Box>
+            <Box
+              component={"label"}
+              sx={{
+                bgcolor: "#F5F5F5",
+                border: "1px solid",
+                borderColor: "#E6E6E6",
+                width: 72,
+                height: 72,
+                borderRadius: 1.5,
+                display: "flex",
+                justifyContent: "center",
+                alignItems: "center",
+              }}
+            >
+              <PinIcon />
+            </Box>
+          </Box>
         </Paper>
       </Container>
-    </>
+    </Paper>
   );
 }
diff --git a/client/src/app/@Modal/(.)new-post/page.tsx b/client/src/app/@Modal/(.)new-post/page.tsx
index 37ae82c..2dfd2bc 100644
--- a/client/src/app/@Modal/(.)new-post/page.tsx
+++ b/client/src/app/@Modal/(.)new-post/page.tsx
@@ -1,10 +1,13 @@
 import AuthProtectorlayout from "@/app/(protectedRoute)/layout";
+import NewpostPage from "@/app/(protectedRoute)/new-post/page";
 import ModalWrapper from "@/components/ModalWrapper";
 
 const NewPostPage = () => {
   return (
     <AuthProtectorlayout>
-      <ModalWrapper>{"페이지"}</ModalWrapper>
+      <ModalWrapper disableBox>
+        <NewpostPage />
+      </ModalWrapper>
     </AuthProtectorlayout>
   );
 };